@font-face{font-family:RankinoDisplay;src:url('/fonts/space-grotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:RankinoJapanese;src:url('/fonts/dela-gothic-one-subset.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--ink:#fff;--accent:#94d9ff;--line:#ffffff26;background-color:#1244db;color-scheme:dark}
body{grid-template-rows:72px minmax(0,1fr)}
body{background:radial-gradient(ellipse at 85% 20%,#287ffe,transparent 60%),linear-gradient(145deg,#081a65,#1244db 60%,#126fda);background-color:#1244db;color:white;isolation:isolate;font-family:RankinoDisplay,SnapshotSans,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.rankino-scene{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .8s ease}
.rankino-scene.ready{opacity:1}
.rankino-scene canvas{display:block;width:100%;height:100%}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
header,main,footer{position:relative;z-index:1}
.brand img{filter:brightness(0) invert(1)}
.exam-label{color:#d8e6ff;font-family:RankinoDisplay,sans-serif}
.home{gap:34px}
.home h1{font-family:RankinoJapanese,"Hiragino Kaku Gothic ProN",sans-serif;font-weight:400;font-size:clamp(25px,6.3vw,34px);color:#fff;line-height:1.75;letter-spacing:-.045em;text-shadow:0 2px 32px #001b7020}
.home-ten{font-family:RankinoDisplay,sans-serif;font-weight:700;font-size:clamp(100px,27vw,140px);letter-spacing:-.1em;line-height:1;display:inline-block;margin-right:12px;vertical-align:baseline}
.home-suffix{display:inline-block;vertical-align:baseline}
.home .actions{padding-bottom:22px}
.exam-switch{background:#031b5c38;border:1px solid #ffffff20;backdrop-filter:blur(16px);padding:5px;border-radius:16px;margin-bottom:24px;box-shadow:inset 0 1px 0 #ffffff0a}
.exam-switch button{font-family:RankinoDisplay,sans-serif;font-weight:700;color:#d4e6ff;letter-spacing:.01em}
.exam-switch button.active{background:#fff;color:#1544d8;box-shadow:0 2px 10px #00134c15}
.muted,.meta,.pager{color:#d2e1ff;font-family:RankinoDisplay,SnapshotSans,sans-serif}
.primary{background:#fff;color:#173ec1;border:1px solid #fff;box-shadow:0 12px 35px #00144322;font-family:RankinoDisplay,SnapshotSans,sans-serif;font-weight:700;position:relative;overflow:hidden}
.primary:after{content:"";position:absolute;inset:-80% -100%;background:linear-gradient(105deg,transparent 40%,#a6d8ff60 50%,transparent 60%);transform:translateX(-30%);transition:transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.primary:hover{background:#eff6ff;box-shadow:0 16px 44px #00144332}
.primary:hover:after{transform:translateX(30%)}
.primary:disabled{color:#687c9d;background:#dbe6f2}
.secondary,.result-links .secondary{color:#d6e5ff}
.secondary:hover{color:#fff}
.bar span{background:#ffffff26}
.bar span.done{background:#fff;box-shadow:0 0 14px #a6d8ff45}
.bar span.current{background:#88beff}
.question,.question:lang(ja){font-family:RankinoDisplay,SnapshotSans,"Hiragino Kaku Gothic ProN",sans-serif;color:white;line-height:1.55;letter-spacing:-.02em;font-weight:600;text-shadow:0 2px 14px #00103920}
.option{background:#051c684d;border-color:#ffffff2e;color:#fff;backdrop-filter:blur(16px);font-family:RankinoDisplay,SnapshotSans,"Hiragino Kaku Gothic ProN",sans-serif;font-weight:600;box-shadow:inset 0 1px 0 #ffffff06;transition:transform .24s cubic-bezier(.16,1,.3,1),background .24s,border-color .24s}
.option:hover:not(:disabled){background:#163e9c88;border-color:#ffffff88;transform:translateX(4px)}
.option.selected{background:#edf7ff;color:#1642c4;border-color:#fff;transform:scale(.985)}
.option:not(.selected):disabled{color:#d2e0f9}
.letter{background:#ffffff13;color:#b8d9ff;font-family:RankinoDisplay,sans-serif}
.option.selected .letter{background:#1647d9;color:white}
.pager button{color:white}
.pager button:disabled{color:#9eb9e6}
.result-hero{background:linear-gradient(135deg,#ffffff1f,#ffffff08);border:1px solid #ffffff40;backdrop-filter:blur(22px);box-shadow:0 18px 55px #0016451f;border-radius:26px}
.hero-top{font-family:RankinoDisplay,sans-serif;color:#cfdefb}
.result-title{font-family:RankinoJapanese,SnapshotSans,sans-serif;font-weight:400;font-size:clamp(17px,4vw,21px);letter-spacing:-.045em}
.score{font-family:RankinoDisplay,sans-serif;font-weight:700;letter-spacing:-.075em;font-size:clamp(54px,12.5vw,78px);text-shadow:0 0 35px #b4e4ff14}
.score small{color:#d2e5ff}
.hero-note{color:#c9dafa}
.stat b{color:white;font-family:RankinoDisplay,sans-serif;font-weight:700}
.stat b small{color:#c9dafa}
.percentile{background:#071e6938;border-color:#ffffff26;backdrop-filter:blur(16px)}
.rank-label,.rank-pending{color:#c9dafa}
.rank-number,.rank-number b{color:white;font-family:RankinoDisplay,sans-serif}
.rank-number b{font-size:32px}
.review-content p{font-family:RankinoDisplay,SnapshotSans,"Hiragino Kaku Gothic ProN",sans-serif;color:white;font-weight:600}
.review-actions button{background:#ffffff13;border-color:#ffffff40;color:white;backdrop-filter:blur(14px)}
.review-actions button:disabled{color:#829bc3}
footer{color:#b2c7ed}
button:focus-visible{outline:3px solid #a7e3ff;outline-offset:4px}
@media(max-height:700px){.home{gap:24px}.home-ten{font-size:100px}.home .actions{padding-bottom:0}.home h1{font-size:26px}.exam-switch{margin-bottom:18px}.score{font-size:52px}.result-title{font-size:17px}.rank-number b{font-size:26px}}
@media(max-width:350px){.home h1{font-size:24px}.home-ten{font-size:94px}.score{font-size:46px}.hero-note{font-size:10px}}
@media(orientation:landscape) and (max-height:600px){.home{gap:18px}.home h1{font-size:25px;line-height:1.35}.home-ten{font-size:76px}.exam-switch{margin-bottom:10px}.score{font-size:38px}.result-title{font-size:15px}.rank-number b{font-size:22px}.result-hero{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.rankino-scene,.primary:after{transition:none}.option:hover:not(:disabled){transform:none}}
@media(max-height:700px){body{grid-template-rows:56px minmax(0,1fr)}}
@media(orientation:landscape) and (max-height:600px){body{grid-template-rows:44px minmax(0,1fr)}}

/* One score, one position: no dashboard cards or competing headlines. */
.result-body{min-height:0;gap:24px;width:100%}
.result-hero{padding:0 4px;background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0;overflow:visible}
.result-hero:before{display:none}
.result .hero-top{align-items:center;font-size:12px;font-weight:700;letter-spacing:.05em}
.result-qualifier{font-size:10px;font-weight:500;letter-spacing:0;color:#c6dcff}
.result .score{margin:14px 0 0;font-size:clamp(56px,15vw,86px);line-height:1.12;letter-spacing:-.075em}
.result .score small{font-size:16px;margin-left:8px}
.distribution{margin:0;position:relative;min-width:0}
.distribution figcaption{display:flex;justify-content:flex-end;color:#b4d0fa;font-size:10px;letter-spacing:.02em;margin-bottom:2px}
.distribution svg{display:block;width:100%;height:auto;overflow:visible}
.distribution-baseline{stroke:#ffffff30;stroke-width:1}
.distribution-curve{fill:none;stroke:#bbeeff;stroke-width:2.5;stroke-linecap:round}
.distribution-guide{stroke:#fff;stroke-width:1.5;stroke-dasharray:3 5;opacity:.75}
.distribution-glow{fill:#98eaff;opacity:.25}
.distribution-you{fill:#1742ba;font-family:SnapshotSans,sans-serif;font-size:12px;font-weight:700;letter-spacing:0}
.distribution-axis{fill:#c0d9ff;font-family:RankinoDisplay,sans-serif;font-size:12px;font-weight:500}
.distribution-reveal{transform-origin:0 0;animation:distribution-draw 850ms cubic-bezier(.16,1,.3,1) both}
.distribution-marker{animation:distribution-arrive 480ms 350ms cubic-bezier(.16,1,.3,1) both}
.result-actions{flex-shrink:0}
@keyframes distribution-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes distribution-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:700px){.result-body{gap:12px}.result .score{font-size:clamp(46px,14vw,66px);margin-top:10px}.distribution svg{max-height:205px}.result .result-links .secondary{min-height:36px}}
@media(orientation:landscape) and (max-height:600px){.result-body{gap:8px;flex:1;min-width:0}.result .score{font-size:48px;margin-top:6px}.distribution svg{max-height:180px}.result-actions{width:36%}.result .hero-top{font-size:10px}.result-qualifier{font-size:9px}}
@media(prefers-reduced-motion:reduce){.distribution-reveal,.distribution-marker{animation:none;transform:none;opacity:1}}

/* Reserve the complete text layout while glyphs appear in reading order. */
.question-readable{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.question-word{display:inline-block;white-space:nowrap;overflow-wrap:normal}
.question-typing .question-character{animation:question-type 1ms steps(1,end) var(--type-delay) both}
@keyframes question-type{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.question-typing .question-character{animation:none;opacity:1}}

/* Fixed-height result slides; only the content moves horizontally. */
.result-stage{display:grid;grid-template-rows:minmax(0,1fr) 44px;flex:1;min-height:0;min-width:0;width:100%}
.result-viewport{display:flex;min-height:0;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pinch-zoom;border-radius:2px}
.result-viewport::-webkit-scrollbar{display:none}
.result-panel{flex:0 0 100%;width:100%;min-width:0;height:100%;padding:8px 4px;display:flex;flex-direction:column;justify-content:center;gap:24px;scroll-snap-align:start;scroll-snap-stop:always}
.result-panel .result-hero{padding:0}
.result-panel-label{font-family:SnapshotSans,sans-serif;font-size:18px;line-height:1.4;letter-spacing:-.03em;margin:24px 0 0;font-weight:700}
.result-panel .score{margin-top:10px}
.position-title{font-family:SnapshotSans,sans-serif;font-size:clamp(28px,8vw,40px);font-weight:700;line-height:1.3;letter-spacing:-.04em;margin:22px 0 0}
.score-range{margin:0;min-width:0}
.score-range svg{display:block;width:100%;height:auto;max-height:210px}
.score-range-band{animation:score-band-in 500ms cubic-bezier(.16,1,.3,1) both;transform-box:fill-box;transform-origin:center}
.result-dots{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);align-items:center;height:44px;gap:0}
.participation-proof{display:flex;align-items:center;gap:5px;margin:0 auto 0 0;color:#d5e5ff;font-family:SnapshotSans,sans-serif;font-size:14px;white-space:nowrap}
.participation-proof strong{color:white;font-family:RankinoDisplay,SnapshotSans,sans-serif;font-size:16px;font-weight:800}
.participation-proof small{margin-left:3px;padding:2px 5px;border:1px solid #ffffff35;border-radius:6px;color:#c1d5ff;font-size:12px;line-height:1.2}
@media(orientation:landscape) and (max-height:600px){.participation-proof{gap:3px}.participation-proof small{padding:2px 3px;margin-left:1px}}
.result-dot{display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;width:44px;height:44px}
.result-dot span{display:block;width:6px;height:6px;background:#ffffff55;border-radius:8px;transition:width 180ms ease,background 180ms ease}
.result-dot[aria-current="true"] span{width:22px;background:#fff}
.result-panel[aria-hidden="true"] .distribution-reveal,.result-panel[aria-hidden="true"] .distribution-marker,.result-panel[aria-hidden="true"] .score-range-band{animation:none}
@keyframes score-band-in{from{opacity:0;transform:scaleX(.5)}to{opacity:1;transform:scaleX(1)}}
@media(max-height:700px){.result-panel{gap:12px;padding-top:4px;padding-bottom:4px}.result-panel-label{margin-top:14px;font-size:16px}.position-title{margin-top:14px}.score-range svg{max-height:160px}.result{gap:4px}}
@media(orientation:landscape) and (max-height:600px){.result-stage{width:60%;height:100%;flex:1}.result-panel{gap:8px}.result-panel-label{margin-top:8px;font-size:14px}.position-title{font-size:26px;margin-top:10px}.score-range svg{max-height:125px}.result-panel .distribution svg{max-height:170px}.result-actions{width:36%}}
@media(prefers-reduced-motion:reduce){.score-range-band{animation:none}.result-dot span{transition:none}}

/* A static semantic glow also works when WebGL is unavailable. */
body:after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 85% 20%,#89e0ff24,transparent 45%);transition:opacity 350ms,transform 500ms;opacity:1}
body[data-motion="quiz"]:after,body[data-motion="review"]:after{background:radial-gradient(circle at 90% 15%,#89e0ff20,transparent 25%)}
body[data-motion="score"]:after{background:radial-gradient(ellipse at 80% 20%,#89e0ff28,transparent 40%);transform:scaleY(.8)}
body[data-motion="position"]:after{background:radial-gradient(circle at 78% 22%,#89e0ff28,transparent 35%);transform:scaleY(1)}
body[data-motion="ranking"]:after{background:radial-gradient(circle at 94% 10%,#89e0ff20,transparent 25%);transform:scale(.85)}
body:has(.rankino-scene.ready):after{opacity:0}
@media(prefers-reduced-motion:reduce){body:after{transition:none}}

.result-primary-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.result-primary-actions.share-only{grid-template-columns:1fr}
.result-primary-actions .primary{padding-left:10px;padding-right:10px;font-size:15px}
.share-x{display:flex;align-items:center;justify-content:center;min-height:56px;padding:10px;border:1px solid #ffffff65;border-radius:18px;color:white;background:#ffffff12;backdrop-filter:blur(16px);font-family:RankinoDisplay,SnapshotSans,sans-serif;font-size:15px;font-weight:700;text-decoration:none;transition:background 160ms,border-color 160ms}
.share-x:hover{background:#ffffff24;border-color:white}
.share-x:focus-visible{outline:3px solid #a7e3ff;outline-offset:3px}
.share-only .share-x{background:white;color:#173ec1;border-color:white}
@media(max-height:700px){.share-x{min-height:48px;border-radius:15px}}
@media(orientation:landscape) and (max-height:600px){.result-primary-actions{grid-template-columns:1fr;gap:8px}.share-x{min-height:42px}}
@media(prefers-reduced-motion:reduce){.share-x{transition:none}}

@media(max-width:430px){.participation-proof{display:block;line-height:1.2;white-space:nowrap}.participation-proof small{display:block;width:max-content;margin:2px 0 0;font-size:12px;line-height:1}}