:root{color-scheme:light dark;--bg: #fff8f0;--surface: #ffffff;--surface-2: #fdf2e6;--line: #e8dccd;--ink: #2a1f16;--ink-2: #6b5a49;--ink-3: #9a8571;--amber: #c96a1e;--amber-bg: #fdf0e0;--teal: #0f8f78;--teal-bg: #e2f4ef;--coral: #cf4733;--coral-bg: #fdeae6;--violet: #6251bd;--violet-bg: #eeebfa;--primary: var(--teal);--primary-bg: var(--teal-bg);--on-primary: #ffffff;--warn: #b03a0b;--warn-bg: #ffedd5;--primary-edge: #0a6b5a;--coral-edge: #a73522;--zone-amber: var(--amber-bg);--zone-teal: var(--teal-bg);--zone-violet: var(--violet-bg);--road: var(--line);--block: #f6ead9;--pin: var(--surface);--pin-edge: var(--line);--pin-ink: var(--ink-3);--s1: .25rem;--s2: .5rem;--s3: .75rem;--s4: 1rem;--s5: 1.25rem;--s6: 1.5rem;--s8: 2rem;--s10: 2.5rem;--font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "Cascadia Mono", Menlo, monospace;--t-hero: clamp(2.25rem, 9vw, 3.25rem);--t-title: 1.375rem;--t-lead: 1.0625rem;--t-body: 1rem;--t-note: .875rem;--t-micro: .75rem;--ease: cubic-bezier(.22, 1, .36, 1);--d-tap: .16s;--d-screen: .22s;--radius: 20px;--radius-sm: 12px;--tap: 56px;--lift: 0 1px 2px rgba(42, 31, 22, .06), 0 4px 12px rgba(42, 31, 22, .05)}@media (prefers-color-scheme: dark){:root{--bg: #17120d;--surface: #221b14;--surface-2: #2c231a;--line: #3b3025;--ink: #f7efe4;--ink-2: #c4b3a0;--ink-3: #93826f;--amber: #f0a055;--amber-bg: #3a2817;--teal: #3fc4a8;--teal-bg: #15332c;--coral: #f07a66;--coral-bg: #3a211c;--violet: #9b8df0;--violet-bg: #272045;--on-primary: #10211d;--warn: #fb923c;--warn-bg: #3a2414;--primary-edge: #2a8f7a;--coral-edge: #b35847;--zone-amber: #2b1c11;--zone-teal: #142423;--zone-violet: #1e192e;--road: #46382a;--block: #352413;--pin: #574836;--pin-edge: #6b5a44;--pin-ink: #e3d4bf;--lift: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25)}}@media (prefers-reduced-motion: reduce){:root{--d-tap: 1ms;--d-screen: 80ms}}:root[data-reduce-motion=true]{--d-tap: 1ms;--d-screen: 80ms}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:var(--primary);text-underline-offset:2px}:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}.screen{display:grid;grid-template-rows:auto 1fr auto;height:100%;max-width:34rem;margin:0 auto;padding:max(var(--s3),env(safe-area-inset-top)) var(--s4) max(var(--s4),env(safe-area-inset-bottom))}.bar{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap)}.bar__title{font-size:var(--t-title);font-weight:650;letter-spacing:-.01em;margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar__meta{font-size:var(--t-note);font-weight:650;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}.icon-btn{display:grid;place-items:center;width:var(--tap);height:var(--tap);margin-left:calc(var(--s2) * -1);border-radius:50%;color:var(--ink);flex:none;transition:background var(--d-tap) var(--ease)}.icon-btn:active{background:var(--surface-2)}.body{display:flex;flex-direction:column;gap:var(--s3);min-height:0;overflow-y:auto;padding:var(--s2) 0 var(--s4);-webkit-overflow-scrolling:touch}.body--center{justify-content:center;overflow:visible}.foot{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3)}.hero{font-family:var(--font-display);font-size:var(--t-hero);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}.en{font-family:var(--font-display);line-height:1.38}.lead{font-size:var(--t-lead);line-height:1.45;margin:0}.note{font-size:var(--t-note);color:var(--ink-2);margin:0;line-height:1.5}.micro{font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0}.vi{font-size:var(--t-lead);color:var(--ink-2);margin:0}.card{display:block;width:100%;text-align:left;background:var(--surface);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--lift);transition:transform var(--d-tap) var(--ease)}button.card:active{transform:scale(.985)}.tile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);min-height:92px}.tile__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none}.tile__name{display:block;font-size:var(--t-lead);font-weight:650;margin:0}.tile__sub{display:block;font-size:var(--t-note);color:var(--ink-2);margin:2px 0 0;line-height:1.4}.tile__go{color:var(--ink-3)}.city{position:relative;height:100%;overflow:hidden}.city__scroll{height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}.city__scroll::-webkit-scrollbar{display:none}.city__canvas{position:relative}.city__ink{position:absolute;inset:0}.zone{fill:var(--surface-2);stroke-width:1.5;stroke-opacity:.3}.zone--amber{fill:var(--zone-amber);stroke:var(--amber)}.zone--teal{fill:var(--zone-teal);stroke:var(--teal)}.zone--violet{fill:var(--zone-violet);stroke:var(--violet)}.block{fill:var(--block)}.zone__name{position:absolute;left:34px;margin:0;font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.road{fill:none;stroke:var(--road);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}.road--walked{stroke:var(--primary);stroke-width:10;opacity:.5}.place{position:absolute;width:112px;margin-left:-56px;margin-top:-32px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.place--amber{--c: var(--amber);--c-bg: var(--amber-bg)}.place--teal{--c: var(--teal);--c-bg: var(--teal-bg)}.place--violet{--c: var(--violet);--c-bg: var(--violet-bg)}.place__pin{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:var(--pin);color:var(--pin-ink);box-shadow:inset 0 0 0 2px var(--pin-edge),var(--lift);transition:transform var(--d-tap) var(--ease),background var(--d-screen) var(--ease),color var(--d-screen) var(--ease)}.place:active .place__pin{transform:scale(.92)}.place__label{font-size:var(--t-micro);line-height:1.25;color:var(--ink-2)}.place--touched .place__pin{background:var(--c-bg);color:var(--c);box-shadow:inset 0 0 0 2px var(--c),var(--lift)}.place--done .place__pin{background:var(--c);color:var(--bg);box-shadow:var(--lift)}.place--done .place__label{color:var(--ink);font-weight:650}.place--current .place__pin{background:var(--pin);color:var(--c);box-shadow:inset 0 0 0 3px var(--c),var(--lift)}.place--current .place__label{color:var(--ink);font-weight:700}.place--current:before{content:"bạn ở đây";position:absolute;top:-22px;left:50%;transform:translate(-50%);white-space:nowrap;font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);background:var(--c);padding:3px 9px;border-radius:999px}.place--current:after{content:"";position:absolute;top:0;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:22px;border:2px solid var(--c);pointer-events:none;animation:ping 2.4s var(--ease) infinite}@keyframes ping{0%{transform:scale(1);opacity:.55}70%,to{transform:scale(1.45);opacity:0}}.place--home{margin-top:-36px}.place--home .place__pin{width:72px;height:72px;border-radius:26px;background:var(--primary);color:var(--on-primary);box-shadow:var(--lift)}.place--home .place__label{color:var(--ink);font-weight:700}.place--alert .place__pin:after{content:"";position:absolute;top:-3px;right:-3px;width:15px;height:15px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px var(--bg)}.dock{position:absolute;left:0;right:0;bottom:max(var(--s4),env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:0 var(--s4);pointer-events:none}.dock>*{pointer-events:auto}.dock__home{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;flex:none;background:var(--pin);color:var(--ink);box-shadow:inset 0 -4px #00000029,var(--lift);transition:transform var(--d-tap) var(--ease),box-shadow var(--d-tap) var(--ease)}.dock__home:active{transform:translateY(3px);box-shadow:inset 0 3px #00000029,var(--lift)}.dock__dot{position:absolute;top:9px;right:9px;width:11px;height:11px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px var(--pin)}.dock__go{display:flex;align-items:center;gap:var(--s3);min-height:56px;min-width:0;padding:0 var(--s4) 0 var(--s5);border-radius:999px;background:var(--primary);color:var(--on-primary);font-weight:650;box-shadow:0 4px 0 var(--primary-edge),var(--lift);transition:transform var(--d-tap) var(--ease),box-shadow var(--d-tap) var(--ease)}.dock__go:active{transform:translateY(4px);box-shadow:0 0 0 var(--primary-edge),var(--lift)}.dock__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sheet-wrap{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;background:#00000059;animation:fade var(--d-screen) var(--ease) both}@keyframes fade{0%{opacity:0}to{opacity:1}}.sheet{width:100%;max-width:34rem;margin:0 auto;max-height:90%;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s3);background:var(--bg);border-radius:28px 28px 0 0;padding:var(--s3) var(--s4) max(var(--s5),env(safe-area-inset-bottom));animation:rise var(--d-screen) var(--ease) both}@keyframes rise{0%{transform:translateY(16%)}to{transform:none}}.sheet__grip{flex:none;align-self:center;width:40px;height:4px;border-radius:2px;margin-bottom:var(--s1);background:var(--line)}.today-card{background:var(--surface-2);box-shadow:none}.door{display:flex;align-items:center;gap:var(--s4);width:100%;padding:var(--s3) var(--s4);border-radius:var(--radius-sm);background:var(--surface);text-align:left;box-shadow:var(--lift);transition:transform var(--d-tap) var(--ease)}.door:active{transform:scale(.985)}.door__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;flex:none}.btn{--face: var(--surface-2);--edge: var(--line);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:var(--tap);padding:0 var(--s5);border-radius:16px;background:var(--face);color:var(--ink);font-size:var(--t-body);font-weight:650;text-decoration:none;white-space:nowrap;box-shadow:0 4px 0 var(--edge);transition:transform var(--d-tap) var(--ease),box-shadow var(--d-tap) var(--ease),background var(--d-tap) var(--ease),opacity var(--d-tap) var(--ease)}.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--edge)}.btn[disabled]{opacity:.45;pointer-events:none}.btn--primary{--face: var(--primary);--edge: var(--primary-edge);color:var(--on-primary)}.btn--ghost{--face: none;--edge: transparent;background:none;box-shadow:none;color:var(--ink-2);font-weight:600}.btn--ghost:active{transform:translateY(2px)}.btn--compact{min-height:44px;padding:0 var(--s3);font-size:var(--t-note);border-radius:13px}.row{display:flex;gap:var(--s2)}.row>*{flex:1}.mic{width:84px;height:84px;border-radius:50%;align-self:center;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:inset 0 -6px #00000038,0 5px 12px #2a1f1629;transition:transform var(--d-tap) var(--ease),box-shadow var(--d-tap) var(--ease)}.mic:active{transform:translateY(4px);box-shadow:inset 0 4px #00000038,0 2px 6px #2a1f1624}.mic[data-recording=true]{animation:pulse 1.5s var(--ease) infinite}.mic[disabled]{opacity:.45;pointer-events:none}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}.grades .btn{flex-direction:column;gap:0;padding:var(--s2);min-height:64px;font-size:var(--t-note)}.grades .btn small{font-size:var(--t-micro);font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}.grades .btn--primary small{color:color-mix(in srgb,var(--on-primary) 75%,transparent)}.wave{display:block;width:100%;height:52px;overflow:visible}.wave path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round}.wave[data-idle=true] path{stroke:var(--line)}.scored{line-height:1.5}.scored .ruby__w{padding:2px 5px}.scored .ruby__w[data-s=ok]{color:var(--ink)}.scored .ruby__w[data-s=close]{color:var(--teal);background:var(--teal-bg)}.scored .ruby__w[data-s=wrong]{color:var(--warn);background:var(--warn-bg)}.scored .ruby__w[data-s=missing]{color:var(--ink-3)}.scored .ruby__w[data-s=missing]>span:first-child{text-decoration:line-through}.bar-track{height:8px;background:var(--line);border-radius:999px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:999px;background:var(--primary);transform-origin:left;transition:transform var(--d-screen) var(--ease)}.turn{max-width:88%;padding:var(--s3) var(--s4);border-radius:var(--radius)}.turn--them{background:var(--surface);border-bottom-left-radius:6px;align-self:flex-start;box-shadow:var(--lift)}.turn--you{background:var(--primary-bg);border-bottom-right-radius:6px;align-self:flex-end}input[type=text],input[type=password]{width:100%;min-height:var(--tap);padding:0 var(--s4);border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit}input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--primary)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--tap);background:none;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--primary);border:3px solid var(--surface);box-shadow:var(--lift)}input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}input[type=range]::-moz-range-thumb{width:26px;height:26px;border:3px solid var(--surface);border-radius:50%;background:var(--primary)}.group{background:var(--surface);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--lift);display:flex;flex-direction:column;gap:var(--s3)}.seg{display:grid;gap:var(--s1);padding:var(--s1);background:var(--surface-2);border-radius:var(--radius-sm)}.seg button{min-height:44px;border-radius:9px;font-size:var(--t-note);font-weight:650;color:var(--ink-2);transition:background var(--d-tap) var(--ease),color var(--d-tap) var(--ease)}.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--line);transform:translateY(-1px)}.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);padding:var(--s8) var(--s4) var(--s4)}.empty__art{display:grid;place-items:center;width:88px;height:88px;border-radius:28px;background:var(--primary-bg);color:var(--primary)}@keyframes slide-in{0%{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}.enter{animation:slide-in var(--d-screen) var(--ease) both}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-screen);animation-timing-function:var(--ease)}.node{position:absolute;top:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.125rem;font-weight:700;background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--line),var(--lift);transition:transform var(--d-tap) var(--ease);animation:node-in .38s var(--ease) both}.node:active{transform:scale(.9)}.node[data-state=done]{background:var(--node-colour);color:var(--surface);box-shadow:var(--lift)}.node[data-state=started]{background:var(--node-bg);color:var(--node-colour);box-shadow:inset 0 0 0 3px var(--node-colour),var(--lift)}.node[data-current=true]{background:var(--node-colour);color:var(--surface);transform:scale(1.1);box-shadow:0 6px 18px color-mix(in srgb,var(--node-colour) 45%,transparent)}.node[data-current=true]:active{transform:scale(1)}.node[data-current=true]:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--node-colour);animation:halo 2.2s var(--ease) infinite}@keyframes node-in{0%{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1}}@keyframes halo{0%,to{opacity:.6;transform:scale(1)}50%{opacity:0;transform:scale(1.3)}}.node__label{position:absolute;top:82px;width:190px;text-align:center;font-size:var(--t-note);font-weight:650;color:var(--ink);line-height:1.3;pointer-events:none;animation:slide-in var(--d-screen) var(--ease) both;animation-delay:.22s}.stagger>*{animation:slide-in var(--d-screen) var(--ease) both}.stagger>*:nth-child(1){animation-delay:0ms}.stagger>*:nth-child(2){animation-delay:55ms}.stagger>*:nth-child(3){animation-delay:.11s}.stagger>*:nth-child(4){animation-delay:165ms}.stagger>*:nth-child(5){animation-delay:.22s}@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}to{transform:scale(1)}}.pop{animation:pop .52s var(--ease) both}@media (prefers-reduced-motion: reduce){.node,.stagger>*,.pop{animation:none}.node[data-current=true]:after{animation:none;opacity:.5}}@keyframes spark{0%{transform:translate(0) scale(0);opacity:1}45%{transform:translate(calc(var(--fx) * .75),calc(var(--fy) * .75)) scale(1);opacity:1}to{transform:translate(var(--fx),var(--fy)) scale(.2);opacity:0}}@media (prefers-reduced-motion: reduce){@keyframes spark{0%,to{opacity:0}}}.ruby{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px .3em;margin:0;flex:1;min-width:0}.ruby--hero{font-family:var(--font-display);font-size:var(--t-hero);font-weight:400;line-height:1.08;letter-spacing:-.015em}.ruby--lead{font-size:var(--t-lead);line-height:1.3}.ruby__w{display:flex;flex-direction:column;align-items:center;font:inherit;letter-spacing:inherit;padding:1px 3px;border-radius:8px;transition:background var(--d-tap) var(--ease)}.ruby__w:active{background:var(--primary-bg)}.ruby__ipa{font-family:var(--font-mono);font-size:.6875rem;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink-2);white-space:nowrap}.say-row{display:flex;align-items:flex-start;gap:var(--s2)}.say-row__all{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-top:2px;border-radius:50%;color:var(--primary);transition:background var(--d-tap) var(--ease),transform var(--d-tap) var(--ease)}.say-row__all:active{background:var(--primary-bg);transform:scale(.9)}.wgroup{display:flex;flex-direction:column;gap:6px}.wgroup__head{display:flex;align-items:center;gap:var(--s2);margin:var(--s4) 0 2px;font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}.word{background:var(--surface);border-radius:var(--radius-sm);transition:box-shadow var(--d-tap) var(--ease)}.word--open{box-shadow:var(--lift)}.word__head{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s3) var(--s4);text-align:left}.word__en{flex:1;min-width:0;display:flex;flex-direction:column}.word__en>.en{font-size:var(--t-lead);font-weight:600}.word__ipa{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--ink-2)}.word__vi{max-width:46%;font-size:var(--t-note);color:var(--ink-2);text-align:right}.word__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal)}.word__body{display:flex;flex-direction:column;gap:var(--s3);padding:0 var(--s4) var(--s4)}.word__say{display:inline-flex;align-items:center;gap:var(--s2);align-self:flex-start;padding:8px 16px;border-radius:999px;background:var(--primary-bg);color:var(--primary);font-size:var(--t-note);font-weight:650;transition:transform var(--d-tap) var(--ease)}.word__say:active{transform:scale(.96)}.word__ex{display:flex;flex-direction:column;gap:4px;padding:var(--s3);border-radius:var(--radius-sm);background:var(--surface-2)}.steps{display:block;overflow:visible}.steps__road{fill:none;stroke:var(--line);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.steps__road--done{stroke:var(--primary);opacity:.55}.steps__dot{fill:var(--bg);stroke:var(--line);stroke-width:2;transition:fill var(--d-screen) var(--ease)}.steps__dot--done{fill:var(--primary);stroke:var(--primary)}.steps__dot--at{fill:var(--bg);stroke:var(--primary);stroke-width:3}.deck{position:relative;width:100%}.deck__edge{position:absolute;left:50%;bottom:-9px;height:22px;border-radius:0 0 var(--radius) var(--radius);background:var(--surface);box-shadow:var(--lift);transform:translate(-50%);pointer-events:none}.deck__edge--near{width:92%;z-index:1}.deck__edge--far{width:84%;bottom:-17px;opacity:.7}.deck__card{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5) var(--s4);border-radius:var(--radius);background:var(--surface);box-shadow:var(--lift);user-select:none;-webkit-user-select:none;animation:deal var(--d-screen) var(--ease) both}@keyframes deal{0%{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}.deck__ask{text-align:center;margin:0}.reveal{display:flex;flex-direction:column;gap:var(--s3);animation:drawer var(--d-screen) var(--ease) both}@keyframes drawer{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}.go-row{display:flex;align-items:center;justify-content:flex-end;gap:var(--s4)}.go-row .micro{margin:0}.go-btn{display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:50%;background:var(--primary);color:var(--on-primary);box-shadow:inset 0 -5px #0000002e,var(--lift);transition:transform var(--d-tap) var(--ease),box-shadow var(--d-tap) var(--ease)}.go-btn:active{transform:translateY(4px);box-shadow:inset 0 4px #0000002e,var(--lift)}.welcome__body{align-items:flex-start;text-align:left;gap:var(--s4)}.welcome__mark{display:grid;place-items:center;width:84px;height:84px;border-radius:28px;background:var(--primary);color:var(--on-primary);box-shadow:var(--lift)}.welcome__dots{display:flex;gap:6px;margin-left:var(--s1)}.welcome__dots i{width:22px;height:5px;border-radius:999px;background:var(--line);transition:background var(--d-screen) var(--ease),width var(--d-screen) var(--ease)}.welcome__dots i.is-done{background:var(--primary);opacity:.5}.welcome__dots i.is-at{width:34px;background:var(--primary)}.welcome__paces{display:flex;flex-direction:column;gap:var(--s3);width:100%}.pace{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--s4);align-items:center;width:100%;padding:var(--s3) var(--s4);border-radius:var(--radius-sm);background:var(--surface);text-align:left;box-shadow:0 3px 0 var(--line);transition:transform var(--d-tap) var(--ease),box-shadow var(--d-tap) var(--ease)}.pace:active{transform:translateY(3px);box-shadow:0 0 0 var(--line)}.pace--on{background:var(--primary-bg);box-shadow:0 3px 0 var(--primary),inset 0 0 0 2px var(--primary)}.pace__n{grid-row:1 / 3;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}.pace__label{font-size:var(--t-body);font-weight:650}.pace__note{font-size:var(--t-note);color:var(--ink-2)}.risk{display:block;width:100%;padding:var(--s3) var(--s4);border-radius:var(--radius-sm);background:var(--warn-bg);text-align:left;box-shadow:inset 0 0 0 2px var(--warn);transition:transform var(--d-tap) var(--ease)}.risk:active{transform:scale(.985)}.risk__name{display:block;font-size:var(--t-body);font-weight:650;color:var(--warn)}.risk__note{display:block;margin-top:2px;font-size:var(--t-note);color:var(--ink-2);line-height:1.4}