:root{color:#f7f7f7;font-synthesis:none;text-rendering:optimizelegibility;background:#111;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at 15% 0,#40ff8214,#0000 32rem),#111;min-height:100vh}button,input{font:inherit}button{color:inherit}.app{width:min(1440px,100%);min-height:100vh;margin:0 auto;padding:28px clamp(16px,3vw,48px) 44px}.topbar{justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px;display:flex}.eyebrow{color:#66ff9d;letter-spacing:.15em;margin:0 0 8px;font-size:11px;font-weight:800}h1{letter-spacing:-.045em;margin:0;font-size:clamp(28px,4vw,48px);line-height:1}.record-button,.clear-button,.segment-control button{cursor:pointer;border:0;border-radius:12px;transition:transform .15s,background .15s,opacity .15s}.record-button{color:#07170d;background:#66ff9d;padding:13px 18px;font-weight:800}.record-button:hover,.clear-button:hover:not(:disabled),.segment-control button:hover{transform:translateY(-1px)}.workspace{grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:20px;display:grid}.stage{background:#00a000;border:1px solid #ffffff24;border-radius:18px;outline:none;width:100%;position:relative;overflow:hidden;box-shadow:0 24px 80px #00000057;container-type:inline-size}.stage--wide{aspect-ratio:16/9}.stage--vertical{aspect-ratio:9/16;justify-self:center;width:min(100%,520px)}.chat-stack{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.42em;width:40%;max-height:72%;font-size:clamp(16px,1.67cqw,32px);display:flex;position:absolute;bottom:18.5%;left:4.5%}.stage--vertical .chat-stack{width:78%;font-size:clamp(17px,4.8cqw,25px);bottom:12%}.chat-bubble{color:#050505;letter-spacing:-.025em;white-space:pre-wrap;overflow-wrap:anywhere;filter:none;width:fit-content;min-width:1.8em;max-width:100%;box-shadow:none;background:#fff;border-radius:.9em;padding:.55em .78em .6em;font-weight:700;line-height:1.05;position:relative}.chat-bubble:before,.chat-bubble:after{content:"";display:none;position:absolute;bottom:0}.chat-bubble:nth-last-child(2):before,.chat-bubble:last-child:before{z-index:0;background:#fff;border-bottom-right-radius:.625em;width:.9375em;height:.8125em;display:block;left:-.375em}.chat-bubble:nth-last-child(2):after,.chat-bubble:last-child:after{z-index:1;background:#00a000;border-bottom-right-radius:.46875em;width:.46875em;height:.84375em;display:block;left:-.46875em}.chat-input{cursor:text;outline:none;min-height:1.7em}.chat-input:empty:not(:focus){min-width:0;min-height:0;padding:0}.chat-input:empty:not(:focus):before,.chat-input:empty:not(:focus):after{display:none}.stage-hint{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000057;border:1px solid #ffffff6b;border-radius:999px;padding:9px 12px;font-size:clamp(10px,1.15cqw,14px);font-weight:700;position:absolute;bottom:8%;left:4.5%}.control-panel{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:18px;flex-direction:column;gap:14px;padding:18px;display:flex}.instruction{align-items:flex-start;gap:10px;display:flex}.instruction>span{color:#07170d;background:#66ff9d;border-radius:50%;flex:0 0 24px;place-items:center;width:24px;height:24px;font-size:12px;font-weight:800;display:grid}.instruction p{color:#d0d0d0;margin:2px 0 0;font-size:13px;line-height:1.45}kbd{color:#fff;background:#292929;border:1px solid #555;border-bottom-width:2px;border-radius:4px;padding:2px 5px;font:600 11px/1 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.settings-group{border-top:1px solid #ffffff17;padding-top:12px}.setting-label{color:#9d9d9d;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-size:11px;font-weight:700;display:block}.segment-control{background:#191919;border-radius:12px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.segment-control button{color:#999;background:0 0;padding:9px;font-size:13px;font-weight:700}.segment-control button.active{color:#fff;background:#393939}.toggle-row{cursor:pointer;border-top:1px solid #ffffff17;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;display:flex}.toggle-row span{flex-direction:column;gap:3px;display:flex}.toggle-row strong{font-size:13px}.toggle-row small{color:#888;font-size:10px;line-height:1.3}.toggle-row input{accent-color:#4ce284;cursor:pointer;flex:none;width:40px;height:22px}.clear-button{color:#eee;background:#292929;padding:11px;font-size:12px;font-weight:700}.clear-button:disabled{cursor:default;opacity:.4}.exit-recording{z-index:10;color:#fff;cursor:pointer;opacity:.25;background:#0000004d;border:1px solid #ffffff40;border-radius:999px;padding:8px 12px;font-size:12px;transition:opacity .15s;position:absolute;top:12px;right:12px}.exit-recording:hover{opacity:1}.recording-mode{z-index:1000;top:var(--visual-viewport-top,0);width:100%;max-width:none;height:var(--visual-viewport-height,100dvh);padding:0;position:fixed;left:0;right:0;overflow:hidden}.recording-mode .topbar,.recording-mode .control-panel,.recording-mode .stage-hint{display:none}.recording-mode .workspace{height:100%;display:block}.recording-mode .stage{aspect-ratio:auto;width:100vw;height:100%;box-shadow:none;border:0;border-radius:0}@media (width<=900px){.workspace{grid-template-columns:1fr}.control-panel{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}}@media (width<=620px){.app{padding:18px 12px 28px}.topbar{align-items:flex-start}.eyebrow{font-size:9px}h1{font-size:27px}.record-button{padding:10px 12px;font-size:11px}.stage{border-radius:12px}.control-panel{display:flex}.chat-stack{width:58%;font-size:clamp(13px,3.3cqw,20px)}.recording-mode .chat-stack{transform-origin:0 100%;gap:.32em;width:82%;max-height:88%;font-size:clamp(15px,4.3cqw,22px);bottom:6%;transform:scale(.86)}.recording-mode .stage:focus-within .chat-stack{bottom:max(14%, calc(72px + env(safe-area-inset-bottom,0px)))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
