/* Songwriter Suite v5 – Sandy Music Lab blue + gold, frosted glass */
:root{--bg:#040d1d;--bg2:#071a38;--glass:rgba(16,36,70,.55);--glass2:rgba(22,48,92,.7);--line:rgba(130,170,255,.18);--line2:rgba(130,170,255,.32);
 --b:#007EFC;--b2:#3b9bff;--gold:#f5b335;--gold2:#ffd27a;--t:#eef4ff;--s:#a9b8d6;--r:16px;--ok:#5fd38d;--err:#ff7a7a;--fs:15px;--blur:16px}
html.light{--bg:#eef3fb;--bg2:#dfe8f7;--glass:rgba(255,255,255,.66);--glass2:rgba(255,255,255,.88);--line:rgba(20,60,130,.14);--line2:rgba(20,60,130,.28);--t:#0b1a33;--s:#4a5b78;--gold:#c98400;--gold2:#a86d00;--b2:#0066d6}
html.big{--fs:18.5px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs)/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(1200px 700px at 80% -10%,#0d3a7a55,transparent),linear-gradient(180deg,var(--bg2),var(--bg) 60%);background-attachment:fixed;color:var(--t);min-height:100vh;padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.bg-orbs i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 22s ease-in-out infinite alternate}
.bg-orbs i:nth-child(1){width:420px;height:420px;background:#007EFC;left:-120px;top:20%}.bg-orbs i:nth-child(2){width:300px;height:300px;background:#f5b335;right:-80px;top:55%;opacity:.18;animation-duration:28s}.bg-orbs i:nth-child(3){width:260px;height:260px;background:#3b5bff;left:45%;top:-80px;animation-duration:34s}
html.light .bg-orbs i{opacity:.16}
@keyframes float{to{transform:translate3d(60px,-40px,0) scale(1.15)}}
a{color:var(--b2)}button,select,input,textarea{font:inherit;color:inherit}
.ic{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
button{cursor:pointer;background:var(--glass2);border:1px solid var(--line);border-radius:10px;padding:.5rem .75rem;min-height:40px;display:inline-flex;align-items:center;gap:.4rem;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s}
button:hover{border-color:var(--line2);transform:translateY(-1px)}button:active{transform:translateY(0) scale(.97)}:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;color:var(--gold2)}
.pri{background:linear-gradient(135deg,var(--b),#1f63ff);border-color:transparent;font-weight:600;color:#fff;box-shadow:0 6px 18px -8px #007EFCaa}.pri:hover{filter:brightness(1.1)}
.ghost{background:transparent}.icon-btn{padding:.45rem;min-width:40px;justify-content:center}.linkish{all:unset;color:var(--b2);text-decoration:underline;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.glass{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3);box-shadow:0 10px 30px -18px #000c,inset 0 1px 0 #ffffff14}
header{display:flex;align-items:center;gap:.75rem;padding:.55rem 1rem;position:sticky;top:0;z-index:20;border-width:0 0 1px;border-radius:0}
header img{height:34px;display:block}header h1{font-size:1rem;margin:0;font-weight:700;white-space:nowrap}header h1 small{color:var(--gold);font-weight:600}
.ai{margin-left:auto;display:flex;gap:.4rem;align-items:center}.ai a{text-decoration:none;font-size:.85rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:10px;color:var(--t);display:inline-flex;gap:.3rem;align-items:center}.ai a:hover{border-color:var(--b)}
.sync{color:var(--ok);display:inline-flex}.sync.off{color:var(--s)}.sync.busy{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.4}}
.pop{position:absolute;right:1rem;top:100%;margin-top:.4rem;border-radius:14px;padding:.7rem;display:grid;gap:.5rem;min-width:220px;z-index:30;animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.sw{display:flex;align-items:center;gap:.45rem;cursor:pointer}
nav.tabs{position:fixed;bottom:0;left:0;right:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--glass2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:21;padding-bottom:env(safe-area-inset-bottom)}
nav.tabs button{background:none;border:0;border-radius:0;font-size:.72rem;color:var(--s);flex-direction:column;justify-content:center;gap:2px;min-height:60px}
nav.tabs button .ic{width:1.35rem;height:1.35rem}nav.tabs button[aria-selected=true]{color:var(--gold2);box-shadow:inset 0 3px 0 var(--gold)}
nav.tabs button[hidden]{display:none}
@media(min-width:900px){body{padding-bottom:0}nav.tabs{position:static;display:flex;gap:.3rem;background:none;border:0;margin-left:1rem;-webkit-backdrop-filter:none;backdrop-filter:none}
 nav.tabs button{flex-direction:row;font-size:.9rem;min-height:40px;border-radius:10px;padding:.4rem .8rem}nav.tabs button .ic{width:1.05rem;height:1.05rem}
 nav.tabs button[aria-selected=true]{background:linear-gradient(135deg,var(--b),#1f63ff);color:#fff;box-shadow:none}}
@media(max-width:620px){.ai a span{display:none}header h1 small{display:none}.ai a{display:none}header h1{font-size:.95rem}}
main{padding:.75rem;max-width:1320px;margin:auto}@media(min-width:900px){main{padding:1rem}}
.hidden{display:none!important}html:not(.is-admin) #tab-admin,html:not(.is-admin) #t-admin{display:none!important}
[role=tabpanel]{animation:fadeup .28s ease-out}@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}
.card{border-radius:var(--r);padding:.95rem;margin-bottom:.9rem}
.card h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin:0 0 .7rem;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.card h2 .muted{text-transform:none;letter-spacing:0;font-weight:500}
.grid{display:grid;gap:.9rem}.grid>*,.card,.editor,#lyrics{min-width:0}.w{grid-template-columns:1fr}@media(min-width:1000px){.w{grid-template-columns:1fr 340px}}
.c2{grid-template-columns:1fr}@media(min-width:1000px){.c2{grid-template-columns:1.1fr .9fr}}
.row{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin}.scroll>*{flex:0 0 auto}
select,input,textarea{background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);border-radius:10px;padding:.5rem;min-height:40px;max-width:100%}
input[type=checkbox]{min-height:auto;accent-color:var(--gold);width:1.1em;height:1.1em}input[type=range]{accent-color:var(--gold);padding:0}
.toolbar{gap:.35rem;margin-bottom:.4rem}.toolbar button{font-size:.85rem;padding:.4rem .6rem}.sep{width:1px;align-self:stretch;background:var(--line);margin:0 .15rem}
.keyctl{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:10px;padding:1px}.keyctl select{min-height:36px;border:0;padding:.3rem;background:transparent;font-weight:700;color:var(--gold2)}.keyctl button{border:0;min-height:36px;min-width:34px;font-size:1.1rem;background:transparent}
.editwrap{display:grid;gap:.6rem}.editwrap.split{grid-template-columns:1fr}@media(min-width:1200px){.editwrap.split{grid-template-columns:1fr 1fr}}
.editor{display:flex;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 75%,transparent)}
#gut{width:3.4rem;padding:.6rem .35rem;text-align:right;color:var(--s);opacity:.6;font:14px/1.7 ui-monospace,Menlo,monospace;white-space:pre;overflow:hidden;user-select:none;border-right:1px solid var(--line)}
#gut b{color:var(--gold);font-weight:700}
#lyrics{flex:1;border:0;resize:vertical;min-height:55vh;padding:.6rem;font:16px/1.7 ui-monospace,Menlo,monospace;background:transparent;white-space:pre;overflow-x:auto}
html.big #lyrics,html.big #gut{font-size:19px}
#lyrics:focus{outline:none}
.sheet{border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;max-height:70vh;overflow:auto;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.sec{margin:.2rem 0 .9rem}.sec>h4{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.ln{display:flex;flex-wrap:wrap;align-items:flex-end;min-height:1.6em;white-space:pre}.seg-c{display:inline-flex;flex-direction:column}
.seg-c .ch{font-weight:700;color:var(--b2);font-size:.9em;min-height:1.25em;padding-right:.35em}.seg-c .ly{min-height:1.3em}
.note{color:var(--s);font-style:italic;font-size:.88em}
code.out,pre.out{display:block;background:color-mix(in srgb,var(--bg) 75%,transparent);padding:.7rem;border-radius:10px;color:#9fd0ff;white-space:pre-wrap;word-break:break-word;font-size:.95rem;margin:.5rem 0 0;border:1px solid var(--line)}
html.light code.out,html.light pre.out{color:#0b4ea2}pre.out:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}.chip{font-size:.85rem;padding:.25rem .65rem;min-height:34px;border-radius:999px}
.chip:hover{border-color:var(--b)}.chip small{color:var(--s)}.chip.pri small{color:#dfe9ff}
.chords{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.55rem}
.chord{flex-direction:column;justify-content:center;border-radius:14px;padding:.7rem;text-align:center;min-height:88px;gap:0}
.chord b{display:block;font-size:1.35rem}.chord span{display:block;color:var(--s);font-size:.75rem}.chord.on,.chord.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset,0 8px 24px -10px var(--gold)}
.prog{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--line)}.prog b{min-width:150px}.prog .chip.now{background:var(--gold);color:#000;border-color:var(--gold)}
.verses{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.verse{border-radius:14px;padding:.9rem;display:flex;flex-direction:column;gap:.35rem}
.verse p{font-style:italic;margin:0}.verse .tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--gold)}
.seed{font-size:.85rem;color:var(--s);border-top:1px dashed var(--line);padding-top:.4rem}.seed b{color:var(--t)}
.muted{color:var(--s);font-size:.85rem}
.esv-notice{font-size:.72rem;color:var(--s);text-align:center;max-width:780px;margin:1rem auto}
#toast{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,10px);background:linear-gradient(135deg,var(--b),#1f63ff);color:#fff;padding:.55rem 1rem;border-radius:12px;opacity:0;transition:.25s;pointer-events:none;z-index:90;box-shadow:0 10px 30px -10px #000}
#toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:900px){#toast{bottom:1.2rem}}
.consent{font-size:.72rem;color:var(--s);margin:.5rem 0 0}.emsg{margin:.45rem 0 0;font-size:.85rem;min-height:1.2em}.emsg.ok{color:var(--ok)}.emsg.err{color:var(--err)}.emsg.busy{color:var(--s)}
.cta{background:linear-gradient(135deg,#0b3d75cc,var(--glass) 70%)}html.light .cta{background:linear-gradient(135deg,#cfe3ff,var(--glass) 70%)}
.badge{display:inline-block;font-size:.65rem;font-weight:700;background:var(--gold);color:#000;border-radius:4px;padding:1px 6px;vertical-align:middle}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{border-radius:0;background:transparent;border:0}.seg button[aria-pressed=true]{background:var(--b);color:#fff;box-shadow:none}
footer{text-align:center;color:var(--s);font-size:.78rem;padding:1rem}
.signup #fname{flex:1 1 9rem;min-width:0}.signup #email{min-width:0;flex:2 1 12rem!important}@media(max-width:520px){.signup>*{flex:1 1 100%!important}}
#rcBox{position:fixed;width:0;height:0;overflow:visible;left:0;bottom:0}.grecaptcha-badge{visibility:hidden!important;opacity:0!important;pointer-events:none!important}.rcnote{font-size:.72rem;opacity:.75}
.kitlink{padding:.3rem .5rem;font-size:.9rem;text-decoration:underline;color:var(--s)}
#emailCta.glow{animation:kitglow 2.4s ease-out}@keyframes kitglow{0%,60%{box-shadow:0 0 0 3px var(--gold),0 0 32px 6px #f5b33599}100%{box-shadow:0 0 0 0 transparent}}@media(prefers-reduced-motion:reduce){#emailCta.glow{animation:none;box-shadow:0 0 0 3px var(--gold)}}
/* weekly prompt */
.weekly{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:linear-gradient(120deg,#f5b33522,var(--glass) 45%)}
.weekly .wk{font-size:.7rem;font-weight:800;letter-spacing:.1em;color:#000;background:var(--gold);border-radius:999px;padding:.15rem .6rem}
.weekly q{font-style:italic}.weekly .wtxt{flex:1;min-width:240px}.weekly .wtxt p{margin:.25rem 0}
/* section map – 3D stage */
.secmap{display:flex;gap:.4rem;padding:.6rem .3rem 1rem;overflow-x:auto;perspective:700px;min-height:3.2rem}
.secmap:empty::before{content:'Add [Verse], [Chorus]… tags and your song map appears here. Drag blocks to rearrange.';color:var(--s);font-size:.82rem}
.sblock{flex:0 0 auto;min-width:4.6rem;border-radius:10px;padding:.35rem .6rem;font-size:.78rem;font-weight:700;cursor:grab;user-select:none;touch-action:none;color:#fff;position:relative;
 transform:rotateX(28deg) translateZ(calc(var(--h,1)*6px));transform-origin:bottom;box-shadow:0 calc(var(--h,1)*3px) 0 -1px #0006,0 12px 18px -10px #000;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}
.sblock small{display:block;font-weight:500;opacity:.8}.sblock:hover{transform:rotateX(10deg) translateZ(calc(var(--h,1)*6px + 8px))}
.sblock.drag{cursor:grabbing;opacity:.85;transform:rotateX(0) scale(1.06);z-index:2}.sblock.over{outline:2px dashed var(--gold)}
.sblock[data-k=verse]{background:linear-gradient(160deg,#2a6fdc,#163f8a)}.sblock[data-k=chorus]{background:linear-gradient(160deg,#f5b335,#b97a08);color:#1b1100}.sblock[data-k=bridge]{background:linear-gradient(160deg,#8b5cf6,#5b2fc2)}.sblock[data-k=pre]{background:linear-gradient(160deg,#16a3b8,#0c6a7a)}.sblock[data-k=other]{background:linear-gradient(160deg,#55637d,#353f52)}
@keyframes rise{from{opacity:0;transform:rotateX(70deg) translateY(10px)}}
/* helpers */
.seg2 .chip{gap:.3rem}.helpbox{margin-top:.6rem}
.gear{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.gear a{display:block;padding:.7rem;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--t);background:var(--glass2);transition:transform .2s}.gear a:hover{transform:translateY(-2px);border-color:var(--gold)}.gear a b{display:block}.gear a span{font-size:.82rem;color:var(--s)}
/* fretboard */
.fret3d{position:relative;height:300px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#12305e,#050d1c);touch-action:pan-y}
html.light .fret3d{background:radial-gradient(circle at 50% 40%,#dbe8ff,#b8cdf0)}
.fret3d canvas{display:block;width:100%!important;height:100%!important;cursor:grab}.fret3d svg{width:100%;height:100%}
.fret-labels{position:absolute;inset:0;pointer-events:none}.fret-labels span{position:absolute;transform:translate(-50%,-50%);font:700 13px/1 Inter,system-ui,sans-serif;color:#fff;text-shadow:0 1px 3px #000}
/* tools */
.kfout{margin-top:.7rem}.kfout .best{font-size:1.4rem;font-weight:800;color:var(--gold2)}.kfout table{border-collapse:collapse;width:100%;font-size:.88rem;margin-top:.5rem}.kfout td,.kfout th{border-bottom:1px solid var(--line);padding:.3rem;text-align:left}
.range{position:relative;height:28px;border-radius:8px;background:var(--glass2);margin:.6rem 0;border:1px solid var(--line)}.range i{position:absolute;top:3px;bottom:3px;border-radius:6px}.range .room{background:#007EFC44;border:1px dashed var(--b2)}.range .mel{background:var(--gold);opacity:.85}
.earbtns{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin:.7rem 0}.earbtns button{justify-content:center;font-size:1.2rem;font-weight:800;min-height:56px}.earbtns button.right{background:var(--ok);color:#000}.earbtns button.wrong{background:var(--err);color:#000;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.streak{display:flex;gap:1rem;flex-wrap:wrap}.streak b{color:var(--gold2);font-size:1.2rem}
/* overlays */
.overlay{position:fixed;inset:0;background:#020814b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:60;padding:1rem;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{border-radius:20px;padding:1.1rem;width:min(680px,100%);max-height:90vh;overflow:auto;animation:pop .22s ease-out}
.welcome{border-radius:24px;padding:1.4rem 1rem;width:min(760px,100%);text-align:center;animation:pop .3s ease-out}.welcome h2{margin:.3rem 0 0;font-size:1.5rem}
.carousel{perspective:1000px;perspective-origin:50% 50%;height:250px;margin:1rem -1rem .4rem;position:relative;overflow:hidden;touch-action:pan-y}
.ring{position:absolute;inset:0;transform-style:preserve-3d}
.wcard{position:absolute;left:50%;top:15px;width:min(250px,66vw);margin-left:calc(min(250px,66vw)/-2);height:220px;flex-direction:column;justify-content:center;text-align:center;border-radius:18px;padding:1rem;gap:.45rem;
 background:linear-gradient(160deg,#1a4a9a,#0a1f45);color:#fff;border:1px solid #9cc4ff55;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 36px -18px #000c;
 transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s,filter .45s;-webkit-font-smoothing:antialiased}
.wcard:nth-child(2){background:linear-gradient(160deg,#f5b335,#a86c00);color:#1b1100}.wcard:nth-child(4){background:linear-gradient(160deg,#4b3cc9,#1b1450)}
.wcard .ic{width:2.2rem;height:2.2rem}.wcard b{font-size:1.1rem;line-height:1.25}.wcard span{font-size:.85rem;opacity:.92;line-height:1.35}
.wcard[aria-current=true]{box-shadow:0 22px 44px -16px #000d,0 0 0 2px #f5b33588}
@media(hover:hover){.wcard[aria-current=true]:hover{transform:translateY(-4px)!important}}
@media(max-width:560px){.carousel{height:240px}.wcard{height:210px;padding:.8rem}.wcard span{font-size:.8rem}}
.dots{display:inline-flex;gap:.35rem}.dots i{cursor:pointer;width:8px;height:8px;border-radius:50%;background:var(--line2);transition:.3s}.dots i.on{background:var(--gold);width:22px;border-radius:5px}
.steps{display:flex;gap:.3rem;list-style:none;padding:0;margin:.8rem 0;counter-reset:s}.steps li{flex:1;text-align:center;font-size:.75rem;color:var(--s);padding-top:.35rem;border-top:3px solid var(--line);counter-increment:s}
.steps li::before{content:counter(s) '. '}.steps li.on{color:var(--gold2);border-color:var(--gold)}.steps li.done{border-color:var(--b)}
.pick{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:38vh;overflow:auto;padding:2px}.pick button{justify-content:flex-start;text-align:left;font-size:.85rem}.pick button.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
/* rehearsal */
.rehearse{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column}
.rbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.5rem .8rem;border-bottom:1px solid var(--line);background:var(--glass2)}.rbar b{font-size:1.1rem}.rbar button:last-child{margin-left:auto}
.rbody{flex:1;overflow:auto;padding:1.2rem 1.4rem 40vh;font-size:var(--rfs,28px);line-height:1.35;scroll-behavior:smooth}
.rbody .sec{padding:.5rem .7rem;border-radius:14px;transition:background .3s}.rbody .sec.cur{background:#f5b33518;box-shadow:inset 4px 0 0 var(--gold)}.rbody .ch{color:var(--gold2)}
.rhint{position:fixed;bottom:.6rem;left:0;right:0;text-align:center;color:var(--s);font-size:.78rem;pointer-events:none}
/* FAB */
.fab{position:fixed;right:1rem;bottom:calc(80px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;justify-content:center;z-index:40;background:linear-gradient(135deg,var(--gold),#e08a00);color:#1b1100;border:0;box-shadow:0 12px 28px -8px #f5b335aa}
.fab .ic{width:28px;height:28px;stroke-width:2.5;transition:transform .3s}.fab[aria-expanded=true] .ic{transform:rotate(45deg)}
.fabmenu{position:fixed;right:1rem;bottom:calc(148px + env(safe-area-inset-bottom));z-index:40;display:grid;gap:.4rem;animation:pop .2s}.fabmenu button{background:var(--glass2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);justify-content:flex-start;box-shadow:0 8px 20px -10px #000}
@media(min-width:900px){.fab{bottom:1.4rem}.fabmenu{bottom:5.6rem}}
/* phone rhyme bottom sheet */
.sheet-handle{display:none}
@media(max-width:899px){
 .sheetable{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;border-radius:20px 20px 0 0;max-height:62vh;overflow:auto;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
 .sheetable.open{transform:none}.sheet-handle{display:block;width:44px;height:6px;min-height:6px;border-radius:3px;padding:0;margin:0 auto .6rem;background:var(--line2);border:0}
}
/* focus mode */
html.focus header,html.focus #weekly,html.focus aside,html.focus #helpers,html.focus footer,html.focus .fab,html.focus nav.tabs{display:none!important}
html.focus .w{grid-template-columns:1fr}html.focus main{max-width:900px}html.focus body{padding-bottom:0}
.focus-exit{position:fixed;top:.6rem;right:.6rem;z-index:50}
/* tilt */
.tilt{transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
/* memos */
.memo{display:flex;gap:.5rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--line)}.memo audio{flex:1;min-width:0;height:36px}
.rec{color:var(--err);animation:pulse 1s infinite}
.ver{display:flex;gap:.5rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line)}.ver span{flex:1}
.shared-banner{border-radius:14px;padding:.7rem 1rem;margin-bottom:.9rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;border:1px solid var(--gold);background:#f5b33514}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.ring{transition:none}}
html.no3d .sblock{transform:none!important;box-shadow:none}html.no3d .tilt{transform:none!important}html.no3d .bg-orbs i{animation:none}
@media print{body *{visibility:hidden}#printArea,#printArea *{visibility:visible}#printArea{position:absolute;inset:0;color:#000;background:#fff}.bg-orbs{display:none}}
#printArea{display:none}@media print{#printArea{display:block;font:15px/1.5 Georgia,serif;padding:1.5cm}#printArea .ch{color:#000;font-weight:700}#printArea .sec>h4{color:#000}#printArea .ln{white-space:pre}}
@media(max-width:899px){header.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass2)}html:not(.light) header.glass{background:#0a1a36f2}
 .sheet-handle{width:100%;height:32px;min-height:32px;background:none!important;position:relative}.sheet-handle::after{content:'';position:absolute;left:50%;top:13px;width:44px;height:6px;margin-left:-22px;border-radius:3px;background:var(--line2)}}
.sync[hidden]{display:none!important}
