:root{--bg-start: #fff7f3;--bg-end: #ffe6da;--ink: #2a1a14;--ink-soft: #5a463d;--ink-mute: #8c6f60;--accent: #d96a8f;--accent-deep: #8c3b58;--card: #ffffff;--card-border: rgba(42, 26, 20, .08);--chip: rgba(42, 26, 20, .06);--chip-strong: rgba(42, 26, 20, .14);--good: #4a8d6a;--warn: #c97a4a;--shadow: 0 6px 24px rgba(140, 90, 60, .12);--radius: 16px;--tap: 48px}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{font-family:system-ui,-apple-system,Hiragino Sans,Yu Gothic UI,Yu Gothic,Meiryo,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg-start) 0%,var(--bg-end) 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}#app{max-width:480px;margin:0 auto;padding:16px 16px 48px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;gap:16px}h1,h2,h3{margin:0;font-weight:700;letter-spacing:.01em;color:var(--ink)}p{margin:0;color:var(--ink-soft)}button{font-family:inherit;font-size:16px;cursor:pointer;min-height:var(--tap);border-radius:12px;border:1px solid transparent;background:var(--card);color:var(--ink);transition:transform .05s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;touch-action:manipulation}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button:active{transform:translateY(1px)}.screen{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 18px;display:flex;flex-direction:column;gap:16px}.screen h1{font-size:26px}.screen h2{font-size:22px}.lede{font-size:15px;color:var(--ink-soft)}.disclaimer{font-size:13px;color:var(--ink-mute);background:var(--chip);padding:10px 12px;border-radius:12px;line-height:1.55}.primary{width:100%;background:var(--ink);color:#fff7ee;font-weight:700;font-size:17px;border-radius:999px;border:none;min-height:52px;box-shadow:0 4px 14px #2a1a1438}.primary:hover{background:#1a0e07}.secondary{width:100%;background:transparent;color:var(--ink);border:1px solid var(--chip-strong);border-radius:999px;min-height:48px;font-weight:600}.secondary:hover{background:var(--chip)}.muted-link{background:none;border:none;color:var(--ink-mute);text-decoration:underline;font-size:14px;padding:8px;min-height:36px}.intro-hero{text-align:center;display:flex;flex-direction:column;gap:12px;padding:8px 0 4px}.intro-hero .subtitle{font-size:14px;color:var(--ink-mute);letter-spacing:.02em}.intro-hero .gauge{margin:6px auto 0;width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--accent) 0% 73%,rgba(42,26,20,.08) 73% 100%);display:grid;place-items:center;position:relative}.intro-hero .gauge:before{content:"";position:absolute;inset:14px;background:var(--card);border-radius:50%}.intro-hero .gauge span{position:relative;font-weight:800;font-size:36px;color:var(--ink)}.intro-hero .gauge small{position:relative;font-size:12px;color:var(--ink-mute);display:block;margin-top:2px}.progress{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--ink-mute);gap:12px}.progress-bar{flex:1;height:6px;border-radius:999px;background:#2a1a1414;overflow:hidden}.progress-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));transition:width .3s ease}.q-context{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--chip);font-size:12px;color:var(--ink-soft)}.q-context.private{background:#3a8fb71f;color:#1f5e7d}.q-context.public{background:#d96a8f24;color:var(--accent-deep)}.q-prompt{font-size:18px;font-weight:700;line-height:1.5;color:var(--ink)}.q-caption{font-size:14px;color:var(--ink-mute)}.choices{display:flex;flex-direction:column;gap:10px;margin-top:4px}.choice{width:100%;text-align:left;padding:14px 16px;border-radius:14px;background:var(--card);border:1.5px solid var(--card-border);font-size:15px;font-weight:500;color:var(--ink);min-height:var(--tap);display:flex;gap:12px;align-items:flex-start;line-height:1.5}.choice:hover{border-color:var(--accent);background:#fff}.choice .bullet{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--chip-strong);display:grid;place-items:center;font-size:12px;color:var(--ink-mute);font-weight:700;margin-top:2px}.choice.selected{border-color:var(--accent);background:#fff;box-shadow:0 4px 18px #d96a8f2e}.choice.selected .bullet{background:var(--accent);border-color:var(--accent);color:#fff}.q-actions{display:flex;gap:10px;margin-top:8px}.q-actions button{flex:1}.calc{text-align:center;padding:36px 18px}.calc .pulse{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:conic-gradient(from 0deg,var(--accent),var(--accent-deep),var(--accent));animation:spin 1.4s linear infinite;position:relative}.calc .pulse:before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--card)}@keyframes spin{to{transform:rotate(360deg)}}.result-hero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-top:6px}.result-card-preview{width:100%;aspect-ratio:1;display:block;border-radius:28px;border:1.5px solid var(--card-border);box-shadow:0 18px 45px #5a463d29;background:#fff7ee}.mascot{width:168px;height:176px;min-width:168px;min-height:176px;flex:0 0 auto;aspect-ratio:200 / 210}.mascot svg{width:100%;height:100%;display:block;object-fit:contain}.result-name{font-size:22px;font-weight:800;color:var(--ink)}.scores{display:grid;grid-template-columns:1fr 1fr;gap:10px}.score-card{background:var(--chip);border-radius:14px;padding:14px 12px;text-align:center}.score-card .v{font-size:34px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}.score-card .k{font-size:12px;color:var(--ink-mute);margin-top:6px;line-height:1.3}.bars{display:flex;flex-direction:column;gap:10px;margin-top:4px}.bar{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft)}.bar .track{flex:1;height:8px;border-radius:999px;background:#2a1a1414;overflow:hidden}.bar .track i{display:block;height:100%;border-radius:999px}.bar.public .track i{background:var(--accent)}.bar.private .track i{background:#3a8fb7}.bar .v{width:36px;text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.read{font-size:14.5px;color:var(--ink-soft);background:var(--chip);border-radius:14px;padding:14px;line-height:1.6}.result-actions{display:flex;flex-direction:column;gap:10px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:var(--ink);color:#fff7ee;padding:10px 18px;border-radius:999px;font-size:14px;box-shadow:0 8px 24px #00000040;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50}.toast.show{opacity:1;transform:translate(-50%) translateY(-4px)}footer{text-align:center;font-size:12px;color:var(--ink-mute);padding:6px 0;line-height:1.5}footer a{color:var(--ink-mute)}@media (min-width: 600px){#app{padding-top:32px;gap:20px}.screen{padding:28px 26px}.screen h1{font-size:30px}.q-prompt{font-size:19px}}@media (prefers-reduced-motion: reduce){.calc .pulse{animation:none}}