@import "https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap";.app{grid-template-columns:minmax(0,1fr);gap:clamp(.85rem,1.6vw,1.25rem);min-height:100svh;padding:clamp(.75rem,2vw,1.5rem);display:grid;position:relative}@media (width>=901px){.app{grid-template-columns:minmax(0,1fr) clamp(380px,36vw,560px);height:100svh;max-height:100svh;overflow:hidden}}.stage{flex-direction:column;gap:clamp(.85rem,1.6vw,1.25rem);min-width:0;min-height:0;display:flex}.stage-main{flex:1;min-height:0;animation:.85s ease-out 80ms both riseIn;display:grid}.atmosphere{z-index:-1;background:radial-gradient(65% 40% at 10% 0,#ff6b4a29,#0000 55%),radial-gradient(50% 45% at 90% 80%,#3db8a02e,#0000 50%),linear-gradient(165deg,#081018 0%,#122436 45%,#0a1520 100%);position:fixed;inset:0}.atmosphere:after{content:"";opacity:.07;background-image:radial-gradient(circle at 1px 1px,#f4f7fb80 1px,#0000 0);background-size:28px 28px;animation:24s linear infinite drift;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 20%,#0000 75%);mask-image:radial-gradient(#000 20%,#0000 75%)}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(28px)}}@keyframes riseIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.appbar{z-index:30;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:18px;flex-shrink:0;align-items:center;gap:.85rem;padding:.55rem .65rem .55rem .6rem;animation:.6s ease-out both riseIn;display:flex;position:relative}.ot-home{border-radius:12px;flex-shrink:0;place-items:center;width:42px;height:42px;transition:transform .2s,background .2s;display:grid}.ot-home:hover{background:#ffffff0f;transform:rotate(-8deg)}.ot-home img{display:block}.appbar-title{min-width:0}.brand{font-family:var(--font-display);letter-spacing:-.02em;color:var(--accent);margin:0;font-size:1.45rem;font-weight:800;line-height:1}.appbar-sub{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:.2rem 0 0;font-size:.68rem;overflow:hidden}.appbar-actions{align-items:center;gap:.5rem;margin-left:auto;display:flex}.appbar-error{max-width:16rem;color:var(--accent);font-size:.78rem}.menu{position:relative}.menu-list{z-index:40;border:1px solid var(--line);background:#0a141ffa;border-radius:16px;flex-direction:column;min-width:15rem;padding:.35rem;animation:.14s ease-out both riseIn;display:flex;position:absolute;top:calc(100% + .45rem);right:0;box-shadow:0 18px 40px #00000080}.menu-item{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:11px;flex-direction:column;gap:.1rem;padding:.6rem .75rem;display:flex}.menu-item:hover,.menu-item:focus-visible{background:#ff6b4a24;outline:none}.menu-item-title{font-size:.9rem;font-weight:600}.menu-item-meta{font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted);font-size:.66rem}.app :where(button,a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=560px){.appbar-sub{display:none}.appbar-actions .btn{padding:.6rem .7rem}}.preview{flex-direction:column;justify-content:center;align-items:center;gap:.85rem;min-height:0;display:flex}.preview-frame{aspect-ratio:1;border:1px solid var(--line);background:#0d1a28;border-radius:28px;place-items:center;width:min(100%,440px);display:grid;overflow:hidden;box-shadow:0 0 0 1px #0000004d,0 28px 56px #0006}.preview-frame canvas{width:94%;height:94%;image-rendering:pixelated;border-radius:18px;display:block}.checker,.preview-frame canvas{background-color:#16222e;background-image:conic-gradient(#223140 25%, transparent 0 50%, #223140 0 75%, transparent 0);background-size:20px 20px}.part-swatch{border:1px solid #ffffff24;border-radius:8px;width:70%;height:70%}.part-swatch.checker{background-size:12px 12px}.preview-caption{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.8rem}.preview{container-type:inline-size}@media (width>=901px){.preview{container-type:size}.preview-frame{width:min(100%,440px,100cqh - 10.5rem)}}.emotion-strip{grid-template-columns:repeat(8,minmax(0,1fr));gap:.45rem;width:min(100%,720px);display:grid}@container (width<=560px){.emotion-strip{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,400px)}.preview-frame{width:min(100%,440px,100cqh - 17rem)}}.emotion-chip{border:1px solid var(--line);min-width:0;color:inherit;font:inherit;cursor:pointer;background:#0a121cbf;border-radius:12px;flex-direction:column;align-items:center;gap:.25rem;padding:.3rem .3rem .35rem;transition:border-color .15s,transform .15s;display:flex}.emotion-chip:hover{border-color:#ff6b4a59;transform:translateY(-1px)}.emotion-chip.is-active{border-color:var(--accent);box-shadow:0 0 0 1px #ff6b4a59}.emotion-face{aspect-ratio:1;width:100%;image-rendering:pixelated;background:#0d1a28;border-radius:8px;display:block}.emotion-label{text-overflow:ellipsis;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase;max-width:100%;color:var(--muted);font-size:.62rem;overflow:hidden}.emotion-chip.is-active .emotion-label{color:var(--accent)}.controls{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:18px;flex-direction:column;min-height:0;max-height:min(78svh,860px);padding:0;animation:.85s ease-out .14s both riseIn;display:flex;overflow:hidden}@media (width>=901px){.controls{height:100%;max-height:none}}.controls-scroll{overscroll-behavior:contain;isolation:isolate;scrollbar-width:thin;flex-direction:column;flex:auto;gap:.55rem;min-height:0;padding:.9rem 1rem 1rem;display:flex;overflow:hidden auto}.section{border:1px solid var(--line);background:#060c1452;border-radius:14px;flex-shrink:0;transition:border-color .15s,background .15s}.section[open]{background:#060c1480;border-color:#ffffff24}.section>summary{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:13px;align-items:center;gap:.6rem;min-height:50px;padding:.4rem .7rem .4rem .8rem;list-style:none;transition:background .15s;display:flex}.section>summary::-webkit-details-marker{display:none}.section>summary:before{content:"▸";color:var(--muted);flex-shrink:0;transition:transform .15s,color .15s}.section[open]>summary:before{color:var(--accent);transform:rotate(90deg)}.section>summary:hover{background:#ffffff0a}.section-name{flex-shrink:0;align-items:baseline;gap:.45rem;margin-right:auto;font-size:.92rem;font-weight:600;display:flex}.section-count{font-family:var(--font-mono);color:var(--muted);font-size:.66rem;font-weight:400}.section-value{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink-soft);font-size:.78rem;overflow:hidden}.section-color{border:1px solid #ffffff38;border-radius:999px;flex-shrink:0;width:14px;height:14px}.section-thumb{width:34px;height:34px;image-rendering:pixelated;background:#0a121c;border-radius:8px;flex-shrink:0}.section-body{flex-direction:column;gap:.9rem;padding:.25rem .8rem .85rem;animation:.18s ease-out both riseIn;display:flex}.era-picker{flex-shrink:0;margin-bottom:.25rem}.era-picker .segmented{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row}.tabs{border-bottom:1px solid var(--line);background:#08101ad9;flex-shrink:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:.25rem;padding:.6rem .7rem;display:grid}.tab{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:10px;padding:.5rem .25rem;font-size:.85rem;font-weight:600;transition:background .15s,color .15s}.tab:hover{color:var(--ink);background:#ffffff0d}.tab.is-active{background:var(--accent);color:#1a100c}.section-title{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sea);margin:.35rem 0 0;font-size:.72rem}.hint{color:var(--muted);margin:0;font-size:.78rem;line-height:1.4}.field{flex-direction:column;gap:.3rem;display:flex}.field-label{color:var(--muted);letter-spacing:.02em;font-size:.78rem}.field input[type=text]{border:1px solid var(--line);background:#060c14e6;border-radius:10px;outline:none;width:100%;padding:.45rem .6rem}.field input[type=text]:focus{border-color:#ff6b4a8c}.slider-field .field-label{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.field-value{font-family:var(--font-mono);color:var(--accent);font-size:.72rem}.slider-field input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.part-select{flex-direction:column;flex-shrink:0;gap:.4rem;display:flex}.adjust{border:1px solid var(--line);background:#060c1473;border-radius:12px;flex-shrink:0;margin-top:-.45rem}.adjust>summary{cursor:pointer;color:var(--ink-soft);align-items:baseline;gap:.5rem;padding:.5rem .7rem;font-size:.78rem;list-style:none;display:flex}.adjust>summary::-webkit-details-marker{display:none}.adjust>summary:before{content:"▸";color:var(--muted);transition:transform .15s}.adjust[open]>summary:before{transform:rotate(90deg)}.adjust-title{flex:1}.adjust-hint{font-family:var(--font-mono);color:var(--muted);font-size:.66rem}.adjust.is-edited{border-color:#ff6b4a66}.adjust.is-edited .adjust-hint{color:var(--accent)}.adjust-body{grid-template-columns:1fr 1fr;gap:.55rem .9rem;padding:.1rem .7rem .7rem;display:grid}.adjust-reset{border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:8px;grid-column:1/-1;justify-self:end;padding:.3rem .7rem;font-size:.72rem}.adjust-reset:hover:not(:disabled){border-color:#ff6b4a80}.adjust-reset:disabled{opacity:.4;cursor:default}.part-select-head{justify-content:space-between;align-items:baseline;display:flex}.part-index{font-family:var(--font-mono);color:var(--accent);font-size:.72rem}.part-grid{background:#060c1480;border-radius:12px;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.45rem;max-height:none;padding:.25rem;display:grid;overflow:visible}.part-grid.is-long{overscroll-behavior:contain;scrollbar-width:thin;max-height:344px;overflow-y:auto}.part-filter{border:1px solid var(--line);width:100%;color:inherit;font:inherit;background:#060c14e6;border-radius:10px;outline:none;padding:.4rem .6rem;font-size:.8rem}.part-filter:focus{border-color:#ff6b4a8c}.part-empty{text-align:center;color:var(--muted);grid-column:1/-1;padding:.8rem;font-size:.75rem}.part-thumb{cursor:pointer;background:#101c2ae6;border:1px solid #0000;border-radius:12px;flex-direction:column;align-items:center;gap:.25rem;padding:.35rem .2rem .4rem;transition:border-color .15s,transform .15s;display:flex}.part-thumb:hover{border-color:#ff6b4a59}.part-thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 1px #ff6b4a59}.part-thumb-visual{background:#0a121c;border-radius:10px;place-items:center;width:52px;height:52px;display:grid;overflow:hidden}.part-thumb-visual img{object-fit:contain;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.part-mark{color:var(--ink-soft);font-size:1.15rem;line-height:1}.part-thumb-label{text-align:center;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.62rem;line-height:1.2;overflow:hidden}.color-panel{flex-direction:column;gap:.75rem;display:flex}.swatch-row{flex-direction:column;gap:.3rem;display:flex}.swatches{flex-wrap:wrap;gap:.35rem;display:flex}.swatch{cursor:pointer;border:1px solid #ffffff26;border-radius:999px;width:22px;height:22px;padding:0}.swatch.is-active{outline:2px solid var(--accent);outline-offset:1px}.swatch-row input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;width:100%;height:28px;padding:0}.swatch.checker{background-size:8px 8px}.swatch-row.is-compact{grid-template-columns:minmax(0,1fr) 30px;grid-template-areas:"label label""swatches picker";align-items:start;gap:.3rem .5rem;display:grid}.swatch-row.is-compact .field-label{grid-area:label}.swatch-row.is-compact .swatches{grid-area:swatches;gap:.3rem}.swatch-row.is-compact .swatch{width:18px;height:18px}.swatch-row.is-compact input[type=color]{grid-area:picker;width:30px;height:30px}.item-colors{border:1px solid var(--line);background:#060c1473;border-radius:12px;flex-direction:column;gap:.55rem;padding:.6rem .7rem .7rem;display:flex}.btn{cursor:pointer;border:1px solid #0000;border-radius:12px;padding:.65rem .8rem;font-weight:600;transition:transform .12s,background .12s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.6;cursor:progress}.btn.ghost{border-color:var(--line);color:var(--ink-soft);background:0 0}.btn.primary{background:var(--accent);color:#1a100c}.btn.primary:hover{background:#ff7f63}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#04090fb8;place-items:center;padding:clamp(.75rem,3vw,2rem);animation:.18s ease-out both fadeIn;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line);background:linear-gradient(#122030fa,#0a141ffa);border-radius:22px;flex-direction:column;gap:1.1rem;width:min(100%,880px);max-height:min(94svh,920px);padding:1.25rem 1.4rem 1.2rem;animation:.25s ease-out both riseIn;display:flex;overflow-y:auto;box-shadow:0 30px 80px #0000008c}.modal-head{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.modal-head h2{font-family:var(--font-display);letter-spacing:-.02em;margin:.2rem 0 0;font-size:1.6rem}.icon-btn{border:1px solid var(--line);width:36px;height:36px;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:10px;font-size:1.3rem;line-height:1}.icon-btn:hover{border-color:#ff6b4a80}.modal-section{flex-direction:column;gap:.5rem;display:flex}.modal-section-head{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.race-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;display:grid}.race-chip{text-align:left;cursor:pointer;background:#101c2ae6;border:1px solid #0000;border-radius:12px;grid-template-rows:auto auto;grid-template-columns:48px 1fr;align-items:center;column-gap:.6rem;padding:.4rem .6rem .4rem .4rem;transition:border-color .15s;display:grid}.race-chip:hover{border-color:#ff6b4a59}.race-chip.is-active{border-color:var(--accent);box-shadow:0 0 0 1px #ff6b4a59}.race-portrait{width:48px;height:48px;image-rendering:pixelated;background:#0a121c;border-radius:9px;grid-row:1/span 2}.race-name{align-self:end;font-size:.86rem;font-weight:600}.race-blurb{color:var(--muted);align-self:start;font-size:.66rem;line-height:1.25}.modal-row{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.segmented-field{flex-direction:column;gap:.4rem;display:flex}.segmented{border:1px solid var(--line);background:#060c1499;border-radius:12px;grid-auto-columns:1fr;grid-auto-flow:column;gap:.25rem;padding:.25rem;display:grid}.segment{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px;padding:.45rem .5rem;font-size:.85rem;font-weight:600}.segment.is-active{background:var(--accent);color:#1a100c}.candidate-grid{grid-template-columns:repeat(4,1fr);gap:.6rem;display:grid}.candidate{aspect-ratio:1;border:1px solid var(--line);cursor:pointer;background:#0d1a28;border-radius:14px;padding:0;transition:transform .12s,border-color .12s;overflow:hidden}.candidate canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.candidate:hover{border-color:var(--accent);transform:translateY(-2px)}.modal-foot{justify-content:flex-end;gap:.6rem;display:flex}@media (width<=560px){.modal-row{grid-template-columns:1fr}.candidate-grid{grid-template-columns:repeat(2,1fr)}}:root{--font-display:"Syne", sans-serif;--font-body:"Outfit", sans-serif;--font-mono:"IBM Plex Mono", monospace;--ink:#f4f7fb;--ink-soft:#d5dde8;--muted:#8a97a8;--accent:#ff6b4a;--sea:#3db8a0;--line:#dce6f524;--panel:#0c1622c7;font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ink);background:#0a1520}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px}button,input,select{color:inherit;font:inherit}a{color:var(--accent)}
