@import url('/assets/creator-nav.css');
:root{color-scheme:dark;--bg:#0b1214;--panel:#121e20;--line:#2c4140;--ink:#edf2e4;--muted:#a5b8b3;--mint:#c8edb6;--orange:#f1b77e;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 88% 10%,#24483d55,transparent 700px),var(--bg);line-height:1.65}a{color:inherit;text-decoration:none}a:hover{color:var(--mint)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:4px}.skip{position:absolute;left:12px;top:-80px;background:var(--mint);color:#102016;padding:10px;z-index:99}.skip:focus{top:10px}.wrap{max-width:1240px;margin:auto;padding:0 36px}header{border-bottom:1px solid var(--line)}.nav{display:flex;justify-content:space-between;gap:30px;align-items:center;min-height:95px}.brand{display:flex;align-items:center;gap:12px;font:12px/1.5 monospace;letter-spacing:.22em;text-transform:uppercase}.brand img{width:29px;height:29px}.nav nav{display:flex;gap:26px;font-size:13px;flex-wrap:wrap}.nav .active{color:var(--mint)}.eyebrow,.tag,.number,.category,.card-top,.meta{font:11px/1.5 monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.eyebrow{color:var(--mint);display:flex;gap:12px;align-items:center}.eyebrow:before{content:'';width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 16px #b8efad}.hero{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:60px;padding:70px 0 56px}.hero h1{font-size:clamp(50px,6vw,84px);letter-spacing:-.065em;line-height:1.04;font-weight:500;margin:22px 0}.hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--mint)}.lede{font-size:18px;color:var(--muted);max-width:620px;line-height:1.7}.hero .meta{margin-top:30px;letter-spacing:.05em}.instrument-art{position:relative;height:310px;border:1px solid #44665c;border-radius:180px 180px 20px 20px;background:radial-gradient(circle at 50% 50%,#a1cf7e22,transparent 65%),#101d1d;box-shadow:0 20px 80px #0005;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.instrument-art svg{width:90%;height:190px}.instrument-art .meta{font-size:10px;margin:0}.strip{display:flex;gap:20px;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;color:var(--muted);font:11px monospace}.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:50px 0 23px}.section-title h2{font-size:29px;font-weight:400;letter-spacing:-.035em;margin:0}.section-title span{font:11px monospace;color:var(--muted)}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tool-card{display:flex;flex-direction:column;position:relative;min-height:238px;border:1px solid var(--line);border-radius:8px;padding:25px;background:linear-gradient(145deg,#152323aa,#101a1d);transition:transform .2s,border-color .2s}.tool-card:hover{transform:translateY(-4px);border-color:#82b495;color:var(--ink)}.card-top{display:flex;align-items:center;justify-content:space-between;font-size:10px}.tool-icon{font:38px Georgia,serif;color:var(--mint);line-height:1.1;margin:12px 0 5px}.tool-card h3{font-size:20px;letter-spacing:-.025em;font-weight:500;line-height:1.25;margin:10px 0}.tool-card p{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 18px}.card-link{margin-top:auto;font-size:12px;color:var(--mint)}.card-link b{float:right;font-weight:400;font-size:19px}.journey{margin:55px 0;padding:36px;background:#1b2721;border:1px solid #48603f;border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.journey h2{font-size:30px;font-weight:400;line-height:1.25;letter-spacing:-.04em;margin:10px 0}.journey p{font-size:14px;color:var(--muted)}.journey-links{display:flex;flex-wrap:wrap;gap:10px}.journey-links a{border:1px solid #536b4e;border-radius:30px;padding:9px 15px;font-size:12px}.breadcrumb{font-size:12px;color:var(--muted);margin:30px 0 25px}.tool-header{max-width:860px;margin-bottom:30px}.tool-header h1{font-size:clamp(32px,4.5vw,56px);letter-spacing:-.045em;line-height:1.1;font-weight:500;margin:14px 0}.tool-header .lede{font-size:17px}.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}.workspace{min-width:0}.tool-app{padding:30px;border:1px solid #415b50;border-radius:10px;background:linear-gradient(125deg,#162624,#101b1e);min-height:300px;box-shadow:0 14px 50px #0003}.controls{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 20px}.field{display:flex;flex-direction:column;gap:8px;flex:1;min-width:120px;margin-bottom:18px}.controls .field{margin-bottom:0}.field>span{font-size:12px;color:#c0d0c6}.field[hidden]{display:none}input,select,textarea{border:1px solid #486058;border-radius:5px;background:#0c1719;color:var(--ink);font-family:inherit;font-size:15px;line-height:1.5;padding:11px 12px;width:100%;min-height:46px}select{font-size:15px}input[type=range]{accent-color:var(--mint);padding:0}input[type=checkbox]{width:18px;min-height:18px;accent-color:var(--mint)}.check{display:flex;gap:8px;align-items:center;font-size:14px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}button,.button{font:13px/1.3 Arial,sans-serif;border:1px solid #57745d;border-radius:5px;padding:13px 18px;min-height:44px;cursor:pointer;transition:background .15s;color:var(--ink);background:#213630}button.primary,.button.primary{background:var(--mint);border-color:var(--mint);color:#152719;font-weight:600}button:hover{filter:brightness(1.12)}button:disabled{opacity:.45;cursor:wait}.secondary{background:#122322}.hint{font-size:12px;line-height:1.7;color:var(--muted)}.hint a{text-decoration:underline}.status{font-size:13px;min-height:24px;margin:18px 0 0;color:var(--mint)}.status.error{color:#ffc6ad}.result{text-align:center;padding:24px 10px;background:#0b1719;border:1px solid #2c4240;border-radius:8px;margin:22px 0}.result[hidden]{display:none}.result small{font:10px monospace;color:var(--muted);display:block;letter-spacing:.14em;margin-bottom:10px}.result strong{font-size:clamp(28px,5vw,53px);display:block;font-weight:400;letter-spacing:-.04em;color:var(--mint);line-height:1.2;overflow-wrap:anywhere}.result span{display:block;font-size:12px;color:var(--muted);margin-top:12px}.result .actions{justify-content:center}.result.compact strong{font-size:30px}.tuner-result strong{font-size:76px}.meter{position:relative;margin:25px auto 0;width:90%;height:35px;background:linear-gradient(90deg,transparent 47%,#83b08128 47%,#83b08128 53%,transparent 53%);border-bottom:1px solid #526452}.meter span{position:absolute;bottom:0;left:50%;width:3px;height:30px;background:var(--mint);transition:left .12s;margin:0}.meter i{position:absolute;left:50%;width:1px;height:38px;background:#c3dfad66}.meter-labels{display:flex;justify-content:space-between;width:90%;margin:auto}.meter-labels span{font:9px monospace;margin:10px 0}.note-buttons{display:flex;flex-wrap:wrap;gap:8px}.note-buttons button{flex:1;min-width:70px}.note-buttons small{display:block;font-size:9px;margin-top:6px;color:var(--muted)}button.active{background:#c8edb6;color:#132518;border-color:#c8edb6}.active small{color:#203d27}.sidebar{border-top:1px solid var(--line);padding-top:20px}.sidebar .category{color:var(--orange)}.sidebar h2{font-size:24px;letter-spacing:-.03em;line-height:1.2;font-weight:400}.sidebar p{font-size:13px;color:var(--muted)}.sidebar a.button{display:block;text-align:center;margin:20px 0 12px}.sidebar img{display:block;width:100%;height:200px;object-fit:contain;margin:18px 0}.sidebar .text-link{font-size:12px;text-decoration:underline}.content{margin:40px 0}.content h2{font-size:26px;font-weight:400;letter-spacing:-.025em}.content h3{font-size:19px;font-weight:500}.content p,.content li{color:var(--muted);font-size:15px}.content li{padding:6px 0}.content ol{padding-left:22px}.related{margin:50px 0}.related .tool-card{min-height:200px}.related .tool-grid{grid-template-columns:repeat(3,1fr)}.drop-zone{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;border:1px dashed #6a8878;border-radius:8px;padding:25px 20px;background:#21362a44;cursor:pointer}.drop-zone span{font-size:12px;color:var(--muted)}.drop-zone strong{font-size:17px;font-weight:500}.drop-zone .upload-symbol{font-size:34px;color:var(--mint)}.drop-zone input{max-width:400px;margin-top:12px;font-size:12px}.tap-pad{display:block;width:100%;min-height:160px;background:#203c32;border:1px solid #9cbd86;color:var(--mint);font-size:40px;font-weight:600;letter-spacing:.12em}.tap-pad:active{background:var(--mint);color:#183322}.tap-pad span{display:block;font:11px monospace;letter-spacing:0;margin-top:14px}.beat-lights{display:flex;gap:8px;margin:35px 0;flex-wrap:wrap}.beat-lights span{display:flex;align-items:center;justify-content:center;border:1px solid #506657;border-radius:50%;width:42px;height:42px;font:14px monospace;color:var(--muted)}.beat-lights .active{background:var(--mint);box-shadow:0 0 25px #c8edb633;color:#19331c}.chord-display{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.chord{flex:1;font-size:22px;min-width:75px;padding:20px 10px}.piano-roll{height:130px;position:relative;border:1px solid var(--line);border-radius:6px;margin-top:18px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#32483f 25%),repeating-linear-gradient(0deg,#101c1e 0,#101c1e 15px,#223530 16px);overflow:hidden}.piano-roll i{position:absolute;height:5px;background:var(--mint);border-radius:2px}.keyboard{display:grid;grid-template-columns:repeat(12,1fr);gap:3px}.keyboard button{min-width:0;padding:20px 0;background:#d3ded1;color:#1d3022;font-size:10px;border-radius:0 0 5px 5px}.keyboard button.black{background:#243635;color:#deecdd}.keyboard button.active{background:var(--orange);color:#213425}.fret-scroll{overflow:auto}.fretboard{display:grid;grid-template-columns:repeat(13,minmax(40px,1fr));gap:2px;min-width:560px}.fret{padding:8px 2px;border-radius:0;min-height:42px;font-size:11px;background:#151f21;border-color:#34453e;color:#65786d}.fret.in-scale{color:var(--ink);background:#284337}.fret.root{background:var(--mint);color:#1e3224}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;border-bottom:1px solid #354a41;padding:14px 8px}th{font-weight:400;color:var(--muted)}td{font-family:monospace;color:var(--mint)}.orb{margin:30px auto;max-width:240px;aspect-ratio:1;border-radius:50%;border:1px solid #789c6c;background:radial-gradient(circle,#88ab7140,transparent 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 40px #a8d08a14}.orb span{font:64px Georgia,serif;color:var(--mint)}.orb small{font:9px monospace;color:var(--muted);letter-spacing:.2em;margin-top:10px}.orb.playing{animation:breathe 6s infinite alternate}@keyframes breathe{to{box-shadow:inset 0 0 80px #b2e19230,0 0 60px #b2e19222}}canvas{width:100%;height:110px;display:block;margin:20px 0;background:#0d191b;border-radius:5px}footer{border-top:1px solid var(--line);padding:30px 0;margin-top:60px;font-size:11px;color:var(--muted)}.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.foot div{display:flex;gap:20px}.noscript{padding:20px;background:#513a23;color:#fff}.filter{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 0}.filter button{font-size:12px;border-radius:30px;padding:10px 16px}.filter button[aria-pressed=true]{background:var(--mint);color:#162b20}.empty{padding:20px}.tool-card[hidden],section[hidden]{display:none}@media(max-width:1000px){.tool-layout{grid-template-columns:minmax(0,1fr) 220px;gap:20px}.nav{padding-top:20px;padding-bottom:20px;align-items:flex-start;flex-direction:column;gap:15px}.hero{gap:30px}.tool-grid{grid-template-columns:repeat(2,1fr)}.related .tool-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.wrap{padding:0 20px}.hero{grid-template-columns:1fr;padding:35px 0}.hero h1{font-size:58px}.instrument-art{display:none}.strip{font-size:9px;flex-wrap:wrap;gap:12px}.nav{min-height:85px}.nav nav{gap:16px;font-size:12px}.tool-layout{grid-template-columns:1fr}.sidebar{margin-top:10px;padding:24px;background:#17231f;border:1px solid #3e5442;border-radius:8px}.sidebar img{height:150px;float:right;width:35%;margin:0 0 10px 20px}.sidebar a.button{max-width:260px}.tool-app{padding:20px}.tool-header h1{font-size:38px}.journey{grid-template-columns:1fr;padding:25px;gap:10px}.controls{gap:12px}.field{min-width:125px}.related .tool-grid{grid-template-columns:1fr}.tool-grid{gap:12px}.tool-card{padding:20px;min-height:235px}.tool-card h3{font-size:18px}.section-title h2{font-size:26px}.section-title{margin-top:35px}.result strong{font-size:38px}}@media(max-width:420px){.tool-grid{grid-template-columns:1fr}.tool-card{min-height:200px}.hero h1{font-size:49px}.tool-app{padding:16px}.controls .field{min-width:105px}.actions button{flex:1}.keyboard{gap:2px}.keyboard button{font-size:8px}.brand{font-size:11px}.sidebar img{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.fret.chord-tone{box-shadow:inset 0 0 0 2px #d8a977}.fret.root{box-shadow:none}