:root{font-family:Arial,Helvetica,sans-serif;color:#e9e7e2;background:#161a21;color-scheme:dark;--muted:#a3a8b1;--line:#353b46;--blue:#abc5f6}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:4px}header{height:105px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 5vw}.brand{font-size:38px;color:inherit;text-decoration:none;font-weight:900;letter-spacing:-2px}.brand span{color:var(--blue)}.brand i{display:inline-block;font-size:12px;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:24px;font-style:normal}.local{font-size:12px;color:var(--muted)}.local span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#a4c5b0;margin-right:7px}main{max-width:1500px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 330px;padding:40px 5vw 0;gap:38px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}h1{font-family:Georgia,serif;font-size:36px;font-weight:400;letter-spacing:-1.1px;margin:0 0 10px}p{font-size:13px;color:var(--muted);line-height:1.65;margin:0}h2{font-size:15px;font-weight:500;margin:0}.screen{background:#080a10;border:7px solid #303642;border-radius:9px;overflow:hidden;position:relative;aspect-ratio:4/3;box-shadow:0 15px 35px #0004;max-height:66vh;margin:auto;display:flex;width:100%;align-items:center;justify-content:center}.screen canvas{width:100%;height:100%;object-fit:contain}.screen-label{position:absolute;bottom:17px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:10px;color:#eee9;letter-spacing:1px;pointer-events:none}#dropOverlay{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:#1a254bd9;border:2px dashed var(--blue);font-size:26px}.dragging #dropOverlay{display:flex}.quiet{background:transparent;color:var(--muted);font-size:12px;padding:8px}.quiet:hover{color:#fff}.round{background:#343b49;width:33px;height:33px;border-radius:50%;font-size:14px}.transport{display:flex;justify-content:space-between;align-items:center;padding:14px 0 24px}.transport-left{display:flex;align-items:center;gap:5px}#beatStatus{font-size:11px;color:var(--muted);margin-left:8px}.beat-led{display:inline-block;width:5px;height:5px;background:var(--blue);border-radius:50%;margin-right:7px;transition:box-shadow .1s}.hit .beat-led{box-shadow:0 0 12px 5px #abc5f699}.library-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}h2 span{font-size:11px;color:var(--muted);margin-left:10px}.small{background:#343b49;padding:9px 12px;border-radius:5px;font-size:12px}.roll{display:flex;gap:10px;overflow:auto;min-height:77px;padding:3px}.thumb{position:relative;flex-shrink:0;width:100px;height:73px;background:#252c37;border:2px solid transparent;border-radius:4px;padding:0;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.thumb.active{border-color:var(--blue)}.thumb span{position:absolute;left:5px;bottom:5px;font-size:10px;background:#0008;padding:2px 4px}.privacy{margin:13px 0 24px;font-size:11px}aside{border-left:1px solid var(--line);padding-left:28px}aside section{border-bottom:1px solid var(--line);padding:0 0 23px;margin-bottom:23px}.section-heading{display:flex;justify-content:space-between;margin-bottom:15px}.number{font-family:Georgia,serif;color:#697282;font-size:17px}.primary{background:var(--blue);color:#17263e;width:100%;padding:13px;margin:16px 0 11px;border-radius:5px;font-weight:600;font-size:13px}.primary:hover{background:#c5d7f7}.hint{font-size:11px;line-height:1.65;color:#a3a8b1}.hint strong{font-weight:500;color:#d5dae4}.other-inputs{display:flex;justify-content:space-between;margin:11px -8px 0}#spectrum{width:100%;height:38px;margin-top:10px}#audioStatus{font-size:11px;line-height:1.5;color:#adbcd6;margin-top:6px}.presets{display:flex;gap:6px;margin-bottom:21px}.presets button{background:#252c37;color:#aeb4bf;padding:9px 8px;flex:1;font-size:11px;border-radius:4px}.presets button.selected{background:#43546f;color:#e2ecff}.slider-label{display:flex;justify-content:space-between;font-size:12px;margin:14px 0 6px}output{font-size:11px;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--blue);height:12px;margin:4px 0 0}input[type=checkbox]{accent-color:var(--blue)}.select-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:12px}select{background:#252c37;border:1px solid #414957;border-radius:4px;padding:6px;font-size:11px;color:#d4dae5}.check{display:flex;align-items:center;gap:8px;font-size:12px;margin:14px 0}.aside-footer{font-family:Georgia,serif;font-style:italic;color:#818997;font-size:15px}footer{padding:30px 5vw;display:flex;justify-content:space-between;font-size:10px;color:#808997;letter-spacing:.5px}#player{display:block;width:100%;height:36px;margin-top:12px}#player[hidden]{display:none}.screen:fullscreen{border:none;border-radius:0;width:100vw;height:100vh;max-height:none;background:#000}.screen:fullscreen canvas{object-fit:contain}.screen:fullscreen .screen-label{display:none}@media(max-width:950px){main{grid-template-columns:minmax(0,1fr) 285px;gap:22px;padding:28px 3vw 0}aside{padding-left:20px}.brand i{display:none}h1{font-size:29px}header{padding:0 3vw;height:85px}.intro>.quiet{font-size:0}.intro>.quiet:first-letter{font-size:20px}}@media(max-width:720px){main{display:block;padding:24px 5vw 0}aside{padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}.screen{max-height:none}.local{font-size:10px}header{padding:0 5vw}.brand{font-size:32px}footer{gap:20px;line-height:1.6}h1{font-size:30px}.transport-left{gap:1px}#beatStatus{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}
:root{--introspective:#768dcc;--flexing:#c8aa6e}.mood-folders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.folder{border:1px solid #3c4555;border-top:3px solid var(--introspective);background:#202632;border-radius:5px;padding:12px;transition:background .15s}.folder[data-folder=flexing]{border-top-color:var(--flexing)}.folder.selected{background:#2d384c;outline:1px solid #8094b6}.folder.drop-target{outline:2px dashed #c6d9fb;background:#354861}.folder-select{background:none;padding:0;font-size:14px;text-align:left;width:100%}.folder-select span{display:block;font-size:10px;color:#adb9cf;margin-top:7px}.folder p{font-size:10px;margin-top:8px;line-height:1.5}.folder-add{background:#394558;padding:6px 9px;border-radius:3px;margin-top:10px;font-size:10px}.audio-readout{display:grid;grid-template-columns:85px minmax(0,1fr);gap:12px;margin:15px 0 20px}.audio-readout>div{display:flex;flex-direction:column;gap:6px;justify-content:center}.audio-readout span,.audio-readout small{font-size:10px;color:#a9b5c9}.audio-readout #bpmReadout{font-size:33px;color:#d3def0;font-family:Georgia,serif}.audio-readout #vibeReadout{font-size:12px;color:#d3def0}.audio-readout #gradeSwatch{height:15px;width:70px;border-radius:3px}@media(max-width:450px){.mood-folders{gap:6px}.folder{padding:8px}.folder-select{font-size:12px}.folder p{font-size:9px}}
body.immersive:not(.studio-open){overflow:hidden;background:#000}body.immersive:not(.studio-open)>header,body.immersive:not(.studio-open)>footer{display:none}body.immersive:not(.studio-open) main{display:block;margin:0;padding:0;max-width:none}body.immersive:not(.studio-open) aside,body.immersive:not(.studio-open) .studio>.intro,body.immersive:not(.studio-open) .studio>.transport,body.immersive:not(.studio-open) .studio>.library-heading,body.immersive:not(.studio-open) .studio>.mood-folders,body.immersive:not(.studio-open) .studio>.roll,body.immersive:not(.studio-open) .studio>.privacy{display:none}body.immersive:not(.studio-open) .screen{position:fixed;inset:0;max-height:none;height:100dvh;width:100vw;aspect-ratio:auto!important;border:0;border-radius:0;background:#000}.viewer-tools{position:absolute;left:25px;right:25px;top:22px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5;pointer-events:none}.viewer-tools>*{pointer-events:auto}.viewer-wordmark{font-weight:900;font-size:21px;color:#e4e0d5;text-shadow:0 2px 8px #000;letter-spacing:-1px}.viewer-wordmark small{display:block;font-weight:400;letter-spacing:1px;font-size:8px;margin-top:5px}.viewer-tools details{position:relative}.viewer-tools summary{list-style:none;cursor:pointer;font-size:12px;background:#11151dcc;border:1px solid #ffffff24;padding:11px 16px;border-radius:5px;color:#f0e9dd}.viewer-tools summary::-webkit-details-marker{display:none}.viewer-tools summary:after{content:' ▾'}.viewer-tools summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.style-panel{position:absolute;right:0;top:46px;width:285px;background:#171c25f5;padding:20px;border:1px solid #495261;box-shadow:0 15px 40px #0009;border-radius:5px;max-height:calc(100dvh - 120px);overflow:auto;backdrop-filter:blur(18px)}.style-panel>label:not(.check){font-size:11px;display:block;margin:0 0 8px}.style-panel>select{width:100%;font-size:12px;margin-bottom:18px}.style-panel .small{margin:5px 2px 12px 0}.style-panel .hint{margin-top:5px}#quoteCount{font-size:10px;color:#b7c3d8}.viewer-bottom{position:absolute;left:25px;right:25px;bottom:40px;display:flex;justify-content:space-between;z-index:4}.viewer-bottom .quiet{color:#ddd7ce;background:#10131acc;border:1px solid #ffffff18;border-radius:4px;margin-right:4px;font-size:11px}.viewer-tools,.viewer-bottom,.screen-label{transition:opacity .3s}body.ui-idle:not(.studio-open) [data-controls]{opacity:0;pointer-events:none}body.ui-idle:not(.studio-open) [data-controls] *{pointer-events:none}body.ui-idle:not(.studio-open) .screen{cursor:none}.screen:fullscreen .viewer-tools,.screen:fullscreen .viewer-bottom{display:flex}.screen-label{bottom:15px}.studio-open .viewer-tools{top:12px;left:15px;right:15px}.studio-open .viewer-wordmark{display:none}.studio-open .viewer-bottom{display:none}@media(max-width:520px){.viewer-tools{left:15px;right:15px;top:15px}.viewer-bottom{left:15px;right:15px}.style-panel{width:260px}.viewer-wordmark{font-size:17px}.viewer-bottom .quiet{padding:8px 6px;font-size:10px}}
button:disabled,select:disabled{opacity:.45;cursor:default}
.studio-open .viewer-tools{display:none}.look-controls .style-panel{position:static;width:100%;max-height:none;overflow:visible;padding:18px 0 0;border:0;box-shadow:none;background:none;backdrop-filter:none}.look-controls summary{font-size:12px;color:var(--muted);cursor:pointer}.look-controls .style-panel>label:not(.check){margin-top:14px}.look-controls .style-panel>select{margin-bottom:7px}.look-controls .section-heading{align-items:center}.studio-open aside{max-height:calc(100dvh - 28px);overflow-y:auto;position:sticky;top:14px;padding-right:12px;scrollbar-width:thin}.studio-open .studio{min-width:0}.studio-open .screen{max-height:none}#viewerSettings{background:#141923dd;border:1px solid #ffffff30}main{align-items:start}body.studio-open header{height:76px}body.studio-open main{padding-top:24px}@media(max-width:720px){.studio-open aside{position:static;max-height:none;overflow:visible;padding-right:0}.look-controls .style-panel{width:100%}.library-heading{gap:8px;flex-wrap:wrap}.screen{min-width:0}}
.reactive-controls{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:18px 0}.reactive-controls>label:not(.check){display:block;margin:14px 0 7px;font-size:11px}.reactive-controls>select,.reactive-controls>input[type=date]{width:100%;padding:8px;background:#252c37;color:#d4dae5;border:1px solid #414957;border-radius:4px;font-size:11px}.reactive-controls .hint{margin-top:5px}#reactiveStatus{color:#c6d7f5;margin:14px 0}
#tempoSource,#manualBpm{width:100%;padding:8px;background:#252c37;color:#d4dae5;border:1px solid #414957;border-radius:4px;font-size:12px}.tempo-buttons{display:flex;gap:5px;margin:12px 0}.tempo-buttons button{flex:1;padding:8px 5px}#manualBpm:disabled{opacity:.45}

/* Style cards show the composition before it reaches the canvas. */
.style-heading{margin-top:22px;margin-bottom:12px}.style-heading .hint{margin:0}
.mood-folders{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
button.folder{display:flex;flex-direction:column;text-align:left;min-width:0;padding:10px;border-top-color:var(--style-accent);background:#1c222c;position:relative}
button.folder:hover{background:#252e3b}button.folder.selected{background:#293344;outline:1px solid var(--style-accent)}
button.folder.selected:after{content:'✓';position:absolute;top:16px;right:16px;background:#121820;color:var(--style-accent);border-radius:50%;width:20px;height:20px;text-align:center;line-height:20px;font-size:12px}
button.folder:focus-visible{outline:2px solid #eef3ff;outline-offset:4px}
.folder strong{font-size:13px;margin:12px 2px 6px}.style-description{font-size:11px;line-height:1.55;color:#b4bdcb;margin:0 2px 4px}
.style-preview{height:65px;position:relative;display:block;width:100%;overflow:hidden;background:#101722}
.style-preview i{position:absolute;display:block;background:#748499;bottom:12px;left:12%;width:76%;height:38px;border:1px solid #ffffff24}
.style-preview i:before{content:'';position:absolute;bottom:0;left:12%;height:60%;width:26%;background:#182430;box-shadow:25px 5px 0 #26384b}
.style-preview i:after{content:'';position:absolute;right:15%;top:6px;border-radius:50%;width:9px;height:9px;background:#dce0d0}
.style-preview i:nth-child(n+2){display:none}
[data-folder=flexing] .style-preview{background:#29200d}[data-folder=flexing] .style-preview i{background:#b8934a;left:6%;width:88%;height:47px;bottom:8px}
[data-folder=noir] .style-preview{background:#080808}[data-folder=noir] .style-preview i{filter:grayscale(1);left:29%;width:42%;height:52px;bottom:6px}
[data-folder=scrapbook] .style-preview{background:#393027}[data-folder=scrapbook] .style-preview i{background:#a69272;border:3px solid #e3d5bd;left:8%;width:42%;height:47px;bottom:7px}
[data-folder=scrapbook] .style-preview i:nth-child(2){display:block;left:57%;width:34%;height:23px;bottom:35px}[data-folder=scrapbook] .style-preview i:nth-child(3){display:block;left:57%;width:34%;height:23px;bottom:7px}
[data-folder=neon] .style-preview{background:#0a102a}[data-folder=neon] .style-preview i{background:#6464ad;border-color:#85dfe6;width:39%;left:10%;height:49px;bottom:8px}
[data-folder=neon] .style-preview i:nth-child(2){display:block;left:51%;transform:scaleX(-1)}
[data-folder=kinetic] .style-preview{background:#141b0a}[data-folder=kinetic] .style-preview i{background:#88905f;left:5%;width:58%;height:49px;bottom:8px}
[data-folder=kinetic] .style-preview i:nth-child(2){display:block;left:66%;width:29%;background:#afba7a}
[data-folder=drift] .style-preview{background:#193033}[data-folder=drift] .style-preview i{background:#7b9b9a;left:17%;width:66%;height:30px;bottom:18px}
@media(max-width:450px){.mood-folders{grid-template-columns:repeat(2,minmax(0,1fr))}.style-heading .hint{display:none}.style-description{font-size:10px}}
@media(prefers-reduced-motion:reduce){.folder{transition:none}}
#nextTheme,#viewerTheme{white-space:nowrap}#videoStatus{margin:8px 0}#previewVideo{margin-bottom:12px}
.screen:fullscreen{position:fixed;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;aspect-ratio:auto!important;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
.screen:fullscreen canvas{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;object-fit:fill}
@media(max-width:600px){.transport{flex-wrap:wrap;gap:10px}.viewer-bottom{flex-wrap:wrap;gap:8px}}

#myLines,#titleText{display:block;width:100%;padding:8px;margin-bottom:12px;background:#252c37;color:#d4dae5;border:1px solid #414957;border-radius:4px;font:inherit;font-size:12px;resize:vertical}#myLines:focus-visible,#titleText:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.library-heading>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.transport-left{gap:8px}.tempo-buttons{gap:8px;flex-wrap:wrap}.other-inputs{gap:8px;flex-wrap:wrap}.reactive-controls>button.small,.style-panel .small{margin:6px 8px 12px 0}.viewer-bottom>div{display:flex;gap:8px;flex-wrap:wrap}.viewer-bottom .quiet{margin-right:0}
.about{max-width:1500px;margin:56px auto 0;padding:40px 5vw 8px;border-top:1px solid var(--line);color:#c9ccd3;font-size:14px;line-height:1.65}.about h2{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.5px;color:#e9e7e2;margin:0 0 12px}.about h3{font-size:15px;font-weight:600;color:#e9e7e2;margin:0 0 12px}.about-lead p{max-width:68ch;margin:0}.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;margin:36px 0}.about ol,.about ul{margin:0;padding-left:20px;display:grid;gap:8px}.about li::marker{color:var(--blue)}.about strong{color:#e9e7e2;font-weight:600}.faq{max-width:80ch}.faq details{border-top:1px solid var(--line);padding:14px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;color:#e9e7e2;font-weight:500;list-style-position:outside}.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.faq details p{margin:10px 0 0;max-width:68ch}
@media(max-width:700px){.about{padding:32px 16px 8px;margin-top:40px}.about-grid{grid-template-columns:1fr;gap:28px}.about h2{font-size:24px}}
body.immersive:not(.studio-open) .about{display:none}