@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,800&family=Manrope:wght@400;600;700;800&display=swap');

:root { --ink:#171715; --paper:#f3ecde; --paper2:#e7decd; --coral:#ff624b; --lime:#c9ff54; --blue:#65b9ee; --muted:#746e63; --line:rgba(23,23,21,.18); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope, sans-serif; overflow:hidden; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.titlebar { height:42px; display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--ink); color:#fff8ec; font:500 11px/1 DM Mono, monospace; letter-spacing:.12em; -webkit-app-region:drag; }
.tiny-logo { display:grid; place-items:center; width:23px; height:23px; background:var(--coral); color:var(--ink); font-weight:800; transform:rotate(-3deg); }
.autosave { margin-left:auto; margin-right:132px; color:#aaa69f; letter-spacing:.04em; }
.shell { height:calc(100vh - 42px); display:grid; grid-template-columns:260px minmax(0,1fr); }
.sidebar { padding:28px 20px 20px; border-right:1px solid var(--line); background:rgba(255,255,255,.18); display:flex; flex-direction:column; }
.brand { font-family:Fraunces,serif; font-size:29px; line-height:.9; margin:0 8px 32px; }
.brand em { color:var(--coral); font-style:italic; }
.roadmap { display:grid; gap:6px; }
.step-link { border:0; background:transparent; padding:12px 10px; text-align:left; border-radius:12px; display:grid; grid-template-columns:32px 1fr; align-items:center; color:var(--muted); transition:.2s; }
.step-link:hover { background:rgba(255,255,255,.5); color:var(--ink); }
.step-link.active { color:var(--ink); background:#fffaf0; box-shadow:0 8px 20px rgba(40,30,10,.08); }
.step-link.done .step-num { background:var(--lime); }
.step-num { width:25px; height:25px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font:11px DM Mono; }
.step-link.active .step-num { background:var(--ink); color:white; }
.step-copy b { display:block; font-size:12px; }.step-copy small { font:10px DM Mono; opacity:.7; }
.coach { margin-top:auto; padding:16px; background:var(--ink); color:white; border-radius:16px; position:relative; overflow:hidden; }
.coach:after { content:'♫'; position:absolute; right:-5px; bottom:-22px; font:80px Fraunces; color:rgba(255,255,255,.08); transform:rotate(-12deg); }
.coach small { color:var(--lime); font:10px DM Mono; text-transform:uppercase; }.coach p { font-size:12px; line-height:1.5; margin:8px 0 0; }
.workspace { overflow:auto; padding:38px clamp(30px,5vw,74px) 110px; position:relative; }
.workspace:before { content:''; position:fixed; inset:42px 0 0 260px; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.eyebrow { font:500 11px DM Mono; letter-spacing:.12em; text-transform:uppercase; color:var(--coral); }
h1 { font:800 clamp(40px,5vw,72px)/.96 Fraunces,serif; letter-spacing:-.035em; margin:12px 0 14px; max-width:800px; }
.lede { max-width:650px; font-size:16px; line-height:1.65; color:var(--muted); margin:0 0 34px; }
.style-grid { display:grid; grid-template-columns:repeat(5, minmax(150px,1fr)); gap:12px; }
.style-card { min-height:250px; padding:18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,250,240,.62); text-align:left; position:relative; overflow:hidden; transition:.25s; }
.style-card:hover { transform:translateY(-5px) rotate(-.4deg); box-shadow:0 18px 40px rgba(30,20,10,.12); }
.style-card.selected { outline:3px solid var(--ink); background:#fffaf0; }
.style-card .orb { width:80px; height:80px; border-radius:50%; margin:3px auto 22px; box-shadow:inset -14px -12px 0 rgba(0,0,0,.15); position:relative; }
.style-card .orb:after { content:''; position:absolute; width:26px; height:8px; border-radius:50%; background:rgba(255,255,255,.55); left:14px; top:15px; transform:rotate(-30deg); }
.style-card small { font:10px DM Mono; text-transform:uppercase; }.style-card h3 { font:700 17px Fraunces; margin:8px 0; }.style-card p { color:var(--muted); font-size:11px; line-height:1.5; }
.tags { display:flex; flex-wrap:wrap; gap:4px; }.tag { border:1px solid var(--line); border-radius:20px; padding:4px 7px; font:9px DM Mono; }
.bottom-bar { position:fixed; bottom:0; left:260px; right:0; z-index:5; height:78px; display:flex; align-items:center; gap:14px; padding:0 clamp(30px,5vw,74px); background:rgba(243,236,222,.92); backdrop-filter:blur(16px); border-top:1px solid var(--line); }
.primary,.secondary,.play-btn { border:1px solid var(--ink); border-radius:999px; padding:13px 22px; font-weight:800; transition:.18s; }
.primary { background:var(--ink); color:white; margin-left:auto; }.primary:hover { transform:translateY(-2px); box-shadow:4px 5px 0 var(--coral); }
.secondary { background:transparent; }.secondary:hover { background:white; }
.play-btn { background:var(--lime); min-width:150px; }.play-btn.playing { background:var(--coral); }
.tip { margin-left:auto; color:var(--muted); font-size:11px; }
.lesson-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:22px; align-items:start; }
.panel { background:rgba(255,250,240,.72); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:0 10px 30px rgba(60,40,10,.04); }
.panel h2 { font:700 24px Fraunces; margin:0 0 6px; }.panel-intro { color:var(--muted); font-size:12px; line-height:1.5; margin-bottom:20px; }
.chord-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.chord { min-height:142px; border:1px solid var(--line); background:var(--paper); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:.18s; }
.chord:hover { background:#fffaf0; transform:translateY(-3px); box-shadow:0 6px 0 var(--ink); }
.chord.focused { outline:3px solid var(--ink); outline-offset:2px; }
.chord.lit { background:var(--coral); transform:translateY(-4px); box-shadow:0 8px 0 var(--ink); }.chord-name { font:800 31px Fraunces; }.roman { font:10px DM Mono; color:var(--muted); }
.piano-caption { display:flex; align-items:baseline; gap:10px; margin:22px 0 8px; }.piano-caption span { font:9px DM Mono; color:var(--coral); }.piano-caption b { font:22px Fraunces; }.piano-caption small { color:var(--muted); font:9px DM Mono; }
.keys { height:84px; display:flex; }.key { flex:1; border:1px solid var(--line); border-radius:0 0 7px 7px; background:#fffdf8; display:flex; align-items:flex-end; justify-content:center; padding-bottom:7px; transition:.16s; }.key span { font:8px DM Mono; color:var(--muted); }.key.sharp { height:62px; background:var(--ink); margin:0 -3px; z-index:1; border-radius:0 0 6px 6px; }.key.sharp span { color:#aaa69f; }.key.on { background:var(--lime); transform:translateY(-3px); box-shadow:0 4px 0 var(--coral); }.key.on span { color:var(--ink); font-weight:800; }
.fact { padding:14px 0; border-top:1px solid var(--line); }.fact:first-of-type{border:0}.fact small{display:block;font:10px DM Mono;color:var(--muted);text-transform:uppercase}.fact b{display:block;margin-top:5px;font-size:14px}
.pattern-grid { display:grid; gap:10px; }.pattern { border:1px solid var(--line); border-radius:13px; padding:14px; background:transparent; text-align:left; }.pattern.selected { background:var(--ink); color:white; }.pattern b{display:block}.pattern small{opacity:.65}
.control { display:grid; gap:8px; padding:14px 0; border-bottom:1px solid var(--line); font:10px DM Mono; text-transform:uppercase; }
.control span { display:flex; justify-content:space-between; align-items:center; }.control b { color:var(--coral); }
.control select { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--paper); color:var(--ink); font:700 13px Manrope; outline:none; }
input[type="range"] { appearance:none; height:6px; border-radius:10px; background:linear-gradient(90deg,var(--coral),var(--lime)); outline:none; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:19px; height:19px; border-radius:50%; background:var(--ink); border:3px solid #fffaf0; box-shadow:0 1px 4px rgba(0,0,0,.28); }
.mini-actions { display:flex; gap:8px; margin-top:10px; }.mini-actions .secondary { padding:9px 13px; font-size:10px; }
.mixer { display:grid; gap:15px; margin:18px 0; }.mix-row { display:grid; grid-template-columns:52px 1fr 38px; gap:10px; align-items:center; font:10px DM Mono; text-transform:uppercase; }.mix-row output { text-align:right; color:var(--coral); }
.finish-mix { max-width:440px; margin:26px auto 0; padding:17px 20px 8px; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(0,0,0,.25); }.finish-mix .mix-row output { color:var(--lime); }
.beat-grid,.hook-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; padding:20px 0; }.beat { aspect-ratio:1; border:1px solid var(--line); border-radius:9px; background:var(--paper2); display:grid; place-items:center; font:11px DM Mono; }.beat.on { background:var(--coral); box-shadow:0 4px 0 var(--ink); transform:translateY(-3px); }.beat:nth-child(4n+1){border-left:3px solid var(--ink)}
.structure { display:grid; grid-template-columns:1fr 1.5fr 1fr 1.5fr; gap:5px; }.section { padding:20px 8px; text-align:center; border-radius:10px; font:11px DM Mono; background:var(--paper2); }.section.chorus{background:var(--coral);font-weight:bold}
.lyrics { width:100%; min-height:190px; resize:vertical; border:0; border-bottom:2px solid var(--ink); background:repeating-linear-gradient(transparent,transparent 34px,rgba(0,0,0,.12) 35px); font:600 17px/35px Fraunces; padding:0 5px; outline:0; }
.record { width:130px; height:130px; border:0; border-radius:50%; background:var(--coral); box-shadow:0 0 0 9px var(--paper),0 0 0 11px var(--ink); font-weight:800; margin:16px auto; display:block; }.record.recording { animation:pulse 1s infinite; }
.recording-playback { width:100%; margin-top:14px; }
.sing-coach { margin-top:24px; padding:18px; border-radius:16px; background:var(--ink); color:white; }.sing-coach>small { color:var(--lime); font:10px DM Mono; }.sing-coach h2 { margin:6px 0 14px; color:white; }.sing-coach p { margin:14px 0 0; color:#c9c4ba; font-size:11px; line-height:1.55; }.sing-beats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.sing-beat { min-height:66px; border:1px solid rgba(255,255,255,.2); border-radius:10px; display:grid; place-items:center; align-content:center; transition:.12s; }.sing-beat b { font:24px Fraunces; }.sing-beat span { font:8px DM Mono; color:#aaa49b; }.sing-beat.active { color:var(--ink); background:var(--lime); transform:translateY(-4px); box-shadow:0 5px 0 var(--coral); }.sing-beat.active span { color:var(--ink); }
.vocal-editor { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }.track-head { display:flex; justify-content:space-between; align-items:start; margin-bottom:10px; }.track-head b,.track-head small { display:block; }.track-head b { font:11px DM Mono; color:var(--coral); }.track-head small { margin-top:4px; color:var(--muted); font-size:9px; }.track-head output { font:10px DM Mono; padding:5px 8px; border-radius:12px; background:var(--lime); }
.vocal-timeline { height:88px; position:relative; display:grid; grid-template-columns:repeat(16,1fr); overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper2); }.timeline-beat { padding:6px 4px; border-right:1px solid var(--line); color:var(--muted); font:8px DM Mono; }.timeline-beat:nth-child(4n+1) { background:rgba(23,23,21,.06); border-left:2px solid var(--ink); }.vocal-clip { position:absolute; top:31px; height:41px; min-width:24px; overflow:hidden; border:1px solid var(--ink); border-radius:8px; background:var(--coral); box-shadow:0 4px 0 var(--ink); color:var(--ink); font:800 9px DM Mono; cursor:grab; touch-action:none; }.vocal-clip:active { cursor:grabbing; filter:brightness(.95); }
.offset-control { display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:center; margin:16px 0 4px; font:9px DM Mono; text-transform:uppercase; }.vocal-editor .mini-actions { flex-wrap:wrap; }.vocal-editor .mini-actions .secondary { flex:1; white-space:nowrap; padding:7px 8px; font-size:8px; }
.vocal-ready,.vocal-missing { display:inline-block; margin:0 0 18px!important; padding:7px 11px; border-radius:20px; font:9px DM Mono; }.vocal-ready { color:var(--lime)!important; border:1px solid var(--lime); }.vocal-missing { color:#c5c0b7!important; border:1px solid #716e68; }
.finish-card { min-height:390px; display:grid; place-items:center; text-align:center; background:var(--ink); color:white; border-radius:26px; position:relative; overflow:hidden; }.finish-card:before { content:''; width:340px;height:340px;border-radius:50%;background:var(--coral);position:absolute;left:-80px;top:-110px;filter:blur(2px)}.finish-card:after {content:'';width:260px;height:260px;border-radius:50%;border:50px solid var(--lime);position:absolute;right:-100px;bottom:-130px}.finish-inner{z-index:1;max-width:570px;padding:50px}.finish-card h1{font-size:62px}.finish-card p{color:#c5c0b7;line-height:1.6}.stats{display:flex;justify-content:center;gap:35px;margin:25px}.stats b{display:block;font:28px Fraunces}.stats small{font:9px DM Mono;color:var(--lime)}
.lab-tabs { display:flex; gap:6px; padding:6px; margin-bottom:18px; border:1px solid var(--line); border-radius:999px; width:max-content; background:rgba(255,255,255,.35); }.lab-tabs button { border:0; border-radius:999px; padding:10px 17px; background:transparent; font:10px DM Mono; }.lab-tabs button.active { background:var(--ink); color:white; }
.lab-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; align-items:stretch; }.lab-hero,.lab-note { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:22px; padding:30px; background:rgba(255,250,240,.75); }.lab-hero { min-height:340px; }.lab-number { position:absolute; right:18px; top:-22px; color:rgba(23,23,21,.06); font:800 130px Fraunces; }.lab-hero h2 { max-width:650px; margin:0 0 12px; font:800 34px Fraunces; }.lab-hero>p { max-width:660px; color:var(--muted); line-height:1.7; }.lab-note { background:var(--lime); display:flex; flex-direction:column; justify-content:flex-end; transform:rotate(.6deg); }.lab-note>b { font:10px DM Mono; }.lab-note p { font:700 16px/1.55 Fraunces; }
.degree-route,.signal-chain { display:flex; align-items:center; gap:9px; margin-top:35px; }.degree-route span,.signal-chain span { flex:1; min-width:70px; padding:18px 12px; border:1px solid var(--line); border-radius:13px; text-align:center; background:var(--paper); }.degree-route b { display:block; font:24px Fraunces; }.degree-route small,.signal-chain small { display:block; margin-top:5px; color:var(--muted); font:9px DM Mono; }.degree-route i,.signal-chain i { font-style:normal; color:var(--coral); }
.rhythm-ruler { display:grid; grid-template-columns:repeat(16,1fr); gap:4px; margin-top:35px; }.rhythm-ruler span { height:76px; display:grid; place-items:center; align-content:center; border-radius:8px; background:var(--paper2); }.rhythm-ruler span.downbeat { background:var(--coral); transform:translateY(-6px); }.rhythm-ruler b { font:17px Fraunces; }.rhythm-ruler small { min-height:12px; font:8px DM Mono; }
.arrangement-map { display:grid; grid-template-columns:.6fr 1fr 1.3fr 1fr 1.3fr; gap:5px; margin-top:35px; }.arrangement-map span { min-height:110px; padding:16px 8px; border-radius:10px; display:grid; place-items:center; align-content:center; background:var(--paper2); font:10px DM Mono; }.arrangement-map span.peak { background:var(--coral); transform:translateY(-8px); }.arrangement-map small { margin-top:8px; color:var(--muted); font:8px/1.5 DM Mono; }
.signal-chain span { padding:25px 8px; font:10px DM Mono; }.lab-hero .mixer { max-width:620px; margin-top:30px; }
.welcome { min-height:calc(100vh - 150px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:50px; }.welcome h1 { font-size:clamp(58px,7vw,102px); }.sticker { display:inline-block; padding:8px 12px; background:var(--lime); border:2px solid var(--ink); font:11px DM Mono; transform:rotate(-3deg); box-shadow:4px 4px 0 var(--ink); }.record-art { width:min(42vw,470px); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle,#1d1d1a 0 3px,#292925 4px 9px); box-shadow:25px 30px 0 var(--coral),0 35px 70px rgba(0,0,0,.25); position:relative; animation:spin 18s linear infinite; }.record-art:after{content:'YOUR FIRST HIT';position:absolute;inset:31%;border-radius:50%;background:var(--lime);display:grid;place-items:center;font:800 12px DM Mono;text-align:center;transform:rotate(12deg)}
@keyframes spin{to{transform:rotate(360deg)}} @keyframes pulse{50%{box-shadow:0 0 0 15px var(--paper),0 0 0 18px var(--coral)}}
@media(max-width:1150px){.style-grid{grid-template-columns:repeat(3,1fr)}.welcome{grid-template-columns:1fr .7fr}.lesson-grid,.lab-grid{grid-template-columns:1fr}.workspace{padding-top:28px}.lab-note{min-height:180px}.lab-tabs{max-width:100%;overflow:auto}.signal-chain{flex-wrap:wrap}}