*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;grid-template-columns:300px 1fr;background:#e7e3d9;font-family:var(--font-sans);color:var(--text-body)}
body:not(.ready) #stage{visibility:hidden}
.panel{background:var(--teal-900);color:#fff;padding:22px 20px;display:flex;flex-direction:column;gap:14px;height:100vh;position:sticky;top:0;overflow:auto}
.pbrand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.pbrand img{height:40px;width:auto}
.pbrand b{display:block;font:600 18px/22px var(--font-serif)}
.pbrand i{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-500)}
.pswitch{display:flex;gap:6px;background:#ffffff14;border-radius:14px;padding:4px}
.pswitch a{flex:1;text-align:center;padding:8px 6px;border-radius:10px;color:#ffffffbf;text-decoration:none;font-size:12.5px;font-weight:600}
.pswitch a.on{background:#fff;color:var(--teal-800)}
.pfield{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-500)}
.pfield select{font:500 14px var(--font-sans);padding:10px 12px;border-radius:12px;border:0;background:#fff;color:var(--teal-800);max-width:100%}
.pbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pbtns button{font:600 13px var(--font-sans);padding:10px;border-radius:999px;border:1px solid #ffffff40;background:transparent;color:#fff;cursor:pointer}
.pbtns button:disabled{opacity:.4;cursor:default}
.pbtns #btn-hints{grid-column:1 / -1}
.pbtns #btn-hints.on{background:var(--gold-500);color:var(--teal-900);border-color:var(--gold-500)}
.pnow{margin:4px 0 0;font:600 15px/21px var(--font-serif);color:#fff}
.phelp{margin:0;font-size:12.5px;line-height:19px;color:#ffffff99}
.pgallery{margin-top:auto;color:var(--gold-500);font-size:13px;font-weight:600;text-decoration:none}
#stage{display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;min-height:100vh;overflow:hidden}
.art-host{display:none;position:relative}
.art-host.on{display:block}
.a-push{animation:pushIn .32s cubic-bezier(.32,.72,0,1)}
.a-pop{animation:popIn .32s cubic-bezier(.32,.72,0,1)}
.a-sheet{animation:sheetIn .34s cubic-bezier(.32,.72,0,1)}
.a-fade{animation:fadeIn .22s ease-out}
@keyframes pushIn{from{transform:translateX(60px);opacity:.2}to{transform:none;opacity:1}}
@keyframes popIn{from{transform:translateX(-60px);opacity:.2}to{transform:none;opacity:1}}
@keyframes sheetIn{from{transform:translateY(80px);opacity:.2}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--teal-800);color:#fff;font:500 14px var(--font-sans);padding:12px 18px;border-radius:14px;box-shadow:0 12px 32px -8px rgba(10,50,52,.5);transition:.2s;max-width:90vw;text-align:center;z-index:50}
#toast.on{opacity:1;transform:translate(-50%,0)}
.fab{display:none}
body.is-mobile{display:block;background:var(--cream-50)}
body.is-mobile #stage{padding:0;min-height:0}
body.is-mobile .panel{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);height:100%;z-index:40;transform:translateX(100%);transition:transform .25s;box-shadow:-20px 0 40px rgba(0,0,0,.3)}
body.is-mobile.menu-open .panel{transform:none}
body.is-mobile .fab{display:block;position:fixed;right:12px;top:12px;z-index:45;font:600 12px var(--font-sans);padding:8px 12px;border-radius:999px;border:0;background:#0a3234cc;color:#fff}