:root{
  --walnut:#1c110b; --walnut2:#2b1a10; --amber:#f2a93b; --amber2:#ffd27a;
  --ink:#f1e3c6; --dim:#a89276; --cart:#b8b3aa; --red:#c8323a;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'IBM Plex Mono',monospace;min-height:100vh;
  background:
   radial-gradient(ellipse 70% 45% at 50% -5%, rgba(255,190,90,.28), transparent 70%),
   repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px),
   linear-gradient(180deg,var(--walnut2),var(--walnut));}
.pix{font-family:'Press Start 2P',monospace;letter-spacing:.02em}
.serif{font-family:'Cormorant Garamond',serif}
.glow{color:var(--amber2);text-shadow:0 0 6px rgba(255,170,60,.8),0 0 22px rgba(255,140,30,.45);animation:flick 5s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.55}94%{opacity:1}97%{opacity:.8}}
.panel{background:linear-gradient(180deg,#c4bfb6,#a7a29a);color:#1d1a17;border-radius:6px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.5)}
.panel-dark{background:rgba(20,12,7,.78);border:1px solid rgba(242,169,59,.25);border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.btn{font-family:'Press Start 2P',monospace;font-size:10px;padding:11px 12px;border-radius:4px;background:#2a2622;color:#efe6d6;min-height:40px;
  border:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.15);cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(2px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-red{background:var(--red)}
.btn-amber{background:var(--amber);color:#2a1606}
.inp{font-family:'IBM Plex Mono',monospace;background:#1b1714;color:#ffd99a;border:2px solid #3a332d;border-radius:4px;padding:8px;width:100%;font-size:14px}
.inp:focus{outline:2px solid var(--amber)}
textarea.inp{word-break:break-all;resize:vertical}
.shelf{background:linear-gradient(180deg,#3b2414,#24150c);border-bottom:14px solid #4a2d18;box-shadow:inset 0 10px 25px rgba(0,0,0,.6),0 12px 0 #1a0e07;
  padding:22px 12px 0;border-radius:4px 4px 0 0;display:flex;gap:4px;align-items:flex-end;overflow-x:auto;-webkit-overflow-scrolling:touch}
.spine{flex:0 0 32px;height:170px;border-radius:3px 3px 0 0;cursor:pointer;position:relative;transition:transform .2s;
  box-shadow:inset -4px 0 0 rgba(0,0,0,.3),inset 3px 0 0 rgba(255,255,255,.18);writing-mode:vertical-rl;transform-origin:bottom center;
  display:flex;align-items:center;justify-content:flex-start;padding-top:8px;font-family:'Press Start 2P',monospace;font-size:7px;color:#fff;
  text-shadow:1px 1px 0 #000;overflow:hidden;white-space:nowrap;animation:rise .5s both}
.spine:hover{transform:translateY(-10px) rotate(-4deg)}
.spine.sel{transform:translateY(-16px);outline:2px solid var(--amber2)}
.spine .num{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);writing-mode:horizontal-tb;font-size:6px;opacity:.85}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1}}
.screen-wrap{position:relative;background:#000;border-radius:10px;padding:10px;box-shadow:inset 0 0 30px #000,0 0 0 6px #2a2622}
.screen{width:100%;image-rendering:pixelated;display:block;aspect-ratio:256/240;border-radius:6px;background:#000}
.scan::after{content:"";position:absolute;inset:10px;pointer-events:none;border-radius:6px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 60px rgba(0,0,0,.6)}
.pad{width:48px;height:48px;touch-action:none;user-select:none;-webkit-user-select:none}
.hexdump{font-size:11px;line-height:1.5;white-space:pre;overflow-x:auto;color:#ffd99a}
.cartbody{background:linear-gradient(180deg,#9e9a93,#7d7973);border-radius:8px 8px 4px 4px;padding:10px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.25)}
.led{width:8px;height:8px;border-radius:50%;background:#ff3030;box-shadow:0 0 8px #ff3030;display:inline-block;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.dust{position:fixed;inset:0;pointer-events:none;z-index:0}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,220,160,.35);animation:drift 14s linear infinite}
.dust i:nth-child(1){left:10%;animation-delay:0s}.dust i:nth-child(2){left:25%;animation-delay:3s}
.dust i:nth-child(3){left:40%;animation-delay:6s}.dust i:nth-child(4){left:55%;animation-delay:1s}
.dust i:nth-child(5){left:70%;animation-delay:8s}.dust i:nth-child(6){left:85%;animation-delay:4s}
.dust i:nth-child(7){left:33%;animation-delay:10s}.dust i:nth-child(8){left:92%;animation-delay:12s}
@keyframes drift{from{top:-2%;transform:translateX(0)}to{top:102%;transform:translateX(40px)}}
#root{position:relative;z-index:1}
a{color:var(--amber2)}