@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--ink:#2d1b3d;--ink-soft:#4a3258;--cream:#fff5f0;--cream-warm:#ffe9dd;--tassel:#ff6b8a;--tassel-soft:#ffe0e6;--accent:#8b5cf6;--accent-soft:#ede4fe;--butter:#ffd24b;--sakura:#ff8fa8;--lawn:#4fb87a;--line:#2d1b3d1a;--muted:#2d1b3d8c;--muted-2:#2d1b3d52}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--cream);height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:PingFang SC,-apple-system,BlinkMacSystemFont,Helvetica Neue,sans-serif}.serif{font-family:Noto Serif SC,Songti SC,serif;font-weight:700}.mono{font-family:JetBrains Mono,ui-monospace,monospace}.stage{background:var(--cream);width:100%;max-width:480px;height:100dvh;margin:0 auto;position:relative;overflow:hidden}.mp-nav{letter-spacing:.5px;height:44px;color:var(--ink);justify-content:center;align-items:center;font-size:17px;font-weight:600;display:flex;position:relative}.screen{background:var(--cream);flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.screen-body{-webkit-overflow-scrolling:touch;flex:1;padding-bottom:100px;overflow:hidden auto}.screen-body::-webkit-scrollbar{width:0}.h-rail{scroll-snap-type:x mandatory;gap:12px;padding:4px 20px 16px;display:flex;overflow-x:auto}.h-rail::-webkit-scrollbar{display:none}.h-rail>*{scroll-snap-align:start;flex-shrink:0}.preset-card{cursor:pointer;border-radius:18px;flex-direction:column;width:124px;transition:transform .18s cubic-bezier(.3,.7,.4,1),box-shadow .18s;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 2px #2d1b3d0f,0 6px 16px #2d1b3d0a}.preset-card.active{box-shadow:0 0 0 3px var(--tassel), 0 1px 2px #2d1b3d0f, 0 10px 24px #ff6b8a40;transform:translateY(-2px)}.preset-card .thumb{align-items:flex-end;height:156px;padding:10px;display:flex;position:relative}.preset-card .thumb:after{content:"";background:linear-gradient(#0000 40%,#00000073 100%);position:absolute;inset:0}.preset-card .thumb-tag{z-index:1;letter-spacing:.08em;color:#ffffffd9;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:10px;position:relative}.preset-card .meta{background:#fff;flex:1;padding:10px 12px}.preset-card .meta-title{color:var(--ink);font-size:14px;font-weight:600;line-height:1.3}.preset-card .meta-sub{color:var(--muted);margin-top:2px;font-size:11px}.preset-card .check{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2;background:#fff6;border:1.5px solid #fffc;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;display:flex;position:absolute;top:8px;right:8px}.preset-card.active .check{background:var(--tassel);border-color:var(--tassel)}.outfit-card{cursor:pointer;text-align:center;width:88px}.outfit-card .avatar{border-radius:50%;width:80px;height:80px;margin:0 auto;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden;box-shadow:0 4px 12px #2d1b3d14}.outfit-card .avatar.has-image{background-position:50%;background-size:cover}.outfit-card .avatar.has-image:after{content:"";pointer-events:none;background:radial-gradient(circle at 28% 22%,#ffffff47,#0000 34%),linear-gradient(#2d1b3d05,#2d1b3d1f);position:absolute;inset:0}.outfit-card .avatar-image{object-fit:cover;width:100%;height:100%;display:block;transform:scale(1.04)}.outfit-card.active .avatar{box-shadow:0 0 0 3px var(--tassel), 0 8px 18px #ff6b8a4d;transform:scale(1.04)}.outfit-card .avatar-glyph{letter-spacing:-.04em;justify-content:center;align-items:center;font-family:Noto Serif SC,serif;font-size:32px;font-weight:900;display:flex;position:absolute;inset:0}.outfit-card .name{color:var(--ink);margin-top:8px;font-size:12px;font-weight:500;line-height:1.3}.outfit-card .tag{color:var(--muted-2);margin-top:2px;font-family:JetBrains Mono,monospace;font-size:10px}.style-card{cursor:pointer;width:116px}.style-card .style-swatch{background:linear-gradient(135deg, var(--accent-soft) 0%, var(--tassel-soft) 100%);background-position:50%;background-size:cover;border:1.5px solid #0000;border-radius:14px;align-items:flex-end;height:64px;padding:8px 10px;transition:border-color .18s,box-shadow .18s;display:flex;position:relative;overflow:hidden}.style-card .style-swatch.has-image:after{content:"";pointer-events:none;background:linear-gradient(#2d1b3d05 0%,#2d1b3d57 100%);position:absolute;inset:0}.style-card.active .style-swatch{border-color:var(--tassel);box-shadow:0 0 0 3px #ff6b8a2e,0 8px 18px #ff6b8a33}.style-card.active .style-swatch:not(.has-image){background:linear-gradient(135deg, var(--accent) 0%, var(--tassel) 100%)}.style-card .style-tag{z-index:1;letter-spacing:.08em;color:#2d1b3d8c;font-family:JetBrains Mono,monospace;font-size:10px;position:relative}.style-card .style-swatch.has-image .style-tag{color:#ffffffeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#2d1b3d42;border:1px solid #ffffff38;border-radius:999px;padding:3px 6px}.style-card.active .style-tag{color:#ffffffd9}.style-card .style-check{background:var(--tassel);z-index:1;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;display:flex;position:absolute;top:8px;right:8px}.style-card .style-name{color:var(--ink);margin-top:8px;font-size:13px;font-weight:600;line-height:1.3}.style-card .style-sub{color:var(--muted);margin-top:2px;font-size:11px;line-height:1.3}.btn-primary{background:var(--ink);width:100%;height:52px;color:var(--cream);letter-spacing:.5px;cursor:pointer;border:none;border-radius:16px;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:600;transition:transform .12s;display:flex;position:relative;overflow:hidden}.btn-primary:active{transform:scale(.98)}.btn-primary:before{content:"";background:linear-gradient(90deg,#0000,#ffffff40,#0000);width:18px;height:100%;animation:2.8s linear infinite shimmer;position:absolute;top:0;left:-20%}.btn-ghost{height:44px;color:var(--ink);cursor:pointer;background:#2d1b3d0f;border:none;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-size:14px;font-weight:500;display:flex}.cta-dock{padding:14px 20px;padding-bottom:max(28px, env(safe-area-inset-bottom,28px));background:linear-gradient(180deg, transparent 0%, #fff5f0f2 30%, var(--cream) 60%);z-index:10;position:absolute;bottom:0;left:0;right:0}.sheet-backdrop{z-index:90;background:#0000006b;animation:.2s ease-out fadein;position:absolute;inset:0}.sheet{z-index:91;padding-bottom:env(safe-area-inset-bottom,0px);background:#f7f7f7;border-radius:18px 18px 0 0;animation:.28s cubic-bezier(.2,.8,.2,1) slideup;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.upload-slot{background:#fff;border-radius:22px;position:relative;overflow:hidden;box-shadow:0 1px 3px #2d1b3d0f,0 12px 32px #2d1b3d14}.upload-slot-empty{cursor:pointer;background:repeating-linear-gradient(45deg,#0000 0 12px,#2d1b3d08 12px 13px);border:1.5px dashed #2d1b3d2e;flex-direction:column;justify-content:center;align-items:center;gap:10px;height:200px;display:flex}.result-photo{border-radius:24px;position:relative;overflow:hidden;box-shadow:0 4px 12px #2d1b3d14,0 24px 60px #2d1b3d2e}.chip{height:26px;color:var(--ink);background:#2d1b3d0f;border-radius:999px;align-items:center;gap:6px;padding:0 10px;font-size:12px;font-weight:500;display:inline-flex}.chip-warm{background:var(--tassel-soft);color:var(--tassel)}.dot{border-radius:50%;width:6px;height:6px;display:inline-block}.safe-top{height:env(safe-area-inset-top,0px)}@keyframes shimmer{0%{left:-20%}to{left:120%}}@keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes slideup{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes float-tile{0%,to{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-6px) rotate(calc(var(--r,0deg) + 1deg))}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-ring{0%{opacity:.7;transform:scale(.8)}to{opacity:0;transform:scale(2.5)}}@keyframes scan{0%{transform:translateY(-100%)}to{transform:translateY(200%)}}