/* ============================================================================
   THE WRITING EXPERIMENT — v4 "dark Merz table"
   A dark, grainy ground layered with tape, stamps, halftone and torn scraps;
   content lives on aged cream paper sheets. Maximalist collage, still literary.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..800&family=Space+Grotesk:wght@400;500;600;700&family=Caveat:wght@500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

:root{
  --bg:#151210;
  --bg2:#221d17;
  --paper:#e9dfc6;
  --paper-k:#d7c8a6;   /* kraft */
  --paper-lt:#f1ead6;
  --ink:#1c1712;
  --ink2:#4d4536;
  --ink3:#7c715a;
  --cream:#e5d9bd;     /* text on dark */
  --cream-dim:#a99c7e;
  --line:rgba(28,23,18,.18);
  --line2:rgba(28,23,18,.10);
  --accent:#b0202e;    /* oxblood */
  --accent2:#2f6d6a;   /* teal */
  --gold:#b0842c;
  --stamp:#385a7a;     /* stamp blue */
  --shadow:0 30px 60px -22px rgba(0,0,0,.7);
  --shadow-sm:0 14px 30px -14px rgba(0,0,0,.55);
  --display:'Fraunces',Georgia,serif;
  --cond:'Oswald',sans-serif;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --hand:'Caveat',cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:#100e0c; min-height:100vh; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:3px 0 66px;
}

/* -------- dark textured ground -------- */
#bg{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 78% -10%, rgba(176,32,46,.10), transparent 62%),
    radial-gradient(1000px 900px at -6% 108%, rgba(47,109,106,.10), transparent 58%),
    radial-gradient(140% 120% at 50% 0%, #241f19 0%, #171410 55%, #100d0a 100%);
}
#bg::before{content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#bg::after{content:""; position:absolute; inset:0; opacity:.06;
  background-image:radial-gradient(currentColor 1.1px, transparent 1.6px); background-size:7px 7px; color:#000}

/* ----------------------------- top progress hairline ----------------------------- */
#topbar{position:fixed; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,.06); z-index:120}
#topfill{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ============================================================================
   COLLAGE EPHEMERA  (filled around + over the sheet by app.js)
   ============================================================================ */
#scraps{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.ep{position:fixed; will-change:transform; animation:drift 18s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0))}50%{transform:translate3d(0,-12px,0) rotate(calc(var(--r,0) + 2deg))}}
.ep-scrap{width:var(--w,120px); height:var(--h,80px); background:var(--c,var(--paper-k));
  box-shadow:var(--shadow-sm); filter:url(#torn2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E")}
.ep-tape{width:var(--w,110px); height:26px; background:rgba(226,214,180,.34); box-shadow:0 2px 6px rgba(0,0,0,.35);
  border-left:1px dashed rgba(0,0,0,.12); border-right:1px dashed rgba(0,0,0,.12)}
.ep-stamp{font-family:var(--cond); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:var(--fs,15px); color:var(--c,var(--accent)); border:2.5px solid currentColor; border-radius:3px;
  padding:.24em .5em; opacity:.72; filter:url(#rough)}
.ep-halftone{width:var(--w,90px); height:var(--h,60px); color:var(--c,#000); opacity:.5;
  background-image:radial-gradient(currentColor 32%, transparent 34%); background-size:8px 8px}
.ep-num{font-family:var(--display); font-weight:300; font-size:var(--fs,120px); color:var(--c,var(--cream)); opacity:.14; line-height:.8}
.ep-word{font-family:var(--display); font-style:italic; font-weight:400; font-size:var(--fs,54px); color:var(--c,var(--cream)); opacity:.16}
.ep-cond{font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:var(--fs,40px); color:var(--c,var(--cream)); opacity:.14}
.ep-line{width:var(--w,150px); height:var(--h,3px); background:var(--c,var(--cream)); opacity:.3}
.ep-ring{width:var(--w,64px); height:var(--w,64px); border:3px solid var(--c,var(--accent)); border-radius:52% 48% 51% 49%; opacity:.4; filter:url(#rough)}
.ep-dot{width:var(--w,16px); height:var(--w,16px); border-radius:50%; background:var(--c,var(--accent)); opacity:.55}
.ep-blot{width:var(--w,54px); height:var(--w,54px); border-radius:46% 54% 60% 40%/54% 46% 54% 46%; background:var(--c,var(--ink)); opacity:.5; filter:url(#rough)}
.ep-arrow{font-family:var(--display); font-size:var(--fs,50px); color:var(--c,var(--cream)); opacity:.3}
.ep-post{width:44px; height:52px; background:var(--c,var(--paper-lt)); opacity:.8;
  box-shadow:var(--shadow-sm); border:2px dotted rgba(0,0,0,.25)}

/* ============================================================================
   STAGE + PAPER SHEET
   ============================================================================ */
#stage{position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:44px 30px}
@media (max-width:720px){#stage{padding:26px 14px}}

.panel{position:relative; padding:64px 72px 52px; z-index:2;
  animation:rise .6s cubic-bezier(.2,.8,.2,1) both; isolation:isolate}
@media (max-width:880px){.panel{padding:44px 26px 40px}}
/* the torn cream sheet behind the content */
.panel::before{content:""; position:absolute; inset:-6px; z-index:-1; background:var(--paper);
  box-shadow:var(--shadow); filter:url(#torn); transform:rotate(-.35deg);
  background-image:
    linear-gradient(var(--paper),var(--paper)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-blend-mode:multiply}
/* a second paler sheet peeking beneath, for depth */
.panel::after{content:""; position:absolute; inset:2px 10px -14px 2px; z-index:-2; background:var(--paper-k);
  box-shadow:var(--shadow); filter:url(#torn2); transform:rotate(.8deg); opacity:.9}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* tape / marginalia injected by decorate() */
.tape-c{position:absolute; z-index:5; width:120px; height:34px; background:rgba(210,196,160,.5);
  box-shadow:0 3px 8px rgba(0,0,0,.35); mix-blend-mode:multiply; pointer-events:none;
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
.marg{position:absolute; z-index:4; pointer-events:none; color:var(--ink)}
.marg-num{font-family:var(--display); font-weight:300; font-size:clamp(90px,14vw,190px); line-height:.8; opacity:.08}
.marg-vert{writing-mode:vertical-rl; font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.32em; font-size:.8rem; color:var(--ink3)}
.marg-stamp{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  color:var(--accent); border:2.5px solid var(--accent); border-radius:3px; padding:.2em .5em; opacity:.62; filter:url(#rough); transform:rotate(-8deg)}

/* reading measure; media breaks wider */
.step-body{max-width:720px; margin:0 auto; position:relative; z-index:3}
.prose{font-size:1.22rem; line-height:1.68; color:#241f17}
.prose p{margin:0 0 1.05em}
.prose strong{font-weight:600; box-shadow:inset 0 -.5em 0 rgba(176,132,44,.22)}
.prose em{font-style:italic}

/* kicker with rule + condensed caps */
.kicker{font-family:var(--cond); font-size:.82rem; text-transform:uppercase; letter-spacing:.28em;
  color:var(--accent); font-weight:600; margin:0 0 1.2rem; display:flex; align-items:center; gap:.7em}
.kicker::before{content:""; width:44px; height:2px; background:var(--accent)}
.title{font-family:var(--display); font-weight:360; font-size:clamp(2.1rem,5vw,4rem); line-height:1.02;
  letter-spacing:-.015em; margin:0 0 1.5rem; max-width:15ch}
.title.huge{font-size:clamp(3.2rem,10vw,7rem); font-weight:300; line-height:.92; max-width:none; letter-spacing:-.02em}
.lead{font-family:var(--display); font-weight:350; font-size:clamp(1.35rem,2.5vw,1.85rem); line-height:1.32; color:#241f17}

.aside{font-size:1rem; color:var(--ink2); border-left:3px solid var(--gold); padding:.5rem 0 .5rem 1.2rem; margin:1.6rem 0; font-style:italic;
  background:linear-gradient(90deg, rgba(176,132,44,.07), transparent)}
blockquote{font-family:var(--display); font-weight:340; font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.36;
  margin:2rem 0; padding:.4rem 0 .4rem 1.7rem; border-left:4px solid var(--accent); color:#241f17; position:relative}
blockquote cite{display:block; margin-top:.7rem; font-family:var(--cond); font-style:normal; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.list-title{font-family:var(--cond); font-weight:600; font-size:.9rem; text-transform:uppercase; letter-spacing:.18em; color:var(--ink3); margin:1.5rem 0 .8rem}
.fancy-list{list-style:none; padding:0; margin:0; counter-reset:l}
.fancy-list li{padding:1rem 0 1rem 2.8rem; position:relative; border-top:1px solid var(--line2); font-size:1.08rem; line-height:1.5}
.fancy-list li:last-child{border-bottom:1px solid var(--line2)}
.fancy-list li::before{counter-increment:l; content:counter(l,decimal-leading-zero); position:absolute; left:0; top:1rem;
  font-family:var(--display); font-style:italic; color:var(--accent); font-size:1.15rem}

/* ----------------------------- footer / buttons ----------------------------- */
.footer{display:flex; align-items:center; gap:1.2rem; margin:3rem auto 0; max-width:720px; padding-top:1.6rem; border-top:1px solid var(--line); position:relative; z-index:3}
.gate-hint{font-family:var(--cond); font-size:.88rem; letter-spacing:.06em; color:var(--ink3); margin-right:auto; text-transform:uppercase}
.gate-hint.ok{color:var(--accent2)}
.btn{font-family:var(--cond); font-weight:600; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  background:var(--ink); color:var(--paper-lt); border:2px solid var(--ink); border-radius:2px;
  padding:.8rem 1.6rem; transition:transform .18s, background .25s; box-shadow:var(--shadow-sm)}
.btn:hover:not(:disabled){transform:translateY(-2px)}
.btn:disabled{opacity:.3; cursor:not-allowed; box-shadow:none}
.btn.ready{background:var(--accent); border-color:var(--accent)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{background:rgba(28,23,18,.05)}
.btn.big{font-size:1.1rem; padding:1rem 2rem}
.linkbtn{background:none; border:none; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit}

/* ----------------------------- welcome ----------------------------- */
.welcome{padding:88px 76px}
@media (max-width:880px){.welcome{padding:52px 26px}}
.welcome .lead{max-width:32ch; margin:1.2rem 0 2.4rem}
.field-label{font-family:var(--cond); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); display:block; margin:0 0 .8rem}
.name-input{width:100%; max-width:470px; font-family:var(--display); font-weight:350; font-size:1.7rem; padding:.5rem .1rem;
  border:none; border-bottom:2px solid var(--ink); background:transparent; margin-bottom:2rem; display:block; color:var(--ink)}
.name-input:focus{outline:none; border-color:var(--accent)}
.name-input::placeholder{color:var(--ink3); font-style:italic}

/* ----------------------------- art plates (collages / maps) ----------------------------- */
.plate{margin:2.4rem 0; text-align:center}
.plate img{max-width:100%; height:auto; display:block; margin:0 auto; box-shadow:var(--shadow); border:6px solid #fff; outline:1px solid var(--line)}
.plate figcaption{font-family:var(--display); font-style:italic; font-size:.98rem; color:var(--ink2); margin-top:.9rem; line-height:1.4}
.plate .plate-no{font-family:var(--cond); font-style:normal; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.3rem}
.plate a{color:var(--accent); font-family:var(--cond); font-style:normal; letter-spacing:.04em; font-size:.85rem}

.collage-grid{display:grid; grid-template-columns:1fr 1fr; gap:2.6rem 2.2rem; margin:2.6rem 0}
@media (max-width:680px){.collage-grid{grid-template-columns:1fr}}
.collage-card{margin:0}
.collage-card:nth-child(odd){transform:rotate(-1deg)}
.collage-card:nth-child(even){transform:rotate(1.2deg)}
.collage-frame{overflow:hidden; background:#fff; position:relative; box-shadow:var(--shadow); border:7px solid #fff; outline:1px solid var(--line)}
.collage-img{width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.collage-card:hover{transform:rotate(0) scale(1.03); z-index:4}
.collage-card:hover .collage-img{transform:scale(1.05)}
.collage-cap{font-family:var(--display); font-size:.98rem; line-height:1.45; margin-top:.9rem; color:var(--ink2)}
.collage-cap strong{font-style:italic; font-weight:400; color:var(--ink)}
.collage-cap .yr{font-family:var(--cond); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.2rem}
.collage-cap a{color:var(--accent); font-family:var(--cond); font-size:.82rem; display:inline-block; margin-top:.3rem}
.faux{position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--paper-k)}
.faux-bit{position:absolute; font-family:var(--display); padding:6px 10px; color:#fff; box-shadow:var(--shadow-sm)}
.faux-bit.ticket{width:70px; height:34px}
.faux-dot{position:absolute; width:46px; height:46px; border-radius:50%}
.faux-line{position:absolute; width:120px; height:8px}
.faux-label{position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:.72rem; color:var(--ink3); font-family:var(--cond); letter-spacing:.1em; text-transform:uppercase}

/* ----------------------------- media (video) ----------------------------- */
.video-holder{aspect-ratio:16/9; overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff; outline:1px solid var(--line); margin:2.2rem 0 1rem; background:#000}
.video-holder iframe{width:100%; height:100%; border:0; display:block}
.watch-meter{height:4px; background:var(--line); overflow:hidden; margin:0 0 .5rem; border-radius:2px}
.watch-meter span{display:block; height:100%; width:0; background:var(--accent); transition:width .3s}
.media-fallback{border:2px dashed var(--line); border-radius:4px; padding:1.4rem; margin-top:1.4rem; display:grid; gap:1rem; justify-items:start; background:rgba(0,0,0,.03)}
.confirm{display:flex; gap:.6rem; align-items:center; font-size:.98rem}
.confirm input{width:18px; height:18px}
.media-cap{font-family:var(--display); font-style:italic; font-size:.98rem; color:var(--ink2); text-align:center; margin:.4rem 0 0}

/* ----------------------------- syllables (centerpiece) ----------------------------- */
.syl-bar{display:flex; align-items:center; gap:1.2rem; margin:1.4rem 0 .4rem}
.syl-sound{font-family:var(--cond); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; background:transparent; border:2px solid var(--line);
  border-radius:2px; padding:.5rem .9rem; cursor:pointer; color:var(--ink2)}
.syl-sound:hover{border-color:var(--ink)}
.syl-counter{font-family:var(--cond); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.syllable-field{position:relative; display:flex; flex-wrap:wrap; gap:.15rem .45rem; margin:.5rem 0 .6rem; padding:3rem 2.6rem;
  background:var(--paper-lt); box-shadow:var(--shadow), inset 0 0 90px rgba(120,90,40,.1);
  border:6px solid #fff; outline:1px solid var(--line); min-height:360px; align-content:flex-start; overflow:hidden}
.syllable-field::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}
.syllable{position:relative; font-family:var(--display); font-weight:360; font-size:clamp(1.8rem,3.6vw,3.2rem); background:none; border:none;
  cursor:pointer; color:var(--ink); padding:.05em .12em; line-height:1; transition:transform .4s cubic-bezier(.34,1.55,.5,1), color .3s}
.syllable:hover{color:var(--accent); transform:translateY(-4px)}
.syllable.popped{filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}
.burst{position:absolute; width:14px; height:14px; pointer-events:none; transform:translate(-50%,-50%);
  border-radius:50%; box-shadow:0 0 0 2px currentColor; animation:burst .6s ease-out forwards}
@keyframes burst{from{opacity:.85; transform:translate(-50%,-50%) scale(.3)} to{opacity:0; transform:translate(-50%,-50%) scale(5)}}

/* ----------------------------- freewrite ----------------------------- */
.fw-prompt{font-family:var(--display); font-weight:350; font-size:1.4rem; line-height:1.38; color:#241f17;
  border-left:4px solid var(--accent); padding-left:1.3rem; margin:0 0 1.6rem}
.fw-bar{display:flex; gap:1.2rem; align-items:baseline; margin-bottom:.9rem}
.fw-clock{font-family:var(--display); font-weight:300; font-size:2.4rem; color:var(--ink); line-height:1}
.fw-clock.low{color:var(--accent)}
.fw-clock.done{color:var(--accent2)}
.fw-count{font-family:var(--cond); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
.fw-area{width:100%; min-height:340px; resize:vertical; font-family:var(--hand); font-size:1.75rem; line-height:42px;
  padding:1.1rem 1.3rem; border:6px solid #fff; outline:1px solid var(--line); color:#211c15;
  background:linear-gradient(var(--paper-lt),var(--paper-lt)),repeating-linear-gradient(transparent,transparent 41px,rgba(28,23,18,.1) 41px,rgba(28,23,18,.1) 42px);
  box-shadow:var(--shadow-sm)}
.fw-area:focus{outline:1px solid var(--accent)}
.fw-area::placeholder{color:var(--ink3)}

/* ----------------------------- annotate ----------------------------- */
.instructions{font-size:1.05rem; color:var(--ink2); margin-bottom:1rem}
.annotate-tools{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.2rem 0}
.tool{font-family:var(--cond); font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; background:transparent;
  border:2px solid var(--line); border-radius:2px; padding:.5rem .9rem; color:var(--ink2)}
.tool.active{background:var(--ink); color:var(--paper-lt); border-color:var(--ink)}
.tool.clear{margin-left:auto; color:var(--accent); border:none}
.annotate-canvas{font-family:var(--hand); font-size:1.85rem; line-height:2; background:var(--paper-lt);
  border:6px solid #fff; outline:1px solid var(--line); padding:1.6rem; box-shadow:var(--shadow-sm); color:#211c15}
.sent{position:relative}
.sent-tag{background:none; border:none; cursor:pointer; color:var(--ink3); font-size:1rem; padding:0 .2rem; vertical-align:middle}
.sent-tag:hover{color:var(--accent)}
.tok{cursor:pointer; padding:0 2px; border-radius:4px; transition:background .15s}
.tok:hover{background:rgba(176,32,46,.1)}
.mark-circle{box-shadow:inset 0 0 0 2px var(--accent); border-radius:58% 42% 52% 48%; padding:0 6px; color:var(--accent)}
.mark-box{box-shadow:inset 0 0 0 2px var(--stamp); border-radius:2px; padding:0 5px}
.ping{animation:ping .3s ease}
@keyframes ping{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ----------------------------- merz drag lab ----------------------------- */
.merz-lab{display:grid; grid-template-columns:160px 1fr; gap:1.4rem; margin:2rem 0}
@media (max-width:680px){.merz-lab{grid-template-columns:1fr}}
.merz-tray{display:flex; flex-direction:column; gap:.7rem; max-height:560px; overflow:auto; padding:4px}
@media (max-width:680px){.merz-tray{flex-direction:row; flex-wrap:wrap; max-height:none}}
.frag{user-select:none; cursor:grab; display:inline-flex; align-items:center; justify-content:center;
  min-width:56px; min-height:42px; box-shadow:var(--shadow-sm); position:relative; filter:url(#torn2)}
.frag:active{cursor:grabbing}
.frag-type{font-family:var(--display); font-weight:440; font-size:1.6rem; padding:.2rem .6rem; line-height:1}
.frag-stamp{font-family:var(--cond); font-weight:700; letter-spacing:.14em; font-size:.95rem; padding:.4rem .6rem; border:2.5px solid currentColor; border-radius:2px}
.frag-scrap{width:66px; height:48px}
.frag-ticket{width:78px; height:32px; border:1px dashed currentColor}
.frag-dot{width:36px; height:36px; border-radius:50%}
.frag-line{width:72px; height:7px}
.frag-cap{display:none}
.merz-canvas{position:relative; min-height:560px; background:var(--paper-lt);
  border:6px solid #fff; outline:1px solid var(--line); box-shadow:inset 0 0 80px rgba(120,90,40,.1); overflow:hidden}
.merz-watermark{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-style:italic; font-weight:300; font-size:3.6rem; color:rgba(28,23,18,.06); pointer-events:none}
.frag.placed{position:absolute; cursor:move; touch-action:none}

/* ----------------------------- emig table ----------------------------- */
.emig{margin:2rem 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.emig-head{display:grid; grid-template-columns:1fr 1fr; font-family:var(--cond); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--line)}
.emig-head div{padding:.9rem 1rem}
.emig-row{display:grid; grid-template-columns:1fr 1fr; font-size:1rem; line-height:1.45}
.emig-row div{padding:1rem; border-top:1px solid var(--line2)}
.emig-row div:first-child{border-right:1px solid var(--line2); font-family:var(--display); font-style:italic}
@media (max-width:680px){.emig-head,.emig-row{grid-template-columns:1fr}.emig-row div:first-child{border-right:none}}

/* ----------------------------- models ----------------------------- */
.models-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:2rem 0}
@media (max-width:760px){.models-grid{grid-template-columns:1fr}}
.model-card{background:var(--paper-lt); border:5px solid #fff; outline:1px solid var(--line); border-radius:2px; padding:1.6rem; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .2s}
.model-card:nth-child(1){transform:rotate(-1deg)} .model-card:nth-child(3){transform:rotate(1deg)}
.model-card:hover{transform:translateY(-5px) rotate(0)}
.model-card.open{outline-color:var(--accent)}
.model-no{font-family:var(--display); font-weight:300; font-size:2.8rem; color:var(--accent); line-height:1; margin-bottom:.5rem}
.model-card h3{font-family:var(--display); font-weight:400; font-size:1.3rem; margin:0 0 .3rem; line-height:1.1}
.model-cite{font-size:.8rem; color:var(--ink3); font-style:italic; margin:0}
.model-open{display:inline-block; margin-top:1rem; font-family:var(--cond); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.model-back{max-height:0; overflow:hidden; transition:max-height .4s ease}
.model-card.open .model-back{max-height:700px; margin-top:1rem}
.model-card.open .model-open{display:none}
.model-back ul{margin:0; padding-left:1.1rem; font-size:.98rem; line-height:1.55; display:grid; gap:.5rem}

/* ----------------------------- revision scraps ----------------------------- */
.scrap-board{display:flex; flex-wrap:wrap; gap:1.1rem; margin:2rem 0; padding:2.4rem; background:var(--paper-lt); border:6px solid #fff; outline:1px solid var(--line); box-shadow:var(--shadow-sm); min-height:170px}
.scrap{font-family:var(--hand); font-size:1.8rem; padding:.2rem .6rem; animation:drop .5s ease both; color:#211c15; box-shadow:var(--shadow-sm)}
.scrap-circle{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-sm); border-radius:55% 45% 50% 50%; color:var(--accent)}
.scrap-box{box-shadow:inset 0 0 0 2px var(--stamp),var(--shadow-sm); border-radius:2px}
@keyframes drop{from{opacity:0; transform:translateY(-12px)} to{opacity:1}}
.scrap-legend{font-family:var(--cond); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink3)}
.scrap-legend .dot{display:inline-block; width:12px; height:12px; vertical-align:middle; margin-right:4px}
.scrap-legend .dot.circle{border:2px solid var(--accent); border-radius:50%}
.scrap-legend .dot.box{border:2px solid var(--stamp)}

/* ----------------------------- finish ----------------------------- */
.finish-wrap{text-align:center; padding:1rem; max-width:620px; margin:0 auto}
.seal{font-family:var(--display); font-size:3.6rem; color:var(--accent); animation:spin 26s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.code-box{display:inline-block; border:2px solid var(--ink); border-radius:3px; padding:1.1rem 2rem; margin:1.4rem 0; background:rgba(0,0,0,.03)}
.code-label{font-family:var(--cond); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink3)}
.code{font-family:var(--display); font-weight:400; font-size:2.3rem; letter-spacing:.12em; color:var(--ink)}
.finish-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin:1.6rem 0}
.scroll-sentinel{height:1px}

/* ----------------------------- fixed status bar (bottom) ----------------------------- */
#statusbar{position:fixed; left:0; right:0; bottom:0; z-index:120; height:54px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 clamp(16px,4vw,44px);
  background:rgba(20,17,14,.9); backdrop-filter:blur(12px) saturate(1.1); border-top:1px solid rgba(255,255,255,.08); color:var(--cream)}
#navlabel{display:flex; align-items:center; gap:.8rem; background:none; border:none; cursor:pointer; padding:.3rem .2rem;
  font-family:var(--cond); color:var(--cream-dim); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase}
#navlabel:hover{color:var(--cream)}
#nav-part{font-family:var(--display); font-style:italic; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--cream)}
#nav-dots{display:flex; gap:7px}
.nd{width:8px; height:8px; border-radius:50%; border:1px solid var(--cream-dim); transition:.3s}
.nd.on{background:var(--accent); border-color:var(--accent)}
.nd.cur{transform:scale(1.5)}
#soundbtn{background:none; border:1px solid rgba(255,255,255,.18); border-radius:20px; cursor:pointer; padding:.42rem .95rem;
  font-family:var(--cond); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-dim); display:flex; align-items:center; gap:.4rem; transition:.25s}
#soundbtn:hover{border-color:var(--cream); color:var(--cream)}
#soundbtn.on{color:var(--gold); border-color:var(--gold)}
#soundbtn.on #soundicon{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* ----------------------------- nav sheet ----------------------------- */
#navsheet{position:fixed; left:0; right:0; bottom:54px; z-index:119; background:var(--bg2); border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -24px 50px -20px rgba(0,0,0,.7); padding:1.4rem clamp(16px,4vw,44px); animation:rise .3s ease both; color:var(--cream)}
#navsheet[hidden]{display:none}
.nav-row{display:flex; align-items:center; gap:1rem; padding:.85rem 0; border-top:1px solid rgba(255,255,255,.08); cursor:pointer; font-family:var(--cond)}
.nav-row:first-child{border-top:none}
.nav-row .nr-no{font-family:var(--display); font-size:1.5rem; color:var(--accent); width:2ch}
.nav-row.locked{opacity:.4; cursor:not-allowed}
.nav-row .nr-t{font-family:var(--display); font-style:italic; font-size:1.15rem; text-transform:none}
.nav-row .nr-k{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim); margin-left:auto}

/* ----------------------------- test bar (dev) ----------------------------- */
.testbar{position:fixed; top:3px; left:0; right:0; z-index:130; background:rgba(10,8,7,.94); color:var(--gold);
  font-family:var(--cond); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; padding:.5rem 1rem; display:flex; align-items:center; gap:.8rem; backdrop-filter:blur(8px)}
.testbar button{font:inherit; font-size:.76rem; background:var(--gold); color:#100e0c; border:none; border-radius:3px; padding:.25rem .7rem; cursor:pointer; font-weight:600}
.has-testbar #stage{padding-top:66px}
.has-testbar #topbar{top:36px}