:root{--ink:#1c1917;--body:#4e4a47;--muted:#5f5953;--line:#e7e5e4;--canvas:#f6f5f3;--card:#fff;--r:18px;
--serif:ui-serif,"Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink);font:15px/1.5 var(--sans);min-height:100vh;padding-bottom:104px;overflow-x:hidden}
.glow{position:fixed;inset:-20% -10% auto -10%;height:60vh;z-index:-1;pointer-events:none;filter:blur(70px);opacity:.75;
background:radial-gradient(40% 60% at 20% 30%,#a7e5d3 0,transparent 70%),radial-gradient(35% 55% at 55% 20%,#f4c5a8 0,transparent 70%),radial-gradient(40% 60% at 85% 35%,#c8b8e0 0,transparent 70%)}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:1120px;margin:0 auto;padding:16px 18px}
.brand{font:400 22px var(--serif);letter-spacing:-.3px;color:var(--ink);text-decoration:none}
.top-r{display:flex;align-items:center;gap:8px}
.pill{font-size:12px;padding:5px 11px;border-radius:99px;background:#fffc;border:1px solid var(--line);color:var(--body);white-space:nowrap}
main{max-width:1120px;margin:0 auto;padding:0 18px}
.hero{padding:22px 0 26px;max-width:720px}
h1{font:300 clamp(32px,7.2vw,60px)/1.05 var(--serif);letter-spacing:-.03em}
h1 em{font-style:italic;color:#5b5550}
.hero p{margin-top:14px;color:var(--body);font-size:16px;max-width:54ch}
.hero-cta{margin-top:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hint{color:var(--muted);font-size:13px}
.btn,button{font:inherit;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:99px;border:1px solid transparent;text-decoration:none;font-weight:500;font-size:15px;transition:transform .15s,background .15s}
.btn.solid{background:var(--ink);color:#fff}.btn.solid:hover{background:#000}
.btn.ghost{background:#fff9;border-color:#d6d3d1;color:var(--ink)}
.btn.wide{width:100%}
.btn:active{transform:scale(.97)}
:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
/* tracks */
.trackrow{display:grid;grid-template-columns:1fr;gap:0 16px}
.ruler{position:relative;height:22px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ruler i{position:absolute;top:0;bottom:0;border-left:1px solid #d6d3d1;padding-left:4px;font-style:normal;line-height:22px}
.track{--c:#a7e5d3;--d:#1f7a62;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-top:12px;padding:12px;display:grid;grid-template-columns:1fr;gap:10px;box-shadow:0 1px 0 #0000000a}
.th{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.empty[hidden]{display:none}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px var(--d);flex:none}
.name{flex-basis:60%;font:inherit;font-weight:600;border:0;background:transparent;color:var(--ink);min-width:0;flex:1;padding:4px 2px;border-radius:6px}
.name:hover{background:#f5f5f4}
.acts{display:flex;gap:6px;flex:1 0 100%}
.sm{min-width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fafaf9;color:var(--ink);padding:0 11px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sm:hover{background:#f0efed}
.sm[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sm.rec[aria-pressed=true]{background:#dc2626;border-color:#dc2626;animation:pulse 1.2s infinite}
.sm.rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#dc2626}
.sm.rec[aria-pressed=true]::before{background:#fff}
@keyframes pulse{50%{opacity:.7}}
.sm input{display:none}
.vol{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.vol input{flex:1;accent-color:var(--d);height:32px;min-width:0}
.vol output{width:38px;text-align:right;font-variant-numeric:tabular-nums}
.strip{position:relative;height:84px;border-radius:12px;background:repeating-linear-gradient(90deg,transparent 0 39px,#0000000a 39px 40px),#f5f5f4;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.track.drop .strip{outline:2px dashed var(--d);outline-offset:-3px}
.empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px;pointer-events:none;text-align:center;padding:0 10px}
.clip{position:absolute;top:6px;bottom:6px;border-radius:9px;background:var(--c);box-shadow:inset 0 0 0 1.5px #0000001f;cursor:grab;touch-action:pan-y}
.clip:active{cursor:grabbing}
.clip canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.clip .h{position:absolute;top:0;bottom:0;width:16px;cursor:ew-resize;touch-action:pan-y}
.clip .h::after{content:"";position:absolute;top:22%;bottom:22%;left:5px;width:4px;border-radius:3px;background:var(--d);opacity:.7}
.clip .h.l{left:0}.clip .h.r{right:0}
.ph{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);left:0;pointer-events:none;z-index:3;transform:translateX(0)}
/* dock */
.dock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 24px));z-index:10;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;background:#fffe;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:99px;box-shadow:0 10px 30px #0000001f}
.ic,.play{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:#f0efed;color:var(--ink);flex:none}
.play{background:var(--ink);color:#fff}
.dock svg{width:20px;height:20px;fill:currentColor}
.time{flex:1;display:flex;align-items:baseline;gap:6px;min-width:0;font-variant-numeric:tabular-nums}
.time b{font-size:18px;font-weight:600}.time span{color:var(--muted);font-size:12px}
.dock .btn{padding:0 16px;flex:none}
.tip{color:var(--muted);font-size:13px;margin:16px 2px 8px;max-width:70ch}
footer{max-width:1120px;margin:0 auto;padding:6px 18px 24px;color:var(--muted);font-size:12px}
/* card */
.card-wrap{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#1c191766;padding:16px;backdrop-filter:blur(3px)}
.card-wrap[hidden]{display:none}
.card{background:#fff;border-radius:24px;padding:26px 22px 20px;max-width:400px;width:100%;display:grid;gap:12px;box-shadow:0 30px 80px #0004}
.card h2{font:300 28px/1.1 var(--serif);letter-spacing:-.02em}
.card p{color:var(--body)}
.card ul{list-style:none;padding:0;display:grid;gap:6px;color:var(--body);font-size:14px}
.card li::before{content:"✓";color:#16a34a;margin-right:8px;font-weight:700}
.toast{position:fixed;left:50%;top:14px;transform:translate(-50%,-160px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-size:14px;z-index:40;transition:transform .25s;max-width:calc(100% - 24px);text-align:center}
.toast.on{transform:translate(-50%,0)}
@media(min-width:760px){
 .track{grid-template-columns:240px 1fr;grid-template-areas:"h s" "v s";align-items:center;gap:6px 16px;padding:14px}
 .th{grid-area:h;flex-wrap:wrap}.vol{grid-area:v}.strip{grid-area:s;height:104px}
 .trackrow{grid-template-columns:240px 1fr;padding:0 15px}
 .trackrow::before{content:""}
 .track .th{align-self:end}.track .vol{align-self:start}
 .acts{width:100%}.acts .sm:first-child{flex:1}
}
@media(max-width:420px){.pill{display:none}.acts .sm{padding:0 9px;min-width:42px}.btn{padding:0 16px}}
.faq{max-width:1120px;margin:24px auto 0;padding:0 18px;color:var(--body);font-size:14px}
.faq h2{font-size:18px;margin:0 0 8px;color:var(--ink)}
.faq details{border-top:1px solid var(--line);padding:8px 0}.faq summary{cursor:pointer;font-weight:600;color:var(--ink)}
.faq p{margin:6px 0 0;max-width:70ch}
.made{max-width:1120px;margin:8px auto 0;padding:6px 18px 90px;color:var(--muted);font-size:12px}
.top-r .btn{white-space:nowrap;font-size:12px;padding-left:10px;padding-right:10px}@media(max-width:480px){.top-r .pill{display:none}}
.faq summary{padding:11px 0;margin:-8px 0}
.brand{display:inline-flex;align-items:center;min-height:44px}
.name{min-height:44px}
.thatched-legal a{display:inline-block;padding:14px 0;margin:-14px 0}