/* ---- tokens ---- */
:root{
  --ink:#0e0f10;--ink-2:#26282b;--ink-3:#4a4d52;--stone:#75797f;--stone-2:#9ba0a6;
  --hairline:#dcd8d2;--hairline-soft:#ebe8e3;--paper:#f2f0ec;--paper-2:#e7e3dc;--canvas:#ffffff;
  --cobalt:#1b3bff;--cobalt-deep:#0a1cb8;--cobalt-tint:#dfe3ff;
  --alert:#c6301b;--live:#0e7a4a;

  --text-primary:var(--ink);--text-secondary:var(--ink-3);--text-muted:var(--stone);
  --surface-page:var(--canvas);--surface-stage:var(--paper-2);--surface-field:var(--paper);
  --border-default:var(--hairline);

  --font-display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --font-text:"Chivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Chivo Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --fs-title-3:20px;--fs-body-lg:19px;--fs-body:17px;--fs-body-sm:15px;
  --fs-label:13px;--fs-label-sm:11px;
  --lh-display:0.88;--lh-title:1.08;--lh-body:1.5;--lh-tight:1.2;
  --ls-display:-0.03em;--ls-title:-0.02em;--ls-label:0.14em;--ls-label-wide:0.2em;
  --fw-medium:500;--fw-bold:700;--fw-black:900;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --space-7:48px;--space-8:64px;--space-9:96px;
  --gutter-grid:2px;--gutter-page:24px;
  --max-width:1200px;
  --control-h:52px;--control-h-sm:40px;

  --ease-out:cubic-bezier(0.2,0,0,1);--dur-base:180ms;--dur-reveal:520ms;
}

@media (prefers-reduced-motion:reduce){
  :root{--dur-base:1ms;--dur-reveal:1ms}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:400 var(--fs-body)/var(--lh-body) var(--font-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:var(--fw-black)}
p{margin:0}
a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--cobalt-deep)}
button{font:inherit}
input{font:inherit}
::selection{background:var(--cobalt);color:var(--canvas)}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

.tt-label{font:var(--fw-medium) var(--fs-label-sm)/var(--lh-tight) var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase}

/* ---- header ---- */
.tt-header{
  position:sticky;top:0;z-index:6;height:64px;display:flex;align-items:center;gap:var(--space-6);
  padding:0 var(--gutter-page);background:var(--surface-page);box-shadow:inset 0 -1px 0 var(--border-default);
}
.tt-logo{font:var(--fw-black) 20px/1 var(--font-display);letter-spacing:-0.02em;text-transform:uppercase}
.tt-headlink{font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;color:var(--text-primary);cursor:pointer}
.tt-headlink:hover{color:var(--cobalt)}
.tt-total{margin-left:auto;font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}

.tt-lang-toggle{display:flex;border:1px solid var(--border-default);border-radius:2px;overflow:hidden;flex:none}
.tt-lang-btn{
  border:0;background:transparent;color:var(--text-muted);cursor:pointer;padding:0 var(--space-3);height:26px;
  font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.tt-lang-btn + .tt-lang-btn{border-left:1px solid var(--border-default)}
.tt-lang-btn.is-active{background:var(--ink);color:var(--canvas)}
.tt-lang-btn:not(.is-active):hover{color:var(--ink)}

@media (max-width:640px){
  #tt-nav-topics{display:none}
}

.tt-main{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter-page) var(--space-9)}

/* ---- floating vertical progress rail ---- */
/* Mobile-first: a slim edge strip with a small rotated caption. Both the bar
   and the caption text are always visible; only their size/inset scale up. */
.tt-progress{
  position:fixed;top:50%;right:2px;transform:translateY(-50%);z-index:7;
  display:flex;align-items:center;gap:6px;
}
.tt-progress-track{
  position:relative;width:5px;height:28vh;background:var(--hairline-soft);
  border:1px solid var(--border-default);border-radius:4px;overflow:hidden;
}
.tt-progress-fill{position:absolute;left:0;right:0;bottom:0;background:var(--cobalt);transition:height var(--dur-reveal) var(--ease-out),background-color var(--dur-reveal) var(--ease-out)}
.tt-progress-caption{
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;max-height:28vh;
  font:var(--fw-medium) 9px/1 var(--font-mono);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-secondary);
}

@media (min-width:640px){
  .tt-progress{right:var(--space-2);gap:var(--space-2)}
  .tt-progress-track{width:6px;height:32vh}
  .tt-progress-caption{font-size:10px;max-height:32vh}
}

@media (min-width:1480px){
  .tt-progress{right:var(--space-6);gap:var(--space-4)}
  .tt-progress-track{width:10px;height:min(46vh,360px)}
  .tt-progress-caption{font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);max-height:min(46vh,360px)}
}

/* ---- buttons / chips ---- */
.tt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h);padding:0 var(--space-5);border-radius:2px;border:0;cursor:pointer;
  font:var(--fw-bold) var(--fs-body-sm)/1 var(--font-display);letter-spacing:-0.01em;text-decoration:none;
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
.tt-btn-sm{height:var(--control-h-sm);padding:0 var(--space-4);font-size:14px}
.tt-btn-primary{background:var(--ink);color:var(--canvas)}
.tt-btn-primary:hover{background:var(--cobalt)}
.tt-btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--border-default)}
.tt-btn-secondary:hover{border-color:var(--ink)}
.tt-btn-quiet{background:transparent;color:var(--text-muted)}
.tt-btn-quiet:hover{color:var(--ink)}
.tt-btn[disabled]{opacity:0.4;cursor:not-allowed}

.tt-chip{
  display:inline-flex;align-items:center;height:var(--control-h-sm);padding:0 var(--space-4);
  border-radius:2px;border:1px solid var(--border-default);background:transparent;color:var(--ink);cursor:pointer;
  font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.tt-chip.is-active{background:var(--cobalt);border-color:var(--cobalt);color:var(--canvas)}

.tt-field{
  height:var(--control-h-sm);padding:0 var(--space-3);background:var(--surface-field);
  border:1px solid var(--border-default);border-radius:2px;font:400 var(--fs-body-sm)/1 var(--font-text);color:inherit;width:100%;
}

/* ---- intro / first page ---- */
.tt-intro{
  min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--space-7) 0;border-bottom:3px solid var(--ink);
}
.tt-intro h1{font-size:clamp(32px,6vw,80px);letter-spacing:var(--ls-display);line-height:var(--lh-display);text-transform:uppercase}
.tt-intro-body{max-width:60ch;font:400 var(--fs-body)/var(--lh-body) var(--font-text);color:var(--text-secondary);margin-top:var(--space-5)}
.tt-intro-body + .tt-intro-body{margin-top:var(--space-3)}
.tt-intro-steps{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);max-width:60ch}
.tt-intro-steps li{display:flex;gap:var(--space-3);align-items:baseline;font:400 var(--fs-body-sm)/1.4 var(--font-text);color:var(--text-primary)}
.tt-intro-steps li::before{content:"→";color:var(--cobalt);font-weight:var(--fw-bold);flex:none}
.tt-intro-actions{margin-top:var(--space-7);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.tt-intro-note{font:400 var(--fs-label-sm)/1.3 var(--font-mono);color:var(--text-muted)}

/* ---- hero ---- */
.tt-kicker{font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label-wide);text-transform:uppercase;color:var(--cobalt);margin-bottom:var(--space-5)}

.tt-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-8);align-items:end;padding:var(--space-8) 0 var(--space-7)}
.tt-hero h2{font-size:clamp(38px,7vw,96px);letter-spacing:var(--ls-display);line-height:var(--lh-display);text-transform:uppercase}
.tt-hero p{font:400 var(--fs-body)/var(--lh-body) var(--font-text);max-width:52ch;color:var(--text-secondary)}

/* ---- quick-jump rail ---- */
.tt-rail{position:sticky;top:64px;z-index:5;display:flex;gap:var(--space-6);overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface-page);box-shadow:inset 0 -1px 0 var(--border-default);padding:var(--space-4) 0}
.tt-rail a{flex:none;font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;text-decoration:none;cursor:pointer;padding-bottom:var(--space-3);white-space:nowrap;color:var(--text-muted)}
.tt-rail a:hover{color:var(--cobalt)}
.tt-rail-card-link{margin-left:auto;color:var(--ink) !important}

/* ---- topics (all on one page) ---- */
.tt-topics{display:flex;flex-direction:column}
.tt-topic-section{scroll-margin-top:140px}
.tt-topic-section + .tt-topic-section{border-top:3px solid var(--ink);margin-top:var(--space-8);padding-top:var(--space-2)}

.tt-add-topic{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:flex-start;border-top:1px solid var(--border-default);padding-top:var(--space-6);margin-top:var(--space-8)}
.tt-add-topic .tt-add-fields{flex:1;min-width:280px;max-width:560px}
.tt-add-topic .tt-add-fields p{margin-bottom:var(--space-3)}
.tt-add-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tt-add-row input:first-child{flex:1;min-width:150px}
.tt-add-row input:nth-child(2){flex:2;min-width:200px}

.tt-topic-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-8);align-items:end;padding:var(--space-7) 0 var(--space-5)}
.tt-topic-head h2{font-size:clamp(28px,5vw,64px);letter-spacing:var(--ls-display);line-height:var(--lh-display);text-transform:uppercase}
.tt-topic-head-left{display:flex;flex-direction:column;gap:var(--space-4)}
.tt-topic-head-right{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.tt-topic-head-right p{font:400 var(--fs-body)/var(--lh-body) var(--font-text);color:var(--text-secondary);max-width:34ch}
.tt-mode-row{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* ---- embedded favorite-song player ---- */
.tt-fav-song{margin:0 0 var(--space-6);background:var(--surface-stage)}
.tt-fav-song iframe{width:100%;border:0;display:block}
.tt-fav-song.is-video{aspect-ratio:16/9}
.tt-fav-song.is-video iframe{height:100%}
.tt-fav-song.is-audio iframe{height:152px}
.tt-fav-song.is-file{padding:var(--space-4)}
.tt-fav-song.is-file audio{width:100%;display:block}

.tt-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter-grid)}
.tt-opt-btn{
  display:block;width:100%;padding:0;text-align:left;background:transparent;color:inherit;border:0;cursor:pointer;
  outline:1px solid var(--border-default);outline-offset:-1px;transition:outline-color var(--dur-base) var(--ease-out);
}
.tt-opt-btn:hover{outline:1px solid var(--ink);outline-offset:-1px}
.tt-opt-btn.is-selected{outline:2px solid var(--cobalt);outline-offset:-2px}
.tt-opt-frame{position:relative;width:100%;aspect-ratio:4/3;background:var(--surface-stage);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--space-3)}
.tt-opt-frame .tt-opt-glyph{font:var(--fw-black) clamp(28px,5vw,44px)/1 var(--font-display);letter-spacing:-0.01em;color:var(--stone-2)}
.tt-opt-frame .tt-opt-emoji{font-size:clamp(34px,6vw,56px);line-height:1;filter:grayscale(0.15)}
.tt-opt-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tt-opt-badge{position:absolute;left:0;bottom:0;z-index:2;background:var(--cobalt);color:var(--canvas);padding:6px var(--space-3);font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;font-variant-numeric:tabular-nums;pointer-events:none}
.tt-opt-body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) 0 var(--space-5)}
.tt-opt-name-row{display:flex;align-items:baseline;gap:var(--space-2);justify-content:space-between}
.tt-opt-name{font:var(--fw-bold) var(--fs-title-3)/var(--lh-title) var(--font-display);letter-spacing:var(--ls-title);text-transform:uppercase}
.tt-opt-rank{display:flex;gap:var(--space-2);flex:none}
.tt-opt-rank a{font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);text-decoration:none;cursor:pointer;color:var(--ink)}
.tt-opt-note{font:400 var(--fs-body-sm)/1.3 var(--font-text);color:var(--text-muted)}

/* ---- pick animation: a small "pop" on the button, plus an emoji burst on screen ---- */
@keyframes tt-opt-pop{
  0%{transform:scale(1)}
  35%{transform:scale(1.06)}
  60%{transform:scale(0.97)}
  100%{transform:scale(1)}
}
.tt-opt-btn.tt-opt-pop{animation:tt-opt-pop var(--dur-reveal) var(--ease-out)}

.tt-burst{
  position:fixed;top:0;left:0;z-index:50;pointer-events:none;
  font-size:20px;line-height:1;
  animation:tt-burst-move 650ms var(--ease-out) forwards;
}
@keyframes tt-burst-move{
  0%{transform:translate(-50%,-50%) scale(0.5);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .tt-burst{display:none}
}

/* ---- text fields (per-topic free text, e.g. About you) ---- */
.tt-textfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.tt-textfield{display:flex;flex-direction:column;gap:var(--space-2)}

.tt-find-me-note{margin:calc(-1 * var(--space-4)) 0 var(--space-6);font:400 var(--fs-body-sm)/1.4 var(--font-text);color:var(--text-muted)}
.tt-find-me-note a{color:var(--cobalt)}

/* ---- sliders ---- */
.tt-sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default);padding:var(--space-6) 0;margin-bottom:var(--space-6)}
.tt-slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-3)}
.tt-slider-label{font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.tt-slider-val{font:var(--fw-bold) var(--fs-body)/1 var(--font-display);letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.tt-slider-track{position:relative;height:28px;display:flex;align-items:center}
.tt-rail-bg{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--border-default);transform:translateY(-50%)}
.tt-rail-fill{position:absolute;top:50%;height:2px;background:var(--cobalt);transform:translateY(-50%)}
.tt-range{
  position:absolute;left:0;right:0;top:0;width:100%;height:28px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;pointer-events:none;z-index:1;
}
.tt-range-hi{z-index:2}
.tt-range::-webkit-slider-runnable-track{background:transparent;height:28px}
.tt-range::-moz-range-track{background:transparent;height:28px}
.tt-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;
  background:var(--ink);border:3px solid var(--canvas);box-shadow:0 0 0 1px var(--ink);cursor:grab;margin-top:0;
}
.tt-range::-moz-range-thumb{
  pointer-events:auto;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid var(--canvas);
  box-shadow:0 0 0 1px var(--ink);cursor:grab;
}
.tt-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--cobalt);outline-offset:2px}

/* ---- slider zone infographic (e.g. income) ---- */
.tt-zones{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.tt-zone-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px var(--space-3);border-radius:2px;
  border:1px solid var(--border-default);background:transparent;color:var(--text-muted);
  font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.tt-zone-chip.is-active{background:var(--cobalt);border-color:var(--cobalt);color:var(--canvas)}
.tt-zone-chip-special{border-style:dashed}

.tt-writein{margin-top:var(--space-7);max-width:560px}
.tt-writein p{margin-bottom:var(--space-3)}
.tt-writein-row{display:flex;gap:var(--space-2)}
.tt-writein-row input{flex:1}
.tt-customs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.tt-custom-tag{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-h-sm);padding:0 var(--space-4);background:var(--cobalt);color:var(--canvas);font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase}
.tt-custom-tag a{color:inherit;text-decoration:none;cursor:pointer;opacity:.7}

.tt-topic-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;border-top:3px solid var(--ink);margin-top:var(--space-8);padding-top:var(--space-5)}
.tt-picked-label{margin-left:auto;font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ---- summary section ---- */
.tt-summary{max-width:920px;margin:0 auto;padding:var(--space-8) 0 var(--space-9);border-top:3px solid var(--ink);scroll-margin-top:100px}
.tt-summary h2{font-size:clamp(28px,5vw,48px);letter-spacing:var(--ls-display);line-height:var(--lh-display);text-transform:uppercase;margin-bottom:var(--space-5)}
.tt-portrait{font:400 var(--fs-body-lg)/var(--lh-body) var(--font-text);border-left:2px solid var(--cobalt);padding-left:var(--space-4);max-width:56ch}
.tt-summary-note{font:400 var(--fs-body-sm)/1.4 var(--font-text);color:var(--text-muted);max-width:48ch;margin-top:var(--space-4)}

.tt-summary-rows{margin-top:var(--space-7)}
.tt-summary-row{display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--border-default);align-items:baseline}
.tt-summary-row-name{font:var(--fw-bold) var(--fs-title-3)/var(--lh-title) var(--font-display);text-transform:uppercase;text-decoration:none;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.tt-summary-row-name:hover{color:var(--cobalt)}
.tt-summary-picks{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tt-summary-pick{display:inline-flex;align-items:center;height:var(--control-h-sm);padding:0 var(--space-4);border:1px solid var(--border-default);font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase}
.tt-summary-empty{font:400 var(--fs-body-sm)/1 var(--font-text);color:var(--text-muted)}

.tt-summary-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5);border-top:3px solid var(--ink);padding-top:var(--space-6);margin-top:var(--space-4)}
.tt-summary-form label{display:flex;flex-direction:column;gap:var(--space-2)}
.tt-summary-form span{font:var(--fw-medium) var(--fs-label-sm)/1 var(--font-mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}

.tt-summary-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}

/* ---- responsive ---- */
@media (max-width:900px){
  .tt-hero{grid-template-columns:1fr;gap:var(--space-5)}
  .tt-topic-head{grid-template-columns:1fr;gap:var(--space-4)}
  .tt-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  :root{--gutter-page:16px}
  .tt-header{gap:var(--space-3)}
  .tt-logo{font-size:16px}
  .tt-total{display:none}
  .tt-summary-row{grid-template-columns:1fr}
  .tt-add-topic{gap:var(--space-5)}
}

@media (max-width:480px){
  .tt-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tt-opt-name{font-size:15px}
}