/* Doodle Tone legal — hand-written for this app: night sketchbook + loop lanes */
:root{--ink:#1B1F3B;--night:#121229;--card:#292B52;--coral:#FF6B4A;--mint:#3DDB96;--lilac:#B09EFA;--paper:#F5F0E8;--graphite:#2A2740;--soft:#6A6585}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;min-height:100vh;color:var(--graphite);font:17px/1.62 ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;
 background:radial-gradient(520px 380px at 100% 0,rgba(255,107,74,.2),transparent 70%),radial-gradient(460px 340px at 0 100%,rgba(61,219,150,.14),transparent 70%),linear-gradient(180deg,var(--ink),#261C4D 55%,var(--night))}
a{color:#C2412A;text-decoration-thickness:2px;text-underline-offset:3px}
.studio{max-width:880px;margin:0 auto;padding:28px 22px 8px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.home{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:72px;height:34px}
.word{color:#F7F7FF;font-weight:800;font-size:1.65rem;letter-spacing:-.02em}
.studio small{color:rgba(247,247,255,.6);font-style:italic;padding-bottom:6px}
.desk{max-width:880px;margin:10px auto 0;padding:0 22px}
.desk ol{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:rgba(41,43,82,.85);border-radius:20px;box-shadow:inset 0 0 0 1px rgba(176,158,250,.25)}
.desk a{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;color:#F7F7FF;text-decoration:none;font-weight:700;background:rgba(18,18,41,.55);transition:transform .15s}
.desk a:hover{transform:translateY(-2px)}
.desk a[aria-current]{background:rgba(247,247,255,.1);box-shadow:inset 0 0 0 2px currentColor}
.desk a.coral{color:#FFB2A1}.desk a.mint{color:#9BF0C8}.desk a.lilac{color:#D6CCFF}
.knob{width:14px;height:14px;border-radius:50%;flex:none;background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.wave{margin-left:auto;display:flex;align-items:center;gap:2px;height:16px}
.wave i{display:block;width:3px;height:calc(var(--h)*1px);border-radius:2px;background:currentColor;opacity:.45}
.wave.live i{opacity:1;animation:hum 1.1s ease-in-out infinite alternate}
.wave.live i:nth-child(2n){animation-delay:.25s}.wave.live i:nth-child(3n){animation-delay:.5s}
@keyframes hum{to{transform:scaleY(.4)}}
@media (prefers-reduced-motion:reduce){.wave.live i,.spin{animation:none}}
main{max-width:880px;margin:0 auto;padding:18px 22px 10px}
.sheet{position:relative;background-color:var(--paper);background-image:linear-gradient(rgba(176,158,250,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(176,158,250,.18) 1px,transparent 1px);background-size:24px 24px;
 border-radius:8px 26px 10px 22px;padding:40px 44px 34px;box-shadow:0 22px 50px rgba(0,0,0,.45),-6px 0 0 var(--coral);transform:rotate(-.25deg)}
.sheet>*{transform:rotate(.25deg)}
.sheet h1{margin:0 0 6px;font-size:2rem;line-height:1.2;color:var(--ink);display:inline-block;padding-bottom:10px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c40-6 70 4 110-1s80-5 120 0 50 2 66-2' fill='none' stroke='%23FF6B4A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 12px no-repeat}
.stamp{margin:6px 0 16px;color:var(--soft);font-size:.9rem}
.lede{font-size:1.1rem;color:#3B3657;background:rgba(61,219,150,.16);border-radius:14px;padding:14px 16px}
.sheet section{margin-top:30px}
.sheet h2{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:var(--ink);margin:0 0 10px}
.lane{flex:none;width:46px;height:14px;border-radius:7px;position:relative;overflow:hidden}
.lane::after{content:"";position:absolute;inset:3px 4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 3px,transparent 3px 7px);border-radius:4px}
.l1{background:var(--coral)}.l2{background:var(--mint)}.l3{background:var(--lilac)}
.sheet h3{font-size:1.05rem;margin:18px 0 6px;color:#4B3F8F}
.sheet ul{padding-left:0;list-style:none}
.sheet li{position:relative;padding-left:26px;margin:7px 0}
.sheet li::before{content:"";position:absolute;left:4px;top:.55em;width:11px;height:11px;border-radius:50% 40% 55% 45%;background:var(--coral);transform:rotate(20deg)}
.sheet li:nth-child(3n+2)::before{background:var(--mint)}.sheet li:nth-child(3n)::before{background:var(--lilac);border-radius:3px}
table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.95rem}
th{text-align:left;color:var(--soft);font-weight:700;padding:4px 10px}
td{background:#FFFDF8;padding:10px;vertical-align:top;border-top:1px dashed #D9D2EE;border-bottom:1px dashed #D9D2EE}
td:first-child{font-weight:700;color:var(--ink);border-left:4px solid var(--mint);border-radius:10px 0 0 10px}
td:last-child{border-radius:0 10px 10px 0}
dl{margin:0}dt{font-weight:800;color:var(--ink);margin-top:14px}
dd{margin:4px 0 0;padding:8px 12px;background:#FFFDF8;border-left:4px solid var(--lilac);border-radius:0 10px 10px 0}
.tracks{list-style:none;padding:0;display:grid;gap:12px;margin-top:22px}
.tracks li{padding:0}.tracks li::before{display:none}
.tracks a{display:block;padding:16px 18px;border-radius:16px;background:#FFFDF8;text-decoration:none;color:var(--ink);box-shadow:inset 6px 0 0 var(--coral)}
.tracks li:nth-child(2) a{box-shadow:inset 6px 0 0 var(--mint)}.tracks li:nth-child(3) a{box-shadow:inset 6px 0 0 var(--lilac)}
.tracks b{display:block;font-size:1.15rem}.tracks span{color:var(--soft);font-size:.95rem}
.loopend{max-width:880px;margin:0 auto;padding:16px 22px 40px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:rgba(247,247,255,.6);font-size:.9rem}
.loopend a{color:#9BF0C8;margin-left:auto}
.spin{display:inline-block;color:var(--mint);font-size:1.2rem;animation:turn 6s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@media (max-width:620px){body{font-size:16px}.sheet{padding:28px 20px;transform:none}.sheet>*{transform:none}.desk ol{grid-template-columns:1fr}.sheet h1{font-size:1.6rem}table,thead,tbody,tr,td,th{display:block}thead{display:none}td{border:0;border-radius:0!important}td:first-child{border-left:4px solid var(--mint);margin-top:8px;border-radius:10px 10px 0 0!important}}