@charset "UTF-8";
:root{--paper:#f5f5ef;--ink:#152022;--muted:#65706b;--line:#d9ddd4;--lime:#d3ef86;--navy:#14242a;--white:#fff;--radius:6px;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #607e26;outline-offset:5px}::selection{background:var(--lime);color:var(--ink)}h1,h2,h3,p{margin:0}main:focus{outline:none}.page-shell{max-width:1440px;margin:auto;padding:0 64px}.skip-link{position:fixed;top:-100px;left:20px;background:var(--lime);padding:16px;z-index:50}.skip-link:focus{top:16px}.site-header{height:107px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:inline-flex;align-items:center;font-size:28px;font-weight:850;letter-spacing:-1.5px;gap:11px}.brand-icon{width:27px;height:29px;display:flex;align-items:center;gap:3px}.brand-icon i{display:block;width:4px;background:var(--ink);border-radius:5px;height:14px}.brand-icon i:nth-child(2){height:28px}.brand-icon i:nth-child(3){height:21px}.brand-icon i:nth-child(4){height:11px}.brand-dot{font-size:13px;margin-left:-8px;align-self:flex-start;padding-top:7px}.header-caption{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:1.8px;color:var(--muted);margin-left:28px}.hero{display:grid;grid-template-columns:1.04fr 1fr;gap:64px;padding:66px 0 64px;align-items:center}.hero-copy{padding:3px 0}.edition{display:flex;align-items:center;gap:10px;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.8px;margin-bottom:33px}.live-dot{display:inline-block;width:7px;height:7px;background:#718d39;border-radius:50%;flex-shrink:0}.edition-no{color:var(--muted);margin-left:4px}.hero-intro{font-size:13px;font-weight:600;letter-spacing:1px;margin-bottom:17px}.hero h1{font-size:clamp(36px,4.4vw,63px);line-height:1.5;letter-spacing:-3.7px;font-weight:800;position:relative;white-space:nowrap}.one-word{position:relative;z-index:0}.underline-mark{position:absolute;bottom:3px;height:14px;left:0;right:0;z-index:-1;background:var(--lime);transform:rotate(-3deg)}.hero-description{font-size:13px;line-height:2.1;letter-spacing:.5px;color:#5a6563;margin:22px 0 30px}.button{display:inline-flex;align-items:center;justify-content:center;gap:27px;min-height:55px;padding:16px 23px;border:1px solid transparent;border-radius:var(--radius);font-size:13px;font-weight:650;letter-spacing:.5px;transition:background .18s,transform .18s,box-shadow .18s}.button>span:last-child{font-size:21px;line-height:1}.button-lime{background:var(--lime);color:var(--ink)}.button-lime:hover{background:#c6e978;transform:translateY(-2px);box-shadow:0 4px 0 #172422}.button-dark{background:var(--ink);color:var(--paper)}.button-dark:hover{background:#2c4042;transform:translateY(-1px)}.button-dark:disabled{background:#e2e5dc;color:#8a938b;transform:none;border-color:#d6dbd1}.button-outline{border-color:#bbc3b8;background:transparent}.button-outline:hover{background:#e8ecdf}.start-button{min-width:290px;justify-content:space-between}.hero-meta{display:flex;gap:0;color:#65706b;font-size:10px;letter-spacing:.4px;margin-top:18px;align-items:center}.hero-meta>span{padding:0 13px;border-right:1px solid #c4cbc0}.hero-meta>span:first-child{padding-left:0}.hero-meta>span:last-child{border:none}.hero-meta>span>span{font-size:14px;margin-right:5px}.hero-footnote{font-size:10px;color:#7b847c;letter-spacing:.4px;margin-top:25px}.record-art{height:501px;background:var(--navy);position:relative;overflow:hidden;border-radius:9px;color:var(--paper);isolation:isolate;box-shadow:0 20px 40px -30px #10252c88}.record-art:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,#64807026,transparent 65%)}.art-top{position:absolute;top:25px;left:27px;right:27px;display:flex;justify-content:space-between;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.1px;z-index:4;color:#c5d0ca}.record{position:absolute;width:360px;height:360px;border-radius:50%;left:50%;top:50%;margin:-180px;background:repeating-radial-gradient(circle at center,#102027 0px,#102027 2px,#3b4e4f 2.5px,#3b4e4f 3px,#1c2d33 4px);border:2px solid #405454;box-shadow:-17px 24px 32px #050c1366,inset 0 0 0 8px #203337;transform:rotate(-20deg);z-index:2}.record:before{content:"";position:absolute;inset:4px;border-radius:50%;background:conic-gradient(from 20deg,transparent 0deg,#c5d7d62e 28deg,transparent 80deg,transparent 170deg,#b5c7c22d 210deg,transparent 265deg);mix-blend-mode:screen}.record-label{width:174px;height:174px;position:absolute;top:50%;left:50%;margin:-87px;border-radius:50%;background:var(--lime);color:#14242a;text-align:center;display:flex;flex-direction:column;align-items:center;padding:19px 10px}.record-label-small{font:8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2px}.record-label-big{font-size:33px;line-height:.95;font-weight:900;letter-spacing:-1.6px;margin-top:9px}.record-hole{background:#14242a;width:10px;height:10px;border-radius:50%;position:absolute;top:82px;left:82px;box-shadow:0 0 0 5px #d3ef8644}.record-label-bottom{font:5px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.7px;margin-top:17px}.orbit{position:absolute;width:440px;height:440px;border:1px solid #8ca19a2e;border-radius:50%;top:50%;left:50%;margin:-220px;transform:rotate(-25deg) scaleX(1.05)}.orbit-two{width:550px;height:550px;margin:-275px;transform:scaleX(.9)}.art-star{position:absolute;color:var(--lime)}.star-one{top:73px;right:37px;font-size:56px;line-height:1;transform:rotate(-12deg);z-index:3}.star-two{left:31px;bottom:119px;font-size:22px;color:#93aba5}.art-side{position:absolute;top:96px;left:22px;writing-mode:vertical-rl;transform:rotate(180deg);font:8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2.5px;color:#90a49d;z-index:3}.sound-sticker{position:absolute;bottom:80px;right:21px;padding:16px 21px;background:#e1e8db;z-index:4;color:var(--ink);transform:rotate(7deg);display:flex;align-items:center;gap:14px;box-shadow:0 6px 20px #0003;font-size:12px;font-weight:700;line-height:1.7;letter-spacing:.6px}.mini-wave{display:flex;gap:3px;height:30px;align-items:center}.mini-wave i{display:block;width:3px;height:14px;background:#152e31;border-radius:2px}.mini-wave i:nth-child(2){height:25px}.mini-wave i:nth-child(3){height:32px}.mini-wave i:nth-child(4){height:22px}.art-bottom{position:absolute;bottom:22px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:flex-end;font:8px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.3px;color:#a3b4ae}.art-index{font-size:14px;letter-spacing:1px;color:var(--paper)}.how-it-works{display:grid;grid-template-columns:.85fr 1fr 1.12fr 1.12fr;border-top:1px solid var(--line);padding:33px 0 41px;gap:25px}.eyebrow{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.5px;color:var(--muted)}.how-heading p{font-size:13px;font-weight:650;line-height:1.8;margin-top:11px}.how-step{display:flex;gap:17px;padding-top:3px}.step-number{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#687b60;padding-top:3px}.how-step h2{font-size:12px;line-height:1.7;letter-spacing:.3px}.how-step p{font-size:10px;color:var(--muted);line-height:2;margin-top:10px}.site-footer{min-height:77px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.5px;color:#65706b}.footer-message{color:#7d877e}dialog{width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #d2d9cb;border-radius:12px;padding:30px 34px 34px;color:var(--ink);background:var(--paper);box-shadow:0 25px 70px #0003}dialog::backdrop{background:#102124aa;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.icon-button{background:none;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;font-size:25px;font-weight:300}dialog h2{font-size:27px;line-height:1.6;letter-spacing:-1px;margin-bottom:24px}dialog p{font-size:13px;line-height:2;color:#5d6c63;margin-bottom:18px}dialog .button{margin-top:8px;width:100%}.noscript{padding:40px;text-align:center;background:var(--lime)}
/* Question screens */
.quiz-page{min-height:calc(100svh - 185px);padding:30px 0 70px}.quiz-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:46px}.back-button{border:0;background:none;padding:8px 0;display:flex;align-items:center;gap:12px;font-size:11px;color:#637268;min-height:40px}.back-button:hover{color:var(--ink)}.back-button span{font-size:22px}.quiz-layout{max-width:990px;margin:0 auto;display:grid;grid-template-columns:230px 1fr;gap:65px}.quiz-aside{padding-top:12px}.question-big-number{font-size:115px;letter-spacing:-8px;line-height:1;margin:31px 0 20px;font-weight:600}.question-big-number>span{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;margin-left:13px;color:#7b877c}.quiz-aside p{font-size:12px;line-height:2;color:#6d796e}.tiny-record{margin-top:49px;width:93px;height:93px;border-radius:50%;background:repeating-radial-gradient(circle,#182d31 0 2px,#3d5352 2.5px 3px);display:grid;place-items:center;transform:rotate(-15deg)}.tiny-record span{display:grid;place-items:center;background:var(--lime);color:var(--ink);border-radius:50%;width:39px;height:39px;font-weight:700}.question-progress{display:flex;justify-content:space-between;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;color:#69766b}.progress-track{height:3px;background:#dfe4d8;margin:13px 0 33px;border-radius:3px;overflow:hidden}.progress-track>span{display:block;height:100%;background:#8cac49;transition:width .3s}.question-content fieldset{border:0;margin:0;padding:0;min-width:0}.question-content legend{padding:0;display:block;width:100%}.question-chapter{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#78896f;letter-spacing:1.7px;display:block;margin-bottom:12px}.question-title{display:block;font-size:27px;line-height:1.6;letter-spacing:-.7px;font-weight:700;text-wrap:pretty}.question-hint{color:#748072;font-size:11px;margin:10px 0 25px;line-height:1.8}.options{display:grid;gap:10px}.option{position:relative;display:flex;align-items:center;gap:18px;padding:17px 21px;border:1px solid #d7ded0;border-radius:7px;cursor:pointer;min-height:80px;background:#f9faf5;transition:border-color .18s,background .18s,transform .18s}.option:hover{background:#eef2e5;border-color:#9ead8c}.option:has(input:checked){background:#edf4dd;border-color:#819951;box-shadow:inset 0 0 0 1px #819951}.option input{position:absolute;opacity:0;width:1px;height:1px}.option:has(input:focus-visible){outline:3px solid #718e41;outline-offset:3px}.option-icon{font-size:25px;width:32px;flex-shrink:0;text-align:center;color:#73866a}.option-copy{display:block;flex:1}.option-title{display:block;font-size:13px;font-weight:600;line-height:1.6}.option-description{display:block;font-size:10px;color:#788274;margin-top:4px;line-height:1.7}.option-radio{border:1px solid #c5cdbb;border-radius:50%;width:18px;height:18px;flex-shrink:0;display:grid;place-items:center}.option input:checked~.option-radio{background:#152e26;border-color:#152e26}.option input:checked~.option-radio:after{content:"";width:5px;height:8px;border:solid var(--lime);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-2px}.question-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:27px}.question-reassurance{font-size:10px;color:#7b8677}.question-actions .button{min-width:188px}
/* Analysis */
.analysis-page{min-height:calc(100svh - 185px);padding:61px 20px 66px;text-align:center;display:flex;flex-direction:column;align-items:center}.analysis-visual{width:195px;height:195px;display:grid;place-items:center;position:relative;margin:24px 0 22px}.analysis-ring{position:absolute;inset:0;border:1px solid #dce2d3;border-radius:50%}.analysis-ring:before{content:"";position:absolute;inset:13px;border:1px dashed #becdae;border-radius:50%;animation:turn 25s linear infinite}.analysis-ring:after{content:"";position:absolute;width:9px;height:9px;top:11px;left:38px;border-radius:50%;background:#8cae50}.analysis-wave{display:flex;align-items:center;gap:5px;height:65px}.analysis-wave i{width:5px;height:calc(20px + mod(var(--i), 4)*11px);height:42px;border-radius:5px;background:#314b38;animation:wave 1.05s ease-in-out infinite;animation-delay:calc(var(--i)*.075s)}.analysis-wave i:nth-child(3n){background:#92ad61}.analysis-page h1{font-size:31px;line-height:1.65;letter-spacing:-1px}.analysis-page>p{font-size:12px;line-height:2;color:var(--muted);margin-top:14px}.analysis-status{display:flex;align-items:center;gap:9px;margin-top:32px;font-size:11px;color:#596b51;min-height:20px}.analysis-progress{height:3px;width:min(300px,100%);margin-top:15px;background:#e0e7d7;overflow:hidden}.analysis-progress>span{display:block;height:100%;background:#86a747;width:100%;transform-origin:left;animation:analyze 3.4s cubic-bezier(.16,.55,.3,1) both}.analysis-note{font-size:9px;color:#88917f;letter-spacing:.5px;margin-top:18px}@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.2)}}@keyframes turn{to{transform:rotate(360deg)}}@keyframes analyze{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
/* Result */
.result-page{max-width:1000px;margin:auto;padding:55px 0 45px}.result-heading{text-align:center;margin-bottom:37px}.result-heading .eyebrow{display:flex;gap:9px;align-items:center;justify-content:center}.result-heading h1{font-size:35px;letter-spacing:-1.3px;line-height:1.6;margin-top:15px}.mobile-break{display:none}.result-heading p{font-size:11px;color:var(--muted);margin-top:10px}.listen-button{margin-top:22px;min-height:48px;font-size:11px;gap:30px;padding:12px 18px}.share-section{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:39px;padding:30px 28px 35px;display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap}.share-section h3{font-size:17px;margin-top:10px;letter-spacing:-.3px}.share-actions{display:flex;gap:10px}.share-actions .button{min-height:47px;gap:17px;font-size:11px;padding:13px 17px}.share-actions .button .x-icon{font-size:17px}.copy-status{font-size:11px;color:#536843;line-height:1.8;flex-basis:100%;margin:0;empty-cells:hide}.copy-status:empty{display:none}.manual-copy{width:100%;min-height:130px;background:var(--paper);color:var(--ink);padding:12px;border:1px solid #b7c1a9;border-radius:4px;font-size:12px;line-height:1.8;resize:vertical}.retry-section{text-align:center;margin-top:30px}.retry-button{background:none;border:none;font-size:12px;padding:12px;display:inline-flex;align-items:center;gap:10px}.retry-button:hover{text-decoration:underline}.retry-button span{font-size:22px}
@media(min-width:1440px){.hero{gap:80px}.hero h1{font-size:63px}.record-art{height:530px}.record{width:390px;height:390px;margin:-195px}.record-label{transform:scale(1.08)}}
@media(max-width:1180px){.page-shell{padding:0 42px}.hero{gap:35px}.hero h1{font-size:clamp(36px,4.6vw,55px);letter-spacing:-2.5px}.record-art{height:475px}.record{width:320px;height:320px;margin:-160px}.record-label{transform:scale(.94)}.header-caption{font-size:8px;letter-spacing:1.1px}.how-it-works{gap:20px}.how-step{gap:10px}.how-step h2{font-size:11px}.how-step p{font-size:9px}.quiz-layout{grid-template-columns:180px 1fr;gap:40px}.share-section{padding-left:10px;padding-right:10px}.share-actions .button{gap:10px}}
@media(max-width:900px){.page-shell{padding:0 30px}.site-header{height:87px}.header-caption{display:none}.hero{gap:26px;padding:47px 0}.hero h1{font-size:38px;letter-spacing:-2.5px}.edition{font-size:8px;letter-spacing:1.1px;gap:6px;margin-bottom:25px}.hero-intro{font-size:10px;letter-spacing:.3px}.hero-description{font-size:11px;margin:20px 0 23px}.record-art{height:426px}.record{width:290px;height:290px;margin:-145px}.record-label{transform:scale(.85)}.art-top{left:18px;right:18px;font-size:7px;letter-spacing:.6px}.art-bottom{left:18px;right:18px;font-size:6px}.star-one{font-size:42px;right:18px;top:74px}.sound-sticker{font-size:9px;padding:12px;gap:10px;right:13px;bottom:64px}.art-side{font-size:6px;left:12px}.start-button{min-width:260px;font-size:12px}.how-it-works{grid-template-columns:1fr 1fr;gap:28px 25px;padding:30px 0}.how-heading p br{display:none}.how-step h2{font-size:12px}.how-step p{font-size:10px}.how-heading{align-self:center}.site-footer{min-height:73px}.footer-message{display:none}.quiz-page{min-height:calc(100svh - 160px)}.quiz-layout{grid-template-columns:120px 1fr;gap:30px}.quiz-aside .eyebrow{font-size:7px;letter-spacing:.6px}.question-big-number{font-size:85px;margin-top:40px;letter-spacing:-6px}.question-big-number>span{font-size:10px;margin-left:10px}.quiz-aside p{font-size:10px}.question-title{font-size:23px}.option{padding:15px;gap:12px}.question-actions .button{min-width:166px;font-size:11px;gap:18px}.question-reassurance{font-size:9px}.share-section{padding-left:0;padding-right:0}.share-actions .button{font-size:10px;padding:12px}.share-section h3{font-size:15px}.share-section .eyebrow{font-size:7px;letter-spacing:1px}}
@media(max-width:640px){.page-shell{padding:0 22px}.site-header{height:77px;gap:12px}.brand{font-size:24px;letter-spacing:-1px;gap:9px}.brand-icon{transform:scale(.85);transform-origin:left center;width:23px}.brand-dot{font-size:10px;padding-top:6px}.hero{grid-template-columns:1fr;gap:32px;padding:36px 0 37px}.hero-copy{padding:0}.edition{font-size:8px;letter-spacing:1.6px;margin-bottom:24px;gap:8px}.edition .live-dot{width:6px;height:6px}.hero-intro{font-size:11px;letter-spacing:.5px;margin-bottom:11px}.hero h1{font-size:clamp(31px,8.7vw,50px);line-height:1.55;letter-spacing:-2.2px}.underline-mark{height:11px;bottom:2px}.hero-description{font-size:12px;line-height:2.05;margin:18px 0 22px;letter-spacing:.3px}.start-button{width:100%;min-height:56px;padding:17px 23px;font-size:13px}.hero-meta{justify-content:center;font-size:9px;margin-top:15px}.hero-meta>span{padding:0 16px}.hero-footnote{font-size:9px;text-align:center;margin-top:14px}.record-art{height:auto;aspect-ratio:1.08;width:100%;max-width:460px;justify-self:center;border-radius:7px}.record{width:75%;height:auto;aspect-ratio:1;margin:-37.5%;top:50%;left:50%}.record-label{width:48%;height:48%;margin:-24%;padding:13px 5px;transform:scale(1)}.record-label-big{font-size:clamp(23px,7.3vw,34px);margin-top:6px;letter-spacing:-1.3px}.record-label-small{font-size:5px;letter-spacing:1.5px}.record-label-bottom{font-size:3.5px;letter-spacing:.3px;margin-top:10px}.record-hole{top:50%;left:50%;width:7px;height:7px;margin:-3.5px}.art-top{top:19px;left:21px;right:21px;font-size:7px}.orbit-one{width:90%;height:90%;margin:-45%}.orbit-two{width:115%;height:115%;margin:-57.5%}.star-one{font-size:40px;top:53px;right:25px}.star-two{left:22px;bottom:80px;font-size:18px}.art-side{top:72px;font-size:6px;left:13px;letter-spacing:1.8px}.art-bottom{bottom:17px;left:20px;right:20px;font-size:6px;letter-spacing:.8px}.art-index{font-size:11px}.sound-sticker{bottom:52px;right:16px;font-size:9px;padding:10px 15px;gap:10px}.mini-wave{transform:scale(.8);width:21px}.how-it-works{grid-template-columns:1fr;gap:25px;padding:29px 0 32px}.how-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:2px}.how-heading .eyebrow{font-size:8px;letter-spacing:1px}.how-heading p{font-size:10px;margin:0}.how-step{gap:20px}.step-number{font-size:10px;min-width:20px}.how-step h2{font-size:12px}.how-step p{font-size:10px;line-height:1.8;margin-top:5px}.how-step p br{display:none}.site-footer{min-height:86px;align-content:center;flex-wrap:wrap;justify-content:center;gap:8px 20px;padding:18px 0;font-size:8px}.footer-message{display:none}.quiz-page{padding:18px 0 37px;min-height:calc(100svh - 163px)}.quiz-topline{margin-bottom:20px}.quiz-topline .eyebrow{font-size:6px;letter-spacing:.7px}.back-button{font-size:10px;gap:8px}.quiz-layout{display:block}.quiz-aside{display:none}.progress-track{margin:12px 0 28px}.question-progress{font-size:9px}.question-chapter{font-size:8px;letter-spacing:1.5px;margin-bottom:11px}.question-title{font-size:23px;letter-spacing:-.9px;line-height:1.6}.question-hint{font-size:10px;margin:9px 0 22px}.options{gap:9px}.option{min-height:80px;padding:15px 14px;gap:11px;border-radius:6px}.option-icon{font-size:23px;width:27px}.option-title{font-size:12px;line-height:1.6}.option-description{font-size:9px;line-height:1.65;margin-top:4px}.option-radio{width:17px;height:17px}.question-actions{margin-top:23px;flex-direction:column-reverse;gap:16px}.question-actions .button{width:100%;min-height:53px;font-size:12px;justify-content:space-between;padding-left:23px;padding-right:23px}.question-reassurance{font-size:9px}.analysis-page{padding:48px 0;min-height:calc(100svh - 163px)}.analysis-page>.eyebrow{font-size:8px}.analysis-visual{width:172px;height:172px;margin:27px 0 24px}.analysis-page h1{font-size:28px}.analysis-page>p{font-size:10px}.analysis-status{font-size:10px;margin-top:28px}.analysis-note{font-size:8px}.result-page{padding:34px 0 33px}.result-heading{margin-bottom:27px}.result-heading h1{font-size:29px;letter-spacing:-1px;margin-top:13px;line-height:1.6}.result-heading .eyebrow{font-size:8px;letter-spacing:1px}.result-heading p{font-size:10px}.listen-button{font-size:11px;margin-top:18px;padding:12px 22px;gap:40px}.share-section{margin-top:27px;padding:25px 0;gap:21px;display:block;text-align:center}.share-section .eyebrow{font-size:7px;letter-spacing:1.2px}.share-section h3{font-size:16px;margin-top:9px}.share-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:23px}.share-actions .button{font-size:12px;padding:15px 20px;min-height:52px;justify-content:center;gap:18px}.share-actions .button .x-icon{font-size:19px}.copy-status{font-size:10px;margin-top:14px;text-align:left}.manual-copy{margin-top:12px}.retry-section{margin-top:22px}dialog{padding:22px;max-height:calc(100dvh - 30px)}dialog h2{font-size:24px}dialog p{font-size:12px}.dialog-head{margin-bottom:16px}}
@media(max-width:640px){.mobile-break{display:initial}}
@media(max-width:360px){.page-shell{padding:0 17px}.hero h1{font-size:30px;letter-spacing:-2px}.edition{letter-spacing:.8px;font-size:7px}.hero-intro{font-size:10px}.question-title{font-size:21px}.option{padding:13px 10px;gap:8px}.option-title{font-size:11px}.option-description{font-size:8px}.quiz-topline .eyebrow{font-size:5px}.record-label-big{font-size:23px}.record-label-bottom{font-size:3px}.art-side{font-size:5px}.sound-sticker{padding:9px;font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.analysis-progress>span{transform:scaleX(1)}}

.result-heading h1{font-size:15px;font-weight:500;letter-spacing:.5px;margin:0 0 14px}.result-heading h2{font-size:43px;letter-spacing:-1.5px}.result-video{max-width:760px;margin:0 auto;text-align:center}.video-thumbnail{display:block;position:relative;border-radius:8px;overflow:hidden;background:var(--navy);aspect-ratio:16/9}.video-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:52px;border-radius:13px;background:#e11a21;box-shadow:0 3px 15px #0004}.video-play:after{content:"";position:absolute;left:31px;top:15px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid white}.video-thumbnail:hover .video-play{background:#f0262d}.share-section{justify-content:center;max-width:760px;margin-left:auto;margin-right:auto}.result-video .listen-button{margin-top:22px}.copy-status{text-align:center}@media(max-width:640px){.result-heading h1{font-size:13px;margin-bottom:12px}.result-heading h2{font-size:36px}.video-play{transform:translate(-50%,-50%) scale(.8)}}

.analysis-with-ad{padding-top:34px;padding-bottom:34px}.analysis-with-ad .analysis-visual{width:94px;height:94px;margin:20px 0 17px}.analysis-with-ad .analysis-wave{gap:4px;height:42px;transform:scale(.7)}.analysis-with-ad h1{font-size:25px}.analysis-with-ad .analysis-status{margin-top:18px}.analysis-with-ad .analysis-progress>span{animation-duration:var(--analysis-duration)}.analysis-ad{width:min(728px,100%);margin:27px auto 0;text-align:left}.ad-label{display:block;margin-bottom:8px;color:var(--muted);font-size:10px;letter-spacing:1px}.ad-slot{width:100%;min-height:180px;border:1px dashed #cbd3c3;border-radius:6px;background:#eff1e9}@media(max-width:640px){.analysis-with-ad{padding-top:29px;padding-bottom:30px}.analysis-with-ad .analysis-visual{width:78px;height:78px;margin:17px 0}.analysis-with-ad h1{font-size:23px}.analysis-with-ad .analysis-status{margin-top:17px;font-size:10px}.analysis-ad{margin-top:24px}.ad-slot{min-height:250px}}

.result-heading .result-artist { font-size:15px; margin-top:8px; letter-spacing:.5px; color:var(--muted); }

/* App advertisements use the apps' own campaign imagery and readable copy. */
.analysis-intro { display:flex; align-items:center; justify-content:center; gap:24px; text-align:left; }
.analysis-with-ad .analysis-visual { flex:none; width:78px; height:78px; margin:0; }
.analysis-with-ad .analysis-wave { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.52); }
.analysis-with-ad .analysis-status { margin-top:10px; }
.app-promotions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.app-promotion { display:block; position:relative; overflow:hidden; isolation:isolate; min-height:240px; padding:22px; border:1px solid #ffffff26; border-radius:10px; background:#20302a; color:#fff; text-align:left; transition:transform .18s,box-shadow .18s; }
.app-promotion:hover { transform:translateY(-2px); box-shadow:0 8px 22px #15202225; }
.app-promotion .promotion-visual { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.app-promotion:before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#12231deb 0%,#12231dcc 42%,#12231d20 100%); }
.promotion-hoshipro { background:#222441; }
.promotion-hoshipro .promotion-visual { object-position:50% 55%; }
.promotion-hoshipro:before { background:linear-gradient(90deg,#181b40ed 0%,#181b40ba 48%,#181b4010 100%); }
.app-promotion-copy { display:block; position:relative; max-width:88%; }
.promotion-brand { display:block; font-size:11px; line-height:1.5; font-weight:700; letter-spacing:.7px; color:#eef4df; }
.app-promotion-copy strong { display:block; margin-top:9px; font-size:22px; line-height:1.45; letter-spacing:.2px; }
.promotion-description { display:block; margin-top:10px; font-size:10px; line-height:1.7; color:#f0f2ee; }
.promotion-cta { display:inline-flex; align-items:center; gap:12px; margin-top:14px; padding:7px 11px; border:1px solid #ffffff8f; border-radius:4px; font-size:11px; font-weight:600; line-height:1.4; background:#ffffff14; }
.promotion-cta .illustration { width:15px; height:15px; }
@media (max-width:640px) {
  body[data-view="analysis"] .site-header { height:64px; }
  body[data-view="analysis"] .site-footer { display:none; }
  .analysis-with-ad { min-height:calc(100svh - 64px); padding:22px 0; }
  .analysis-intro { width:100%; gap:16px; }
  .analysis-with-ad .analysis-visual { width:58px; height:58px; margin:0; }
  .analysis-with-ad .analysis-wave { transform:translate(-50%,-50%) scale(.4); }
  .analysis-with-ad h1 { font-size:21px; line-height:1.45; }
  .analysis-with-ad .analysis-status { margin-top:8px; font-size:9px; }
  .analysis-with-ad .analysis-ad { margin-top:20px; }
  .app-promotions { grid-template-columns:1fr; gap:12px; }
  .app-promotion { padding:14px 16px; min-height:176px; }
  .app-promotion-copy { max-width:86%; }
  .promotion-brand { font-size:11px; }
  .app-promotion-copy strong { margin-top:5px; font-size:18px; line-height:1.35; }
  .promotion-description { margin-top:6px; font-size:10px; line-height:1.55; }
  .promotion-cta { margin-top:9px; padding:5px 9px; font-size:10px; }
}

@media (max-width:640px) and (max-height:720px) {
  body[data-view="analysis"] .site-header { height:56px; }
  .analysis-with-ad { min-height:calc(100svh - 56px); padding:16px 0; }
  .analysis-with-ad h1 { font-size:18px; line-height:1.4; }
  .analysis-with-ad .analysis-visual { width:48px; height:48px; }
  .analysis-with-ad .analysis-wave { transform:translate(-50%,-50%) scale(.34); }
  .analysis-with-ad .analysis-ad { margin-top:16px; }
  .app-promotion { min-height:164px; padding:12px 16px; }
  .app-promotion-copy strong { font-size:17px; }
}

/* Use SVG drawings consistently, including on platforms with color emoji. */
.illustration { display:block; width:24px; height:24px; flex:none; }
.option-icon { display:grid; place-items:center; }
.option-icon .illustration { width:100%; height:auto; }
.button > .illustration { width:21px; height:21px; }
.back-button .illustration, .retry-button .illustration { width:22px; height:22px; }
.art-top > span:last-child { display:flex; align-items:center; gap:5px; }
.art-top .illustration { width:11px; height:11px; }
.art-star .illustration { width:1em; height:1em; }
.question-heading h1 { font:inherit; }

/* Fill the visible screen with the question, rather than compressing it at the top. */
@media (max-width:640px) {
  body[data-view="quiz"] {
    --question-gap:clamp(10px,1.8dvh,18px);
    --quiz-header-height:clamp(52px,8dvh,72px);
  }
  body[data-view="quiz"] .page-shell {
    height:100svh;
    height:100dvh;
    display:flex;
    flex-direction:column;
  }
  body[data-view="quiz"] .site-header { height:var(--quiz-header-height); flex:none; }
  body[data-view="quiz"] .site-footer { display:none; }
  body[data-view="quiz"] main { display:flex; flex:1; min-height:0; }
  body[data-view="quiz"] .quiz-page {
    display:flex;
    flex-direction:column;
    width:100%;
    min-height:0;
    padding:clamp(8px,1.6dvh,16px) 0 max(16px,env(safe-area-inset-bottom));
  }
  body[data-view="quiz"] .quiz-topline { flex:none; margin-bottom:var(--question-gap); }
  body[data-view="quiz"] .quiz-topline .eyebrow { display:none; }
  body[data-view="quiz"] .back-button { min-height:36px; padding:4px 0; font-size:11px; }
  body[data-view="quiz"] .quiz-layout { display:flex; flex:1; min-height:0; width:100%; }
  body[data-view="quiz"] .question-content { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }
  body[data-view="quiz"] .question-progress { flex:none; font-size:10px; line-height:1.2; }
  body[data-view="quiz"] .progress-track { flex:none; margin:8px 0 var(--question-gap); }
  body[data-view="quiz"] #question-form { display:flex; flex-direction:column; flex:1; min-height:0; gap:var(--question-gap); }
  body[data-view="quiz"] .question-heading { flex:none; }
  body[data-view="quiz"] .question-chapter { display:none; }
  body[data-view="quiz"] .question-title { font-size:clamp(21px,3.1dvh,26px); line-height:1.45; letter-spacing:-.6px; }
  body[data-view="quiz"] .question-hint { margin:6px 0 0; font-size:clamp(11px,1.6dvh,12px); line-height:1.5; }
  body[data-view="quiz"] .question-options { display:flex; flex:1; min-height:0; }
  body[data-view="quiz"] .options { flex:1; grid-template-rows:repeat(4,minmax(min-content,1fr)); gap:clamp(8px,1.4dvh,14px); }
  body[data-view="quiz"] .option { min-height:0; padding:clamp(8px,1.4dvh,14px) 13px; gap:12px; }
  body[data-view="quiz"] .option-icon { width:26px; }
  body[data-view="quiz"] .option-title { font-size:clamp(13px,2.12dvh,16px); line-height:1.45; }
  body[data-view="quiz"] .option-description { font-size:clamp(10px,1.65dvh,12px); line-height:1.45; margin-top:4px; }
  body[data-view="quiz"] .option-radio { width:18px; height:18px; }
  body[data-view="quiz"] .question-actions { flex:none; margin:0; gap:0; }
  body[data-view="quiz"] .question-reassurance { display:none; }
  body[data-view="quiz"] .question-actions .button { min-height:clamp(50px,7dvh,58px); font-size:14px; padding:12px 20px; }
}
@media (max-width:640px) and (max-height:600px) {
  body[data-view="quiz"] { --question-gap:8px; --quiz-header-height:44px; }
  body[data-view="quiz"] .brand { font-size:22px; }
  body[data-view="quiz"] .quiz-page { padding:8px 0 max(12px,env(safe-area-inset-bottom)); }
  body[data-view="quiz"] .back-button { min-height:32px; }
  body[data-view="quiz"] .progress-track { margin-top:5px; }
  body[data-view="quiz"] .question-title { font-size:20px; }
  body[data-view="quiz"] .question-hint { display:none; }
  body[data-view="quiz"] .option { padding:7px 10px; gap:8px; }
  body[data-view="quiz"] .option-icon { width:22px; }
  body[data-view="quiz"] .option-title { font-size:13px; line-height:1.4; }
  body[data-view="quiz"] .option-description { font-size:10px; line-height:1.35; margin-top:3px; }
  body[data-view="quiz"] .question-actions .button { min-height:44px; padding:10px 18px; }
}
@media (max-width:640px) and (max-height:520px) {
  body[data-view="quiz"] .options { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(min-content,1fr)); }
  body[data-view="quiz"] .option-icon { display:none; }
  body[data-view="quiz"] .option-title { padding-right:12px; }
  body[data-view="quiz"] .option-radio { position:absolute; top:8px; right:7px; width:13px; height:13px; }
}