:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#2c2b28;--muted:#77736b;--paper:#f8f6ef;--paper-deep:#eee8db;--edge:#2c2b282b;--shadow:0 18px 60px #30292029;--panel:#fcfaf4c7;--red:#cc2f4f;--studio-controls-bottom:clamp(16px, 3vw, 32px)}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0}body{color:var(--ink);background:radial-gradient(circle at 14% 10%,#f2b99f2e,#0000 28%),radial-gradient(circle at 84% 15%,#3a8e9824,#0000 25%),linear-gradient(145deg,#ebe5d6 0%,#faf8f1 42%,#ede7dc 100%);font-family:Space Mono,Courier New,monospace;overflow:hidden}button,input,textarea,meter{font:inherit}button{cursor:pointer}.app-shell{place-items:center;min-height:100vh;padding:clamp(10px,2vw,24px);display:grid;position:relative}.studio{background:linear-gradient(#ffffff8a 1px, transparent 1px), linear-gradient(90deg, #ffffff61 1px, transparent 1px), var(--paper);width:min(100%,1180px);height:min(720px,100vh - clamp(20px,4vw,48px));min-height:560px;box-shadow:var(--shadow);isolation:isolate;background-size:34px 34px,34px 34px,auto;border:1px solid #2b272138;position:relative;overflow:hidden}#stage,#recordingCanvas{width:100%;height:100%;position:absolute;inset:0}#stage{z-index:1}#recordingCanvas{display:none}.paper-grain{z-index:2;pointer-events:none;opacity:.34;mix-blend-mode:multiply;background-image:radial-gradient(circle at 20% 30%,#564b3c24 0 1px,#0000 1.6px),radial-gradient(circle at 62% 74%,#5c52421a 0 1px,#0000 1.8px),linear-gradient(115deg,#0000 0 44%,#756b580f 44% 45%,#0000 45% 100%);background-size:22px 26px,31px 29px,9px 9px;position:absolute;inset:0}.brand-mark{z-index:4;color:#1f1e1bd1;opacity:0;gap:3px;max-width:min(440px,52vw);transition:opacity .18s,transform .18s;display:grid;position:absolute;top:clamp(22px,4vw,46px);left:clamp(22px,4vw,46px);transform:translateY(-6px)}.studio.started .brand-mark{opacity:1;transform:translateY(0)}.brand-input{color:#1f1e1bd1;resize:none;width:min(360px,46vw);min-width:160px;text-shadow:none;background:0 0;border:0;outline:0}.brand-input:focus{text-shadow:none;background:0 0}.brand-title-input{height:31px;padding:0 6px;font-family:DM Serif Display,Georgia,serif;font-size:clamp(18px,1.65vw,26px);line-height:1;overflow:hidden}.brand-subtitle-input{color:#1f1e1b7a;height:25px;padding:0 6px;font-size:clamp(10px,1vw,13px);line-height:1}.camera-card{z-index:6;opacity:0;background:#171615eb;border:1px solid #2a272233;width:min(30vw,280px);min-width:210px;transition:opacity .18s,transform .18s;position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);overflow:hidden;transform:translateY(-10px);box-shadow:0 16px 38px #1e191238}.camera-card.visible{opacity:1;transform:translateY(0)}.camera-preview{aspect-ratio:16/10;object-fit:cover;background:linear-gradient(135deg,#50505047,#0a0a0a9e),#151515;width:100%;display:block;transform:scaleX(-1)}.camera-caption{color:#ffffffa3;text-transform:lowercase;border-top:1px solid #ffffff14;justify-content:space-between;align-items:center;height:30px;padding:0 10px;font-size:10px;display:flex}.camera-caption:before{background:var(--red);content:"";border-radius:50%;width:7px;height:7px}.permission-panel{z-index:7;width:min(620px,100% - 36px);padding:0;transition:opacity .22s,transform .22s,visibility .22s;position:absolute;bottom:clamp(86px,14vh,150px);left:clamp(18px,4vw,46px)}.permission-panel.hidden{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(14px)}.intro-avatar{aspect-ratio:1;object-fit:cover;border:6px solid #fffffff5;border-radius:50%;width:clamp(112px,11vw,152px);margin:0 0 clamp(22px,3vw,34px);display:block;box-shadow:0 14px 34px #2c2b2824}.permission-panel h1{color:#24231f;letter-spacing:0;margin:0;font-family:DM Serif Display,Georgia,serif;font-size:clamp(54px,8vw,104px);line-height:.9;display:grid}.permission-panel h1 span{white-space:nowrap}.permission-panel p{color:#2c2b28ad;letter-spacing:.01em;max-width:390px;margin:18px 0 26px;font-size:clamp(14px,1.4vw,18px);line-height:1.6}.recording-library-panel{z-index:7;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#faf8f194;border:1px solid #2c2b282e;gap:12px;width:min(390px,34vw);max-height:calc(100% - clamp(68px,12vw,144px));padding:14px;transition:opacity .18s,transform .18s,visibility .18s;display:grid;position:absolute;top:clamp(34px,6vw,72px);right:clamp(18px,4vw,46px);box-shadow:0 18px 42px #1e19121c}.studio.started .recording-library-panel{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px)}.recording-library-header{color:#2c2b28b3;text-transform:lowercase;justify-content:space-between;align-items:baseline;gap:12px;font-size:11px;display:flex}.recording-library-header small{color:#2c2b286b;font-size:9px}.recording-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-height:560px;display:grid;overflow:hidden}.recording-card{gap:6px;min-width:0;display:grid}.recording-thumb{aspect-ratio:4/3;background:#f8f6efb8;border:1px solid #2c2b2838;width:100%;overflow:hidden}.recording-thumb video{object-fit:cover;width:100%;height:100%;display:block}.recording-card-meta{color:#2c2b288f;justify-content:space-between;align-items:center;gap:6px;min-width:0;font-size:9px;display:flex}.recording-card-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.recording-card-actions{gap:5px;display:flex}.recording-mini-button{color:#2c2b28b8;background:#fffdf8ad;border:1px solid #2c2b2824;height:22px;padding:0 7px;font-size:9px}.recording-library-empty{color:#2c2b286b;text-align:center;border:1px dashed #2c2b282e;grid-column:1/-1;padding:24px 10px;font-size:10px}.primary-action,.control-button,.icon-button,.back-button{border:1px solid var(--edge);color:var(--ink);background:#fcfaf5d6;transition:background .14s,border-color .14s,color .14s,transform .14s}.primary-action{min-width:108px;height:38px;padding:0 18px}.primary-action:hover,.control-button:hover,.icon-button:hover,.back-button:hover{background:#fffdf8;border-color:#2c2b2857;transform:translateY(-1px)}.back-button{z-index:12;opacity:0;pointer-events:none;border-radius:50%;place-items:center;width:44px;height:44px;padding:0;font-size:23px;line-height:1;transition:opacity .16s,transform .16s;display:grid;position:absolute;top:max(10px,50vh + min(720px,100vh - clamp(20px,4vw,48px))/-2);left:max(10px,50vw - min(100%,1180px)/2 - 64px);transform:translateY(-6px)}.app-shell.studio-started .back-button{opacity:1;pointer-events:auto;transform:translateY(0)}.app-shell.studio-started.ui-hidden .back-button{opacity:0;pointer-events:none;transform:translateY(-6px)}.back-button span{transform:translateY(-1px)}.toolbar{left:clamp(14px,2vw,24px);bottom:var(--studio-controls-bottom);z-index:8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#faf8f1b3;border:1px solid #2c2b282e;align-items:center;gap:8px;max-width:calc(100% - 28px);padding:7px;display:flex;position:absolute}.toolbar,.paper-panel,.waveform-panel,.status-panel{opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;transform:translateY(10px)}.studio.started .toolbar,.studio.started .waveform-panel,.studio.started .status-panel,.studio.started .paper-panel.open{opacity:1;pointer-events:auto;transform:translateY(0)}.studio.started.ui-hidden .camera-card,.studio.started.ui-hidden .waveform-panel,.studio.started.ui-hidden .status-panel,.studio.started.ui-hidden .paper-panel{opacity:0;pointer-events:none}.studio.started.ui-hidden .toolbar{opacity:1;pointer-events:auto;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border-color:#0000;transform:translateY(0)}.studio.started.ui-hidden .toolbar>:not(.hide-ui-button){display:none}.control-button,.icon-button{letter-spacing:.02em;height:30px;padding:0 12px;font-size:11px}.control-button.active{color:#244a6b;background:#e8f3f9db;border-color:#3768966b}.control-button.record.recording{color:#9b1730;background:#ffe8edeb;border-color:#cc2f4f6b}.control-button.active.paper-active{color:#244a6b;background:#e8f3f9db;border-color:#3768966b}.control-button.danger{color:#9b1730;border-color:#cc2f4f47}.recording-preview-panel{z-index:20;opacity:0;pointer-events:none;visibility:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f8f6ef61;place-items:center;padding:clamp(18px,4vw,46px);transition:opacity .18s,visibility .18s;display:grid;position:absolute;inset:0}.recording-preview-panel.open{visibility:visible;opacity:1;pointer-events:auto}.recording-preview-card{background:#faf8f1e6;border:1px solid #2c2b282e;gap:12px;width:min(720px,92%);padding:14px;display:grid;box-shadow:0 24px 70px #1e191238}.recording-preview-header,.recording-preview-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.recording-preview-header span{color:#2c2b28b8;text-transform:lowercase;font-size:11px;display:block}.recording-preview-header small{color:#2c2b2875;font-size:10px}.recording-preview-video{background:#151515;border:1px solid #2c2b2838;width:100%;max-height:min(420px,58vh);display:block}.paper-panel{z-index:9;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#faf8f1d1;border:1px solid #2c2b282e;width:min(420px,100% - 28px);max-height:min(410px,100% - 140px);position:absolute;bottom:clamp(98px,11vw,116px);left:clamp(14px,2vw,24px);overflow:hidden;box-shadow:0 18px 42px #1e191229}.paper-panel-header{color:#2c2b289e;text-transform:lowercase;border-bottom:1px solid #2c2b281f;justify-content:space-between;align-items:center;height:38px;padding:0 10px 0 12px;font-size:10px;display:flex}.paper-close-button{color:#2c2b28b8;background:#fffdf8b3;border:1px solid #2c2b2824;height:24px;padding:0 9px;font-size:10px}.paper-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:340px;padding:10px;display:grid;overflow:auto}.paper-option{color:#2c2b28ad;text-align:left;background:#fffdf880;border:1px solid #2c2b2821;gap:7px;padding:6px;display:grid}.paper-option.active{color:#244a6b;background:#e8f3f9bd;border-color:#37689694}.paper-option.import-option{background:linear-gradient(135deg,#fffdf8b8,#e8f3f98c);border-style:dashed}.paper-option.import-option .paper-preview{color:#2c2b2885;background-color:#fffdf89e;background-image:linear-gradient(#2c2b2814 1px,#0000 1px),linear-gradient(90deg,#2c2b2814 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:14px 14px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;place-items:center;font-family:DM Serif Display,Georgia,serif;font-size:28px;line-height:1;display:grid}.paper-preview{aspect-ratio:1.56;background-position:50%;background-size:cover;border:1px solid #2c2b281f;width:100%;box-shadow:inset 0 0 0 1px #ffffff47}.paper-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:9px;line-height:1.25;overflow:hidden}.paper-import-input{display:none}.status-panel{right:clamp(16px,3vw,32px);bottom:var(--studio-controls-bottom);z-index:8;color:#2c2b28c7;width:min(250px,38vw);min-height:74px;box-shadow:none;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#faf8f1b3;border:1px solid #2c2b282e;align-content:center;gap:8px;padding:7px 12px;display:grid;position:absolute}.waveform-panel{right:calc(clamp(16px,3vw,32px) + min(250px,38vw) + 10px);bottom:var(--studio-controls-bottom);z-index:8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#faf8f1b3;border:1px solid #2c2b282e;grid-template-columns:54px minmax(0,1fr);align-items:stretch;width:min(310px,38vw);padding:7px;display:grid;position:absolute}.waveform-notes{color:#2c2b28c7;background:#f8f6eff0;border:1px solid #191d18b8;border-right:0;align-content:center;justify-items:start;gap:3px;padding:0 8px 0 3px;display:grid}.waveform-notes strong{text-overflow:ellipsis;white-space:nowrap;max-width:42px;font-size:12px;line-height:1.1;overflow:hidden}.waveform-display{background:#f8f6eff0;border:1px solid #191d18b8;width:100%;height:58px;display:block}.status-panel div{grid-template-columns:72px 1fr;align-items:center;gap:10px;display:grid}.label{color:#2c2b2885;text-transform:lowercase;font-size:10px}.status-panel strong{color:#2c2b28db;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;font-weight:700;overflow:hidden}meter{width:100%;height:9px}meter::-webkit-meter-bar{background:#ffffff24;border:0;border-radius:999px}meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#6bb6be,#cc507b,#e9b85c);border-radius:999px}@media (width<=760px){body{overflow:auto}.app-shell{min-height:100svh;padding:0}.studio{border:0;width:100%;height:100svh;min-height:620px}.brand-mark{max-width:52vw;font-size:13px;left:18px}.brand-input{width:min(260px,58vw);min-width:0}.back-button{top:14px;left:10px}.camera-card{width:42vw;min-width:144px;top:12px;right:12px}.permission-panel{bottom:128px}.intro-avatar{border-width:5px;width:96px;margin:0 0 18px}.permission-panel h1{font-size:clamp(36px,12vw,56px)}.recording-library-panel{width:auto;max-height:220px;inset:auto 12px 88px}.recording-library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.toolbar{flex-wrap:wrap;bottom:190px;right:12px}.paper-panel{width:calc(100% - 24px);bottom:270px;left:12px}.paper-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.status-panel{width:42vw;min-width:144px;bottom:12px;right:12px}.waveform-panel{grid-template-columns:46px minmax(0,1fr);width:calc(58vw - 34px);min-width:118px;bottom:12px;right:calc(max(42vw,144px) + 20px)}}