:root{--accent:#a3341f;--paper:#f3ede2;--ink:#1a1a1a;--bg:#e4ded0;--serif:"Instrument Serif", Georgia, serif;--sans:"Inter Tight", -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;margin:0;padding:0}#app{height:100%;min-height:100dvh}button{cursor:pointer;font-family:inherit}::-webkit-scrollbar{width:0;height:0}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.app-shell{background:var(--paper);flex-direction:column;width:100%;max-width:480px;min-height:100dvh;margin:0 auto;display:flex}@media (width>=600px){body{background:var(--bg);background-image:repeating-linear-gradient(45deg,#0000,#0000 28px,#00000005 28px 29px),repeating-linear-gradient(-45deg,#0000,#0000 28px,#00000005 28px 29px);justify-content:center;align-items:flex-start;min-height:100dvh;padding:40px 0 80px;display:flex}.app-shell{border-radius:28px;height:85dvh;min-height:680px;max-height:900px;overflow:hidden;box-shadow:0 12px 60px #00000021,0 2px 8px #00000012}}.urgency-dots{align-items:center;gap:3px;display:inline-flex}.urgency-dots .dot{background:#00000026;border-radius:99px;width:5px;height:5px}.urgency-dots .dot.active{background:var(--accent)}.stain-card{all:unset;cursor:pointer;background:0 0;border-radius:18px;flex-direction:column;padding:8px;transition:background .16s;display:flex}.stain-card:hover,.stain-card:active{background:#0000000a}.stain-card .swatch{aspect-ratio:1;background:#00000005;border:1px solid #00000014;border-radius:14px;justify-content:center;align-items:center;width:100%;display:flex;container-type:inline-size}.stain-card .stain-icon{font-size:60cqi;line-height:1}.stain-card .card-footer{justify-content:space-between;align-items:baseline;margin-top:8px;padding:0 4px;display:flex}.stain-card .card-name{font-family:var(--serif);color:var(--ink);letter-spacing:-.2px;font-size:15px;font-weight:400;line-height:1.1}.home{background:var(--paper);flex-direction:column;height:100%;display:flex}.home .top-bar{justify-content:space-between;align-items:center;padding:8px 20px 6px;display:flex}.home .app-version{font-family:var(--mono);letter-spacing:1.5px;color:#00000059;font-size:10px}.home .lang-toggle{all:unset;cursor:pointer;font-size:11px;font-family:var(--mono);letter-spacing:1px;color:#0006;text-transform:uppercase;border:1px solid #00000026;border-radius:999px;align-items:center;gap:4px;padding:6px 10px;display:flex}.home .lang-toggle .sep{opacity:.4}.home .lang-toggle span.active{color:var(--ink);font-weight:700}.home .hero{padding:10px 20px 18px}.home .hero-title{font-family:var(--serif);letter-spacing:-1.5px;color:var(--ink);margin:0 0 10px;font-size:44px;font-style:italic;font-weight:400;line-height:.95}.home .hero-sub{font-family:var(--sans);color:#0009;max-width:350px;margin:0;font-size:14px;line-height:1.4}.home .search-wrap{padding:0 20px 12px}.home .search-box{background:#fff;border:1px solid #00000014;border-radius:999px;align-items:center;gap:10px;padding:11px 16px;display:flex}.home .search-icon{color:#0006;flex-shrink:0}.home .search-input{font-family:var(--sans);color:var(--ink);background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:14px}.home .search-input::-webkit-search-cancel-button{display:none}.home .tag-rail{white-space:nowrap;-webkit-overflow-scrolling:touch;gap:6px;padding:0 20px 6px;display:flex;overflow-x:auto}.home .tag-btn{all:unset;cursor:pointer;font-family:var(--sans);color:#0000008c;white-space:nowrap;background:0 0;border:1px solid #0000001f;border-radius:999px;padding:6px 12px;font-size:12px;transition:all .14s}.home .tag-btn.active{background:var(--ink);color:var(--paper);border-color:#0000}.home .grid-scroll{-webkit-overflow-scrolling:touch;flex:1;padding:14px 10px 28px;overflow-y:auto}.home .stain-grid{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.home .empty{text-align:center;color:#0006;font-family:var(--serif);padding:40px;font-size:20px;font-style:italic}.glyph{flex-shrink:0;display:inline-flex}.detail{background:var(--paper);flex-direction:column;height:100%;display:flex}.detail .top-bar{justify-content:space-between;align-items:center;padding:8px 20px 6px;display:flex}.detail .back-btn{all:unset;cursor:pointer;font-family:var(--mono);letter-spacing:2px;color:#00000080;text-transform:uppercase;font-size:10px}.detail .tag-label{font-family:var(--mono);letter-spacing:2px;color:#00000080;text-transform:uppercase;font-size:10px}.detail .scroll-area{-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.detail .stain-header{align-items:center;gap:18px;padding:14px 20px 8px;display:flex}.detail .stain-preview{flex-shrink:0;width:104px;height:104px}.detail .stain-info{flex:1;min-width:0}.detail .stain-name{font-family:var(--serif);letter-spacing:-1px;color:var(--ink);margin:0;font-size:36px;font-style:italic;font-weight:400;line-height:1}.detail .urgency-row{align-items:center;gap:8px;margin-top:14px;display:flex}.detail .urgency-label{font-family:var(--sans);color:var(--accent);font-size:12px;font-weight:500}.detail .window-card{background:var(--ink);color:var(--paper);border-radius:14px;justify-content:space-between;align-items:center;margin:18px 20px 6px;padding:14px 16px;display:flex}.detail .window-label{font-family:var(--mono);letter-spacing:2px;opacity:.6;text-transform:uppercase;font-size:10px}.detail .window-value{font-family:var(--serif);margin-top:2px;font-size:26px;font-style:italic}.detail .section{padding:20px 20px 6px}.detail .age-section{padding-bottom:20px}.detail .section-title{font-family:var(--serif);color:var(--ink);margin:0 0 2px;font-size:22px;font-style:italic;font-weight:400}.detail .section-hint{font-family:var(--sans);color:#00000080;margin:0 0 12px;font-size:12px}.detail .pill-group{flex-wrap:wrap;gap:6px;display:flex}.detail .pill{all:unset;cursor:pointer;font-family:var(--sans);color:var(--ink);background:#fff;border:1px solid #0000001a;border-radius:999px;padding:8px 14px;font-size:13px;transition:all .14s}.detail .pill.active{background:var(--ink);color:var(--paper);border-color:#0000}.detail .age-group{gap:6px;margin-top:12px;display:flex}.detail .age-btn{all:unset;cursor:pointer;text-align:center;font-family:var(--sans);color:var(--ink);background:#fff;border:1px solid #0000001a;border-radius:14px;flex:1;padding:10px 8px;font-size:13px;transition:all .14s}.detail .age-btn.active{background:var(--accent);color:#fff;border-color:#0000}.detail .cta-bar{background:var(--paper);border-top:1px solid #0000000f;padding:12px 20px 20px}.detail .cta-btn{all:unset;cursor:pointer;background:var(--ink);width:100%;color:var(--paper);font-family:var(--serif);box-sizing:border-box;border-radius:14px;justify-content:center;align-items:center;gap:10px;padding:16px;font-size:20px;font-style:italic;display:flex}.tutorial{background:var(--paper);flex-direction:column;height:100%;display:flex}.tutorial .top-bar{justify-content:space-between;align-items:center;padding:8px 20px 6px;display:flex}.tutorial .back-btn{all:unset;cursor:pointer;font-family:var(--mono);letter-spacing:2px;color:#00000080;text-transform:uppercase;font-size:10px}.tutorial .step-counter{font-family:var(--mono);letter-spacing:2px;color:#00000080;font-size:10px}.tutorial .progress-wrap{padding:6px 20px 0}.tutorial .progress-bar{background:#00000014;border-radius:1px;height:2px;overflow:hidden}.tutorial .progress-fill{background:var(--accent);height:100%;transition:width .32s}.tutorial .scroll-area{-webkit-overflow-scrolling:touch;flex:1;padding:24px 24px 16px;overflow-y:auto}.tutorial .step-num{font-family:var(--serif);color:var(--accent);opacity:.2;pointer-events:none;-webkit-user-select:none;user-select:none;margin-bottom:-40px;margin-left:-6px;font-size:120px;font-style:italic;line-height:.8}.tutorial .glyph-wrap{width:100px;height:100px;color:var(--ink);margin-bottom:18px}.tutorial .step-title{font-family:var(--serif);color:var(--ink);letter-spacing:-.8px;margin:0 0 12px;font-size:34px;font-style:italic;font-weight:400;line-height:1.05}.tutorial .step-body{font-family:var(--sans);color:#000000bf;margin:0;font-size:16px;line-height:1.5}.tutorial .timer-card{background:#fff;border:1px solid #00000014;border-radius:14px;justify-content:space-between;align-items:center;margin-top:18px;padding:14px 16px;display:flex}.tutorial .timer-label{font-family:var(--mono);letter-spacing:2px;color:#00000080;text-transform:uppercase;font-size:10px}.tutorial .timer-display{font-family:var(--serif);color:var(--ink);font-size:32px;font-style:italic}.tutorial .timer-btn{all:unset;cursor:pointer;background:var(--accent);color:#fff;font-family:var(--sans);border-radius:999px;padding:10px 16px;font-size:13px;font-weight:500}.tutorial .card-micro{font-family:var(--mono);letter-spacing:1.5px;text-transform:uppercase;margin-right:8px;font-size:10px}.tutorial .tip-card{font-family:var(--sans);color:#000000a6;background:#0000000a;border-radius:12px;margin-top:14px;padding:12px 14px;font-size:13px;line-height:1.45}.tutorial .tip-card .card-micro{color:#00000073}.tutorial .warn-card{background:var(--accent);color:#fff;font-family:var(--sans);border-radius:12px;margin-top:14px;padding:12px 14px;font-size:13px;line-height:1.4}.tutorial .warn-card .card-micro{opacity:.7}.tutorial .fabric-note-card{font-family:var(--sans);color:var(--accent);background:#a3341f14;border:1px solid #a3341f33;border-radius:12px;margin-top:14px;padding:12px 14px;font-size:13px;line-height:1.45}.tutorial .fabric-note-card .card-micro{color:var(--accent);opacity:.7}.tutorial .nav-bar{border-top:1px solid #0000000f;gap:8px;padding:10px 20px 20px;display:flex}.tutorial .nav-prev{all:unset;cursor:pointer;font-family:var(--sans);color:var(--ink);background:#fff;border:1px solid #0000001a;border-radius:999px;padding:14px 20px;font-size:14px}.tutorial .nav-next{all:unset;cursor:pointer;text-align:center;background:var(--ink);color:var(--paper);font-family:var(--serif);border-radius:999px;flex:1;padding:14px 20px;font-size:17px;font-style:italic}.done{background:var(--paper);text-align:center;flex-direction:column;justify-content:center;height:100%;padding:20px;display:flex}.done .done-title{font-family:var(--serif);color:var(--ink);letter-spacing:-1.2px;margin:0 0 20px;font-size:48px;font-style:italic;font-weight:400;line-height:.95}.done .done-body{font-family:var(--sans);color:#0009;max-width:300px;margin:0 auto 40px;font-size:15px;line-height:1.5}.done .done-btn{all:unset;cursor:pointer;background:var(--accent);color:#fff;font-family:var(--serif);text-align:center;border-radius:14px;padding:16px;font-size:20px;font-style:italic}