:root{--paper:#f4ecd8;--soft-bg:#efe5d0;--ink:#2a2826;--muted:#7a7367;--line:#d9cdb4;--primary:#2e5266;--accent:#c84b31;--warm:#e5c07b;--serif:"Fraunces", Georgia, serif;--sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0;padding:0}input,textarea{-webkit-user-select:text;user-select:text}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--sans);background:var(--paper);color:var(--ink);overscroll-behavior:none;font-size:14px;line-height:1.5}.app{background:var(--paper);justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}.screen{background:var(--paper);flex-direction:column;width:100%;max-width:440px;height:100%;max-height:100dvh;display:flex;position:relative;overflow:hidden}@media (width>=600px){.app{background:#c8c2b4}.screen{border:1px solid #0000000f;border-radius:32px;height:min(90vh,900px);max-height:900px;box-shadow:0 4px 30px #0000001f}}.screen-content{flex-direction:column;flex:1;min-height:0;padding:28px 22px 22px;display:flex;overflow:hidden}.screen-content.scrollable{overflow-y:auto}.topbar{flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.topbar .step{font-family:var(--mono);color:var(--muted);letter-spacing:.02em;font-size:11px}.topbar .icon{width:32px;height:32px;color:var(--ink);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:18px;display:flex}.topbar .icon:active{background:var(--soft-bg)}.topbar .spacer{width:32px}.grow{flex-direction:column;flex:1;min-height:0;display:flex}.stack-2>*+*{margin-top:8px}.stack-3>*+*{margin-top:16px}.stack-4>*+*{margin-top:24px}.stack-5>*+*{margin-top:32px}.center-y{justify-content:center}.row{align-items:center;display:flex}.row-between{justify-content:space-between;align-items:center;display:flex}.h-display{font-family:var(--serif);letter-spacing:-.02em;color:var(--ink);font-size:28px;font-weight:600;line-height:1.2}.h-display.small{font-size:22px}.h-display.large{font-size:36px}.h-display.center{text-align:center}.body-text{color:var(--ink);font-size:14px;line-height:1.55}.muted{color:var(--muted);font-size:13px}.muted.small{font-size:11px}.mono{font-family:var(--mono)}.center{text-align:center}.btn-primary{background:var(--accent);width:100%;color:var(--paper);font-family:var(--sans);cursor:pointer;border:none;border-radius:14px;flex-shrink:0;padding:16px;font-size:15px;font-weight:600;transition:transform .1s,opacity .1s}.btn-primary:active{opacity:.92;transform:scale(.98)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{width:100%;color:var(--ink);border:1.5px solid var(--line);font-family:var(--sans);cursor:pointer;background:0 0;border-radius:14px;padding:14px;font-size:14px;font-weight:500}.btn-secondary:active{background:var(--soft-bg)}.btn-text{color:var(--muted);cursor:pointer;font-size:13px;font-family:var(--sans);background:0 0;border:none;padding:8px}.input{background:var(--soft-bg);width:100%;font-family:var(--sans);color:var(--ink);border:1.5px solid #0000;border-radius:12px;outline:none;padding:14px 16px;font-size:15px;transition:border-color .15s}.input:focus{border-color:var(--accent);background:var(--paper)}.input::placeholder{color:var(--muted)}textarea.input{resize:vertical;min-height:100px;font-family:var(--sans);line-height:1.5}.pixel-art{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.option-card{background:var(--soft-bg);cursor:pointer;border:1.5px solid #0000;border-radius:14px;padding:16px 18px;transition:all .15s}.option-card:active{transform:scale(.99)}.option-card.selected{border-color:var(--accent);background:#fff8f4}.option-card .option-label{color:var(--ink);font-size:15px;font-weight:500}.option-card .option-sub{color:var(--muted);margin-top:3px;font-size:12px}.gender-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.gender-card{background:var(--soft-bg);cursor:pointer;z-index:1;border:2px solid #0000;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:12px;height:240px;padding:18px 12px;transition:transform .18s ease-out,box-shadow .18s ease-out,background .15s,border-color .15s;display:flex;position:relative}.gender-card.selected{border-color:var(--accent);z-index:2;background:#fff8f4;transform:scale(1.04);box-shadow:0 8px 24px #c84b3126,0 2px 6px #0000000f}.gender-card:active{transform:scale(.98)}.gender-card.selected:active{transform:scale(1.02)}.gender-card img{object-fit:contain;flex-shrink:0;width:140px;height:140px}.gender-card .gender-label{font-family:var(--serif);color:var(--ink);font-size:16px;font-weight:600}.gender-card.selected .gender-label{color:var(--accent)}.preset-grid{grid-template-columns:repeat(2,1fr);align-items:stretch;gap:12px;padding:8px 4px 16px;display:grid}.preset-cell{background:var(--soft-bg);cursor:pointer;z-index:1;border:2px solid #0000;border-radius:14px;justify-content:center;align-items:center;height:200px;padding:16px 8px 12px;transition:transform .18s ease-out,box-shadow .18s ease-out,background .15s,border-color .15s;display:flex;position:relative}.preset-cell.selected{border-color:var(--accent);z-index:2;background:#fff8f4;transform:scale(1.06);box-shadow:0 8px 24px #c84b312e,0 2px 6px #00000014}.preset-cell:active{transform:scale(.98)}.preset-cell.selected:active{transform:scale(1.04)}.preset-cell img{object-fit:contain;flex-shrink:0;width:110px;height:110px}.preset-cell .preset-tag{font-family:var(--mono);color:var(--muted);z-index:3;background:#fffc;border-radius:4px;padding:2px 6px;font-size:9px;position:absolute;top:8px;left:8px}.preset-cell.selected .preset-tag{background:var(--accent);color:var(--paper)}.silhouette-frame{aspect-ratio:1;background:var(--soft-bg);border-radius:16px;justify-content:center;align-items:center;width:100%;display:flex;position:relative}.silhouette-frame img{filter:brightness(0)opacity(.15);width:60%;height:auto}.silhouette-frame.stage-0 img{filter:brightness(0)opacity(.1)}.silhouette-frame.stage-1 img{filter:brightness(0)opacity(.25)}.silhouette-frame.stage-2 img{filter:brightness(0)opacity(.5)}.silhouette-frame.stage-3 img{filter:none;opacity:.7}.silhouette-frame.stage-4 img{filter:none;opacity:1}.stage-progress{justify-content:center;gap:4px;margin-top:8px;display:flex}.stage-dot{background:var(--line);border-radius:2px;width:26px;height:4px}.stage-dot.active{background:var(--accent)}.home-header{justify-content:space-between;align-items:center;padding:16px 22px 8px;display:flex}.home-greeting{font-family:var(--serif);color:var(--ink);font-size:18px}.home-greeting .greeting-sub{color:var(--muted);font-size:12px;font-family:var(--sans);margin-top:2px}.user-avatar{background:var(--soft-bg);border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;overflow:hidden}.user-avatar img{width:110%;height:auto;margin-top:8px}.streak-card{background:linear-gradient(135deg, var(--soft-bg) 0%, #e8dbc0 100%);border-radius:18px;justify-content:space-between;align-items:center;margin:0 22px;padding:18px 20px;display:flex}.streak-num{font-family:var(--serif);color:var(--accent);font-size:36px;font-weight:700;line-height:1}.streak-label{color:var(--muted);margin-top:2px;font-size:12px}.streak-icon{font-size:36px}.tile-grid{grid-template-columns:1fr 1fr;gap:12px;margin:0 22px;display:grid}.tile{background:var(--paper);border:1.5px solid var(--line);cursor:pointer;border-radius:16px;flex-direction:column;justify-content:space-between;min-height:110px;padding:18px 16px;transition:transform .1s;display:flex;position:relative}.tile:active{transform:scale(.98)}.tile.primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}.tile .tile-icon{font-size:22px}.tile .tile-label{font-family:var(--serif);margin-top:8px;font-size:16px;font-weight:600}.tile .tile-sub{opacity:.75;margin-top:2px;font-size:11px}.tile.locked{opacity:.55}.tile.locked .lock-icon{font-size:14px;position:absolute;top:14px;right:14px}.cat-tile{background:var(--paper);border:1.5px solid var(--line);cursor:pointer;border-radius:16px;align-items:center;gap:16px;padding:16px 18px;transition:transform .12s,background .15s;display:flex}.cat-tile:active{background:var(--soft-bg);transform:scale(.98)}.cat-tile .cat-emoji{flex-shrink:0;font-size:28px}.cat-tile .cat-text{flex:1}.cat-tile .cat-label{font-family:var(--serif);color:var(--ink);font-size:17px;font-weight:600;line-height:1.2}.cat-tile .cat-sub{color:var(--muted);margin-top:2px;font-size:12px}.cat-tile .cat-arrow{color:var(--muted);flex-shrink:0;font-size:18px}.shop-locked-tile{background:var(--paper);border:1.5px solid var(--line);opacity:.6;border-radius:16px;align-items:center;gap:14px;padding:14px 16px;display:flex}.shop-locked-tile .shop-icon{font-size:22px}.shop-locked-tile .shop-label{font-family:var(--serif);color:var(--ink);font-size:15px;font-weight:600}.shop-locked-tile .shop-sub{color:var(--muted);margin-top:2px;font-size:11px}.shop-locked-tile .shop-lock{font-size:14px}.proto-banner{cursor:pointer;background:#fff4d6;border:1.5px dashed #c4a45a;border-radius:10px;align-items:center;gap:10px;margin:14px 22px 0;padding:12px 14px;transition:transform .15s,box-shadow .15s;display:flex;transform:rotate(-.4deg);box-shadow:0 2px 6px #0000000d}.proto-banner:active{transform:rotate(-.4deg)scale(.99)}.proto-banner .proto-banner-text{color:#6b5520;flex:1;font-size:12.5px;line-height:1.4}.proto-banner .proto-banner-text strong{color:#4f3d14;font-weight:600}.proto-banner .proto-banner-arrow{color:#6b5520;flex-shrink:0;font-size:14px}.proto-banner .proto-banner-dismiss{color:#c4a45a;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 4px;font-size:14px}.bottom-nav{background:var(--paper);border-top:1px solid var(--line);flex-shrink:0;padding:10px 22px 24px;display:flex}.nav-item{cursor:pointer;color:var(--muted);flex-direction:column;flex:1;align-items:center;gap:4px;padding:6px;display:flex}.nav-item.active{color:var(--accent)}.nav-icon{font-size:20px}.nav-label{font-size:10px;font-family:var(--mono)}.confetti-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px 30px;display:flex}.confetti-icon{margin-bottom:24px;font-size:64px}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.pop-in{animation:.5s cubic-bezier(.34,1.56,.64,1) forwards pop-in}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-up{opacity:0;animation:.6s ease-out .3s forwards fade-up}.reveal-display{justify-content:center;align-items:flex-end;gap:14px;margin:24px 0;display:flex}.reveal-character{text-align:center;flex:1;max-width:130px}.reveal-character .char-frame{aspect-ratio:1;background:var(--soft-bg);border-radius:14px;justify-content:center;align-items:center;width:100%;margin-bottom:8px;display:flex}.reveal-character .char-frame img{width:70%;height:auto}.reveal-character.future .char-frame img{filter:brightness(0)opacity(.15)}.reveal-character .char-label{font-size:11px;font-family:var(--mono);color:var(--muted)}.reveal-arrow{color:var(--muted);padding-bottom:30px;font-size:24px}.log-options{grid-template-columns:1fr 1fr;gap:12px;display:grid}.log-option{aspect-ratio:1.3;background:var(--soft-bg);cursor:pointer;border:2px solid #0000;border-radius:16px;flex-direction:column;justify-content:space-between;padding:16px;transition:all .15s;display:flex}.log-option:active{transform:scale(.98)}.log-option.selected{border-color:var(--accent);background:#fff8f4}.log-option .log-emoji{font-size:28px}.log-option .log-label{font-family:var(--serif);color:var(--ink);font-size:15px;font-weight:600}.log-option .log-sub{color:var(--muted);margin-top:2px;font-size:11px}.feedback-section{margin-top:18px}.feedback-section .label{color:var(--ink);margin-bottom:8px;font-size:13px;font-weight:600}.feedback-pills{flex-wrap:wrap;gap:8px;display:flex}.feedback-pill{background:var(--soft-bg);cursor:pointer;color:var(--ink);border:1.5px solid #0000;border-radius:100px;padding:10px 16px;font-size:13px;font-weight:500}.feedback-pill.selected{border-color:var(--accent);color:var(--accent);background:#fff8f4}.welcome-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:40px 30px;display:flex}.welcome-logo{font-family:var(--serif);letter-spacing:-.04em;color:var(--ink);margin-bottom:24px;font-size:64px;font-weight:700}.welcome-tagline{font-family:var(--serif);color:var(--ink);margin-bottom:12px;font-size:22px;line-height:1.3}.welcome-sub{color:var(--muted);max-width:280px;margin-bottom:48px;font-size:14px}.divider{background:var(--line);height:1px;margin:16px 0}.hidden{display:none}