:root{--ink:#0b1622;--ivory:#efe6d2;--dim:rgba(239,230,210,.62);--brass:#d6b46e;--brass2:#9b7843;--sea:#8af2e6;--panel:rgba(12,26,36,.78);--line:rgba(214,180,110,.32);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--safeB:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--ivory);font-family:var(--serif);overflow:hidden;overscroll-behavior:none}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}
button,select,input{font-family:inherit;color:inherit}
.screen{position:fixed;inset:0;z-index:1;display:none;flex-direction:column;align-items:center}
.screen.show{display:flex;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* title */
#title{justify-content:center}
.title-wrap{text-align:center;max-width:560px;padding:24px;margin-top:-6vh}
.kicker{letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--brass);margin:0 0 10px}
h1{font-weight:400;font-size:clamp(46px,9vw,84px);margin:0;letter-spacing:.04em;line-height:1;text-shadow:0 2px 30px rgba(138,242,230,.18)}
.lede{color:var(--dim);font-size:clamp(15px,2.2vw,18px);line-height:1.55;margin:18px auto 28px;max-width:440px;font-style:italic}
.menu{display:flex;flex-direction:column;gap:10px;align-items:center}
.btn{min-width:230px;padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:rgba(12,26,36,.55);font-size:17px;letter-spacing:.06em;cursor:pointer;transition:background .2s,border-color .2s,transform .1s;backdrop-filter:blur(4px)}
.btn:hover,.btn:focus-visible{background:rgba(214,180,110,.14);border-color:var(--brass);outline:none}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(180deg,#d9b978,#a5824a);color:#1a1208;border-color:#e8cf95;font-weight:600}
.btn.primary:hover{background:linear-gradient(180deg,#e6c98c,#b28f55)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--dim);min-width:0}
.btn.small{min-width:0;padding:8px 16px;font-size:15px}
.foot{margin-top:26px;font-size:13px;color:var(--dim);letter-spacing:.04em}
/* bars */
.bar{width:100%;max-width:980px;display:flex;align-items:center;gap:8px;padding:12px 14px 6px;padding-top:max(12px,env(safe-area-inset-top))}
.bar .ttl{flex:1;text-align:center;display:flex;flex-direction:column;line-height:1.15}
.bar .ttl small{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
.bar .ttl b{font-weight:400;font-size:clamp(19px,3vw,24px);letter-spacing:.03em}
.icon,.spacer{width:42px;height:42px;flex:none}
.icon{border-radius:50%;border:1px solid var(--line);background:rgba(12,26,36,.6);font-size:20px;cursor:pointer;display:grid;place-items:center;line-height:1;padding:0}
.icon:hover,.icon:focus-visible{border-color:var(--brass);outline:none}
#gPause{font-size:11px;letter-spacing:-2px}
.stage{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;padding:4px 10px}
#board,#fboard{touch-action:none;cursor:pointer;display:block}
#strip{display:block;cursor:pointer}
.tools{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:6px 10px 0}
.tool{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(12,26,36,.7);font-size:15px;cursor:pointer;letter-spacing:.03em}
.tool .g{color:var(--brass);font-size:16px;width:16px;text-align:center}
.tool:hover,.tool:focus-visible{border-color:var(--brass);outline:none}
.tool.on{background:rgba(138,242,230,.14);border-color:var(--sea)}
.tool.play{background:linear-gradient(180deg,#d9b978,#a5824a);color:#1a1208;border-color:#e8cf95;font-weight:600}
.tool.play .g{color:#1a1208}
.tool.sel{gap:8px;cursor:default}
.tool.sel span{color:var(--dim);font-size:13px}
.tool.sel em{font-style:normal;color:var(--ivory)}
.tool select{background:#0f2029;border:1px solid var(--line);border-radius:8px;padding:3px 6px;font-size:14px}
.tool input[type=range]{width:110px;accent-color:#d6b46e}
.status{min-height:22px;margin:8px 0 0;padding:0 12px calc(12px + var(--safeB));font-size:14px;color:var(--dim);text-align:center;letter-spacing:.02em}
.status b{color:var(--ivory);font-weight:600}
.status .warn{color:#f0b49c}
.status .good{color:var(--sea)}
/* chapters */
.scroll{flex:1;width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:8px 14px calc(30px + var(--safeB))}
.areas,.songs{max-width:900px;margin:0 auto;display:grid;gap:14px}
.area{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:16px 18px;backdrop-filter:blur(6px)}
.area.locked{opacity:.55}
.area h2{font-weight:400;margin:0;font-size:22px;letter-spacing:.03em}
.area .meta{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.area .meta span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.area p{margin:4px 0 12px;color:var(--dim);font-style:italic;font-size:15px}
.lvls{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.lv{aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:rgba(8,18,24,.7);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;min-width:0}
.lv b{font-size:20px;font-weight:400}
.lv i{font-size:10.5px;color:var(--dim);font-style:normal;text-align:center;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.lv.done{border-color:rgba(138,242,230,.55);background:rgba(138,242,230,.08)}
.lv.done b::after{content:" \2022";color:var(--sea)}
.lv:disabled{opacity:.35;cursor:default}
.lv:not(:disabled):hover,.lv:focus-visible{border-color:var(--brass);outline:none}
/* songbook */
.note-intro{max-width:900px;margin:0 auto 14px;color:var(--dim);font-style:italic;text-align:center}
.song canvas{width:100%;height:84px;display:block;margin:8px 0 10px;border-radius:10px}
.song .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.song .row .ph{font-size:13px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;background:transparent}
.song .row .ph.off{opacity:.35;cursor:default}
.song .row .ph.now{border-color:var(--sea);color:var(--ivory)}
/* palette */
.palette{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:4px 10px;max-width:980px}
.pal{display:flex;flex-direction:column;align-items:center;gap:2px;width:62px;padding:6px 2px 5px;border-radius:12px;border:1px solid var(--line);background:rgba(12,26,36,.7);cursor:pointer;font-size:11px;color:var(--dim)}
.pal canvas{width:34px;height:34px}
.pal.on{border-color:var(--sea);background:rgba(138,242,230,.12);color:var(--ivory)}
.pal:hover{border-color:var(--brass)}
/* overlays */
.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(3,8,12,.55);backdrop-filter:blur(3px);padding:16px}
.overlay[hidden]{display:none}
.overlay.soft{background:rgba(3,8,12,.35);backdrop-filter:none}
.overlay.soft .card{background:linear-gradient(180deg,rgba(20,38,48,.94),rgba(10,22,30,.96))}
.card{width:min(460px,100%);max-height:calc(100% - 20px);overflow:auto;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(20,38,48,.97),rgba(10,22,30,.97));padding:24px 24px 20px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:fade .35s ease;text-align:center}
.card h3{font-weight:400;font-size:26px;margin:2px 0 6px;letter-spacing:.03em}
.card .k{letter-spacing:.3em;text-transform:uppercase;font-size:11px;color:var(--brass);margin:0}
.card p{color:var(--dim);line-height:1.55;margin:10px 0}
.card .acts{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:16px}
.card .acts .btn{min-width:220px}
.card ul{text-align:left;color:var(--dim);line-height:1.55;padding-left:20px;margin:8px 0}
.card li{margin:4px 0}
.card kbd{font-family:inherit;border:1px solid var(--line);border-radius:5px;padding:0 5px;font-size:13px;color:var(--ivory)}
.set{display:grid;grid-template-columns:110px 1fr 40px;gap:10px;align-items:center;text-align:left;margin:10px 0}
.set label{color:var(--dim);font-size:15px}
.set input[type=range]{width:100%;accent-color:#d6b46e}
.set output{font-size:13px;color:var(--dim);text-align:right}
.chk{display:flex;gap:10px;align-items:center;justify-content:flex-start;color:var(--dim);margin:10px 0;text-align:left;cursor:pointer}
.chk input{accent-color:#d6b46e;width:18px;height:18px}
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safeB));transform:translateX(-50%) translateY(20px);z-index:20;max-width:min(560px,92vw);padding:11px 18px;border-radius:14px;background:rgba(14,30,40,.95);border:1px solid var(--line);color:var(--ivory);font-size:15px;line-height:1.45;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:560px){
  .lvls{grid-template-columns:repeat(3,1fr)}
  .tool{padding:8px 12px;font-size:14px}
  .tool span:not(.g){font-size:13px}
  .btn{min-width:210px}
  .pal{width:52px;font-size:10px}
  .pal canvas{width:28px;height:28px}
  .free-tools .tool.sel input[type=range]{width:80px}
}
@media (prefers-reduced-motion:reduce){.screen.show,.card{animation:none}}