@import "tailwindcss";

:root{--ink:#24352e;--green:#355c45;--paper:#fbfaf6;--muted:#748076;--line:#e0e4da;--lime:#d7ed8f}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #829d37;outline-offset:5px}h1,h2,h3,p{margin:0}button{border:0}h1,h2,h3{word-break:keep-all}p{word-break:keep-all;line-height:1.75}.site-header{height:100px;max-width:1180px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-size:27px;letter-spacing:-1.7px;font-weight:900;display:flex;align-items:center}.logo span{font-weight:400}.logo i{width:8px;height:8px;background:#86a457;border-radius:50%;margin:0 0 13px 4px}.edition{font-size:9px;letter-spacing:1.8px;color:var(--muted)}.edition b{margin-left:14px;color:var(--green);background:#edf1e8;padding:7px 10px;border-radius:20px;font-size:9px;letter-spacing:1px}.landing{max-width:1180px;margin:auto;padding:0 40px}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:35px;padding:70px 0 65px;align-items:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--green);margin-bottom:22px}.live-dot{width:7px;height:7px;background:#7b9853;display:inline-block;border-radius:50%;margin-right:7px}.hero h1{font-size:clamp(32px,3.6vw,48px);letter-spacing:-2.4px;line-height:1.42;font-weight:800}.hero h1 em{font-style:normal;position:relative;z-index:0}.hero h1 em:after{content:'';position:absolute;inset:60% -6px 1px;background:var(--lime);z-index:-1;border-radius:40%}.hero-description{font-size:14px;color:var(--muted);margin-top:24px;line-height:1.9}.primary{display:flex;justify-content:space-between;align-items:center;background:var(--green);color:#fff;border-radius:12px;padding:19px 24px;font-weight:700;font-size:15px;transition:background .15s,transform .15s;min-height:58px}.primary:hover{background:#264733;transform:translateY(-1px)}.primary span{font-size:22px;font-weight:400}.hero-cta{max-width:315px;margin-top:30px}.micro{font-size:11px;color:var(--muted);line-height:1.8;margin-top:14px}.hero-copy>.micro{max-width:315px;text-align:center}.hero-visual{height:380px;background:#edf1e4;border-radius:48% 48% 20px 20px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.orbit-label{position:absolute;top:26px;font-size:8px;letter-spacing:1.6px;color:#71815e}.floating-note{position:absolute;padding:10px 14px;background:#fffcf1;border:1px solid #e6e4d8;border-radius:9px;box-shadow:0 7px 16px #30452509;font-size:11px;color:#536044}.note-one{right:18px;top:120px;transform:rotate(8deg)}.note-two{left:15px;bottom:114px;transform:rotate(-8deg)}.visual-caption{position:absolute;bottom:27px;text-align:center;display:grid;gap:8px}.visual-caption span{font-size:8px;letter-spacing:1.5px;color:#748065}.visual-caption b{font-size:13px}.type-art{width:260px;height:220px;position:relative;flex-shrink:0;margin:auto}.art-body{position:absolute;width:138px;height:152px;border-radius:44px 44px 30px 30px;background:#739054;left:63px;top:29px;transform:rotate(-9deg);box-shadow:inset -12px -9px 0 #385e2620,0 20px 30px #36502515}.art-eyes{display:flex;gap:25px;position:absolute;left:40px;top:55px}.art-eyes i{width:9px;height:12px;background:#203b2d;border-radius:50%}.art-smile{position:absolute;width:21px;height:10px;border:2px solid #203b2d;border-top:0;border-radius:0 0 20px 20px;top:83px;left:61px}.art-ring{width:223px;height:71px;border:1px solid #8caa704a;border-radius:50%;position:absolute;left:18px;top:115px;transform:rotate(-24deg)}.art-spark{position:absolute;color:#50653e;font-size:42px;line-height:1}.spark-a{top:0;left:13px;transform:rotate(12deg)}.spark-b{bottom:23px;right:10px;font-size:32px}.art-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:#d1ab69;top:19px;right:35px}.art-0 .art-body{border-radius:50%;background:#d8a34a;transform:rotate(9deg);width:150px;height:150px;left:55px}.art-0 .art-eyes{left:43px}.art-0 .art-spark{color:#b47f38}.art-2 .art-body{background:#9ba8c9;border-radius:65px 65px 25px 25px;transform:rotate(8deg)}.art-2 .art-spark{color:#7c89ac}.art-small{transform:scale(.65);height:160px;transform-origin:center center;margin-top:-5px;margin-bottom:-15px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.section-heading .eyebrow{margin-bottom:8px;font-size:9px}.section-heading h2{font-size:21px;letter-spacing:-.8px}.pill{font-size:10px;border:1px solid var(--line);padding:8px 12px;border-radius:20px;color:var(--muted)}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.preview-card{padding:22px 25px 24px;border-radius:16px;transition:transform .2s}.preview-card:hover{transform:translateY(-5px)}.tone-0{background:#f4eddd}.tone-1{background:#eaf0df}.tone-2{background:#eaeef6}.preview-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:700}.preview-top span:last-child{font-size:18px;font-weight:400}.preview-card h3{font-size:20px;margin-bottom:9px;letter-spacing:-.7px}.preview-card p{font-size:12px;color:#667062;min-height:43px}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.tags span{background:#ffffff65;padding:5px 10px;border-radius:20px;font-size:10px;color:#58614d}.landing-bottom{display:flex;justify-content:center;gap:0;margin-top:45px;font-size:12px;color:#64705f}.landing-bottom span{padding:0 26px}.landing-bottom span+span{border-left:1px solid var(--line)}.scope-note{text-align:center;font-size:11px;color:var(--muted);margin-top:15px}footer{max-width:1100px;margin:55px auto 0;padding:30px 20px;border-top:1px solid var(--line);text-align:center;font-size:12px;line-height:2;color:#6c7868}footer span{font-size:10px;color:#929a8c}footer small{display:block;font-size:8px;letter-spacing:1.4px;margin-top:18px;color:#929a8c}.flow-shell{max-width:580px;margin:0 auto;padding:40px 24px 20px;min-height:65vh}.back-link{font-size:12px;color:#6c7c6c;display:inline-block;background:transparent;padding:0}.flow-shell>.back-link{margin-bottom:42px}.flow-shell h1{font-size:34px;font-weight:750;letter-spacing:-1.4px;line-height:1.5}.muted{color:var(--muted);font-size:13px;margin-top:16px}.age-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0}.choice{border:1px solid var(--line);background:#fffefa;border-radius:12px;padding:19px 22px;display:flex;justify-content:space-between;align-items:center;color:var(--ink);text-align:left;min-height:62px;transition:background .15s,border-color .15s}.choice:hover{background:#eff3e4;border-color:#91a274}.choice.selected{background:#e6edda;border-color:#638148;box-shadow:0 0 0 1px #638148}.age-choice{font-size:19px}.age-choice span{color:#91a274;font-size:20px}.quiet-note{font-size:11px;text-align:center;background:#f0f2e9;border-radius:12px;color:#778169;padding:18px;line-height:1.9}.question-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8b9485}.question-meta b{font-size:17px;color:var(--green)}.progress{height:4px;background:#e8ecdf;border-radius:8px;margin:18px 0 39px;overflow:hidden}.progress span{display:block;background:#739053;height:100%;transition:width .2s}.question-shell .eyebrow{margin-bottom:15px}.question-title{min-height:145px;outline:none}.question-shell h1{font-size:27px;line-height:1.55}.question-hint{font-size:12px;margin:0 0 26px}.answer-list{display:grid;gap:10px}.answer-list .choice{font-size:14px}.option-circle{width:22px;height:22px;border:1.5px solid #9aaf80;border-radius:50%;background:#f3f6ed}.option-1{width:19px;height:19px}.option-2{width:16px;height:16px;border-color:#bcbfb6;background:#f8f8f4}.option-3{width:19px;height:19px;border-color:#a1a9bc;background:#f3f4f8}.option-4{border-color:#929eb7;background:#edf0f6}.selected .option-circle{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 4px #e6edda}.text-center{text-align:center}.result-shell{max-width:700px;padding:35px 24px 0;margin:auto}.result-intro{text-align:center;margin:35px 0}.result-intro .eyebrow{margin-bottom:12px}.result-intro h1{font-size:26px;letter-spacing:-1px;font-weight:750}.result-intro .muted{font-size:12px;margin-top:12px}.result-card{border-radius:22px;padding:26px 30px 35px;text-align:center;position:relative;overflow:hidden}.result-card-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}.result-card-top span:first-child{font-weight:800;letter-spacing:-.5px;font-size:16px}.result-card-top span:last-child{font-size:8px;padding-top:5px;color:#7a8570}.result-card .type-art{margin-top:15px}.type-code{font-size:12px;font-weight:700;letter-spacing:3px}.result-card h2{font-size:37px;letter-spacing:-1.7px;margin-top:6px;font-weight:800}.result-line{font-size:14px;max-width:320px;margin:16px auto 0}.result-card .tags{justify-content:center}.detail-panel{background:#fffefa;border:1px solid var(--line);border-radius:18px;padding:30px;margin-top:22px}.detail-panel .eyebrow{font-size:9px;margin-bottom:10px}.detail-panel h2{font-size:18px;letter-spacing:-.6px;font-weight:700}.score-list{display:grid;gap:26px;margin:29px 0}.score-labels{display:flex;justify-content:space-between;font-size:12px;margin-bottom:13px}.score-labels span{color:var(--muted)}.score-labels b{font-weight:600;color:var(--green)}.score-track{height:7px;background:#ebede5;border-radius:8px;position:relative;margin:0 6px}.score-track:after{content:'';position:absolute;left:50%;height:13px;top:-3px;width:1px;background:#9ca58e}.score-track span{display:block;height:100%;background:#82975e;border-radius:8px}.score-track i{width:13px;height:13px;background:var(--green);border:2px solid #fffefa;position:absolute;top:-3px;border-radius:50%;transform:translateX(-50%);z-index:1}.detail-panel .micro{font-size:10px}.trait-list{list-style:none;padding:0;margin:23px 0}.trait-list li{font-size:13px;margin:13px 0;line-height:1.7}.trait-list li:before{content:'✓';margin-right:12px;color:#75924d}.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid var(--line);padding-top:23px}.insight-grid h3{font-size:13px;font-weight:700}.insight-grid ul{padding-left:17px;font-size:12px;color:var(--muted);margin:13px 0 0;line-height:2}.age-note{background:#eff3e7;border-radius:10px;padding:17px 19px;margin-top:25px;font-size:12px}.age-note b{font-size:12px}.age-note p{margin-top:7px;color:#6c785f}.rating-panel{padding:34px 22px;text-align:center}.rating-panel h2{font-size:15px;font-weight:700}.rating-buttons{display:flex;gap:10px;justify-content:center;margin-top:20px}.rating-buttons button{width:49px;height:45px;border-radius:10px;background:#f0f2e8;color:#6d7d5c;border:1px solid var(--line)}.rating-buttons .active{background:var(--green);color:white;border-color:var(--green)}.rating-labels{display:flex;justify-content:space-between;max-width:285px;margin:10px auto 0;font-size:10px;color:var(--muted)}.share-panel{text-align:center;margin-top:24px}.share-panel .primary{width:100%;justify-content:center;gap:30px}.secondary{display:block;width:100%;background:#f0f2e9;border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:10px;font-size:13px;color:var(--green)}.retry{margin-top:23px}.share-status{font-size:12px;margin-top:16px;color:var(--green);min-height:21px}.manual-link{width:100%;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:12px}
@media(max-width:760px){.site-header{height:77px;margin:0 23px;padding:0}.logo{font-size:25px}.edition{font-size:8px;letter-spacing:1px}.edition b{margin-left:8px;font-size:8px}.landing{padding:0 23px}.hero{grid-template-columns:1fr;gap:32px;padding:38px 0}.hero h1{font-size:36px;letter-spacing:-1.8px}.hero .eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:19px}.hero-description{font-size:12px;margin-top:19px}.hero-cta{max-width:none;margin-top:24px}.hero-copy>.micro{max-width:none}.hero-visual{height:280px;border-radius:130px 130px 18px 18px;margin:0 12px}.hero-visual .type-art{transform:scale(.83);margin-top:-25px}.orbit-label{font-size:6px;top:22px}.note-one{top:92px;right:4px}.note-two{bottom:86px;left:3px}.floating-note{font-size:9px;padding:8px 10px}.visual-caption{bottom:22px}.visual-caption b{font-size:11px}.visual-caption span{font-size:7px}.section-heading{align-items:flex-start;gap:9px;margin-bottom:17px}.section-heading h2{font-size:18px;line-height:1.5}.section-heading .eyebrow{font-size:7px;letter-spacing:1px}.pill{font-size:8px;padding:6px 8px;white-space:nowrap;margin-top:20px}.preview-grid{grid-template-columns:1fr;gap:12px}.preview-card{position:relative;min-height:178px;padding:21px 20px;overflow:hidden}.preview-card .type-art{position:absolute;right:-62px;top:23px;transform:scale(.52);margin:0}.preview-top{max-width:100%;font-size:9px}.preview-card h3{font-size:20px;margin-top:22px;max-width:70%}.preview-card p{font-size:11px;max-width:63%;min-height:0}.preview-card .tags{margin-top:13px;gap:5px}.preview-card .tags span{font-size:9px;padding:4px 7px}.landing-bottom{margin-top:30px;font-size:10px}.landing-bottom span{padding:0 13px}.scope-note{font-size:9px}footer{margin:35px 23px 0;padding:24px 0}.flow-shell{padding-top:28px}.flow-shell>.back-link{margin-bottom:32px}.flow-shell h1{font-size:30px}.question-shell h1{font-size:25px}.question-title{min-height:155px}.question-hint{font-size:11px}.progress{margin-bottom:30px}.choice{padding:17px 20px;min-height:57px}.result-shell{padding:27px 20px 0}.result-intro h1{font-size:22px}.result-card{padding:22px 22px 28px}.result-card h2{font-size:33px}.result-line{font-size:13px}.detail-panel{padding:25px 21px}.detail-panel h2{font-size:16px}.insight-grid{grid-template-columns:1fr;gap:22px}.rating-panel{padding:30px 4px}.rating-panel h2{font-size:14px}.result-intro .muted{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Interest selection and guided start */
.step-label{font-size:13px;letter-spacing:-.3px;margin:32px 0 14px}.step-label small{font-size:10px;color:var(--muted);font-weight:400;margin-left:6px}.interest-heading{display:flex;align-items:end;justify-content:space-between}.interest-heading .step-label{margin-bottom:14px}.interest-heading>span{font-size:11px;color:var(--green);font-weight:700}.interest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.interest-chip{border:1px solid var(--line);background:#fffefa;border-radius:10px;padding:12px 6px;color:#657061;font-size:12px}.interest-chip.selected{background:#e6edda;border-color:#779258;color:var(--green);font-weight:700}.interest-chip b{margin-left:4px}.age-start{margin-top:27px}.age-start.disabled{opacity:.45;cursor:not-allowed}.age-start.disabled:hover{transform:none;background:var(--green)}
@media(max-width:760px){.interest-grid{grid-template-columns:repeat(2,1fr)}}
/* Eight character identities: same visual language, distinct mood and prop. */
.type-art .art-accessory{position:absolute;z-index:2}.art-1 .art-body{background:#7e9b79;transform:rotate(-5deg);border-radius:58px 58px 34px 34px}.art-1 .art-accessory{width:38px;height:8px;border-radius:8px;background:#d6ad62;left:160px;top:57px;transform:rotate(18deg)}.art-2 .art-accessory{width:22px;height:22px;border:3px solid #667ba8;border-radius:50%;left:178px;top:78px}.art-3 .art-body{background:#b28b6e;transform:rotate(4deg);border-radius:30px 30px 55px 55px}.art-3 .art-accessory{width:30px;height:12px;border-radius:50%;background:#e3c8a7;left:86px;top:24px;transform:rotate(-14deg)}.art-4 .art-body{background:#d28b62;transform:rotate(-11deg);border-radius:50px 50px 28px 28px}.art-4 .art-accessory{width:25px;height:25px;background:#f0d47f;border-radius:4px;left:177px;top:101px;transform:rotate(15deg)}.art-5 .art-body{background:#8ba0b9;transform:rotate(11deg);border-radius:68px 68px 27px 27px}.art-5 .art-accessory{width:8px;height:38px;background:#d5dfed;left:177px;top:48px;transform:rotate(35deg);border-radius:8px}.art-6 .art-body{background:#9e8eb8;transform:rotate(-3deg);border-radius:32px 62px 32px 62px}.art-6 .art-accessory{width:28px;height:28px;border:3px solid #d9c3e7;border-radius:50%;left:76px;top:115px}.art-7 .art-body{background:#739054;transform:rotate(-9deg);border-radius:44px 44px 30px 30px}.art-7 .art-accessory{width:31px;height:9px;background:#d6ed8d;left:166px;top:46px;border-radius:8px;transform:rotate(-22deg)}
