@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap");
*{box-sizing:border-box}
:root{
  --paper:rgba(255,255,255,.035);
  --ink:#f8fbff;
  --ink-soft:rgba(248,251,255,.72);
  --line:rgba(255,255,255,.22);
  --panel:rgba(7,27,50,.28);
  --panel-strong:rgba(6,23,42,.52);
  --root-size:16px;
  font-size:var(--root-size);
}
html,body{margin:0;color:var(--ink)}
body{
  font-family:"Courier New",Courier,monospace;
  -webkit-font-smoothing:antialiased;
  background:#4f9bd0;
  min-height:100vh;
  overflow:hidden;
}

.cyanotype-background{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#073b70;
  pointer-events:none;
}
.cyanotype-layer,
.cyanotype-wash{
  inset:0;
  background-image:
    repeating-radial-gradient(circle at 18% 23%,
      rgba(255,255,255,.025) 0 1px,
      rgba(24,64,118,.018) 1px 2px,
      transparent 2px 5px),
    repeating-linear-gradient(112deg,
      rgba(255,255,255,.015) 0 1px,
      transparent 1px 4px),
    linear-gradient(180deg,rgba(103,178,224,.28),rgba(51,126,184,.30)),
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  background-size:7px 7px, 11px 11px, 100% 100%, 100% 100%;
  mix-blend-mode:soft-light;
  opacity:.95;
}
.cyanotype-layer{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  will-change:opacity,transform,filter;
  transition:opacity .16s linear;
}
.bg-one{
  background-image:url("bg_texture_1.webp");
  opacity:.34;
  filter:saturate(.78) contrast(1.06) brightness(1.04);
  transform:scale(1.055);
}
.bg-two{
  background-image:url("bg_texture_2.jpg");
  opacity:.13;
  mix-blend-mode:screen;
  filter:saturate(.62) contrast(1.02) brightness(1.12);
  transform:scale(1.07);
}
.bg-three{
  background-image:url("bg_texture_3.jpg");
  opacity:.09;
  mix-blend-mode:soft-light;
  filter:saturate(.74) contrast(1.05) brightness(1.08);
  transform:scale(1.045);
}
.cyanotype-wash{
  inset:0;
  background-image:
    repeating-radial-gradient(circle at 18% 23%,
      rgba(255,255,255,.025) 0 1px,
      rgba(24,64,118,.018) 1px 2px,
      transparent 2px 5px),
    repeating-linear-gradient(112deg,
      rgba(255,255,255,.015) 0 1px,
      transparent 1px 4px),
    linear-gradient(180deg,rgba(103,178,224,.28),rgba(51,126,184,.30)),
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  background-size:7px 7px, 11px 11px, 100% 100%, 100% 100%;
  mix-blend-mode:soft-light;
  opacity:.95;
}

button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}

.site-shell{
  position:relative;
  z-index:1;
  height:100vh;
  display:grid;
  grid-template-columns:8rem minmax(0,1fr) 2.8rem;
  overflow:hidden;
  background:transparent;
}

/* left navigation */
.left-column{
  height:100vh;
  border-right:1px solid rgba(35,52,130,.18);
  padding:1rem .8rem 1.1rem;
  display:flex;
  flex-direction:column;
  position:relative;
  background:#f8fbff;
  color:#263b8d;
}
.top-tools{
  display:flex;
  align-items:center;
  gap:.15rem;
}
.top-tools button{
  border:0;
  background:transparent;
  padding:.15rem .2rem;
  font-size:.64rem;
  text-decoration:underline;
  text-decoration-color:rgba(17,17,17,.25);
  text-underline-offset:3px;
}
.top-tools button:hover{text-decoration-color:var(--ink);opacity:1}
.side-nav{
  margin:auto 0;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.side-nav a{
  font-size:.67rem;
  text-decoration:none;
}
.side-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.site-mark{
  font-size:.62rem;
  line-height:1.12;
  color:var(--ink-soft);
}

/* reader */
.reader{
  height:100vh;
  overflow-y:auto;
  scrollbar-width:none;
  scroll-behavior:smooth;
}
.reader::-webkit-scrollbar{display:none}
.essay{
  width:min(94%,70rem);
  margin:0 auto;
  padding:7rem clamp(2.4rem,5vw,5.5rem) 9rem;
  background:linear-gradient(180deg,rgba(5,24,44,.08),rgba(5,24,44,.16));
}
.essay-header{margin-bottom:6.5rem}
.eyebrow{
  text-transform:uppercase;
  font-size:.57rem;
  letter-spacing:.14em;
  margin-bottom:1rem;
  color:var(--ink-soft);
}
h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(4.2rem,8vw,8rem);
  font-weight:400;
  line-height:.84;
  letter-spacing:-.055em;
  max-width:8ch;
}
.essay>p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.24rem;
  line-height:1.66;
  text-align:left;
  margin:0 0 2.8rem;
  padding:0;
  max-width:none;
  text-indent:0;
}

/* inline quadras */
.inline-quadra{
  margin:3.7rem 0 4.2rem;
  display:grid;
  grid-template-columns:2.1rem minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.quadra-index{
  font-size:.53rem;
  padding-top:.42rem;
}
.inline-quadra blockquote{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.65rem,3vw,2.8rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.inline-quadra blockquote span{display:block}
.scheme,.solution{
  grid-column:2;
  width:max-content;
  max-width:100%;
  margin-top:.75rem;
  padding-top:.38rem;
  border-top:1px solid rgba(255,255,255,.55);
  font-size:.58rem;
  color:var(--ink-soft);
}

.metric-grid{
  margin:3.2rem 0 4rem;
  display:grid;
  grid-template-columns:1fr 2.2rem;
  border-top:1px solid rgba(255,255,255,.8);
  font-size:.62rem;
  color:var(--ink-soft);
}
.metric-grid span,.metric-grid b{
  padding:.55rem .35rem;
  border-bottom:1px solid var(--line);
}
.metric-grid b{text-align:right;font-weight:400}

/* 2x2 interactive examples */
.examples-section{
  margin:5rem 0;
}
.section-label{
  margin-bottom:1rem;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.examples-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.example-card{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(6,23,42,.18);
  padding:1rem;
  display:flex;
  flex-direction:column;
  text-align:left;
  overflow:hidden;
  color:var(--ink);
}
.example-card:hover{background:rgba(255,255,255,.06)}
.example-number{
  font-size:.53rem;
  margin-bottom:auto;
}
.example-poem{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.15rem,2.25vw,1.9rem);
  line-height:1.08;
}
.example-poem>span{display:block}
.example-answer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.4rem;
  background:rgba(5,26,48,.94);
  color:#fff;
  font-size:clamp(.85rem,1.6vw,1.2rem);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  text-align:center;
}
.example-card.revealed .example-answer{opacity:1}

/* cutter */
.forma-section{
  margin-top:8rem;
  padding-top:3rem;
  border-top:1px solid rgba(255,255,255,.8);
}
.forma-head h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:4.2rem;
  line-height:.9;
  font-weight:400;
  letter-spacing:-.045em;
}
.forma-head p{
  max-width:60ch;
  margin:1rem 0 2.2rem;
  font-size:.67rem;
  line-height:1.55;
}
.cutter-controls{
  padding:.8rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem .9rem;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cutter-controls label,
.cutter-controls button{
  font-size:.58rem;
  text-transform:uppercase;
}
.file-button{
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cutter-controls button{
  border:1px solid rgba(255,255,255,.8);
  background:rgba(6,23,42,.12);
  padding:.42rem .6rem;
}
.cutter-controls button:hover:not(:disabled){
  background:#fff;
  color:#0a3c6f;
}
.cutter-controls button:disabled{opacity:.3;cursor:not-allowed}
.cutter-controls input[type="number"]{
  width:3.4rem;
  padding:.2rem;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.75);
  background:transparent;
  color:#fff;
}
.check-label{display:flex;align-items:center;gap:.35rem}
.check-label input{accent-color:#111}
.cutter-status{
  min-height:1.8rem;
  padding:.55rem 0;
  font-size:.55rem;
  opacity:.55;
}
.cutter-stage{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.cutter-panel{min-width:0}
.panel-label{
  margin-bottom:.35rem;
  font-size:.52rem;
  text-transform:uppercase;
}
.preview-frame{
  position:relative;
  min-height:25rem;
  border:1px solid rgba(255,255,255,.82);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:rgba(255,255,255,.05);
}
#source-canvas{
  display:none;
  max-width:100%;
  max-height:34rem;
  width:auto;
  height:auto;
}
#source-frame{cursor:pointer;}
#source-frame::after{content:"carregar";position:absolute;right:.55rem;bottom:.45rem;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);pointer-events:none;}
#result-canvas{
  display:none;
  max-width:100%;
  max-height:34rem;
  width:auto;
  height:auto;
}
.empty-note{
  position:absolute;
  font-size:.58rem;
  opacity:.72;
  color:#fff;
  text-transform:uppercase;
}
.seed-line{
  margin-top:.5rem;
  font-size:.52rem;
  opacity:.72;
  color:var(--ink-soft);
}

/* right scrollbar: no guide/track line */
.right-column{
  height:100vh;
  border-left:1px solid var(--line);
  position:relative;
  display:flex;
  justify-content:center;
  background:rgba(4,24,45,.15);
  backdrop-filter:blur(2px);
}
.scroll-zone{
  position:absolute;
  top:1rem;
  bottom:2.7rem;
  width:100%;
}
.scroll-thumb{
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  min-height:1.4rem;
  transform:translateX(-50%);
  background:#fff;
  opacity:.78;
  transition:opacity 2.6s ease;
  cursor:grab;
}
.scroll-thumb.faded{opacity:.08}
.scroll-thumb.dragging{opacity:.85;cursor:grabbing}
.scroll-percent{
  position:absolute;
  bottom:1rem;
  font-size:.5rem;
  opacity:.62;
  color:var(--ink-soft);
}

/* print/download */
@media print{
  body{background:white}
  .left-column,.right-column,.forma-section{display:none!important}
  .site-shell{display:block;height:auto}
  .reader{height:auto;overflow:visible}
  .essay{width:auto;max-width:760px;padding:2rem 2.5rem}
  .essay>p{font-size:13pt}
  .inline-quadra,.examples-grid{break-inside:avoid}
  .generated-inline.hidden{display:none!important}
}

@media (max-width:760px){
  .site-shell{grid-template-columns:5.3rem minmax(0,1fr) 1.4rem}
  .left-column{padding:.8rem .45rem}
  .top-tools{flex-direction:column;align-items:flex-start}
  .essay{width:100%;padding:4.5rem 1.2rem 7rem}
  .examples-grid{grid-template-columns:1fr}
  .example-card{aspect-ratio:auto;min-height:16rem}
  .cutter-stage{grid-template-columns:1fr}
  .preview-frame{min-height:18rem}
}

.upload-target{
  cursor:pointer;
  outline:none;
  transition:background .15s ease,border-color .15s ease;
}
.upload-target:hover,
.upload-target:focus-visible{
  background:rgba(255,255,255,.08);
  border-color:#fff;
}
.upload-target:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42);
}

.left-column a,
.left-column button,
.left-column .site-mark{
  color:#263b8d;
}
.left-column .top-tools button{
  text-decoration-color:rgba(38,59,141,.26);
}
.left-column .top-tools button:hover{
  text-decoration-color:#263b8d;
}
.left-column .side-nav a:hover{
  text-decoration-color:#263b8d;
}

/* autocutter fragments become part of the essay flow.
   Each figure is inserted BETWEEN block elements, then floated so the next
   paragraph wraps around it. Position and width snap to a 12-column logic. */
.essay.autocut-grid-active{
  background-image:
    linear-gradient(to right,
      rgba(255,255,255,var(--flow-grid-alpha,.08)) 1px,
      transparent 1px);
  background-size:calc(100% / 12) 100%;
  background-position:left top;
}
.essay-fragment-flow{
  --fragment-gap:.8rem;
  --fragment-bg:#f8fbff;
  position:relative;
  box-sizing:border-box;
  width:calc(var(--fragment-span,4) / 12 * 100%);
  margin-top:var(--fragment-gap);
  margin-bottom:var(--fragment-gap);
  padding:0;
  background:var(--fragment-bg);
  z-index:1;
  break-inside:avoid;
}
.essay-fragment-flow.float-left{
  float:left;
  margin-left:calc(var(--fragment-offset,0) / 12 * 100%);
  margin-right:var(--fragment-gap);
}
.essay-fragment-flow.float-right{
  float:right;
  margin-right:calc(var(--fragment-offset,0) / 12 * 100%);
  margin-left:var(--fragment-gap);
}
.essay-fragment-flow.free-position.float-left{
  width:var(--fragment-width-free);
  margin-left:var(--fragment-offset-free);
}
.essay-fragment-flow.free-position.float-right{
  width:var(--fragment-width-free);
  margin-right:var(--fragment-offset-free);
}
.essay-fragment-flow img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.essay-fragment-flow.stroke-on{
  outline:1px solid rgba(255,255,255,.72);
  outline-offset:-1px;
}
.essay-fragment-flow.crop-on::before,
.essay-fragment-flow.crop-on::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  pointer-events:none;
}
.essay-fragment-flow.crop-on::before{
  left:-5px;
  top:-5px;
  border-left:1px solid #fff;
  border-top:1px solid #fff;
}
.essay-fragment-flow.crop-on::after{
  right:-5px;
  bottom:-5px;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
}
.fragment-id,
.fragment-word{
  position:absolute;
  z-index:2;
  font-family:"Courier New",Courier,monospace;
  font-size:.48rem;
  line-height:1;
  color:#263b8d;
  background:rgba(248,251,255,.86);
  padding:.15rem .2rem;
}
.fragment-id{left:.2rem;top:.2rem}
.fragment-word{right:.2rem;bottom:.2rem}
.essay>p{
  position:relative;
}
.inline-quadra,
.metric-grid,
.examples-section,
.forma-section{
  clear:both;
}
.flow-clear{
  clear:both;
  height:0;
}
@media(max-width:760px){
  .essay-fragment-flow,
  .essay-fragment-flow.float-left,
  .essay-fragment-flow.float-right,
  .essay-fragment-flow.free-position.float-left,
  .essay-fragment-flow.free-position.float-right{
    float:none;
    width:min(72%,var(--fragment-width-free,72%));
    margin:1rem auto 1.3rem;
  }
}

/* richer cutter controls, adapted from the uploaded autocutter UI */
.cutter-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .65rem;
  padding:.65rem 0;
  border-top:1px solid rgba(255,255,255,.24);
}
.cutter-controls + .cutter-controls{
  border-top:0;
}
.cutter-controls button,
.file-button,
.control-inline,
.range-control,
.select-control,
.seed-control{
  font-family:"Courier New",Courier,monospace;
  font-size:.56rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.cutter-controls button{
  color:#fff;
  border:0;
  background:transparent;
  padding:.25rem .34rem;
  height:1.8rem;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:4px;
}
.cutter-controls button:hover:not(:disabled){
  background:transparent;
  color:#fff;
  text-decoration-color:#fff;
}
.cutter-controls button.active{
  text-decoration-color:#fff;
}
.cutter-controls button:disabled{
  opacity:.3;
}
.step-button{
  font-size:.8rem!important;
  text-decoration:none!important;
}
.control-inline,
.range-control,
.seed-control{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.control-inline input[type="number"]{
  width:2.5rem;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.55);
  background:transparent;
  color:#fff;
  text-align:center;
}
.range-control input[type="range"]{
  appearance:none;
  width:4.7rem;
  height:1px;
  background:rgba(255,255,255,.7);
}
.range-control input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:8px;height:8px;border-radius:0;background:#fff;border:0;
}
.range-control input[type="range"]::-moz-range-thumb{
  width:8px;height:8px;border-radius:0;background:#fff;border:0;
}
.range-control output{
  min-width:2rem;
  opacity:.7;
}
.select-control select{
  appearance:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.45);
  background:transparent;
  color:#fff;
  font:inherit;
  padding:.2rem .1rem;
}
.select-control select option{
  color:#111;
}
.color-control input[type="color"]{
  width:1.4rem;
  height:1.15rem;
  padding:0;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
}
.seed-control input{
  width:4.2rem;
  border:0;
  border-bottom:1px dotted rgba(255,255,255,.5);
  background:transparent;
  color:#fff;
  text-align:center;
  text-transform:uppercase;
}
.cutter-status{
  color:rgba(255,255,255,.75);
}


/* primary autocutter actions */
.file-button,
#cut-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.9rem;
  padding:.32rem .62rem !important;
  background:#f8fbff !important;
  color:#263b8d !important;
  border:1px solid #f8fbff !important;
  text-decoration:none !important;
  font-weight:700;
}
.file-button:hover,
.file-button:focus-visible,
#cut-button:hover:not(:disabled),
#cut-button:focus-visible{
  background:#ffffff !important;
  color:#17327f !important;
  outline:1px solid rgba(255,255,255,.45);
  outline-offset:2px;
}
#cut-button:disabled{
  background:rgba(248,251,255,.35) !important;
  color:rgba(38,59,141,.55) !important;
  border-color:rgba(248,251,255,.35) !important;
}
.essay-fragment-flow{
  transition:width .14s ease,margin .14s ease,transform .14s ease;
}


/* permanent 12-column essay grid — visible from first load */
.essay.autocut-grid-active{
  background-image:
    linear-gradient(
      to right,
      rgba(255,255,255,var(--flow-grid-alpha,.065)) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      rgba(5,24,44,.08),
      rgba(5,24,44,.16)
    );
  background-size:
    calc(100% / 12) 100%,
    100% 100%;
  background-position:left top,left top;
  background-repeat:repeat,no-repeat;
}

/* aware + grid are intentionally locked on */
.locked-control:disabled{
  opacity:1 !important;
  cursor:default !important;
  text-decoration-color:#fff !important;
  color:#fff !important;
}


/* =========================================================
   V11 — JAPANESE CD JEWEL CASE / OBI LAYOUT
   Outer proportion: 142:125
   Main square: 125 / 142 = 88.028%
   Content sliver: 17 / 142 = 11.972%
   ========================================================= */

:root{
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", "Courier New", monospace;
  --display-serif: Georgia, "Times New Roman", serif;
  --obi-indigo:#263b8d;
  --paper-white:#f8fbff;
}

/* Everything is system monospace by default. */
html,
body,
button,
input,
select,
textarea{
  font-family:var(--mono);
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:1rem;
  overflow:hidden;
}

/* Exact jewel-case geometry:
   125 square units + 17 obi/spine units = 142 total units. */
.site-shell{
  position:relative;
  z-index:1;
  width:min(
    64rem,
    calc(100vw - 2rem),
    calc((100vh - 2rem) * 1.136)
  );
  max-width:64rem;
  height:auto;
  aspect-ratio:142 / 125;
  display:grid;
  grid-template-columns:125fr 17fr;
  grid-template-rows:1fr;
  overflow:hidden;
  border:1px solid rgba(248,251,255,.52);
  background:transparent;
  box-shadow:
    0 18px 60px rgba(8,32,73,.18),
    0 0 0 1px rgba(38,59,141,.08);
}

/* ---------------------------------------------------------
   LEFT: 125 x 125 square paper sleeve
   --------------------------------------------------------- */
.left-column{
  grid-column:1;
  grid-row:1;
  width:100%;
  height:100%;
  min-width:0;
  aspect-ratio:1 / 1;
  position:relative;
  overflow:hidden;
  padding:clamp(.8rem,2.1vw,1.55rem);
  border:0;
  border-right:1px solid rgba(38,59,141,.28);
  color:var(--obi-indigo);
  background-color:var(--paper-white);

  /* Permanent packaging grid, deliberately faint. */
  background-image:
    linear-gradient(
      to right,
      rgba(38,59,141,.050) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(38,59,141,.040) 1px,
      transparent 1px
    );
  background-size:
    calc(100% / 12) 100%,
    100% calc(100% / 12);
}

/* Wabi-sabi: one imperfect, quiet ring and one displaced registration mark. */
.left-column::before{
  content:"";
  position:absolute;
  width:19%;
  aspect-ratio:1;
  left:57%;
  top:31%;
  border:1px solid rgba(38,59,141,.16);
  border-radius:48% 52% 46% 54% / 51% 47% 53% 49%;
  transform:rotate(-7deg);
  pointer-events:none;
}
.left-column::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  left:18%;
  bottom:17%;
  background:rgba(38,59,141,.34);
  transform:rotate(2deg);
  pointer-events:none;
}

.top-tools{
  position:absolute;
  top:clamp(.8rem,2.1vw,1.55rem);
  left:clamp(.8rem,2.1vw,1.55rem);
  display:flex;
  gap:.22rem;
  z-index:2;
}
.top-tools button{
  font-family:var(--mono);
  color:var(--obi-indigo);
  font-size:.58rem;
  padding:.1rem .18rem;
  text-decoration-color:rgba(38,59,141,.28);
}
.top-tools button:hover{
  color:var(--obi-indigo);
  text-decoration-color:var(--obi-indigo);
}

.side-nav{
  position:absolute;
  left:clamp(.8rem,2.1vw,1.55rem);
  top:20%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.9rem;
  z-index:2;
}
.side-nav a{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.04em;
  color:var(--obi-indigo);
}

.site-mark{
  position:absolute;
  right:clamp(.8rem,2.1vw,1.55rem);
  bottom:clamp(.8rem,2.1vw,1.55rem);
  color:rgba(38,59,141,.62);
  font-family:var(--mono);
  font-size:.55rem;
  line-height:1.2;
  letter-spacing:.10em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

/* A deliberately unbalanced hairline, like a print-registration remnant. */
.side-nav::after{
  content:"";
  display:block;
  width:3.6rem;
  height:1px;
  margin-top:1.1rem;
  background:linear-gradient(
    90deg,
    rgba(38,59,141,.42),
    rgba(38,59,141,.05)
  );
  transform:rotate(-1.2deg);
  transform-origin:left center;
}

/* ---------------------------------------------------------
   RIGHT: 17 x 125 obi / content sliver
   --------------------------------------------------------- */
.reader{
  grid-column:2;
  grid-row:1;
  min-width:0;
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  scroll-behavior:smooth;
  position:relative;
  border:0;
  background:rgba(13,69,128,.19);
}
.reader::-webkit-scrollbar{display:none}

.essay{
  width:100%;
  min-width:0;
  margin:0;
  padding:
    clamp(3rem,10vh,6.5rem)
    clamp(.42rem,1vw,.72rem)
    3rem;
  background:
    linear-gradient(
      to right,
      rgba(255,255,255,var(--flow-grid-alpha,.065)) 1px,
      transparent 1px
    ),
    linear-gradient(180deg,rgba(5,24,44,.06),rgba(5,24,44,.15));
  background-size:
    calc(100% / 12) 100%,
    100% 100%;
  background-position:left top,left top;
}

/* Keep a lot of empty space before the first text, like liner notes / obi. */
.essay-header{
  margin:0 0 clamp(3.5rem,14vh,7rem);
}

/* All prose is monospace now. */
.essay>p{
  font-family:var(--mono);
  font-size:.58rem;
  line-height:1.62;
  letter-spacing:0;
  text-align:left;
  text-indent:0;
  overflow-wrap:anywhere;
  word-break:normal;
  margin:0 0 1.45rem;
  padding:0;
}

/* The three deliberate serif exceptions. */
h1,
.forma-head h2,
.inline-quadra blockquote,
.example-poem{
  font-family:var(--display-serif);
}

/* Essay title */
h1{
  max-width:none;
  margin:0;
  font-size:clamp(1.28rem,2.45vw,2.05rem);
  line-height:.90;
  letter-spacing:-.045em;
  overflow-wrap:normal;
}

/* Autocorte title */
.forma-head h2{
  font-size:clamp(1.15rem,2vw,1.65rem);
  line-height:.95;
}

/* Quadras remain the only lyrical/display typography in the body. */
.inline-quadra{
  grid-template-columns:1rem minmax(0,1fr);
  gap:.35rem;
  margin:2rem 0 2.4rem;
  clear:both;
}
.inline-quadra blockquote{
  font-size:clamp(.82rem,1.2vw,1.05rem);
  line-height:1.08;
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.quadra-index,
.scheme,
.solution{
  font-family:var(--mono);
  font-size:.43rem;
}
.scheme,
.solution{
  grid-column:2;
}

/* Example cards collapse to a single narrow stack inside the obi. */
.examples-section{
  margin:2.4rem 0;
  clear:both;
}
.examples-grid{
  grid-template-columns:1fr;
  gap:.5rem;
}
.example-card{
  width:100%;
  min-width:0;
  aspect-ratio:1 / 1;
  padding:.45rem;
  font-family:var(--mono);
}
.example-poem{
  font-size:.72rem;
  line-height:1.05;
  overflow-wrap:anywhere;
}
.example-answer{
  font-family:var(--mono);
  font-size:.54rem;
  padding:.5rem;
}

/* Metadata / structural text remains system monospace. */
.eyebrow,
.section-label,
.metric-grid,
.quadra-index,
.scheme,
.solution,
.cutter-controls,
.cutter-status,
.panel-label,
.seed-line,
.fragment-id,
.fragment-word,
figcaption{
  font-family:var(--mono);
}

.eyebrow{
  font-size:.43rem;
  line-height:1.4;
  margin-bottom:.65rem;
}
.metric-grid{
  grid-template-columns:minmax(0,1fr) 1rem;
  font-size:.43rem;
  margin:1.8rem 0 2.2rem;
}
.metric-grid span,
.metric-grid b{
  padding:.34rem .15rem;
  overflow-wrap:anywhere;
}

/* Keep the permanent grid ON and visible behind all essay text. */
.essay.autocut-grid-active{
  --flow-grid-alpha:.065 !important;
}

/* Autocutter must survive the narrow obi: every control stacks cleanly. */
.forma-section{
  margin-top:3.5rem;
  padding-top:1.3rem;
  clear:both;
}
.forma-head p{
  width:100%;
  max-width:none;
  font-family:var(--mono);
  font-size:.48rem;
  line-height:1.5;
  margin:1rem 0 1.4rem;
}
.cutter-controls{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  gap:.28rem;
  padding:.45rem 0;
}
.cutter-controls button,
.file-button,
.control-inline,
.range-control,
.select-control,
.seed-control{
  width:100%;
  min-width:0;
  font-family:var(--mono);
  font-size:.43rem;
}
.cutter-controls button,
.file-button{
  min-height:1.55rem;
  justify-content:flex-start;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.control-inline,
.range-control,
.seed-control{
  justify-content:space-between;
}
.control-inline input[type="number"],
.seed-control input{
  min-width:0;
  width:2.6rem;
}
.range-control input[type="range"]{
  min-width:0;
  width:100%;
  flex:1;
}
.select-control select{
  width:100%;
  min-width:0;
}
.cutter-stage{
  grid-template-columns:1fr;
  gap:.45rem;
}
.preview-frame{
  min-height:7rem;
}
#source-canvas,
#result-canvas{
  max-height:16rem;
}
.cutter-status,
.seed-line,
.panel-label{
  font-size:.42rem;
  line-height:1.45;
  overflow-wrap:anywhere;
}

/* Floating image pieces continue to snap to the 12-col essay grid. */
.essay-fragment-flow{
  max-width:100%;
}
.fragment-id,
.fragment-word{
  font-size:.36rem;
}

/* The former third column is now only an overlaid progress indicator,
   so the visible layout remains exactly two columns. */
.right-column{
  position:absolute;
  z-index:8;
  top:0;
  right:1px;
  width:5px;
  height:100%;
  border:0;
  background:transparent;
  pointer-events:none;
}
.scroll-zone{
  top:.35rem;
  bottom:1.2rem;
  width:5px;
  pointer-events:auto;
}
.scroll-thumb{
  width:2px;
  background:rgba(248,251,255,.85);
}
.scroll-percent{
  display:none;
}

/* The outer sleeve stays proportionally locked on every viewport. */
@media(max-width:760px){
  body{padding:.5rem}
  .site-shell{
    width:min(
      calc(100vw - 1rem),
      calc((100vh - 1rem) * 1.136)
    );
    grid-template-columns:125fr 17fr;
    aspect-ratio:142 / 125;
  }
  .left-column{
    padding:.62rem;
  }
  .top-tools{
    top:.62rem;
    left:.62rem;
  }
  .side-nav{
    left:.62rem;
    top:18%;
    gap:.62rem;
  }
  .side-nav a{
    font-size:.52rem;
  }
  .site-mark{
    right:.62rem;
    bottom:.62rem;
    font-size:.43rem;
  }
  .essay{
    width:100%;
    padding:2.4rem .28rem 2rem;
  }
  .essay>p{
    font-size:.45rem;
    line-height:1.55;
    margin-bottom:1rem;
  }
  h1{
    font-size:1rem;
  }
  .forma-head h2{
    font-size:.92rem;
  }
  .inline-quadra blockquote{
    font-size:.62rem;
  }
  .example-card{
    min-height:5rem;
  }
}

/* Printing is no longer constrained to the jewel-case sliver. */
@media print{
  body{
    display:block;
    padding:0;
    overflow:visible;
    background:white;
  }
  .site-shell{
    display:block;
    width:auto;
    max-width:none;
    height:auto;
    aspect-ratio:auto;
    border:0;
    box-shadow:none;
  }
  .left-column,
  .right-column,
  .forma-section{
    display:none!important;
  }
  .reader{
    width:auto;
    height:auto;
    overflow:visible;
    background:white;
  }
  .essay{
    width:auto;
    max-width:760px;
    margin:auto;
    padding:2rem 2.5rem;
    background:none;
    color:#111;
  }
  .essay>p{
    font-size:11pt;
    font-family:var(--mono);
  }
  h1,
  .inline-quadra blockquote,
  .example-poem{
    color:#111;
  }
}


/* exchange menu */
.nav-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.24rem;
}
.nav-parent,
.nav-submenu button{
  appearance:none;
  border:0;
  background:transparent;
  color:#263b8d;
  font-family:var(--mono);
  cursor:pointer;
  padding:0;
  text-align:left;
}
.nav-parent{font-size:.66rem}
.nav-submenu{
  display:flex;
  flex-direction:column;
  gap:.18rem;
  padding-left:.72rem;
}
.nav-submenu button{
  font-size:.50rem;
  opacity:.62;
}
.nav-parent:hover,
.nav-submenu button:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.lang-switch{
  display:flex;
  gap:.4rem;
  margin-top:.3rem;
  font-size:.48rem;
}
.lang-switch a{
  opacity:.55;
}
.lang-switch a[aria-current="page"]{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
}
.archive-callout{
  clear:both;
  margin:2rem 0!important;
  font-family:var(--mono)!important;
  font-size:.5rem!important;
}
.archive-callout a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:4px;
}



/* =========================================================
   V14 — typography
   Garamond: headings + quatrains only.
   System monospace: essay prose, navigation, controls and metadata.
   ========================================================= */
:root{
  --garamond: Garamond, "Adobe Garamond Pro", "EB Garamond", "Cormorant Garamond", "Times New Roman", serif;
}

/* Site default and essay prose remain system monospace. */
body,
button,
input,
select,
textarea,
.reader,
.essay,
.essay > p,
.side-nav,
.side-nav a,
.top-tools,
.site-mark,
.eyebrow,
.section-label,
.quadra-index,
.scheme,
.solution,
.metric-grid,
.forma-head p,
.cutter-controls,
.cutter-status,
.panel-label,
.seed-line,
.fragment-id,
.fragment-word,
.lang-switch,
.nav-group,
.nav-submenu{
  font-family:var(--mono) !important;
}

/* Display voice: essay/autocorte headings and every quatrain. */
.essay h1,
.essay h2,
.essay h3,
.forma-head h2,
.inline-quadra blockquote,
.example-poem{
  font-family:var(--garamond) !important;
}


/* =========================================================
   V15 — TWO-COLUMN OBI LAYOUT
   Full viewport. No jewel-case frame.
   Left: narrow Japanese-CD obi strip (~17/142 = 11.97%).
   Right: all remaining space for essay / cutter / interaction.
   ========================================================= */

:root{
  --obi-width:clamp(88px,11.97vw,190px);
}

/* The page itself is now the package. */
html,
body{
  width:100%;
  height:100%;
}
body{
  display:block !important;
  min-height:100vh;
  padding:0 !important;
  overflow:hidden;
}

/* Exactly two structural columns. */
.site-shell{
  position:relative;
  z-index:1;
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  aspect-ratio:auto !important;
  display:grid !important;
  grid-template-columns:var(--obi-width) minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  overflow:hidden;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* ---------------------------------------------------------
   LEFT — obi strip
   --------------------------------------------------------- */
.left-column{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  height:100vh !important;
  aspect-ratio:auto !important;
  min-width:0;
  overflow:hidden;
  position:relative;
  padding:clamp(.9rem,1.3vw,1.35rem) clamp(.62rem,.85vw,1rem) !important;

  background:#f8fbff !important;
  color:#263b8d !important;
  border:0 !important;
  border-right:1px solid rgba(38,59,141,.22) !important;

  /* Very light paper-strip registration grid. */
  background-image:
    linear-gradient(
      to right,
      rgba(38,59,141,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(38,59,141,.028) 1px,
      transparent 1px
    ) !important;
  background-size:
    25% 100%,
    100% 2.2rem !important;
}

/* Remove the former square-sleeve ornament. */
.left-column::before{
  display:none !important;
}
.left-column::after{
  content:"";
  display:block !important;
  position:absolute;
  width:7px;
  height:7px;
  left:clamp(.62rem,.85vw,1rem);
  bottom:18%;
  background:#263b8d;
  opacity:.30;
  transform:rotate(-3deg);
  pointer-events:none;
}

/* Controls stay tiny and horizontal at the very top. */
.top-tools{
  position:absolute !important;
  top:clamp(.9rem,1.3vw,1.35rem) !important;
  left:clamp(.62rem,.85vw,1rem) !important;
  right:auto !important;
  display:flex !important;
  flex-direction:row !important;
  gap:.18rem !important;
  z-index:3;
}
.top-tools button{
  font-size:.56rem !important;
}

/* Sparse vertical obi navigation. */
.side-nav{
  position:absolute !important;
  top:17% !important;
  left:clamp(.62rem,.85vw,1rem) !important;
  right:clamp(.38rem,.5vw,.7rem) !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:.68rem !important;
  z-index:3;
}
.side-nav a,
.nav-parent{
  font-size:clamp(.53rem,.7vw,.66rem) !important;
  line-height:1.15;
  white-space:normal;
  overflow-wrap:anywhere;
}
.nav-submenu{
  padding-left:.45rem !important;
  gap:.18rem !important;
}
.nav-submenu button{
  font-size:.47rem !important;
}
.lang-switch{
  margin-top:.5rem !important;
  font-size:.46rem !important;
  gap:.35rem !important;
}

/* One quiet print-like rule. */
.side-nav::after{
  width:55% !important;
  margin-top:.8rem !important;
  opacity:.7;
}

/* Vertical mark at the bottom of the obi. */
.site-mark{
  position:absolute !important;
  right:clamp(.55rem,.65vw,.8rem) !important;
  bottom:clamp(.9rem,1.2vw,1.3rem) !important;
  left:auto !important;
  font-size:.48rem !important;
  letter-spacing:.08em;
  writing-mode:vertical-rl !important;
  transform:rotate(180deg) !important;
  color:rgba(38,59,141,.58) !important;
}

/* ---------------------------------------------------------
   RIGHT — all content
   --------------------------------------------------------- */
.reader{
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  min-width:0;
  height:100vh !important;
  position:relative;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:transparent !important;
}

/* A readable, centred text field inside the wide column. */
.essay{
  width:min(92%,74rem) !important;
  max-width:74rem !important;
  min-width:0;
  margin:0 auto !important;
  padding:
    clamp(4.8rem,9vh,7.6rem)
    clamp(2rem,5vw,5.8rem)
    clamp(6rem,12vh,10rem) !important;

  /* Permanent 12-column grid remains ON from first load. */
  --flow-grid-alpha:.060 !important;
  background-image:
    linear-gradient(
      to right,
      rgba(255,255,255,var(--flow-grid-alpha)) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      rgba(5,24,44,.035),
      rgba(5,24,44,.105)
    ) !important;
  background-size:
    calc(100% / 12) 100%,
    100% 100% !important;
  background-position:left top,left top !important;
}

/* Restore generous essay proportions from the earlier narrow-obi version. */
.essay-header{
  margin:0 0 clamp(5rem,12vh,8.5rem) !important;
}

.essay h1{
  max-width:8ch !important;
  font-size:clamp(4rem,7vw,7.6rem) !important;
  line-height:.84 !important;
  letter-spacing:-.055em !important;
}

.essay > p{
  font-size:clamp(.96rem,1.2vw,1.12rem) !important;
  line-height:1.72 !important;
  letter-spacing:0 !important;
  margin:0 0 2.65rem !important;
  max-width:none !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

/* Quadras become large again. */
.inline-quadra{
  grid-template-columns:2.1rem minmax(0,1fr) !important;
  gap:1rem !important;
  margin:4rem 0 4.8rem !important;
}
.inline-quadra blockquote{
  font-size:clamp(2rem,3.25vw,3.7rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.025em !important;
  overflow-wrap:normal !important;
}
.quadra-index{
  font-size:.52rem !important;
  padding-top:.48rem;
}
.scheme,
.solution{
  font-size:.56rem !important;
}

/* Metric diagram and examples recover normal editorial scale. */
.metric-grid{
  grid-template-columns:minmax(0,1fr) 2.2rem !important;
  font-size:.61rem !important;
  margin:3.4rem 0 4.2rem !important;
}
.metric-grid span,
.metric-grid b{
  padding:.55rem .35rem !important;
}

.examples-section{
  margin:5rem 0 !important;
}
.examples-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.72rem !important;
}
.example-card{
  width:100%;
  min-width:0;
  min-height:0 !important;
  aspect-ratio:1/1 !important;
  padding:1rem !important;
}
.example-poem{
  font-size:clamp(1.15rem,2vw,2rem) !important;
  line-height:1.08 !important;
}
.example-answer{
  font-size:clamp(.78rem,1.2vw,1.08rem) !important;
  padding:1.2rem !important;
}

/* Autocutter uses the wide content column again. */
.forma-section{
  margin-top:8rem !important;
  padding-top:3rem !important;
}
.forma-head h2{
  font-size:clamp(3.5rem,5.5vw,6rem) !important;
  line-height:.9 !important;
}
.forma-head p{
  max-width:60ch !important;
  font-size:.66rem !important;
  line-height:1.55 !important;
  margin:1rem 0 2.2rem !important;
}

.cutter-controls{
  width:100% !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:.45rem .68rem !important;
  padding:.65rem 0 !important;
}
.cutter-controls button,
.file-button,
.control-inline,
.range-control,
.select-control,
.seed-control{
  width:auto !important;
  min-width:0;
  font-size:.55rem !important;
}
.cutter-controls button,
.file-button{
  min-height:1.8rem !important;
  justify-content:center !important;
}
.range-control input[type="range"]{
  width:4.8rem !important;
}
.cutter-stage{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:.72rem !important;
}
.preview-frame{
  min-height:24rem !important;
}
#source-canvas,
#result-canvas{
  max-height:34rem !important;
}

/* Generated fragments can use the full editorial measure. */
.essay-fragment-flow{
  max-width:100% !important;
}
.fragment-id,
.fragment-word{
  font-size:.46rem !important;
}

/* ---------------------------------------------------------
   Scroll indicator: overlay only, not a structural third column
   --------------------------------------------------------- */
.right-column{
  position:absolute !important;
  z-index:12;
  top:0 !important;
  right:0 !important;
  width:7px !important;
  height:100vh !important;
  border:0 !important;
  background:transparent !important;
  pointer-events:none;
}
.scroll-zone{
  width:7px !important;
  top:.6rem !important;
  bottom:.6rem !important;
  pointer-events:auto;
}
.scroll-thumb{
  width:2px !important;
}
.scroll-percent{
  display:none !important;
}

/* Correspondence UI is visually centred in the CONTENT column,
   not across the whole viewport including the obi. */
.postcard-invite{
  left:calc(
    var(--obi-width) +
    ((100vw - var(--obi-width)) / 2)
  ) !important;
}
.postcard-panel{
  right:clamp(18px,2vw,34px) !important;
  width:min(480px,calc(100vw - var(--obi-width) - 44px)) !important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media(max-width:760px){
  :root{
    --obi-width:clamp(78px,18vw,104px);
  }

  .site-shell{
    grid-template-columns:var(--obi-width) minmax(0,1fr) !important;
  }

  .essay{
    width:100% !important;
    padding:
      3.8rem
      clamp(1rem,5vw,2rem)
      6rem !important;
  }

  .essay h1{
    font-size:clamp(2.7rem,10vw,4.2rem) !important;
  }

  .essay > p{
    font-size:.82rem !important;
    line-height:1.66 !important;
  }

  .inline-quadra{
    grid-template-columns:1.25rem 1fr !important;
    gap:.5rem !important;
    margin:2.8rem 0 3.2rem !important;
  }
  .inline-quadra blockquote{
    font-size:clamp(1.3rem,5vw,2.1rem) !important;
  }

  .examples-grid{
    grid-template-columns:1fr !important;
  }
  .example-card{
    aspect-ratio:auto !important;
    min-height:14rem !important;
  }

  .cutter-controls{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .cutter-controls button,
  .file-button,
  .control-inline,
  .range-control,
  .select-control,
  .seed-control{
    width:100% !important;
  }
  .cutter-stage{
    grid-template-columns:1fr !important;
  }
  .preview-frame{
    min-height:16rem !important;
  }

  .postcard-invite{
    left:calc(
      var(--obi-width) +
      ((100vw - var(--obi-width)) / 2)
    ) !important;
    width:min(
      420px,
      calc(100vw - var(--obi-width) - 24px)
    ) !important;
  }
  .postcard-panel{
    right:10px !important;
    width:calc(100vw - var(--obi-width) - 20px) !important;
  }
}

/* Printing ignores the obi and uses the essay alone. */
@media print{
  .site-shell{
    display:block !important;
    width:auto !important;
    height:auto !important;
  }
}


/* =========================================================
   V16 — left-aligned essay + lighter mono + relocated controls
   ========================================================= */
:root{
  --mono-light:"Cascadia Mono","Segoe UI Mono",ui-monospace,
               SFMono-Regular,Menlo,Monaco,Consolas,
               "Liberation Mono","Courier New",monospace;
}

.language-tools{
  position:absolute;
  top:clamp(.85rem,1.2vw,1.25rem);
  left:clamp(.62rem,.85vw,1rem);
  display:flex;
  gap:.52rem;
  z-index:6;
  font-family:var(--mono-light);
  font-size:.56rem;
  line-height:1;
}
.language-tools a{
  color:#263b8d;
  text-decoration:none;
  opacity:.48;
}
.language-tools a[aria-current="page"]{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:4px;
}

.font-tools{
  position:absolute !important;
  left:clamp(.62rem,.85vw,1rem) !important;
  bottom:clamp(.85rem,1.2vw,1.25rem) !important;
  top:auto !important;
  right:auto !important;
  display:flex !important;
  flex-direction:row !important;
  gap:.22rem !important;
  z-index:6;
}
.font-tools button{
  border:0;
  background:transparent;
  color:#263b8d;
  font-family:var(--mono-light);
  font-size:.54rem !important;
  font-weight:400;
  padding:.12rem .16rem;
  text-decoration:underline;
  text-decoration-color:rgba(38,59,141,.24);
  text-underline-offset:3px;
}
.font-tools button:hover{
  text-decoration-color:#263b8d;
}

.side-nav{
  top:14.5% !important;
}

.site-mark{
  right:clamp(.55rem,.7vw,.82rem) !important;
  bottom:clamp(.82rem,1.15vw,1.2rem) !important;
  left:auto !important;
  max-width:58%;
  writing-mode:horizontal-tb !important;
  transform:none !important;
  text-align:right;
  font-family:var(--mono-light) !important;
  font-size:.43rem !important;
  line-height:1.45;
  letter-spacing:.025em;
  color:rgba(38,59,141,.58) !important;
}

/* Essay starts almost immediately after the obi.
   Negative space is reserved for the RIGHT side only. */
.essay{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:
    clamp(4.6rem,8vh,7rem)
    clamp(5rem,13vw,15rem)
    clamp(6rem,12vh,10rem)
    clamp(1.05rem,1.55vw,1.8rem) !important;
  background-position:left top,left top !important;
}
.essay-header{
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:64rem;
}
.essay h1{
  margin-left:0 !important;
}
.essay > p{
  max-width:78ch !important;
  margin-left:0 !important;
  margin-right:0 !important;
  font-family:var(--mono-light) !important;
  font-size:clamp(.92rem,1.08vw,1.04rem) !important;
  font-weight:400 !important;
  font-synthesis:none;
  line-height:1.92 !important;
  letter-spacing:.012em !important;
  text-align:left !important;
  text-indent:0 !important;
  color:rgba(248,251,255,.94);
}

body,
button,
input,
select,
textarea,
.side-nav,
.side-nav a,
.nav-parent,
.nav-submenu button,
.eyebrow,
.section-label,
.quadra-index,
.scheme,
.solution,
.metric-grid,
.forma-head p,
.cutter-controls,
.cutter-status,
.panel-label,
.seed-line,
.fragment-id,
.fragment-word{
  font-family:var(--mono-light) !important;
  font-weight:400;
}

.inline-quadra,
.metric-grid,
.examples-section,
.archive-callout,
.forma-section{
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:78rem;
}
.inline-quadra{
  max-width:70rem;
}
.forma-section{
  width:100%;
}

@media(max-width:760px){
  .essay{
    padding:
      3.5rem
      clamp(1.2rem,5vw,2.2rem)
      5.5rem
      clamp(.72rem,2.2vw,1rem) !important;
  }
  .essay > p{
    max-width:none !important;
    font-size:.80rem !important;
    line-height:1.82 !important;
  }
  .language-tools{
    left:.55rem;
    top:.7rem;
  }
  .font-tools{
    left:.55rem !important;
    bottom:.72rem !important;
  }
  .site-mark{
    right:.48rem !important;
    bottom:.72rem !important;
    max-width:48%;
    font-size:.37rem !important;
  }
}


/* =========================================================
   V20 — tighter essay edge, plain white obi, minimal font tools
   ========================================================= */
:root{
  --essay-mono-size:clamp(.92rem,1.06vw,1.02rem);
  --obi-left-pad:clamp(.6rem,.85vw,.95rem);
}
.left-column{
  background:#f8fbff !important;
  background-image:none !important;
}
.left-column::after{display:none !important;}
.language-tools{
  left:var(--obi-left-pad) !important;
  top:clamp(.72rem,1vw,1rem) !important;
  gap:.45rem !important;
  font-size:var(--essay-mono-size) !important;
  line-height:1.1 !important;
}
.font-tools{
  left:var(--obi-left-pad) !important;
  bottom:clamp(.72rem,1vw,1rem) !important;
  gap:.45rem !important;
}
.font-tools button{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  color:#263b8d !important;
  font-family:var(--mono-light) !important;
  font-size:var(--essay-mono-size) !important;
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
}
.font-tools button:hover{
  text-decoration:underline !important;
  text-underline-offset:4px !important;
  text-decoration-color:#263b8d !important;
}
.side-nav{
  left:var(--obi-left-pad) !important;
  right:.55rem !important;
  top:16.2% !important;
  gap:.82rem !important;
}
.side-nav a,
.nav-parent,
.nav-submenu button{
  font-size:var(--essay-mono-size) !important;
  line-height:1.18 !important;
}
.nav-submenu button{opacity:.72;}
.site-mark{
  right:.7rem !important;
  bottom:.72rem !important;
  max-width:62% !important;
  font-size:.58rem !important;
  line-height:1.35 !important;
}
.essay{
  width:min(100%,78rem) !important;
  max-width:78rem !important;
  margin:0 !important;
  padding:
    clamp(4.4rem,7.8vh,6.8rem)
    clamp(3rem,12vw,15rem)
    clamp(6rem,12vh,10rem)
    clamp(.32rem,.55vw,.62rem) !important;
}
.essay-header{
  margin:0 0 clamp(4rem,10vh,7rem) !important;
  padding-left:0 !important;
}
.essay > p{
  max-width:82ch !important;
  font-size:var(--essay-mono-size) !important;
  line-height:1.95 !important;
  letter-spacing:.01em !important;
}
.inline-quadra,
.metric-grid,
.examples-section,
.archive-callout,
.forma-section{
  max-width:82rem !important;
}
@media(max-width:760px){
  .language-tools,.font-tools button,.side-nav a,.nav-parent,.nav-submenu button{font-size:.78rem !important;}
  .essay{padding:3.4rem clamp(1rem,4vw,1.6rem) 5.2rem .45rem !important;}
  .essay > p{font-size:.82rem !important;line-height:1.82 !important;}
}


/* =========================================================
   V21 — final manual-editable geometry
   ========================================================= */
:root{
  --manual-obi-width:clamp(88px,11.97vw,190px);
  --manual-essay-left-gap:.25rem;
  --manual-essay-right-space:clamp(3rem,12vw,15rem);
}
.site-shell{
  grid-template-columns:var(--manual-obi-width) minmax(0,1fr) !important;
}
.reader{
  padding:0 !important;
  margin:0 !important;
}
.left-column{
  background:#fff !important;
  background-image:none !important;
}
.essay{
  margin:0 !important;
  padding-left:var(--manual-essay-left-gap) !important;
  padding-right:var(--manual-essay-right-space) !important;
}
.font-tools button{
  appearance:none !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  outline:0 !important;
  box-shadow:none !important;
  color:#263b8d !important;
  padding:0 !important;
  text-decoration:none !important;
}
.font-tools button:hover,
.font-tools button:focus-visible{
  background:none !important;
  text-decoration:underline !important;
  text-underline-offset:4px !important;
}


/* V22 default blueprint quadrícula */
.essay{
  background-color:#0d477f !important;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) !important;
  background-size:96px 96px,96px 96px,24px 24px,24px 24px !important;
  background-position:0 0 !important;
}

@font-face{
  font-family:"YDMyungjo 520 Pro";
  src:url("YDMyungjo 520 Pro.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}


/* =========================================================
   V23 — monochrome site system
   ========================================================= */
:root{
  --ink:#000!important;
  --paper:#fff!important;
  --mono-light:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --ydmyungjo:"YDMyungjo 520 Pro","Times New Roman",serif;
}
html,body{background:#fff!important;color:#000!important}
.cyanotype-background{display:none!important}
.site-shell{background:#fff!important}
.left-column{
  background:#fff!important;
  background-image:none!important;
  color:#000!important;
  border-right:1px solid #000!important;
}
.left-column::before,.left-column::after{display:none!important}
.left-column *, .left-column a, .left-column button{color:#000!important;border-color:#000!important}
.language-tools a{color:#000!important}
.site-mark{color:rgba(0,0,0,.62)!important}
.side-nav::after{background:#000!important;opacity:.25}
.reader{background:#000!important;color:#fff!important}
.essay{
  background-color:#000!important;
  color:#fff!important;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)!important;
  background-size:96px 96px,96px 96px,24px 24px,24px 24px!important;
  background-position:0 0!important;
}
.essay,.essay p,.essay h1,.essay h2,.essay h3,.essay blockquote,.essay .eyebrow,.essay .scheme,.essay .solution,.essay .quadra-index,.essay .section-label{color:#fff!important}
.essay a{color:#fff!important;text-decoration-color:#fff!important}
.essay button,.essay input,.essay select,.essay textarea{
  border-color:rgba(255,255,255,.72)!important;
  color:#fff!important;
  background:#000!important;
}
.file-button,#cut-button,.postcard-send{
  background:#fff!important;color:#000!important;border-color:#fff!important
}
.file-button:hover,#cut-button:hover{background:#e9e9e9!important;color:#000!important}
.preview-frame,.result-frame,.source-frame,.cutter-stage canvas{background:#fff!important}
.metric-grid>*{border-color:rgba(255,255,255,.35)!important}
.example-card{border-color:rgba(255,255,255,.48)!important;background:#000!important;color:#fff!important}
.example-answer{background:#fff!important;color:#000!important}
.right-column,.scroll-zone{background:transparent!important}.scroll-thumb{background:#fff!important}
::selection{background:#fff;color:#000}


/* =========================================================
   V25 — white paper + Noto Serif KR
   ========================================================= */
:root{--noto-serif-kr:"Noto Serif KR",serif;--ink:#111!important;--paper:#fff!important}
html,body,.site-shell,.reader,.essay{background:#fff!important;color:#111!important}
body,button,input,select,textarea,.essay,.essay p,.left-column,.side-nav,.language-tools,.font-tools,.site-mark{font-family:var(--noto-serif-kr)!important}
.cyanotype-background{display:none!important}
.reader{background:#fff!important;color:#111!important}
.essay{
  background-color:#fff!important;
  color:#111!important;
  background-image:
    linear-gradient(rgba(0,0,0,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.14) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px)!important;
  background-size:96px 96px,96px 96px,24px 24px,24px 24px!important;
}
.essay,.essay p,.essay h1,.essay h2,.essay h3,.essay blockquote,.essay .eyebrow,.essay .scheme,.essay .solution,.essay .quadra-index,.essay .section-label,.essay a{color:#111!important}
.essay button,.essay input,.essay select,.essay textarea{border-color:#111!important;color:#111!important;background:#fff!important}
.file-button,#cut-button,.postcard-send{background:#111!important;color:#fff!important;border-color:#111!important}
.metric-grid>*{border-color:rgba(0,0,0,.28)!important}
.example-card{border-color:rgba(0,0,0,.4)!important;background:#fff!important;color:#111!important}
.example-answer{background:#111!important;color:#fff!important}
.scroll-thumb{background:#111!important}
::selection{background:#111;color:#fff}


/* =========================================================
   V28 — white paper, ASCII rain and concentric ripples
   ========================================================= */
:root{
  --ascii-color:#000000;
  --ascii-scene-opacity:.085;
  --ascii-rain:170;
  --ascii-wind:.25;
  --ascii-speed:1;
  --ascii-ripple:1;
  --ascii-auto-ripples:18;
  --ascii-ripple-life:2.4;
  --ascii-glyph-size:12;
}
html,body,.site-shell,.reader{background:#fff!important;color:#111!important}
.reader{
  position:relative!important;
  isolation:isolate;
  background:#fff!important;
}
.ascii-rain,
.ascii-valley{
  position:sticky;
  top:0;
  left:0;
  z-index:0;
  display:block!important;
  visibility:visible!important;
  width:100%;
  height:100vh;
  margin:0 0 -100vh;
  opacity:var(--ascii-scene-opacity)!important;
  color:var(--ascii-color)!important;
  background:transparent!important;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.essay{
  position:relative!important;
  z-index:1;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
.tools-page{
  background:#fff!important;
  background-image:none!important;
  padding-top:clamp(3.2rem,7vh,5rem)!important;
}
.tools-page .essay-header{margin-bottom:clamp(2.4rem,6vh,4.5rem)!important}
.tools-page .forma-section{margin-top:0!important;padding-top:0!important;border-top:0!important}
.tools-page .forma-head h2{max-width:13ch}
.side-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
  :root{--ascii-scene-opacity:.06;--ascii-glyph-size:10}
  .ascii-rain,.ascii-valley{height:100svh;margin-bottom:-100svh}
}
@media(prefers-reduced-motion:reduce){
  :root{--ascii-speed:.2;--ascii-rain:55;--ascii-auto-ripples:0}
}


/* =========================================================
   V29 — legible tools/autocutter controls
   ========================================================= */
.tools-page .forma-section{
  color:#111!important;
  max-width:none!important;
  width:calc(100% - clamp(1rem,3vw,3rem))!important;
}
.tools-page .cutter-controls{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  align-items:stretch!important;
  gap:12px!important;
  margin:0 0 14px!important;
  padding:14px!important;
  border:1px solid #111!important;
  background:#fff!important;
}
.tools-page .cutter-controls + .cutter-controls{border-top:1px solid #111!important}
.tools-page .cutter-controls button,
.tools-page .file-button,
.tools-page .control-inline,
.tools-page .range-control,
.tools-page .select-control,
.tools-page .seed-control{
  min-height:44px!important;
  width:100%!important;
  margin:0!important;
  padding:9px 10px!important;
  border:1px solid #111!important;
  background:#fff!important;
  color:#111!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-size:.75rem!important;
  line-height:1.25!important;
  letter-spacing:.035em!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  box-sizing:border-box!important;
}
.tools-page .file-button,
.tools-page #cut-button,
.tools-page #download-cut,
.tools-page #download-sheet,
.tools-page #print-essay{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#111!important;
  color:#fff!important;
}
.tools-page .cutter-controls button:hover:not(:disabled),
.tools-page .file-button:hover{background:#e9e9e9!important;color:#111!important}
.tools-page .cutter-controls button:disabled,
.tools-page .cutter-controls input:disabled,
.tools-page .cutter-controls select:disabled{opacity:.58!important;cursor:not-allowed!important}
.tools-page .control-inline,
.tools-page .range-control,
.tools-page .seed-control{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
}
.tools-page .control-inline input[type="number"],
.tools-page .seed-control input,
.tools-page .select-control select{
  width:100%!important;
  min-width:0!important;
  height:30px!important;
  padding:4px 7px!important;
  border:1px solid #111!important;
  background:#fff!important;
  color:#111!important;
  font:inherit!important;
  text-align:center!important;
}
.tools-page .select-control{display:flex!important;align-items:center!important}
.tools-page .select-control select{appearance:auto!important;text-align:left!important}
.tools-page .range-control input[type="range"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  min-width:80px!important;
  height:10px!important;
  padding:0!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:linear-gradient(90deg,#111 0 50%,#fff 50% 100%)!important;
  opacity:1!important;
}
.tools-page .range-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:20px!important;height:20px!important;border:1px solid #111!important;border-radius:0!important;background:#fff!important;box-shadow:inset 0 0 0 5px #111!important;
}
.tools-page .range-control input[type="range"]::-moz-range-thumb{
  width:18px!important;height:18px!important;border:1px solid #111!important;border-radius:0!important;background:#111!important;
}
.tools-page .range-control input[type="range"]::-moz-range-track{
  height:8px!important;border:1px solid #111!important;background:#fff!important;
}
.tools-page .range-control output{
  min-width:46px!important;
  padding:5px 6px!important;
  border:1px solid #111!important;
  background:#fff!important;
  color:#111!important;
  opacity:1!important;
  text-align:center!important;
}
.tools-page .color-control input[type="color"]{width:100%!important;height:30px!important;border:1px solid #111!important}
.tools-page .cutter-status{
  margin:14px 0!important;
  padding:11px 13px!important;
  border:1px solid #111!important;
  background:#fff!important;
  color:#111!important;
  font-size:.78rem!important;
  opacity:1!important;
}
.tools-page .cutter-stage{gap:18px!important}
.tools-page .cutter-panel{border:1px solid #111!important;padding:12px!important;background:#fff!important}
.tools-page .panel-label{margin-bottom:9px!important;color:#111!important;font-size:.75rem!important}
.tools-page .preview-frame{border:1px solid #111!important;min-height:26rem!important;background:#f8f8f8!important}
.tools-page .empty-note{color:#444!important;font-size:.82rem!important}
.tools-page .seed-line{margin-top:13px!important;color:#444!important;font-size:.75rem!important}
@media(max-width:720px){
  .tools-page .cutter-controls{grid-template-columns:1fr!important}
  .tools-page .cutter-stage{grid-template-columns:1fr!important}
  .tools-page .preview-frame{min-height:18rem!important}
}


/* =========================================================
   V30 — visible example answers + compact, aligned tools UI
   ========================================================= */

/* The example cards remain black editorial panels. Both the quatrain and
   the revealed answer are forced to white so editor inheritance cannot
   make them disappear. */
.example-card,
.example-card:hover,
.example-card:focus-visible{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
}
.example-card .example-number,
.example-card .example-poem,
.example-card .example-poem span,
.example-card .example-answer{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.example-card .example-answer{
  z-index:4!important;
  background:#111!important;
  border:1px solid rgba(255,255,255,.72)!important;
  opacity:0!important;
}
.example-card.revealed .example-answer,
.example-card[aria-expanded="true"] .example-answer{
  opacity:1!important;
  visibility:visible!important;
}

/* A controlled editorial heading instead of the oversized inherited title. */
.tools-page .essay-header{
  margin-bottom:clamp(1.7rem,3.6vh,3rem)!important;
}
.tools-page .forma-head{
  max-width:72rem!important;
  margin:0 0 clamp(1.7rem,3.4vw,2.8rem)!important;
}
.tools-page .forma-head h2{
  max-width:16ch!important;
  margin:.25rem 0 .8rem!important;
  font-size:clamp(2.15rem,3.7vw,4.25rem)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
  overflow-wrap:normal!important;
  text-wrap:balance!important;
}
.tools-page .forma-head p{
  max-width:58ch!important;
  margin:0!important;
  font-size:clamp(.76rem,.72rem + .16vw,.92rem)!important;
  line-height:1.55!important;
}

/* Each row has an explicit grid rather than relying on auto-fit. */
.tools-page .cutter-controls{
  width:100%!important;
  max-width:88rem!important;
  gap:10px!important;
  padding:10px!important;
  margin:0 0 12px!important;
  align-items:stretch!important;
  border:1px solid #111!important;
  background:#fff!important;
}
.tools-page .controls-primary{
  grid-template-columns:minmax(170px,1.4fr) minmax(210px,1.45fr) repeat(4,minmax(112px,1fr))!important;
}
.tools-page .controls-paper{
  grid-template-columns:repeat(4,minmax(160px,1fr))!important;
}
.tools-page .controls-output{
  grid-template-columns:minmax(170px,1.15fr) repeat(4,minmax(150px,1fr))!important;
}

/* One visual grammar for every control. */
.tools-page .cutter-controls > button,
.tools-page .cutter-controls > .file-button,
.tools-page .cutter-controls > .control-inline,
.tools-page .cutter-controls > .range-control,
.tools-page .cutter-controls > .select-control,
.tools-page .cutter-controls > .seed-control{
  min-width:0!important;
  min-height:52px!important;
  height:52px!important;
  padding:8px 10px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:#111!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-size:.76rem!important;
  font-weight:400!important;
  line-height:1.15!important;
  letter-spacing:.015em!important;
  text-transform:none!important;
}
.tools-page .cutter-controls > button,
.tools-page .file-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
}
.tools-page .file-button,
.tools-page #cut-button,
.tools-page #download-cut,
.tools-page #download-sheet,
.tools-page #print-essay{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
}
.tools-page .cutter-controls > button.active:not(:disabled){
  background:#111!important;
  color:#fff!important;
}
.tools-page .cutter-controls > button:disabled,
.tools-page .cutter-controls input:disabled,
.tools-page .cutter-controls select:disabled{
  opacity:1!important;
}
.tools-page .cutter-controls > button:disabled:not(.active),
.tools-page .cutter-controls > .file-button[aria-disabled="true"]{
  background:#f3f3f3!important;
  color:#666!important;
  border-color:#aaa!important;
}
.tools-page .cutter-controls > button.active:disabled,
.tools-page .locked-control.active:disabled{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
}
.tools-page .cutter-controls > button:hover:not(:disabled),
.tools-page .file-button:hover{
  background:#fff!important;
  color:#111!important;
  outline:2px solid #111!important;
  outline-offset:-3px!important;
}

/* Number stepper: the previous label had four children in a three-column grid. */
.tools-page .cuts-control{
  display:grid!important;
  grid-template-columns:auto minmax(112px,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
.tools-page .control-label{
  white-space:nowrap!important;
}
.tools-page .number-stepper{
  display:grid!important;
  grid-template-columns:32px minmax(48px,1fr) 32px!important;
  align-items:stretch!important;
  min-width:0!important;
  height:32px!important;
}
.tools-page .number-stepper .step-button{
  width:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  height:32px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #111!important;
  background:#fff!important;
  color:#111!important;
  font-size:1rem!important;
  line-height:1!important;
}
.tools-page .number-stepper .step-button:first-child{border-right:0!important}
.tools-page .number-stepper .step-button:last-child{border-left:0!important}
.tools-page .number-stepper input[type="number"]{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  margin:0!important;
  padding:3px 4px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  text-align:center!important;
  font:inherit!important;
  box-sizing:border-box!important;
}

.tools-page .range-control{
  display:grid!important;
  grid-template-columns:auto minmax(72px,1fr) 44px!important;
  align-items:center!important;
  gap:9px!important;
}
.tools-page .range-control input[type="range"]{
  width:100%!important;
  min-width:0!important;
  height:18px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  opacity:1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.tools-page .range-control input[type="range"]::-webkit-slider-runnable-track{
  height:6px!important;
  border:1px solid #111!important;
  background:#fff!important;
}
.tools-page .range-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:18px!important;
  height:18px!important;
  margin-top:-7px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#111!important;
  box-shadow:none!important;
}
.tools-page .range-control input[type="range"]::-moz-range-track{
  height:5px!important;
  border:1px solid #111!important;
  background:#fff!important;
}
.tools-page .range-control input[type="range"]::-moz-range-thumb{
  width:17px!important;
  height:17px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#111!important;
}
.tools-page .range-control output{
  min-width:44px!important;
  height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 4px!important;
  border:1px solid #111!important;
  background:#fff!important;
  color:#111!important;
  box-sizing:border-box!important;
  text-align:center!important;
}
.tools-page .color-control{
  display:grid!important;
  grid-template-columns:auto minmax(72px,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
.tools-page .color-control input[type="color"]{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  padding:2px!important;
  border:1px solid #111!important;
  background:#fff!important;
}
.tools-page .select-control{
  display:flex!important;
  align-items:center!important;
}
.tools-page .select-control select{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  margin:0!important;
  padding:4px 28px 4px 8px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  font:inherit!important;
  appearance:auto!important;
}
.tools-page .seed-control{
  display:grid!important;
  grid-template-columns:auto minmax(72px,1fr)!important;
  align-items:center!important;
  gap:10px!important;
}
.tools-page .seed-control input{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  margin:0!important;
  padding:4px 7px!important;
  border:1px solid #111!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  text-align:center!important;
  font:inherit!important;
  box-sizing:border-box!important;
}

.tools-page .cutter-status{
  max-width:88rem!important;
  margin:12px 0!important;
  padding:10px 12px!important;
  border:1px solid #111!important;
  background:#fff!important;
  color:#111!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-size:.76rem!important;
  line-height:1.35!important;
}
.tools-page .cutter-stage{
  width:100%!important;
  max-width:88rem!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.tools-page .cutter-panel{
  min-width:0!important;
  padding:10px!important;
  border:1px solid #111!important;
  background:#fff!important;
}
.tools-page .panel-label{
  margin:0 0 8px!important;
  color:#111!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important;
  font-size:.72rem!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.tools-page .preview-frame{
  min-height:clamp(18rem,31vw,31rem)!important;
  border:1px solid #111!important;
  background:#f7f7f7!important;
}
.tools-page .empty-note{
  color:#444!important;
  font-size:.8rem!important;
}
.tools-page .seed-line{
  max-width:88rem!important;
  margin:10px 0 0!important;
  color:#555!important;
  font-size:.72rem!important;
}

@media(max-width:1180px){
  .tools-page .controls-primary{grid-template-columns:repeat(3,minmax(150px,1fr))!important}
  .tools-page .controls-output{grid-template-columns:repeat(3,minmax(150px,1fr))!important}
}
@media(max-width:880px){
  .tools-page .controls-primary,
  .tools-page .controls-paper,
  .tools-page .controls-output{grid-template-columns:repeat(2,minmax(140px,1fr))!important}
  .tools-page .cutter-stage{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .tools-page .controls-primary,
  .tools-page .controls-paper,
  .tools-page .controls-output{grid-template-columns:1fr!important}
  .tools-page .forma-head h2{font-size:clamp(2rem,12vw,3.1rem)!important}
}


/* V31 — shared navigation and temporary postcard blackout */
.left-column [data-menu-key]{box-sizing:border-box}
.nav-group.postcards-redacted{
  position:relative;
  width:min(100%,118px);
  height:62px;
  margin:4px 0 7px;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.nav-group.postcards-redacted > *{
  opacity:0!important;
  visibility:hidden!important;
}
.nav-group.postcards-redacted::after{
  content:"";
  position:absolute;
  inset:3px 0 3px 0;
  z-index:5;
  display:block;
  background:#000;
}


/* =========================================================
   V32 — fixed Noto navigation + bilingual postcard blackout
   ========================================================= */
:root{--navigation-serif:"Noto Serif KR",serif}
.left-column,
.left-column *,
.language-tools,
.language-tools a,
.font-tools,
.font-tools button,
.side-nav,
.side-nav a,
.side-nav button,
.nav-parent,
.nav-parent-link,
.nav-submenu,
.nav-submenu a,
.nav-submenu button,
.site-mark{
  font-family:"Noto Serif KR",serif!important;
  font-synthesis:none!important;
}
.nav-group.postcards-redacted{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  width:min(100%,118px)!important;
  min-width:72px!important;
  height:62px!important;
  min-height:62px!important;
  margin:4px 0 7px!important;
  overflow:hidden!important;
  pointer-events:none!important;
  user-select:none!important;
}
.nav-group.postcards-redacted > :not(.postcards-blackout-bar){
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.nav-group.postcards-redacted::after,
.postcards-blackout-bar{
  content:"";
  position:absolute!important;
  inset:3px 0!important;
  z-index:999!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  background:#000!important;
  border:0!important;
}


/* =========================================================
   V33 — Noto Serif autocutter, preview-first workflow,
   overflow-safe controls, postcard navigation removed
   ========================================================= */

/* The obsolete redaction is gone. The correspondence code remains disabled
   through config.js and can be restored later without rebuilding it. */
.nav-group.postcards-redacted,
.postcards-blackout-bar{
  display:none!important;
}

/* Every visible label and control on the tool page uses the same serif. */
.tools-page,
.tools-page *,
.tools-page button,
.tools-page input,
.tools-page select,
.tools-page output,
.tools-page textarea{
  font-family:"Noto Serif KR","Times New Roman",serif!important;
  font-synthesis:none!important;
}

.tools-page .forma-section{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding-right:clamp(.65rem,2vw,1.5rem)!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

.tools-page .forma-head{
  width:100%!important;
  max-width:72rem!important;
  margin-bottom:clamp(1.25rem,2.4vw,2rem)!important;
}
.tools-page .forma-head h2{
  max-width:18ch!important;
  font-size:clamp(2rem,3.15vw,3.55rem)!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
  text-wrap:balance!important;
}

/* Source/output is the first working area below the title. */
.tools-page .cutter-stage{
  order:0!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(10px,1.35vw,18px)!important;
  margin:0 0 14px!important;
  box-sizing:border-box!important;
}
.tools-page .cutter-panel{
  min-width:0!important;
  width:100%!important;
  padding:10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.tools-page .preview-frame{
  width:100%!important;
  min-width:0!important;
  min-height:clamp(16rem,29vw,31rem)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.tools-page .preview-frame canvas{
  display:block!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

/* Controls follow the visual work area and never exceed their parent. */
.tools-page .cutter-controls{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  gap:10px!important;
  padding:10px!important;
  margin:0 0 12px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.tools-page .controls-primary{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.tools-page .controls-paper{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.tools-page .controls-output{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.tools-page .cutter-controls > *,
.tools-page .cutter-controls button,
.tools-page .cutter-controls label,
.tools-page .cutter-controls input,
.tools-page .cutter-controls select,
.tools-page .cutter-controls output{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.tools-page .cutter-controls > button,
.tools-page .cutter-controls > .file-button,
.tools-page .cutter-controls > .control-inline,
.tools-page .cutter-controls > .range-control,
.tools-page .cutter-controls > .select-control,
.tools-page .cutter-controls > .seed-control{
  width:100%!important;
  min-height:52px!important;
  height:auto!important;
  padding:9px 10px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
}
.tools-page .cuts-control,
.tools-page .range-control,
.tools-page .color-control,
.tools-page .seed-control{
  overflow:hidden!important;
}
.tools-page .number-stepper{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:34px minmax(0,1fr) 34px!important;
}
.tools-page .range-control{
  grid-template-columns:auto minmax(0,1fr) 46px!important;
}
.tools-page .select-control select,
.tools-page .seed-control input,
.tools-page .number-stepper input,
.tools-page .color-control input{
  width:100%!important;
  min-width:0!important;
}
.tools-page .cutter-status,
.tools-page .seed-line{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  font-family:"Noto Serif KR","Times New Roman",serif!important;
}

@media(max-width:1100px){
  .tools-page .controls-primary,
  .tools-page .controls-paper,
  .tools-page .controls-output{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:760px){
  .tools-page .cutter-stage{
    grid-template-columns:1fr!important;
  }
  .tools-page .controls-primary,
  .tools-page .controls-paper,
  .tools-page .controls-output{
    grid-template-columns:1fr!important;
  }
  .tools-page .forma-head h2{
    font-size:clamp(1.9rem,10vw,2.9rem)!important;
  }
}