html, body { margin: 0; padding: 0; background: #ECE4D4; }
* { box-sizing: border-box; }
::selection { background: #2F6B45; color: #F7F3EA; }
[data-theme="paper"] {
--bg-top:#F8F3E8;--bg-mid:#F2ECE0;--bg-bot:#ECE4D4;--bg-blur:rgba(242,236,224,.86);
--ink:#241F18;--ink-soft:#3C3327;--text:#564B3C;--muted:#6B5F4E;
--faint:#8C806C;--faint2:#A89B85;--eyebrow:#BBA98C;--faint3:#C4B89F;
--accent:#A8754E;--card:#FBF7EE;--line:#EAE0CF;--track:#F0E8D8;--track-line:#D8CCB4;
--btn-bg:#241F18;--btn-fg:#F4EEE2;--btn-hover:#3A3225;--btn-ghost-line:#CDBFA6;
--clay:#9A3B25;--green:#2F6B45;--thumb:#FBF8F1;
}
[data-theme="dusk"] {
--bg-top:#211C14;--bg-mid:#17130D;--bg-bot:#100E09;--bg-blur:rgba(18,15,10,.86);
--ink:#F2EAD9;--ink-soft:#E2D7C1;--text:#C2B6A0;--muted:#AC9F87;
--faint:#8E8369;--faint2:#6E6553;--eyebrow:#8A7C5F;--faint3:#544B3B;
--accent:#CBA06B;--card:#1D1A13;--line:#322C20;--track:#2A251C;--track-line:#3A3528;
--btn-bg:#F2EAD9;--btn-fg:#1A160F;--btn-hover:#E2D7C1;--btn-ghost-line:#4A4334;
--clay:#DC7253;--green:#62B381;--thumb:#FBF5E8;
}
@keyframes rtr-hint {
0%,100% { transform: translateX(-50%) scale(1); opacity:.55; }
50% { transform: translateX(-50%) scale(1.12); opacity:.9; }
}
.rtr-root {
min-height:100vh; width:100%;
font-family:'Hanken Grotesk', sans-serif;
color: var(--ink,#241F18);
background: radial-gradient(120% 80% at 50% -10%, var(--bg-top,#F8F3E8) 0%, var(--bg-mid,#F2ECE0) 55%, var(--bg-bot,#ECE4D4) 100%);
background-attachment: fixed;
overflow-x: hidden;
}
.rtr-clay { color: var(--clay,#9A3B25); font-weight:600; }
.rtr-green { color: var(--green,#2F6B45); font-weight:600; }
.rtr-serif { font-family:'Newsreader', serif; }
/* ---- theme toggle ---- */
.rtr-theme-toggle {
position:fixed; bottom:18px; right:18px; z-index:60;
width:46px; height:46px; border-radius:50%; cursor:pointer;
background: var(--card,#FBF7EE); border:1px solid var(--btn-ghost-line,#CDBFA6);
color: var(--ink,#241F18); font-size:19px; line-height:1;
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 22px -10px rgba(0,0,0,.45);
transition: transform .2s ease;
}
.rtr-theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); }
/* ---- intro ---- */
.rtr-intro {
max-width:760px; margin:0 auto;
padding: clamp(48px,10vh,128px) clamp(22px,5vw,56px) 80px;
min-height:100vh; display:flex; flex-direction:column; justify-content:center;
}
.rtr-intro-eyebrow {
font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
color: var(--accent,#A8754E); margin-bottom:26px;
}
.rtr-intro-title {
font-family:'Newsreader', serif; font-weight:400;
font-size: clamp(42px,8vw,82px); line-height:1.02; letter-spacing:-.015em;
margin:0 0 26px; color: var(--ink,#241F18);
}
.rtr-intro-sub {
font-family:'Newsreader', serif; font-style:italic;
font-size: clamp(19px,2.6vw,25px); line-height:1.5;
color: var(--muted,#6B5F4E); max-width:30ch; margin:0 0 40px;
}
.rtr-intro-gradient {
height:8px; border-radius:5px; max-width:340px; margin:0 0 40px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.rtr-intro-body {
display:flex; flex-direction:column; gap:18px; max-width:54ch;
font-size: clamp(15px,1.8vw,17px); line-height:1.72;
color: var(--text,#564B3C); margin-bottom:42px;
}
.rtr-intro-body p { margin:0; }
.rtr-intro-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.rtr-pool-line { font-size:12.5px; color: var(--faint,#9A8E79); letter-spacing:.02em; }
.rtr-privacy-line { display:block; margin-top:14px; opacity:.85; }
.rtr-word-prompt {
font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
color: var(--eyebrow,#BBA98C); text-align:center; margin:0 0 14px;
}
.rtr-probe-text.rtr-is-word {
font-style:normal; font-weight:500; text-align:center; text-transform:lowercase;
letter-spacing:-.015em;
}
/* ---- buttons ---- */
.rtr-btn-primary {
appearance:none; border:none; cursor:pointer;
background: var(--btn-bg,#241F18); color: var(--btn-fg,#F4EEE2);
font-family:'Hanken Grotesk', sans-serif; font-weight:600; font-size:16px; letter-spacing:.01em;
padding:17px 38px; border-radius:40px;
box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
transition: transform .2s ease, background .2s ease;
}
.rtr-btn-primary:hover { background: var(--btn-hover,#3A3225); transform: translateY(-2px); }
.rtr-btn-ghost {
appearance:none; cursor:pointer;
font-family:'Hanken Grotesk', sans-serif; font-size:15px; font-weight:600;
color: var(--ink,#241F18); background:none;
border:1px solid var(--btn-ghost-line,#CDBFA6);
padding:14px 34px; border-radius:36px; letter-spacing:.01em;
transition: all .2s;
}
.rtr-btn-ghost:hover {
background: var(--btn-bg,#241F18); color: var(--btn-fg,#F4EEE2);
border-color: var(--btn-bg,#241F18);
}
/* ---- test ---- */
.rtr-test { min-height:100vh; display:flex; flex-direction:column; }
.rtr-progress-bar {
position:sticky; top:0; z-index:30;
background: var(--bg-blur,rgba(242,236,224,.86));
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom:1px solid var(--line,#E2D8C5);
}
.rtr-progress-track { height:3px; width:100%; background: var(--track,#E2D8C5); }
.rtr-progress-fill {
height:100%; width:0%;
transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.rtr-progress-meta {
max-width:760px; margin:0 auto; width:100%;
padding:13px clamp(22px,5vw,56px);
display:flex; justify-content:space-between; align-items:center;
}
.rtr-progress-label {
font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
color: var(--accent,#A8754E);
}
.rtr-progress-count {
font-size:13px; font-weight:500; color: var(--faint,#9A8E79);
font-variant-numeric: tabular-nums;
}
.rtr-question-wrap {
flex:1; display:flex; align-items:center; justify-content:center;
padding: clamp(28px,5vh,64px) clamp(22px,5vw,56px);
}
.rtr-card {
width:100%; max-width:720px;
opacity:1; transform: translateY(0);
transition: opacity .35s ease, transform .35s ease;
}
.rtr-card.rtr-hidden { opacity:0; transform: translateY(14px); }
.rtr-q-index {
font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
color: var(--eyebrow,#BBA98C); margin-bottom: clamp(20px,4vh,34px);
font-variant-numeric: tabular-nums;
}
.rtr-probe-text {
font-family:'Newsreader', serif; font-weight:400; font-style:italic;
font-size: clamp(25px,4.4vw,42px); line-height:1.28; letter-spacing:-.01em;
color: var(--ink,#241F18); margin:0 0 clamp(40px,7vh,68px); text-wrap: pretty;
}
.rtr-value-block { text-align:center; margin-bottom:22px; min-height:74px; }
.rtr-value-display {
font-family:'Newsreader', serif; font-size: clamp(46px,9vw,62px); line-height:1;
font-weight:400; font-variant-numeric: tabular-nums;
transition: color .25s ease;
}
.rtr-value-word {
font-size:13.5px; letter-spacing:.04em; color: var(--faint,#8C806C);
margin-top:8px; height:18px;
}
/* ---- rail ---- */
.rtr-rail {
position:relative; height:46px; cursor:pointer;
touch-action:none; outline:none; user-select:none;
-webkit-tap-highlight-color: transparent;
}
.rtr-rail-gradient {
position:absolute; left:0; right:0; top:50%; transform: translateY(-50%);
height:14px; border-radius:8px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.25);
}
.rtr-rail-ticks { position:absolute; inset:0; }
.rtr-tick {
position:absolute; top:50%; transform: translate(-50%,-50%);
width:2px; height:14px; background: rgba(255,255,255,.4); border-radius:1px;
}
.rtr-rail-thumb {
position:absolute; top:50%;
transform: translate(-50%,-50%);
border-radius:50%; z-index:3;
}
.rtr-rail-thumb.has-value {
left:50%; width:30px; height:30px;
background: var(--thumb,#FBF8F1);
border:3px solid var(--faint2,#C7B79B);
box-shadow:0 6px 16px -4px rgba(0,0,0,.5), 0 0 0 6px var(--bg-mid,rgba(251,248,241,.5));
transition: left .18s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
animation: none;
}
.rtr-rail-thumb.no-value {
left:50%; width:24px; height:24px;
background: var(--thumb,#FBF8F1);
border:2px solid var(--faint2,#C7B79B);
box-shadow:0 4px 12px -4px rgba(0,0,0,.45);
animation: rtr-hint 1.8s ease-in-out infinite;
transition: none;
}
.rtr-anchors {
display:flex; justify-content:space-between; margin-top:14px;
font-size:12px; color: var(--faint2,#A89B85); letter-spacing:.02em;
}
.rtr-anchor-w { font-weight:500; }
/* ---- nav ---- */
.rtr-nav {
display:flex; justify-content:space-between; align-items:center;
margin-top: clamp(34px,6vh,52px);
}
.rtr-btn-back {
appearance:none; border:none; background:none; cursor:pointer;
font-family:'Hanken Grotesk', sans-serif; font-size:14px; font-weight:500;
padding:10px 4px; letter-spacing:.02em; transition: color .2s;
color: var(--faint,#8C806C);
}
.rtr-btn-back:disabled { cursor:default; color: var(--faint3,#CFC4B0); }
.rtr-btn-next {
appearance:none; cursor:pointer;
font-family:'Hanken Grotesk', sans-serif; font-size:14.5px; font-weight:600;
padding:11px 26px; border-radius:30px; letter-spacing:.01em;
transition: all .2s;
color: var(--btn-fg,#F4EEE2); background: var(--btn-bg,#241F18);
border:1px solid var(--btn-bg,#241F18);
}
.rtr-btn-next:disabled {
cursor:default;
color: var(--faint3,#C4B89F); background: transparent;
border:1px solid var(--track-line,#D8CDB8);
}
/* ---- results ---- */
.rtr-results {
max-width:760px; margin:0 auto;
padding: clamp(48px,8vh,96px) clamp(22px,5vw,56px) 110px;
}
.rtr-results-eyebrow {
font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
color: var(--accent,#A8754E); margin-bottom:18px;
}
.rtr-results-title {
font-family:'Newsreader', serif; font-weight:400;
font-size: clamp(38px,7vw,68px); line-height:1.04; letter-spacing:-.015em;
margin:0 0 14px; color: var(--ink,#241F18);
}
.rtr-results-sub {
font-family:'Newsreader', serif; font-style:italic;
font-size: clamp(17px,2.3vw,22px); color: var(--muted,#6B5F4E);
margin:0 0 clamp(40px,6vh,60px);
}
.rtr-panel {
background: var(--card,#FBF7EE); border:1px solid var(--line,#EAE0CF);
border-radius:18px; padding: clamp(24px,4vw,38px);
box-shadow:0 24px 50px -34px rgba(0,0,0,.45); margin-bottom:26px;
}
.rtr-panel-title {
font-family:'Newsreader', serif; font-size:22px; margin-bottom:6px;
color: var(--ink,#241F18);
}
.rtr-panel-sub { font-size:13px; color: var(--faint,#9A8E79); margin:0 0 22px; }
/* ---- headline archetype ---- */
.rtr-headline-card {
background: var(--card,#FBF7EE); border:1px solid var(--line,#EAE0CF);
border-left:4px solid var(--accent,#A8754E);
border-radius:18px; padding: clamp(26px,4vw,40px);
box-shadow:0 24px 50px -34px rgba(0,0,0,.45); margin-bottom:26px;
}
.rtr-headline-eyebrow {
font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
color: var(--accent,#A8754E); margin-bottom:12px;
}
.rtr-headline-title {
font-family:'Newsreader', serif; font-size: clamp(26px,4vw,36px); line-height:1.12;
color: var(--ink,#241F18); margin-bottom:14px;
}
.rtr-headline-body {
font-size: clamp(15px,1.9vw,17px); line-height:1.7;
color: var(--text,#564B3C); margin:0;
}
/* ---- dimension rows ---- */
.rtr-dim-row { padding:14px 0; border-top:1px solid var(--line,#EFE7D7); }
.rtr-dim-head {
display:flex; justify-content:space-between; align-items:baseline;
margin-bottom:11px; gap:14px;
}
.rtr-dim-name {
font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color: var(--ink-soft,#3C3327); white-space:nowrap;
}
.rtr-dim-reading {
font-family:'Newsreader', serif; font-style:italic; font-size:15px;
text-align:right; white-space:nowrap; flex-shrink:0;
}
.rtr-dim-track {
position:relative; height:26px; background: var(--track,#F0E8D8);
border-radius:7px; overflow:hidden;
}
.rtr-dim-center {
position:absolute; left:50%; top:0; bottom:0; width:1px;
background: var(--track-line,#D8CCB4); z-index:2;
}
.rtr-dim-fill {
position:absolute; top:0; bottom:0; opacity:.92; z-index:1;
transition: left 1s cubic-bezier(.2,.8,.2,1), width 1s cubic-bezier(.2,.8,.2,1);
}
.rtr-dim-foot {
display:flex; justify-content:space-between; margin-top:6px;
font-size:11px; color: var(--faint2,#B0A48D);
}
.rtr-dim-line {
font-size:13.5px; line-height:1.6; color: var(--text,#5A4F3F);
margin:10px 0 0;
}
/* ---- insights ---- */
.rtr-insight {
padding:4px 0 4px 18px; margin-bottom:20px;
border-left:3px solid var(--faint,#9A8E79);
}
.rtr-insight:last-child { margin-bottom:0; }
.rtr-insight-title {
font-weight:600; font-size:15px; color: var(--ink-soft,#2E2619); margin-bottom:6px;
}
.rtr-insight-body { font-size:14.5px; line-height:1.65; color: var(--text,#5A4F3F); }
/* ---- tier read ---- */
.rtr-tier-line { padding:10px 0; border-top:1px solid var(--line,#EFE7D7); }
.rtr-tier-line:first-child { border-top:none; }
.rtr-tier-label {
font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color: var(--accent,#A8754E); margin-bottom:5px;
}
.rtr-tier-text { font-size:14.5px; line-height:1.6; color: var(--text,#5A4F3F); }
.rtr-tier-summary {
margin-top:16px; padding-top:16px; border-top:1px solid var(--line,#EFE7D7);
font-family:'Newsreader', serif; font-style:italic; font-size:16px; line-height:1.55;
color: var(--ink-soft,#3C3327);
}
/* ---- callbacks ---- */
.rtr-callback {
padding:14px 0; border-top:1px solid var(--line,#EFE7D7);
}
.rtr-callback:first-child { border-top:none; }
.rtr-callback-head {
display:flex; justify-content:space-between; align-items:baseline; gap:14px;
}
.rtr-callback-text {
font-family:'Newsreader', serif; font-style:italic; font-size:15px;
color: var(--ink-soft,#3C3327); flex:1; line-height:1.4;
}
.rtr-callback-rating {
font-weight:600; font-variant-numeric: tabular-nums; white-space:nowrap;
color: var(--accent,#A8754E);
}
.rtr-callback-note {
font-size:13.5px; line-height:1.55; color: var(--text,#5A4F3F); margin-top:7px;
}
/* ---- breakdown ---- */
.rtr-grp { margin-bottom:26px; }
.rtr-grp:last-child { margin-bottom:0; }
.rtr-grp-name {
font-size:13px; font-weight:600; letter-spacing:.04em;
padding-bottom:8px; border-bottom:1px solid var(--line,#ECE3D3); margin-bottom:4px;
}
.rtr-grp-desc {
font-size:12.5px; color: var(--faint2,#A89B85); font-style:italic;
font-family:'Newsreader', serif; margin:6px 0 14px;
}
.rtr-grp-item {
display:flex; justify-content:space-between; align-items:baseline; gap:14px;
padding:7px 0; font-size:13.5px; line-height:1.45;
}
.rtr-grp-item-text { color: var(--text,#6B6051); flex:1; }
.rtr-grp-item-rating {
font-weight:600; font-variant-numeric: tabular-nums; white-space:nowrap;
}
/* ---- disclaimer ---- */
.rtr-disclaimer {
text-align:center; color: var(--faint2,#A89B85); font-size:12.5px; line-height:1.7;
max-width:54ch; margin:0 auto 32px;
}
.rtr-disclaimer p { margin:0 0 10px; }
.rtr-lifeline { color: var(--clay,#9A3B25); font-weight:500; }
.rtr-restart-wrap { text-align:center; }
/* hidden attribute must win over phase display:flex (phase switching) */
[hidden] { display: none !important; }