:root{--bg:#121110;--bg-2:#181614;--panel:#1c1a17;--panel-2:#23201c;--line:#2f2b26;--line-2:#3d3832;--text:#efe6d4;--text-2:#b3a996;--text-3:#7c7466;--safelight:#d9493f;--edge:#f0a33a;--paper:#f3e6cf;--ink:#1e1630;--ok:#7fb685;--metal-1:#4a4540;--metal-2:#2a2724;--radius:14px;--mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--sans:"Space Grotesk", system-ui, sans-serif;--serif:"Instrument Serif", Georgia, serif;--hand:"Caveat", "Segoe Script", cursive;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}body:before{content:"";pointer-events:none;z-index:100;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:-50%}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:2px solid var(--edge);outline-offset:2px;border-radius:6px}.mono{font-family:var(--mono)}.label{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}.hand{font-family:var(--hand)}.app{grid-template-rows:auto 1fr;height:100%;display:grid}.header{border-bottom:1px solid var(--line);z-index:5;background:linear-gradient(#1a1816,#151412);align-items:center;gap:16px;padding:10px 18px;display:flex;position:relative}.brand{font:700 20px/1 var(--sans);letter-spacing:-.02em;align-items:center;gap:10px;display:flex}.brand svg{display:block}.brand small{font:400 italic 15px var(--serif);color:var(--text-3);letter-spacing:0;margin-left:2px}.brand .dot{color:var(--safelight)}.header .spacer{flex:1}.btn{border:1px solid var(--line-2);background:var(--panel-2);font:500 13px var(--sans);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;transition:background .15s,border-color .15s,transform .1s;display:inline-flex}.btn:hover{background:#2c2823;border-color:#4e473f}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--text);color:#16130f;border-color:var(--text)}.btn.primary:hover{background:#fff6e4}.btn.red{background:var(--safelight);border-color:var(--safelight);color:#fff}.btn.red:hover{background:#e55a50}.btn.ghost{color:var(--text-2);background:0 0;border-color:#0000}.btn.ghost:hover{color:var(--text);background:var(--panel-2)}.btn.small{padding:5px 10px;font-size:12px}.icon-btn{border:1px solid var(--line-2);background:var(--panel-2);width:36px;height:36px;color:var(--text-2);border-radius:50%;place-items:center;display:grid}.icon-btn:hover{color:var(--text)}.icon-btn.on{color:var(--edge);border-color:var(--edge)}.home{height:100%;position:relative;overflow:auto}.home-inner{grid-template-columns:1.1fr 1fr;align-items:center;gap:48px;max-width:1180px;min-height:100%;margin:0 auto;padding:clamp(28px,6vh,72px) 24px 60px;display:grid}.home h1{font:400 clamp(44px, 6.4vw, 84px)/.95 var(--serif);letter-spacing:-.02em;margin:14px 0 18px}.home h1 em{color:var(--edge)}.home p.lead{color:var(--text-2);max-width:520px;margin:0 0 26px;font-size:17px}.home .points{grid-template-columns:1fr 1fr;gap:14px 22px;max-width:560px;margin:30px 0 0;padding:0;list-style:none;display:grid}.home .points li{color:var(--text-2);grid-template-columns:26px 1fr;gap:8px;font-size:13.5px;display:grid}.home .points b{color:var(--text);font-weight:600;display:block}.home .points .n{font:500 11px var(--mono);color:var(--edge);padding-top:3px}.dropzone{aspect-ratio:4/5;border:1px solid var(--line-2);text-align:center;cursor:pointer;background:radial-gradient(120% 90% at 30% 20%,#2b2622 0%,#1a1715 55%,#141210 100%);border-radius:26px;place-items:center;width:100%;max-height:72vh;transition:border-color .2s,transform .2s;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0f,0 30px 80px #00000073}.dropzone:hover,.dropzone.over{border-color:var(--edge)}.dropzone.over{transform:scale(1.01)}.dropzone .knurl{opacity:.9;background:repeating-linear-gradient(90deg,#2d2925 0 3px,#1b1916 3px 6px);height:18px;position:absolute;left:0;right:0}.dropzone .knurl.top{top:0}.dropzone .knurl.bottom{bottom:0}.dropzone .lens{aspect-ratio:1;background:radial-gradient(circle at 38% 32%,#3b4a5c 0%,#141b26 38%,#07090d 70%);border-radius:50%;place-items:center;width:58%;margin:0 auto 30px;display:grid;position:relative;box-shadow:0 0 0 10px #24211d,0 0 0 12px #3a352f,0 0 0 26px #1b1916,0 0 0 27px #3a352f,inset 0 0 40px #000000e6}.dropzone .lens:after{content:"";background:radial-gradient(#ffffff59,#0000 70%);border-radius:50%;width:22%;height:14%;position:absolute;top:24%;left:26%;transform:rotate(-30deg)}.dropzone .lens span{font:500 10px var(--mono);letter-spacing:.3em;color:#6f88a3;position:absolute;bottom:16%}.dropzone .cta{font:600 20px var(--sans)}.dropzone .sub{color:var(--text-3);margin-top:6px;font-size:12.5px}.dropzone .formats{font:500 10px var(--mono);letter-spacing:.12em;color:var(--text-3);margin-top:14px}.idle-layer{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0}.darkroom{grid-template-rows:1fr auto;grid-template-columns:1fr 380px;height:100%;min-height:0;display:grid}.stage{flex-direction:column;min-width:0;min-height:0;display:flex;position:relative}.viewer{background:radial-gradient(80% 70% at 50% 45%,#1b1917,#0e0d0c);flex:1;place-items:center;min-height:0;padding:22px;display:grid;position:relative;overflow:hidden}.viewer canvas.photo{touch-action:none;background:#000;display:block;box-shadow:0 24px 70px #0009}.viewer .chips{z-index:2;flex-wrap:wrap;gap:6px;display:flex;position:absolute;top:14px;left:16px}.chip{border:1px solid var(--line-2);font:500 11px var(--mono);letter-spacing:.06em;color:var(--text-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#141210cc;border-radius:999px;align-items:center;gap:6px;padding:5px 10px;display:inline-flex}.chip.accent{color:var(--edge);border-color:#f0a33a59}.chip.red{color:#ff8f86;border-color:#d9493f66}.viewer .tools{border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2;background:#141210db;border-radius:999px;gap:4px;padding:4px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.viewer .tools button{font:500 11.5px var(--mono);color:var(--text-2);letter-spacing:.04em;white-space:nowrap;border-radius:999px;padding:7px 12px}.viewer .tools button:hover{color:var(--text);background:var(--panel-2)}.viewer .tools button.on{color:#16130f;background:var(--text)}.split-handle{cursor:ew-resize;z-index:2;touch-action:none;place-items:center;width:34px;margin-left:-17px;display:grid;position:absolute;top:0;bottom:0}.split-handle:before{content:"";background:var(--text);width:2px;position:absolute;top:0;bottom:0;left:16px;box-shadow:0 0 10px #0009}.split-handle .knob{background:var(--text);color:#16130f;width:30px;height:30px;font:700 12px var(--mono);border-radius:50%;place-items:center;display:grid;position:relative;box-shadow:0 4px 14px #00000080}.split-tag{font:600 10px var(--mono);letter-spacing:.14em;color:var(--text);pointer-events:none;background:#0009;border-radius:4px;padding:3px 7px;position:absolute;top:10px}.busy{z-index:3;position:absolute;top:14px;right:16px}.roll{border-top:1px solid var(--line);background:#0d0c0b;grid-column:1/-1;align-items:center;gap:10px;min-height:104px;padding:10px 14px;display:flex;overflow-x:auto}.roll .frame{cursor:pointer;background-color:#1b1308;background-image:radial-gradient(circle,#0d0c0b 2.4px,#0000 2.6px),radial-gradient(circle,#0d0c0b 2.4px,#0000 2.6px);background-position:3px 3px,3px calc(100% - 3px);background-repeat:repeat-x;background-size:12px 12px,12px 12px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border-radius:3px;flex:none;height:78px;padding:12px 6px;position:relative}.roll .frame img{opacity:.75;border-radius:1px;width:auto;height:54px;transition:opacity .15s;display:block}.roll .frame:hover img,.roll .frame.on img{opacity:1}.roll .frame.on{box-shadow:0 0 0 2px var(--edge)}.roll .frame .no{font:700 8px var(--mono);color:var(--edge);letter-spacing:.1em;position:absolute;bottom:0;left:6px}.roll .frame .x{background:var(--panel-2);border:1px solid var(--line-2);width:18px;height:18px;color:var(--text-2);border-radius:50%;place-items:center;font-size:11px;display:none;position:absolute;top:-6px;right:-6px}.roll .frame:hover .x{display:grid}.roll .add{border:1px dashed var(--line-2);width:78px;height:78px;color:var(--text-3);font:500 11px var(--mono);border-radius:6px;flex:none;place-items:center;display:grid}.roll .add:hover{border-color:var(--edge);color:var(--edge)}.roll .count{font:500 10px var(--mono);color:var(--text-3);letter-spacing:.12em;writing-mode:vertical-rl;transform:rotate(180deg)}.side{border-left:1px solid var(--line);background:var(--bg-2);flex-direction:column;grid-area:1/2/2;min-height:0;display:flex}.tabs{border-bottom:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid}.tabs button{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);border-bottom:2px solid #0000;padding:13px 0 11px}.tabs button:hover{color:var(--text-2)}.tabs button.on{color:var(--text);border-bottom-color:var(--safelight)}.panel{flex:1;padding:18px 18px 40px;overflow-y:auto}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}.section{margin-bottom:26px}.section>h3{justify-content:space-between;align-items:baseline;margin:0 0 10px;display:flex}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.story{font:400 20px/1.3 var(--serif);color:var(--text);margin:0}.story em{color:var(--edge);font-style:italic}.kv{grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;display:grid}.kv dt{color:var(--text-3);font:500 10.5px/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase}.kv dd{color:var(--text);font-family:var(--mono);text-align:right;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12px;line-height:1.9;overflow:hidden}.facts{gap:5px;margin:12px 0 0;padding:0;list-style:none;display:grid}.facts li{color:var(--text-2);padding-left:16px;font-size:12.5px;position:relative}.facts li:before{content:"›";color:var(--edge);position:absolute;left:2px}.scene-chips{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.palette{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.swatch{border:1px solid var(--line);border-radius:8px;overflow:hidden}.swatch i{height:42px;display:block}.swatch span{font:500 9px/1.2 var(--mono);color:var(--text-3);background:var(--panel);min-height:36px;padding:5px 5px 6px;display:block}.meter{background:linear-gradient(90deg,#ff8a2b,#ffc68a 25%,#fff 45%,#cfe3ff 70%,#7fb0ff);border-radius:6px;height:10px;position:relative}.meter .mark{background:var(--text);width:3px;height:18px;box-shadow:0 0 0 2px var(--bg);border-radius:2px;position:absolute;top:-4px}.bars{gap:6px;display:grid}.bar{color:var(--text-2);grid-template-columns:1fr 44px;align-items:center;gap:8px;font-size:12px;display:grid}.bar .track{background:var(--line);border-radius:4px;height:4px;position:relative;overflow:hidden}.bar .track i{background:var(--edge);border-radius:4px;position:absolute;top:0;bottom:0;left:0}.bar .name{grid-column:1/-1;justify-content:space-between;display:flex}.bar .name b{font:500 11px var(--mono);color:var(--text-3)}canvas.hist{background:#0f0e0d;border-radius:8px;width:100%;height:92px;display:block}.pick{gap:10px;display:grid}.pick-main{background:linear-gradient(135deg,#2a221b,#1c1a17 60%);border:1px solid #4a3a2a;position:relative;overflow:hidden}.pick-main .rank{font:600 10px var(--mono);letter-spacing:.16em;color:var(--edge)}.pick-main h4{font:400 30px/1 var(--serif);margin:6px 0}.pick-main ul{color:var(--text-2);margin:8px 0 12px;padding-left:16px;font-size:12.5px}.alts{grid-template-columns:1fr 1fr;gap:8px;display:grid}.alt{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}.alt:hover{border-color:var(--line-2);background:var(--panel-2)}.alt b{font:500 14px var(--sans);display:block}.alt small{color:var(--text-3);font-size:11.5px}.dial-wrap{place-items:center;padding:6px 0 2px;display:grid}.dial-readout{text-align:center;margin-top:-4px}.dial-readout b{font:400 26px var(--serif);display:block}.dial-readout span{color:var(--text-2);font-size:12.5px}.sim-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sim-tile{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;transition:border-color .15s,transform .15s;overflow:hidden}.sim-tile:hover{border-color:var(--line-2);transform:translateY(-1px)}.sim-tile.on{border-color:var(--edge);box-shadow:0 0 0 1px var(--edge)}.sim-tile canvas{aspect-ratio:4/3;object-fit:cover;background:#0f0e0d;width:100%;display:block}.sim-tile span{font:600 9px/1.2 var(--mono);letter-spacing:.06em;color:var(--text-2);padding:5px 7px 6px;display:block}.recipes{gap:6px;display:grid}.recipe{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;display:grid}.recipe:hover{border-color:var(--line-2)}.recipe b{font-size:13.5px;font-weight:600}.recipe small{color:var(--text-3);grid-column:1;font-size:11.5px}.recipe .tag{font:500 9.5px var(--mono);color:var(--edge);letter-spacing:.08em;grid-area:1/2/3;align-self:center}.recipe.suggested{border-color:#f0a33a80}.customs{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.cslot{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);font:700 12px var(--mono);color:var(--text-3);border-radius:10px;place-items:center;display:grid;position:relative}.cslot.full{color:var(--text);border-color:var(--line-2);background:var(--panel-2)}.cslot:hover{border-color:var(--edge)}.qgrid{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.qtile{border:1px solid var(--line);text-align:left;background:#0f0e0d;border-radius:10px;gap:6px;min-height:70px;padding:9px 8px 8px;display:grid}.qtile:hover{border-color:var(--line-2)}.qtile .q-l{font:500 8.5px/1.2 var(--mono);letter-spacing:.12em;color:var(--text-3);text-transform:uppercase}.qtile .q-v{font:700 13px var(--mono);color:var(--text)}.qtile .q-s{gap:4px;display:flex}.qtile .q-s button{background:var(--panel-2);height:22px;color:var(--text-2);font:700 12px var(--mono);border-radius:6px;flex:1}.qtile .q-s button:hover{color:var(--text);background:#332e28}.qtile.changed .q-v{color:var(--edge)}.slider{grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin-bottom:12px;display:grid}.slider label{color:var(--text-2);font-size:12.5px}.slider output{font:500 11px var(--mono);color:var(--text)}.slider input{width:100%;accent-color:var(--edge);grid-column:1/-1}.slider small{color:var(--text-3);grid-column:1/-1;margin-top:-2px;font-size:11px}input[type=range]{appearance:none;background:0 0;height:18px}input[type=range]::-webkit-slider-runnable-track{background:var(--line-2);border-radius:3px;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);border-radius:50%;width:16px;height:16px;margin-top:-6.5px;box-shadow:0 2px 6px #00000080}input[type=range]::-moz-range-track{background:var(--line-2);border-radius:3px;height:3px}input[type=range]::-moz-range-thumb{background:var(--text);border:0;border-radius:50%;width:16px;height:16px}.wbpad{aspect-ratio:1;cursor:crosshair;touch-action:none;border:1px solid var(--line-2);background:linear-gradient(90deg,#00c8c859,#0000 50%,#ff3c3c66),linear-gradient(#3c5aff73,#0000 50%,#ffd20066),#151311;border-radius:12px;width:100%;max-width:190px;position:relative;overflow:hidden}.wbpad:before,.wbpad:after{content:"";background:#ffffff1f;position:absolute}.wbpad:before{width:1px;top:0;bottom:0;left:50%}.wbpad:after{height:1px;top:50%;left:0;right:0}.wbpad .dot{background:var(--text);border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;box-shadow:0 0 0 3px #00000080}.wbpad .ax{font:600 9px var(--mono);color:#ffffff8c;position:absolute}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.seg{border:1px solid var(--line);background:#0f0e0d;border-radius:999px;flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.seg button{font:500 11px var(--mono);color:var(--text-2);border-radius:999px;padding:5px 10px}.seg button.on{background:var(--text);color:#16130f}.toggle{color:var(--text-2);cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:12.5px;display:flex}.toggle i{background:var(--line-2);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s;position:relative}.toggle i:after{content:"";background:var(--text);border-radius:50%;width:14px;height:14px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle.on i{background:var(--safelight)}.toggle.on i:after{transform:translate(14px)}.frames{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.frame-opt{border:1px solid var(--line);background:var(--panel);text-align:center;border-radius:10px;padding:10px 8px 8px}.frame-opt:hover{border-color:var(--line-2)}.frame-opt.on{border-color:var(--edge)}.frame-opt .mini{place-items:center;height:46px;margin-bottom:6px;display:grid}.frame-opt b{font:500 11px var(--sans);display:block}.mini .ph{background:linear-gradient(135deg,#6f8fa6,#c9a36b)}.export-cta{gap:8px;margin-top:8px;display:grid}.export-cta .btn{justify-content:center;padding:12px;font-size:14px}.overlay{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080706b8;place-items:center;padding:16px;animation:.25s fade;display:grid;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.develop-card{aspect-ratio:760/360;border-radius:6px;width:min(760px,100%);min-height:260px;position:relative;overflow:hidden;transform:rotate(-.4deg);box-shadow:0 40px 120px #0009,0 0 0 1px #ffffff0a}.develop-card canvas{width:100%;height:100%;display:block}.develop-card .tape{background:#f0e1be8c;width:90px;height:24px;position:absolute;top:-8px;left:44%;transform:rotate(-3deg);box-shadow:0 1px 3px #00000026}.toasts{z-index:60;pointer-events:none;justify-items:center;gap:8px;display:grid;position:fixed;bottom:124px;left:50%;transform:translate(-50%)}.toast{background:var(--text);color:#16130f;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;animation:.25s rise;box-shadow:0 10px 30px #0006}.toast.err{background:var(--safelight);color:#fff}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.drop-hint{z-index:40;border:3px dashed var(--edge);pointer-events:none;font:400 44px var(--serif);color:var(--edge);background:#f0a33a14;place-items:center;display:grid;position:fixed;inset:0}.help{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;width:min(560px,100%);padding:22px 24px}.help h2{font:400 30px var(--serif);margin:0 0 12px}.help table{border-collapse:collapse;width:100%;font-size:13px}.help td{border-bottom:1px solid var(--line);color:var(--text-2);padding:6px 0}.help td:first-child{width:120px}kbd{font:600 11px var(--mono);background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);border-bottom-width:2px;border-radius:5px;padding:2px 7px}@media (max-width:980px){body{overflow:auto}.home-inner{grid-template-columns:1fr;gap:28px}.dropzone{aspect-ratio:5/4}.darkroom{grid-template-rows:minmax(52vh,60vh) auto auto;grid-template-columns:1fr;height:auto}.side{border-left:0;border-top:1px solid var(--line);grid-area:auto/1}.panel{overflow:visible}.roll{grid-row:2}.app{height:auto;min-height:100%}}@media (max-width:560px){.header{gap:8px;padding:10px 12px}.brand small,.hide-sm,.header .btn span.hide-sm{display:none}.viewer .tools button{white-space:nowrap;padding:7px 9px;font-size:10.5px}.viewer .tools{max-width:calc(100% - 16px)}.toast{max-width:90vw;font-size:12px}.home .points{grid-template-columns:1fr}.viewer{padding:10px}.qgrid,.sim-grid{grid-template-columns:repeat(2,1fr)}.palette{grid-template-columns:repeat(3,1fr)}.customs{grid-template-columns:repeat(4,1fr)}}