*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#fff;color:#111;font:17px/1.6 Arial,Helvetica,sans-serif}a{color:inherit}button,input{font:inherit}button,a,input,summary{touch-action:manipulation;outline-offset:5px}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #111}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}.header{padding:30px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:18px;font-weight:700;text-decoration:none;letter-spacing:-.03em}.brand span{font-weight:400;color:#666}.header nav{display:flex;gap:28px;font-size:14px}.header nav a{text-decoration:none}.header nav a:hover{text-decoration:underline}.section{padding-block:clamp(24px,3.5vw,48px)}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:#555;margin:0 0 22px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(38px,4.4vw,64px);line-height:1.08;letter-spacing:-.045em;margin-bottom:26px;font-weight:600}h2{font-size:clamp(30px,3.4vw,46px);line-height:1.16;letter-spacing:-.035em;max-width:900px;margin-bottom:30px;font-weight:600}h3{font-size:22px;line-height:1.28;letter-spacing:-.02em;margin-bottom:16px}p{margin-bottom:20px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:38px 0 80px}.hero-copy{position:relative;z-index:1}.lead{font-size:16.15px;max-width:460px;margin-bottom:32px}.picture{background:#e6e6e6;border-radius:16px;color:#666;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px;min-height:220px}.picture svg{width:48px;height:48px}.picture strong{font-size:15px;font-weight:400}.picture small{font-size:12px;line-height:1.6;max-width:280px}.hero-picture{min-height:480px}.button{background:#111;color:#fff;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:14px 24px;border:0;border-radius:10px;text-decoration:none;font-size:15px;font-weight:600}.button:hover{background:#333}.button.secondary{background:#eee;color:#111}.button.secondary:hover{background:#ddd}.intro{max-width:850px;margin-inline:auto}.intro h2{font-size:clamp(28px,3.3vw,43px)}.draft{font-size:15px;color:#666}.characters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.character{background:#f5f5f5;border-radius:16px;overflow:hidden}.character .picture{border-radius:16px 16px 0 0;min-height:205px}.character-copy{padding:22px}.index{font-size:12px;display:block;margin-bottom:14px;color:#666}.character h3{font-size:21px}.character p{font-size:14px;line-height:1.65;margin-bottom:0}.featured{background:#eaeaea}.featured .picture{background:#d9d9d9}.after{font-size:20px;margin-top:34px;max-width:700px}.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}fieldset{border:0;padding:0;margin:0;min-width:0}fieldset label{display:flex;align-items:flex-start;gap:14px;padding:11px 0;cursor:pointer;font-size:16px}fieldset input{width:22px;height:22px;margin:2px 0 0;accent-color:#111;flex-shrink:0}.meter{background:#f2f2f2;border-radius:18px;padding:44px}.meter-count{font-size:112px;line-height:1.05;letter-spacing:-.07em;margin:22px 0}.count-total{font-size:33px;color:#777;letter-spacing:0;padding-left:8px}.meter>p:not(.eyebrow){font-size:14px}.meter .draft{margin-bottom:0}.meter progress{display:block;width:100%;height:16px;margin:22px 0;background:#d8d8d8;accent-color:#111;border:0;border-radius:20px;overflow:hidden}.meter progress::-webkit-progress-bar{background:#d8d8d8}.meter progress::-webkit-progress-value{background:#111}.meter progress::-moz-progress-bar{background:#111}.obstacle-section{background:#f7f7f7}.section-description{max-width:740px;margin-bottom:34px;color:#444}.obstacles{display:grid;grid-template-columns:.6fr 1.5fr .6fr;gap:24px;align-items:center;max-width:1000px;margin:40px auto 0}.side-obstacle .picture{min-height:180px;background:#e9e9e9}.side-obstacle h3{font-size:17px;margin-top:18px;text-align:center;color:#666}.main-obstacle{background:#fff;border-radius:18px;overflow:hidden}.main-obstacle .picture{min-height:280px;background:#ddd;border-radius:18px 18px 0 0}.obstacle-copy{padding:28px}.obstacle-copy p{margin-bottom:0;min-height:48px}.carousel-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:28px;font-size:13px;color:#555}.arrow{background:#e8e8e8;color:#111;border:0;border-radius:50%;width:46px;height:46px;font-size:22px}.arrow:hover{background:#d8d8d8}.dossier{background:#eee;border-radius:18px;padding:28px}.dossier-heading{display:flex;justify-content:space-between;font-size:13px;margin-bottom:20px}.portrait{min-height:260px;background:#d9d9d9}.data-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.data-fields span{font-size:12px;text-align:center;padding:12px;background:#e0e0e0;border-radius:8px}.dossier>.draft{font-size:12px;margin-bottom:0}.mission{display:grid;grid-template-columns:1fr auto;gap:30px;background:#eee;border-radius:16px;padding:30px;margin-bottom:24px}.mission h3{margin-bottom:12px}.mission p{margin-bottom:0;max-width:630px}.mission-meta{display:flex;flex-direction:column;justify-content:center;min-width:140px;font-size:14px}.mission-meta strong{font-size:26px;letter-spacing:-.03em}.mission-meta span{color:#555}details{background:#f3f3f3;border-radius:12px;margin:10px 0}summary{list-style:none;display:flex;align-items:center;gap:20px;padding:21px 24px;cursor:pointer;font-weight:600}summary::-webkit-details-marker{display:none}summary:after{content:'+';font-size:24px;font-weight:400;line-height:1;margin-left:auto}details[open]>summary:after{content:'−'}.lesson-number{font-size:13px;color:#666;min-width:25px;font-weight:400}.lesson-title{font-size:16px}.duration{color:#666;font-size:13px;font-weight:400;margin-left:auto;white-space:nowrap}.duration+span{margin-left:0}.details-body{padding:2px 24px 26px 69px;font-size:15px}.details-body p:last-child{margin-bottom:0}.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.skill{background:#f1f1f1;border-radius:16px;padding:28px;min-height:175px}.skill .index{margin-bottom:25px}.skill h3{font-size:20px;margin-bottom:0}.message-section{max-width:850px}.letter{background:#eaeaea;border-radius:18px}.letter summary{padding:32px;gap:20px}.letter summary:after{display:none}.message-icon{width:65px;height:55px;border-radius:10px;background:#d6d6d6;display:grid;place-items:center;font-size:32px;font-weight:400}.message-heading{font-size:24px;letter-spacing:-.02em;line-height:1.3}.message-heading small{display:block;font-size:13px;color:#666;font-weight:400;margin-top:6px;letter-spacing:0}.open-label{margin-left:auto;font-size:13px;color:#555}.letter[open] .open-label{display:none}.letter-content{padding:0 32px 32px}.tariffs{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tariff{background:#f3f3f3;border-radius:18px;padding:36px;min-height:350px;display:flex;flex-direction:column;align-items:flex-start}.tariff.primary{background:#dedede}.tariff h3{font-size:28px}.tariff .eyebrow{font-size:11px}.price{font-size:27px;letter-spacing:-.02em;margin:20px 0 28px}.tariff .button{margin-top:auto;min-width:150px}.question{margin-top:28px;text-align:center}.status{font-size:14px;color:#555;min-height:24px;margin:14px 0 0}.faq{max-width:900px}.faq .details-body{padding-left:24px}footer{background:#f4f4f4;margin-top:40px;padding:48px 0}.footer-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px}footer .brand{display:block;margin-bottom:24px}footer strong{font-size:15px;display:block;margin-bottom:20px}footer p{font-size:13px!important;margin:10px 0}[hidden]{display:none!important}
@media(min-width:1500px){.hero{padding-top:60px}.hero-picture{min-height:520px}}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.hero{gap:28px}h1{font-size:46px}.hero-picture{min-height:460px}.characters{grid-template-columns:repeat(2,minmax(0,1fr))}.character .picture{min-height:230px}.two{gap:32px}.skills{gap:14px}.skill{padding:24px}.intro{max-width:780px}}
@media(max-width:680px){.wrap{width:calc(100% - 40px)}.header{padding:22px 0}.brand{font-size:15px}.header nav{gap:15px;font-size:12px}.hero{grid-template-columns:1fr;gap:30px;padding:30px 0 48px}h1{font-size:43px;max-width:560px}.hero-picture{min-height:280px}.lead{font-size:14.45px}.two,.tariffs,.footer-layout{grid-template-columns:1fr}.characters{gap:12px}.character-copy{padding:18px}.character .picture{min-height:160px;padding:18px}.character .picture small{font-size:11px}.character h3{font-size:19px}.character p{font-size:13px}.after{font-size:18px}.eyebrow{font-size:11px;margin-bottom:16px}.meter{padding:30px}.meter-count{font-size:90px}.obstacles{grid-template-columns:1fr;max-width:440px}.side-obstacle{display:none}.main-obstacle .picture{min-height:240px}.about-layout{gap:30px}.dossier{padding:24px}.mission{grid-template-columns:1fr;padding:26px;gap:24px}.mission-meta{flex-direction:row;align-items:baseline;gap:12px;justify-content:flex-start}.mission-meta strong{font-size:22px}summary{padding:20px;gap:12px}.duration{display:none}.details-body{padding:0 20px 24px}.lesson-title{font-size:15px}.skills{grid-template-columns:1fr 1fr;gap:12px}.skill{padding:21px;min-height:160px}.skill h3{font-size:18px}.letter summary{padding:25px;gap:16px}.message-heading{font-size:22px}.message-icon{width:48px;height:48px;flex-shrink:0;font-size:27px}.open-label{font-size:12px}.letter-content{padding:0 25px 25px}.tariff{padding:30px;min-height:330px}.footer-layout{gap:28px}.faq .details-body{padding-left:20px}footer{padding:38px 0}}
@media(max-width:360px){h1{font-size:37px}.characters{grid-template-columns:1fr}.skills{grid-template-columns:1fr}.open-label{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Mobile composition: keep the narrative and make each interaction visible. */
.character-copy,.skill,.hero-copy{min-width:0}
.character p,.skill h3,.lesson-title{overflow-wrap:anywhere}
summary:after{flex-shrink:0}
.results-cta{margin-top:26px}
.swipe-hint{text-align:center;font-size:13px;color:#666;margin:20px 0 0;display:none}
.main-obstacle{touch-action:pan-y}
@media(max-width:680px){
 .hero{gap:24px;padding:22px 0 36px}
 h1{font-size:clamp(34px,9.5vw,43px);margin-bottom:22px}
 .hero-picture{min-height:220px}
 .intro h2{font-size:27px;margin-bottom:22px}
 .intro p{margin-bottom:14px}
 .characters{grid-template-columns:1fr;gap:12px}
 .character{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:stretch}
 .character .picture{min-height:0;border-radius:0;padding:12px;gap:8px}
 .character .picture svg{width:35px;height:35px}
 .character .picture small{font-size:10px;line-height:1.4}
 .character-copy{padding:18px 16px}
 .character .index{margin-bottom:7px}
 .character h3{font-size:20px;margin-bottom:10px}
 .character p{font-size:16px;line-height:1.5}
 .featured{border:1px solid #aaa}
 .after{margin-top:24px}
 .choices-layout{display:flex;flex-direction:column;align-items:stretch;gap:16px;isolation:isolate}
 .meter{order:-1;position:sticky;top:8px;z-index:2;border:1px solid #ccc;padding:14px 18px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;background:#f2f2f2;box-shadow:0 4px 12px #0000000a}
 .meter .eyebrow{margin:0;align-self:center;font-size:10px}
 .meter-count{font-size:30px;margin:0;letter-spacing:-.04em;grid-column:2;grid-row:1}
 .count-total{font-size:18px;padding-left:4px}
 .meter #count-label{grid-column:1/-1;margin:0;font-size:12px}
 .meter progress{grid-column:1/-1;margin:4px 0;height:10px}
 .meter>.draft{display:none}
 .meter #surprise:not([hidden]){display:block;grid-column:1/-1;font-size:12px}
 fieldset label{padding:12px 0;min-height:48px;font-size:16px}
 .obstacles{margin-top:24px}
 .main-obstacle .picture{min-height:190px}
 .obstacle-copy{padding:24px}
 .swipe-hint{display:block}
 .carousel-controls{margin-top:14px}
 .about-layout{display:flex;flex-direction:column;align-items:stretch;gap:20px}
 .about-layout>div:last-child{display:contents}
 .about-layout h2{order:-2;margin-bottom:0}
 .dossier{order:-1;padding:20px}
 .portrait{min-height:210px}
 .about-layout>div:last-child>p{margin:0}
 .skills{grid-template-columns:1fr;gap:10px}
 .skill{min-height:0;padding:20px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start}
 .skill .index{margin:3px 0 0}
 .skill h3{font-size:18px;line-height:1.4}
 .results-cta{width:100%}
 .mission{padding:22px;gap:18px}
 .lesson-title{font-size:16px;line-height:1.4}
 .letter summary{padding:22px 18px;gap:12px}
 .message-heading{font-size:20px}
 .open-label{display:block;font-size:11px}
 .tariff{padding:26px;min-height:0}
 .tariff .button{width:100%;margin-top:8px}
 .tariffs{gap:16px}
 .header nav a{min-height:44px;display:inline-flex;align-items:center}
 .header{padding:12px 0;gap:12px}
 footer{margin-top:20px}
}
@media(max-width:360px){
 .characters,.skills{grid-template-columns:1fr}
 .character{grid-template-columns:74px minmax(0,1fr)}
 .character-copy{padding:16px 14px}
 .character .picture{padding:8px}
 .character .picture small{font-size:9px}
 .letter summary{flex-wrap:wrap}
 .open-label{margin-left:60px;margin-top:-6px}
}

.data-fields > div{min-width:0;padding:12px;background:#e0e0e0;border-radius:8px}
.data-fields strong{display:block;font-size:12px;margin-bottom:4px}
.data-fields > div span{display:block;padding:0;text-align:left;background:none;overflow-wrap:anywhere}
.dossier-role{font-size:14px;margin:0}
.tariff-list{margin:0 0 16px;padding-left:1.15em}
.tariff-list li + li{margin-top:6px}
.tariff-feedback{margin:0;font-size:15px}
@media(max-width:680px){
 .data-fields > div{padding:9px}
 .lesson-title{overflow-wrap:break-word}
}

.intro p:last-child{margin-bottom:0}
#characters .after{margin-inline:auto;margin-bottom:0;text-align:center}

.hero {
  display: block;
  width: 100%;
  padding: 0;
}
.hero-inner {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 540px;
  padding-block: 48px 64px;
}
.hero-copy h1 { max-width: 800px; margin-inline: auto; }
.hero-copy .lead { margin-inline: auto; }
.hero-scene {
  display: none;
  justify-items: center;
  gap: 12px;
  color: #666;
}
.hero-scene svg { width: 48px; height: 48px; }

.obstacle-section {
  color: #f8f3ff;
  background: radial-gradient(ellipse at 50% 66%, #2c1745, transparent 70%), #10091c;
}
.obstacle-section .eyebrow { color: #c8a5ff; }
.obstacle-section .section-description { color: #e4d8f2; }
.obstacle-section .heading-accent { color: #c59aff; }
.fear-gallery {
  position: relative;
  isolation: isolate;
  height: 415px;
  max-width: 900px;
  margin: 24px auto 0;
  touch-action: pan-y;
}
.fear-card {
  position: absolute;
  inset: 0 auto auto 50%;
  width: min(44%, 370px);
  height: 100%;
  padding: 14px;
  border: 1px solid #c6c6c6;
  border-radius: 22px;
  background: linear-gradient(to bottom, transparent 20%, rgb(0 0 0 / 68%) 52%, rgb(0 0 0 / 80%) 100%), var(--fear-image, linear-gradient(#d6d6d6, #d6d6d6)) center / cover no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  text-align: left;
  transform: translateX(calc(-50% + var(--shift, 0%))) scale(var(--scale, 1)) rotate(var(--angle, 0deg));
  transition: transform 460ms cubic-bezier(.2,.7,.25,1), opacity 350ms ease;
  z-index: var(--layer, 3);
}
.fear-card[data-offset="-2"] { --shift: -75%; --scale: .73; --angle: -9deg; --layer: 1; }
.fear-card[data-offset="-1"] { --shift: -49%; --scale: .86; --angle: -5deg; --layer: 2; }
.fear-card[data-offset="1"] { --shift: 49%; --scale: .86; --angle: 5deg; --layer: 2; }
.fear-card[data-offset="2"] { --shift: 75%; --scale: .73; --angle: 9deg; --layer: 1; }
.fear-card[data-offset="-3"] { visibility: hidden; opacity: 0; pointer-events: none; --scale: .65; --layer: 0; }
.fear-card:focus-visible { outline: 2px solid #e6cdff; outline-offset: 3px; }
.fear-card strong { font-size: 22px; }
.fear-description { min-height: 5em; font-size: 15px; line-height: 1.45; }
.fear-card:not([aria-pressed="true"]) .fear-description { visibility: hidden; }
.tariff .price { margin-bottom: 4px; }
.tariff-monthly, .tariff-seats { margin: 0 0 8px; }
.tariff-monthly { font-size: 15px; }
.tariff-installments { margin: 10px 0 0; }
.tariff-seats { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
@media (min-width: 681px) { .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) and (min-width: 681px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 40px 32px; min-height: 0; gap: 24px; }
  .hero-scene { min-height: 130px; align-content: center; justify-self: end; width: 60%; }
  .fear-gallery { height: 375px; overflow: hidden; }
  .fear-card { width: 68%; padding: 12px; }
  .fear-card[data-offset="-2"], .fear-card[data-offset="2"] { visibility: hidden; }
  .fear-card[data-offset="-1"] { --shift: -36%; }
  .fear-card[data-offset="1"] { --shift: 36%; }
  .fear-description { min-height: 7.5em; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .fear-card { transition: none; } }
.fear-card[data-offset="1"] strong,
.fear-card[data-offset="2"] strong { text-align: right; }

/* Visual direction: violet light, clear glass, and dark ink. */
:root {
  --paper: #ffffff;
  --white: #fff;
  --lavender: #eee9ff;
  --glass-edge: #d9ccfb;
  --violet: #6339e5;
  --violet-dark: #4925be;
  --ink: #171329;
  --muted: #5f5870;
  --glass: linear-gradient(148deg, #ffffffed, #eee9ffd9);
  --glass-shadow: 0 12px 34px #39207812;
  --site-font: Arial, Helvetica, sans-serif;
}
body { background: var(--paper); color: var(--ink); font-family: var(--site-font); }
.eyebrow { color: var(--violet-dark); }
.section-description, .draft, .index { color: var(--muted); }
.lead { color: #000; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 4px;
}
.button { background: var(--violet); color: var(--white); }
.button:hover { background: var(--violet-dark); }
.button.secondary { background: var(--lavender); color: var(--violet-dark); }
.button.secondary:hover { background: var(--glass-edge); }
.hero-top {
  background: linear-gradient(180deg, #ffffff36, #ffffff40 55%, transparent 78%),
    url("images/hero-landscape.webp") center / cover no-repeat;
}
.hero-top .hero-inner { padding-bottom: clamp(96px, 15vw, 210px); }
.hero-scene { color: var(--violet-dark); }
.hero-scene svg { opacity: .72; }
.picture, .dossier, .data-fields > div { background: var(--lavender); }
.meter, .mission, .tariff, .letter, details {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
}
.meter, .dossier, .tariff, .letter { box-shadow: var(--glass-shadow); }
.tariff.primary, details[open] { background: var(--lavender); }
footer { background: var(--lavender); border-top: 1px solid var(--glass-edge); }
input[type="checkbox"] { accent-color: var(--violet); }
.meter-count, .price { color: var(--violet-dark); }
.meter progress { background: var(--glass-edge); accent-color: var(--violet); }
.meter progress::-webkit-progress-bar { background: var(--glass-edge); }
.meter progress::-webkit-progress-value { background: linear-gradient(90deg, #a48afc, var(--violet)); }
.meter progress::-moz-progress-bar { background: linear-gradient(90deg, #a48afc, var(--violet)); }

.character {
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--glass-edge);
  color: var(--white);
  background: var(--character-image) center top / cover no-repeat #171329;
  box-shadow: var(--glass-shadow);
}
.character.featured { border-color: var(--violet); }
.character-copy {
  position: relative;
  width: 100%;
  padding: 20px;
  background: linear-gradient(180deg, #171329a8, #171329f5);
}
.character-copy::before {
  content: "";
  position: absolute;
  inset: auto 0 100%;
  height: 56px;
  background: linear-gradient(180deg, transparent, #171329a8);
  pointer-events: none;
}
.character .index { color: #eee9ff; }
.character h3 { margin-top: 0; }
.character p { font-size: 14px; line-height: 1.5; }
.fear-card {
  border-color: #b58de877;
  background: linear-gradient(to bottom, transparent 20%, #171329b8 52%, #171329ed 100%),
    var(--fear-image, radial-gradient(ellipse at 55% 15%, #9b77d1, #412667)) center / cover no-repeat;
}
.skill {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 196px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background: var(--white);
  box-shadow: var(--glass-shadow);
  transition: background-color 220ms ease, border-color 220ms ease;
}
.skill .index { position: absolute; top: 20px; left: 20px; margin: 0; }
.skill h3 { position: relative; }
.skill-accent { color: var(--violet-dark); }
.skill-art {
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -14px;
  width: 82px;
  height: auto;
  pointer-events: none;
}
@media (hover: hover) { .skill:hover { background-color: var(--lavender); border-color: var(--violet); } }
.skill:active { background-color: var(--lavender); }
@media (max-width: 680px) {
  .hero-top {
    background: linear-gradient(180deg, #fffffff2, #ffffffbf 49%, #ffffff25 75%, transparent 88%),
      url("images/hero-landscape.webp") center bottom / cover no-repeat;
  }
  .hero-top .hero-inner { padding-bottom: 145px; }
  .hero-scene { min-height: 180px; }
  .character { min-height: 370px; }
  .character p { font-size: 15px; }
  .skill {
    min-height: 0;
    gap: 8px;
    padding: 16px 74px 16px 20px;
  }
  .skill .index { position: static; }
  .skill-art { top: -12px; right: -12px; width: 72px; }
}
@media (prefers-reduced-motion: reduce) { .skill { transition: none; } }
.character { width: 100%; min-width: 0; }
@media (max-width: 360px) { .character { min-height: 435px; } }

@font-face {
  font-family: Onest;
  src: url("fonts/onest.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root { --site-font: Onest, Arial, Helvetica, sans-serif; }

#choose {
  color: #f8f3ff;
  background: radial-gradient(ellipse at 50% 0%, #342054, transparent 65%), #10091c;
}
#choose .wrap { max-width: 850px; }
#choose .eyebrow { color: #c8a5ff; }
#choose h2 { text-shadow: 0 0 26px #b379ff70; }

.choices-layout {
  padding: 0 clamp(16px, 4vw, 36px) 16px;
  border: 1px solid #bd96ff40;
  border-radius: 20px;
  background: linear-gradient(145deg, #b182f21c, #a16def08);
}
.choices-progress {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 20px 0 14px;
  background: linear-gradient(#211431 75%, transparent);
}
.flask {
  --liquid-level: 0%;
  position: relative;
  height: clamp(24px, 4vw, 34px);
  padding: 3px;
  border: 1px solid #b386ff;
  border-radius: 999px;
  background: linear-gradient(#9c66e665, #160b2c 55%, #542e8355);
  box-shadow: inset 0 2px 4px #e4c8ff91, 0 0 16px #963dff38;
  transition: box-shadow 300ms ease;
}
.flask::after {
  content: "";
  position: absolute;
  inset: 4px 12px auto;
  height: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #f6e5ffbb 25%, #e1caff55 75%, transparent);
  pointer-events: none;
}
.flask.is-filled {
  box-shadow: inset 0 2px 4px #e4c8ff91, 0 0 22px #a049ff80;
}
.flask-chamber {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.flask-liquid {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--liquid-level);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 75%, #f3d5ffbb),
    linear-gradient(#e9c2ff, #a34cff 24%, #6823ed 73%, #ad63ff);
  box-shadow: inset 0 0 6px #f1ceff, 0 0 10px #bb71ff;
  transition: width 420ms cubic-bezier(.22,.7,.25,1);
}
.flask.is-full { box-shadow: inset 0 2px 4px #f3ddff, 0 0 28px #b45bffbf; }
.flask.is-full .flask-liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, #f5e2ffb0 50%, transparent 60%);
  animation: flask-glint 750ms 380ms both;
}
@keyframes flask-glint {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
#choices label {
  align-items: center;
  min-height: 52px;
  padding: 10px 0;
}
#choices label + label { border-top: 1px solid #b899f32b; }
#choices input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin: 0;
  border: 1px solid #9b7bc7;
  border-radius: 6px;
  background: #180e28;
}
#choices input:checked {
  border-color: #e9c5ff;
  background: #5d25a6;
  box-shadow: inset 0 0 8px #ca7bff, 0 0 13px #af55ff;
}
#choices input:checked::after {
  content: "";
  width: 11px;
  height: 6px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
#choices input:focus-visible { outline: 2px solid #fff; }
#choices input { scroll-margin-top: 64px; }
#choose #surprise { margin: 12px 0 0; color: #e5c7ff; }
@media (prefers-reduced-motion: reduce) {
  .flask, .flask-liquid { transition: none; }
  .flask.is-full .flask-liquid::after { animation: none; content: none; }
}

.heading-accent { color: var(--violet); }

.message-section { overflow: clip; }
.letter {
  margin: 0;
  background: linear-gradient(135deg, #fff, #f0e9ff);
  border: 1px solid #d8c9f8;
  box-shadow: 0 12px 28px #4c268619;
}
.letter summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.letter .message-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--violet);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}
.message-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--violet);
}
.letter.is-read .message-dot { display: none; }
.letter .message-heading {
  font-size: 16px;
  letter-spacing: 0;
}
.letter .message-heading small { margin-top: 3px; line-height: 1.4; }
.message-meta {
  display: grid;
  gap: 4px;
  text-align: right;
  font-size: 11px;
  font-weight: 400;
  color: #60576d;
}
.message-meta .open-label { color: var(--violet-dark); font-weight: 700; }
@media (max-width: 420px) {
  .letter summary { gap: 9px; padding: 12px; }
  .letter .message-icon { width: 36px; height: 36px; border-radius: 11px; }
  .letter .message-heading { font-size: 14px; }
  .letter .message-heading small { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .letter.has-arrived:not(.is-read):not([open]):not(:focus-within) {
    animation: letter-arrive 420ms ease-out both, letter-nudge 420ms 550ms ease-in-out;
  }
}
@keyframes letter-arrive {
  from { opacity: 0; transform: translateX(min(38vw, 240px)); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes letter-nudge {
  25% { transform: rotate(-0.8deg); }
  65% { transform: rotate(0.8deg); }
}

.situations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.situations strong {
  display: block;
  margin-bottom: 5px;
}
@media (max-width: 900px) {
  .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px) {
  .situations { grid-template-columns: 1fr; gap: 18px; }
}
@media (min-width: 681px) {
  .character-copy p { min-block-size: 6lh; }
}

.header nav {
  flex-wrap: wrap;
  column-gap: clamp(12px, 2vw, 28px);
  row-gap: 0;
}
.header nav a { white-space: nowrap; }
@media (max-width: 760px) {
  .header { flex-wrap: wrap; gap: 0 16px; }
}

.dossier {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 520px;
  aspect-ratio: 2 / 3;
  padding: clamp(18px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid #bba4e6;
  border-radius: 24px;
  color: #fff;
  background: #211532;
}
.guide-portrait,
.dossier::before,
.dossier::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.guide-portrait {
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.dossier::before {
  content: "";
  z-index: -2;
  background: linear-gradient(180deg, #1d1037ed, #1d10375c 12%, transparent 24%),
    linear-gradient(0deg, #130b23 0%, #1a102ee8 23%, #1a102e99 36%, transparent 56%);
}
.dossier::after {
  content: "";
  z-index: -1;
  inset: 7px;
  border: 1px solid #efe4ff54;
  border-radius: 17px;
}
.dossier .dossier-heading {
  display: grid;
  gap: 2px;
  margin: 0 0 auto;
  padding-bottom: 172px;
}
.dossier-heading span {
  color: #f0e1ff;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.dossier-heading strong { font-size: clamp(18px, 3vw, 25px); line-height: 1.2; }
.dossier .data-fields {
  gap: 0 14px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #e5cbff36;
  border-radius: 10px;
  background: #160c29c9;
}
.dossier .data-fields > div { padding: 8px 0; background: none; }
.dossier .data-fields > div:nth-child(n+3) { border-top: 1px solid #e5cbff36; }
.dossier .data-fields strong { color: #e6ccff; }
.dossier .dossier-role {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: #f0e1ff;
  font-size: 12px;
}
.dossier-role::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3a5ff;
  box-shadow: 0 0 9px #c689ff;
}

.guide-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(10px, 1.2vw, 12px);
}
.guide-stats li { padding-inline: clamp(8px, 1.5vw, 18px); }
.guide-stats li:first-child { padding-inline-start: 0; }
.guide-stats li:last-child { padding-inline-end: 0; }
.guide-stats li + li { border-inline-start: 1px solid var(--glass-edge); }
@media (max-width: 680px) {
  .guide-stats { margin-top: 4px; }
}