/* mytypecard: one phone-width column for test flows, a wider grid for the catalog */
:root{
  --bg:#FFF3DC;          /* butter */
  --surface:#FFFBF3;     /* paper */
  --ink:#4A2E25;         /* cocoa */
  --muted:#8A6B5E;
  --accent:#EC5F78;      /* strawberry */
  --accent-ink:#351D18;
  --matcha:#6FA06C;
  --line:#EBD7BE;
  --shadow:0 3px 0 #E2C9A8;
  --display:"Jua","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Gowun Dodum","Avenir Next",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#2A1D19;--surface:#3A2923;--ink:#FCEBD8;--muted:#C9AE9C;--accent:#F27A90;--accent-ink:#2A1D19;--matcha:#93C290;--line:#543E35;--shadow:0 3px 0 #1E1411;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#2A1D19;--surface:#3A2923;--ink:#FCEBD8;--muted:#C9AE9C;--accent:#F27A90;--accent-ink:#2A1D19;--matcha:#93C290;--line:#543E35;--shadow:0 3px 0 #1E1411;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 32px}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
[hidden]{display:none!important}
.wrap{max-width:960px;margin:0 auto}
.col{max-width:480px;margin:0 auto}

/* chrome */
.site-head{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto;padding-block:14px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-size:22px}
.logo svg{width:30px;height:30px}
.site-head nav{display:flex;gap:16px;font-size:15px}
.site-head nav a{text-decoration:none;color:var(--muted)}
.site-head nav a:hover{color:var(--ink)}
.site-foot{max-width:960px;margin:48px auto 0;padding-top:20px;border-top:2px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;color:var(--muted);font-size:14px}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap}

.screen{display:flex;flex-direction:column;gap:20px;animation:rise .35s ease both}
@keyframes rise{from{transform:translateY(8px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.screen,.bob{animation:none!important}}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;font-family:var(--display);font-size:20px;border:0;border-radius:999px;padding:14px 22px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000);transition:transform .08s}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border:2px solid var(--line)}
.btn.matcha{background:var(--matcha);color:#182B18;box-shadow:0 4px 0 color-mix(in srgb,var(--matcha) 60%,#000)}
:focus-visible{outline:3px solid var(--matcha);outline-offset:3px}
.link{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;text-decoration:underline;padding:4px}
.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}

/* home */
.home-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding-block:24px 32px}
.home-hero h1{font-size:clamp(38px,7vw,62px)}
.home-hero h1 em{font-style:normal;color:var(--accent)}
.home-hero p{font-size:18px;margin-top:12px;max-width:34ch}
.home-hero .btn{margin-top:20px}
.stack{position:relative;height:300px}
.stack .tc{position:absolute;width:min(190px,42%);border-radius:22px;border:3px solid #5A3A2E;padding:10px 10px 14px;text-align:center;box-shadow:0 6px 0 #0001;font-family:var(--display);color:#4A2E25}
.stack .tc small{display:block;font-family:var(--body);font-size:12px;letter-spacing:.1em;opacity:.7}
.stack .tc:nth-child(1){left:2%;top:30px;transform:rotate(-9deg)}
.stack .tc:nth-child(2){left:29%;top:6px;transform:rotate(3deg);z-index:2}
.stack .tc:nth-child(3){left:54%;top:40px;transform:rotate(11deg)}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 16px}
.section-title h2{font-size:28px}
.tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.test-card{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:2px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);transition:transform .15s}
.test-card:hover{transform:translateY(-3px)}
.test-card .cover{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 10px 6px;gap:2px}
.test-card .body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:6px}
.test-card h3{font-size:22px}
.test-card p{color:var(--muted);font-size:15px}
.badge{align-self:flex-start;font-family:var(--display);font-size:13px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:2px 10px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.steps div{background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:18px}
.steps b{font-family:var(--display);font-weight:400;color:var(--accent);font-size:28px;display:block}
@media (max-width:720px){.home-hero{grid-template-columns:1fr}.stack{height:250px;max-width:400px;margin:0 auto;width:100%}.stack .tc{width:150px}.steps{grid-template-columns:1fr}}

/* test intro */
.hero{text-align:center;display:flex;flex-direction:column;gap:12px;padding-top:8px}
.hero h1{font-size:clamp(34px,9vw,44px)}
.meta{display:flex;justify-content:center;gap:16px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.banner{display:flex;gap:12px;align-items:center;background:var(--surface);border:2px dashed var(--accent);border-radius:20px;padding:12px 14px}
.banner svg{width:64px;height:64px;flex:none}
.banner p{font-size:15px}
.banner strong{font-family:var(--display);font-weight:400;font-size:17px}
.fineprint{color:var(--muted);font-size:13px;text-align:center}

/* question */
.top{display:flex;align-items:center;gap:12px}
.bar{flex:1;height:12px;border-radius:999px;background:var(--surface);border:2px solid var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.count{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.qcard{background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:28px 22px;box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;gap:10px}
.qnum{font-family:var(--display);color:var(--accent);font-size:18px}
.qcard h2{font-size:clamp(23px,6vw,27px);line-height:1.3}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{font-family:var(--body);font-size:17px;text-align:left;color:var(--ink);background:var(--surface);border:2px solid var(--line);
  border-radius:20px;padding:16px 18px;cursor:pointer;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;transition:border-color .15s, transform .08s}
.opt:hover{border-color:var(--accent)}
.opt:active{transform:translateY(2px)}
.opt b{font-family:var(--display);font-weight:400;flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--accent)}

/* result */
.res-head{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.res-head h1{font-size:clamp(34px,9vw,42px)}
.res-head .title{font-family:var(--display);font-size:22px;color:var(--accent)}
.code{font-family:var(--display);font-size:20px;letter-spacing:.08em;background:var(--ink);color:var(--bg);border-radius:999px;padding:2px 14px}
.portrait{border-radius:32px;padding:10px;border:2px solid var(--line);box-shadow:var(--shadow)}
.portrait svg{width:min(260px,70%);height:auto;display:block;margin:0 auto}
.panel{background:var(--surface);border:2px solid var(--line);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:14px}
.panel h2,.panel h3{font-size:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:6px 12px;font-size:15px}
.axis{display:flex;flex-direction:column;gap:4px}
.axis .lab{display:flex;justify-content:space-between;font-size:14px;font-variant-numeric:tabular-nums}
.axis .lab b{font-family:var(--display);font-weight:400}
.axis .track{height:14px;border-radius:999px;background:var(--bg);border:2px solid var(--line);overflow:hidden}
.axis .track i{display:block;background:var(--accent);height:100%}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mate{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;text-decoration:none}
.mate svg{width:84px;height:84px}
.mate small{color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.mate span{font-family:var(--display);font-size:17px}
.chem{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.chem svg{width:100%;max-width:110px;height:auto;margin:0 auto;display:block}
.chem .pct{font-family:var(--display);font-size:40px;color:var(--accent);line-height:1}
.chem small{display:block;font-size:13px;color:var(--muted)}
.seg{display:flex;background:var(--bg);border:2px solid var(--line);border-radius:999px;padding:4px;gap:4px;align-self:center}
.seg button{font-family:var(--display);font-size:16px;border:0;background:none;color:var(--muted);border-radius:999px;padding:6px 18px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.card-wrap{display:flex;justify-content:center}
.card-img{width:100%;border-radius:20px;display:block;border:2px solid var(--line);background:var(--bg)}
.card-wrap.story .card-img{max-width:300px}
.hint{color:var(--muted);font-size:14px;text-align:center}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions .btn{font-size:18px;padding:12px 14px}
.actions .wide{grid-column:1 / -1}
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.type{background:var(--bg);border:2px solid transparent;border-radius:16px;padding:6px 4px 8px;color:var(--ink);font-size:12px;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;text-align:center}
.type b{font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.04em}
.type[aria-current="page"]{border-color:var(--accent)}
.type svg{width:100%;height:auto}
.copybox{width:100%;font:inherit;font-size:14px;padding:8px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.toast{font-size:14px;color:var(--matcha);text-align:center;min-height:1.4em}
.more{display:flex;flex-direction:column;gap:10px}
.more a{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--bg);border-radius:16px;padding:8px 12px}
.more a svg{width:52px;height:52px;flex:none}
.more a span{font-family:var(--display);font-size:17px}

/* ads */
.ad{min-height:100px;display:grid;place-items:center}
.ad-ph{min-height:100px;border:2px dashed var(--line);border-radius:16px;display:grid;place-items:center;color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* prose pages */
.prose{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding-top:16px}
.prose h1{font-size:40px}
.prose h2{font-size:24px;margin-top:12px}
.prose p,.prose li{max-width:65ch}
.prose .note{background:var(--surface);border:2px dashed var(--accent);border-radius:16px;padding:12px 14px;font-size:14px}

.test-card.soon{border-style:dashed;box-shadow:none}
.test-card.soon:hover{transform:none}
.test-card.soon .cover{background:var(--bg);padding:18px 10px 12px}
.test-card.soon .cover span{font-family:var(--display);font-size:44px;color:var(--line);text-align:center}

@media (max-width:380px){.stack .tc{width:42%}.site-head nav{gap:10px;font-size:14px}.logo{font-size:20px}.axis .lab{flex-wrap:wrap;gap:4px}.actions{grid-template-columns:1fr}}

.skip-link{position:absolute;left:16px;top:0;transform:translateY(-150%);z-index:10;background:var(--surface);color:var(--ink);padding:12px;border:2px solid var(--ink)}
.skip-link:focus{transform:none}
.site-foot .link{padding:0;text-align:left;font-size:14px}
.site-foot [role="status"]{flex-basis:100%}
.btn[aria-disabled="true"]{opacity:.65;pointer-events:none}
.prose-result h3{font-size:18px}
.prose ul{margin:0;padding-left:22px}
.prose li+li{margin-top:10px}

.share-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.share-option{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;background:none;border:0;padding:4px 0;font:inherit;font-size:11px;color:var(--ink);text-decoration:none;cursor:pointer}
.share-circle{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--muted);border-radius:50%;background:var(--surface)}
.share-circle svg{width:23px;height:23px}
.share-option:hover .share-circle{border-color:var(--ink);background:var(--bg)}
.facebook svg{color:#1468D8}.pinterest svg{color:#BF1830}
@media(prefers-color-scheme:dark){.facebook svg{color:#8FB8FF}.pinterest svg{color:#FF9EAE}}
@media(max-width:380px){.share-links{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
dialog{max-width:min(420px,calc(100vw - 32px));border:2px solid var(--line);border-radius:24px;padding:24px;background:var(--surface);color:var(--ink);text-align:center}
dialog::backdrop{background:#0008}
dialog h2{font-size:24px;clear:both;margin-bottom:16px}
dialog img{display:block;max-width:100%;height:auto;margin:12px auto 20px;border-radius:12px}
dialog .hint{margin-top:16px}.dialog-close{float:right;margin-bottom:16px}