:root{color-scheme:dark;--panel-width: 272px;--ink: #f4f2ea;--muted: #878782;--line: #2b2b2a;--accent: #d9ff55}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#030404;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}button,select,label,.tab{touch-action:manipulation}body{color:var(--ink)}#root{width:100%;height:100%}.app{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-width);width:100%;height:100dvh}.stage{position:relative;min-width:0;overflow:hidden;background:#020303}.stage-frame{position:absolute;inset:28px;display:grid;place-items:center}.artboard{display:block;max-width:100%;max-height:100%}.stage-empty{display:grid;gap:10px;justify-items:center;text-align:center}.stage-empty .hint{max-width:240px;margin:0}.stage-label{position:absolute;top:20px;left:22px;display:flex;gap:9px;align-items:center;padding:8px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#03040473;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffffb8;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}.stage-label:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #d9ff55bf}.panel{position:relative;z-index:2;display:flex;flex-direction:column;min-height:0;padding:22px 20px 18px;border-left:1px solid var(--line);background:#0c0c0c;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#343433 transparent}.brand{margin-bottom:24px}.eyebrow{margin:0 0 8px;color:var(--muted);font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase}h1{margin:0;font-size:20px;font-weight:520;letter-spacing:-.04em}.section+.section{margin-top:26px}.panel-foot{display:grid;gap:12px;margin-top:auto;padding-top:26px}.effect-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;border-bottom:1px solid var(--line)}.effect-title{display:flex;gap:9px;align-items:center;min-width:0;font-size:12px;font-weight:600}.effect-title span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.index{display:grid;flex:none;place-items:center;width:20px;height:20px;border:1px solid #353535;border-radius:50%;color:var(--accent);font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.status{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px #d9ff5580;transition:background-color .15s ease,opacity .15s ease}.status.is-off{background:#4a4a48;box-shadow:none;opacity:.5}.control{margin-top:26px}.control-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px}label{color:#c8c7c1;font-size:11px}output{color:var(--accent);font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}input[type=range]{--fill: 0%;width:100%;height:18px;margin:0;appearance:none;background:transparent;cursor:ew-resize;touch-action:pan-y pinch-zoom}input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent) 0 var(--fill),#363635 var(--fill) 100%)}input[type=range]::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5px;appearance:none;border:2px solid #0c0c0c;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}input[type=range]::-moz-range-track{height:2px;background:#363635}input[type=range]::-moz-range-progress{height:2px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid #0c0c0c;border-radius:50%;background:var(--accent)}.select{width:100%;height:36px;padding:0 34px 0 10px;border:1px solid #343433;border-radius:3px;appearance:none;background:linear-gradient(45deg,transparent 50%,#777 50%) calc(100% - 14px) 15px / 5px 5px no-repeat,linear-gradient(135deg,#777 50%,transparent 50%) calc(100% - 9px) 15px / 5px 5px no-repeat,#141414;color:var(--ink);font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}.color-row,.color-pair{display:grid;gap:8px}.color-row{grid-template-columns:1fr 40px;align-items:center}.color-row .hint{margin:0}.color-pair{grid-template-columns:1fr 1fr}.color-chip{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 8px 0 10px;border:1px solid #343433;border-radius:3px;background:#141414;color:#777772;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}input[type=color]{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:1px solid rgba(255,255,255,.35);border-radius:50%}.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.toggle-box{position:relative;flex:none;width:15px;height:15px;border:1px solid #343433;border-radius:3px;background:#141414;transition:border-color .15s ease,background-color .15s ease}.toggle-box:after{content:"";position:absolute;top:1px;left:4.5px;width:3px;height:7px;border:solid #0c0c0c;border-width:0 1.5px 1.5px 0;opacity:0;transform:rotate(42deg)}.toggle input:checked+.toggle-box{border-color:var(--accent);background:var(--accent)}.toggle input:checked+.toggle-box:after{opacity:1}.toggle input:focus-visible+.toggle-box{box-shadow:0 0 0 2px #d9ff5559}.toggle-label{color:#c8c7c1;font-size:11px}[hidden]{display:none!important}.button,.file-button,.save-button,.randomize-button{display:flex;align-items:center;justify-content:center;width:100%;height:36px;border:1px solid #343433;border-radius:3px;background:#141414;color:#d1d0ca;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;cursor:pointer;transition:border-color .15s ease,color .15s ease}.randomize-button{margin-top:18px}@media(hover:hover){.button:hover:not(:disabled),.file-button:hover,.save-button:hover:not(:disabled),.randomize-button:hover{border-color:var(--accent);color:var(--accent)}}.button:disabled,.save-button:disabled{color:#555;cursor:default;opacity:.65}.icon-button{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:3px;background:none;color:#6d6d68;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;transition:color .15s ease,background-color .15s ease}@media(hover:hover){.icon-button:hover:not(:disabled){background:#1a1a19;color:var(--accent)}}.icon-button:disabled{color:#3a3a38;cursor:default}:where(button,select,input,label.file-button):focus-visible{outline:1px solid var(--accent);outline-offset:1px}.file-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-name{display:block;margin-top:8px;overflow:hidden;color:#666662;font:500 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap}.hint{margin:12px 0 0;color:#666662;font-size:10px;line-height:1.45}.layer-list{display:grid;gap:1px;margin:10px 0 0;padding:0;border:1px solid var(--line);background:var(--line);list-style:none}.layer-row{background:#0c0c0c}.layer-row.is-selected{background:#131412}.layer-head{display:flex;align-items:center;gap:6px;height:34px;padding:0 5px 0 8px}.layer-eye{display:grid;flex:none;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:3px;background:none;cursor:pointer}.layer-name{flex:1;min-width:0;padding:0;border:0;background:none;color:#a8a7a2;font-family:inherit;font-size:11px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.layer-row.is-selected .layer-name{color:var(--ink);font-weight:600}.layer-actions{display:flex;flex:none;gap:1px;opacity:.28;transition:opacity .15s ease}.layer-row.is-selected .layer-actions{opacity:1}@media(hover:hover){.layer-row:hover .layer-actions{opacity:1}}@media(hover:none){.layer-actions{opacity:1}}.layer-body{padding:0 10px 13px}.layer-settings .control-head{margin-bottom:9px}.layer-settings .select{margin-top:12px}.layer-body .select{height:32px;background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px}.effect>.layer-settings{margin-top:26px}.add-layer{margin-top:2px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--line);background:var(--line)}.stat{padding:10px;background:#0c0c0c}.stat:last-child:nth-child(odd){grid-column:1 / -1}.stat span{display:block;margin-bottom:5px;overflow:hidden;color:#5f5f5b;font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.stat strong{font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.panel-note,.panel-error{margin:0;font:500 9px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}.panel-note{color:#666662}.panel-error{color:#d9704f}.storage{display:grid;gap:8px;padding-top:4px}.storage-note{margin:0;color:var(--muted);font:500 9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}.button.is-armed,.button.is-armed:hover:not(:disabled){border-color:#d9704f;color:#d9704f}@media(max-width:720px),(max-height:520px){.stage-frame{inset:12px}input[type=range]{height:44px}input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px}input[type=range]::-moz-range-thumb{width:20px;height:20px}.select{height:44px;font-size:16px;background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px}.button,.file-button,.save-button,.randomize-button{height:44px;font-size:11px}label,.toggle-label{font-size:13px}output{font-size:12px}.control,.effect>.layer-settings{margin-top:18px}.control-head{margin-bottom:6px}.toggle{min-height:44px}.toggle-box{width:20px;height:20px}.toggle-box:after{top:2px;left:6px;width:4px;height:10px;border-width:0 2px 2px 0}input[type=color]{width:40px;height:40px}.color-row{grid-template-columns:1fr 44px}.icon-button{width:36px;height:36px}.layer-actions{gap:4px}.layer-head{height:46px;gap:4px;padding:0 4px 0 2px}.layer-eye{width:34px;height:34px}.layer-name{font-size:13px}.status{width:10px;height:10px}.hint{font-size:11px}}@media(max-width:720px),(max-height:520px){.panel-sheet{padding:0;overflow:hidden;background:#0c0c0c}.sheet-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 0 16px}.sheet-brand{margin:0;overflow:hidden;font-size:14px;font-weight:520;letter-spacing:-.03em;text-overflow:ellipsis;white-space:nowrap}.sheet-toggle{display:grid;flex:none;place-items:center;width:40px;height:34px;padding:0;border:0;background:none;cursor:pointer}.sheet-chevron{width:9px;height:9px;border-right:1.5px solid #8a8a84;border-bottom:1.5px solid #8a8a84;transition:transform .18s ease}.sheet-toggle[aria-expanded=true] .sheet-chevron{transform:translateY(-2px) rotate(45deg)}.sheet-toggle[aria-expanded=false] .sheet-chevron{transform:translateY(2px) rotate(-135deg)}.tabs{display:grid;flex:none;grid-template-columns:repeat(3,1fr);gap:2px;margin:10px 16px 0;padding:2px;border:1px solid var(--line);border-radius:4px;background:#141414}.tab{height:34px;padding:0;border:0;border-radius:3px;background:none;color:#8f8e88;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .15s ease,color .15s ease}.tab.is-active{background:#20221a;color:var(--accent)}.panel-sheet .panel-body{flex:1;min-height:0;padding:4px 16px 20px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#343433 transparent}.panel-sheet .panel-body>.section:first-child{margin-top:18px}.panel-sheet .storage{padding-top:18px}.panel-sheet .stats{margin-top:24px}.sheet-bar{display:grid;flex:none;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#0c0c0c}.sheet-actions{display:grid;grid-template-columns:44px 44px minmax(0,1fr);gap:8px}.bar-button{display:grid;place-items:center;height:44px;padding:0;border:1px solid #343433;border-radius:3px;background:#141414;color:#d1d0ca;font-size:17px;line-height:1;cursor:pointer}.bar-button:disabled{color:#4a4a48;cursor:default;opacity:.65}}@media(max-width:720px)and (orientation:portrait){body{background:#0c0c0c}.app{grid-template-columns:100%;grid-template-rows:minmax(0,clamp(120px,calc(100svh - 340px),40svh)) minmax(0,1fr);height:100dvh}.app[data-sheet=collapsed]{grid-template-rows:minmax(0,1fr) auto}.app[data-sheet=collapsed] .panel-body{display:none}.panel-sheet{border-left:0;border-top:1px solid var(--line)}.stage-label{top:12px;left:12px}}@media(max-width:720px)and (orientation:landscape),(max-height:520px){:root{--panel-width: 248px}.sheet-toggle{display:none}.sheet-head{padding-top:7px}.sheet-brand{font-size:13px}.tabs{margin-top:8px}.panel-sheet .panel-body>.section:first-child{margin-top:14px}}