@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=VT323&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Special+Elite&display=swap');

:root{
  --bg0:#0d0621; --bg1:#1b0b3b; --bg2:#2b0f54;
  --pink:#ff2e88; --pink-soft:#ff7ab8; --cyan:#29f3ff; --orange:#ff9a3d;
  --yellow:#ffe45e; --purple:#8b5cf6; --ink:#f4ecff; --dim:#b9a8e0;
  --paper:#f6ecda; --paper-ink:#2b2135; --ash:#8d8296;
  --panel:rgba(20,10,45,.78); --line:rgba(255,46,136,.35);
  --chrome1:#fdfdff; --chrome2:#9fd8ff; --chrome3:#5b5bd6; --chrome4:#2a1b5e;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:'VT323',ui-monospace,monospace; font-size:19px; line-height:1.45;
  background:
    radial-gradient(1200px 500px at 50% -80px, rgba(255,46,136,.28), transparent 60%),
    radial-gradient(900px 480px at 85% 10%, rgba(41,243,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 78%, #12041f 100%);
  min-height:100vh; overflow-x:hidden;
}
#sky-ash{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}
.scanlines{position:fixed;inset:0;z-index:50;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);}
::selection{background:var(--pink);color:#fff}

/* ---------- masthead ---------- */
.masthead{position:relative;z-index:1;text-align:center;padding:18px 16px 0}
.mast-top{display:flex;justify-content:space-between;gap:12px;max-width:1080px;margin:0 auto 6px;
  font-size:17px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;flex-wrap:wrap}
.blink-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5dff8f;margin-right:6px;
  box-shadow:0 0 8px #5dff8f;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.sun{position:relative;display:block;margin:6px auto 2px;width:190px;height:95px;border:0;background:none;cursor:pointer;overflow:hidden;border-radius:200px 200px 0 0}
.sun-core{position:absolute;inset:0;border-radius:200px 200px 0 0;
  background:linear-gradient(180deg,var(--yellow) 0%,var(--orange) 38%,var(--pink) 72%,var(--purple) 100%);
  box-shadow:0 0 60px rgba(255,46,136,.65),0 0 140px rgba(255,154,61,.35);
  -webkit-mask:linear-gradient(#000 0 0) top/100% 100% no-repeat;animation:sunpulse 4s ease-in-out infinite}
.sun::after{content:"";position:absolute;inset:0;border-radius:200px 200px 0 0;
  background:repeating-linear-gradient(180deg, transparent 0 9px, var(--bg1) 9px 13px);
  background-position-y:8px;animation:sunlines 9s linear infinite;opacity:.9}
@keyframes sunlines{to{background-position-y:60px}}
@keyframes sunpulse{50%{filter:saturate(1.3) brightness(1.08)}}
.logo{margin:2px 0 0;font-family:Orbitron,sans-serif;font-weight:900;line-height:1.02;
  font-size:clamp(34px,7.5vw,72px);letter-spacing:3px}
.chrome{background:linear-gradient(180deg,var(--chrome1) 0%,var(--chrome2) 30%,#fff 46%,var(--chrome3) 55%,var(--chrome4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.neon{color:#fff;position:relative;
  text-shadow:0 0 6px #fff,0 0 18px var(--pink),0 0 42px var(--pink),0 0 80px var(--purple);
  animation:flicker 5s infinite}
@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
.tagline{color:var(--dim);font-size:21px;margin:6px 0 12px}
.ticker{max-width:1080px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;color:var(--cyan);letter-spacing:2px;font-size:18px;background:rgba(0,0,0,.35)}
.ticker-inner{display:inline-block;padding:6px 0;animation:tick 26s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- layout ---------- */
#app{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:18px 16px 40px}
.press-grid{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-top:16px}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 16px 18px;backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(41,243,255,.08),0 18px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.panel h2{font-family:Orbitron,sans-serif;font-size:15px;letter-spacing:3px;margin:0 0 12px;color:var(--cyan)}
.sec-no{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;margin-right:8px;
  background:var(--pink);color:#fff;border-radius:4px;box-shadow:0 0 12px rgba(255,46,136,.8);font-size:13px}
.panel-sub{color:var(--dim);margin:0 0 12px;font-size:18px}
.edition{float:right;color:var(--yellow);text-shadow:0 0 12px rgba(255,228,94,.7);font-size:13px}

/* ---------- deck ---------- */
.field{display:block;margin-bottom:12px}
.label{display:block;letter-spacing:2px;text-transform:uppercase;color:var(--pink-soft);font-size:17px;margin-bottom:6px}
.label b{color:var(--yellow)}
.birds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bird{border:1px solid rgba(41,243,255,.35);background:rgba(41,243,255,.06);color:var(--ink);
  border-radius:10px;padding:8px 6px;cursor:pointer;font-family:inherit;text-align:center;transition:.18s}
.bird .glyph{display:block;font-size:19px;color:var(--cyan)}
.bird .bname{display:block;font-size:19px;letter-spacing:1px}
.bird .bnote{display:block;font-size:15px;color:var(--dim)}
.bird:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(41,243,255,.25)}
.bird.on{border-color:var(--pink);background:rgba(255,46,136,.16);box-shadow:0 0 16px rgba(255,46,136,.5)}
select,input[type=range]{width:100%}
select{background:#140a33;color:var(--ink);border:1px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:19px;padding:8px}
input[type=range]{accent-color:var(--pink);height:28px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;gap:10px;align-items:baseline;cursor:pointer;color:var(--ink)}
.check em{color:var(--dim);font-style:normal}
.check input{accent-color:var(--cyan);width:18px;height:18px;transform:translateY(3px)}
.lever-row{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:6px}
.btn{font-family:Orbitron,sans-serif;font-size:14px;letter-spacing:2px;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,#ff5aa2,var(--pink) 55%,#b3125f);border:1px solid #ff8fc0;border-radius:10px;
  padding:12px 14px;text-transform:uppercase;box-shadow:0 4px 0 #6e0b3c,0 0 18px rgba(255,46,136,.55);transition:.15s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #6e0b3c}
.btn.ghost{background:rgba(41,243,255,.08);border-color:rgba(41,243,255,.5);color:var(--cyan);
  box-shadow:0 4px 0 #0b5560,0 0 14px rgba(41,243,255,.25)}
.btn.small{font-size:12px;padding:8px 10px}
.btn.big{animation:btnpulse 2.2s ease-in-out infinite}
@keyframes btnpulse{50%{box-shadow:0 4px 0 #6e0b3c,0 0 34px rgba(255,46,136,.9)}}
.lever-track{margin-top:10px;height:14px;border-radius:99px;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));
  position:relative;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.lever-knob{position:absolute;top:-8px;left:8px;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 45%,#0a4d66);box-shadow:0 0 16px var(--cyan);transition:left .5s cubic-bezier(.6,-.3,.3,1.4)}
.pressing .lever-knob{left:calc(100% - 38px)}
.hint{color:var(--dim);font-size:17px;margin:10px 0 0}
kbd{border:1px solid var(--dim);border-bottom-width:3px;border-radius:5px;padding:0 6px;color:var(--yellow)}

/* ---------- press + sheet ---------- */
.platen-wrap{position:relative}
.platen{border:2px solid rgba(255,228,94,.6);border-radius:10px;text-align:center;letter-spacing:6px;
  font-family:Orbitron,sans-serif;font-size:14px;color:var(--yellow);padding:8px;margin-bottom:0;
  background:linear-gradient(180deg,rgba(255,228,94,.12),transparent);text-shadow:0 0 12px rgba(255,228,94,.6);
  transition:transform .12s}
.platen.slam{transform:translateY(128px) scaleY(.9)}
.beachline{height:46px;position:relative;border-bottom:2px dashed rgba(41,243,255,.4);margin-bottom:10px;
  background:linear-gradient(180deg,transparent 60%,rgba(255,154,61,.15))}
.walker{position:absolute;bottom:2px;left:0;font-size:24px;color:var(--orange);transition:left .3s;white-space:nowrap}
.walker .peck{color:var(--yellow);opacity:0;margin-left:4px}
.walking .peck{animation:peck .3s infinite}
@keyframes peck{50%{opacity:1;transform:translateY(2px)}}
.sheet{position:relative;background:
    radial-gradient(600px 200px at 50% 0%, rgba(255,154,61,.18), transparent 70%),
    linear-gradient(180deg,#fbf3e3,var(--paper) 30%,#e9dcc2);
  color:var(--paper-ink);border-radius:6px;padding:26px 26px 20px;min-height:380px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 0 60px rgba(120,90,40,.18);
  border:1px solid #c9b892}
.sheet::before,.sheet::after{content:"";position:absolute;top:10px;bottom:10px;width:1px;background:rgba(255,46,136,.35)}
.sheet::before{left:44px}.sheet::after{left:48px}
.sheet-head{display:flex;justify-content:space-between;font-family:Orbitron,sans-serif;font-size:12px;
  letter-spacing:3px;color:#7a5c2e;border-bottom:2px solid var(--paper-ink);padding-bottom:8px}
#poem-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(28px,4.5vw,40px);
  margin:14px 0 2px;line-height:1.05}
.byline{font-family:'Special Elite',monospace;font-size:15px;color:#6b5a44;margin:0 0 12px}
.poem{font-family:'Cormorant Garamond',serif;font-size:22px;line-height:1.55;margin-left:64px;white-space:pre-line}
.poem p{margin:0 0 14px}
.stanza{margin:0 0 14px}
.stanza .ln{display:block;min-height:1.4em}
.reveal .ln{opacity:0;animation:rise .5s forwards}
@keyframes rise{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1}}
.colophon{display:flex;justify-content:space-between;margin-top:18px;padding-top:8px;
  border-top:1px dashed #7a5c2e;font-family:'Special Elite',monospace;font-size:14px;color:#6b5a44}
.ash-grain{position:absolute;inset:0;pointer-events:none;border-radius:6px;opacity:.5;mix-blend-mode:multiply}
.status{display:block;color:var(--cyan);letter-spacing:1px;min-height:1.5em}
.press-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}

/* ghost edition */
body.ghost{--pink:#b18cff;--pink-soft:#d5c2ff;--cyan:#8ef7ff;--orange:#c9b8ff}
body.ghost .sheet{background:linear-gradient(180deg,#14102a,#1e1745);color:#e8ddff;
  box-shadow:0 0 60px rgba(139,92,246,.6)}
body.ghost .sheet-head{color:#b18cff;border-color:#b18cff}
body.ghost .byline,body.ghost .colophon{color:#9d8bd0;border-color:#5b4a8f}
body.ghost #poem-title{text-shadow:0 0 24px rgba(139,92,246,.8)}
.ghost-banner{border:1px solid var(--purple);color:#fff;background:linear-gradient(90deg,#3b1d7a,#7c2bd6);
  border-radius:8px;padding:6px 10px;letter-spacing:2px;font-size:16px;margin-bottom:10px;display:none}
body.ghost .ghost-banner{display:block;animation:btnpulse 2s infinite}

/* shelf */
.shelf{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:300px;overflow:auto}
.shelf li{border:1px dashed rgba(255,228,94,.5);border-radius:8px;padding:8px 10px;display:flex;
  justify-content:space-between;gap:8px;align-items:center;background:rgba(255,228,94,.05)}
.shelf .t{color:var(--yellow);letter-spacing:1px}
.shelf .m{color:var(--dim);font-size:16px;display:block}
.shelf button{background:none;border:1px solid var(--line);color:var(--pink-soft);border-radius:6px;
  font-family:inherit;font-size:16px;cursor:pointer;padding:2px 8px;margin-left:6px}
.shelf button:hover{border-color:var(--pink);color:#fff}
.empty{opacity:.7}
.count{color:var(--yellow);font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--dim);margin-top:22px;
  font-size:17px;letter-spacing:1px}
.foot-egg b{color:var(--yellow)}

/* print-only zone hidden on screen */
#print-zone{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .press-grid{grid-template-columns:1fr}
  .export-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  body{font-size:18px}
  .poem{margin-left:0;font-size:20px}
  .sheet::before,.sheet::after{display:none}
  .lever-row{grid-template-columns:1fr}
  .mast-top{font-size:14px}
}

/* ---------- print ---------- */
@media print{
  body{background:#fff !important;color:#000 !important}
  #sky-ash,.scanlines,.masthead,#app .deck,#app .export-grid,.foot,.press-foot,.beachline,.platen,.ticker{display:none !important}
  #app{max-width:none;padding:0}
  .press-grid{display:block}
  .panel{border:0;box-shadow:none;background:#fff !important;padding:0}
  .panel h2{display:none}
  .sheet{box-shadow:none;border:2px solid #000;min-height:auto}
  .ash-grain{opacity:.25}
  #print-zone{display:block;color:#000;font-family:Georgia,serif}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}