:root{color-scheme:dark;--bg:#030303;--glass:rgb(17 18 20/.3);--panel:rgb(18 19 21/.34);--glass-line:rgb(255 255 255/.12);--blur:blur(12px) saturate(1.6) brightness(.45);--shadow:inset 0 1px 0 rgb(255 255 255/.06),0 24px 64px rgb(0 0 0/.45),0 2px 10px rgb(0 0 0/.3);--field:rgb(255 255 255/.08);--field-hover:rgb(255 255 255/.12);--field-active:rgb(255 255 255/.16);--line:rgb(255 255 255/.12);--ink:#f6f6f3;--ink-2:#d6d9dd;--ink-3:#c2c6cc;--rec:#ff5a4e;--accent:#d8ff67;--danger:#ff9a86;--radius:8px;--radius-lg:16px;--edge:16px;--panel-w:328px;--mono:ui-monospace,"SF Mono",Menlo,monospace;--display:Futura,"Avenir Next","Helvetica Neue",Arial,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2c6cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E");font-family:"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;font-synthesis:none}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit;color:inherit}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.error{padding:16px;font-size:13px}
button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:var(--radius);background:var(--field);cursor:pointer;white-space:nowrap;font-size:12px;font-weight:600;transition:background-color .15s,color .15s}button:hover{background:var(--field-hover)}button:active{background:var(--field-active)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-quiet{background:transparent;color:var(--ink-2)}.btn-quiet:hover{background:var(--field);color:var(--ink)}.icon-button{width:36px;padding:0}.chip{min-height:28px;padding:0 10px;border-radius:999px;font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2)}.chip:hover{color:var(--ink)}
input[type=range]{--p:.5;--thumb:14px;--fill-color:#e9e9e5;--track:rgb(255 255 255/.12);-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(var(--fill-color) 0 0) 0 0/calc(var(--thumb)/2 + (100% - var(--thumb))*var(--p)) 100% no-repeat,var(--track)}input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(var(--fill-color) 0 0) 0 0/calc(var(--thumb)/2 + (100% - var(--thumb))*var(--p)) 100% no-repeat,var(--track)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc(1.5px - var(--thumb)/2);border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgb(0 0 0/.5);transition:transform .12s}input[type=range]::-moz-range-thumb{width:var(--thumb);height:var(--thumb);border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgb(0 0 0/.5)}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}input[type=range]:disabled{opacity:.45;cursor:default}input[type=range][data-live]::-webkit-slider-runnable-track{background:linear-gradient(var(--accent) 0 0) calc(var(--thumb)/2 + (100% - var(--thumb))*var(--live) - 4px) 0/8px 100% no-repeat,linear-gradient(var(--fill-color) 0 0) 0 0/calc(var(--thumb)/2 + (100% - var(--thumb))*var(--p)) 100% no-repeat,var(--track)}input[type=range][data-live]::-moz-range-track{background:linear-gradient(var(--accent) 0 0) calc(var(--thumb)/2 + (100% - var(--thumb))*var(--live) - 4px) 0/8px 100% no-repeat,linear-gradient(var(--fill-color) 0 0) 0 0/calc(var(--thumb)/2 + (100% - var(--thumb))*var(--p)) 100% no-repeat,var(--track)}input[type=range]:focus-visible{outline:none}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #111,0 0 0 4px var(--accent)}input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #111,0 0 0 4px var(--accent)}
select{-webkit-appearance:none;appearance:none;min-width:0;width:100%;height:32px;padding:0 30px 0 10px;border:0;border-radius:var(--radius);background:var(--field) var(--chevron) no-repeat right 8px center/16px;font-size:12px;cursor:pointer}select:hover{background-color:var(--field-hover)}option{background:#1b1c1f}
.studio{--panel-space:calc(var(--panel-w) + 12px);--bar-bottom:max(var(--edge),env(safe-area-inset-bottom));position:fixed;inset:0;width:var(--view-width,100vw);height:var(--view-height,100dvh);overflow:hidden;background:var(--bg)}.stage{position:absolute;inset:0;overflow:hidden}#art{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;opacity:0;transition:opacity .5s var(--ease)}.stage.ready #art{opacity:1}.stage:not(.ready) .stage-message{animation:message-in .3s ease 1.2s both}@keyframes message-in{from{opacity:0}}#art:focus-visible{outline:1px solid rgb(216 255 103/.45);outline-offset:-1px}.stage-message{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(80%,360px);margin:0;padding:14px 16px;border-radius:var(--radius);background:var(--glass);box-shadow:var(--shadow);text-align:center;line-height:1.6;font-size:13px;color:var(--ink-2);pointer-events:none}
.brand,.console,.editor,.export-panel,.toast{position:absolute;z-index:3;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s}
.brand{top:max(var(--edge),env(safe-area-inset-top));left:max(var(--edge),env(safe-area-inset-left));margin:0;padding:10px 14px;border-radius:12px;font:700 15px/1 var(--display);letter-spacing:-.005em;white-space:nowrap}
.console,.export-panel,.toast{left:max(var(--edge),env(safe-area-inset-left));right:calc(max(var(--edge),env(safe-area-inset-right)) + var(--panel-space));margin:0 auto}.console{bottom:var(--bar-bottom);max-width:720px;display:flex;align-items:center;gap:8px;padding:6px;border-radius:14px}.editor-closed .studio{--panel-space:0px}.console button{background:transparent}.console button:hover{background:var(--field-hover)}.console .chip{box-shadow:inset 0 0 0 1px var(--glass-line)}.console-divider{flex:none;width:1px;height:20px;background:var(--line)}.console-button{padding:0 12px 0 10px}#editor-toggle[aria-expanded=true]{background:var(--field)}#editor-toggle[aria-expanded=true] .icon,#fullscreen-button[aria-pressed=true] .icon{color:var(--accent)}#fullscreen-button[aria-pressed=true] .when-off,#fullscreen-button:not([aria-pressed=true]) .when-on{display:none}
.timeline{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding-left:4px}.timeline-track{position:relative;flex:1;min-width:60px}.timeline-track::before{content:"";position:absolute;left:2px;right:2px;top:50%;height:10px;transform:translateY(-50%);border-right:1px solid rgb(255 255 255/.24);background:repeating-linear-gradient(90deg,rgb(255 255 255/.24) 0 1px,transparent 1px calc(100%/var(--ticks,6)));pointer-events:none}#timeline{--thumb:4px;--fill-color:var(--ink-2);--track:rgb(255 255 255/.14);position:relative}#timeline::-webkit-slider-thumb{height:18px;margin-top:-7.5px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 1px rgb(0 0 0/.35)}#timeline::-moz-range-thumb{height:18px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 1px rgb(0 0 0/.35)}#timeline:hover::-webkit-slider-thumb{transform:scaleY(1.15)}#time-output{font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.editor{top:max(var(--edge),env(safe-area-inset-top));right:max(var(--edge),env(safe-area-inset-right));width:var(--panel-w);max-height:calc(100% - 2*var(--edge));display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);background:var(--panel)}.editor-head{flex:none;display:flex;align-items:center;gap:6px;padding:8px}.editor-tabs{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;border-radius:10px;background:rgb(255 255 255/.08)}.editor-tabs button{min-height:30px;border-radius:8px;background:transparent;color:var(--ink-3)}.editor-tabs button:hover{background:transparent;color:var(--ink)}.editor-tabs button[aria-selected=true]{background:rgb(255 255 255/.18);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0/.3)}#editor-close{width:32px;min-height:32px;background:transparent;color:var(--ink-3)}#editor-close:hover{background:var(--field);color:var(--ink)}.editor-scroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:8px 16px 18px;scrollbar-width:thin;scrollbar-color:rgb(255 255 255/.2) transparent}
.editor-foot{flex:none;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-top:1px solid var(--line)}#reset-button{flex:none;min-height:30px;padding:0 10px}#reset-button .icon{width:16px;height:16px}#reset-button[data-armed=true]{color:var(--danger);background:rgb(255 154 134/.12)}.editor-meta{flex:1;min-width:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;color:var(--ink-3)}.paper-credit{flex:none;font-size:11px;color:var(--ink-3);text-decoration:none;white-space:nowrap}.paper-credit:hover{color:var(--ink);text-decoration:underline}
#controls{margin:0}#controls [role=tabpanel]{min-width:0}.field+.field{margin-top:18px}.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}.field-head label,.prop-row>label,.prop-row>.prop-label,.color-heading h3{font-size:12px;font-weight:500;color:var(--ink-2)}.field-head output{font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-3)}textarea{display:block;width:100%;resize:vertical;min-height:76px;max-height:180px;margin:0;padding:12px 14px;border:0;border-radius:10px;background:var(--field);font-size:22px;line-height:1.3;letter-spacing:-.01em;font-weight:700;transition:background-color .15s}textarea:hover{background:var(--field-hover)}textarea:focus{background:var(--field-active)}.helper{margin:8px 0 0;font-size:11px;line-height:1.55;color:var(--ink-3)}.helper:empty{display:none}#font-operation[data-error=true]{color:var(--danger)}
.props{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}.props:first-child{margin-top:0;padding-top:0;border-top:0}.prop-row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;align-items:center;gap:10px;min-height:38px}.prop-row output{justify-self:end;font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}.prop-pair{grid-column:2/4;display:flex;align-items:center;gap:8px;min-width:0}.prop-pair select{flex:1}.toggle{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:var(--radius);background:var(--field);font-size:12px;cursor:pointer;transition:background-color .15s,color .15s}.toggle:hover{background:var(--field-hover)}.toggle input{width:14px;height:14px;margin:0;accent-color:var(--accent)}.toggle:has(input:checked){background:rgb(216 255 103/.12);color:var(--accent)}.toggle:has(input:disabled){opacity:.45;cursor:default}.prop-value-button{justify-self:end;min-height:26px;padding:0 6px;background:transparent;border-radius:6px}.prop-value-button:hover{background:var(--field)}.motion-hint{margin-top:14px}.drift-options{display:grid;grid-auto-columns:1fr;flex:1}#drift-help{margin-top:10px}.lock-note{flex:none;margin:0 10px 6px;padding:8px 10px;border-radius:var(--radius);background:rgb(255 90 78/.16);font-size:12px;color:#ffd6d1}.editor.locked .editor-scroll,.editor.locked .editor-foot{opacity:.45}#export-discard{color:var(--ink-2)}#export-discard:hover{color:var(--rec)}
.font-picker #font-select{width:100%;min-height:52px;justify-content:space-between;padding:8px 10px 8px 14px;border-radius:10px;text-align:left;font-weight:400}#font-select[aria-expanded=true]{background:var(--field-active)}#font-select[aria-expanded=true] .chevron{transform:rotate(180deg)}.selected-font{display:flex;flex-direction:column;gap:2px;min-width:0}#font-name{overflow:hidden;text-overflow:ellipsis;font-size:15px;font-weight:600}#font-source{font-size:11px;color:var(--ink-3)}.chevron{color:var(--ink-3);transition:transform .15s}.font-popup{margin-top:8px;padding:8px;border-radius:12px;background:rgb(0 0 0/.28)}#font-search{display:block;width:100%;height:36px;padding:0 12px;border:0;border-radius:var(--radius);background:var(--field);font-size:14px}#font-search::placeholder{color:var(--ink-3)}.font-filters{display:flex;flex-wrap:wrap;gap:2px;padding:8px 0 6px}.font-filters button{min-height:26px;padding:0 10px;border-radius:999px;background:transparent;color:var(--ink-3);font-size:11px}.font-filters button:hover{color:var(--ink)}.font-filters button[aria-pressed=true]{background:rgb(255 255 255/.12);color:var(--ink)}#font-list{max-height:min(240px,26dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(255 255 255/.2) transparent}.font-option{display:flex;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:6px 10px;border-radius:6px;background:transparent;text-align:left;white-space:normal;line-height:1.35;font-weight:400}.font-option>span:first-child{min-width:0;font-size:13px}.font-origin{flex-shrink:0;font-size:11px;color:var(--ink-3)}.font-option:hover{background:var(--field)}.font-option[data-active=true]{background:var(--field-active)}.font-option[aria-selected=true]{position:sticky;top:0;z-index:1;background:#22261b;color:var(--accent)}.font-option[aria-selected=true] .font-origin{color:#c5db94}.font-list-footer{display:flex;align-items:center;justify-content:space-between;min-height:30px;padding:2px 2px 0 4px;font-size:11px;color:var(--ink-3)}#font-more{min-height:26px;padding:0 8px;font-size:11px}
.color-target+.color-target{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.color-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.color-heading h3{margin:0}.segmented{display:inline-grid;grid-auto-flow:column;gap:2px;padding:2px;border-radius:9px;background:rgb(255 255 255/.08)}.segmented button{min-height:26px;padding:0 10px;border-radius:7px;background:transparent;color:var(--ink-3);font-size:11px}.segmented button:hover{background:transparent;color:var(--ink)}.segmented button[aria-pressed=true]{background:rgb(255 255 255/.18);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0/.3)}.color-value{display:flex;align-items:center;gap:8px;margin-top:10px;padding:4px;border-radius:10px;background:var(--field)}.color-value input[type=color]{-webkit-appearance:none;appearance:none;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer}.color-value input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-value input[type=color]::-webkit-color-swatch{border:1px solid rgb(255 255 255/.16);border-radius:7px}.color-value input[type=color]::-moz-color-swatch{border:1px solid rgb(255 255 255/.16);border-radius:7px}.hex-value{flex:1;min-width:0;height:30px;padding:0 6px;border:0;background:transparent;font:500 13px var(--mono);letter-spacing:.02em}.hex-value[aria-invalid=true]{color:var(--danger)}.color-error{display:block;margin-top:6px;color:var(--danger);font-size:11px;line-height:1.5}.color-error:empty{display:none}.mesh-map{position:relative;width:calc(100% - 32px);margin:22px 16px 20px;aspect-ratio:8/5;isolation:isolate;touch-action:none}.mesh-map canvas{position:absolute;display:block;width:100%;height:100%;border-radius:8px;box-shadow:0 0 0 1px rgb(255 255 255/.12)}.mesh-point{position:absolute;z-index:1;width:34px;height:34px;min-height:34px;padding:0;transform:translate(-50%,-50%);border:2px solid rgb(0 0 0/.55);border-radius:50%;color:white!important;text-shadow:0 1px 2px black;font-size:11px;touch-action:none}.mesh-point[aria-pressed=true]{z-index:2;border:2px solid #fff;box-shadow:0 0 0 2px rgb(0 0 0/.55),0 4px 12px rgb(0 0 0/.4)}.point-position{margin-top:2px}.paper-hint{margin:12px 0 2px}
#diagnostics{margin-top:20px;font-size:11px;color:var(--ink-3)}#diagnostic-output{white-space:pre-wrap;overflow-wrap:anywhere}
.export-panel{bottom:calc(var(--bar-bottom) + 60px);width:min(340px,calc(100% - 2*var(--edge)));max-height:calc(100% - var(--bar-bottom) - 60px - var(--edge));overflow-y:auto;padding:8px 14px 14px;border-radius:var(--radius-lg);background:var(--panel)}.export-head{display:flex;align-items:center;justify-content:space-between;margin:0 -6px 6px 0}.export-head h2{margin:0;font-size:13px;font-weight:600}#export-close{width:32px;min-height:32px;background:transparent;color:var(--ink-3)}#export-close:hover{background:var(--field);color:var(--ink)}.export-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px;min-height:38px;font-size:12px;font-weight:500;color:var(--ink-2)}.export-row .segmented{display:grid;grid-auto-columns:1fr}.export-summary{margin:10px 0 0;font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}.btn-accent{width:100%;min-height:40px;margin-top:14px;background:var(--accent);color:#0c0d0e}.btn-accent:hover{background:#e8ffa3}.btn-accent .icon{color:var(--rec)}
.toast{bottom:calc(var(--bar-bottom) + 60px);width:max-content;max-width:min(420px,calc(100% - 2*var(--edge)));margin:0 auto;padding:10px 14px;border-radius:12px;font-size:12px;line-height:1.45;color:var(--ink);pointer-events:none}
#export-button.recording{color:var(--ink);background:rgb(255 90 78/.16)}#export-button.recording .icon{color:var(--rec);animation:rec-pulse 1.2s ease-in-out infinite}#export-button.recording span{font-family:var(--mono);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}#export-button[aria-expanded=true] .icon{color:var(--accent)}@keyframes rec-pulse{50%{opacity:.35}}body.recording #art{object-fit:contain}body.recording #zoom-chip{display:none}
body.hud-idle .console,body.hud-idle .brand,body.hud-hidden .console,body.hud-hidden .brand,body.hud-hidden .editor,body.hud-hidden .export-panel,body.hud-hidden .toast{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s .24s}body.hud-idle .console,body.hud-hidden .console{transform:translateY(10px)}body.hud-idle .brand,body.hud-hidden .brand{transform:translateY(-10px)}body.hud-hidden .editor{transform:translateX(12px)}body.hud-hidden .export-panel{transform:translateY(10px)}body.hud-idle,body.hud-idle #art{cursor:none}@media(hover:hover) and (pointer:fine){body.hud-idle .editor,body.hud-idle .export-panel{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s .24s}body.hud-idle .editor{transform:translateX(12px)}body.hud-idle .export-panel{transform:translateY(10px)}}body.hud-idle #art:focus-visible,body.hud-hidden #art:focus-visible{outline:none}
@media(max-width:1050px){:root{--panel-w:308px}.console-button:not(.recording){width:36px;padding:0}.console-button:not(.recording) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media(max-width:760px) and (orientation:portrait){:root{--edge:12px}.brand{padding:9px 12px;font-size:14px}.editor{top:auto;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:auto;height:auto;max-height:min(60dvh,560px);border-radius:20px}.editor::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;border-radius:2px;background:rgb(255 255 255/.22);transform:translateX(-50%)}.editor-head{padding-top:16px}.studio{--panel-space:0px;--bar-bottom:calc(var(--sheet-h,min(60dvh,560px)) + max(8px,env(safe-area-inset-bottom)) + 10px)}.editor-closed .studio{--bar-bottom:max(var(--edge),env(safe-area-inset-bottom))}body.hud-hidden .editor{transform:translateY(12px)}textarea{font-size:20px;min-height:68px;max-height:100px}.mesh-map{max-width:260px;margin:22px auto 20px}#font-list{max-height:min(180px,20dvh)}}
@media(max-width:420px){#time-output,#export-button.recording span{display:none}.console{gap:4px}}
@media(orientation:landscape) and (max-height:520px){:root{--edge:10px;--panel-w:296px}.brand{padding:8px 11px;font-size:13px}.editor-head{padding:6px}.editor-tabs button{min-height:26px}.editor-scroll{padding:4px 12px 12px}.prop-row{min-height:34px}.console{padding:4px}}
@media(hover:none){#font-search{font-size:16px}.mesh-point{width:44px;height:44px;min-height:44px}.prop-row{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}