:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#17201c;--ink-2:#25332d;--paper:#f6f0e6;--panel:#fffaf2;--muted:#6b756d;--line:#17201c29;--spruce:#1f5d50;--clay:#bd6044;--brass:#c99732;--blue:#476f91;--shadow:0 24px 70px #121a1733;font-family:Avenir Next,Gill Sans,Trebuchet MS,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--ink);background:repeating-linear-gradient(90deg,#17201c0d 0 1px,#0000 1px 26px),repeating-linear-gradient(0deg,#17201c09 0 1px,#0000 1px 28px),linear-gradient(112deg,#17352f 0 35%,#ede8dc 35% 68%,#dbe7e1 68% 100%);margin:0}button,input,textarea{font:inherit}.shell{place-items:center;min-height:100vh;padding:34px 18px;display:grid}.stage{grid-template-columns:minmax(260px,.78fr) minmax(320px,1.22fr);grid-template-areas:"mast panel""mast voice""mast output";align-items:stretch;gap:18px;width:min(1080px,100%);display:grid}.mast,.panel,.voice-panel,.output{border:1px solid var(--line);box-shadow:var(--shadow)}.mast{min-height:600px;color:var(--paper);background:linear-gradient(150deg,#1f5d50f0,#17201cfa),repeating-linear-gradient(135deg,#fffaf217 0 1px,#0000 1px 18px);flex-direction:column;grid-area:mast;justify-content:space-between;padding:34px;display:flex;position:relative;overflow:hidden}.mast:after{content:"";aspect-ratio:1;background:linear-gradient(45deg,#0000 45%,#c9973257 46% 54%,#0000 55%),linear-gradient(-45deg,#0000 45%,#bd604447 46% 54%,#0000 55%);border:1px solid #f6f0e642;width:46%;position:absolute;bottom:30px;right:30px;transform:rotate(12deg)}.mark{width:70px;height:70px;color:var(--ink);background:var(--paper);box-shadow:9px 9px 0 var(--brass);z-index:1;place-items:center;display:grid;position:relative}.mast-copy{z-index:1;position:relative}.kicker{color:#f0b766;letter-spacing:.12em;text-transform:uppercase;margin:0 0 16px;font-size:.78rem;font-weight:850}h1{letter-spacing:0;max-width:7ch;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(4rem,8vw,7.2rem);line-height:.86}.panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffaf2eb;grid-area:panel;gap:18px;padding:24px;display:grid}.field,.access-field,.age-field{border:0;gap:9px;min-width:0;margin:0;padding:0;display:grid}.field>span,.access-field>span,.age-field legend{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;font-weight:850}.age-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.age-options button{border:1px solid var(--line);cursor:pointer;min-height:46px;color:var(--ink);background:linear-gradient(180deg, #ffffff6b, #fffaf2e6), var(--panel);font-weight:850;transition:transform .16s,background .16s,color .16s,border-color .16s}.age-options button:hover{transform:translateY(-1px)}.age-options .active{color:#fffaf2;background:linear-gradient(135deg, var(--blue), var(--spruce));border-color:#17201c47}textarea{resize:vertical;border:1px solid var(--line);width:100%;min-height:248px;color:var(--ink);background:linear-gradient(180deg, #ffffff80, #fffaf2d6), var(--panel);outline:0;padding:18px;line-height:1.55;box-shadow:inset 0 0 0 1px #ffffff73}textarea:focus,.secret-input:focus-within{border-color:#1f5d508c;box-shadow:0 0 0 3px #1f5d501f}.form-footer{grid-template-columns:minmax(220px,1fr) minmax(170px,.55fr);align-items:end;gap:14px;display:grid}.secret-input{border:1px solid var(--line);background:var(--panel);align-items:center;gap:10px;height:52px;padding:0 14px;display:flex}.secret-input input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0}.launch{cursor:pointer;color:#fffaf2;background:linear-gradient(135deg, var(--ink), var(--spruce));border:1px solid #17201c47;justify-content:center;align-items:center;gap:10px;min-height:52px;font-weight:850;transition:transform .16s,filter .16s,opacity .16s;display:inline-flex}.launch:hover:not(:disabled){filter:saturate(1.06);transform:translateY(-1px)}.launch:disabled{cursor:not-allowed;opacity:.54}.voice-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffaf2e6;grid-area:voice;gap:16px;padding:22px 24px;display:grid}.voice-top,.voice-actions,.text-query{align-items:center;display:flex}.voice-top{justify-content:space-between;gap:14px}.kicker.small{margin-bottom:7px;font-size:.68rem}.voice-actions{gap:9px}.icon-button{border:1px solid var(--line);cursor:pointer;width:44px;height:44px;color:var(--ink);background:var(--panel);place-items:center;transition:transform .16s,color .16s,background .16s,opacity .16s;display:inline-grid}.icon-button:hover:not(:disabled){transform:translateY(-1px)}.icon-button.live{color:#fffaf2;background:var(--clay);border-color:#17201c47}.icon-button:disabled{cursor:not-allowed;opacity:.45}.voice-text{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.voice-text>div{border:1px solid var(--line);background:#ffffff57;min-height:92px;padding:12px}.voice-text span{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:850}.voice-text p{color:var(--ink-2);overflow-wrap:anywhere;margin:8px 0 0;line-height:1.45}.text-query{gap:10px}.text-query input{border:1px solid var(--line);width:100%;min-width:0;height:44px;color:var(--ink);background:var(--panel);outline:0;padding:0 13px}.text-query input:focus{border-color:#1f5d508c;box-shadow:0 0 0 3px #1f5d501f}.output{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffaf2e0;grid-area:output;align-self:end;padding:22px 24px}.status-row,.player{align-items:center;gap:12px;display:flex}.status-row{font-weight:850}.meter{background:#17201c1a;height:9px;margin:18px 0;overflow:hidden}.meter span{background:linear-gradient(90deg, var(--spruce), var(--brass), var(--clay), var(--blue));height:100%;transition:width .42s;display:block}.player{align-items:center}audio{width:100%;min-width:0}.error{color:#8d2f24;margin:12px 0 0;font-weight:700}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=860px){.stage{grid-template-columns:1fr;grid-template-areas:"mast""panel""voice""output"}.mast{min-height:300px}.mast:after{width:170px}h1{font-size:clamp(3.4rem,18vw,5.4rem)}}@media (width<=600px){.shell{padding:18px 12px}.mast,.panel,.output{padding:18px}.form-footer,.voice-text{grid-template-columns:1fr}.voice-top{flex-wrap:wrap;align-items:flex-start}textarea{min-height:220px}}
