@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#1F3A5F;--accent:#1F3A5F;--paper:#F5F7F9;--line:#C7CCD1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.8}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #1976ce;outline-offset:5px}main:focus{outline:0}header{max-width:1440px;margin:auto;padding:25px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.logo{font-family:Georgia,serif;font-size:31px;letter-spacing:4px;line-height:1.2}.logo span{display:block;font-family:sans-serif;letter-spacing:1.7px;font-size:9px;margin-top:8px}.header-note{font-size:12px;letter-spacing:2px}.mini-home{font-size:11px;letter-spacing:1px;border:1px solid #dad5d8;border-radius:30px;padding:8px 15px}.mini-home b{font-weight:500}.top{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;min-height:650px;padding:55px 5% 45px;gap:25px;align-items:center}.eyebrow{font-family:Arial,sans-serif;letter-spacing:2.5px;font-size:12px;font-weight:700;line-height:1.5}.intro .eyebrow{display:flex;align-items:center;gap:9px}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}.title-label{font-size:15px;letter-spacing:.09em;margin:30px 0 13px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,3.7vw,51px);line-height:1.55;letter-spacing:-.045em;margin-bottom:23px;font-weight:900}.intro h1 span{color:var(--accent);position:relative}.lead{font-size:15px;line-height:2.1;margin-bottom:28px}.primary{min-height:58px;display:inline-flex;justify-content:center;align-items:center;gap:35px;background:var(--accent);border:1px solid var(--accent);border-radius:8px;color:white;padding:15px 30px;font-weight:700;font-size:16px;box-shadow:0 5px 0 #1F3A5F;transition:transform .15s,box-shadow .15s}.primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #1F3A5F}.primary span{font-size:24px;line-height:1}.intro .primary{min-width:300px}.meta{display:flex;gap:14px;font-size:11px;margin:21px 0 5px;color:#69656d}.meta span+span{border-left:1px solid #ddd;padding-left:14px}.text-btn{border:0;background:none;padding:13px 0;color:#625b65;font-size:14px;text-decoration:underline;text-underline-offset:5px}.hero-stage{position:relative;height:560px;border-radius:48% 48% 12px 12px;background:radial-gradient(ellipse at 50% 30%,#fff 0,#DDEAF1 60%,#B8D4E3 100%);isolation:isolate;overflow:hidden;border:1px solid #B8D4E3}.stage-caption{position:absolute;top:35px;width:100%;text-align:center;font-size:10px;letter-spacing:3px;z-index:3}.hero-word{position:absolute;top:76px;left:40px;line-height:.82;font-family:Arial,sans-serif;font-size:107px;letter-spacing:-9px;font-weight:900;color:white;transform:rotate(-7deg);z-index:-1}.orb{position:absolute;border:1px solid #8FA8B8;width:420px;height:420px;border-radius:50%;left:50%;top:75px;transform:translateX(-50%);z-index:-1}.orb-two{width:330px;height:330px;top:120px}.character{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.hero-person{position:absolute;height:345px;width:235px;bottom:97px}.hero-person.one{left:-21px;transform:rotate(-9deg);z-index:1}.hero-person.two{left:50%;transform:translateX(-50%);height:408px;bottom:78px;z-index:2}.hero-person.three{right:-28px;transform:rotate(9deg);z-index:1}.sticker{position:absolute;right:12px;top:106px;z-index:3;background:#faed8f;border:1px solid #dfca5e;border-radius:50%;width:116px;height:116px;display:grid;place-content:center;font-size:12px;font-weight:800;text-align:center;transform:rotate(12deg)}.ticket{position:absolute;bottom:16px;left:7%;width:86%;background:#fff;border:1px dashed #8FA8B8;padding:12px 18px;display:flex;flex-direction:column;align-items:center;transform:rotate(-3deg);z-index:4;box-shadow:0 5px 15px #1F3A5F10}.ticket span{font-family:Arial,sans-serif;font-size:9px;letter-spacing:2px}.ticket b{font-size:18px;letter-spacing:1px}.color-line{max-width:1190px;margin:0 auto;display:grid;grid-template-columns:repeat(9,1fr);padding:25px 5%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:20px}.color-line div{text-align:center}.color-line i{display:block;border-radius:50%;width:35px;height:35px;background:var(--swatch);margin:0 auto 8px;border:1px solid #00000012;box-shadow:inset -2px -3px 0 #00000009}.color-line span{font-family:Arial,sans-serif;font-size:9px;letter-spacing:.7px}.bottom-note{text-align:center;padding:40px 20px}.bottom-note b{font-size:16px}.bottom-note p{font-size:13px;margin:8px 0;color:#77717a}footer{border-top:1px solid var(--line);padding:30px 20px;text-align:center;color:#77717a}footer>span{font-family:Georgia,serif;letter-spacing:4px;font-size:21px}footer p{font-size:11px;line-height:1.9;margin:13px auto}footer small{font-size:10px;letter-spacing:1px}#notice:not(:empty){position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:90%;background:#29252d;color:white;border-radius:10px;padding:12px 22px;font-size:14px;z-index:30;width:max-content}.quiz{max-width:760px;margin:0 auto;min-height:730px;padding:35px 30px}.quiz-top{display:flex;align-items:center;justify-content:space-between;font-size:13px}.quiz-top b{font-size:24px}.progress{height:5px;background:#DDEAF1;border-radius:5px;overflow:hidden;margin:13px 0 55px}.progress>div{height:100%;background:var(--accent);transition:width .2s}.question-content>.eyebrow{color:var(--accent);margin-bottom:20px}.question-content h1{font-size:31px;line-height:1.7;min-height:105px;margin-bottom:12px}.hint{font-size:14px;color:#706975}.options{display:grid;gap:16px;margin-top:28px}.option{background:white;border:1px solid #C7CCD1;border-radius:12px;padding:22px;display:flex;align-items:center;gap:20px;text-align:left;min-height:92px;color:var(--ink);transition:background .15s,border-color .15s}.option:hover,.option.selected{border-color:var(--accent);background:#DDEAF1}.option-letter{flex:none;font-family:Arial,sans-serif;background:#DDEAF1;color:#1F3A5F;width:38px;height:38px;display:grid;place-content:center;border-radius:50%;font-size:14px;font-weight:700}.choice-arrow{margin-left:auto;font-size:21px}.quiz-guide{display:flex;align-items:center;justify-content:center;gap:12px;margin:25px 0}.quiz-guide img{height:105px;width:80px}.quiz-guide p{font-size:12px;color:#766b77;line-height:1.9;margin:0}.analyzing{min-height:650px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}.analyzing h1{font-size:30px}.analyzing>p:last-child{font-size:14px}.color-spinner{margin:0 0 35px;width:90px;height:90px;border-radius:50%;background:conic-gradient(#ea78aa,#9973c3,#429ed1,#43a981,#f2d44f,#ee9242,#e74552,#ea78aa);border:10px solid white;box-shadow:0 0 0 1px #ddd;animation:spin 1.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-hero{max-width:1140px;margin:40px auto 0;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;padding:45px 6%;position:relative;background:color-mix(in srgb,var(--result) 12%,#fff);border:1px solid color-mix(in srgb,var(--result) 30%,#eee);border-radius:20px;overflow:hidden}.result-copy{align-self:center;z-index:2}.result-pre{font-size:16px;margin:24px 0 0}.color-name{font-family:Arial,sans-serif;font-size:clamp(55px,7.2vw,95px);font-weight:900;line-height:1.1;letter-spacing:-5px;margin:10px 0 17px;color:var(--ink)}.result-copy h2{font-size:28px;margin-bottom:5px}.type-name{font-size:14px;letter-spacing:1px;font-weight:700}.description{line-height:2.1;font-size:15px;margin:28px 0}.result-number{font-family:Arial,sans-serif;font-size:10px;letter-spacing:1.5px}.result-visual{position:relative;height:480px;align-self:center}.result-visual:before{content:'';position:absolute;inset:75px 0 50px;border:1px solid color-mix(in srgb,var(--result) 50%,#eee);border-radius:50%}.result-visual img{position:relative}.result-star{position:absolute;top:15px;right:3px;font-size:80px;color:var(--result)}.result-stamp{position:absolute;right:0;bottom:15px;border-radius:50%;background:#fff;padding:20px;font-size:12px;text-align:center;line-height:1.3;transform:rotate(-10deg)}.result-stamp b{font-size:22px}.result-body{max-width:850px;margin:auto;padding:0 35px}.result-body section{padding:70px 0;border-bottom:1px solid var(--line)}.result-body h2{font-size:27px;line-height:1.8;letter-spacing:-.03em}.result-body .eyebrow{color:#776d7a;margin-bottom:20px}.traits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.traits>span{padding:15px 10px;background:color-mix(in srgb,var(--result) 9%,#fff);border:1px solid #e1dce1;font-weight:700;font-size:18px;text-align:center;border-radius:7px}.traits small{font-size:11px;margin-right:12px;font-weight:400}.push-point{font-size:18px;line-height:1.9}.impression{margin-top:35px;border-top:1px dashed #ded6df;padding-top:25px}.impression p{font-size:14px}.tags{display:flex;gap:10px;flex-wrap:wrap}.tags>span{padding:4px 17px;border:1px solid #ddd5de;border-radius:30px;font-size:13px}.tone-section>p{font-size:14px;line-height:2}.tone-instruction{margin-top:30px;font-weight:700}.tone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 16px}.tone{background:none;border:0;padding:0;text-align:left;color:var(--ink);border-radius:7px}.swatch{height:130px;display:block;border-radius:10px;border:1px solid #00000020;position:relative;transition:transform .15s}.tone.active .swatch{outline:2px solid #35313c;outline-offset:3px}.tone-check{display:none;position:absolute;bottom:10px;right:10px;background:#fff;color:#25222b;border-radius:50%;height:25px;width:25px;text-align:center;font-size:15px}.tone.active .tone-check{display:block}.tone>b{display:block;font-family:Arial,sans-serif;font-size:16px;margin-top:14px}.tone>span:last-child{font-size:12px;color:#6c636f}.tone-preview{display:grid;grid-template-columns:1fr 1fr;margin-top:35px;border:1px solid #e4dfe4;border-radius:10px;overflow:hidden;min-height:185px}.preview-color{display:grid;place-content:center}.preview-color span{font-size:90px;font-family:Georgia,serif;line-height:1}.tone-preview>div:last-child{padding:22px}.tone-preview .eyebrow{font-size:9px;letter-spacing:1px}.tone-preview h3{font-family:Arial,sans-serif;font-size:24px;line-height:1.3;margin:10px 0}.tone-preview p{font-size:14px;margin-bottom:5px}.tone-preview small{font-size:11px;color:#746977}.chart-note{font-size:11px!important;color:#807583;margin:18px 0 0}.bridge h2{font-size:30px;line-height:1.9}.bridge em{font-style:normal;text-decoration:underline;text-decoration-color:#B8D4E3;text-underline-offset:8px;text-decoration-thickness:5px}.bridge>p{font-size:15px;line-height:2.1}.brand-questions{margin:30px 0}.brand-questions>div{padding:13px 0;border-bottom:1px solid #e6dfe5;font-size:16px}.brand-questions span{font-family:Arial,sans-serif;color:#1F3A5F;margin-right:20px;font-size:12px}.blue-example{background:#f2f6f9;border-radius:12px;padding:25px;margin-top:35px}.blue-example h3{font-size:16px;margin-bottom:20px}.blue-example>div{display:flex;align-items:center;gap:13px;font-size:14px;margin:14px 0}.blue-example i{width:30px;height:30px;border-radius:50%;border:1px solid #00000010;flex:none}.blue-example b{margin-left:auto;font-family:Arial,sans-serif}.result-body .cta{margin-top:55px;background:#B8D4E3;padding:45px 30px;text-align:center;border:1px solid #8FA8B8;border-radius:16px}.cta h2{font-size:28px}.cta>p{font-size:14px;line-height:2.1}.cta .primary{margin-top:18px;font-size:15px;gap:20px}.cta #service-info{margin-top:35px;border-top:1px solid #8FA8B8;padding-top:25px;font-size:14px}.share-section{text-align:center}.share-section>p{font-size:14px}.share-section h2{font-size:24px}.share-section canvas{width:min(100%,340px);height:auto;display:block;margin:30px auto;border-radius:10px;box-shadow:0 8px 30px #37263417;border:1px solid #eee}.share-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.share-actions .text-btn{width:100%}.secondary{border:1px solid #a69baa;padding:14px 20px;background:white;border-radius:8px;font-weight:700}.share-section #restart{margin-top:25px}.loading{text-align:center;padding:150px 0}
@media(min-width:1400px){.top{min-height:720px}.hero-stage{height:600px}.hero-person{height:390px}.hero-person.two{height:455px}.hero-word{font-size:125px}}
@media(max-width:760px){header{padding:18px 22px}.logo{font-size:25px}.logo span{font-size:7px}.header-note{display:none}.mini-home{font-size:10px;padding:6px 10px}.top{grid-template-columns:1fr;padding:30px 25px 25px;gap:25px}.intro{text-align:center}.intro .eyebrow{justify-content:center;font-size:10px;letter-spacing:2px}.title-label{margin:22px 0 10px;font-size:13px}h1{font-size:35px;line-height:1.5}.lead{font-size:13px;line-height:1.9;margin-bottom:23px}.intro .primary{min-width:0;width:100%;max-width:370px}.meta{justify-content:center;font-size:10px;gap:10px}.meta span+span{padding-left:10px}.hero-stage{height:360px;width:100%;max-width:430px;margin:auto;border-radius:45% 45% 12px 12px}.stage-caption{top:22px;font-size:8px}.hero-word{font-size:77px;top:52px;left:33px;letter-spacing:-6px}.hero-person{height:244px;width:170px;bottom:50px}.hero-person.two{height:287px;bottom:45px}.hero-person.one{left:-17px}.hero-person.three{right:-20px}.sticker{width:83px;height:83px;top:52px;font-size:9px;right:12px}.ticket{bottom:10px;padding:5px 12px}.ticket b{font-size:14px}.ticket span{font-size:7px}.orb{width:300px;height:300px;top:40px}.orb-two{width:225px;height:225px;top:70px}.color-line{padding:22px 20px;gap:5px}.color-line i{width:24px;height:24px;margin-bottom:4px}.color-line span{font-size:6px;letter-spacing:0}.bottom-note{padding:28px 20px}.bottom-note b{font-size:13px}.bottom-note p{font-size:11px}.quiz{padding:20px 22px;min-height:650px}.progress{margin-bottom:35px}.question-content h1{font-size:25px;min-height:95px}.question-content>.eyebrow{font-size:11px}.hint{font-size:12px}.option{padding:19px 15px;gap:12px;font-size:15px;min-height:105px}.option-letter{width:29px;height:29px;font-size:12px}.choice-arrow{font-size:18px}.result-hero{margin:18px 15px 0;padding:28px 25px 14px;grid-template-columns:1fr;gap:0;border-radius:15px}.result-copy>.eyebrow{font-size:10px}.result-pre{font-size:14px;margin-top:17px}.color-name{font-size:65px;letter-spacing:-3px;margin-top:7px;margin-bottom:15px}.result-copy h2{font-size:24px}.type-name{font-size:12px;letter-spacing:.6px}.description{font-size:14px;margin:20px 0 15px}.result-number{font-size:9px}.result-visual{height:310px;max-width:300px;justify-self:center;width:100%}.result-star{font-size:50px;right:0}.result-stamp{padding:15px;font-size:10px;right:-8px;bottom:0}.result-stamp b{font-size:18px}.result-body{padding:0 24px}.result-body section{padding:45px 0}.result-body h2{font-size:22px}.result-body .eyebrow{font-size:9px;letter-spacing:1.7px}.traits{gap:8px}.traits>span{font-size:16px;padding:12px 5px}.traits small{display:block;margin:0 0 3px;font-size:10px}.push-point{font-size:16px}.tags{gap:7px}.tags>span{font-size:12px;padding:4px 13px}.tone-grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}.swatch{height:105px}.tone>b{font-size:15px}.tone>span:last-child{font-size:11px}.tone-section>p{font-size:13px}.tone-preview{min-height:160px}.tone-preview>div:last-child{padding:18px 14px}.tone-preview h3{font-size:20px}.preview-color span{font-size:70px}.bridge h2{font-size:23px}.bridge>p{font-size:14px}.brand-questions>div{font-size:14px}.blue-example{padding:20px 15px}.blue-example>div{gap:9px;font-size:12px}.blue-example b{font-size:12px}.result-body .cta{margin:30px -9px 0;padding:30px 18px}.cta h2{font-size:22px}.cta>p{font-size:12px}.cta .primary{padding:15px 20px;font-size:14px}.share-section h2{font-size:21px}.share-section>p{font-size:12px}.share-actions{gap:12px}.share-actions .primary,.secondary{font-size:14px;padding:13px 17px}.desktop-br{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.hero-person{mix-blend-mode:multiply}.hero-person .character{mix-blend-mode:normal}
@media(max-width:760px){.color-line{grid-template-columns:repeat(3,1fr);gap:14px 12px;padding:22px 27px}.color-line div{display:flex;align-items:center;gap:8px}.color-line i{width:21px;height:21px;margin:0;flex:none}.color-line span{font-size:9px;letter-spacing:.5px}.sticker{top:32px;right:5px;width:74px;height:74px;font-size:8px}}
.hero-person{mix-blend-mode:normal;width:32%;height:340px;background:#fff;border-radius:100px 100px 8px 8px;box-shadow:0 7px 20px #1F3A5F10;overflow:hidden}.hero-person.one{left:1%;transform:rotate(-5deg);bottom:105px}.hero-person.two{left:50%;height:390px;bottom:105px}.hero-person.three{right:1%;transform:rotate(5deg);bottom:105px}.sticker{top:50px;right:25px;width:95px;height:95px;font-size:10px}
@media(max-width:760px){.hero-person{width:32%;height:210px;bottom:62px!important}.hero-person.two{height:250px}.hero-person.one{left:1%;transform:rotate(-4deg)}.hero-person.three{right:1%;transform:rotate(4deg)}.sticker{display:none}}

/* AURIA brand palette — deck-design-system.md */
:root{--brand-blue:#B8D4E3;--brand-cta:#7B9ACC;--brand-navy:#1F3A5F}.primary{background:var(--brand-cta);border-color:var(--brand-cta);color:#101F35}.intro h1.app-title{font-size:clamp(28px,2.5vw,37px);line-height:1.65;letter-spacing:-.04em}.app-title>span{font-size:1.55em;color:var(--brand-navy)}.main-copy{font-size:15px;font-weight:700;margin:0 0 18px;line-height:1.9}.live-dot{background:var(--brand-cta)}.hero-stage{background:radial-gradient(ellipse at 50% 30%,#F5F7F9 0,#DDEAF1 55%,#B8D4E3 100%)}.sticker{background:#F4F1EA;border-color:#C7CCD1;color:#1F3A5F}@media(max-width:760px){.intro h1.app-title{font-size:clamp(22px,6.8vw,30px);margin-bottom:17px}.main-copy{font-size:13px}.title-label{font-size:12px}}
/* Rounded display lettering inspired by the supplied Nikumaru sample. */
@font-face{font-family:'Mochiy Pop One';src:url('fonts/mochiy-pop-one.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.app-title,.result-copy h2,.color-name,.result-body h2,.question-content h1,.primary,.traits>span{font-family:'Mochiy Pop One','Noto Sans JP',sans-serif;font-weight:400}
.intro h1.app-title{font-size:clamp(24px,2.1vw,31px);letter-spacing:0;line-height:1.9;paint-order:stroke fill;-webkit-text-stroke:5px white;text-shadow:0 4px 0 #B8D4E3}
.app-title>span{font-size:1.65em;color:#1F3A5F;-webkit-text-stroke:7px white;text-shadow:0 5px 0 #B8D4E3}
.result-copy h2{font-size:26px;line-height:1.8}.color-name{font-size:clamp(48px,6vw,78px);letter-spacing:0;line-height:1.4}.result-body h2{font-size:23px;line-height:1.95}.question-content h1{font-size:27px;line-height:1.9}.traits>span{font-size:16px}.primary{font-size:15px}
@media(max-width:760px){.intro h1.app-title{font-size:clamp(20px,5.8vw,25px);line-height:2}.result-copy h2{font-size:22px}.color-name{font-size:clamp(35px,10.7vw,49px)}.result-body h2{font-size:19px;line-height:2}.question-content h1{font-size:22px}.traits>span{font-size:14px}.primary{font-size:14px}}
/* POP IDOL — bold sticker lettering, ticket borders and candy accents. */
:root{--paper:#e6f3ff;--ink:#20365b;--line:#20365b;--pop-yellow:#fff16d;--pop-pink:#ff83bd;--pop-blue:#7B9ACC}
body{background-color:var(--paper);background-image:radial-gradient(#7B9ACC55 1.2px,transparent 1.2px);background-size:18px 18px}
header{background:#fff;border-bottom:3px solid var(--ink);max-width:none;padding-top:17px;padding-bottom:17px}.logo{font-family:'Mochiy Pop One',sans-serif;font-size:25px;letter-spacing:1px}.logo span{font-size:9px}.header-note{font-weight:800;color:var(--ink)}.mini-home{border:2px solid var(--ink);background:var(--pop-yellow);box-shadow:3px 3px 0 var(--ink);font-weight:800}
.top{padding-top:40px;padding-bottom:40px;gap:40px}.intro .eyebrow{background:var(--pop-yellow);border:2px solid var(--ink);border-radius:30px;padding:9px 15px;display:inline-flex;transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink);letter-spacing:1px}.live-dot{background:#ff51a1}.title-label{font-weight:800;font-size:14px;margin-top:30px}
.intro h1.app-title{font-size:clamp(23px,2.3vw,34px);line-height:1.9;transform:rotate(-3deg);margin:15px 0 25px;filter:drop-shadow(3px 4px 0 #20365b);-webkit-text-stroke:7px white;text-shadow:none}.app-title>span{display:inline-block;font-size:1.95em;color:#527cc2!important;-webkit-text-stroke:10px white;text-shadow:none}.main-copy{font-size:15px;font-weight:900}.lead{font-size:15px;font-weight:500}.primary{border:3px solid var(--ink);background:var(--pop-yellow);border-radius:50px;box-shadow:5px 6px 0 var(--ink);color:var(--ink);min-height:64px;font-size:17px;padding:15px 30px}.primary:hover{box-shadow:6px 8px 0 var(--ink);transform:translate(-1px,-2px);background:#fff695}.primary:active{transform:translate(3px,3px);box-shadow:2px 3px 0 var(--ink)}.meta{font-size:12px;font-weight:700;color:var(--ink);margin-top:23px}
.hero-stage{border:3px solid var(--ink);border-radius:24px;background:repeating-conic-gradient(from 0deg at 50% 48%,#b8d4e3 0deg 15deg,#dceeff 15deg 30deg);box-shadow:9px 10px 0 #7B9ACC;overflow:hidden;transform:rotate(2deg)}.stage-caption{top:22px;letter-spacing:2px;font-weight:900;font-size:12px}.hero-word{color:white;opacity:.95;top:70px;left:20px;font-size:110px;-webkit-text-stroke:2px #7b9acc;letter-spacing:-5px}.orb{border:3px dashed white}.orb-two{border:3px solid #ffffff80}.hero-person{border:2px solid var(--ink);border-radius:90px 90px 12px 12px;box-shadow:4px 5px 0 #20365b}.hero-person.one{background:#ffe0ef}.hero-person.two{background:white}.hero-person.three{background:#fff5ad}.hero-person .character{mix-blend-mode:multiply}.sticker{background:var(--pop-pink);border:3px solid var(--ink);box-shadow:4px 4px 0 white;font-family:'Mochiy Pop One',sans-serif;font-size:10px;top:45px;right:15px}.ticket{background:#fff16d;border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);border-radius:8px;bottom:18px}.ticket b{font-weight:900;font-size:22px}.ticket span{font-weight:700}.color-line{margin:15px auto 0;background:white;border:3px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 #7B9ACC;padding:25px 30px;max-width:1120px}.color-line i{border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);width:38px;height:38px}.color-line span{font-weight:800;font-size:10px}.bottom-note{padding:40px 20px}.bottom-note b{font-family:'Mochiy Pop One',sans-serif;font-weight:400}.bottom-note p{color:var(--ink)}footer{background:white;border-top:3px solid var(--ink)}footer>span{font-family:'Mochiy Pop One',sans-serif}
.quiz{margin:35px auto;background:white;border:3px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 #7B9ACC;min-height:690px}.quiz-top b{font-family:'Mochiy Pop One',sans-serif}.progress{height:16px;border:2px solid var(--ink);background:#eef6ff;border-radius:20px;margin-bottom:35px}.progress>div{background:repeating-linear-gradient(120deg,#7B9ACC 0 14px,#B8D4E3 14px 28px)}.question-content>.eyebrow{display:inline-block;background:var(--pop-yellow);border:2px solid var(--ink);padding:6px 15px;border-radius:30px;transform:rotate(-3deg)}.option{border:2px solid var(--ink);box-shadow:4px 5px 0 #7B9ACC;border-radius:18px;font-weight:700}.option:nth-child(2){box-shadow:4px 5px 0 #ffb3d5}.option:hover,.option.selected{background:#fff7ad;border-color:var(--ink);transform:translateY(-2px)}.option-letter{border:2px solid var(--ink);background:#b8d4e3}.option:nth-child(2) .option-letter{background:#ffc2de}.quiz-guide p{background:#f0f7ff;border:2px solid var(--ink);border-radius:15px;padding:12px;font-size:13px;color:var(--ink)}
.result-hero{border:3px solid var(--ink);border-radius:25px;box-shadow:8px 9px 0 var(--result);background-color:color-mix(in srgb,var(--result) 20%,white);background-image:radial-gradient(#ffffffb0 2px,transparent 2px);background-size:18px 18px}.result-copy>.eyebrow{display:inline-block;background:var(--pop-yellow);border:2px solid var(--ink);padding:8px 13px;border-radius:30px;transform:rotate(-3deg);letter-spacing:1px}.color-name{color:var(--result);paint-order:stroke fill;-webkit-text-stroke:8px white;filter:drop-shadow(3px 4px 0 #20365b);transform:rotate(-4deg);margin-top:15px;margin-bottom:22px}.result-copy h2{display:table;background:white;border:2px solid var(--ink);padding:7px 15px;border-radius:12px;box-shadow:3px 4px 0 var(--result)}.type-name{font-weight:900;letter-spacing:1px;margin-top:17px}.description{background:#fffffff0;padding:17px;border:2px solid var(--ink);border-radius:15px;font-weight:500}.result-visual:before{background:white;border:4px dashed var(--result);box-shadow:0 0 0 8px white;inset:35px 0 20px}.result-stamp{background:var(--pop-yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-weight:900}.result-star{color:var(--result);-webkit-text-stroke:2px white;filter:drop-shadow(2px 2px 0 #20365b)}.result-body{max-width:920px}.result-body section{background:white;margin-top:35px;padding:35px;border:3px solid var(--ink);border-radius:22px;box-shadow:6px 7px 0 #7B9ACC}.result-body .eyebrow{color:var(--ink);display:inline-block;border-radius:6px;background:#fff16d;padding:7px 10px;font-size:11px;letter-spacing:1px;font-weight:900}.traits>span{border:2px solid var(--ink);box-shadow:3px 4px 0 var(--result);border-radius:12px;background:color-mix(in srgb,var(--result) 25%,white)}.tags>span{background:#e6f3ff;border:2px solid var(--ink);font-weight:700}.swatch{border:2px solid var(--ink);box-shadow:3px 4px 0 #20365b;border-radius:15px}.tone.active .swatch{outline:3px solid #20365b;outline-offset:4px}.tone>b{margin-top:18px}.tone-preview{border:2px solid var(--ink);box-shadow:4px 4px 0 #b8d4e3;border-radius:16px}.bridge em{text-decoration-color:#fff16d;text-decoration-thickness:9px}.brand-questions>div{border-bottom:2px dashed #b8d4e3;font-weight:700}.brand-questions span{display:inline-grid;place-content:center;background:#fff16d;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink)}.blue-example{border:2px solid var(--ink);background:#e6f3ff}.result-body .cta{background:#B8D4E3;border:3px solid var(--ink);box-shadow:7px 8px 0 #7B9ACC;border-radius:24px;padding:35px 25px;margin-top:35px}.cta>p{font-size:15px}.share-section canvas{border:2px solid var(--ink);box-shadow:7px 8px 0 #b8d4e3;transform:rotate(-2deg);margin-bottom:40px}.secondary{border:2px solid var(--ink);border-radius:40px;background:#ffe0ef;box-shadow:3px 4px 0 var(--ink)}.share-section{margin-bottom:40px!important}
@media(max-width:760px){header{padding:16px 20px}.logo{font-size:22px}.mini-home{font-size:9px}.top{padding:30px 23px;gap:35px}.intro .eyebrow{font-size:10px}.intro h1.app-title{font-size:clamp(20px,5.8vw,25px);line-height:2.1;margin-bottom:21px}.app-title>span{font-size:1.95em;-webkit-text-stroke:8px white}.main-copy{font-size:13px}.lead{font-size:14px}.primary{font-size:15px;min-height:62px}.meta{font-size:10px;gap:9px}.hero-stage{height:375px;border-radius:20px;box-shadow:6px 7px 0 #7B9ACC}.stage-caption{font-size:9px;top:19px}.hero-word{font-size:78px;top:48px}.ticket{bottom:13px;padding:7px 10px}.ticket b{font-size:16px}.hero-person{bottom:77px!important}.hero-person.two{height:250px}.color-line{margin:10px 19px 0;padding:22px 18px;gap:16px 8px;border-radius:17px}.color-line i{width:24px;height:24px}.color-line span{font-size:9px}.bottom-note b{font-size:13px}.quiz{margin:22px 15px;padding:20px 18px;box-shadow:5px 6px 0 #7B9ACC;min-height:650px}.option{padding:18px 12px;font-size:14px;gap:10px}.quiz-guide{gap:6px}.quiz-guide p{font-size:11px;padding:10px}.result-hero{margin:23px 16px 0;padding:23px 20px 18px;box-shadow:5px 6px 0 var(--result)}.result-copy>.eyebrow{font-size:10px}.color-name{font-size:clamp(34px,10.5vw,48px);-webkit-text-stroke:6px white}.result-copy h2{font-size:20px;padding:6px 12px}.description{padding:13px;font-size:14px}.result-body{padding:0 16px}.result-body section{padding:28px 18px;margin-top:27px;border-radius:18px;box-shadow:4px 5px 0 #7B9ACC}.result-body h2{font-size:18px;line-height:2}.result-body .eyebrow{font-size:9px;letter-spacing:.3px}.traits>span{font-size:13px}.tone-grid{gap:23px 13px}.swatch{height:100px}.tone>b{font-size:14px}.tone-preview>div:last-child{padding:14px 11px}.tone-preview h3{font-size:18px}.brand-questions>div{font-size:12px}.brand-questions span{margin-right:9px}.blue-example{padding:18px 10px}.blue-example>div{gap:7px;font-size:11px}.blue-example b{font-size:11px}.result-body .cta{margin:27px 0 0;padding:28px 15px}.cta>p{font-size:13px}.cta br{display:none}.cta h2 br{display:block}.share-actions .primary,.secondary{font-size:13px;padding:12px}.share-section>p{font-size:12px}}
/* Compact app identity: penlight / small AURIA credit / diagnosis name. */
header .logo{display:flex;align-items:center;gap:15px;letter-spacing:0;font-family:'Noto Sans JP',sans-serif;flex-shrink:0}
.brand-penlight{width:40px;height:55px;flex:none}
header .logo .brand-lockup{display:flex;flex-direction:column;border-left:2px solid #B8D4E3;padding-left:17px;gap:5px;margin:0}
header .logo .brand-credit{font-family:'Noto Sans JP',sans-serif;font-size:11px;font-weight:600;letter-spacing:2px;line-height:1.2;margin:0}
header .logo .brand-app-name{font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:800;letter-spacing:0;line-height:1.5;margin:0}
.brand-mobile-break{display:none}
footer .footer-title{display:block;font-family:'Mochiy Pop One','Noto Sans JP',sans-serif;font-size:18px;letter-spacing:0;line-height:1.8}
@media(max-width:1000px){.header-note{display:none}}
@media(max-width:760px){header{padding:14px 17px;gap:10px}header .logo{gap:9px;flex-shrink:1}.brand-penlight{width:29px;height:43px}header .logo .brand-lockup{padding-left:10px;gap:3px}header .logo .brand-credit{font-size:9px;letter-spacing:1.7px}header .logo .brand-app-name{font-size:12px;line-height:1.5}.brand-mobile-break{display:block}.mini-home{font-size:8px;padding:6px 8px;white-space:nowrap;flex:none}footer .footer-title{font-size:14px}}
/* Clean character showcase: original image colors, quieter framing. */
.hero-stage{height:510px;background:#edf6ff;border:2px solid #7B9ACC;border-radius:28px;box-shadow:0 7px 0 #b8d4e3;transform:none;overflow:hidden;padding:0;isolation:isolate}
.hero-stage .hero-word,.hero-stage .orb,.hero-stage .sticker{display:none}
.hero-stage .stage-caption{top:27px;color:#496b98;letter-spacing:2px;font-size:11px}
.hero-stage .hero-person{width:30%;height:335px;bottom:105px!important;background:#fff;transform:none;border:0;border-radius:90px 90px 18px 18px;box-shadow:0 4px 12px #20365b0a;overflow:hidden;mix-blend-mode:normal}
.hero-stage .hero-person.one{left:3%;border-bottom:7px solid #f1a8cb}
.hero-stage .hero-person.two{left:35%;height:365px;transform:none;border-bottom:7px solid #8ab9e5}
.hero-stage .hero-person.three{right:3%;border-bottom:7px solid #f4db76}
.hero-stage .hero-person .character{mix-blend-mode:normal;filter:none;opacity:1}
.hero-stage .ticket{left:8%;width:84%;bottom:22px;background:#fff;border:1px solid #c3d7e8;border-radius:15px;box-shadow:none;transform:none;padding:10px 15px}
.hero-stage .ticket span{font-size:9px;letter-spacing:1.3px;color:#567393}
.hero-stage .ticket b{font-size:20px;letter-spacing:1px;color:#20365b}
.hero-stage .ticket span:last-child{display:none}
@media(max-width:760px){.hero-stage{height:340px;max-width:430px;border-radius:23px;box-shadow:0 5px 0 #b8d4e3}.hero-stage .stage-caption{top:19px;font-size:9px;letter-spacing:1.4px}.hero-stage .hero-person{height:208px;bottom:85px!important;border-radius:60px 60px 14px 14px}.hero-stage .hero-person.two{height:230px}.hero-stage .ticket{bottom:17px;padding:9px 10px;left:7%;width:86%;border-radius:13px}.hero-stage .ticket b{font-size:16px}.hero-stage .ticket span{font-size:8px}}
/* WHITE needs a contrasting backdrop while preserving its white identity. */
.result[data-color="WHITE"] .result-hero{background-color:#b8ccdf;background-image:radial-gradient(#ffffff55 1.5px,transparent 1.5px);border-color:#527294;box-shadow:6px 7px 0 #7b9acc}
.result[data-color="WHITE"] .color-name{color:#fff;-webkit-text-stroke:3px #526d8e;filter:drop-shadow(2px 3px 0 #ffffff);text-shadow:none}
.result[data-color="WHITE"] .result-visual:before{background:#dce7f0;border:3px dashed #7b9acc;box-shadow:0 0 0 7px #dce7f0}
.result[data-color="WHITE"] .result-visual .character{mix-blend-mode:normal}
.result[data-color="WHITE"] .result-star{color:#fff;-webkit-text-stroke:2px #526d8e}
.result[data-color="WHITE"] .traits>span{background:#edf3f8;box-shadow:3px 4px 0 #a8bed1}
@media(max-width:760px){.result[data-color="WHITE"] .color-name{-webkit-text-stroke:2px #526d8e}}

/* Selected OGP artwork as the first-view hero. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.home-hero{max-width:1120px;margin:0 auto;padding:24px 24px 32px;text-align:center}
.home-hero-image{display:block;width:100%;height:auto;border-radius:22px;border:3px solid #fff;box-shadow:0 5px 0 #b8d4ee}
.home-hero-actions{padding:24px 12px 0}
.home-hero-actions .lead{font-size:15px;line-height:1.85;margin:0 0 18px}
.home-hero-actions .primary{min-width:300px;max-width:100%;justify-content:center}
.home-hero-actions .meta{justify-content:center;margin:18px 0 0}
.home-hero-actions .text-btn{margin-top:4px}
@media(max-width:600px){.home-hero{padding:12px 0 26px}.home-hero-image{border:0;border-radius:0;box-shadow:none}.home-hero-actions{padding:22px 20px 0}.home-hero-actions .lead{font-size:13px}.home-hero-actions .primary{width:100%;min-width:0;max-width:360px}}

/* Full-resolution artwork with layered physical framing. */
.home-hero{padding-top:32px}
.home-hero-frame{position:relative;isolation:isolate;margin:0 6px 14px;border-radius:24px;background:#fff;box-shadow:0 18px 30px -18px #183e7080}
.home-hero-frame::before,.home-hero-frame::after{content:"";position:absolute;inset:0;z-index:-1;border:2px solid #fff;border-radius:inherit;pointer-events:none}
.home-hero-frame::before{background:#8cc8ff;transform:translate(5px,10px) rotate(1deg);box-shadow:0 4px 0 #4779b53d}
.home-hero-frame::after{background:#d7ebff;transform:translate(-4px,5px) rotate(-.7deg)}
.home-hero-frame .home-hero-image{position:relative;border:4px solid #fff;border-radius:24px;box-shadow:0 2px 8px #31558024}
.home-hero-actions{padding-top:26px}
@media(max-width:600px){.home-hero{padding:18px 0 26px}.home-hero-frame{margin:0 10px 12px;border-radius:15px}.home-hero-frame .home-hero-image{border:2px solid #fff;border-radius:15px}.home-hero-frame::before{transform:translate(2px,7px) rotate(1deg)}.home-hero-frame::after{transform:translate(-2px,4px) rotate(-.7deg)}.home-hero-actions{padding-top:24px}}

/* Independently composited title, nine alpha sprites, clouds and accents. */
.layered-stage{position:relative;aspect-ratio:1.6;overflow:hidden;isolation:isolate;border:3px solid white;border-radius:24px;background:radial-gradient(ellipse at 50% 48%,#fff 8%,#d9f1ff 48%,#b2e0fc 100%)}
.layered-clouds{position:absolute;inset:0;background:radial-gradient(ellipse at 5% 15%,#ffffffcf 0,transparent 30%),radial-gradient(ellipse at 90% 10%,#ffffffd9 0,transparent 28%),radial-gradient(ellipse at 20% 85%,#fff 0,transparent 34%),radial-gradient(ellipse at 88% 80%,#fff 0,transparent 28%);opacity:.8}
.hero-title-layer{position:absolute;left:18%;top:25%;width:64%;height:auto;z-index:3;filter:drop-shadow(0 6px 4px #356cab30);pointer-events:none}
.hero-actor{position:absolute;width:22%;aspect-ratio:1;z-index:2;filter:drop-shadow(0 5px 3px #396c9f38);animation:hero-bob var(--duration) ease-in-out var(--delay) infinite;transform-origin:50% 75%;pointer-events:none}
.hero-actor-sprite{display:block;width:100%;height:100%;background-image:url('assets/hero-character-layers.webp');background-size:300% 300%;background-position:calc(var(--col)*50%) calc(var(--row)*50%);background-repeat:no-repeat}
.actor-blue{left:2%;top:0}.actor-pink{left:26%;top:-1%}.actor-yellow{left:50%;top:-1%}.actor-red{left:76%;top:0}
.actor-purple{left:-1%;top:33%;width:20%}.actor-orange{right:-1%;top:33%;width:20%}
.actor-black{left:10%;top:65%;width:22%}.actor-white{left:39%;top:75%;width:23%;z-index:4}.actor-green{right:10%;top:65%;width:22%}
.hero-confetti{position:absolute;inset:0;z-index:1;pointer-events:none}.hero-confetti span{position:absolute;font-size:clamp(12px,2.6vw,32px);line-height:1;-webkit-text-stroke:2px white;paint-order:stroke fill;filter:drop-shadow(0 3px 1px #397daf32);animation:hero-sparkle 5s ease-in-out calc(var(--i)*-.7s) infinite}
.motion-toggle{display:block;margin:20px 8px 0 auto;background:#ffffffcf;color:#1f3a5f;border:1px solid #a7c4df;border-radius:24px;padding:8px 14px;font-size:11px;min-height:40px}
.home-hero-actions{padding-top:12px}
@keyframes hero-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes hero-sparkle{0%,100%{transform:translateY(0) scale(.93)}50%{transform:translateY(-4px) scale(1.06)}}
.motion-paused .hero-actor,.motion-paused .hero-confetti span{animation-play-state:paused}
@media(max-width:600px){.layered-stage{border-width:2px;border-radius:15px}.hero-title-layer{filter:drop-shadow(0 3px 2px #356cab30)}.hero-actor{filter:drop-shadow(0 2px 2px #396c9f30)}.hero-confetti span{-webkit-text-stroke:1px white}.motion-toggle{margin-top:16px;margin-right:14px}.home-hero-actions{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.hero-actor,.hero-confetti span{animation:none!important}}

.actor-white{top:71%}.actor-green .hero-actor-sprite{clip-path:inset(2% 1% 1% 5%)}.motion-toggle[hidden]{display:none}

/* Static layered FV; retain the decorative scene. */
.layered-stage .hero-actor,.layered-stage .hero-confetti span{animation:none!important;transform:none}
.hero-streamers{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-streamers i{position:absolute;width:.65%;height:4%;min-width:2px;border-radius:1px;background:linear-gradient(100deg,#829bb0 0%,#fff 28%,#c5d5e0 48%,#fff 72%,#a3b8c9 100%);box-shadow:1px 2px 2px #52738f25}
.home-hero-actions{padding-top:24px}

/* Shared reference-inspired diagonal blue background. */
.layered-stage{background:#d7f1ff url('assets/hero-diagonal-background.webp') center/100% 100% no-repeat}
.layered-clouds{display:none}

/* WHITE result uses a white canvas with readable navy outlines. */
.result[data-color="WHITE"] .result-hero{background:#fff;border-color:#aabccd;box-shadow:6px 7px 0 #d6e1eb}
.result[data-color="WHITE"] .result-visual:before{background:#fff;border-color:#c7d4e0}
.result[data-color="WHITE"] .color-name{color:#fff;-webkit-text-stroke:2px #3d5878;text-shadow:3px 4px 0 #c8d5e2}

.result[data-color="WHITE"] .color-name{filter:none;paint-order:stroke fill;-webkit-text-stroke:3px #3d5878;text-shadow:2px 3px 0 #3d5878}

/* Snow white from the user-selected color reference. */
.result[data-color="WHITE"] .result-hero{background:#F4FBFE}
.result[data-color="WHITE"] .result-visual:before{background:transparent}
.result[data-color="WHITE"] .color-name{color:#F4FBFE}
.chart-note a{text-decoration:underline;text-underline-offset:3px}