:root{--mud-cream:#f4ecd5;--mud-cream-inset:#e8dec2;--mud-ink:#111110;--mud-ink-lift:#25221d;--mud-cream-muted:#a89e8a;--mud-cream-disabled:#7a7363;--mud-media:#0f0d0a;--font-ui:"DotGothic16", sans-serif;--app-max-width:90rem;--space-screen:clamp(16px, 3.25vw, 56px);--space-stack:clamp(16px, 2vw, 28px);--space-card:clamp(16px, 1.6vw, 24px);--space-dock:clamp(16px, 2vw, 28px);--space-grid:12px;--square-tile-min:12.5rem;--space-actions:clamp(10px, 1.2vw, 16px);--project-card-min:32rem;--control-height:clamp(48px, 6vw, 56px);--control-height-primary:clamp(52px, 6.5vw, 64px);--icon-button:clamp(44px, 4.5vw, 52px);--thumb-size:clamp(64px, 6vw, 80px);--border-width:1px;--radius:0px;--disabled-opacity:.45;--font-title:clamp(32px, 4vw, 48px);--font-card-title:clamp(18px, 1.6vw, 22px);--font-body:clamp(15px, 1.2vw, 17px);--font-nav:clamp(13px, 1.15vw, 18px);--font-clock:clamp(15px, 1.3vw, 20px);--font-max:clamp(13px, 1.1vw, 16px);--font-primary:clamp(17px, 1.4vw, 22px);--font-tile:clamp(16px, 1.4vw, 22px);--font-empty:clamp(14px, 1.2vw, 18px);--font-action:clamp(16px, 1.8vw, 24px);--font-meta:clamp(12px, 1vw, 14px);--font-badge:10px}:root,[data-appearance=light]{--bg:var(--mud-cream);--bg-inset:var(--mud-cream-inset);--text:var(--mud-ink);--text-muted:#1111108c;--text-disabled:#11111061;--border:var(--mud-ink);--accent:var(--mud-ink);--on-accent:var(--mud-cream);--control-fill:var(--mud-cream);--selected-fill:#1111101a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}[data-appearance=dark]{--bg:var(--mud-ink);--bg-inset:var(--mud-ink-lift);--text:var(--mud-cream);--text-muted:var(--mud-cream-muted);--text-disabled:var(--mud-cream-disabled);--border:var(--mud-cream);--accent:var(--mud-cream);--on-accent:var(--mud-ink);--control-fill:var(--mud-ink);--selected-fill:#f4ecd51a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}html{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}body{background:var(--bg)}button,input{font:inherit;color:inherit;border-radius:var(--radius)}button{appearance:none;cursor:pointer;background:0 0;border:0;margin:0;padding:0}button:disabled{cursor:default;opacity:var(--disabled-opacity)}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}h1,h2,h3,p{margin:0}.app-root{background:var(--bg);min-height:100dvh;color:var(--text);justify-content:center;display:flex}.app-frame{width:min(100%, var(--app-max-width));min-width:0;max-width:100%;min-height:100dvh;padding-block:env(safe-area-inset-top) env(safe-area-inset-bottom);background:var(--bg);flex-direction:column;display:flex;position:relative}.screen{flex-direction:column;flex:1;min-height:0;display:flex}.screen-scroll{min-height:0;padding:clamp(16px, 3vh, 36px) var(--space-screen) clamp(28px, 5vh, 56px);gap:var(--space-stack);flex-direction:column;flex:1;display:flex;overflow:auto}.screen-header{min-height:var(--icon-button);align-items:center;gap:16px;display:flex}.screen-header h1{font-size:var(--font-title);font-weight:700;line-height:1.1}.screen-header .spacer,.settings-title{flex:1;min-width:8px}.workspace-screen{box-sizing:border-box;width:100%;min-width:0;padding-inline:var(--space-screen);padding-block:clamp(12px,2vw,28px);overflow-y:auto}.workspace-header{flex-wrap:wrap;flex-shrink:0;align-items:center;gap:clamp(8px,1.5vw,20px);min-width:0;padding:0 0 clamp(8px,1.2vh,12px);display:flex}.workspace-header .segment-switch{min-width:0;max-width:100%;height:var(--control-height);flex:12rem}.workspace-stage{flex:1 0 auto;justify-content:start;align-items:start;width:100%;min-width:0;min-height:auto;padding-block:clamp(8px,1.2vh,14px);padding-inline:0;display:flex}.workspace-stage:has(.share-screen){flex:1 1 0;justify-content:stretch;align-items:stretch;min-height:0;display:grid}.booth-stage{justify-content:center;align-self:stretch;align-items:center;width:100%;min-width:0;display:flex}.workspace-notice{flex-shrink:0;min-width:0;padding:0 0 8px}.workspace-dock{flex-direction:column;flex-shrink:0;gap:12px;min-width:0;padding:0;display:flex}.global-seek-bar{flex-shrink:0;width:100%;min-width:0;overflow:visible}.global-seek-bar-track{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;max-width:100%;height:12px;position:relative;overflow:visible}.global-seek-bar-track.is-seekable{cursor:ew-resize;touch-action:none}.global-seek-bar-line{background:var(--border);border-radius:0;height:1px;position:absolute;top:50%;left:0;right:0}.global-seek-bar-playhead{z-index:1;box-sizing:border-box;border:var(--border-width) solid var(--border);background:var(--text);width:8px;height:8px;box-shadow:none;pointer-events:none;border-radius:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon-button,.square-action,.primary-button,.text-button,.segment-item,.tile-menu-item,.dialog-button,.keys-row{border:var(--border-width) solid var(--border);background:var(--control-fill);color:var(--text);letter-spacing:.02em;font-weight:700}.icon-button{width:auto;height:var(--icon-button);min-width:var(--icon-button);font-size:var(--font-nav);flex:none;justify-content:center;align-items:center;padding:0 12px;line-height:1;display:inline-flex}.square-action{min-height:clamp(96px,14vw,148px);font-size:var(--font-action);justify-content:center;align-items:center;display:flex}.primary-button{height:var(--control-height-primary);background:var(--accent);width:100%;color:var(--on-accent);font-size:var(--font-primary)}.text-button{min-height:var(--control-height);width:100%;font-size:var(--font-nav);padding:0 12px}a.text-button{justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.button-row{gap:var(--space-actions);display:flex}.button-row>*{flex:1}.segment-switch{height:var(--icon-button);border:var(--border-width) solid var(--border);max-width:100%;display:flex}.segment-item{border:0;border-right:var(--border-width) solid var(--border);min-width:0;font-size:var(--font-nav);white-space:nowrap;text-overflow:ellipsis;flex:1;padding-inline:8px;overflow:hidden}.segment-item:last-child{border-right:0}.segment-item.is-active{background:var(--accent);color:var(--on-accent)}.status-banner{background:var(--bg-inset);border:var(--border-width) solid var(--border);padding:14px;font-size:14px;font-weight:600}.empty-state{border:var(--border-width) solid var(--border);background:var(--bg);text-align:left;flex-direction:column;gap:12px;padding:clamp(24px,4vw,48px);display:flex}.empty-state h2{font-size:clamp(20px,2vw,28px);font-weight:700}.empty-state p{font-size:var(--font-body);color:var(--text-muted);font-weight:500}.project-actions{gap:var(--space-actions);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.project-list{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--project-card-min)), 1fr));gap:clamp(12px,1.4vw,20px);display:grid}.project-card{border:var(--border-width) solid var(--border);background:var(--bg);text-align:left;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;min-height:0;padding:12px 14px;display:grid}.project-card-open{text-align:left;background:0 0;border:0;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;min-width:0;display:grid}.project-card-thumb{width:var(--thumb-size);height:var(--thumb-size);border:var(--border-width) solid var(--border);background:var(--bg-inset);font-size:var(--font-badge);color:var(--text-muted);justify-content:center;align-items:center;font-weight:700;display:flex}.project-card-body{flex-direction:column;gap:4px;min-width:0;display:flex}.project-card-body h2{font-size:var(--font-card-title);-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;font-weight:700;line-height:1.2;display:-webkit-box;overflow:hidden}.project-card-meta{font-size:var(--font-meta);color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.text-button.project-card-remove{width:auto;min-width:5.75rem;min-height:44px;font-size:var(--font-nav);place-self:center end;padding:0 14px}.clock-row{-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;justify-content:space-between;align-items:center;min-height:36px;font-weight:700;display:flex}.clock-row-current{font-size:var(--font-clock)}.clock-row-current.is-live{color:var(--accent)}.clock-row-max{font-size:var(--font-max);color:var(--text-muted)}.square-grid{display:grid}.square-grid.is-fluid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--square-tile-min)), 1fr));gap:var(--space-grid);flex:none;grid-auto-rows:auto;grid-auto-flow:row;place-content:start;align-items:start;width:100%;min-width:0;max-width:100%;height:max-content}.square-grid.is-fluid>.square-tile,.square-grid.is-fluid>.add-tile,.square-grid.is-fluid>.booth-tile{aspect-ratio:1;align-self:start;width:100%;min-width:0;height:auto;min-height:0}.square-tile,.add-tile,.booth-tile,.minimap-cell{border:var(--border-width) solid var(--border);background:var(--control-fill);width:100%;height:100%;color:var(--text);position:relative;overflow:hidden}.square-tile.is-selected,.booth-tile.is-selected,.minimap-cell.is-selected{background:var(--selected-fill);border-width:2px}.minimap-cell{justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.minimap-cell.is-selected{background:var(--accent);color:var(--on-accent)}.square-tile.is-disabled,.booth-tile.is-off{opacity:.28}.tile-number{font-size:var(--font-tile);font-weight:700;line-height:1;position:absolute;top:6px;left:8px}.tile-key{font-size:var(--font-badge);color:var(--text-muted);pointer-events:none;margin-left:.4em;font-weight:700}@media (hover:none),(pointer:coarse){.tile-key{display:none}}.tile-status{font-size:var(--font-empty);color:var(--text-muted);pointer-events:none;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset:0}.tile-badge{font-size:var(--font-badge);font-weight:700;position:absolute;top:6px;right:8px}.add-tile{justify-content:center;align-items:center;font-size:clamp(18px,38%,32px);font-weight:700;display:flex}.square-tile{--mix-controls-size:clamp(36px, 20cqw, 64px);container:mud-square/inline-size}.square-tile .tile-status{padding-bottom:var(--mix-controls-size)}.mix-controls{inset-inline:0;z-index:2;height:var(--mix-controls-size);opacity:0;pointer-events:none;border-top:var(--border-width) solid var(--border);grid-template-columns:repeat(3,minmax(0,1fr));display:grid;position:absolute;bottom:0}.square-tile:hover .mix-controls,.square-tile:focus-within .mix-controls,.square-tile.is-selected .mix-controls{opacity:1;pointer-events:auto}@media (hover:hover) and (pointer:fine){.square-tile.is-selected:not(:hover):not(:focus-within) .mix-controls{opacity:0;pointer-events:none}}.mix-button{border:0;border-right:var(--border-width) solid var(--border);background:var(--control-fill);width:100%;min-width:0;height:100%;min-height:0;color:var(--text);letter-spacing:.04em;justify-content:center;align-items:center;font-size:clamp(16px,9cqw,26px);font-weight:700;display:flex}.mix-button:last-child{border-right:0}.mix-button.is-on,.loop-button.is-on{background:var(--accent);color:var(--on-accent)}.tile-video{object-fit:cover;background:var(--mud-media);pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.audio-placeholder{padding-bottom:var(--mix-controls-size);background:var(--bg-inset);color:var(--text-muted);font-size:var(--font-empty);pointer-events:none;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset:0}.tile-playhead{background:var(--text);pointer-events:none;z-index:1;width:1px;position:absolute;top:0;bottom:0;left:0}.square-tile.is-recording,.booth-tile.is-recording{border-width:2px}.square-tile audio,.booth-tile audio{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.minimap-cell.has-media:not(.is-selected){background:var(--bg-inset)}.booth-tile{touch-action:none}.booth-tile-hit{z-index:1;color:inherit;touch-action:none;background:0 0;border:0;position:absolute;inset:0}.loop-button{z-index:2;border:var(--border-width) solid var(--border);background:var(--control-fill);min-width:52px;height:28px;min-height:28px;color:var(--text);padding:0 8px;font-size:11px;font-weight:700;position:absolute;bottom:4px;left:4px}.share-screen{grid-template-columns:minmax(16rem,.85fr) minmax(18rem,1fr);align-items:center;gap:clamp(24px,4vw,56px);width:100%;min-width:0;height:100%;min-height:0;display:grid}.share-minimap-wrap{aspect-ratio:1;border:var(--border-width) solid var(--border);background:var(--control-fill);justify-content:center;justify-self:end;align-items:center;width:min(100%,26rem);max-width:100%;padding:8px;display:flex}.share-minimap-wrap .square-grid{width:100%;height:100%}.share-export{flex-direction:column;justify-self:start;gap:12px;width:min(100%,28rem);display:flex}.share-hint{font-size:var(--font-meta);color:var(--text-muted);text-align:left;font-weight:600}.export-options{flex-direction:column;gap:12px;display:flex}.export-options .primary-button.is-ghost{background:var(--control-fill);color:var(--text)}.export-options .primary-button.is-active{background:var(--accent);color:var(--on-accent)}.tile-menu,.dialog-panel{background:var(--bg);border:var(--border-width) solid var(--border);min-width:220px}.tile-menu{z-index:40;flex-direction:column;display:flex;position:fixed}.tile-menu-item{border:0;border-bottom:var(--border-width) solid var(--border);text-align:left;min-height:44px;padding:0 14px;font-size:13px}.tile-menu-item:last-child{border-bottom:0}.dismiss-layer{z-index:39;background:0 0;border:0;position:fixed;inset:0}.overlay{z-index:50;background:var(--bg);justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.dialog-panel{flex-direction:column;gap:14px;width:min(320px,100%);padding:18px;display:flex}.dialog-panel h2{font-size:20px;font-weight:700}.dialog-panel p{color:var(--text-muted);font-size:14px;font-weight:500}.dialog-actions{gap:10px;display:flex}.dialog-button{flex:1;min-height:44px;font-size:13px}.dialog-button.is-primary{background:var(--accent);color:var(--on-accent)}.settings-screen{z-index:30;background:var(--bg);flex-direction:column;display:flex;position:absolute;inset:0}.settings-screen .workspace-header{padding-inline:var(--space-screen);padding-block:clamp(12px,2vh,20px) clamp(8px,1.4vh,16px)}.settings-body{padding:clamp(16px, 3vh, 32px) var(--space-screen) clamp(28px, 5vh, 56px);gap:var(--space-stack);flex-direction:column;max-width:36rem;display:flex;overflow:auto}.settings-label{font-size:var(--font-nav);color:var(--text-muted);font-weight:700}.settings-copy{font-size:var(--font-body);color:var(--text);line-height:1.4}.auth-screen{flex:1;width:100%;max-width:24rem;margin-inline:auto}.auth-screen h1{font-size:var(--font-title);font-weight:700;line-height:1.1}.auth-form{gap:var(--space-stack);flex-direction:column;display:flex}.auth-field{flex-direction:column;gap:8px;display:flex}.auth-label{font-size:var(--font-nav);color:var(--text-muted);font-weight:700}.auth-input{height:var(--control-height);border:var(--border-width) solid var(--border);background:var(--control-fill);width:100%;color:var(--text);letter-spacing:.02em;padding:0 12px;font-weight:700}.auth-input::placeholder{color:var(--text-muted)}.auth-copy{font-size:var(--font-body);color:var(--text-muted);font-weight:500}.auth-legal{padding-top:var(--space-stack);gap:1.5rem;margin-top:auto;display:flex}.auth-legal a{color:var(--text);font-size:var(--font-nav);letter-spacing:.02em;font-weight:700;text-decoration:none}.auth-legal a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.legal-screen{flex-direction:column;flex:1;min-height:0;display:flex}.legal-header{padding:clamp(12px, 2vh, 20px) var(--space-screen) clamp(8px, 1.4vh, 16px);flex-shrink:0;align-items:center;display:flex}.legal-body{min-height:0;padding:clamp(16px, 3vh, 32px) var(--space-screen) clamp(28px, 5vh, 56px);flex:1;overflow:auto}.legal-document{flex-direction:column;gap:1.15em;max-width:42rem;display:flex}.legal-document h1{font-size:var(--font-title);font-weight:700;line-height:1.2}.legal-document h2{font-size:var(--font-card-title);margin-top:.55em;font-weight:700;line-height:1.35}.legal-document h3{font-size:var(--font-body);font-weight:700;line-height:1.45}.legal-document p,.legal-document li{font-size:max(16px, var(--font-body));font-weight:500;line-height:1.65}.legal-document ul{flex-direction:column;gap:.4em;margin:0;padding-left:1.4em;display:flex}.legal-document a{color:var(--text)}.legal-document code{font-family:var(--font-ui);font-size:inherit}.keys-list{border:var(--border-width) solid var(--border);flex-direction:column;display:flex}.keys-row{width:100%;min-height:var(--control-height);border:0;border-bottom:var(--border-width) solid var(--border);background:var(--control-fill);color:var(--text);font-size:var(--font-nav);text-align:left;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;display:flex}.keys-row:last-child{border-bottom:0}.keys-row.is-capturing,.keys-row.is-capturing .keys-code{background:var(--accent);color:var(--on-accent)}.keys-code{color:var(--text-muted);font-variant-numeric:tabular-nums}@media (width<=960px){.share-screen{grid-template-columns:1fr;justify-items:center;gap:24px}.share-minimap-wrap,.share-export{justify-self:center;width:min(100%,24rem)}.share-hint{text-align:center}}@media (width<=640px){.empty-state{text-align:center}.workspace-header .segment-switch{height:var(--icon-button);flex-basis:100%}.segment-item{font-size:13px}}@media (width<=480px){.square-action{aspect-ratio:1;min-height:0;font-size:13px}}