:root {
  --paper:#f5f3ee; --ink:#1e241f; --muted:#6f756e; --line:#d9dbd3;
  --green:#335c4a; --green-2:#dce8e0; --lime:#dce96a; --white:#fff;
  --shadow:0 18px 60px rgba(24,35,27,.12); --radius:24px;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:#dfe3dc;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;scrollbar-width:none;-ms-overflow-style:none;scrollbar-gutter:auto}
html::-webkit-scrollbar,body::-webkit-scrollbar,#app::-webkit-scrollbar,.app-shell::-webkit-scrollbar{display:none;width:0;height:0}
button,input{font:inherit} button{color:inherit} .app-shell{width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
#app{min-height:100vh}.screen{min-height:100vh;padding:0 22px 108px;position:relative}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding-top:max(8px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.4px}.brand-mark{width:31px;height:31px;border-radius:10px;background:var(--green);color:white;display:grid;place-items:center;font-size:17px;transform:rotate(-3deg)}
.ghost-btn,.icon-btn{border:0;background:transparent;padding:8px;font-weight:650}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:20px}
.eyebrow{font-size:12px;letter-spacing:1.6px;color:var(--green);font-weight:800;text-transform:uppercase}.hero{padding:34px 0 26px}.hero h1{font-size:42px;line-height:1.12;letter-spacing:-2.2px;margin:11px 0 14px;font-weight:800}.hero p{font-size:16px;line-height:1.7;color:var(--muted);margin:0;max-width:340px}
.balance-hero{height:166px;margin:18px 0 18px;position:relative}.beam{position:absolute;left:50%;top:42px;width:210px;height:5px;background:var(--ink);border-radius:5px;transform:translateX(-50%) rotate(-3deg)}.beam:after{content:"";position:absolute;left:50%;top:-9px;width:20px;height:20px;border-radius:50%;background:var(--lime);border:4px solid var(--ink);transform:translateX(-50%)}.stem{position:absolute;width:4px;height:61px;background:var(--ink);left:50%;top:57px;transform:translateX(-50%)}.base{position:absolute;width:86px;height:5px;border-radius:5px;background:var(--ink);left:50%;top:115px;transform:translateX(-50%)}.pan{position:absolute;top:51px;width:88px;height:41px;border:3px solid var(--ink);border-top:0;border-radius:0 0 60px 60px}.pan.left{left:33px;transform:rotate(-3deg)}.pan.right{right:33px;transform:rotate(-3deg)}.custom-balance{position:absolute;z-index:4;left:50%;bottom:0;transform:translateX(-50%);border:1px solid var(--green);background:var(--green-2);color:var(--green);border-radius:99px;padding:9px 15px;white-space:nowrap;font-size:12px;font-weight:800;box-shadow:0 5px 16px rgba(51,92,74,.1)}.custom-balance:active{transform:translateX(-50%) scale(.96)}
.section-title{display:flex;align-items:flex-end;justify-content:space-between;margin:18px 0 14px}.section-title h2{font-size:18px;margin:0;letter-spacing:-.4px}.section-title span{font-size:12px;color:var(--muted)}.scroll-controls{display:flex;align-items:center;gap:5px}.scroll-controls button{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:#fff;display:grid;place-items:center;font-size:18px;line-height:1}.scroll-controls button:active{background:var(--green-2)}
.scenario-grid{display:flex;gap:10px;overflow-x:auto;margin:0 -22px;padding:2px 22px 12px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;touch-action:pan-x}.scenario-grid.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.scenario-grid::-webkit-scrollbar{display:none}.scenario{flex:0 0 136px;scroll-snap-align:start;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.68);padding:13px;text-align:left;min-height:94px;transition:.18s ease}.scenario:active,.scenario.selected{transform:scale(.97);border-color:var(--green);background:var(--green-2)}.scenario-icon{font-size:21px}.scenario-name{font-size:14px;font-weight:750;margin-top:13px}.scenario-example{font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flying-scenario{position:fixed;z-index:40;margin:0;pointer-events:none;box-shadow:0 12px 32px rgba(24,35,27,.18);will-change:transform,opacity}.pan.left{transform-origin:100% 0}.pan.right{transform-origin:0 0}.balance-hero.is-selecting .beam{animation:beam-tip .72s cubic-bezier(.2,.8,.25,1) .18s forwards}.balance-hero.is-selecting .pan.left{animation:pan-left-tip .72s cubic-bezier(.2,.8,.25,1) .18s forwards}.balance-hero.is-selecting .pan.right{animation:pan-right-tip .72s cubic-bezier(.2,.8,.25,1) .18s forwards}.balance-hero.is-selecting .stem{animation:stem-tip .72s cubic-bezier(.2,.8,.25,1) .18s forwards}.weight-token{position:absolute;z-index:3;left:54px;top:43px;width:48px;height:48px;border-radius:15px;background:var(--lime);border:3px solid var(--ink);display:grid;place-items:center;font-size:22px;animation:token-land .32s cubic-bezier(.2,1.5,.4,1) both}
@keyframes beam-tip{to{transform:translateX(-50%) rotate(-9deg)}}@keyframes pan-left-tip{to{transform:translateY(21px) rotate(-9deg)}}@keyframes pan-right-tip{to{transform:translateY(-1px) rotate(-9deg)}}@keyframes stem-tip{to{transform:translateX(-50%) rotate(-6deg);transform-origin:50% 100%}}@keyframes token-land{from{opacity:0;transform:translateY(-16px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}
.primary{width:100%;border:0;background:var(--green);color:#fff;border-radius:17px;min-height:56px;font-weight:760;font-size:16px;box-shadow:0 10px 25px rgba(51,92,74,.22)}.primary:disabled{background:#b8bdb6;box-shadow:none}.primary.lime{background:var(--lime);color:var(--ink);box-shadow:none}.secondary{width:100%;border:1px solid var(--line);background:transparent;border-radius:17px;min-height:52px;font-weight:700}.sticky-action{position:fixed;z-index:10;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));width:min(386px,calc(100% - 44px));transform:translateX(-50%);max-width:386px}
.setup h1,.question h1,.result h1,.history h1{font-size:32px;line-height:1.22;letter-spacing:-1.4px;margin:30px 0 10px}.lead{color:var(--muted);line-height:1.65;margin:0}.choice-inputs{margin-top:34px}.field-label{font-size:12px;font-weight:750;color:var(--muted);margin:0 0 8px 4px}.text-field{width:100%;border:1px solid var(--line);background:var(--white);border-radius:16px;padding:16px 17px;outline:none;font-size:16px;margin-bottom:16px}.text-field:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(51,92,74,.1)}.versus{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:1px;margin:-3px 0 10px}.versus:before,.versus:after{content:"";height:1px;background:var(--line);flex:1}
.progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);font-weight:700;margin-top:10px}.progress{height:6px;border-radius:6px;background:#e0e1dc;margin:11px 0 0;overflow:hidden}.progress>i{height:100%;display:block;background:var(--green);border-radius:6px;transition:width .35s ease}.question-card{margin-top:46px}.round-tag{display:inline-flex;gap:7px;align-items:center;background:var(--green-2);color:var(--green);border-radius:30px;padding:8px 12px;font-size:12px;font-weight:800}.round-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}.question h1{font-size:29px;margin-top:18px}.options{display:grid;gap:11px;margin-top:32px}.option{border:1px solid var(--line);background:var(--white);border-radius:18px;padding:18px;text-align:left;display:flex;align-items:center;gap:13px;line-height:1.45;font-weight:650;transition:.16s}.option:active{background:var(--green-2);border-color:var(--green);transform:scale(.985)}.option-letter{min-width:31px;height:31px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--muted)}.privacy-note{font-size:11px;color:#92978f;text-align:center;margin-top:24px}.back-link{border:0;background:transparent;padding:12px 0;color:var(--muted)}
.result-header{padding-top:12px}.result h1{margin-top:22px}.tendency{background:var(--green);color:white;border-radius:26px;padding:25px 22px;margin:26px 0;position:relative;overflow:hidden}.tendency:after{content:"⚖";position:absolute;font-size:110px;right:-10px;top:-20px;opacity:.08}.tendency-label{font-size:11px;opacity:.7;letter-spacing:1.2px;font-weight:800}.tendency-choice{font-size:28px;font-weight:800;margin:8px 0 16px;max-width:270px}.scale{height:8px;background:rgba(255,255,255,.22);border-radius:8px;position:relative}.scale span{display:block;height:100%;background:var(--lime);border-radius:8px}.scale-ends{display:flex;justify-content:space-between;font-size:11px;margin-top:8px;opacity:.75}.insight{background:#fff;border:1px solid var(--line);padding:21px;border-radius:21px;margin:14px 0 28px}.insight-label{font-size:11px;color:var(--green);font-weight:850;letter-spacing:1.2px}.insight p{font-size:16px;line-height:1.75;margin:10px 0 0;font-weight:580}.dimension{margin:19px 0}.dim-meta{display:flex;justify-content:space-between;font-weight:700;font-size:14px}.dim-meta small{color:var(--muted);font-weight:600}.dim-bar{height:7px;background:#e1e2de;border-radius:7px;margin-top:9px}.dim-bar span{height:100%;display:block;border-radius:7px;background:var(--green)}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}.result-actions .primary{min-height:52px}.disclaimer{font-size:11px;color:var(--muted);line-height:1.55;text-align:center;margin:25px 18px}
.feedback{background:#e9eadf;border-radius:20px;padding:20px;text-align:center;margin-top:26px}.feedback strong{display:block;margin-bottom:13px}.feedback-row{display:flex;gap:10px}.feedback-row button{flex:1;border:0;background:#fff;border-radius:14px;padding:12px;font-weight:700}.feedback-row button.active{background:var(--lime)}
.history-list{display:grid;gap:12px;margin-top:28px}.history-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:18px;text-align:left}.history-date{font-size:11px;color:var(--muted)}.history-title{font-size:17px;font-weight:750;margin:7px 0}.history-outcome{font-size:13px;color:var(--green);font-weight:700}.empty{text-align:center;color:var(--muted);padding:80px 20px}.empty-icon{font-size:48px;filter:grayscale(1);opacity:.5}.empty p{line-height:1.65}
.bottom-nav{position:fixed;z-index:9;left:50%;bottom:0;transform:translateX(-50%);width:min(430px,100%);height:calc(74px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(24,35,27,.06);display:flex}.nav-item{flex:1;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:700}.nav-item b{display:block;font-size:21px;line-height:26px}.nav-item.active{color:var(--green)}
.modal-backdrop{position:fixed;z-index:30;inset:0;background:rgba(20,28,22,.58);display:flex;align-items:flex-end;justify-content:center}.sheet{width:min(430px,100%);background:var(--paper);border-radius:28px 28px 0 0;padding:24px 22px calc(24px + env(safe-area-inset-bottom));animation:up .25s ease}.sheet-grip{width:40px;height:4px;border-radius:4px;background:#c5c7c1;margin:-10px auto 20px}.share-card{background:var(--green);color:#fff;border-radius:22px;padding:22px;min-height:240px}.share-card .brand-mark{background:var(--lime);color:var(--ink)}.share-quote{font-size:23px;line-height:1.45;font-weight:760;margin:28px 0}.share-dim{font-size:12px;color:var(--lime);font-weight:750}.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.toast{position:fixed;z-index:50;left:50%;bottom:105px;transform:translateX(-50%);background:#1f2721;color:white;padding:11px 17px;border-radius:30px;font-size:13px;white-space:nowrap;animation:fade 2s both}
@keyframes up{from{transform:translateY(100%)}}@keyframes fade{0%{opacity:0;transform:translate(-50%,10px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media (min-width:600px){.app-shell{min-height:100vh}.screen{min-height:100vh}}

/* ===== Art direction: warm editorial watercolor ===== */
:root{--paper:#f2efe6;--ink:#26312d;--muted:#727970;--line:#cec9ba;--green:#31584a;--green-2:#dde7df;--lime:#d2aa45;--blue:#a9c5d8;--terracotta:#c9784d;--white:#faf8f1}
html,body{background:#d9ddd5}.app-shell,.screen{background-color:var(--paper)}
.screen{background-image:radial-gradient(circle at 15% 8%,rgba(255,255,255,.58) 0 1px,transparent 1.5px),radial-gradient(circle at 82% 32%,rgba(49,88,74,.045) 0 1px,transparent 1.6px);background-size:9px 11px,13px 15px}
.topbar{height:66px}.brand{font-family:ui-serif,"Songti SC",serif;font-weight:800}.brand-mark{background:var(--green);border-radius:48% 52% 43% 57%/56% 43% 57% 44%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.ghost-btn{font-family:ui-serif,"Songti SC",serif}.eyebrow{font-family:"Bradley Hand","Comic Sans MS",cursive;color:var(--terracotta);letter-spacing:1.4px}
.hero{padding:22px 0 4px}.hero h1,.setup h1,.question h1,.result h1,.history h1{font-family:ui-serif,"Songti SC","STSong",serif;font-weight:700}.hero h1{font-size:38px;line-height:1.18;margin:10px 0 12px}.hero h1 em{font-style:normal;position:relative}.hero h1 em:after{content:"";position:absolute;left:1%;right:0;bottom:-5px;height:5px;border-bottom:2px solid var(--terracotta);border-radius:50%;transform:rotate(-1deg)}.hero p{font-size:15px;line-height:1.65}
.balance-hero{height:300px;margin:0 -6px 8px;overflow:visible}.balance-hero img{width:100%;height:270px;object-fit:contain;display:block;mix-blend-mode:multiply;filter:saturate(.92) contrast(.98);transition:transform .7s cubic-bezier(.2,.8,.25,1),filter .7s}.balance-hero.is-selecting img{transform:rotate(-1.5deg) scale(1.025);filter:saturate(1.05) contrast(1)}.drop-target{position:absolute;z-index:2;left:67%;top:57%;width:58px;height:34px;pointer-events:none}.custom-balance{bottom:3px;background:#f7f1df;border:1.5px solid var(--green);border-radius:48% 52% 46% 54%/55% 46% 54% 45%;padding:10px 17px;font-family:ui-serif,"Songti SC",serif;font-size:13px;box-shadow:3px 4px 0 rgba(49,88,74,.13)}
.weight-token{left:68%;top:55%;width:42px;height:42px;border:2px solid var(--ink);background:var(--lime);border-radius:52% 48% 44% 56%/45% 54% 46% 55%;font-size:19px}
.section-title{margin-top:14px}.section-title h2{font-family:ui-serif,"Songti SC",serif;font-size:17px}.scroll-controls button{border-color:var(--ink);border-width:1.2px;background:transparent;font-family:serif}.scenario-grid{padding-bottom:15px}.scenario{background:rgba(250,248,241,.72);border:1.2px solid var(--line);border-radius:48% 52% 46% 54%/12% 15% 10% 14%;box-shadow:2px 3px 0 rgba(38,49,45,.055)}.scenario:nth-child(2n){border-radius:52% 48% 54% 46%/14% 10% 15% 11%}.scenario:nth-child(1) .scenario-icon,.scenario:nth-child(4) .scenario-icon{background:rgba(169,197,216,.45)}.scenario:nth-child(2) .scenario-icon,.scenario:nth-child(5) .scenario-icon{background:rgba(201,120,77,.25)}.scenario:nth-child(3) .scenario-icon{background:rgba(210,170,69,.3)}.scenario-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:48% 52% 43% 57%/56% 43% 57% 44%;filter:grayscale(.25);font-size:18px}.scenario-name{font-family:ui-serif,"Songti SC",serif;margin-top:9px}.scenario-example{font-size:10px}.scenario.selected{background:#efe4c4;border-color:var(--green)}
.flying-scenario{background:#efe4c4!important;border-color:var(--green)!important}.primary{background:var(--green);border-radius:47% 53% 48% 52%/18% 21% 17% 20%;box-shadow:3px 5px 0 rgba(38,49,45,.16)}.secondary{border-color:var(--ink);border-radius:47% 53% 48% 52%/18% 21% 17% 20%}.primary.lime{background:var(--lime)}
.text-field{background:rgba(250,248,241,.78);border-width:1.2px;border-color:var(--line);border-radius:16px 19px 15px 18px}.versus{font-family:"Bradley Hand","Comic Sans MS",cursive;color:var(--terracotta)}
.round-tag{background:rgba(169,197,216,.4);color:var(--ink);border:1px solid rgba(38,49,45,.2);font-family:"Bradley Hand","Comic Sans MS",cursive}.round-tag:before{background:var(--terracotta)}.progress>i{background:var(--terracotta)}.option{background:rgba(250,248,241,.82);border:1.2px solid var(--line);border-radius:17px 20px 16px 19px;box-shadow:2px 3px 0 rgba(38,49,45,.04)}.option-letter{border-color:var(--terracotta);color:var(--terracotta);font-family:"Bradley Hand","Comic Sans MS",cursive}.option:active{background:#eee3ca}
.tendency{background:var(--green);border:1.5px solid var(--ink);border-radius:24px 29px 23px 27px;box-shadow:4px 5px 0 rgba(38,49,45,.12)}.tendency-label,.insight-label{font-family:"Bradley Hand","Comic Sans MS",cursive}.scale span{background:var(--lime)}.insight{background:rgba(250,248,241,.78);border:1.2px dashed var(--terracotta);border-radius:20px 24px 19px 23px}.insight-label{color:var(--terracotta)}.dim-bar span{background:var(--terracotta)}.feedback{background:rgba(169,197,216,.3);border:1px solid rgba(38,49,45,.12)}.feedback-row button.active{background:var(--lime)}
.history-card{background:rgba(250,248,241,.78);border-radius:20px 24px 19px 23px}.bottom-nav{background:var(--paper);border-top-color:var(--line);box-shadow:0 -8px 24px rgba(38,49,45,.08)}

/* Transparent illustration assets and watercolor navigation */
.brand-mark{background:#ead89b}.brand-mark img{display:block;width:27px;height:27px;object-fit:contain}
.balance-hero>img{mix-blend-mode:normal}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.nav-icon{width:32px;height:32px;display:grid;place-items:center;transition:transform .2s ease}
.nav-icon img{display:block;width:30px;height:30px;object-fit:contain;filter:grayscale(1);opacity:.48;transition:filter .2s ease,opacity .2s ease}
.nav-item.active .nav-icon{transform:translateY(-1px) rotate(-2deg)}
.nav-item.active .nav-icon img{filter:none;opacity:1}
.empty-illustration{display:block;width:94px;height:94px;object-fit:contain;margin:0 auto 10px;opacity:.62;filter:grayscale(.2)}
.tendency:after{content:"";width:112px;height:112px;right:-6px;top:-14px;background:url("assets/nav-scale.png") center/contain no-repeat;filter:grayscale(1) brightness(4);opacity:.08}

/* Pen-drawn component language */
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ghost-btn{position:relative}.ghost-btn:after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:3px;border-bottom:1.5px solid var(--terracotta);border-radius:50%;transform:rotate(-2deg);opacity:.75}
.icon-btn{border:1.5px solid var(--ink);border-radius:53% 47% 49% 51%/46% 55% 45% 54%;box-shadow:2px 2px 0 rgba(38,49,45,.1)}
.scenario,.option,.text-field,.history-card,.insight,.feedback,.sheet{border-color:var(--ink);border-width:1.35px;box-shadow:2px 3px 0 rgba(38,49,45,.09)}
.scenario:nth-child(odd){transform:rotate(-.35deg)}.scenario:nth-child(even){transform:rotate(.35deg)}
.scenario:active,.scenario.selected{transform:rotate(-.2deg) scale(.97);box-shadow:1px 1px 0 rgba(38,49,45,.08)}
.scenario-icon{border:1.2px solid rgba(38,49,45,.8);box-shadow:1px 1px 0 rgba(38,49,45,.1)}
.primary,.secondary{border:1.5px solid var(--ink);box-shadow:3px 4px 0 rgba(38,49,45,.18);border-radius:17px 21px 16px 20px;transition:transform .14s ease,box-shadow .14s ease}
.primary:active,.secondary:active{transform:translate(2px,2px) rotate(-.25deg);box-shadow:1px 1px 0 rgba(38,49,45,.14)}
.text-field{border-radius:15px 18px 14px 19px}.text-field:focus{border-color:var(--ink);box-shadow:2px 3px 0 rgba(38,49,45,.09),0 0 0 3px rgba(169,197,216,.28)}
.field-label,.progress-meta,.dim-meta small{font-family:"Bradley Hand","Comic Sans MS",cursive;letter-spacing:.35px}
.versus:before{transform:rotate(.8deg)}.versus:after{transform:rotate(-.8deg)}
.progress,.dim-bar{height:9px;background:rgba(250,248,241,.55);border:1.25px solid var(--ink);border-radius:52% 48% 46% 54%/55% 45% 55% 45%;padding:1px;overflow:hidden;box-shadow:1px 1px 0 rgba(38,49,45,.06)}
.progress>i,.dim-bar span{border-radius:52% 48% 47% 53%/55% 48% 52% 45%}
.option{border-radius:16px 20px 15px 19px}.option:nth-child(even){border-radius:20px 16px 19px 15px;transform:rotate(.15deg)}.option:active{transform:translate(1px,1px) rotate(-.2deg);box-shadow:none}
.option-letter{border:1.4px solid var(--ink);border-radius:54% 46% 51% 49%/47% 55% 45% 53%;box-shadow:1px 1px 0 rgba(38,49,45,.08)}
.round-tag{border:1.3px solid var(--ink);border-radius:48% 52% 46% 54%/52% 47% 53% 48%;box-shadow:1px 2px 0 rgba(38,49,45,.08)}
.tendency{border-width:1.6px;box-shadow:4px 5px 0 rgba(38,49,45,.18);border-radius:23px 29px 21px 27px}
.insight{border-style:solid;position:relative}.insight:before{content:"";position:absolute;inset:4px;border:1px dashed rgba(201,120,77,.65);border-radius:17px 21px 16px 20px;pointer-events:none}
.feedback{border-radius:19px 23px 18px 22px}.feedback-row button{border:1.25px solid var(--ink);border-radius:13px 16px 12px 15px;box-shadow:1px 2px 0 rgba(38,49,45,.09)}
.history-card:nth-child(odd){transform:rotate(-.2deg)}.history-card:nth-child(even){transform:rotate(.2deg)}
.bottom-nav{border-top:1.5px solid var(--ink);box-shadow:0 -5px 0 rgba(38,49,45,.035)}.bottom-nav:before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid rgba(38,49,45,.18);transform:rotate(-.15deg)}
.nav-item{position:relative}.nav-item.active:after{content:"";position:absolute;bottom:7px;width:42px;height:3px;border-bottom:1.5px solid var(--terracotta);border-radius:50%;transform:rotate(-2deg)}

/* A little naive charm: wonky, warm, and less report-like */
.home-screen .hero{position:relative;padding-top:30px}.hero-sticker{display:inline-block;background:var(--lime);border:1.4px solid var(--ink);border-radius:52% 48% 46% 54%/55% 46% 54% 45%;padding:6px 11px;margin-bottom:11px;font-family:"Bradley Hand","Comic Sans MS",cursive;font-size:11px;font-weight:800;transform:rotate(-3deg);box-shadow:2px 2px 0 rgba(38,49,45,.12)}
.home-screen .hero h1{display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;font-size:39px;font-weight:850;letter-spacing:-2.4px;transform:rotate(-.8deg);margin:3px 0 9px}.home-screen .hero h1:after{content:"";display:block;width:72%;height:5px;margin:0 auto;border-bottom:2px solid var(--terracotta);border-radius:50%;transform:rotate(1.5deg)}
.home-screen .hero p{display:table;background:rgba(169,197,216,.28);border-radius:7px 12px 8px 11px;padding:5px 9px;margin-left:-4px;transform:rotate(.5deg);color:var(--ink)}
.balance-hero:before{content:"⌁⌁";position:absolute;z-index:2;left:4px;top:35px;color:var(--terracotta);font-size:25px;letter-spacing:-8px;transform:rotate(18deg);opacity:.72}.balance-hero:after{content:"·  ·  ·";position:absolute;z-index:2;right:12px;top:18px;color:var(--lime);font-size:27px;letter-spacing:3px;transform:rotate(-13deg);text-shadow:0 0 0 var(--ink)}
.custom-balance{background:var(--lime);color:var(--ink);border-width:1.6px;box-shadow:3px 4px 0 rgba(38,49,45,.16);transform:translateX(-50%) rotate(-1.2deg)}.custom-balance:active{transform:translateX(-50%) translate(2px,2px) rotate(-1.2deg);box-shadow:1px 1px 0 rgba(38,49,45,.12)}
.playful-title h2{font-size:19px;transform:rotate(-.6deg)}.playful-title span{font-family:"Bradley Hand","Comic Sans MS",cursive;color:var(--terracotta);transform:rotate(2deg)}
.scenario{min-height:101px}.scenario:nth-child(1){background:#e0ebee}.scenario:nth-child(2){background:#f1ddcf}.scenario:nth-child(3){background:#efe5b9}.scenario:nth-child(4){background:#dce8df}.scenario:nth-child(5){background:#e8dfec}.scenario:nth-child(odd){margin-top:3px}.scenario:nth-child(even){margin-bottom:3px}
.scenario-name{font-size:15px}.scenario-example{color:#5f665f}.question-card{position:relative}.question-card:after{content:"?";position:absolute;z-index:-1;right:-7px;top:-45px;color:rgba(210,170,69,.22);font-family:"Bradley Hand","Comic Sans MS",cursive;font-size:92px;font-weight:900;transform:rotate(12deg)}
.round-tag{transform:rotate(-1.5deg);background:#e7d799}.option:nth-child(1){background:rgba(169,197,216,.18)}.option:nth-child(2){background:rgba(201,120,77,.12)}.option:nth-child(3){background:rgba(210,170,69,.13)}
.tendency{transform:rotate(-.35deg)}.insight{transform:rotate(.2deg)}.insight-label{text-transform:none;font-size:12px}.feedback{transform:rotate(-.25deg)}