:root{
  --ink:#17151f;
  --paper:#fffdf7;
  --card:#ffffff;
  --red:#ff4f87;
  --yellow:#f3ff54;
  --blue:#6558ff;
  --mint:#54e8bd;
  --muted:#686575;
  --line:#17151f;
  --shadow:0 10px 30px rgba(34,28,62,.12);
}

body{
  background:
    radial-gradient(circle at 8% 4%,rgba(243,255,84,.32),transparent 23rem),
    radial-gradient(circle at 94% 18%,rgba(101,88,255,.12),transparent 28rem),
    var(--paper);
}

.site-header{
  padding:12px clamp(16px,4vw,56px);
  border-bottom:1px solid rgba(23,21,31,.1);
  background:rgba(255,253,247,.82);
  box-shadow:0 4px 22px rgba(34,28,62,.06);
}

.brand{font-size:.98rem;letter-spacing:-.02em}
.brand-mark{
  padding:2px 9px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ff4f87,#ff7448);
  box-shadow:0 4px 12px rgba(255,79,135,.28);
}

.nav-cta{
  min-width:104px;
  padding:9px 17px;
  border-radius:999px;
  background:var(--ink);
  box-shadow:0 5px 0 rgba(101,88,255,.35);
  text-align:center;
}

.hero{
  min-height:calc(100svh - 62px);
  padding-top:clamp(42px,7vw,88px);
  padding-bottom:clamp(52px,7vw,86px);
}

.eyebrow{
  border:0;
  border-radius:999px;
  padding:7px 14px;
  background:var(--yellow);
  box-shadow:0 4px 0 var(--ink);
  transform:rotate(-1deg);
  letter-spacing:.03em;
}

.hero h1{font-size:clamp(3rem,7vw,6.2rem);line-height:.99}
.hero h1 span:after{height:.24em;background:linear-gradient(90deg,#ff4f87,#ff8757);border-radius:999px;bottom:-.03em}
.hero-copy{font-size:1.06rem;line-height:1.9}

.primary,.secondary{
  min-height:56px;
  border:0;
  border-radius:999px;
  padding:0 25px;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.primary{
  background:linear-gradient(135deg,#ff4f87,#ff7448);
  box-shadow:0 8px 0 var(--ink),0 14px 28px rgba(255,79,135,.22);
}

.primary:hover{transform:translateY(3px);box-shadow:0 5px 0 var(--ink),0 10px 20px rgba(255,79,135,.2);filter:saturate(1.08)}
.secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.band .secondary{color:var(--ink)!important;background:#fff!important}

.hero-art{min-height:460px}
.type-stack{width:min(100%,430px);height:420px}
.mini-card{
  width:285px;
  min-height:325px;
  padding:16px;
  border:0;
  border-radius:27px;
  box-shadow:0 18px 45px rgba(18,14,37,.24);
}
.mini-card:nth-child(1){background:#6558ff;transform:rotate(-7deg)}
.mini-card:nth-child(2){background:#f3ff54;transform:rotate(6deg)}
.mini-card img{height:185px;border:0;border-radius:18px;box-shadow:none}
.mini-card small{opacity:.7}
.sticker{right:-6px;bottom:6px;width:108px;height:108px;border:0;background:#54e8bd;box-shadow:0 8px 22px rgba(24,19,45,.2)}

.section{padding-top:86px;padding-bottom:86px}
.section-kicker{color:#ff4f87}
.section h2,.band h2{letter-spacing:-.045em}
.how-grid{gap:16px}
.how-card,.axis-card,.type-card,.content-card{
  border:1px solid rgba(23,21,31,.1);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.how-card{position:relative;overflow:hidden;padding:28px}
.how-card:after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;right:-32px;bottom:-40px;background:rgba(101,88,255,.09)}
.how-card b{font-size:1.05rem;color:#6558ff;background:#eeecff;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;margin-bottom:18px}
.axis-card{background:rgba(255,255,255,.82);box-shadow:none}

.band{background:linear-gradient(145deg,#191622,#28223d);border-radius:42px 42px 0 0}
.type-tile{border:0;border-radius:23px;padding:12px;min-height:0;box-shadow:0 9px 24px rgba(0,0,0,.2)}
.type-tile .character-thumb{margin:0 0 13px;border:0;border-radius:16px}
.type-tile b,.type-tile p{padding-left:6px;padding-right:6px}

.quiz-shell{justify-content:center;max-width:790px;padding-top:34px}
.quiz-top{font-family:'DM Sans',sans-serif;letter-spacing:.05em}
.progress{height:9px;border:0;background:#e8e5ef}
.progress>i{background:linear-gradient(90deg,#6558ff,#ff4f87);border-radius:999px}
.question-card{margin-top:18px;padding:clamp(23px,5vw,42px);border-radius:30px;background:rgba(255,255,255,.88);box-shadow:var(--shadow);border:1px solid rgba(23,21,31,.08)}
.question-card h1{font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.55}
.options{gap:11px}
.option{
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid rgba(23,21,31,.13);
  border-radius:18px;
  padding:16px 17px;
  box-shadow:none;
  color:var(--ink);
  background:#fff;
}
.option span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:11px;background:#eeecff;color:#6558ff;font:900 .9rem 'DM Sans'}
.option:hover,.option:focus-visible{background:#f5f3ff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(101,88,255,.12);border-color:#6558ff}

.result-wrap{max-width:1040px;padding-top:35px}
.result-hero{
  grid-template-columns:.9fr 1.1fr;
  border:0;
  border-radius:34px;
  box-shadow:0 24px 65px rgba(31,24,55,.18);
}
.result-visual{
  position:relative;
  min-height:520px;
  padding:0;
  overflow:hidden;
  background:linear-gradient(160deg,#f3ff54 0%,#62eec5 100%);
}
.result-visual>div{position:absolute;inset:0;overflow:hidden}
.result-visual:before{content:'';position:absolute;z-index:1;top:0;left:0;right:0;height:24px;background:linear-gradient(90deg,#f3ff54,#62eec5)}
.result-character{
  position:absolute;
  top:-30%;
  left:-4%;
  width:270%;
  max-width:none;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.result-code{
  position:absolute;
  left:22px;
  bottom:22px;
  z-index:2;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(23,21,31,.92);
  color:#fff;
  font-size:.8rem;
  letter-spacing:.13em;
  backdrop-filter:blur(8px);
}
.result-main{padding:clamp(30px,5vw,58px)}
.result-main h1{font-size:clamp(2.5rem,5.5vw,4.7rem);margin-top:23px}
.result-main h2{line-height:1.45}
.verdict{border-radius:14px;background:linear-gradient(135deg,#ff4f87,#ff7448);transform:rotate(-1deg);padding:11px 14px}
.axis-results{gap:13px}
.axis-result{border:0;border-radius:20px;box-shadow:var(--shadow);padding:20px}
.axis-bar{border:0;height:10px;background:#ece9f2}
.axis-bar i{background:linear-gradient(90deg,#6558ff,#ff4f87);border-radius:999px}
.story-grid .content-card h3{color:#6558ff}
.result-deep-dive{margin:72px 0 30px}.deep-heading{max-width:720px;margin:0 auto 34px;text-align:center}.deep-heading h2{margin:12px 0 16px;font-size:clamp(2.15rem,5vw,4rem);line-height:1.08}.deep-heading p{color:#625d6b;line-height:1.9}.empathy-essay{position:relative;padding:clamp(30px,5vw,58px);border-radius:32px;background:#fff;box-shadow:var(--shadow)}.empathy-essay:before{content:'“';position:absolute;right:28px;top:0;color:#f3ff54;font:900 8rem/1 Georgia}.empathy-essay>span,.master-analysis span,.quit-scene>span,.code-reading-head>span{position:relative;color:#6558ff;font-size:.78rem;font-weight:900;letter-spacing:.14em}.empathy-essay p{position:relative;max-width:840px;margin:18px 0 0;font-size:clamp(1.12rem,2.3vw,1.5rem);font-weight:700;line-height:2}.master-analysis{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(28px,6vw,80px);margin-top:18px;padding:clamp(30px,5vw,58px);border-radius:32px;background:#191622;color:#fff}.master-analysis h3{margin:12px 0 0;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.35}.master-analysis p{margin:0;color:#eeeaf4;font-size:1.05rem;line-height:2.05}.quit-scene{margin-top:18px;padding:clamp(28px,5vw,48px);border:3px solid var(--ink);border-radius:32px;background:var(--yellow);box-shadow:8px 8px 0 var(--ink)}.quit-scene>span{color:var(--ink)}.quit-scene blockquote{margin:16px 0 0;font-size:clamp(1.3rem,3vw,2rem);font-weight:900;line-height:1.55}.code-reading{margin-top:56px}.code-reading-head{text-align:center;margin-bottom:24px}.code-reading-head h3{margin:9px 0 0;font-size:clamp(1.6rem,3vw,2.3rem)}.insight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.insight-grid article{min-height:205px;padding:22px 19px;border-radius:24px;background:#fff;box-shadow:var(--shadow)}.insight-grid article>b{color:#dcd7e7;font-size:2.4rem}.insight-grid h3{margin:20px 0 10px;color:#6558ff;font-size:1.08rem}.insight-grid p{margin:0;color:#625d6b;font-size:.9rem;line-height:1.75}

.blog-page{max-width:1120px;margin:auto;padding:76px 22px 100px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:45px}.blog-card{display:flex;flex-direction:column;min-height:360px;padding:30px;border-radius:28px;background:#fff;box-shadow:var(--shadow);color:var(--ink);transition:.2s}.blog-card:hover{transform:translateY(-4px)}.blog-card>span,.article-page header>span{color:#6558ff;font-size:.78rem;font-weight:900;letter-spacing:.1em}.blog-card h2{margin:38px 0 16px;font-size:1.45rem;line-height:1.5}.blog-card p{color:#625d6b;line-height:1.8}.blog-card b{margin-top:auto;color:#6558ff}.article-page{max-width:860px;margin:auto;padding:72px 22px 100px}.article-back{color:#6558ff;font-weight:800}.article-page header{margin:40px 0 52px}.article-page header h1{margin:15px 0 24px;font-size:clamp(2.25rem,6vw,4.4rem);line-height:1.25}.article-page header p{font-size:1.15rem;line-height:1.9;color:#625d6b}.article-body{padding:clamp(28px,6vw,64px);border-radius:30px;background:#fff;box-shadow:var(--shadow)}.article-body h2{font-size:1.6rem}.article-body p{font-size:1.05rem;line-height:2.15}.article-page aside{margin-top:24px;padding:34px;border-radius:28px;background:#191622;color:#fff}.article-page aside p{margin-bottom:26px;color:#ddd7e8;line-height:1.8}
.article-body h2{margin:2.4em 0 .7em;line-height:1.45}.article-body h2:first-child{margin-top:0}.article-body h3{margin:1.6em 0 .45em;font-size:1.12rem}.article-body ul{margin:1.2em 0 1.8em;padding-left:1.35em}.article-body li{margin:.7em 0;line-height:1.8}.article-answer{margin:0 0 2.2em;padding:22px 24px;border-left:6px solid #6558ff;border-radius:0 18px 18px 0;background:#f3f0ff}.faq{margin-top:1.2em;padding:8px 24px 24px;border-radius:22px;background:#fff8d8}.faq h3{padding-top:18px;border-top:1px solid #e8dca6}.faq h3:first-child{border-top:0}.article-sources{margin-top:3em;padding-top:2em;border-top:2px solid #eeeaf4}.article-sources h2{font-size:1.25rem}.article-sources a{color:#5546e8;text-decoration:underline}.article-sources p{font-size:.88rem;color:#716b78}

.share-box{
  border-radius:30px;
  background:linear-gradient(145deg,#191622,#30274a);
  padding:34px;
}
.share-btn{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:12px 18px}
.share-btn.primary-share{border-color:#f3ff54;background:#f3ff54;color:var(--ink)}

.types-grid{gap:16px}
.type-card{padding:13px;min-height:360px;border:0;border-radius:25px;box-shadow:var(--shadow)}
.type-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(34,28,62,.16)}
.type-card .character-thumb{margin:0 0 14px;border:0;border-radius:17px}
.type-card .code,.type-card h3,.type-card>b,.type-card p,.type-card .more{margin-left:8px;margin-right:8px}
.type-card .more{padding:12px 0 5px;color:#6558ff}

footer{border-top:0;background:#fff;padding-top:58px}

@media(max-width:900px){
  .hero{min-height:auto;gap:8px}
  .result-hero{grid-template-columns:1fr}
  .result-visual{min-height:390px}
  .result-character{top:-30%;left:-3%;width:270%}
}

@media(max-width:580px){
  .site-header nav>a:not(.nav-cta){display:none}
  .blog-page{padding:48px 14px 72px}.blog-grid{grid-template-columns:1fr;margin-top:30px}.blog-card{min-height:310px;padding:24px}.article-page{padding:44px 14px 72px}.article-page header h1{font-size:2.25rem}.article-body{padding:26px 20px}.article-body p{font-size:.98rem;line-height:2}
  .site-header{padding:11px 14px}
  .nav-cta{min-width:92px;padding:8px 14px}
  .hero{padding:38px 18px 46px}
  .hero h1{font-size:2.45rem;line-height:1.03}
  .hero-copy{font-size:.98rem;line-height:1.85}
  .actions{display:grid;grid-template-columns:1fr;margin-top:26px}
  .primary,.secondary{width:100%}
  .hero-art{min-height:335px}
  .type-stack{height:320px}
  .mini-card{width:210px;min-height:250px;padding:11px;border-radius:22px}
  .mini-card img{height:137px;border-radius:14px}
  .mini-card strong{font-size:1.02rem}
  .sticker{width:82px;height:82px;font-size:.76rem}
  .section{padding:66px 18px}
  .type-preview{gap:10px}
  .type-tile{padding:8px}
  .type-tile b{font-size:.76rem;line-height:1.3}
  .type-tile p{font-size:.76rem}
  .quiz-shell{padding:24px 14px 54px}
  .question-card{padding:22px 15px;border-radius:24px}
  .question-card h1{font-size:1.35rem}
  .option{font-size:.94rem;padding:14px 13px;border-radius:16px}
  .result-wrap{padding:20px 12px 62px}
  .result-hero{border-radius:27px}
  .result-visual{min-height:340px}
  .result-character{top:-30%;left:-5%;width:270%}
  .result-code{left:15px;bottom:15px}
  .result-main{padding:29px 20px 32px}
  .result-main h1{font-size:2.65rem;margin-top:20px}
  .result-main h2{font-size:1.35rem}
  .axis-results{margin:28px 0}
  .story-grid{gap:12px}
  .result-deep-dive{margin-top:52px}.deep-heading{text-align:left;padding:0 8px}.deep-heading h2{font-size:2.35rem}.empathy-essay,.master-analysis,.quit-scene{border-radius:24px}.master-analysis{grid-template-columns:1fr;gap:22px}.master-analysis p{font-size:.98rem;line-height:1.95}.quit-scene{box-shadow:5px 5px 0 var(--ink)}.insight-grid{grid-template-columns:1fr 1fr;gap:10px}.insight-grid article{min-height:190px;padding:17px 15px}.insight-grid h3{font-size:.98rem}.insight-grid p{font-size:.82rem}
  .content-card{padding:20px}
  .share-box{padding:27px 20px}
  .share-actions{display:grid;width:100%}
  .share-btn{text-align:center}
  .types-page{padding:45px 13px 75px}
  .page-head{padding:0 7px}
  .types-grid{grid-template-columns:1fr 1fr;gap:10px}
  .type-card{min-height:0;padding:8px;border-radius:18px}
  .type-card .character-thumb{border-radius:13px;margin-bottom:10px}
  .type-card h3{font-size:.92rem;margin-top:8px}
  .type-card>b{font-size:.82rem;line-height:1.45}
  .type-card p{display:none}
  .type-card .more{font-size:.78rem}
}

.footer-links{display:flex;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin:24px auto 16px;max-width:900px}
.footer-links a{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.footer-disclaimer{max-width:760px;margin:18px auto 0!important;font-size:.82rem;line-height:1.7}
.legal-page{max-width:900px;margin:0 auto;padding:72px 20px 100px}
.legal-page>h1{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.08;letter-spacing:-.045em;margin:12px 0 34px}
.legal-body{background:#fff;border:2px solid var(--ink);border-radius:28px;padding:clamp(24px,5vw,54px);box-shadow:8px 8px 0 var(--ink)}
.legal-body h2{font-size:clamp(1.25rem,3vw,1.75rem);margin:2.4em 0 .7em}.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{font-size:1rem;line-height:2}.legal-body ul{padding-left:1.4em}.legal-body a{text-decoration:underline;text-underline-offset:3px}
.legal-callout{margin-top:34px;padding:24px;border-radius:18px;background:var(--yellow);border:2px solid var(--ink)}.legal-callout p{margin-bottom:0}
.contact-form{display:grid;gap:22px;margin-top:30px}.contact-form label{display:grid;gap:8px;font-weight:800}
.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:13px 15px;border:2px solid var(--ink);border-radius:12px;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:4px solid rgba(255,86,61,.2);border-color:var(--red)}
.contact-form .contact-consent{display:block;font-weight:600}.contact-consent input{width:auto;margin-right:6px}.contact-note{font-size:.86rem!important;color:var(--muted)}.contact-response{display:none}
@media(max-width:580px){.legal-page{padding:46px 14px 72px}.legal-body{padding:24px 19px;border-radius:22px;box-shadow:5px 5px 0 var(--ink)}.legal-body p,.legal-body li{font-size:.95rem;line-height:1.9}.footer-links{display:grid;gap:12px}}

/* Result artwork: show the original character sheet without aggressive cropping. */
.result-visual{
  min-height:0;
  padding:clamp(22px,4vw,38px);
  overflow:hidden;
  background:var(--yellow);
}
.result-visual:before{display:none}
.result-visual>div{position:static;overflow:visible;width:100%}
.result-character{
  position:static;
  display:block;
  width:100%;
  max-width:460px;
  margin:0 auto 22px;
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:8px 8px 0 rgba(23,21,31,.2);
}
.result-code{
  position:static;
  display:inline-flex;
  margin:0 auto;
}
@media(max-width:580px){
  .result-visual{min-height:0;padding:18px}
  .result-character{border-radius:16px;box-shadow:5px 5px 0 rgba(23,21,31,.2);margin-bottom:18px}
}