:root{--ink: #3b2a38;--ink-soft: #6a5262;--cream: #f1e9ef;--orange: #f09a42;--orange-dark: #c8622e;--gold: #f5c04a;--night: #14101c;--plum: #241a2b;--green: #5bb85d;--pixel: "Pixelify Sans", "Trebuchet MS", sans-serif;--body: "Atkinson Hyperlegible", "Trebuchet MS", Verdana, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased}#world{position:fixed;top:0;left:0;z-index:0;image-rendering:pixelated;image-rendering:crisp-edges;background:var(--night)}a{color:inherit}:focus-visible{outline:4px solid var(--gold);outline-offset:3px}.btn{display:inline-block;font-family:var(--pixel);font-weight:700;font-size:24px;letter-spacing:.02em;color:#fff;text-decoration:none;text-shadow:2px 2px 0 rgba(36,26,43,.55);background:var(--orange);padding:14px 28px 18px;border:4px solid var(--plum);box-shadow:inset 0 4px #ffb85a,inset 0 -6px 0 var(--orange-dark),0 6px 0 var(--plum);transition:transform .08s steps(2),filter .12s;cursor:pointer;image-rendering:pixelated}.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn:active{transform:translateY(4px);box-shadow:inset 0 4px #ffb85a,inset 0 -3px 0 var(--orange-dark),0 2px 0 var(--plum)}.btn-small{font-size:18px;padding:8px 18px 12px}.btn-big{font-size:34px;padding:18px 44px 24px}.btn-ghost{background:#d8c9d4;color:var(--ink);text-shadow:none;box-shadow:inset 0 4px #ece0e8,inset 0 -6px #a8949f,0 6px 0 var(--plum)}.topbar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:24px;padding:12px clamp(14px,3vw,36px);background:linear-gradient(180deg,#14101cc7,#14101c00)}.logo{font-family:var(--pixel);font-weight:700;font-size:30px;color:#fff3c8;text-decoration:none;text-shadow:0 3px 0 #3b1f2f,2px 0 0 #3b1f2f,-2px 0 0 #3b1f2f,0 -2px 0 #3b1f2f;margin-right:auto}.topbar nav{display:flex;gap:22px}.topbar nav a{color:#fff;font-weight:700;text-decoration:none;text-shadow:0 2px 0 rgba(20,16,28,.8)}.topbar nav a:hover{color:var(--gold)}.hud{position:fixed;z-index:15;right:clamp(14px,3vw,36px);top:74px;text-align:right;font-family:var(--pixel);font-weight:700;color:#fff;text-shadow:0 2px 0 var(--plum),2px 0 0 var(--plum),-2px 0 0 var(--plum);pointer-events:none}.hud-world{font-size:18px}.hud-world span:first-child{color:var(--gold);margin-right:6px}.hud-stars{font-size:22px;letter-spacing:3px;color:var(--gold)}.scroll-hint{position:fixed;z-index:15;left:50%;bottom:22px;transform:translate(-50%);font-family:var(--pixel);font-weight:700;font-size:20px;color:#fff;background:#14101cd1;border:3px solid var(--plum);padding:6px 16px 8px;box-shadow:0 4px 0 var(--plum);transition:opacity .4s;pointer-events:none}.scroll-hint.gone{opacity:0}.hint-arrow{display:inline-block;animation:hint .8s steps(2) infinite;color:var(--gold)}@keyframes hint{50%{transform:translateY(5px)}}main{position:relative;z-index:5}.stage{position:relative;min-height:150vh;padding:0 clamp(14px,5vw,80px)}.stage-last{min-height:125vh}.panel{position:sticky;top:15vh;max-width:min(580px,100%);padding:24px 28px 26px;border:21px solid transparent;border-image:url(/art/ui/dialog/DialogueBoxSimple.png) 7 fill stretch;image-rendering:pixelated;opacity:0;transform:translateY(26px);transition:opacity .5s,transform .5s steps(6);filter:drop-shadow(0 8px 0 rgba(20,16,28,.35))}.panel.in{opacity:1;transform:none}.panel-hero{max-width:min(640px,100%)}@media (min-width: 721px){.panel{max-width:min(580px,47vw)}.panel-hero{max-width:min(640px,52vw)}}.panel>*{margin-top:0}.panel>:last-child{margin-bottom:0}.eyebrow{margin:0 0 4px;font-family:var(--pixel);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark)}h1,h2{font-family:var(--pixel);font-weight:700;margin:0 0 10px;line-height:1.1;color:var(--ink)}h1{font-size:clamp(46px,7vw,84px)}.h1-logo{color:#e8873b;text-shadow:0 4px 0 #8f3f1c,0 8px 0 rgba(36,26,43,.25)}h2{font-size:clamp(30px,4vw,42px)}.lead{font-size:23px;font-weight:700;color:var(--ink);margin:6px 0 10px}p{margin:0 0 12px}.small{font-size:16px;color:var(--ink-soft)}.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 14px}.chips,.elements{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0 0}.chips li{font-family:var(--pixel);font-weight:700;font-size:16px;padding:3px 12px 5px;background:#d6f0d2;color:#1f5a2a;border:3px solid #2f7a3d}.elements{margin:8px 0 12px}.elements li{font-family:var(--pixel);font-weight:700;font-size:17px;padding:3px 12px 5px;color:#fff;border:3px solid var(--plum);text-shadow:1px 1px 0 rgba(0,0,0,.4)}.el-ember{background:#e0583f}.el-tide{background:#3f8fdc}.el-grove{background:#4aa04a}.el-gale{background:#7a8fe0}.el-stone{background:#8a7a6a}.el-star{background:#9a6bd1}.ticks{list-style:none;padding:0;margin:0}.ticks li{position:relative;padding-left:28px;margin:7px 0}.ticks li:before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:12px;background:var(--green);box-shadow:0 0 0 3px #2f7a3d}.ladder{list-style:none;padding:0;margin:10px 0 14px;display:grid;gap:4px}.ladder li{font-weight:700;padding:5px 12px;color:#fff;border:3px solid var(--plum);text-shadow:1px 1px 0 rgba(0,0,0,.35)}.ladder li:nth-child(1){background:#e8873b;margin-left:0}.ladder li:nth-child(2){background:#f5a64a;margin-left:14px}.ladder li:nth-child(3){background:#d6a52a;margin-left:28px}.ladder li:nth-child(4){background:#7fb34a;margin-left:42px}.ladder li:nth-child(5){background:#4fb86a;margin-left:56px}.ladder li:nth-child(6){background:#3fb9a8;margin-left:70px}.ladder li:nth-child(7){background:#4aa3df;margin-left:84px}.demo{margin-top:16px;padding:14px 16px 16px;background:#fffaf0;border:4px solid var(--plum);box-shadow:inset 0 0 0 3px var(--orange),0 5px 0 var(--plum)}.demo-top{display:flex;justify-content:space-between;font-family:var(--pixel);font-weight:700;font-size:17px;color:var(--orange-dark)}.demo-top b{color:var(--ink);font-size:20px}.demo-q{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 6px;font-family:var(--body);font-weight:700;font-size:clamp(44px,7vw,66px);line-height:1.1;color:var(--ink)}.demo-q .op{color:var(--orange-dark)}.demo-q input{width:3.2ch;font:inherit;text-align:center;color:var(--ink);background:#f3dccb;border:0;border-bottom:5px solid var(--orange);padding:0 4px;border-radius:0}.demo-q input::placeholder{color:#d9a98a}.demo-q input:focus{outline:none;background:#ffe9d6;border-bottom-color:var(--gold)}.demo-msg{min-height:1.6em;text-align:center;font-weight:700;font-size:18px;color:var(--ink-soft)}.demo.good{animation:good .5s steps(5)}.demo.good .demo-msg{color:#2f7a3d}.demo.bad .demo-msg{color:#b93c34}@keyframes good{30%{transform:scale(1.03);box-shadow:inset 0 0 0 3px var(--gold),0 0 0 5px #f5c04a99,0 5px 0 var(--plum)}}.credits{position:absolute;left:0;right:0;bottom:14px;padding:0 clamp(14px,5vw,80px)}.credits p{max-width:760px;margin:0 auto;text-align:center;font-size:14px;color:#e8dde4;text-shadow:0 2px 0 var(--night);background:#14101c99;padding:8px 14px}.credits a{color:var(--gold)}@media (max-width: 720px){body{font-size:17px}.topbar nav{display:none}.logo{font-size:24px}.hud{top:60px}.hud-world{font-size:15px}.hud-stars{font-size:17px;letter-spacing:1px}.stage{min-height:150vh;padding:0 6px}.panel{top:39vh;max-height:59vh;overflow-y:auto;padding:12px 14px 14px;border-width:14px;border-image-width:14px;max-width:100%}.panel-hero{max-width:100%}.panel h1{font-size:44px}.btn{font-size:19px;padding:10px 20px 14px}.btn-big{font-size:26px}.cta-row{gap:10px;margin:12px 0 10px}.lead{font-size:18px}.ladder li{padding:2px 10px;font-size:15px}.demo-q{font-size:40px;gap:10px}.scroll-hint{bottom:auto;top:33vh;font-size:16px}.credits{bottom:4px}}@media (max-height: 640px) and (min-width: 721px){.panel{top:10vh;padding:12px 16px 14px}h1{font-size:46px}h2{font-size:30px}.lead{font-size:19px}p{margin-bottom:6px;font-size:17px}.ticks li{margin:3px 0;font-size:17px}.hide-short{display:none}.cta-row{margin:10px 0 8px}.btn{font-size:20px;padding:10px 22px 14px}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.panel{transition:none;opacity:1;transform:none}.hint-arrow,.demo.good{animation:none}}