:root{color:#e9f4ff;font-synthesis:none;background:#060d1e;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 54% 37%,#142b50 0,#0b1831 39%,#060d1e 78%);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}.shell{flex-direction:column;width:min(100%,1680px);min-height:100vh;margin:auto;padding:0 clamp(18px,3.8vw,70px);display:flex}.layout{flex:1;align-items:center;gap:clamp(20px,3vw,52px);min-height:calc(100vh - 65px);padding:clamp(18px,3vh,36px) 0;display:flex;position:relative}.layout:after{content:"";z-index:6;pointer-events:none;background:linear-gradient(#0000,#7dc8f080 20%,#b0e0ffd1 50%,#7dc8f080 80%,#0000);width:2px;height:188px;position:absolute;top:50%;right:-2px;transform:translateY(-50%);box-shadow:0 0 12px #61b5e64d}.layout[data-panel-side=left]:after{left:-2px;right:auto}.layout.is-panel-open:after{right:0}.layout[data-panel-side=left].is-panel-open:after{left:0;right:auto}.stage-section{flex:auto;justify-content:center;align-items:center;min-width:0;display:flex}.stage-frame{aspect-ratio:1;perspective:1100px;background:#081126;width:min(100%,min(88vh,1000px));position:relative;box-shadow:0 40px 110px #02071580,0 0 0 1px #4870a12d}#petal-canvas{object-fit:contain;width:100%;height:100%;display:block}.stage-frame.has-hover-tilt #petal-canvas{opacity:0;pointer-events:none;position:absolute;inset:0}.three-stage-canvas{z-index:1;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.stage-corner{z-index:2;pointer-events:none;opacity:.7;width:19px;height:19px;position:absolute}.stage-corner-tl{border-top:1px solid #9bcfff;border-left:1px solid #9bcfff;top:0;left:0}.stage-corner-tr{border-top:1px solid #9bcfff;border-right:1px solid #9bcfff;top:0;right:0}.stage-corner-bl{border-bottom:1px solid #9bcfff;border-left:1px solid #9bcfff;bottom:0;left:0}.stage-corner-br{border-bottom:1px solid #9bcfff;border-right:1px solid #9bcfff;bottom:0;right:0}.stage-caption{z-index:2;letter-spacing:.17em;color:#a5bed9;pointer-events:none;text-shadow:0 1px 8px #061124;align-items:center;gap:10px;font-size:9px;font-weight:650;display:flex;position:absolute;bottom:20px;left:24px}.live-indicator{background:#6ad7ff;border-radius:100%;width:6px;height:6px;box-shadow:0 0 10px #6ad7ff}.control-panel{opacity:0;pointer-events:none;scrollbar-width:thin;scrollbar-color:#40627b transparent;flex:0 0 0;align-self:center;width:0;max-height:calc(100vh - 104px);padding:0;transition:flex-basis .32s,width .32s,opacity .2s,padding .32s;overflow:auto}.layout.is-panel-open .control-panel{opacity:1;pointer-events:auto;-webkit-backdrop-filter:blur(26px)saturate(165%);background:linear-gradient(145deg,#cdedff26,#5f97ca17 34%,#091830ad 100%);border:1px solid #bce0ff40;border-radius:24px;flex-basis:clamp(310px,29vw,380px);width:clamp(310px,29vw,380px);padding:20px 18px 18px;box-shadow:inset 0 1px #ffffff6b,inset 0 0 0 1px #b6dfff12,0 24px 80px #00051280,0 0 34px #5ab5f41f}.layout[data-panel-side=left] .control-panel{order:-1}.panel-open{z-index:7;color:#c8f0ff;-webkit-backdrop-filter:blur(22px)saturate(175%);background:linear-gradient(145deg,#def4ff38,#427eb426 46%,#06142ab8);border:1px solid #c4e7ff57;border-right:0;border-radius:17px 0 0 17px;place-items:center;width:48px;height:66px;font-size:27px;line-height:1;transition:right .32s,left .32s,filter .2s,background .2s;display:grid;position:absolute;top:50%;right:0;transform:translateY(-50%);box-shadow:inset 0 1px #ffffff8f,inset 0 0 0 1px #c1e4ff14,0 10px 34px #0008166b,0 0 24px #59bcf61f}.layout[data-panel-side=left] .panel-open{border-left:0;border-right:1px solid #c4e7ff57;border-radius:0 17px 17px 0;left:0;right:auto}.panel-open:hover{filter:brightness(1.18)}.panel-open:active{filter:brightness(1.3)}.layout.is-panel-open .panel-open{opacity:1;pointer-events:auto;right:clamp(310px,29vw,380px)}.layout[data-panel-side=left].is-panel-open .panel-open{left:clamp(310px,29vw,380px);right:auto}.panel-toolbar{justify-content:flex-end;gap:8px;margin-bottom:8px;display:flex}.panel-toolbar button{color:#d4efff;-webkit-backdrop-filter:blur(14px)saturate(150%);background:linear-gradient(145deg,#dcf3ff29,#28507a2e);border:1px solid #c1e2ff3d;border-radius:12px;width:36px;height:32px;font-size:17px;box-shadow:inset 0 1px #ffffff4d,0 5px 16px #00071333}.panel-toolbar button:hover{background:#1b4168;border-color:#86c7ed}.panel-toolbar button:focus-visible,.panel-open:focus-visible,.control-button:focus-visible,.record-button:focus-visible,.playback-actions button:focus-visible,.download-link:focus-visible{outline-offset:3px;outline:2px solid #9de2ff}.divider{background:linear-gradient(90deg,#6e9bcc60,#0000);height:1px;margin:22px 0}.control-group{margin:0 0 25px}.control-group h2{letter-spacing:.19em;color:#b7cce2;align-items:center;gap:14px;margin:0 0 17px;font-size:10px;font-weight:690;display:flex}.control-group h2 span{font-variant-numeric:tabular-nums;color:#6b9bc2;font-weight:500}.source-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.control-button{color:#e2f0ff;white-space:nowrap;-webkit-backdrop-filter:blur(12px)saturate(150%);background:linear-gradient(145deg,#d4f0ff1f,#1d3b5e47);border:1px solid #c1e2ff38;border-radius:14px;min-height:43px;padding:8px 11px;font-size:12px;font-weight:570;transition:background .18s,border .18s;box-shadow:inset 0 1px #ffffff40}.control-button:hover:not(:disabled),.control-button.is-active{background:linear-gradient(145deg,#85cfff3d,#255b8f6b);border-color:#9edcff94;box-shadow:inset 0 1px #ffffff7a,0 0 20px #59bcf621}.source-detail{color:#85a6c9;text-overflow:ellipsis;white-space:nowrap;min-height:34px;padding:11px 0 4px;font-size:12px;overflow:hidden}.playback-actions{gap:18px;margin-top:5px;display:flex}.playback-actions button{color:#b4d4eb;text-underline-offset:4px;background:0 0;border:0;padding:5px 0;font-size:12px;-webkit-text-decoration:underline #6e91ad;text-decoration:underline #6e91ad}.range-heading{color:#b9ccdc;justify-content:space-between;font-size:12px;display:flex}.range-heading output{font-variant-numeric:tabular-nums;color:#d9eafa}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:22px;margin:10px 0 22px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#267ac3,#8ce1ff);height:3px}input[type=range]::-moz-range-track{background:linear-gradient(90deg,#267ac3,#8ce1ff);height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#55bded;border:2px solid #dffaff;border-radius:50%;width:14px;height:14px;margin-top:-5.5px;box-shadow:0 0 10px #54c4fa80}input[type=range]::-moz-range-thumb{background:#55bded;border:2px solid #dffaff;border-radius:50%;width:11px;height:11px}.meters{gap:13px;display:grid}.meter{grid-template-columns:63px 1fr 20px;align-items:center;gap:12px;display:grid}.meter span,.meter b{letter-spacing:.13em;color:#7fa0c1;font-size:9px;font-weight:570}.meter b{text-align:right;color:#507a9b}.meter-track{background:#36516d77;height:3px;overflow:hidden}.meter-track i{background:linear-gradient(90deg,#257fdf,#72dfff,#efffff);width:2%;height:100%;display:block;box-shadow:0 0 6px #7ee5ff}.export-group{margin-bottom:8px}.export-meta{color:#9bb5cb;letter-spacing:.03em;justify-content:space-between;align-items:center;margin:0 0 11px;font-size:11px;display:flex}.export-meta strong{color:#80d9ff;letter-spacing:.15em;font-size:10px}.record-button{color:#06182d;letter-spacing:.035em;background:linear-gradient(145deg,#9ee1ffeb,#4aabe2c7);border:1px solid #c1eaffcc;border-radius:16px;justify-content:center;align-items:center;gap:12px;width:100%;height:51px;font-size:13px;font-weight:730;transition:filter .18s,background .18s;display:flex;box-shadow:inset 0 1px #ffffffc2,0 8px 25px #158bc63d}.record-button:hover:not(:disabled){filter:brightness(1.13)}.record-button.is-recording{color:#fce7e7;background:linear-gradient(145deg,#5381a6db,#173451f0);border-color:#ffaeb7c2}.record-icon{background:#123e63;border-radius:50%;width:10px;height:10px}.record-button.is-recording .record-icon{background:#ffa5ac;border-radius:1px}.export-note{color:#819bb4;margin:12px 0 0;font-size:11px;line-height:1.5}.face-group{padding-top:2px}.face-button{width:100%}.download-link{color:#85dcff;text-underline-offset:3px;margin-top:12px;font-size:12px;display:inline-block}.download-link[hidden]{display:none}.message{color:#8fd6f0;min-height:35px;margin:12px 0 0;font-size:11px;line-height:1.45}.message.is-error{color:#ffabae}.footer{color:#6889a8;letter-spacing:.15em;border-top:1px solid #29415c5c;justify-content:space-between;align-items:center;gap:20px;height:46px;font-size:9px;font-weight:560;display:flex}@media (width<=1020px){.layout{gap:24px}.stage-frame{width:min(100%,82vh)}.control-panel{max-height:calc(100vh - 92px)}}@media (width<=760px),(pointer:coarse) and (width<=1024px){:root,html,body,#app{width:100%;height:100%;min-height:100%;overflow:hidden}body{overscroll-behavior:none}.shell{width:100%;height:100dvh;min-height:0;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.layout{width:100%;height:100%;min-height:0;padding:0;display:block;position:absolute;inset:0}.stage-section{width:100%;height:100%;min-height:0;position:absolute;inset:0}.stage-frame{aspect-ratio:auto;width:100%;height:100%;box-shadow:none;background:0 0;margin:0;position:absolute;inset:0;overflow:hidden}.three-stage-canvas{width:100%;max-width:none;height:100%;max-height:none;position:absolute;inset:0;transform:none}.stage-frame:not(.has-hover-tilt) #petal-canvas{width:min(100vw,100dvh);max-width:100vw;height:min(100vw,100dvh);max-height:100dvh;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.stage-corner{display:none}.stage-caption{left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));font-size:9px}.control-panel{z-index:5;top:max(12px,env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right));-webkit-backdrop-filter:blur(28px)saturate(170%);opacity:0;pointer-events:none;background:linear-gradient(145deg,#cdedff2b,#3f6f9d21 36%,#051125d6);border:1px solid #bce0ff47;border-radius:24px;align-self:auto;width:min(86vw,380px);max-height:none;padding:18px 16px;transition:transform .28s,opacity .2s;position:absolute;overflow:auto;transform:translate(calc(100% + 22px));box-shadow:inset 0 1px #ffffff6b,0 20px 70px #0107149e,0 0 32px #5ab5f424}.layout.is-panel-open .control-panel{opacity:1;pointer-events:auto;width:min(86vw,380px);padding:18px 16px;transform:translate(0)}.layout[data-panel-side=left] .control-panel{left:max(10px,env(safe-area-inset-left));right:auto;transform:translate(calc(-100% - 22px))}.layout[data-panel-side=left].is-panel-open .control-panel{transform:translate(0)}.panel-open{top:50%;right:max(0px,env(safe-area-inset-right));width:44px;height:62px}.layout[data-panel-side=left] .panel-open{left:max(0px,env(safe-area-inset-left));right:auto}.layout.is-panel-open .panel-open{right:calc(min(86vw,380px) + max(10px,env(safe-area-inset-right)));left:auto}.layout[data-panel-side=left].is-panel-open .panel-open{left:calc(min(86vw,380px) + max(10px,env(safe-area-inset-left)));right:auto}.layout.is-panel-open:after{right:calc(min(86vw,380px) + max(10px,env(safe-area-inset-right)))}.layout[data-panel-side=left].is-panel-open:after{left:calc(min(86vw,380px) + max(10px,env(safe-area-inset-left)));right:auto}.layout:after{right:max(0px,env(safe-area-inset-right));height:148px}.layout[data-panel-side=left]:after{left:max(0px,env(safe-area-inset-left));right:auto}.footer{display:none}.divider{margin:20px 0}}@media (width<=380px){.source-actions{grid-template-columns:1fr}.footer{letter-spacing:.1em}}@media (prefers-reduced-motion:reduce){.control-panel,.panel-open,.panel-toolbar button{transition:none}}