:root{--black: #000000;--ink: #08080c;--surface: rgba(22, 22, 29, .94);--surface-soft: rgba(32, 32, 42, .88);--white: #ffffff;--muted: #b8b8c4;--line: rgba(255, 255, 255, .34);--line-soft: rgba(255, 255, 255, .16);--hot: #f224d1;--ease-out: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:600px;height:600px;overflow:hidden;background:var(--black)}body{color:var(--white);font-family:Arial,Helvetica,sans-serif;font-size:16px;letter-spacing:.02em;-webkit-user-select:none;user-select:none}button{color:inherit;font:inherit}#app{position:relative;width:600px;height:600px;padding:8px;overflow:hidden;isolation:isolate}#sneaker-canvas{position:absolute;inset:0;z-index:0;width:600px;height:600px;pointer-events:none}.screen{position:absolute;inset:8px;z-index:2;display:flex;flex-direction:column}.screen.screen-enter{animation:screen-in .36s var(--ease-out) both}.hidden{display:none!important}.brand-lockup{padding:18px 18px 0}.eyebrow,.screen-note,.readout-label,.page-count,.menu-index,.library-hint{font-size:14px;font-weight:700;letter-spacing:.2em}.eyebrow{color:var(--muted)}.brand-lockup h1,.page-heading h1{font-size:36px;font-weight:900;letter-spacing:.045em;line-height:.94}.brand-title-row{display:flex;align-items:flex-end;gap:10px}.version-tag{padding-bottom:2px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1}.screen-note{margin-top:12px;color:var(--muted);font-size:12px}.home-rail{display:flex;width:292px;flex-direction:column;gap:2px;margin-top:auto;padding:0 10px 10px}.focusable{min-height:56px;border:2px solid transparent;border-radius:0;background:transparent;opacity:.58;transition:min-height .26s var(--ease-out),height .26s var(--ease-out),flex-basis .26s var(--ease-out),width .26s var(--ease-out),transform .26s var(--ease-out),background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease}.focusable:focus{outline:none;border-color:var(--white);background:var(--white);color:var(--ink);opacity:1;transform:translate(10px);box-shadow:0 12px 34px #00000047}.focusable:active{transform:translate(10px) scale(.97)}.menu-tile{display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:10px 14px;text-align:left;font-size:15px;font-weight:900;letter-spacing:.06em}.menu-tile:focus{width:282px;min-height:82px}.menu-index{color:var(--muted);font-size:11px}.menu-tile:not(:focus) .menu-index,.config-selector:not(:focus) .control-hint,.style-card:not(:focus) .style-meta{opacity:0;transform:translateY(4px)}.menu-index,.control-hint,.style-meta{transition:opacity .18s ease 60ms,transform .22s var(--ease-out) 60ms}.menu-tile:focus .menu-index,.style-card:focus .style-meta,.config-selector:focus .readout-label,.config-selector:focus .control-hint{color:#33333c}.page-header{display:grid;grid-template-columns:88px 1fr 88px;align-items:stretch;height:88px;background:transparent;border-bottom:1px solid var(--line-soft)}.config-header{grid-template-columns:88px 1fr 88px}.back-button,.header-action{width:88px;height:88px;border-color:transparent;background:transparent;font-size:34px;font-weight:900}.header-action{font-size:14px;letter-spacing:.1em}.page-heading{display:flex;min-width:0;flex-direction:column;justify-content:center;padding-left:18px}.page-heading h1{overflow:hidden;font-size:30px;text-overflow:ellipsis;white-space:nowrap}.page-count{align-self:center;color:var(--muted);font-size:12px;letter-spacing:.08em;text-align:center}.model-message{position:absolute;top:286px;left:50%;z-index:3;transform:translate(-50%);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.2em;white-space:nowrap}.model-message-config{top:300px}.model-message.ready{opacity:0;transition:opacity .24s ease}.tweak-panel{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding:8px 10px 10px;background:transparent}.config-selector{position:relative;display:flex;width:100%;height:58px;min-height:58px;flex-direction:column;align-items:center;justify-content:center;background:transparent;text-align:center}.config-selector:focus{height:82px;min-height:82px}.style-selector{z-index:3;width:calc(100% - 20px);height:58px;flex:0 0 58px;margin:8px 10px 0}.style-selector:focus{height:82px;flex-basis:82px}.config-selector strong{max-width:100%;overflow:hidden;font-size:18px;font-weight:900;letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap}.config-selector:focus strong{font-size:25px;transition:font-size .26s var(--ease-out)}.selection-change{animation:selection-change .3s var(--ease-out)}.readout-label{color:var(--muted);font-size:10px}.control-hint{position:absolute;right:10px;bottom:7px;color:#777784;font-size:8px;font-weight:800;letter-spacing:.1em}.progress-dots,.material-visualizer{display:flex;gap:5px;height:8px;margin-top:7px}.dot{width:7px;height:7px;background:#63636f}.dot.active{width:18px;background:var(--white)}.config-selector:focus .dot.active{background:var(--hot)}.config-selector:focus .dot:not(.color-dot){background:#777784}.config-selector:focus .color-dot.active{outline-color:var(--ink)!important}.texture-dot{border:1px solid rgba(255,255,255,.55);background-color:#555563}.split-content{position:relative;flex:1;min-height:0;padding-top:8px}.style-list{position:relative;z-index:4;display:flex;width:264px;height:476px;flex-direction:column;gap:2px;overflow-y:auto;padding:0 8px 88px 0;scrollbar-width:none}.style-list::-webkit-scrollbar{display:none}.style-list:after{content:"";position:fixed;bottom:8px;left:8px;width:264px;height:64px;background:linear-gradient(to top,#000 8%,transparent 100%);pointer-events:none}.style-card{display:flex;width:248px;min-height:56px;flex:0 0 56px;flex-direction:column;align-items:flex-start;justify-content:center;padding:12px 16px;text-align:left}.style-card:focus{width:258px;min-height:88px;flex-basis:88px}.style-card strong{font-size:19px;font-weight:900;letter-spacing:.06em}.locked-card{border-style:dashed;color:var(--muted)}.locked-card:focus{color:var(--ink)}.style-meta{margin-top:5px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.1em}.library-hint{position:absolute;right:18px;bottom:18px;z-index:3;width:260px;color:var(--muted);font-size:11px;line-height:1.55;text-align:right}.empty-saved{width:248px;padding:20px;border:3px solid var(--line);background:var(--surface);color:var(--muted);font-size:15px;font-weight:700;line-height:1.5}.toast{position:absolute;top:24px;left:50%;z-index:20;max-width:536px;transform:translate(-50%,-140%);padding:15px 22px;border:3px solid var(--white);background:var(--surface);color:var(--white);font-size:14px;font-weight:800;letter-spacing:.08em;text-align:center;transition:transform .22s ease;visibility:hidden}@keyframes screen-in{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes selection-change{0%{transform:scale(.9);opacity:.4}65%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}.toast.visible{transform:translate(-50%);visibility:visible}@media(prefers-reduced-motion:reduce){.focusable,.toast,.screen.screen-enter,.selection-change{transition:none;animation:none}}