:root{--bg:#fff;--surface:#eaf5ff;--surface-strong:#cbe9ff;--ink:#0f1738;--muted:#465574;--faint:#8596b2;--line:#aecef1;--primary:#006fd9;--primary-deep:#1f2d7c;--primary-ink:#fcfcfc;--brand-sky:#45cbf9;--accent:#fbd530;--accent-ink:#321c00;--coral:#fb6254;--mint:#59e0ad;--success:#008451;--success-soft:#dcf6e6;--error:#be2e31;--error-soft:#ffe8e6;--z-sticky:20;--z-popover:30;--ease-out:cubic-bezier(.22, 1, .36, 1)}@supports (color:lab(0% 0 0)){:root{--bg:lab(100% 0 0);--surface:lab(95.9436% -3.31119 -8.56049);--surface-strong:lab(90.701% -6.75187 -18.598);--ink:lab(8.78867% 6.38462 -23.1271);--muted:lab(35.8486% .689015 -20.0038);--faint:lab(61.5318% -1.54385 -16.4434);--line:lab(81.3328% -5.45493 -20.9295);--primary:lab(46.2057% 6.80423 -65.0612);--primary-deep:lab(21.5751% 18.0307 -47.8237);--primary-ink:lab(98.84% .0000298023 -.0000119209);--brand-sky:lab(76.1194% -26.5231 -33.6469);--accent:lab(86.6585% 2.60085 78.3921);--accent-ink:lab(12.8583% 10.5787 23.4847);--coral:lab(62.2207% 59.0146 39.6984);--mint:lab(80.9802% -47.7145 13.5754);--success:lab(48.3359% -42.9992 18.9097);--success-soft:lab(94.6737% -11.1008 4.90838);--error:lab(43.6591% 56.9472 35.2594);--error-soft:lab(93.8761% 10.7374 5.79704)}}*{box-sizing:border-box}html,body{width:100%;height:100%}body{background:var(--bg);color:var(--ink);text-rendering:optimizelegibility;margin:0;font-family:Avenir Next,Avenir,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button,input,textarea{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in oklch, var(--accent) 78%, var(--bg));outline-offset:2px}label:has(input:focus-visible){outline:3px solid color-mix(in oklch, var(--accent) 78%, var(--bg));outline-offset:2px}svg{stroke-width:1.8px;flex:none;width:1rem;height:1rem}.app-shell{grid-template-columns:minmax(20rem,.72fr) minmax(39rem,1.28fr);width:100%;height:100svh;min-height:36rem;display:grid}.brand-panel{isolation:isolate;background:var(--brand-sky);min-width:0;color:var(--ink);flex-direction:column;justify-content:space-between;padding:clamp(1.75rem,4.2vw,4.5rem);display:flex;position:relative;overflow:hidden}.brand-panel:after{z-index:-1;border:3px solid var(--primary-deep);background:var(--accent);content:"";border-radius:50%;width:17rem;height:17rem;position:absolute;bottom:-5rem;right:-5rem}.brand-panel:before{z-index:-1;border:3px solid var(--primary-deep);background:var(--coral);content:"";border-radius:50%;width:7rem;height:7rem;position:absolute;top:18%;right:-2.5rem}.brand-lockup{letter-spacing:-.02em;align-items:center;gap:.7rem;font-size:1rem;font-weight:700;display:flex}.brand-symbol{border:2px solid var(--primary-deep);background:var(--accent);width:2rem;height:2rem;color:var(--accent-ink);box-shadow:2px 2px 0 var(--primary-deep);border-radius:8px;place-items:center;display:grid}.brand-symbol svg{width:1.15rem;height:1.15rem}.brand-message{max-width:30rem}.brand-note,.studio-kicker{color:var(--primary-deep);letter-spacing:.01em;margin:0 0 .75rem;font-size:.78rem;font-weight:700}.brand-message h1{letter-spacing:-.035em;text-wrap:balance;max-width:10ch;margin:0;font-size:4rem;font-weight:750;line-height:.96}.brand-message>p:last-child{max-width:40ch;color:color-mix(in oklch, var(--ink) 82%, var(--brand-sky));text-wrap:pretty;margin:1.5rem 0 0;font-size:.96rem;line-height:1.65}.signal-art{width:min(100%,28rem)}.signal-line{align-items:center;gap:clamp(.2rem,.55vw,.45rem);height:5rem;display:flex}.signal-line span{background:var(--coral);opacity:.9;transform-origin:50%;border-radius:99px;width:.25rem;min-height:.3rem}.signal-caption{color:color-mix(in oklch, var(--primary-ink) 58%, var(--primary));letter-spacing:.08em;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:.7rem;margin-top:.5rem;font-size:.64rem;font-weight:700;display:grid}.signal-caption i{background:color-mix(in oklch, var(--primary-ink) 18%, transparent);height:1px}.tune-buddy{width:min(100%,17rem);height:10rem;margin-left:.75rem;position:relative}.buddy-body{border:3px solid var(--primary-deep);background:var(--accent);width:14rem;height:7.4rem;box-shadow:7px 7px 0 var(--primary-deep);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:.55rem;display:flex;position:absolute;bottom:1.35rem;left:0;transform:rotate(-2deg)}.buddy-note{z-index:2;border:3px solid var(--primary-deep);background:var(--coral);width:3.4rem;height:3.4rem;color:var(--primary-ink);border-radius:50%;place-items:center;display:grid;position:absolute;top:-.4rem;right:0;transform:rotate(8deg)}.buddy-note svg{width:1.4rem;height:1.4rem}.buddy-eyes{gap:2.5rem;display:flex}.buddy-eyes span{background:var(--primary-deep);border-radius:50%;width:.7rem;height:.9rem}.tune-buddy .signal-line{gap:.24rem;height:2.1rem}.tune-buddy .signal-line span{background:var(--primary);opacity:1;width:.22rem}.buddy-feet{gap:5.1rem;display:flex;position:absolute;bottom:0;left:2.25rem}.buddy-feet span{border:3px solid var(--primary-deep);background:var(--coral);border-radius:50%;width:2.25rem;height:.85rem}.privacy-note{max-width:24rem;color:color-mix(in oklch, var(--ink) 80%, var(--brand-sky));align-items:center;gap:.8rem;font-size:.74rem;line-height:1.45;display:flex}.privacy-note>svg{width:1.3rem;height:1.3rem;color:var(--primary-deep)}.privacy-note span{flex-direction:column;display:flex}.privacy-note strong{color:var(--ink);font-size:.78rem;font-weight:700}.studio-panel{background:var(--bg);grid-template-rows:auto minmax(0,1fr) auto;gap:1.15rem;min-width:0;min-height:0;padding:clamp(1.5rem,3vw,2.8rem) clamp(1.5rem,4vw,4.5rem) 1.25rem;display:grid}.studio-header{justify-content:space-between;align-items:center;gap:1.5rem;display:flex}.studio-header h2{letter-spacing:-.03em;margin:0;font-size:1.45rem;font-weight:680}.studio-kicker{color:var(--coral);margin-bottom:.3rem}.mode-switch{border:2px solid var(--primary-deep);background:var(--surface);border-radius:12px;padding:.25rem;display:flex}.mode-switch button{min-height:2.75rem;color:var(--muted);cursor:pointer;transition:background .18s var(--ease-out), color .18s var(--ease-out);background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;gap:.45rem;padding:.55rem .9rem;font-size:.8rem;font-weight:700;display:inline-flex}.mode-switch button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 var(--primary-deep)}.studio-content,.workflow-grid,.composer-form,.output-stage{min-height:0}.workflow-grid{grid-template-columns:minmax(18rem,1.06fr) minmax(17rem,.94fr);gap:clamp(1rem,2.2vw,2.25rem);height:100%;display:grid}.composer-form{flex-direction:column;gap:clamp(.7rem,1.3vh,1rem);display:flex}.form-heading{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.form-heading h2,.output-stage h2{letter-spacing:-.015em;margin:0;font-size:1rem;font-weight:720}.form-heading p,.output-stage p{max-width:43ch;color:var(--muted);margin:.3rem 0 0;font-size:.76rem;line-height:1.45}.text-action,.icon-button{color:var(--primary);cursor:pointer;background:0 0;border:0}.text-action{flex:none;padding:.15rem 0;font-size:.72rem;font-weight:700}.text-action:hover{color:var(--primary-deep)}.field-group{flex-direction:column;gap:.42rem;display:flex}.field-group label,.style-fieldset legend{color:var(--ink);font-size:.73rem;font-weight:720}.label-row{justify-content:space-between;align-items:center;display:flex}.counter{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.68rem}.counter.is-over{color:var(--error)}.message-field{flex:auto;min-height:6rem}.message-field textarea{resize:none;border:2px solid var(--line);background:var(--surface);width:100%;min-height:5.3rem;color:var(--ink);border-radius:12px;flex:auto;padding:.85rem .95rem;font-size:.88rem;line-height:1.55;transition:border-color .16s,background .16s}.message-field textarea:hover,.password-wrap:hover{border-color:color-mix(in oklch, var(--primary) 45%, var(--line))}textarea::placeholder,input::placeholder{color:color-mix(in oklch, var(--ink) 58%, var(--bg));opacity:1}.password-wrap{border:2px solid var(--line);background:var(--surface);min-height:2.9rem;color:var(--muted);border-radius:10px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:0 .55rem 0 .8rem;transition:border-color .16s;display:grid}.password-wrap:focus-within{border-color:var(--primary)}.password-wrap input{min-width:0;height:100%;color:var(--ink);background:0 0;border:0;outline:0;font-size:.82rem}.icon-button{border-radius:8px;place-items:center;width:2.75rem;height:2.75rem;transition:background .16s,color .16s;display:inline-grid}.icon-button:hover{background:var(--surface-strong);color:var(--primary-deep)}.password-toggle{color:var(--muted)}.style-fieldset{border:0;min-width:0;margin:0;padding:0}.style-fieldset legend{margin-bottom:.45rem}.style-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:.38rem;display:grid}.style-option{border:2px solid var(--line);background:var(--bg);min-width:0;min-height:2.75rem;color:var(--muted);cursor:pointer;border-radius:9px;justify-content:center;align-items:center;gap:.38rem;padding:.45rem;font-size:.69rem;font-weight:650;transition:border-color .16s,background .16s,color .16s;display:flex}.style-option:hover{border-color:color-mix(in oklch, var(--primary) 45%, var(--line));color:var(--ink)}.style-option:has(input:checked){border-color:var(--primary-deep);background:var(--accent);color:var(--accent-ink)}.style-option input{width:.78rem;height:.78rem;accent-color:var(--primary);margin:0}.primary-button,.secondary-button{cursor:pointer;min-height:2.9rem;transition:transform .16s var(--ease-out), background .16s ease, color .16s ease;border-radius:10px;justify-content:center;align-items:center;gap:.55rem;padding:.7rem 1rem;font-size:.8rem;font-weight:720;text-decoration:none;display:inline-flex}.primary-button{border:2px solid var(--primary-deep);background:var(--primary);color:var(--primary-ink);box-shadow:0 4px 0 var(--primary-deep)}.primary-button:hover:not(:disabled){background:color-mix(in oklch, var(--primary) 88%, var(--accent));box-shadow:0 3px 0 var(--primary-deep);transform:translateY(1px)}.primary-button:active:not(:disabled),.secondary-button:active{box-shadow:none;transform:translateY(4px)}.primary-button:disabled{cursor:wait;opacity:.7}.secondary-button{border:2px solid var(--primary-deep);background:var(--bg);min-height:2.75rem;color:var(--primary-deep)}.secondary-button:hover{border-color:color-mix(in oklch, var(--primary) 45%, var(--line));background:var(--surface)}.notice{min-height:1rem;color:var(--muted);text-align:center;font-size:.68rem;line-height:1.35}.notice-error{color:var(--error);font-weight:650}.notice-success{color:var(--success);font-weight:650}.spin{animation:.9s linear infinite spin}.output-stage{border:2px solid var(--primary-deep);background:var(--surface);border-radius:14px;justify-content:center;align-items:center;padding:clamp(1.25rem,2.5vw,2.4rem);display:flex;position:relative;overflow:hidden}.empty-output,.decoded-output:not(.has-message){text-align:center;flex-direction:column;gap:1.35rem}.empty-output:before,.decoded-output:not(.has-message):before{border:1px solid var(--line);content:"";border-radius:50%;width:14rem;height:14rem;position:absolute;top:-6rem;right:-6rem}.empty-glyph{border:3px solid var(--primary-deep);background:var(--coral);width:5.25rem;height:5.25rem;color:var(--primary-ink);box-shadow:4px 4px 0 var(--primary-deep);border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.empty-glyph>svg{z-index:2;width:1.6rem;height:1.6rem;position:relative}.glyph-rings,.glyph-rings span{border-radius:50%;position:absolute;inset:0}.glyph-rings span{border:1px solid color-mix(in oklch, var(--accent) 45%, transparent);opacity:.28}.glyph-rings span:nth-child(2){transform:scale(1.28)}.glyph-rings span:nth-child(3){transform:scale(1.56)}.empty-output.is-working .glyph-rings span{animation:ring 3s var(--ease-out) infinite}.empty-output.is-working .glyph-rings span:nth-child(2){animation-delay:1s}.empty-output.is-working .glyph-rings span:nth-child(3){animation-delay:2s}.empty-output.is-working .empty-glyph{background:var(--primary)}.waveform{justify-content:center;align-items:center;gap:2px;width:100%;height:3.3rem;display:flex}.waveform span{background:color-mix(in oklch, var(--primary) 18%, var(--line));border-radius:99px;width:2px;max-height:100%;transition:background .1s linear}.waveform span.is-played{background:var(--primary)}.song-result{text-align:center;flex-direction:column;justify-content:space-between}.result-topline{justify-content:space-between;align-items:center;width:100%;display:flex}.result-status{color:var(--success);align-items:center;gap:.38rem;font-size:.7rem;font-weight:720;display:inline-flex}.result-status svg{width:.85rem;height:.85rem}.album-mark{aspect-ratio:1;border:3px solid var(--primary-deep);background:var(--coral);width:clamp(5.5rem,8vw,7rem);color:var(--primary-ink);box-shadow:5px 5px 0 var(--primary-deep);border-radius:12px;place-items:center;display:grid;position:relative;overflow:hidden}.album-mark svg{opacity:.34;width:62%;height:62%}.album-mark span{letter-spacing:.08em;font-size:.68rem;font-weight:750;position:absolute;bottom:.55rem;right:.65rem}.album-tide{background:var(--brand-sky);color:var(--primary-deep)}.album-signal{background:var(--accent);color:var(--accent-ink)}.album-lullaby{background:var(--mint);color:var(--primary-deep)}.song-heading p,.decoded-copy>p{color:var(--primary);font-size:.68rem;font-weight:720}.song-heading h2{margin-top:.3rem;font-size:1.35rem}.player-row{align-items:center;gap:.65rem;width:100%;display:flex}.play-button{border:2px solid var(--primary-deep);background:var(--coral);width:2.8rem;height:2.8rem;color:var(--primary-ink);cursor:pointer;transition:background .16s ease, transform .16s var(--ease-out);border-radius:50%;flex:none;place-items:center;display:grid}.play-button:hover{background:var(--primary-deep);transform:scale(1.04)}.play-button svg{width:1.05rem;height:1.05rem}.player-time{color:var(--muted);font-size:.68rem}.tabular{font-variant-numeric:tabular-nums}.player-rule{background:var(--line);flex:auto;height:1px}.file-facts{color:var(--muted);justify-content:center;align-items:center;gap:.6rem;font-size:.64rem;font-weight:720;display:flex}.file-facts span+span:before{color:var(--faint);content:"·";margin-right:.6rem}.result-actions{gap:.55rem;width:100%;display:flex}.result-actions>*{flex:auto}.drop-zone{border:2px dashed color-mix(in oklch, var(--primary) 55%, var(--line));background:var(--surface);min-height:8.5rem;color:var(--muted);cursor:pointer;text-align:center;border-radius:12px;flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:.4rem;padding:1rem;transition:border-color .16s,background .16s;display:flex}.drop-zone:hover,.drop-zone.is-dragging{border-color:var(--primary);background:color-mix(in oklch, var(--primary) 7%, var(--bg))}.drop-zone.has-file{border-style:solid;border-color:color-mix(in oklch, var(--success) 55%, var(--line));background:var(--success-soft)}.drop-zone input{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.drop-zone svg{width:1.55rem;height:1.55rem;color:var(--primary);margin-bottom:.15rem}.drop-zone strong{max-width:90%;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.drop-zone span{font-size:.68rem}.decoded-output.has-message{background:var(--primary-deep);color:var(--primary-ink);text-align:left;flex-direction:column;justify-content:space-between}.decoded-output.has-message .result-status{color:var(--accent)}.decoded-output.has-message .icon-button{color:var(--primary-ink)}.decoded-output.has-message .icon-button:hover{background:color-mix(in oklch, var(--primary-ink) 12%, transparent)}.message-seal{background:var(--accent);width:3.25rem;height:3.25rem;color:var(--accent-ink);box-shadow:3px 3px 0 var(--coral);border-radius:50%;place-items:center;display:grid}.message-seal svg{width:1.25rem;height:1.25rem}.decoded-copy{width:100%}.decoded-copy>p{color:var(--accent)}.decoded-copy h2{max-height:9.2rem;color:var(--primary-ink);text-wrap:pretty;white-space:pre-wrap;font-size:clamp(1.15rem,2.2vw,1.75rem);font-weight:580;line-height:1.35;overflow:auto}.copy-confirmation{color:color-mix(in oklch, var(--primary-ink) 62%, var(--primary));font-size:.68rem}.lock-glyph{background:var(--surface-strong);color:var(--primary)}.decode-steps{color:var(--muted);align-items:center;gap:.75rem;font-size:.64rem;font-weight:650;display:flex}.decode-steps span{align-items:center;gap:.3rem;display:inline-flex}.decode-steps strong{background:var(--surface-strong);width:1.25rem;height:1.25rem;color:var(--primary);border-radius:50%;place-items:center;font-size:.58rem;display:grid}.studio-footer{color:var(--muted);justify-content:space-between;align-items:center;font-size:.64rem;display:flex}.studio-footer span:first-child{align-items:center;gap:.35rem;display:inline-flex}.studio-footer svg{width:.8rem;height:.8rem;color:var(--success)}@keyframes ring{0%{opacity:0;transform:scale(.72)}25%{opacity:.55}to{opacity:0;transform:scale(1.65)}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:68rem){.app-shell{grid-template-columns:minmax(17rem,.58fr) minmax(34rem,1.42fr)}.brand-message h1{font-size:3.4rem}.studio-panel{gap:.85rem;padding:1.5rem 1.7rem 1rem}.workflow-grid{gap:1rem}.output-stage{padding:1.25rem}}@media (max-width:52rem){.app-shell{grid-template-rows:7.5rem minmax(0,1fr);grid-template-columns:1fr}.brand-panel{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1.15rem 1.5rem;display:grid}.brand-panel:before,.brand-panel:after,.signal-art,.tune-buddy,.brand-message>p,.brand-note{display:none}.brand-message{max-width:none}.brand-message h1{max-width:none;font-size:1.75rem;line-height:1.05}.privacy-note{max-width:12rem}.privacy-note span{display:none}.privacy-note>svg{width:1.4rem;height:1.4rem}}@media (max-width:44rem),(orientation:landscape) and (max-height:32rem) and (max-width:64rem){html,body{height:auto;min-height:100%}body{overscroll-behavior-y:contain;overflow:hidden auto}.app-shell{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);height:auto;min-height:100svh}.brand-panel{padding:max(.8rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .8rem max(1rem, env(safe-area-inset-left));grid-template-columns:auto minmax(0,1fr);gap:.75rem}.brand-panel:before,.brand-panel:after,.signal-art,.tune-buddy,.brand-message>p,.brand-note,.privacy-note{display:none}.brand-lockup{font-size:.88rem}.brand-message h1{font-size:1.2rem;line-height:1.1}.studio-panel{min-height:0;padding:1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));grid-template-rows:auto auto auto;gap:1rem;display:grid}.studio-header{z-index:var(--z-sticky);background:color-mix(in oklch, var(--bg) 94%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-direction:column;align-items:stretch;gap:.75rem;margin:-1rem -1rem 0;padding:.9rem 1rem .15rem;position:sticky;top:0}.studio-header h2{font-size:1.05rem}.studio-kicker{display:none}.mode-switch{width:100%}.mode-switch button{flex:50%;min-height:2.75rem;padding:.45rem .65rem;font-size:.78rem}.workflow-grid{grid-template-columns:1fr;height:auto}.workflow-grid>.output-stage.empty-output,.workflow-grid>.decoded-output:not(.has-message),.workflow-grid.has-output>.composer-form{display:none}.composer-form{gap:.85rem}.form-heading p{margin-top:.15rem}.message-field{flex:none;min-height:9rem}.message-field textarea{resize:vertical;min-height:8.4rem;padding:.8rem .85rem;font-size:1rem}.password-wrap,.primary-button,.secondary-button,.text-action,.icon-button,.play-button{min-height:2.75rem}.password-wrap input{font-size:1rem}.icon-button,.play-button{min-width:2.75rem}.text-action{align-items:center;margin:-.5rem;padding:.5rem;display:inline-flex}.style-option{min-height:2.75rem;padding:.32rem;font-size:.64rem}.style-option input{display:none}.drop-zone{min-height:9rem}.output-stage{min-height:28rem;padding:1.25rem}.song-result,.decoded-output.has-message{gap:1.15rem}.decoded-copy h2{max-height:none}.result-actions{flex-wrap:wrap}.result-actions>*{min-width:min(100%,8rem)}.studio-footer span:last-child{display:none}}@media (max-width:23rem){.style-options{grid-template-columns:repeat(2,minmax(0,1fr))}.form-heading{align-items:center}}@media (pointer:coarse){.mode-switch button,.style-option,.primary-button,.secondary-button,.text-action,.icon-button,.play-button,.drop-zone{min-height:2.75rem}.icon-button,.play-button{min-width:2.75rem}}@media (max-height:45rem) and (min-width:44.01rem){.brand-panel{padding-top:1.5rem;padding-bottom:1.5rem}.signal-art,.tune-buddy{display:none}.brand-message h1{font-size:2.6rem}.brand-message>p:last-child{margin-top:.8rem}.studio-panel{gap:.6rem;padding-top:1rem}.composer-form{gap:.5rem}.message-field textarea{min-height:4.5rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}