/* Design + motion spec: Fable 5.1, 2026-11-04. Motif: one ink dot on one line. */
:root{
  --bg:#F3F0E9;--surface:#FBFAF6;--ink:#1D1C1A;--ink-2:#4A4741;--muted:#8C877C;--line:#E2DDD2;--line-2:#D4CEC1;
  --accent:#8A6D3B;--accent-soft:#EFE7D8;--band:#DCD1BC;--band-edge:#C9BB9F;--on-ink:#F6F3EC;--danger:#9A4B3F;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","Noto Serif CJK SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Microsoft YaHei",sans-serif;
  --num:"Iowan Old Style","Palatino","Georgia",serif;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-settle:cubic-bezier(.3,0,.1,1);--ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141312;--surface:#1C1B19;--ink:#EEEAE1;--ink-2:#C9C3B7;--muted:#8F897D;--line:#2D2B27;--line-2:#3A3732;
    --accent:#C2A26A;--accent-soft:#2A2519;--band:#3B3428;--band-edge:#5A4E39;--on-ink:#141312;--danger:#D08575;--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--noise),var(--bg);background-color:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}

#app{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(32px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom))}
@media (max-width:360px){#app{padding-left:16px;padding-right:16px}}
.screen{flex:1;display:flex;flex-direction:column}
.screen.out{opacity:0;transition:opacity .2s ease}

/* Motion primitives: start state lives in keyframes only, so animation:none == final state. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fx-rise{animation:rise .42s var(--ease-out) both;animation-delay:var(--d,0ms)}
.fx-rise-s{animation:rise .36s var(--ease-out) both;animation-delay:var(--d,0ms)}
.fx-fade{animation:fade .24s var(--ease-out) both;animation-delay:var(--d,0ms)}

/* Progress: scaleX + two section ticks */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:5}
.progress i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-out)}
.progress b{position:absolute;top:0;width:1px;height:2px;background:var(--line-2);z-index:1}

.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--accent);text-transform:uppercase}
.display{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.3;letter-spacing:.02em}
.title{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.45;letter-spacing:.02em}
.meta{font-family:var(--num);font-size:13px;color:var(--muted);letter-spacing:.06em}
.muted{color:var(--muted)}
.mt12{margin-top:12px}
.small{font-size:12.5px;line-height:1.75}

/* Welcome emblem: rings draw from 12 o'clock, dot appears then travels to 3 o'clock */
.emblem{width:88px;height:88px;margin:8px 0 32px;color:var(--accent);overflow:visible}
.emblem .rings{transform:rotate(-90deg);transform-origin:44px 44px;transform-box:view-box}
.emblem circle{fill:none;stroke:currentColor;stroke-width:1}
.emblem .r1{stroke-dasharray:270.2;animation:draw1 .9s var(--ease-settle) both}
.emblem .r2{stroke-dasharray:182.3;opacity:.55;animation:draw2 .9s var(--ease-settle) .12s both}
.emblem .r3{stroke-dasharray:94.3;opacity:.3;animation:draw3 .9s var(--ease-settle) .24s both}
@keyframes draw1{from{stroke-dashoffset:270.2}to{stroke-dashoffset:0}}
@keyframes draw2{from{stroke-dashoffset:182.3}to{stroke-dashoffset:0}}
@keyframes draw3{from{stroke-dashoffset:94.3}to{stroke-dashoffset:0}}
.emblem .orbit{transform-origin:44px 44px;transform-box:view-box;animation:orbit .7s var(--ease-settle) .8s both}
.emblem .dot{fill:var(--ink);stroke:none;transform-origin:44px 15px;transform-box:view-box;animation:dotIn .24s var(--ease-out) .6s both}
@keyframes orbit{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@keyframes dotIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

.points{margin-top:32px;display:grid;gap:14px}
.points li{display:grid;grid-template-columns:28px 1fr;align-items:baseline;color:var(--ink-2)}
.points li span{font-family:var(--num);font-size:13px;color:var(--accent)}
.consent{margin-top:32px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.consent p{font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.check{display:flex;gap:12px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);cursor:pointer;font-size:14px}
.check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:1px solid var(--line-2);border-radius:6px;display:grid;place-items:center;flex:none;background:var(--bg);transition:background .2s,border-color .2s}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-ink);border-top:0;border-right:0;transform:translate(0,-1px) rotate(-45deg)}
.spacer{flex:1;min-height:24px}

.primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:999px;background:var(--ink);color:var(--on-ink);
  font-size:15.5px;letter-spacing:.12em;transition:background .32s,color .32s,transform .08s}
.primary:active{transform:scale(.985)}
.primary:disabled{background:var(--line);color:var(--muted)}
.text-btn{color:var(--muted);font-size:13px;padding:12px 4px;min-height:44px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-2)}
.foot{margin-top:16px;text-align:center}

/* Profile */
.field{margin-top:28px}
.field>.label{font-size:14px;margin-bottom:12px}
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.opt{min-height:46px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px;transition:background .12s,border-color .12s,color .12s,transform .08s}
.opt:active{transform:scale(.97)}
.types .opt{font-family:var(--num);letter-spacing:.1em;font-size:14.5px}
.opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .opt{padding:0 16px}
.wide{margin-top:8px;width:100%}
.scale5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale5 .opt{font-family:var(--num);font-size:16px}
.ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px}

/* Question */
.qtop{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:-8px}
.icon-btn{width:44px;height:44px;margin-left:-12px;display:grid;place-items:center;color:var(--ink-2);border-radius:50%}
.icon-btn:disabled{opacity:0}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.counter{font-family:var(--num);font-size:14px;letter-spacing:.08em;color:var(--muted);display:inline-flex;align-items:baseline;gap:.35em}
.num{display:inline-grid;overflow:hidden;color:var(--ink);line-height:1.3}
.num b{grid-area:1/1;font-weight:400;text-align:right}
.num.flip .old{animation:numOutUp .24s var(--ease-io) both}
.num.flip .new{animation:numInUp .24s var(--ease-io) both}
.num.flip.back .old{animation-name:numOutDown}
.num.flip.back .new{animation-name:numInDown}
@keyframes numOutUp{from{transform:none;opacity:1}to{transform:translateY(-100%);opacity:0}}
@keyframes numInUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes numOutDown{from{transform:none;opacity:1}to{transform:translateY(100%);opacity:0}}
@keyframes numInDown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.qbody{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:180px;padding:16px 0 24px}
.statement{font-family:var(--serif);font-weight:600;font-size:clamp(23px,6.6vw,28px);line-height:1.62;letter-spacing:.02em;text-wrap:pretty}
.q-in{animation:qIn .32s var(--ease-out) both}
.q-in.q-back{animation-name:qInBack}
@keyframes qIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes qInBack{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.answers{display:grid;gap:8px}
.a-in{animation:fade .2s ease-out .06s both}
.ans{display:flex;align-items:center;gap:16px;width:100%;min-height:54px;padding:0 20px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);text-align:left;font-size:15.5px;transition:background .12s,border-color .12s,color .12s,opacity .15s,transform .08s}
.ans:active{transform:scale(.985)}
.ans .dot{flex:none;width:22px;display:grid;place-items:center}
.ans .dot i{display:block;border-radius:50%;border:1.5px solid var(--line-2);transition:background .12s,border-color .12s}
.ans[data-v="1"] .dot i,.ans[data-v="5"] .dot i{width:18px;height:18px}
.ans[data-v="2"] .dot i,.ans[data-v="4"] .dot i{width:13px;height:13px}
.ans[data-v="3"] .dot i{width:8px;height:8px}
.ans[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.ans[aria-pressed="true"] .dot i{background:var(--on-ink);border-color:var(--on-ink)}
.ans.pop .dot i{animation:pop .16s var(--ease-out)}
@keyframes pop{50%{transform:scale(1.12)}}
.answers.chosen .ans:not([aria-pressed="true"]){opacity:.6}
@media (hover:hover){.ans:hover,.opt:hover{border-color:var(--line-2)}}
.qfoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;min-height:44px}
.flag{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding:10px 2px;min-height:44px}
.flag i{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-style:normal;font-size:9px;line-height:1;font-family:var(--num)}
.flag[aria-pressed="true"]{color:var(--accent)}
.flag[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent);color:var(--on-ink)}
.flag[aria-pressed="true"] i::before{content:"?"}
.hint{font-size:12px;color:var(--muted)}

/* Ring (break + submit transition) */
.center{text-align:center;align-items:center;justify-content:center}
.ring{width:132px;height:132px;margin:0 auto 32px;overflow:visible}
.ring circle.bg,.ring circle.fg{fill:none;stroke-width:1.5}
.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:66px 66px;transform-box:view-box;transition:stroke-dashoffset .9s var(--ease-settle)}
.ring .fg.fast{transition-duration:.6s}
.ring .tick{stroke:var(--line-2);stroke-width:1}
.ring .orbit{transform-origin:66px 66px;transform-box:view-box}
.ring .orbit.move{transition:transform .6s var(--ease-settle)}
.ring .rdot{fill:var(--ink)}
.ring .rdot.late{animation:fade .2s ease-out .9s both}

/* Feedback */
textarea{width:100%;min-height:128px;resize:vertical;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);line-height:1.75;font-size:15px}
textarea::placeholder{color:var(--muted)}
.status{margin-top:12px;font-size:13px;text-align:center;color:var(--muted);min-height:20px}
.status.err{color:var(--danger)}
.status .text-btn{color:inherit;padding:0 2px;min-height:0}

/* Result */
.result .title{margin-top:12px}
.note{margin-top:24px;padding:16px 18px;border-radius:14px;background:var(--accent-soft);font-size:13px;line-height:1.8;color:var(--ink-2)}
.axes{margin:8px -16px 0;padding:0 16px;overflow:hidden}
.axis{padding:24px 0;border-bottom:1px solid var(--line)}
.axis:last-child{border-bottom:0}
.axis-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.axis-head h3{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.04em}
.axis-head .lean{font-size:13px;color:var(--accent);white-space:nowrap}
.axis-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.track{position:relative;height:28px;margin-top:16px}
.track .line{position:absolute;left:0;right:0;top:13px;height:2px;border-radius:2px;background:var(--line);transform-origin:50% 50%}
.track .band{position:absolute;top:7px;height:14px;border-radius:7px;background:var(--band);box-shadow:inset 0 0 0 1px var(--band-edge)}
.track .mid{position:absolute;left:50%;top:6px;width:1px;height:16px;background:var(--line-2)}
.track .rail{position:absolute;inset:0;transition:transform .72s var(--ease-settle)}
.track .mark{position:absolute;left:50%;top:5px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--bg)}
.fx-line{animation:lineIn .48s var(--ease-out) both;animation-delay:var(--d,0ms)}
.reading{margin-top:12px;font-size:14px;line-height:1.8;color:var(--ink-2)}
.lede{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin-bottom:10px}
.poles{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin-top:6px}
.legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:16px}
.legend i{display:inline-block;width:26px;height:10px;border-radius:5px;background:var(--band);box-shadow:inset 0 0 0 1px var(--band-edge)}
.facts{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.facts div{background:var(--surface);padding:14px 16px}
.facts dl{margin:0}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{margin:2px 0 0;font-family:var(--num);font-size:17px;letter-spacing:.08em}
.result .small{font-size:13px;color:var(--ink-2)}
.stop .title{margin-top:24px}
.noscript{padding:40px 24px;text-align:center}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ans[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
  :root:not([data-theme="light"]) .ans[aria-pressed="true"] .dot i{background:var(--accent);border-color:var(--accent)}
  :root:not([data-theme="light"]) .opt[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}