:root{--panel-w:400px;--black:#000;--line:#262626;--text:#fff;--text-dim:#ffffff9e;--alert:#5ec8ff;--knob-size:28px;--pad:30px;--field-pad:20px;--stage-inset:26px;--font-body:"Sora", ui-sans-serif, system-ui, sans-serif;--font-display:"Panchang", "Sora", ui-sans-serif, system-ui, sans-serif;--preview-aspect:16 / 10}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--black);height:100%;color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}body{overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round}.app{grid-template-columns:1fr var(--panel-w);height:100dvh;display:grid;position:relative}.app.is-result{grid-template-columns:1fr}.app.is-result .stage,.app.is-result .panel,.result{display:none}.app.is-result .result{display:block}.stage{background:#000;position:relative;overflow:hidden}.stage-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.header{z-index:4;top:0;left:0;right:var(--panel-w);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#00000073;padding:18px 26px 22px;position:absolute}.app.is-result .header{right:0}.header-nav{pointer-events:auto;align-items:baseline;gap:6px;width:fit-content;font-size:11px;font-weight:400;display:flex}.header-link{color:var(--text);text-underline-offset:3px;text-decoration:underline;text-decoration-thickness:1px;transition:opacity .18s}.header-link:hover{opacity:.65}.header-sep,.header-current{color:var(--text)}.header-current{text-underline-offset:3px;cursor:default;text-decoration:underline;text-decoration-thickness:1px}.br-mobile{display:none}.header-title{font-family:var(--font-display);letter-spacing:.01em;text-transform:uppercase;margin-top:10px;font-size:clamp(20px,1.55vw,28px);font-weight:700;line-height:1.12}.copyright{z-index:4;left:var(--stage-inset);writing-mode:vertical-rl;letter-spacing:.04em;color:var(--text);pointer-events:none;font-size:12px;position:absolute;bottom:92px;transform:rotate(180deg)}.chip{border:1px solid var(--text);font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase;border-radius:999px;outline:none;align-items:center;gap:10px;padding:9px 12px 9px 20px;font-size:13px;font-weight:500;display:inline-flex}.mode-chip{left:var(--stage-inset);bottom:var(--stage-inset);cursor:default;justify-content:center;padding:9px 18px;position:absolute}.back-chip{z-index:3;cursor:pointer;padding:9px 20px 9px 14px;transition:background .18s,color .18s;position:absolute;bottom:56px;left:50%;overflow:hidden;transform:translate(-50%)}.back-arrow{flex-shrink:0;width:22px;height:22px}.chip-label{white-space:nowrap}.chip-icon{border:1px solid var(--text);width:21px;height:21px;font-family:var(--font-body);letter-spacing:0;border-radius:50%;place-items:center;font-size:12px;font-style:italic;display:grid}.tooltip{white-space:nowrap;color:#000;width:max-content;font-family:var(--font-body);letter-spacing:0;text-transform:none;opacity:0;visibility:hidden;background:#fff;padding:10px 16px;font-size:12.5px;font-weight:400;line-height:1.45;transition:opacity .2s,transform .2s,visibility .2s;position:absolute;bottom:calc(100% + 12px);left:0;transform:translateY(4px)}.mode-chip:hover .tooltip,.mode-chip:focus-visible .tooltip,.mode-chip.is-open .tooltip{opacity:1;visibility:visible;transform:translateY(0)}.preview{right:var(--stage-inset);bottom:var(--stage-inset);width:clamp(240px,21vw,420px);aspect-ratio:var(--preview-aspect);border:1px solid var(--text);background:#000;position:absolute;overflow:visible}.preview-canvas{width:100%;height:100%;display:block}.preview-zoom{display:none}.preview-lightbox{z-index:30;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.preview-lightbox.is-open{pointer-events:auto}.preview-lightbox-backdrop{z-index:0;-webkit-backdrop-filter:blur(3px);opacity:0;background:#00000073;transition:opacity .3s;position:absolute;inset:0}.preview-lightbox.is-open .preview-lightbox-backdrop{opacity:1}.preview-lightbox-frame{z-index:1;opacity:0;transform-origin:var(--origin-x,50%) var(--origin-y,50%);transition:opacity .22s,transform .36s cubic-bezier(.22,.61,.36,1);display:flex;position:relative;transform:scale(.001)}.preview-lightbox.is-open .preview-lightbox-frame{opacity:1;transform:scale(1)}.preview-lightbox-canvas{width:min(90vw, calc(82dvh * var(--preview-ar,1)));aspect-ratio:var(--preview-aspect);border:1px solid var(--text);background:#000}.preview-lightbox-close{z-index:2;left:var(--cx,50%);top:var(--cy,50%);border:1px solid var(--text);background:var(--black);width:30px;height:30px;color:var(--text);opacity:0;border-radius:50%;place-items:center;transition:opacity .22s;display:grid;position:fixed}.preview-lightbox-close svg{transition:transform .24s;transform:rotate(-45deg)}.preview-lightbox.is-open .preview-lightbox-close svg{transform:rotate(0)}.preview-lightbox.is-open .preview-lightbox-close{opacity:1}.preview-lightbox-close svg{width:18px;height:18px}.panel{background:var(--black);scrollbar-width:thin;flex-direction:column;display:flex;overflow-y:auto}@media (height<=900px){:root{--field-pad:15px;--pad:26px}.welcome{padding-bottom:18px}.welcome-title{font-size:28px}.btn-steel{padding:18px}}@media (height<=760px){:root{--field-pad:11px}.welcome-title{font-size:24px}.welcome-body{font-size:14px}.btn-steel{padding:15px}.field-name{padding-top:calc(var(--field-pad) + 8px)}}.welcome{padding:var(--pad) var(--pad) 30px;text-align:center;position:relative}.welcome-title{font-family:var(--font-display);letter-spacing:.005em;text-transform:uppercase;min-height:2.24em;font-size:34px;font-weight:700;line-height:1.12}.typed:after{content:"";background:var(--text);opacity:0;width:0;height:.9em;display:inline-block;translate:0 .08em}.typed.is-typing:after{opacity:1;width:.5em;margin-left:.06em;animation:.9s step-end infinite caret}@keyframes caret{50%{opacity:0}}.welcome-body{color:var(--text);margin-top:14px;font-size:15.5px;line-height:1.5}.welcome-line{opacity:0;display:block}.welcome-body.is-in .welcome-line,.result-sub.is-in .welcome-line{animation:.5s cubic-bezier(.22,.61,.36,1) forwards rise}.welcome-body.is-in .welcome-line:nth-child(2),.result-sub.is-in .welcome-line:nth-child(2){animation-delay:.22s}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.welcome-backdrop{display:none}.welcome-go{cursor:pointer;margin:26px auto 0;padding:10px 18px;display:none}.welcome-go-arrow{flex-shrink:0;width:20px;height:20px}.panel-body{flex-direction:column;display:flex}.field{padding:var(--field-pad) var(--pad);border-top:1px solid var(--line)}.field-label{font-family:var(--font-display);letter-spacing:.045em;text-transform:uppercase;text-align:center;font-size:12.5px;font-weight:600}.field-inline{flex-direction:column;align-items:center;gap:14px;display:flex}.icon-row{gap:12px;display:flex}.icon-btn{border:1px solid var(--text);border-radius:50%;place-items:center;width:44px;height:44px;transition:background .18s,color .18s;display:grid}.icon-btn svg{width:22px;height:22px}.icon-filled{fill:currentColor;stroke:none}.icon-btn:hover,.icon-btn.is-active{background:var(--text);color:#000}.presets{gap:10px;margin-top:12px;display:flex}.preset{background:var(--c);outline-offset:3px;border-radius:999px;outline:1px solid #0000;flex:1;height:9px;transition:outline-color .18s}.preset:hover{outline-color:#fff6}.preset.is-active{outline-color:var(--text)}.hue{margin-top:10px}.field-color{padding-top:18px}.hue-input{appearance:none;cursor:pointer;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);border-radius:999px;outline:none;width:100%;height:24px;display:block}.hue-input::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--knob-size);height:var(--knob-size);border:1.5px solid var(--text);background:var(--knob,#f10);cursor:grab;border-radius:50%}.hue-input::-moz-range-thumb{box-sizing:border-box;width:var(--knob-size);height:var(--knob-size);border:1.5px solid var(--text);background:var(--knob,#f10);cursor:grab;border-radius:50%}.pill{border:1px solid var(--text);border-radius:999px;height:34px;margin-top:16px;position:relative;overflow:hidden}.pill-wave{width:100%;height:100%;color:var(--text);stroke-width:1.4px;pointer-events:none;position:absolute;inset:0}.pill-input{appearance:none;cursor:pointer;background:0 0;outline:none;width:100%;height:100%;position:absolute;inset:0}.pill-input::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--knob-size);height:var(--knob-size);border:1.5px solid var(--text);cursor:grab;background:#00000073;border-radius:50%}.pill-input::-moz-range-thumb{box-sizing:border-box;width:var(--knob-size);height:var(--knob-size);border:1.5px solid var(--text);cursor:grab;background:#00000073;border-radius:50%}.name-input{border:none;border-bottom:1px solid var(--text);width:100%;color:var(--text);font-family:var(--font-body);letter-spacing:0;text-align:center;background:0 0;outline:none;padding:4px 0 6px;font-size:14.5px;font-weight:400}.name-input::placeholder{color:var(--text-dim)}.field-name{padding-top:calc(var(--field-pad) + 16px)}.name-hint{text-align:center;height:0;color:var(--alert);letter-spacing:.04em;opacity:0;margin-top:0;font-size:11.5px;transition:opacity .2s,height .2s,margin-top .2s;display:block;overflow:hidden}.field-name.is-missing .name-hint{opacity:1;height:1.4em;margin-top:8px}.field-name.is-missing .name-input{color:var(--alert);border-bottom-color:var(--alert);animation:.32s nudge}.field-name.is-missing .name-input::placeholder{color:var(--alert);opacity:.75}@keyframes nudge{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.btn-steel{color:#0a0a0a;font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(160deg,#ececec 0%,#cdcdcd 42%,#dedede 58%,#c2c2c2 100%);padding:22px;font-size:15px;font-weight:500;position:relative;overflow:hidden}#export{margin:auto var(--pad) var(--pad)}.btn-steel-label{z-index:1;position:relative}.btn-steel:after{content:"";pointer-events:none;background:linear-gradient(105deg,#fff0 35%,#ffffff80 46%,#ffffffe6 50%,#ffffff80 54%,#fff0 65%);transition:transform .85s cubic-bezier(.22,.61,.36,1);position:absolute;inset:-1px;transform:translate(-115%)}.btn-steel:hover:after{transform:translate(115%)}.btn-steel:active{filter:brightness(.94)}.app.is-result .header-title{display:none}.app.is-result .header{-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0}.app.is-result .header-current{cursor:pointer}.app.is-result .header-current:hover{opacity:.6}.result-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.result-veil{pointer-events:none;background:#0000008c;position:absolute;inset:0}.result-card{z-index:2;text-align:center;opacity:0;width:min(90vw,480px);position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}.result-card.is-in{animation:.62s cubic-bezier(.22,.61,.36,1) .12s forwards cardIn}@keyframes cardIn{0%{opacity:0;transform:translate(-50%,-46%)scale(.985)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.result-name{font-family:var(--font-display);letter-spacing:.005em;text-transform:uppercase;min-height:1.12em;font-size:25.5px;font-weight:700;line-height:1.12}.result-sub{margin-top:12px;font-size:15.5px;line-height:1.5}.result-download{width:100%;max-width:306px;margin:24px auto 0;display:block}.btn-ghost{border:1px solid var(--text);width:100%;max-width:306px;color:var(--text);text-align:center;margin:12px auto 0;padding:20px;font-size:15px;text-decoration:none;transition:background .18s,color .18s;display:block;position:relative}.btn-ghost,.back-chip{overflow:hidden}.btn-ghost:after,.back-chip:after{content:"";pointer-events:none;background:linear-gradient(105deg,#fff0 32%,#fff3 44%,#ffffff6b 50%,#fff3 56%,#fff0 68%);transition:transform .85s cubic-bezier(.22,.61,.36,1);position:absolute;inset:-1px;transform:translate(-115%)}.btn-ghost:hover:after,.back-chip:hover:after{transform:translate(115%)}.result-follow{margin-top:22px;font-size:15px}.result-follow a{color:var(--text);text-underline-offset:3px}.fps{color:#ffffff47;pointer-events:none;z-index:10;font-family:ui-monospace,Menlo,monospace;font-size:10px;position:fixed;bottom:8px;left:50%;transform:translate(-50%)}@media (width<=768px){:root{--stage-inset:18px;--pad:22px;--field-pad:20px;--stage-h:58dvh;--preview-h:min(32dvh, calc(var(--stage-h) - 172px));--preview-w:calc(var(--preview-h) * var(--preview-ar,.46))}body{overflow:auto}.app{height:auto;min-height:100dvh;display:block}.stage{height:var(--stage-h);z-index:auto;position:relative}.header{padding:18px 18px 20px;right:0}.br-mobile{display:none}.header-title{margin-top:10px;font-size:12.5px;line-height:1.3}.header-nav{font-size:12px}.copyright{left:10px;top:calc(var(--stage-h) - 12px);font-size:8px;position:absolute;bottom:auto;transform:translateY(-100%)rotate(180deg)}.preview{width:var(--preview-w);height:var(--preview-h);right:var(--stage-inset);bottom:var(--stage-inset)}.preview-zoom{z-index:1;border:1px solid var(--text);background:var(--black);width:30px;height:30px;color:var(--text);border-radius:50%;place-items:center;transition:transform .24s,opacity .2s;display:grid;position:absolute;bottom:-11px;right:-11px}.preview-zoom.is-active{opacity:0;pointer-events:none;transform:rotate(45deg)}.preview-zoom svg{width:14px;height:14px}.mode-chip{top:auto;left:auto;right:var(--stage-inset);bottom:calc(var(--stage-inset) + var(--preview-h) + 8px);z-index:5;width:var(--preview-w);letter-spacing:.03em;justify-content:center;padding:6px 8px;font-size:7.5px}.tooltip{white-space:nowrap;width:max-content;padding:8px 11px;font-size:10.5px;line-height:1.35;inset:auto 0 calc(100% + 8px) auto}.welcome{background:var(--black);z-index:6;width:min(84vw,340px);padding:28px 26px 30px;position:fixed;top:38%;left:50%;transform:translate(-50%,-50%)}.app.is-result .welcome,.app.is-result .welcome-backdrop{display:none}.welcome-backdrop{z-index:5;-webkit-backdrop-filter:blur(4px);background:#0000009e;display:block;position:fixed;inset:0}.welcome.is-closed,.welcome.is-closed+.welcome-backdrop{display:none}.welcome-go{display:inline-flex}.welcome{text-align:center}.welcome-title{font-size:26px}.welcome-body{font-size:14.5px}.panel{position:relative;overflow:visible}.panel-body{grid-template-columns:1fr 1fr;display:grid}.field-color,.field-texture,.field-name{grid-column:1/-1}.name-input{font-size:16px}.presets{display:none}.field-texture{grid-template-columns:auto 1fr;align-items:center;gap:18px;display:grid}.field-texture .field-label{text-align:left}.pill{margin-top:0}:root{--knob-size:34px}.hue-input{height:34px}.pill{height:38px}.field-playback{flex-direction:row;grid-area:3/1;justify-content:flex-start;align-items:center;gap:16px}.field-randomize{border-left:1px solid var(--line);grid-area:3/2;justify-content:center;align-items:center}.field-randomize .field-label{display:none}#export{margin:var(--pad)}.app.is-result{height:100dvh;overflow:hidden}.app.is-result .result{height:100dvh}.app.is-result .copyright{writing-mode:horizontal-tb;font-size:9px;position:absolute;top:auto;bottom:44px;left:50%;transform:translate(-50%)}.app.is-result .back-chip{bottom:74px}.result-card{top:42%}.result-name{font-size:22px}.result-sub{font-size:14.5px}.result-download,.btn-ghost{padding:18px}.back-chip{bottom:32px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}