:root{--ink:#29252b;--paper:#fffaf6;--line:#eadfd8;--muted:#827a78;--moss:#7c9387;--coral:#ed836b;--butter:#f8d46d;--lavender:#dcd5f2}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#f1e9e4}body{color:var(--ink);background:var(--paper);margin:0;font-family:Arial,Apple SD Gothic Neo,Noto Sans KR,sans-serif}button,textarea{font:inherit}button{cursor:pointer}.shell{background:var(--paper);width:min(100%,720px);min-height:100svh;margin:0 auto;padding:22px clamp(20px,5vw,48px) 36px}.topline{z-index:20;color:#68736e;background:color-mix(in srgb, var(--paper) 90%, transparent);border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);letter-spacing:.08em;justify-content:space-between;align-items:center;min-height:48px;margin:-22px clamp(-48px,-5vw,-20px) 0;padding:0 clamp(20px,5vw,48px);font:11px/1.3 Arial,sans-serif;display:flex;position:sticky;top:0}.topline>span:first-child{color:var(--ink);letter-spacing:.16em;text-transform:uppercase;font-weight:700}.topline-right{align-items:center;gap:14px;display:flex}.participant-count{color:var(--ink);letter-spacing:0;align-items:center;gap:5px;display:inline-flex}.participant-count i{background:#ee684e;border-radius:50%;width:5px;height:5px;box-shadow:0 0 0 3px #ee684e1f}.landing-shell{flex-direction:column;display:flex}.landing-hero{padding:16vh 0;animation:.7s cubic-bezier(.2,.8,.2,1) both reveal-up;position:relative}.landing-hero:after{content:"";z-index:-1;background:var(--lavender);opacity:.45;border-radius:48% 52% 58% 42%;width:180px;height:180px;position:absolute;top:25%;right:-12%;transform:rotate(24deg)}.hero-mark{width:82px;height:74px;color:var(--ink);background:var(--butter);letter-spacing:-.16em;border:0;border-radius:42% 58% 52% 48%;place-items:center;margin-bottom:40px;font-size:25px;font-weight:700;display:grid;transform:rotate(-7deg);box-shadow:7px 8px #ed836b38}.hero-mark span{transform:translate(-2px)}.chapter-kicker,.section-label{color:#60786c;letter-spacing:.07em;margin:0 0 17px;font:11px/1.4 Arial,sans-serif}h1,h2,p{margin-top:0}.landing-hero h1{letter-spacing:-.085em;max-width:580px;margin-bottom:24px;font-size:clamp(46px,10vw,82px);font-weight:700;line-height:.98}.landing-hero h1 em{color:var(--coral);font-style:normal}.landing-copy{color:#61706b;font-size:16px;line-height:1.7}.primary-button{color:var(--paper);background:var(--ink);letter-spacing:.03em;border:0;border-radius:999px;padding:15px 20px 15px 22px;font:12px Arial,sans-serif;transition:background .2s,transform .2s,box-shadow .2s}.primary-button:hover{background:#403940;transform:translateY(-2px);box-shadow:0 7px #ed836b40}.primary-button span{color:var(--coral);margin-left:28px;font-size:17px}.hero-button{margin-top:30px}.resume-button{color:var(--muted);text-underline-offset:4px;background:0 0;border:0;margin-top:18px;padding:0;font:12px Arial,sans-serif;text-decoration:underline;display:block}.result-button{color:var(--coral);text-underline-offset:4px;background:0 0;border:0;margin-top:14px;padding:10px 0;font:12px Arial,sans-serif;text-decoration:underline;display:block}.topline-progress{background:#eee5df;height:3px;position:absolute;bottom:-1px;left:0;right:0}.topline-progress span{background:var(--coral);height:100%;transition:width .35s;display:block}.question-shell .chapter-kicker{min-height:16px;margin-top:38px;margin-bottom:28px}.scene{flex-direction:column;justify-content:space-between;min-height:220px;animation:.65s cubic-bezier(.2,.8,.2,1) both reveal-up;display:flex}.situation{letter-spacing:-.07em;max-width:620px;font-size:clamp(25px,5.5vw,38px);font-weight:700;line-height:1.3}.prompt-wrap{padding-top:16px}.prompt{margin-bottom:7px;font-size:20px;line-height:1.4}.prompt-note,.save-note{color:var(--muted);font:11px/1.5 Arial,sans-serif}.choice-list{border-top:1px solid var(--line);animation:.7s cubic-bezier(.2,.8,.2,1) 80ms both reveal-up}.choice{border:0;border-bottom:1px solid var(--line);width:100%;color:var(--ink);text-align:left;background:0 0;justify-content:space-between;padding:16px 0;font-size:16px;transition:padding .2s,color .2s,background .2s;display:flex}.choice:hover,.choice:focus-visible{color:var(--coral);background:#e06d520a;outline:none;padding-left:10px}.choice-mark{color:var(--coral);font-family:Arial,sans-serif}.previous-button{color:var(--muted);background:0 0;border:0;margin-top:18px;padding:0;font-size:12px}.previous-button:hover,.previous-button:focus-visible{color:var(--coral);outline:none}.save-note{margin-top:18px}.reflection-shell{place-items:center;display:grid}.reflection-card{width:100%;max-width:560px;padding-top:13vh}.reflection-card h1{letter-spacing:-.06em;margin-bottom:18px;font-size:clamp(38px,8vw,60px);font-weight:400;line-height:1.02}.reflection-card>p:not(.chapter-kicker){color:var(--muted);font-size:15px;line-height:1.6}textarea{resize:vertical;border:1px solid var(--line);width:100%;min-height:145px;color:var(--ink);background:#ffffff40;border-radius:0;margin:34px 0 18px;padding:16px;font-size:17px;line-height:1.6}textarea:focus{outline:2px solid var(--moss);outline-offset:2px}.reflection-actions,.interview-actions{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.text-button{color:var(--muted);background:0 0;border:0;padding:8px 0;font:12px Arial,sans-serif}.character-hero{padding:11vh 0 12vh;animation:.7s cubic-bezier(.2,.8,.2,1) both reveal-up;position:relative;overflow:hidden}.character-orbit{place-items:center;width:170px;height:170px;margin:10px auto 44px;display:grid;position:relative}.orbit-ring{border:1px solid var(--moss);border-radius:50%;position:absolute;inset:8px;transform:rotate(35deg)scaleY(.62)}.orbit-ring:after{content:"";border:1px solid var(--coral);border-radius:50%;position:absolute;inset:-18px 28px;transform:rotate(80deg)}.orbit-dot{background:var(--coral);border-radius:50%;width:10px;height:10px;position:absolute;top:0;right:22px}.orbit-letter{color:var(--moss);font-size:82px;line-height:1}.character-hero .chapter-kicker,.character-label,.character-hero h1,.character-headline{text-align:center}.character-label{color:var(--muted);margin-bottom:12px;font:11px Arial,sans-serif}.character-hero h1{letter-spacing:-.07em;margin-bottom:17px;font-size:clamp(41px,9vw,70px);font-weight:400}.character-headline{color:#596862;max-width:480px;margin:0 auto;font-size:15px;line-height:1.75}.character-headline p{margin:0}.character-quote{border-left:3px solid var(--coral);color:var(--ink);text-align:left;background:#fff4e8;margin:18px auto 0;padding:12px 16px;font-size:15px;line-height:1.6}.support-character{border:1px solid var(--line);text-align:center;background:#fff4e8;border-radius:24px;margin:0 0 34px;padding:28px 22px 24px}.support-character .section-label{margin-bottom:18px}.support-character-mark{width:58px;height:58px;color:var(--ink);background:var(--butter);border-radius:43% 57% 51% 49%;place-items:center;margin:0 auto 12px;font-size:26px;font-weight:700;display:grid}.support-character h2{letter-spacing:-.06em;margin-bottom:9px;font-size:28px}.support-character p:not(.section-label){color:#665f5b;max-width:340px;margin:0 auto 12px;font-size:14px;line-height:1.6}.support-character>span{color:var(--coral);font:11px Arial,sans-serif}.character-matches{margin:0 0 34px}.character-matches>.section-label{margin-bottom:10px}.character-match{border-top:1px solid var(--line);padding:18px 0}.character-match:last-child{border-bottom:1px solid var(--line)}.character-match.is-primary{padding-top:20px}.character-match-top{justify-content:space-between;align-items:center;gap:16px;display:flex}.character-match-name{align-items:center;gap:10px;font-size:19px;font-weight:700;display:inline-flex}.character-match-name i{width:32px;height:32px;color:var(--ink);background:var(--butter);border-radius:45% 55% 50% 50%;place-items:center;font-size:15px;font-style:normal;display:grid}.character-match:nth-of-type(3n) .character-match-name i{background:var(--lavender)}.character-match:nth-of-type(4n) .character-match-name i{background:#cfe4d5}.character-match-top strong{color:var(--coral);font:17px Arial,sans-serif}.character-match p{color:#665f5b;margin:11px 0 0 42px;font-size:14px;line-height:1.7}.details-toggle{border:0;border-bottom:1px solid var(--line);width:100%;color:var(--ink);text-align:left;background:0 0;justify-content:space-between;padding:18px 0;font-size:15px;display:flex}.details-toggle span{color:var(--coral);font-family:Arial,sans-serif}.details{padding:25px 0 5px}.metric-row{background:var(--line);grid-template-columns:1fr 1fr;gap:1px;display:grid}.metric-row div{background:var(--paper);padding:18px}.metric-row span{color:var(--muted);margin-bottom:10px;font:11px Arial,sans-serif;display:block}.metric-row strong{font:400 27px Arial,sans-serif}.edge-list{margin-top:35px}.edge-item{border-top:1px solid var(--line);justify-content:space-between;gap:15px;padding:14px 0;font-size:13px;display:flex}.edge-item span{color:var(--muted);font:11px Arial,sans-serif}.edge-item strong{text-align:right;font-weight:400}.muted{color:var(--muted);font-size:14px;line-height:1.6}.restart{color:var(--muted);text-underline-offset:4px;background:0 0;border:0;margin:26px auto 0;padding:0;font:11px Arial,sans-serif;text-decoration:underline;display:block}.result-actions{border-top:1px solid var(--line);text-align:center;margin-top:34px;padding:22px 0 4px}.result-actions p{color:#596862;margin-bottom:16px;font-size:13px;line-height:1.6}.result-actions>div{justify-content:center;gap:10px;display:flex}.result-actions button{border:1px solid var(--line);color:var(--ink);background:#fff4e8;border-radius:999px;padding:12px 14px;font-size:12px}.result-actions button:last-child{color:var(--paper);background:var(--ink);border-color:var(--ink)}.result-actions>span{color:var(--moss);margin-top:12px;font:11px Arial,sans-serif;display:block}@keyframes reveal-up{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media (max-width:480px){.landing-hero{padding-top:15vh}.scene{min-height:250px}.choice{font-size:15px}.topline-right{gap:8px}.participant-count{font-size:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation:none!important}}
