:root{color-scheme:dark;--bg:#080d19;--panel:#111a2a;--panel2:#172338;--ink:#f7f3e8;--muted:#aab6c8;--green:#64e3a4;--red:#ff6f7f;--gold:#ffd369;--blue:#6fb5ff;--line:#2d3d58}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}body{color:var(--ink);background:radial-gradient(circle at 13% 5%,#183950 0,transparent 30%),radial-gradient(circle at 88% 88%,#3d2037 0,transparent 33%),linear-gradient(145deg,#070b14,#0b1322 65%,#0a0e19);background-attachment:fixed}button,a{font:inherit}a{color:inherit}.topbar{display:flex;justify-content:space-between;align-items:center;max-width:940px;margin:auto;padding:22px 22px;color:#c2ccda;font:800 11px/1.5 monospace;letter-spacing:.12em}.topbar a{text-decoration:none}.topbar a:hover{color:var(--gold)}main{display:grid;place-items:center;min-height:calc(100vh - 128px);padding:20px 18px 68px}.screen{width:min(760px,100%)}.screen[hidden]{display:none!important}.card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#142036ed,#0d1525ed);box-shadow:0 24px 80px #0008}.loading,.error{text-align:center;padding:60px 30px}.ticker{display:grid;place-items:center;width:86px;height:86px;margin:auto;border-radius:24px;background:var(--gold);color:#101827;font:1000 28px monospace;transform:rotate(-4deg);box-shadow:7px 7px 0 #000}.start{text-align:center;padding:clamp(30px,7vw,62px)}.eyebrow{margin:0 0 16px;color:var(--green);font:900 12px/1.5 monospace;letter-spacing:.16em}.hero-mark{display:flex;align-items:end;justify-content:center;gap:8px;width:146px;height:106px;margin:0 auto 24px;border:2px solid #fff;border-radius:50% 50% 20px 20px;background:linear-gradient(145deg,#1d7456,#143c45);transform:rotate(-3deg);box-shadow:8px 8px 0 #000}.hero-mark span{font:900 46px/1 sans-serif}.hero-mark b{padding-bottom:7px;color:var(--gold);font:900 22px/1 monospace}.start h1{margin:0;font:1000 clamp(43px,9vw,76px)/1.02 Arial,sans-serif;letter-spacing:-.06em;text-shadow:5px 5px 0 #000}.start h1 em{color:var(--gold);font-style:normal}.lead{max-width:570px;margin:24px auto;color:#e2e7ee;font-size:clamp(17px,3vw,22px);font-weight:800;line-height:1.7}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0}.intro-grid div{padding:17px 10px;border:1px solid var(--line);border-radius:12px;background:#0a1220}.intro-grid strong,.intro-grid span{display:block}.intro-grid strong{color:var(--gold);font-size:17px}.intro-grid span{margin-top:7px;color:var(--muted);font-size:11px;line-height:1.5}.notice{margin:20px 0;color:var(--muted);font-size:12px;line-height:1.7}.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:13px 26px;border:2px solid #fff;border-radius:9px;font-weight:900;text-decoration:none;cursor:pointer;box-shadow:5px 5px 0 #000;transition:transform .15s,filter .15s}.button:hover{filter:brightness(1.12);transform:translateY(-2px)}.primary{background:#2d966d;color:#fff}.secondary{margin-left:12px;background:#1d2a40;color:#fff}.quiz{width:min(820px,100%)}.quiz-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.quiz-head .eyebrow{margin-bottom:7px}.progress{width:min(480px,70vw);height:7px;border-radius:99px;background:#1c2940;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .3s}.text-button{border:0;background:transparent;color:var(--muted);font-weight:700;cursor:pointer}.text-button:hover{color:#fff}.question-card{position:relative;overflow:hidden;padding:clamp(27px,6vw,54px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(150deg,#16243b,#0c1423);box-shadow:0 25px 80px #0009}.question-card::after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border:38px solid #ffffff08;border-radius:50%;pointer-events:none}.question-number{position:relative;z-index:1;color:var(--gold);font:1000 54px/1 monospace}.question-card h1{position:relative;z-index:1;min-height:4.4em;margin:18px 0 34px;font-size:clamp(22px,4.6vw,34px);line-height:1.48;letter-spacing:.01em}.followup-note{position:relative;z-index:1;margin:-15px 0 26px;padding:11px 13px;border-left:4px solid var(--gold);background:#ffd36912;color:#f7dea0;font-size:13px;line-height:1.6}.answers{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px}.answer{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:10px;min-height:78px;padding:14px;border:2px solid #344864;border-radius:12px;background:#111c2d;color:#fff;text-align:left;font-weight:800;line-height:1.45;cursor:pointer;box-shadow:4px 4px 0 #05080f}.answer:hover,.answer:focus-visible{border-color:var(--gold);background:#182840}.answer b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#243650;color:var(--gold);font:900 15px monospace}.answer:disabled{cursor:wait;opacity:.6}.save-note{text-align:center;color:var(--muted);font-size:11px}.result{width:min(860px,100%);text-align:center}.result>.eyebrow{margin-bottom:12px}.result-hero{padding:clamp(32px,7vw,66px);border:1px solid #936f2b;border-radius:22px;background:radial-gradient(circle at 50% 0,#72531f55,transparent 50%),linear-gradient(150deg,#1a273c,#101827);box-shadow:0 25px 80px #0009,7px 7px 0 #2e765c}.result-rank span,.result-rank strong{display:block}.result-rank span{color:var(--muted);font-size:13px}.result-rank strong{margin-top:8px;color:var(--gold);font:1000 clamp(42px,10vw,74px)/1 Arial,sans-serif;letter-spacing:-.05em}.result-hero h1{margin:18px 0 12px;font-size:clamp(25px,5vw,40px)}.tagline{margin:0;color:#dfe6ed;font-size:clamp(17px,3vw,22px);font-weight:800}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.result-copy{text-align:left;padding:25px}.result-copy h2,.axes h2{margin:0 0 12px;font-size:15px;color:var(--blue)}.result-copy.good h2{color:var(--green)}.result-copy.caution h2{color:#ff9b8d}.result-copy p{margin:0;color:#d8dee7;line-height:1.85}.axes{text-align:left;padding:26px}.axis-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.axis-row:first-of-type{border-top:0}.axis-label{font-weight:800}.axis-track{position:relative;height:9px;border-radius:99px;background:linear-gradient(90deg,var(--red),#35445c 50%,var(--green));overflow:visible}.axis-dot{position:absolute;top:50%;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:#101827;transform:translate(-50%,-50%);box-shadow:0 2px 8px #000}.axis-value{min-width:158px;text-align:right;color:#e4e9ef;font-size:12px;font-weight:800}.result-note,.question-total{color:var(--muted);font-size:12px;line-height:1.7}.result-note{margin:16px 0 0}.question-total{margin:19px 0}.actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}.actions .secondary{margin:0}footer{padding:20px 18px 35px;color:var(--muted);text-align:center;font-size:12px}footer a:hover{color:#fff}
.intro-grid{grid-template-columns:repeat(2,1fr)}
.cat-sprite{width:150px;height:200px;margin-inline:auto;background-image:url('cat-sprites.png');background-repeat:no-repeat;background-size:600px 600px;image-rendering:pixelated;filter:drop-shadow(8px 8px 0 #0008)}
.cat-start{margin-top:-34px;margin-bottom:4px;background-position:0 0}
.result-character{display:block;width:190px;height:190px;margin:-44px auto -12px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(7px 7px 0 #0007)}
@media(max-width:620px){.topbar{padding:17px 15px;font-size:9px}.topbar span{max-width:58%;font-size:8px;text-align:right}main{padding:8px 13px 52px}.start{padding:31px 20px}.intro-grid{grid-template-columns:1fr}.intro-grid div{display:flex;align-items:center;justify-content:space-between;text-align:left}.intro-grid span{margin:0;max-width:58%;text-align:right}.start>.secondary{display:flex;margin:13px auto 0}.question-card{padding:26px 19px}.question-card h1{min-height:0;margin-bottom:27px}.answers{grid-template-columns:1fr}.answer{min-height:66px}.result-grid{grid-template-columns:1fr}.axis-row{grid-template-columns:1fr;gap:7px}.axis-track{grid-column:1;grid-row:3}.axis-value{grid-row:2;min-width:0;text-align:left}.actions{display:grid}.button{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}