:root{--surface-05:#2622220d;--surface-10:#2622221a;--surface-20:#d4d4d4;--surface-30:#2622224d;--surface-100:#f5f4f4;--surface-150:#786c6c;--surface-200:#262222;--primary-10:transparent;--primary-100:#b0dcf7;--primary-200:#6b9fd4;--primary-300:#3b82f6;--danger-100:#ef4444;--success-100:#22c55e;--text-primary:#262222;--text-muted:#5b5a5a;--gradient-clear-sky:linear-gradient(180deg, #78c3f1 0%, #b4dbf2 70.2%, #f5f4f4 100%);--font-serif:"Hedvig Letters Serif", Georgia, serif;--font-mono:"DM Mono", ui-monospace, monospace;--font-sans:"DM Sans", system-ui, sans-serif;--radius-1:4px;--radius-2:8px;--radius-5:20px;--radius-6:24px;--radius-9:36px;--radius-10:200px;--radius-lg:20px;--radius-md:14px;--radius-sm:8px;--space-0:4px;--space-1:8px;--space-2:12px;--space-3:16px;--space-4:20px;--space-5:24px;--shadow-card:0px 13px 28px #1d1d1d0d, 0px 51px 51px #1d1d1d0a, 0px 116px 69px #1d1d1d08, 0px 206px 82px #1d1d1d03, 0px 322px 90px #1d1d1d00}*{box-sizing:border-box}html,body{background:var(--surface-150);color:var(--text-primary);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;margin:0;padding:0}button,input{font-family:inherit}button{cursor:pointer}.uppercase{text-transform:uppercase}.type-title-lg{font-family:var(--font-serif);letter-spacing:-1.2px;font-size:24px;font-weight:400;line-height:28px}.type-header-lg{font-family:var(--font-serif);letter-spacing:-.9px;font-size:18px;font-weight:400;line-height:22px}.type-body-sm{font-family:var(--font-mono);letter-spacing:-.28px;font-size:14px;line-height:18px}.type-caption{font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;font-size:12px;line-height:16px}.type-caption-2{font-family:var(--font-mono);letter-spacing:-.15px;text-transform:uppercase;font-size:10px;line-height:16px}.weather-bg{flex-direction:column;min-height:calc(100% + 96px);margin-bottom:-96px;transition:background .8s;display:flex;position:relative;overflow:hidden}.wbg-content{z-index:2;flex-direction:column;flex:1;padding-bottom:96px;display:flex;position:relative}.wbg-cloud{opacity:.85;z-index:1;pointer-events:none;background-image:url(/images/cloud.png);background-position:50%;background-size:cover;width:210%;height:52%;animation:60s linear infinite drift;position:absolute;top:-8%;left:-55%}.scene-clear-night .wbg-cloud,.scene-cloudy-night .wbg-cloud{opacity:.22;filter:brightness(.6)saturate(.7)}@keyframes drift{0%{transform:translate(0)}to{transform:translate(15%)}}.wbg-stars{z-index:1;position:absolute;inset:0}.wbg-stars span{opacity:.7;background:#fff;border-radius:50%;width:2px;height:2px;animation:2.4s ease-in-out infinite twinkle;position:absolute}@keyframes twinkle{0%,to{opacity:.25}50%{opacity:.9}}.wbg-rain{z-index:1;pointer-events:none;position:absolute;inset:0}.wbg-rain span{background:#ffffff8c;width:1.5px;height:16px;animation:linear infinite fall;position:absolute;top:-10%}@keyframes fall{0%{transform:translateY(-10%)}to{transform:translateY(120vh)}}.wbg-snow{z-index:1;pointer-events:none;position:absolute;inset:0}.wbg-snow span{background:#ffffffd9;border-radius:50%;width:5px;height:5px;animation:linear infinite snowfall;position:absolute;top:-5%}@keyframes snowfall{0%{transform:translateY(-5%)translate(0)}to{transform:translateY(115vh)translate(20px)}}.wbg-fog{z-index:1;background:linear-gradient(#0000 0%,#fff6 50%,#0000 100%);animation:12s ease-in-out infinite alternate fogdrift;position:absolute;inset:0}@keyframes fogdrift{0%{opacity:.4}to{opacity:.8}}.demo-page{height:100vh;position:relative;overflow:hidden}.phone-scale{width:393px;height:852px;transform:translate(-50%, -50%) scale(min(1, calc((100vw - 32px) / 393px), calc((100vh - 32px) / 852px)));transform-origin:50%;position:absolute;top:50%;left:50%}.phone{background:var(--surface-100);border-radius:40px;flex-direction:column;width:393px;height:852px;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000059}.screen{-webkit-overflow-scrolling:touch;flex:1;padding-bottom:96px;position:relative;overflow:hidden auto}.screen-no-nav{padding-bottom:0}.screen::-webkit-scrollbar{display:none}.navbar{padding:0 20px calc(20px + env(safe-area-inset-bottom,0px));z-index:50;pointer-events:none;justify-content:center;display:flex;position:absolute;bottom:0;left:0;right:0}.navbar-pill{pointer-events:auto;background:var(--surface-100);border:1px solid var(--surface-200);border-radius:var(--radius-9);height:60px;box-shadow:var(--shadow-card);align-items:center;gap:0;padding:4px;display:flex;position:relative}.nav-btn{z-index:1;background:0 0;border:none;justify-content:center;align-items:center;width:70px;height:52px;padding:0;display:flex;position:relative}.nav-indicator-slide{background:var(--surface-10);z-index:0;pointer-events:none;border-radius:999px;width:40px;height:40px;transition:transform .45s cubic-bezier(.34,1.56,.64,1);position:absolute;top:10px;left:19px}.title-lg{font-family:var(--font-serif);letter-spacing:-1.2px;margin:0;font-size:24px;line-height:28px}.caption{font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--surface-150);font-size:12px;line-height:16px}.pill{border-radius:var(--radius-5);background:var(--surface-100);border:1px solid var(--surface-200);box-shadow:var(--shadow-card);font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--text-primary);align-items:center;gap:8px;padding:4px 16px;font-size:12px;display:inline-flex}.top-bar{justify-content:space-between;align-items:center;padding:18px 20px 8px;display:flex}.back-link{font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;color:var(--text-primary);background:0 0;border:none;align-items:center;gap:8px;padding:4px 0;font-size:14px;display:inline-flex}.reset-btn{background:var(--surface-100);border:1px solid var(--surface-200);color:var(--text-primary);font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;border-radius:var(--radius-10);box-shadow:var(--shadow-card);padding:6px 12px;font-size:11px}.badge{background:var(--surface-200);color:var(--surface-100);border-radius:999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;display:flex;position:absolute;top:-4px;right:-4px}.outfit-stack{flex-direction:column;align-items:center;padding:8px 24px 0;display:flex}.outfit-slot{justify-content:center;align-items:center;display:flex;position:relative}.outfit-stack>.outfit-slot:first-child{z-index:3;width:168px;height:229px}.outfit-stack>.outfit-slot:nth-child(2){z-index:2;width:173px;height:236px;margin-top:-115px}.outfit-stack>.outfit-slot:nth-child(3){z-index:1;width:94px;height:65px;margin-top:-40px}.outfit-slot img{object-fit:contain;filter:drop-shadow(0 8px 14px #00000026);width:100%;height:100%}.outfit-slot img.outfit-accessory{z-index:4;object-fit:contain;filter:drop-shadow(0 6px 10px #0000002e);width:56px;height:auto;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.outfit-slot-empty{color:var(--surface-150);text-align:center;padding:20px;font-size:12px}.icon-fab-stack{flex-direction:column;gap:8px;display:flex}.icon-fab{border-radius:var(--radius-10);background:var(--surface-100);border:1px solid var(--surface-200);width:40px;height:40px;box-shadow:var(--shadow-card);color:var(--text-primary);justify-content:center;align-items:center;display:flex}.icon-fab.filled{background:var(--surface-200);color:var(--surface-100);border-color:var(--surface-200)}.step-nav{justify-content:space-between;align-items:center;padding:0 20px;display:flex}.step-nav-link{font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;color:var(--text-primary);background:0 0;border:none;align-items:center;gap:8px;padding:6px 0;font-size:14px;display:inline-flex}.progress-dots{justify-content:center;gap:6px;padding:16px 0 8px;display:flex}.progress-dot{background:var(--surface-10);border-radius:999px;width:6px;height:6px}.progress-dot.active{background:var(--surface-200)}.activity-grid{grid-template-columns:1fr 1fr;gap:12px;padding:8px 20px;display:grid}.activity-card{border-radius:var(--radius-5);background:var(--surface-05);border:1px solid #0000;flex-direction:column;align-items:center;gap:8px;padding:12px;display:flex}.activity-card.selected{background:var(--primary-100);border-color:var(--surface-200)}.activity-card img{object-fit:cover;border-radius:var(--radius-2);width:100%;height:64px}.activity-card span{font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;color:var(--text-primary);font-size:14px}.chip-grid{grid-template-columns:1fr 1fr;gap:10px;padding:8px 20px;display:grid}.vibe-chip{border-radius:var(--radius-1);background:var(--surface-05);height:38px;font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;color:var(--text-primary);border:1px solid #0000;font-size:14px}.vibe-chip.selected{background:var(--primary-100);border-color:var(--surface-200)}.tag-chip{border:1px solid var(--surface-30);height:24px;font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--surface-150);background:0 0;border-radius:999px;align-items:center;padding:0 14px;font-size:12px;display:inline-flex}.tag-chip.selected{background:var(--surface-200);border-color:var(--surface-200);color:var(--surface-100)}.colour-swatch{border:none;border-radius:13px;width:25px;height:25px;padding:0}.colour-swatch.white{border:1px solid var(--surface-30)}.colour-swatch.selected{outline:2.5px solid var(--surface-200);outline-offset:1px}.filter-footer{justify-content:space-between;align-items:center;margin-top:28px;display:flex}.filter-reset-btn{border:1px solid var(--surface-150);border-radius:var(--radius-1);font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--surface-150);background:0 0;padding:8px 12px;font-size:12px}.filter-apply-btn{border-radius:var(--radius-1);background:var(--surface-200);font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--surface-100);border:none;padding:8px 12px;font-size:12px}.add-tag-input{border-radius:var(--radius-10);background:var(--surface-200);height:30px;color:var(--surface-100);width:100%;font-family:var(--font-mono);border:none;align-items:center;gap:10px;padding:0 16px;font-size:14px;display:flex}.add-tag-input input{color:var(--surface-100);font-family:var(--font-mono);background:0 0;border:none;outline:none;width:100%;font-size:14px}.add-tag-input input::placeholder{color:#f5f4f4b3}.btn-primary{border-radius:var(--radius-1);border:1px solid var(--surface-200);background:var(--surface-200);width:100%;color:var(--surface-100);font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;padding:12px;font-size:14px}.btn-primary:disabled{background:var(--surface-20);border-color:var(--surface-20);color:var(--surface-150)}.btn-secondary{border-radius:var(--radius-10);border:1px solid var(--surface-200);background:var(--surface-100);width:100%;color:var(--text-primary);font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;padding:12px;font-size:14px}.scan-frame{background:var(--surface-100);border-radius:16px;width:180px;height:220px;margin:0 auto;position:relative;overflow:hidden}.scan-frame img{object-fit:cover;filter:saturate(.85);width:100%;height:100%}.scan-line{background:linear-gradient(90deg,#0000,#7fd3ff,#0000);height:3px;animation:1.4s ease-in-out infinite scan-sweep;position:absolute;left:0;right:0;box-shadow:0 0 12px 2px #7fd3ffcc}@keyframes scan-sweep{0%{top:0}50%{top:96%}to{top:0}}.sheet-overlay{z-index:100;background:#26222273;align-items:flex-end;animation:.2s ease-out overlay-fade-in;display:flex;position:absolute;inset:0}.sheet{background:var(--surface-100);border-radius:var(--radius-5) var(--radius-5) 0 0;will-change:transform;width:100%;max-height:680px;padding:10px 20px 28px;animation:.32s cubic-bezier(.32,.72,0,1) sheet-slide-up;overflow-y:auto}.screen-slide-up-in{will-change:transform;animation:.36s cubic-bezier(.32,.72,0,1) sheet-slide-up}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sheet-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.added-toast{animation:.22s cubic-bezier(.32,.72,0,1) toast-slide-up}@keyframes toast-slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{z-index:100;background:#00000059;justify-content:center;align-items:center;padding:0 24px;animation:.22s ease-out overlay-fade-in;display:flex;position:absolute;inset:0}.modal-card{background:var(--surface-100);width:100%;box-shadow:var(--shadow-card);border-radius:8px;max-height:88%;padding:23px 18px 20px;animation:.22s ease-out modal-fade-in;overflow-y:auto}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes push-in-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes push-in-from-left{0%{transform:translate(-28%)}to{transform:translate(0)}}.screen-push-forward{animation:.3s cubic-bezier(.32,.72,0,1) push-in-from-right}.screen-push-back{animation:.3s cubic-bezier(.32,.72,0,1) push-in-from-left}.sheet-handle{background:var(--surface-20);border-radius:999px;width:36px;height:4px;margin:4px auto 14px}.reset-fab{z-index:100;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--text-primary,#1c1c1e);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:#ffffffeb;border:1px solid #0000001a;border-radius:999px;padding:7px 14px;font-family:inherit;font-size:11px;font-weight:600;position:fixed;top:16px;right:16px;box-shadow:0 2px 12px #00000024}.reset-fab:hover{background:#fff}.empty-note{text-align:center;color:var(--surface-150);padding:40px 24px;font-size:13px;line-height:1.5}.closet-header{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:20px 20px 0;display:flex}.closet-avatar{object-fit:cover;background:var(--surface-20);border-radius:999px;width:71px;height:71px}.closet-search-row{justify-content:space-between;align-items:center;gap:12px;padding:38px 20px 30px;display:flex}.closet-search-input{border:1px solid var(--surface-30);border-radius:var(--radius-1);flex:1;align-items:center;gap:12px;padding:8px 12px;display:flex}.closet-search-input input{font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:12px}.closet-search-input input::placeholder{color:var(--surface-150)}.closet-link{font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--surface-150);white-space:nowrap;background:0 0;border:none;align-items:center;gap:8px;font-size:12px;display:inline-flex}.closet-section{padding:0 20px 30px}.closet-section-head{font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;color:var(--surface-150);justify-content:space-between;align-items:center;margin-bottom:16px;font-size:14px;display:flex}.closet-section-head .see-all{letter-spacing:-.18px;font-size:12px}.closet-row{gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.closet-row.wrap{flex-wrap:wrap}.closet-thumb{border-radius:var(--radius-2);background:var(--surface-05);border:none;flex:none;justify-content:center;align-items:center;width:100px;height:100px;padding:8px;display:flex}.closet-thumb img{object-fit:contain;max-width:100%;max-height:100%}.closet-grid-cards{grid-template-columns:1fr 1fr;gap:13px;padding:4px 20px 24px;display:grid}.closet-grid-card{background:0 0;border:none;flex-direction:column;align-items:center;gap:12px;padding:8px 16px;display:flex}.closet-grid-collage{justify-content:center;align-items:center;width:100%;height:96px;display:flex;position:relative}.closet-grid-collage img{object-fit:contain;max-width:68%;max-height:92px;position:absolute}.closet-grid-label{font-family:var(--font-mono);letter-spacing:-.28px;text-transform:uppercase;color:var(--surface-200);text-align:center;white-space:nowrap;font-size:14px}.category-grid{grid-template-columns:1fr 1fr;gap:12px;padding:4px 20px 24px;display:grid}.category-thumb{aspect-ratio:170/149;border-radius:var(--radius-2);background:var(--surface-05);border:none;justify-content:center;align-items:center;width:100%;padding:12px;display:flex;position:relative}.category-thumb img{object-fit:contain;max-width:100%;max-height:100%}.category-thumb.dashed{border:1.5px dashed var(--surface-30);color:var(--surface-150);background:0 0}.piece-check{color:var(--surface-200);position:absolute;top:8px;right:8px}.mustwear-cell{flex-direction:column;align-items:center;gap:8px;display:flex}.mustwear-cell span{font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--text-primary);text-align:center;font-size:12px}.time-row{justify-content:space-between;align-items:center;padding:14px 20px;display:flex}.time-row-label{font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--surface-150);font-size:13px}.time-pill{border-radius:var(--radius-1);background:var(--surface-05);font-family:var(--font-mono);letter-spacing:-.18px;color:var(--text-primary);border:1px solid #0000;align-items:center;gap:8px;padding:8px 16px;font-size:14px;display:inline-flex}.time-pill.open{border-color:var(--surface-200)}.time-options{background:var(--surface-100);border:1px solid var(--surface-200);border-radius:var(--radius-2);width:140px;max-height:190px;box-shadow:var(--shadow-card);z-index:20;margin-top:4px;position:absolute;right:20px;overflow-y:auto}.time-option{text-align:left;width:100%;font-family:var(--font-mono);letter-spacing:-.18px;color:var(--text-primary);background:0 0;border:none;padding:9px 14px;font-size:13px;display:block}.time-option.selected{background:var(--primary-100)}.pin-badge{justify-content:center;align-items:center;width:20px;height:20px;display:flex}.closet-make-outfit{border-radius:var(--radius-1);background:var(--surface-100);border:1px solid var(--surface-200);font-family:var(--font-mono);letter-spacing:-.18px;text-transform:uppercase;color:var(--text-primary);z-index:40;align-items:center;gap:8px;padding:12px 16px;font-size:12px;display:inline-flex;position:absolute;bottom:96px;left:50%;transform:translate(-50%)}html.embed,html.embed body{background:0 0}html.embed .phone-scale{transform:translate(-50%, -50%) scale(min(calc(100vw / 393px), calc(100vh / 852px)))}html.embed .phone{box-shadow:none}@media (hover:hover) and (pointer:fine){html.embed,html.embed *{cursor:none!important}}
