@import "https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,600&display=swap";:root{--bg:#1a1a1a;--bg-bar:#2b2b2b;--bg-tile:#111;--line:#3a3a3a;--text:#fff;--text-muted:#b4b4b4;--value:#4fc3f7;--focus-cyan:#2ee6ff;--focus-blue:#5aa8ff;--focus-magenta:#ff3ca0;--focus-solid:#3dcfff;--content-max:1280px;--header-h:92px;--footer-h:66px;--pad:clamp(16px, 4vw, 48px);--random-gap:28px;--font:Inter, "Segoe UI", sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;color:var(--text);font-family:var(--font);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;background:#050505;margin:0;font-weight:400;overflow:hidden}button,a{font-family:inherit}img{max-width:100%;display:block}.stage-viewport{width:100%;height:100%;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#050505;justify-content:center;display:flex}.stage{width:100%;max-width:var(--content-max);background:var(--bg);flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.screen{flex-direction:column;flex:1;min-height:0;display:flex}.header{padding:clamp(16px, 3vw, 28px) var(--pad) 0;flex-shrink:0}.header-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:0 clamp(0px,1.2vw,16px);display:flex}.header>.header-title{padding:0 clamp(0px,1.2vw,16px)}.header-title{letter-spacing:.15px;margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:400}.header-side{margin:0;font-size:clamp(16px,1.8vw,20px);font-weight:400}.header-rule{background:var(--line);height:1px;margin-top:14px}.header-sub{color:var(--text);margin:14px 0 0;padding:0 clamp(8px,4vw,62px);font-size:clamp(14px,1.4vw,16px);font-weight:400}.header:has(+.random-body){padding-bottom:16px}.header:has(+.random-body) .header-sub{margin-bottom:0}.screen-body{min-height:0;padding:12px var(--pad) 8px;flex:1;overflow:auto}.focus-host{display:inline-flex;position:relative;overflow:visible}.focus-host.is-round,.focus-host.is-round .focus-outline,.focus-host.is-round .focus-inner{border-radius:50%}.focus-outline{pointer-events:none;z-index:2;-webkit-mask-composite:xor;border-radius:10px;padding:4px;position:absolute;inset:-10px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.focus-outline.is-focus{background-image:linear-gradient(90deg, var(--focus-cyan) 0%, var(--focus-blue) 25%, var(--focus-magenta) 50%, var(--focus-blue) 75%, var(--focus-cyan) 100%);background-size:200% 100%;animation:1.6s linear infinite focus-travel;box-shadow:0 0 10px #2ee6ff66,0 0 16px #ff3ca047}.focus-inner{pointer-events:none;z-index:2;border:2px solid #4db8ff;border-radius:6px;position:absolute;inset:0}.focus-inner.is-focus{border-color:#5ec8ff}.focus-inner.is-selected{border-width:3px;border-color:#4db8ff}.focus-host.is-round .focus-outline{padding:4px;inset:-5px}.focus-host.is-round .focus-inner{border-width:2px;inset:-3px}.focus-host.is-overlap .focus-outline{border-radius:inherit;padding:4px;inset:0}.focus-host.is-overlap:has(.focus-outline)>button{border-color:#0000}@keyframes focus-travel{0%{background-position:0 0}to{background-position:-200% 0}}.footer{min-height:var(--footer-h);height:auto;padding:8px var(--pad) 10px;background:#1c1c1c;flex-shrink:0;justify-content:flex-end;align-items:center;display:flex}.prompts{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px;display:flex}.prompt{appearance:none;color:#fff;cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;margin:0;padding:11px 14px;font-size:17px;line-height:1;transition:background-color .12s;display:flex}@media (pointer:coarse){.prompt{min-height:44px;padding:12px 14px}}.prompt:hover,.prompt:focus-visible{background:#1a3e56;outline:none}.prompt:active{background:#163a5a}.prompt-key{color:#1a1a1a;background:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:26px;height:26px;font-size:14px;font-weight:600;line-height:1;display:grid}.prompt-label{align-items:center;height:26px;line-height:1;display:flex}.boot{height:100%;color:var(--text-muted);padding:var(--pad);text-align:center;place-items:center;font-size:18px;display:grid}.category-grid-wrap{scrollbar-width:none;height:100%;padding:16px clamp(12px,6vw,108px) 24px;overflow:auto}.category-grid-wrap::-webkit-scrollbar{display:none}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 20px;display:grid;overflow:visible}.category-grid .focus-host{width:100%;display:block}.category-grid .focus-outline{border-radius:12px;padding:4px;inset:-5px}.create-btn-wrap .focus-host{border-radius:4px;width:100%;max-width:690px;display:flex}.category-card{cursor:pointer;color:#fff;background:#1e1e1e;border:0;border-radius:8px;flex-direction:column;width:100%;padding:0;scroll-margin:28px;display:flex;overflow:hidden}.category-card-art{aspect-ratio:16/9;background:#111;overflow:hidden}.category-card-art img{object-fit:cover;width:100%;height:100%}.category-card-art.logo-banner{background:#e60012}.category-card-art.logo-banner img{object-fit:contain}.category-card-plate{text-align:center;place-items:center;width:100%;height:100%;padding:12px;font-size:clamp(14px,1.4vw,16px);display:grid}.category-card-bar{background:#2a2a2a;place-items:center;height:clamp(42px,6vw,50px);font-size:clamp(16px,2vw,21px);font-weight:400;display:grid}.screen-body.random-body{justify-content:flex-start;gap:var(--random-gap);flex-direction:column;padding:12px clamp(16px,7vw,94px) 16px;display:flex;overflow:auto}.random-grid{flex:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(120px,16.6667% - 13.3333px)),1fr));justify-content:center;gap:20px 16px;width:100%;margin-top:0;padding:0;display:grid}.random-slot{aspect-ratio:1;cursor:pointer;background:0 0;border:0;place-items:center;width:100%;padding:0;scroll-margin:28px;display:grid}.random-slot .focus-host{aspect-ratio:1;width:100%;height:100%;max-height:100%;display:block}.random-slot .icon-canvas{display:block}.create-btn-wrap{flex:none;justify-content:center;align-items:center;width:100%;margin-top:0;padding-top:0;display:flex}.split{flex:1;grid-template-columns:minmax(0,1.25fr) minmax(240px,.9fr);grid-template-areas:"main preview";min-height:0;display:grid;overflow:hidden}.split-left{scrollbar-width:none;grid-area:main;min-width:0;min-height:0;padding:10px clamp(16px,3vw,48px) 24px;overflow:auto}.split-left::-webkit-scrollbar{display:none}.split-right{background:var(--bg);border-left:none;grid-area:preview;place-items:center;min-width:0;display:grid;position:relative}.split-right:before{content:"";background:var(--line);width:1px;position:absolute;top:48px;bottom:48px;left:0}.split.is-editor .split-left{flex-direction:column;padding:8px clamp(20px,6vw,72px) 28px clamp(24px,8vw,96px);display:flex}.split.is-editor .hint,.split.is-editor .menu-list{flex-shrink:0}.split.is-editor .hint{margin:8px 0 32px;padding-left:0}.split.is-picker .split-left{padding:8px clamp(12px,2vw,16px) 20px clamp(16px,3vw,36px)}.preview-frame{aspect-ratio:1;width:clamp(160px,42vw,300px);max-width:min(100%,300px)}.preview-frame .icon-canvas{width:100%;height:100%}@media (width<=48rem),(aspect-ratio<=1){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template:"preview""main"minmax(0,1fr)/1fr}.split-right{z-index:1;padding:8px var(--pad)}.split-right:before{display:none}.split.is-editor .split-left,.split.is-picker .split-left{padding:8px var(--pad) 20px}.split.is-editor .hint{margin:8px 0 16px}.split.is-editor .ok-wrap{flex-grow:0;margin-top:20px;padding:4px 0 12px}.split.is-editor .menu-row{min-height:68px}.preview-frame{width:clamp(140px,28vh,200px)}}@media (width<=22rem){.category-grid{grid-template-columns:minmax(0,1fr)}}.hint{margin:6px 0 16px;padding-left:24px;font-size:16px}.menu-list{border-top:1px solid var(--line)}.menu-row-inner{border-bottom:1px solid var(--line);width:100%;position:relative}.menu-row-inner .focus-host{width:100%;display:block}.menu-row-inner .focus-outline{border-radius:8px;padding:4px;inset:-1px 0;box-shadow:0 0 6px #2ee6ff52,0 0 10px #ff3ca033}.menu-list:has(.menu-row-inner:first-child .focus-outline){border-top-color:#0000}.menu-row-inner:has(.focus-outline){z-index:1;border-bottom-color:#0000}.menu-row-inner:has(+.menu-row-inner .focus-outline){border-bottom-color:#0000}.ok-wrap .focus-host{border-radius:4px;width:280px;max-width:100%;display:inline-flex}.menu-row{color:#fff;cursor:pointer;background:0 0;border:0;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:84px;padding:0 clamp(16px,3vw,32px);scroll-margin:28px;font-size:clamp(16px,1.6vw,18px);display:flex}.menu-value{color:var(--value)}.menu-thumb{object-fit:contain;background:0 0;border-radius:2px;width:44px;height:44px}.ok-wrap{flex:1 0 auto;justify-content:center;align-items:center;min-height:70px;margin-top:12px;display:flex}.create-btn,.ok-btn{color:#fff;cursor:pointer;background:0 0;border:2px solid #fff;border-radius:4px;justify-content:center;align-items:center;padding:16px 24px;font-size:18px;display:flex}:is(.create-btn-wrap .focus-host:has(.focus-outline)>.create-btn,.ok-wrap .focus-host:has(.focus-outline)>.ok-btn){background:#ffffff0f}.create-btn{width:100%;min-width:0;max-width:690px;height:56px}.ok-btn{width:100%;height:54px}.picker-label{margin:8px 0 20px;padding-left:24px;font-size:16px}.picker-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(72px,20% - 14.4px)),1fr));align-items:start;gap:18px;padding:6px 4px 20px 0;display:grid}.picker-grid .focus-host{aspect-ratio:1;border-radius:0;width:100%;display:grid}.picker-grid .focus-outline{border-radius:10px;padding:4px;inset:-6px}.picker-grid .focus-inner,.picker-grid .focus-inner.is-focus,.picker-grid .focus-inner.is-selected{border:4px solid #3a91ee;border-radius:0;inset:2px}.part-tile{aspect-ratio:1;cursor:pointer;background:0 0;border:0;place-items:center;width:100%;padding:4px;scroll-margin:72px;display:grid;overflow:visible}.part-tile img,.part-tile .none-mark{aspect-ratio:1;object-fit:contain;object-position:center;background:0 0;width:100%;height:auto}.none-mark{place-items:center;display:grid}.none-mark span{border:2px dashed #8a8a8a;border-radius:50%;width:70%;height:70%}