:root { --bg:#F6F0E4; --card:#FFFDF8; --ink:#2B1F14; --muted:#6E5F4E; --accent:#B4641F; --line:#E6DCCB; --room:#2A1E16; --board1:#70472B; --board2:#4A2C19; }
@media (prefers-color-scheme: dark) { :root { --bg:#17120E; --card:#221A14; --ink:#F3E6D2; --muted:#B8A78F; --line:#3A2E24; --accent:#E39A55; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width:560px; margin:0 auto; padding:36px 16px 48px; text-align:center; }
h1 { font-family:Newsreader, Georgia, serif; font-weight:500; font-size:30px; line-height:1.15; margin:12px 0 4px; overflow-wrap:anywhere; }
h2 { font-family:Newsreader, Georgia, serif; font-weight:500; font-size:22px; margin:28px 0 8px; text-align:left; }
.meta { color:var(--muted); margin:0 0 16px; font-size:15px; }
.lito { width:84px; height:84px; margin:0 auto; display:block; }
.shelf { background:var(--room); border-radius:18px; padding:18px 10px 12px; text-align:left; box-shadow:inset 0 0 60px rgba(0,0,0,.35); overflow:hidden; }
.row { display:flex; align-items:flex-end; gap:3px; height:110px; padding:0 6px; overflow:hidden; }
.row + .board + .row { margin-top:16px; }
.board { height:10px; background:linear-gradient(var(--board1), var(--board2)); border-radius:2px; box-shadow:0 6px 10px rgba(0,0,0,.35); }
.sp { border:0; padding:0; cursor:pointer; border-radius:2px 2px 0 0; position:relative; flex:none; box-shadow:1px 0 0 rgba(0,0,0,.25) inset; }
.sp span { position:absolute; left:50%; top:10px; bottom:12px; width:1px; transform:translateX(-50%); display:block; writing-mode:vertical-rl; font-size:9px; line-height:1; overflow:hidden; color:var(--sp-ink); white-space:nowrap; letter-spacing:.02em; }
.sp:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.tip { margin:12px 0 0; min-height:24px; color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.stores { display:flex; flex-direction:column; gap:10px; max-width:320px; margin:20px auto 6px; }
.store { display:block; padding:14px 18px; border-radius:14px; font-weight:700; text-decoration:none; min-height:48px; }
.store.on { background:var(--accent); color:#fff; }
.store.ghost { border:1.5px solid var(--accent); color:var(--accent); }
.store.wide { max-width:320px; margin:20px auto 0; }
.open { color:var(--muted); font-size:14px; text-decoration:underline; display:inline-block; padding:8px; }
.brand { margin-top:22px; font-size:12px; letter-spacing:.18em; color:var(--muted); }
footer { font-size:13px; color:var(--muted); margin-top:20px; }
footer a { color:var(--accent); text-decoration:none; }
.empty { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px 20px; margin:12px 0; }
.code { font:700 30px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.08em; margin:6px 0 0; user-select:all; }
.text { text-align:left; }
.text li { margin:6px 0; }
.hidden { display:none; }