*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --wood:#3b2416; --wood-2:#2b1a10;
  --page:#f3e4cd; --paper:#faf0df;
  --line:rgba(58,32,14,.16); --ink:#2f1c10; --muted:#8a6a50;
  --accent:#c2511f; --accent-2:#8a3416;
  --topbar-h:60px;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 10px);}
body{font-family:'Roboto',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--page);color:var(--ink);}
h1,h2,.wordmark,.tk-num{font-family:'Oswald',sans-serif;}
a{color:inherit;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important; animation-iteration-count:1 !important;} }

/* topbar */
.topbar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:var(--topbar-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:var(--wood);box-shadow:0 2px 0 var(--accent);}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:#f2e4cc;font-size:1.06rem;font-weight:600;letter-spacing:.02em;}
.wordmark svg{flex-shrink:0;}
.nav{display:flex;align-items:center;gap:26px;}
.nav a{color:#d8bd9c;text-decoration:none;font-size:.9rem;}
.nav a:hover{color:#f2e4cc;}
.nav a.cta{color:var(--wood);background:#f2e4cc;padding:7px 16px;border-radius:2px;font-weight:600;}
.nav a.cta:hover{background:#fff;}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (max-width:640px){ .nav{gap:9px;} .nav a{font-size:.72rem;white-space:nowrap;} .wordmark span{display:none;} .topbar{padding:0 14px;} }
@media (max-width:400px){ .nav{gap:6px;} .nav a{font-size:.68rem;} }
.nav a.current{color:#f2e4cc;border-bottom:2px solid var(--accent);padding-bottom:3px;}

/* hero — the plucked-string waveform is the actual content, not decoration */
.hero{margin-top:var(--topbar-h);padding:64px 24px 40px;background:var(--paper);
  border-bottom:1px dashed var(--muted);}
.hero-inner{max-width:640px;margin:0 auto;}
.hero-eyebrow{color:var(--accent);font-size:.82rem;}
.hero h1{font-size:clamp(2rem,6.4vw,3.1rem);font-weight:600;letter-spacing:.01em;margin-top:6px;color:var(--ink);}
.hero p{margin-top:14px;max-width:46ch;line-height:1.6;color:#5a4230;}
.wave{width:100%;height:auto;margin-top:30px;display:block;}
.wave path{fill:none;stroke:var(--accent);stroke-width:2;}
.wave .decay{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.8s ease-out .15s forwards;}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-actions{margin-top:28px;display:flex;gap:18px;align-items:center;}
.hero-actions a{text-decoration:none;font-weight:500;}
.hero-actions .play{color:#fff;background:var(--accent);padding:11px 22px;border-radius:2px;}
.hero-actions .play:hover{background:var(--accent-2);}
.hero-actions .jump{color:var(--ink);border-bottom:1px solid var(--muted);padding-bottom:2px;}

main{max-width:640px;margin:0 auto;padding:0 24px 90px;}
section{padding:54px 0;}
h2{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;}

/* tracklist — a liner-notes list, numbered because it genuinely is one */
.tracklist{border-top:1px solid var(--line);}
.tk{display:grid;grid-template-columns:44px 1fr;gap:6px 16px;padding:22px 0;border-bottom:1px solid var(--line);}
.tk-num{font-size:1.6rem;color:var(--accent);line-height:1;padding-top:2px;}
.tk-title{font-size:1.08rem;font-weight:500;color:var(--ink);}
.tk-desc{grid-column:2;color:var(--muted);font-size:.9rem;margin-top:2px;line-height:1.5;}
.tk-audio{grid-column:2;margin-top:10px;}
audio{width:100%;height:34px;accent-color:var(--accent);}
.tk-note{grid-column:2;color:var(--muted);font-size:.78rem;margin-top:6px;}

/* process — the step grid is the actual pattern, and the chain is the actual pipeline order */
.step-grid{border-top:1px solid var(--line);margin-bottom:24px;overflow-x:auto;}
.grid-tpl{grid-template-columns:96px repeat(4,minmax(16px,1fr)) 10px repeat(4,minmax(16px,1fr)) 10px repeat(4,minmax(16px,1fr)) 10px repeat(4,minmax(16px,1fr));}
.step-ruler{display:grid;gap:4px;min-width:460px;padding-bottom:8px;}
.step-ruler span{font-size:.72rem;color:var(--muted);text-align:center;letter-spacing:.06em;}
.step-row{display:grid;gap:4px;align-items:center;padding:6px 0;min-width:460px;}
.step-row .label{font-size:.8rem;color:var(--muted);}
.step-row .cell{width:100%;aspect-ratio:1;border-radius:2px;border:1px solid var(--line);background:transparent;transition:box-shadow .1s;}
.step-row .cell.on{background:var(--accent);border-color:var(--accent);}
.step-row .cell.playhead{box-shadow:0 0 0 2px var(--wood-2);}
.beat-caption{color:var(--muted);font-size:.82rem;margin:2px 0 22px;}
.audio-row{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.audio-row .bpm{font-family:'Oswald',sans-serif;font-size:.82rem;color:var(--accent);white-space:nowrap;}
.player{display:flex;align-items:center;gap:12px;flex:1;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;}
.play-btn{width:32px;height:32px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;}
.play-btn:hover{background:var(--accent-2);}
.play-btn svg{width:13px;height:13px;}
.player-track{flex:1;height:5px;background:var(--line);border-radius:999px;position:relative;overflow:hidden;cursor:pointer;}
.player-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent);}
.player-time{font-size:.78rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}

.chain{border-top:1px solid var(--line);}
.stage{display:grid;grid-template-columns:44px 1fr;gap:6px 16px;padding:18px 0;border-bottom:1px solid var(--line);}
.stage-num{font-family:'Oswald',sans-serif;font-size:1.4rem;color:var(--accent);line-height:1;padding-top:2px;}
.stage-name{font-size:1rem;font-weight:500;color:var(--ink);}
.stage-desc{grid-column:2;color:var(--muted);font-size:.9rem;margin-top:2px;line-height:1.5;}

/* about — plain prose, no card */
.about p{line-height:1.75;color:#4a3420;max-width:52ch;}
.about p + p{margin-top:14px;}

/* contact — underline links, not tiles */
.contact{display:flex;flex-direction:column;gap:2px;}
.contact a{display:flex;align-items:baseline;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);}
.contact a:hover{color:var(--accent);}
.contact span.who{font-weight:500;}
.contact span.where{color:var(--muted);font-size:.88rem;}

footer{border-top:1px solid var(--line);padding:24px 24px calc(24px + env(safe-area-inset-bottom,0px));
  color:var(--muted);font-size:.8rem;max-width:640px;margin:0 auto;}

/* final beat — the uploaded track plus the owner-only drop zone */
.intro{color:#5a4230;line-height:1.6;margin-bottom:20px;max-width:52ch;}
.beat-meta{color:var(--muted);font-size:.82rem;margin:4px 0 18px;}
.beat-empty{color:var(--muted);font-size:.9rem;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px;}
.drop{border:2px dashed var(--muted);border-radius:4px;padding:26px 18px;text-align:center;background:var(--paper);
  color:#5a4230;cursor:pointer;transition:background .15s,border-color .15s;}
.drop:hover,.drop.over{border-color:var(--accent);background:#fff5e8;}
.drop strong{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:.02em;color:var(--ink);margin-bottom:4px;}
.drop small{color:var(--muted);font-size:.8rem;}
.drop.busy{cursor:progress;opacity:.8;}
.upbar{height:5px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:12px;display:none;}
.upbar div{height:100%;width:0;background:var(--accent);transition:width .1s;}
.upmsg{font-size:.85rem;margin-top:10px;min-height:1.2em;}
.upmsg.err{color:#a3261b;} .upmsg.ok{color:#3f6b22;}
.owner-link{font-size:.8rem;color:var(--muted);margin-top:10px;}
.owner-link a{color:var(--accent);}

/* screenshots — grouped by session, each figure carries its own explanation */
.session{border-top:1px solid var(--line);padding:26px 0 8px;}
.session-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.session-head h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.25rem;color:var(--ink);letter-spacing:.01em;}
.session-head .when{font-size:.8rem;color:var(--accent);}
.session > p{color:#5a4230;line-height:1.65;font-size:.93rem;margin-bottom:18px;}
.shot{margin:0 0 30px;}
.shot button{display:block;width:100%;padding:0;border:1px solid var(--line);background:#2b2b2b;cursor:zoom-in;border-radius:3px;overflow:hidden;}
.shot img{display:block;width:100%;height:auto;}
.shot figcaption{margin-top:10px;}
.shot .cap-title{font-weight:500;color:var(--ink);font-size:1rem;}
.shot .cap-body{color:#5a4230;font-size:.9rem;line-height:1.65;margin-top:6px;}
.shot .cap-body p + p{margin-top:8px;}
.shot .cap-body b{color:var(--ink);font-weight:500;}
.shot ul{margin:8px 0 0 18px;color:#5a4230;font-size:.9rem;line-height:1.6;}
.why{border-left:3px solid var(--accent);padding:2px 0 2px 12px;margin-top:10px;font-size:.88rem;color:#4a3420;line-height:1.6;}

/* full-size viewer */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,12,6,.92);display:none;align-items:center;justify-content:center;padding:16px;cursor:zoom-out;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:100%;box-shadow:0 10px 40px rgba(0,0,0,.5);}

/* page heading used on the inner pages */
.page-head{margin-top:var(--topbar-h);padding:48px 24px 30px;background:var(--paper);border-bottom:1px dashed var(--muted);}
.page-head-inner{max-width:760px;margin:0 auto;}
.page-head h1{font-size:clamp(1.8rem,5.6vw,2.6rem);font-weight:600;margin-top:6px;}
.page-head p{margin-top:12px;max-width:56ch;line-height:1.6;color:#5a4230;}
main.wide{max-width:760px;}
main.wide p,main.wide li{line-height:1.75;color:#4a3420;}
main.wide section p + p{margin-top:12px;}
main.wide h3{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.25rem;color:var(--ink);margin:26px 0 8px;}
.toc{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:.88rem;}
.toc a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0;}
.facts div{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:12px 14px;font-size:.85rem;color:#4a3420;line-height:1.45;}
.facts b{display:block;font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:3px;}
.track-card{border-top:2px solid var(--accent);margin-top:46px;padding-top:6px;}
.track-card h2{margin-bottom:6px;}
.track-card .sub{color:var(--accent);font-size:.9rem;margin-bottom:14px;}
.artist-photo{width:min(100%,220px);margin:18px 0 22px;}
.artist-photo img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:3px;}
.aspect{margin:16px 0 0;}
.aspect h4{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.table-wrap{overflow-x:auto;margin:18px 0;}
table.compare{border-collapse:collapse;min-width:620px;width:100%;font-size:.86rem;}
table.compare th,table.compare td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top;line-height:1.5;color:#4a3420;}
table.compare th{background:var(--paper);font-family:'Oswald',sans-serif;font-weight:600;color:var(--ink);letter-spacing:.03em;}
.refs{list-style:none;margin:0;padding:0;}
.refs li{padding:10px 0 10px 28px;text-indent:-28px;border-bottom:1px solid var(--line);font-size:.88rem;line-height:1.6;}
.refs a{color:var(--accent);word-break:break-all;}
.note{font-size:.84rem;color:var(--muted);margin-top:14px;}