/* Get the Keys game shell on the insync.homes chrome. Tokens come inline from styles/insync.css. The scene keeps its own daylight palette. */
:root{--ink:#182e32;--cream:#f7f4ec;--line:var(--border-dark)}
*{box-sizing:border-box}body{margin:0;background:var(--void);color:var(--text-primary);font-family:Inter,sans-serif}
.settings{display:flex;align-items:center;justify-content:flex-end;gap:20px;font-size:12px;color:var(--text-secondary);padding:10px clamp(20px,3.5vw,64px) 0}.settings label{display:flex;align-items:center;gap:5px;min-height:44px}input{accent-color:var(--gold);width:18px;height:18px}
main{display:grid;grid-template-columns:48% 52%;min-height:calc(100vh - 88px);padding-top:88px}
.neighborhood{position:sticky;top:88px;height:calc(100vh - 88px);min-height:570px;overflow:hidden;background:#c7ded9;color:var(--ink)}
.hero{position:absolute;z-index:1;top:36px;left:8%;pointer-events:none}.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;font-weight:600}
.neighborhood .eyebrow{color:var(--ink)}
h1{font:700 clamp(44px,4.6vw,70px)/1.05 'Instrument Sans',sans-serif;letter-spacing:-2px;margin:14px 0;color:var(--ink)}h1 span{color:#997029}.hero p{font-size:15px;color:#3f5558}
canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.scene-caption{position:absolute;bottom:25px;left:8%;right:8%;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1px;display:flex;justify-content:space-between;gap:10px;color:var(--ink)}.scene-caption span{font-size:8px}
.play{padding:12px clamp(20px,3.5vw,64px) 32px;max-width:860px;width:100%;margin:0 auto;align-self:start}
.play .eyebrow{color:var(--gold)}
h2{font:700 clamp(28px,3vw,42px)/1.13 'Instrument Sans',sans-serif;letter-spacing:-.8px;margin:14px 0;color:var(--white)}
p{line-height:1.65;color:var(--text-secondary);font-size:14px}
.progress{display:flex;gap:5px;margin:0 0 22px}.progress i{height:4px;background:var(--graphite);flex:1;border-radius:4px}.progress .done{background:var(--gold)}
.stage-label{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1.5px;color:var(--gold)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--border-gold);border-radius:10px;overflow:hidden;margin:20px 0;background:var(--border-gold)}
.metric{background:var(--obsidian);padding:12px 10px}.metric small{display:block;color:var(--text-dim);font-size:10px}.metric strong{display:block;font-size:19px;margin:4px 0;color:var(--white)}.metric em{font-style:normal;font-size:10px;color:var(--text-secondary)}
.choices{display:grid;gap:10px}
button,.cta{cursor:pointer;min-height:46px;font:inherit;font-weight:600;border:1px solid var(--gold);border-radius:8px;padding:13px 17px;background:transparent;color:var(--gold);text-align:center;text-decoration:none}
button:hover,.cta:hover{background:var(--gold-dim)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.choice{display:block;width:100%;text-align:left;border:1px solid var(--border-gold);background:var(--obsidian);color:var(--text-primary);padding:14px 16px;transition:transform .15s,border-color .15s;font-weight:400}
.choice:hover{border-color:var(--gold);background:var(--slate);transform:translateY(-2px)}.choice b{font-size:14px;display:block;color:var(--white)}.choice .sub{display:block;font-size:11px;line-height:1.6;color:var(--text-secondary);margin-top:5px}.choice .price{font-size:19px;color:var(--gold);margin:8px 0 3px}
.choice .tag{float:right;font-size:10px;font-weight:600;background:var(--gold-dim);color:var(--gold);padding:3px 8px;border-radius:20px}
.quiet{background:transparent;border:1px solid var(--border-gold);color:var(--text-secondary);font-size:12px;padding:8px 13px}
.back{margin-top:15px;color:var(--text-secondary);background:none;border:0;padding-left:0;text-decoration:underline;font-size:12px;font-weight:400}.back:hover{background:none;color:var(--gold)}
details{font-size:12px;margin:18px 0;color:var(--text-secondary)}summary{cursor:pointer;padding:9px 0;min-height:38px;color:var(--text-primary)}
.breakdown{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;background:var(--obsidian);border:1px solid var(--border-dark);border-radius:8px;margin-top:8px}
.note{padding:15px;background:var(--obsidian);border-left:3px solid var(--gold);border-radius:4px;font-size:13px;line-height:1.6;color:var(--text-primary)}
.delta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;font-size:12px}.delta span{background:var(--obsidian);padding:8px;border:1px solid var(--border-gold);border-radius:5px}
.primary{background:var(--gold);color:var(--obsidian);width:100%;font-weight:700;margin-top:15px;border-color:var(--gold)}.primary:hover{background:var(--gold-bright)}
.lessons{padding-left:21px;color:var(--text-secondary);font-size:14px;line-height:1.6}.lessons li{padding:6px 0}.cta{display:block;margin-top:12px}.tiny{font-size:11px;color:var(--text-dim)}
.welcome{background:var(--obsidian);border:1px solid var(--border-gold);padding:15px;border-radius:10px}.welcome strong{font-size:13px;color:var(--white)}.welcome p{font-size:12px;margin:7px 0 0}
.shell-note{padding:18px clamp(20px,3.5vw,64px);font-size:10px;line-height:1.6;color:var(--text-dim);border-top:1px solid var(--border-dark);grid-column:1/-1}.shell-note span{float:right}
#loading{position:absolute;top:55%;left:10%;right:10%;padding:20px;background:#fff;color:var(--ink);border-radius:10px;font-size:13px}progress{display:block;width:100%;margin-top:10px;accent-color:var(--gold)}
.error{padding:20px;background:#3a1d12;color:#f3c9b4;border-radius:8px}button:disabled{opacity:.5}body.reduce *{transition:none!important;scroll-behavior:auto!important}
@media(min-width:1100px){.choices.home-options{grid-template-columns:1fr}.home-options .choice{padding:12px 16px}.home-options .price{font-size:17px}}
@media(max-width:760px){main{display:block;padding-top:66px;min-height:0}.settings{padding:6px 20px 0;gap:10px;font-size:10px}.settings .quiet{font-size:10px}.neighborhood{position:relative;top:auto;min-height:0;height:290px}.hero{top:18px;left:22px}h1{font-size:40px;margin:8px 0;letter-spacing:-1.5px}.eyebrow{font-size:8px;letter-spacing:1.3px}.hero p{font-size:11px;margin:0}.scene-caption{bottom:12px;left:22px;right:22px;font-size:8px}.scene-caption span{font-size:7px}.play{padding:16px 20px 22px}.progress{margin-bottom:15px}h2{font-size:31px}.metric{padding:10px 8px}.metric strong{font-size:18px}.shell-note span{display:block;float:none}.choice{min-height:58px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep the title clear of the miniature scene on portrait phones. */
@media(max-width:760px){.neighborhood{height:400px}.neighborhood canvas{position:absolute;top:125px;height:250px;width:100%}.hero{z-index:2}.scene-caption{bottom:12px}}