@font-face {
font-family: "Google Sans";
src: url("/static/gsans-latin.woff2?v=0feef3235236") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122,
U+2190-2199, U+2212;
}
@font-face {
font-family: "Google Sans";
src: url("/static/gsans-cyrillic.woff2?v=032125d892f3") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}
@font-face {
font-family: "Manrope";
src: url("/static/manrope.ttf?v=3ae11c49db04") format("truetype");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: light;
--bg: #ffffff;
--ink: #1d1d1f;
--ink-2: #6e6e73;
--ink-3: #888889;
--ink-4: #dbdbdb;
--well: #f4f4f4;
--well-2: #ebebeb;
--chip: #f0f0f0;
--line: #e4e4e4;
--rule: #dfdfdf;
--track: #e4e4e4;
--btn: #1d1d1f;
--btn-ink: #ffffff;
--btn-off: #f4f4f4;
--btn-off-ink: #6e6e73;
--dark-card: #262629;
--dark-card-2: #262626;
--dark-edge: transparent;
--dark-ink: #ffffff;
--dark-ink-2: rgba(255, 255, 255, 0.62);
--dark-pill: rgba(255, 255, 255, 0.16);
--float: #f2f2f2;
--float-on: #dfdfdf;
--float-puck: #ffffff;
--float-puck-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.07);
--float-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
--float-edge: transparent;
--sheet-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
--scrim: rgba(0, 0, 0, 0.32);
--good: #00bc7d;
--warn: #fdc700;
--bad: #d83a3c;
--blue: #3392ff;
--blue-deep: #0078e5;
--link: #1d1d1f;
--accent: #ad46ff;
--accent-text: #8200db;
--accent-ink: #ffffff;
--accent-soft: rgba(173, 70, 255, 0.12);
--hero-a: #262629;
--hero-b: #262629;
--ib-violet: #c27aff;
--ib-blue: #3392ff;
--ib-green: #00d492;
--ib-teal: #00d5be;
--ib-amber: #fdc700;
--ib-pink: #fb64b6;
--ib-sky: #00bcff;
--ib-gray: #a1a1a1;
--ib-ink: #1d1d1f;
--ib-red: #ff6467;
--r-btn: 14px;
--r-row: 14px;
--r-group: 18px;
--r-card: 20px;
--r-hero: 20px;
--gutter: 20px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--spring: cubic-bezier(0.32, 1.32, 0.42, 1);
--safe-b: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
--tabs-h: 64px;
--font: "Google Sans", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--chart-grid: rgba(29, 29, 31, 0.07);
--chart-axis: #6e6e73;
--c-f1: #e4e4e4;
--c-f2: #c9c9cc;
--c-f3: #a1a1a1;
--c-f4: #6e6e73;
--c-f5: #1d1d1f;
--c-sun-a: #fdc700;
--c-sun-b: #ffdf20;
--z-evening: #6e6e73;
--z-room: #a1a1a1;
--z-window: #fdc700;
--z-outdoor: #ffdf20;
--skel: #f4f4f4;
--skel-hi: #ebebeb;
--text: var(--ink);
--muted: var(--ink-2);
--faint: var(--ink-3);
--surface: var(--well);
--surface-2: var(--well-2);
--card: var(--well);
--btn-2: var(--chip);
--task: var(--dark-card);
--task-2: var(--dark-card-2);
--task-ink: var(--dark-ink);
--task-muted: var(--dark-ink-2);
--chip-dark: var(--dark-card);
--hairline: var(--line);
--amber: var(--warn);
--amber-tint: rgba(253, 199, 0, 0.16);
--pink: #f6339a;
--emerald: #00bc7d;
--c-light: #fdc700;
--c-dim: #f6339a;
--c-sleep-a: var(--accent);
--c-sleep-b: var(--accent);
--c-track: var(--track);
--c-now: var(--ink);
--chart-bar: var(--accent);
--shadow-pop: var(--float-shadow);
}
:root[data-theme="dark"],
:root[data-island] {
color-scheme: dark;
--bg: #000000;
--ink: #ffffff;
--ink-2: #bdbdbd;
--ink-3: #999999;
--ink-4: #5c5c5c;
--well: #333333;
--well-2: #404040;
--chip: #333333;
--line: #474747;
--rule: #333333;
--track: #474747;
--btn: #ffffff;
--btn-ink: #000000;
--btn-off: #333333;
--btn-off-ink: #999999;
--dark-card: #333333;
--dark-card-2: #404040;
--dark-edge: #5c5c5c;
--dark-pill: rgba(255, 255, 255, 0.16);
--float: #333333;
--float-on: #5c5c5c;
--float-puck: #5c5c5c;
--float-puck-shadow: none;
--float-shadow: 0 17px 55px rgba(0, 0, 0, 0.35);
--sheet-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
--scrim: rgba(0, 0, 0, 0.6);
--bad: #ff8a80;
--link: #ffffff;
--accent-text: #c27aff;
--ib-ink: #5c5c5c;
--chart-grid: rgba(255, 255, 255, 0.08);
--chart-axis: #bdbdbd;
--c-f1: #474747;
--c-f2: #5c5c5c;
--c-f3: #999999;
--c-f4: #bdbdbd;
--c-f5: #ffffff;
--z-evening: #999999;
--z-room: #bdbdbd;
--skel: #1c1c1c;
--skel-hi: #333333;
}
:root[data-course="sleep"], [data-course="sleep"] { --accent: #ad46ff; --accent-text: #8200db; --accent-soft: rgba(173, 70, 255, 0.12); }
:root[data-course="focus"], [data-course="focus"] { --accent: #3392ff; --accent-text: #155dfc; --accent-soft: rgba(51, 146, 255, 0.12); }
:root[data-course="energy"], [data-course="energy"] { --accent: #9ae600; --accent-text: #497d00; --accent-soft: rgba(154, 230, 0, 0.16); }
:root[data-course="food"], [data-course="food"] { --accent: #00bc7d; --accent-text: #009966; --accent-soft: rgba(0, 188, 125, 0.12); }
:root[data-course="stress"], [data-course="stress"],
:root[data-course="teeth"], [data-course="teeth"] { --accent: #00a6f4; --accent-text: #0084d1; --accent-soft: rgba(0, 166, 244, 0.12); }
:root[data-course="move"], [data-course="move"] { --accent: #f6339a; --accent-text: #e60076; --accent-soft: rgba(246, 51, 154, 0.12); }
:root[data-theme="dark"][data-course="sleep"],
:root[data-theme="dark"] [data-course="sleep"],
:root[data-island][data-course="sleep"] { --accent-text: #c27aff; }
:root[data-theme="dark"][data-course="focus"],
:root[data-theme="dark"] [data-course="focus"],
:root[data-island][data-course="focus"] { --accent-text: #8ec5ff; }
:root[data-theme="dark"][data-course="energy"],
:root[data-theme="dark"] [data-course="energy"],
:root[data-island][data-course="energy"] { --accent-text: #bbf451; }
:root[data-theme="dark"][data-course="food"],
:root[data-theme="dark"] [data-course="food"],
:root[data-island][data-course="food"] { --accent-text: #00d492; }
:root[data-theme="dark"][data-course="stress"],
:root[data-theme="dark"] [data-course="stress"],
:root[data-theme="dark"][data-course="teeth"],
:root[data-theme="dark"] [data-course="teeth"],
:root[data-island][data-course="stress"],
:root[data-island][data-course="teeth"] { --accent-text: #00bcff; }
:root[data-theme="dark"][data-course="move"],
:root[data-theme="dark"] [data-course="move"],
:root[data-island][data-course="move"] { --accent-text: #fb64b6; }
:root[data-theme="dark"][data-course],
:root[data-theme="dark"] [data-course],
:root[data-island][data-course] { --accent-soft: rgba(255, 255, 255, 0.1); }
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
overflow-x: clip;
background: var(--bg);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
overflow-x: clip;
min-height: 100vh;
font-family: var(--font);
font-size: 16px;
line-height: 25px;
font-weight: 400;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
img,
svg {
-webkit-user-drag: none;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
}
button {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.sprite {
display: none;
}
.ic {
display: block;
width: 22px;
height: 22px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.num,
.aside,
.big,
.t-time,
.tp-time,
.tnum {
font-variant-numeric: tabular-nums;
}
[hidden] {
display: none !important;
}
.app {
max-width: 560px;
margin: 0 auto;
padding: 12px var(--gutter) calc(var(--tabs-h) + 44px + var(--safe-b));
}
body.full .app {
padding-bottom: calc(28px + var(--safe-b));
}
body.composing .app {
padding-bottom: calc(96px + var(--safe-b));
}
.screen > * {
animation: rise 0.36s var(--ease) backwards;
animation-delay: calc(min(var(--i, 0), 6) * 24ms);
}
.screen.push > * {
animation-name: rise-push;
}
.screen.back > * {
animation-name: rise-back;
}
.screen.quick > * {
animation: fade-in 0.15s ease backwards;
animation-delay: 0s;
}
.screen.still > * {
animation: none;
}
.screen.nav-next {
animation: nav-next 0.34s var(--ease) both;
}
.screen.nav-prev {
animation: nav-prev 0.34s var(--ease) both;
}
@keyframes nav-next {
from {
transform: translate3d(56px, 0, 0);
opacity: 0;
}
}
@keyframes nav-prev {
from {
transform: translate3d(-56px, 0, 0);
opacity: 0;
}
}
.app {
touch-action: pan-y;
}
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(8px);
}
}
@keyframes rise-push {
from {
opacity: 0;
transform: translateX(14px);
}
}
@keyframes rise-back {
from {
opacity: 0;
transform: translateX(-10px);
}
}
@keyframes grow {
from {
transform: scaleX(0);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001s !important;
animation-delay: 0s !important;
transition-duration: 0.001s !important;
}
}
.title {
margin: 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
color: var(--ink);
text-wrap: balance;
}
.title.long {
font-size: 20px;
line-height: 28px;
}
.eyebrow,
.eyebrow-s,
.label {
display: block;
margin: 0;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: var(--ink-2);
}
.kicker {
display: block;
margin: 0;
font-size: 12px;
line-height: 16px;
font-weight: 400;
letter-spacing: 0.72px;
text-transform: uppercase;
color: var(--ink-2);
}
.lead {
margin: 8px 0 0;
font-size: 16px;
line-height: 25px;
color: var(--ink-2);
}
.section {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 28px 0 12px;
}
.section h2 {
margin: 0;
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
color: var(--ink);
}
.section small {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.muted {
color: var(--ink-2);
}
.note {
margin: 14px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
}
.note.left {
text-align: left;
}
.facts {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.hint {
margin: 10px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.back-link {
appearance: none;
display: inline-flex;
align-self: flex-start;
width: fit-content;
max-width: 100%;
align-items: center;
gap: 4px;
min-height: 44px;
margin: 0 0 16px;
padding: 0 16px 0 10px;
border: 0;
border-radius: 20px;
background: var(--chip);
font-size: 15px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.back-link .ic {
width: 18px;
height: 18px;
stroke-width: 2;
}
input,
textarea,
[contenteditable] {
caret-color: var(--accent);
}
html.miniapp-touch, .miniapp-touch body {touch-action:pan-y}
html.feedback-lock,body.feedback-lock {overflow:hidden;overscroll-behavior:none}
.miniapp-touch, .miniapp-touch body, .miniapp-touch .chat-log, .miniapp-touch .feedback-result-body {scrollbar-width:none}
.miniapp-touch::-webkit-scrollbar,.miniapp-touch body::-webkit-scrollbar,.miniapp-touch .chat-log::-webkit-scrollbar,.miniapp-touch .feedback-result-body::-webkit-scrollbar {display:none}
details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; list-style: none; cursor: pointer; font-size: 16px; line-height: 24px; }
details > summary::marker { content: ""; }
details > summary::-webkit-details-marker { display: none; }
details:not(.feedback-data):not(.inbox-filters):not(.inbox-peek-item) > summary::after { content: ""; display: block; width: 8px; height: 8px; flex: 0 0 8px; margin: 0 4px 4px 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s var(--ease); }
details[open]:not(.feedback-data):not(.inbox-filters):not(.inbox-peek-item) > summary::after { transform: rotate(225deg); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { details > summary::after { transition: none; } }
body.main-action-held #local-main {visibility:hidden!important;pointer-events:none!important}
body.feedback-lock #app,body.feedback-lock #tabs {pointer-events:none!important}
body.feedback-lock > #app,body.feedback-lock > #tabs {user-select:none}
.tabs {
position: fixed;
left: 50%;
bottom: max(12px, var(--safe-b));
z-index: 40;
transform: translateX(-50%);
transition:
transform 0.22s var(--ease),
opacity 0.18s ease;
}
.tabs[hidden] {
display: block !important;
opacity: 0;
transform: translate(-50%, 10px);
pointer-events: none;
}
.tabbar {
position: relative;
display: flex;
align-items: center;
width: min(420px, calc(100vw - 24px));
height: var(--tabs-h);
padding: 5px;
border-radius: 32px;
background: var(--float);
box-shadow: var(--float-shadow);
touch-action: none;
}
.tab {
appearance: none;
position: relative;
z-index: 1;
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 0;
height: 54px;
padding: 0;
border: 0;
border-radius: 27px;
background: transparent;
color: var(--ink-2);
font-size: 12px;
line-height: 16px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
color 0.2s ease,
transform 0.12s ease;
}
.tab .ic {
flex: none;
width: 24px;
height: 24px;
}
.tab .ic.on,
.tab.on .ic.off {
display: none;
}
.tab.on .ic.on {
display: block;
}
.tab span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 400px) {
.tab {
font-size: 11px;
line-height: 15px;
}
}
.tab:active {
transform: scale(0.94);
}
.tab.on,
.tab.near {
color: var(--ink);
}
.tabbar.scrub .tab:active {
transform: none;
}
.tab-puck {
position: absolute;
z-index: 0;
top: 5px;
left: 0;
height: 54px;
border-radius: 27px;
background: var(--float-puck);
box-shadow: var(--float-puck-shadow);
pointer-events: none;
transition:
transform 0.36s var(--spring),
width 0.3s var(--ease);
}
.tab-puck.drag,
.tab-puck.still {
transition: none;
}
.tab-orb {
appearance: none;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
touch-action: none;
}
.tab-orb img {
position: relative;
display: block;
width: 60px;
height: 60px;
transition: transform 0.16s var(--spring);
pointer-events: none;
}
.tab-orb img:not([src]) {
visibility: hidden;
}
.tab-orb:active img {
transform: scale(0.9);
}
.tab-orb .ava-count {
position: absolute;
z-index: 1;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--ink);
color: var(--bg);
font-size: 12px;
line-height: 20px;
font-weight: 500;
text-align: center;
box-shadow: 0 0 0 2px var(--float);
}
.tab-gap {
display: none;
}
.tabs.raised {
filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.05));
}
.tabs.raised .tabbar {
box-shadow: none;
}
.tabs.raised .tab-gap {
display: block;
flex: 0 0 70px;
}
.tabs.raised .tab-orb {
position: absolute;
top: -26px;
left: 50%;
width: 156px;
height: 70px;
margin-left: -78px;
align-items: flex-start;
padding-top: 6px;
pointer-events: none;
}
.tabs.raised .tab-orb::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 156px;
height: 27px;
background: var(--float);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 27'%3E%3Cpath d='M0 27C40 27 44 0 78 0s38 27 78 27z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 27'%3E%3Cpath d='M0 27C40 27 44 0 78 0s38 27 78 27z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.tabs.raised .tab-orb img {
pointer-events: auto;
border-radius: 50%;
}
.tabs.raised .tab-orb::after {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 88px;
height: 88px;
margin-left: -44px;
border-radius: 50%;
pointer-events: auto;
}
.tabs[hidden] .tab-orb img,
.tabs[hidden] .tab-orb::after {
pointer-events: none;
}
.tabs.raised .tab-orb .ava-count {
top: 2px;
left: 50%;
margin-left: 14px;
}
.hello {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 36px;
margin: 2px 0 0;
padding: 0 0 16px;
}
.hello h1 {
margin: 0;
min-width: 0;
overflow: hidden;
font-size: 17px;
line-height: 22px;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ink);
}
.hello h1 span {
color: var(--ink-2);
}
.hello .avatar-btn {
width: 36px;
height: 36px;
}
.hello.tab-head {
align-items: flex-end;
padding-bottom: 14px;
}
.tab-head .th-txt {
min-width: 0;
}
.hello.tab-head h1 {
font-size: 24px;
line-height: 30px;
letter-spacing: -0.24px;
}
.tab-head p {
margin: 2px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.hello.tab-head.big {
padding-bottom: 6px;
}
.tab-head.big .th-acts {
align-self: center;
}
.tab-head .th-kick {
margin: 0 0 2px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.hello.tab-head.big h1 {
font-size: 30px;
line-height: 36px;
letter-spacing: -0.3px;
}
.sheet {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: flex-end;
justify-content: center;
}
.sheet .scrim {
position: absolute;
inset: 0;
background: var(--scrim);
opacity: 0;
transition: opacity 0.26s ease;
}
.sheet .panel {
position: relative;
width: 100%;
max-width: 560px;
max-height: min(72dvh, calc(100dvh - var(--full-top, 0px) - 16px));
display: flex;
flex-direction: column;
overflow: hidden;
padding: 8px var(--gutter) calc(20px + var(--safe-b));
border-radius: 26px 26px 0 0;
background: var(--bg);
transform: translateY(104%);
transition: transform 0.34s var(--ease), height .24s var(--ease);
}
:root[data-theme="dark"] .sheet .panel,
:root[data-island] .sheet .panel {
background: #121214;
}
.sheet.open .scrim {
opacity: 1;
}
.sheet.open .panel {
transform: none;
}
.grip {
display: block;
position: relative;
width: 100%;
height: 44px;
flex: 0 0 44px;
margin: 0 auto 8px;
touch-action: none;
cursor: grab;
}
.grip::before {
content: "";
position: absolute;
width: 36px;
height: 5px;
top: 8px;
left: calc(50% - 18px);
border-radius: 3px;
background: var(--ink-4);
}
.sheet-body > .btn + .btn,
.sheet-body > .btns + .btn,
.sheet-body > .btn + .note {
margin-top: 10px;
}
.sheet-body > p + .btn,
.sheet-body > p + .btns {
margin-top: 20px;
}
.sheet-body .report {
margin-bottom: 20px;
}
.sheet-lesson {
margin: 0 0 20px;
}
.sheet-lesson .cov {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 0 16px;
border-radius: var(--r-card);
object-fit: cover;
background: var(--well);
}
.sheet-lesson .pills {
margin: 0 0 10px;
}
.sheet-lesson h3 {
margin: 0;
font-size: 20px;
line-height: 28px;
font-weight: 500;
letter-spacing: -0.3px;
}
.sheet-lesson p {
margin: 8px 0 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.done-sheet {
display: grid;
justify-items: center;
gap: 8px;
margin: 4px 0 22px;
text-align: center;
}
.done-sheet h3 {
margin: 8px 0 0;
font-size: 20px;
line-height: 28px;
font-weight: 500;
}
.done-sheet p {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.src-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
}
.src-head .n {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 14px;
font-size: 12px;
font-weight: 500;
color: var(--btn-ink);
background: var(--btn);
}
.src-head .kind {
font-size: 14px;
color: var(--ink-2);
}
.src-title {
margin: 0;
font-size: 19px;
line-height: 26px;
font-weight: 500;
}
.src-by {
margin: 8px 0 22px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.toast {
position: fixed;
left: 50%;
bottom: calc(var(--tabs-h) + 30px + var(--safe-b));
z-index: 90;
max-width: calc(100% - 40px);
padding: 12px 18px;
border-radius: 22px;
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: var(--btn-ink);
background: var(--btn);
box-shadow: var(--float-shadow);
transform: translate(-50%, 0);
animation: toast 0.3s var(--ease) both;
}
body.full .toast {
bottom: calc(24px + var(--safe-b));
}
body.composing .toast {
bottom: calc(92px + var(--safe-b));
}
@keyframes toast {
from {
opacity: 0;
transform: translate(-50%, 8px);
}
}
.skel {
display: flex;
align-items: center;
justify-content: center;
min-height: 58vh;
}
.empty {
display: grid;
place-items: center;
gap: 4px;
padding: 20px 12px 12px;
text-align: center;
}
.empty .art {
width: 104px;
height: 104px;
margin: 0 auto 10px;
}
.empty h2 {
margin: 0;
font-size: 20px;
line-height: 28px;
font-weight: 500;
letter-spacing: -0.3px;
}
.empty p {
max-width: 320px;
margin: 8px auto 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.empty .btn {
width: auto;
min-width: 200px;
margin-top: 22px;
}
.state {
display: grid;
place-content: center;
min-height: 76vh;
text-align: center;
}
.confetti {
position: fixed;
inset: 0;
z-index: 70;
pointer-events: none;
overflow: hidden;
}
.confetti i {
position: absolute;
top: -12px;
width: 8px;
height: 14px;
border-radius: 3px;
animation: fall linear forwards;
}
@keyframes fall {
to {
transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 540deg));
opacity: 0.9;
}
}
.sheet-body,.sheet-scroll {min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.sheet-body,.sheet-scroll {scrollbar-width:none}
.sheet-body::-webkit-scrollbar,.sheet-scroll::-webkit-scrollbar {display:none}
.sheet .panel[data-expanded="true"],.sheet .panel[data-dragging="true"] {max-height:calc(100dvh - var(--full-top, 0px) - 16px)}
@media(prefers-reduced-motion:reduce){.sheet .panel{transition:none}}
a.btn { text-decoration: none; }
.btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
margin: 0;
padding: 0 20px;
border: 0;
border-radius: var(--r-btn);
font-size: 16px;
line-height: 20px;
font-weight: 500;
color: var(--btn-ink);
background: var(--btn);
text-align: center;
cursor: pointer;
transition:
transform 0.12s ease,
opacity 0.2s ease,
background-color 0.2s ease,
color 0.2s ease;
}
.btn > .ic {
display: none;
}
.btn.with-ic > .ic {
display: block;
width: 16px;
height: 16px;
fill: currentColor;
stroke: none;
}
.btn:active {
transform: scale(0.98);
opacity: 0.86;
}
.btn[disabled] {
color: var(--btn-off-ink);
background: var(--btn-off);
pointer-events: none;
}
.btn.second {
font-size: 15px;
color: var(--ink);
background: var(--chip);
}
.btn.accent {
color: var(--accent-ink);
background: var(--accent);
}
.btn.blue {
color: #ffffff;
background: var(--blue);
}
.btn.ghost {
min-height: 44px;
color: var(--ink-2);
background: transparent;
}
.btn.small {
width: auto;
min-height: 34px;
padding: 0 16px;
border-radius: 17px;
font-size: 15px;
}
.btn.fit {
width: auto;
min-width: 0;
}
.btn.primary {
color: var(--btn-ink);
background: var(--btn);
}
.on-dark .btn,
.card-dark .btn {
color: #1d1d1f;
background: #ffffff;
}
.on-dark .btn.second,
.card-dark .btn.second,
.card-dark .btn.small {
color: #ffffff;
background: var(--dark-pill);
}
.btns {
display: grid;
gap: 12px;
}
.btns.two {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.btns.three {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.btns.two .btn,
.btns.three .btn {
width: 100%;
padding: 0 8px;
}
.link-btn {
appearance: none;
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 500;
color: var(--link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
cursor: pointer;
}
.list,
.group {
margin: 0 0 16px;
border-radius: var(--r-group);
background: var(--well);
overflow: hidden;
}
.item {
appearance: none;
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 70px;
margin: 0;
padding: 14px 16px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
.item.static {
cursor: default;
}
button.item:active {
background: var(--well-2);
}
.item + .item::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 60px;
height: 1px;
background: var(--line);
}
.list.plain .item + .item::before {
left: 16px;
}
.item .txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.item .txt b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.item .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.item .val {
flex: none;
font-size: 15px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.item .go {
flex: none;
width: 20px;
height: 20px;
stroke-width: 1.6;
color: var(--ink-3);
}
.item.locked .txt b {
color: var(--ink-2);
}
.bubble {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
color: #ffffff;
background: var(--ib-gray);
}
.bubble .ic {
width: 17px;
height: 17px;
stroke-width: 2.2;
}
.bubble.violet { background: var(--ib-violet); }
.bubble.blue { background: var(--ib-blue); }
.bubble.green { background: var(--ib-green); }
.bubble.teal { background: var(--ib-teal); }
.bubble.amber { background: var(--ib-amber); }
.bubble.pink { background: var(--ib-pink); }
.bubble.sky { background: var(--ib-sky); }
.bubble.red { background: var(--ib-red); }
.bubble.gray { background: var(--ib-gray); }
.bubble.ink,
.bubble.solid { background: var(--ib-ink); }
.bubble.accent { background: var(--accent); }
.card {
position: relative;
margin: 0 0 16px;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
:where(.card) > p {
margin: 0 0 12px;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
:where(.card) > p:where(:last-child) {
margin-bottom: 0;
}
.card > .btn,
.card > .btns {
margin-top: 16px;
}
.card > .pills + .btn,
.card > .pills + .btns {
margin-top: 14px;
}
.card-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
}
.card-head > .bubble {
display: none;
}
.card-head h3 {
flex: 1;
margin: 0;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.card-head .aside {
font-size: 14px;
color: var(--ink-2);
}
.card-dark {
position: relative;
margin: 0 0 16px;
padding: 20px;
border-radius: var(--r-card);
color: var(--dark-ink);
background: var(--dark-card);
box-shadow: inset 0 0 0 1px var(--dark-edge);
overflow: hidden;
}
.card-dark .eyebrow,
.card-dark .t-time {
color: var(--dark-ink-2);
}
.pill,
.chip-x {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 12px;
border-radius: 15px;
font-size: 14px;
line-height: 1;
font-weight: 500;
white-space: nowrap;
color: var(--ink);
background: var(--chip);
}
.pill .ic,
.chip-x .ic {
width: 14px;
height: 14px;
}
.pill.dark,
.chip-x.dark {
color: var(--btn-ink);
background: var(--btn);
}
.pill.pink,
.pill.accent,
.chip-x.accent {
color: var(--accent-ink);
background: var(--accent);
}
.pill.amber {
height: 20px;
padding: 0 7px;
border-radius: 6px;
font-size: 12px;
color: #1d1d1f;
background: var(--warn);
}
.pill.soft {
color: var(--accent-text);
background: var(--accent-soft);
}
.pill.caps {
height: 22px;
padding: 0 9px;
border-radius: 11px;
font-size: 12px;
letter-spacing: 0.66px;
text-transform: uppercase;
color: #ffffff;
background: linear-gradient(180deg, var(--blue), var(--blue-deep));
}
.pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
button.chip-x {
appearance: none;
height: auto;
min-height: 38px;
padding: 8px 14px;
border: 0;
border-radius: 19px;
white-space: normal;
text-align: left;
line-height: 20px;
cursor: pointer;
}
button.chip-x:active {
background: var(--well-2);
}
.tag {
display: inline-block;
padding: 1px 8px;
border-radius: 8px;
font-size: 12px;
line-height: 20px;
color: var(--ink);
background: var(--chip);
}
.seg {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 2px;
margin: 0 0 20px;
}
.seg button {
appearance: none;
position: relative;
height: 28px;
padding: 0 9px;
border: 0;
border-radius: 14px;
background: transparent;
font-size: 15px;
line-height: 1;
font-weight: 400;
color: var(--ink-2);
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.seg button:first-child {
margin-right: 13px;
}
.seg button:first-child::after {
content: "";
position: absolute;
top: 6px;
right: -8px;
width: 1px;
height: 16px;
background: var(--rule);
}
.seg button.on {
padding: 0 11px;
font-weight: 500;
color: var(--btn-ink);
background: var(--btn);
}
.segm {
display: flex;
gap: 2px;
padding: 3px;
border-radius: 14px;
background: var(--well);
}
.segm button {
appearance: none;
flex: 1;
min-width: 0;
height: 38px;
padding: 0 6px;
border: 0;
border-radius: 11px;
background: transparent;
font-size: 15px;
font-weight: 500;
color: var(--ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.segm button.on {
color: var(--ink);
background: var(--bg);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .segm button.on,
:root[data-island] .segm button.on {
background: #5c5c5c;
box-shadow: none;
}
.pbar {
height: 6px;
border-radius: 3px;
background: var(--track);
overflow: hidden;
}
.pbar i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--ink);
transform-origin: 0 50%;
animation: grow 0.8s var(--ease) both;
}
.pbar.accent i {
background: var(--accent);
}
.week-dots {
display: flex;
gap: 6px;
}
.week-dots i {
width: 10px;
height: 10px;
border-radius: 5px;
background: var(--track);
}
.week-dots i.done {
background: var(--ink);
}
.week-dots i.now {
background: transparent;
box-shadow: inset 0 0 0 2px var(--accent);
}
.feelbar {
display: inline-flex;
align-items: flex-end;
gap: 3px;
height: 16px;
}
.feelbar i {
width: 4px;
border-radius: 2px;
background: var(--track);
}
.feelbar i:nth-child(1) { height: 36%; }
.feelbar i:nth-child(2) { height: 52%; }
.feelbar i:nth-child(3) { height: 68%; }
.feelbar i:nth-child(4) { height: 84%; }
.feelbar i:nth-child(5) { height: 100%; }
.feelbar i.on {
background: var(--ink);
}
.feel-lbl {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
font-size: 12px;
color: var(--ink-2);
}
.check,
.done-mark {
flex: none;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 11px;
background: var(--ink-4);
}
.check .ic,
.done-mark .ic {
width: 13px;
height: 13px;
stroke-width: 3;
}
.done-mark,
.check.on {
color: var(--btn-ink);
background: var(--btn);
}
.done-mark.big {
width: 64px;
height: 64px;
border-radius: 32px;
}
.done-mark.big .ic {
width: 30px;
height: 30px;
}
.art,
.obj {
display: block;
flex: none;
object-fit: contain;
pointer-events: none;
}
.avatar-btn {
appearance: none;
position: relative;
flex: none;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: transform 0.12s ease;
}
.avatar-btn img {
position: absolute;
left: -12px;
top: -20px;
width: 60px;
height: 60px;
pointer-events: none;
}
.avatar-btn:active {
transform: scale(0.92);
}
.field {
margin: 0 0 24px;
transition: opacity 0.25s ease;
}
.field.off {
opacity: 0.35;
pointer-events: none;
}
.field > label,
.field > .label {
display: block;
margin: 0 0 8px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.input,
.field input[type="text"],
.field input[type="email"] {
display: block;
width: 100%;
height: 48px;
padding: 0 16px;
border: 0;
border-radius: var(--r-btn);
background: var(--well);
font-size: 16px;
color: var(--ink);
outline: none;
-webkit-user-select: text;
user-select: text;
}
.input::placeholder,
.field input::placeholder {
color: var(--ink-3);
}
textarea.input {
height: auto;
min-height: 112px;
padding: 16px;
line-height: 24px;
resize: none;
}
.opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.opt {
appearance: none;
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 50px;
padding: 10px 14px 10px 12px;
border: 0;
border-radius: var(--r-row);
background: var(--well);
font-size: 16px;
line-height: 21px;
font-weight: 500;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: transform 0.12s ease;
}
.opt::before {
content: "";
flex: none;
width: 22px;
height: 22px;
border-radius: 11px;
background: var(--ink-4) center / 13px 13px no-repeat;
transition: background-color 0.18s ease;
}
.opt:active {
transform: scale(0.98);
}
.opt.on::before {
background-color: var(--btn);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .opt.on::before,
:root[data-island] .opt.on::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.opt .e {
flex: none;
font-size: 19px;
line-height: 1;
}
.switch-row {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 0 16px;
border-radius: var(--r-group);
background: var(--well);
cursor: pointer;
}
.switch-row .lbl {
flex: 1;
font-size: 16px;
font-weight: 500;
color: var(--ink);
}
.switch {
position: relative;
flex: none;
width: 51px;
height: 31px;
border-radius: 16px;
background: var(--ink-4);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
transition: background-color 0.2s ease;
}
.switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 27px;
height: 27px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
transition: transform 0.22s var(--ease);
}
.switch.on {
background: var(--good);
}
.switch.on::after {
transform: translateX(20px);
}
.callout {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 16px;
padding: 16px;
border-radius: 16px;
background: var(--well);
}
.callout .ic {
width: 20px;
height: 20px;
margin-top: 2px;
color: var(--warn);
stroke-width: 2.2;
}
.callout p {
margin: 0;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.callout b {
display: block;
margin: 0 0 4px;
font-weight: 500;
}
.report {
text-align: left;
}
.report p {
margin: 0 0 12px;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.report p:last-child {
margin-bottom: 0;
}
.report strong {
font-weight: 500;
}
.report blockquote {
margin: 14px 0 0;
padding: 16px;
border-radius: 16px;
font-size: 16px;
line-height: 25px;
color: var(--ink);
background: var(--well);
}
.card .report blockquote {
background: var(--bg);
}
.radio-row .tick {
width: 20px;
height: 20px;
stroke-width: 2.4;
color: var(--ink);
opacity: 0;
transition: opacity 0.15s ease;
}
.radio-row.on .tick {
opacity: 1;
}
.radio-row {
min-height: 52px;
}
.radio-row .txt b {
font-weight: 400;
}
.radio-row.on .txt b {
font-weight: 500;
}
.card .btn.second,
.ask .btn.second,
.hero .btn.second {
background: var(--bg);
}
.splash {
position: fixed;
inset: 0;
z-index: 75;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 var(--gutter) 14vh;
background: var(--bg);
transition:
opacity 0.28s var(--ease),
visibility 0s linear 0.28s;
}
.splash.gone {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.sp-sketch {
position: absolute;
inset: 0;
max-width: 560px;
margin: 0 auto;
padding: calc(14px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)) var(--gutter) 0;
transition: opacity 0.3s ease;
}
.splash.slow .sp-sketch {
opacity: 0.3;
}
.sp-sketch i {
display: block;
margin-top: 16px;
border-radius: 20px;
background-image: radial-gradient(circle, var(--ink-3) 1.25px, transparent 1.75px);
background-size: 9px 9px;
opacity: 0.22;
animation: sp-wave 1.8s ease-in-out infinite;
}
.sp-sketch .s1 { width: 34%; height: 14px; margin-top: 10px; border-radius: 6px; }
.sp-sketch .s2 { width: 52%; height: 30px; margin-top: 8px; border-radius: 8px; animation-delay: 0.08s; }
.sp-sketch .s3 { height: 80px; margin-top: 22px; border-radius: 40px; animation-delay: 0.16s; }
.sp-sketch .s4 { height: 236px; margin-top: 22px; animation-delay: 0.24s; }
.sp-sketch .s5 { height: 96px; animation-delay: 0.32s; }
.sp-sketch .s6,
.sp-sketch .s7 { display: inline-block; width: calc(50% - 6px); height: 150px; animation-delay: 0.4s; }
.sp-sketch .s7 { margin-left: 12px; animation-delay: 0.46s; }
@keyframes sp-wave {
0%,
100% {
opacity: 0.22;
}
45% {
opacity: 0.85;
}
}
.screen.develop > * {
animation: sp-develop 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(min(var(--i, 0), 8) * 40ms);
}
@keyframes sp-develop {
0% {
filter: blur(6px);
opacity: 0.4;
}
100% {
filter: none;
opacity: 1;
}
}
.sp-orb {
position: relative;
}
.splash-note {
position: relative;
width: 100%;
max-width: 300px;
height: 40px;
margin: 18px 0 0;
}
.splash-note span {
position: absolute;
inset: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.splash.slow .wait,
.splash.stuck .late {
opacity: 1;
}
.splash.stuck .wait {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.sp-sketch i,
.screen.develop > * {
animation: none;
}
}
.ld {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: ld-in 0.2s ease 0.15s both;
}
@keyframes ld-in {
from {
opacity: 0;
}
}
.ld-beat {
display: inline-flex;
align-items: center;
gap: 7px;
height: 16px;
}
.ld-beat i {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.2;
animation: ld-tick 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.ld-beat i:first-child {
width: 11px;
height: 11px;
}
.ld-beat i:nth-child(2) { animation-delay: 0.6s; }
.ld-beat i:nth-child(3) { animation-delay: 1.2s; }
.ld-beat i:nth-child(4) { animation-delay: 1.8s; }
@keyframes ld-tick {
0% {
opacity: 1;
transform: scale(1.45);
}
18% {
opacity: 0.85;
transform: scale(1);
}
40%,
100% {
opacity: 0.2;
transform: scale(1);
}
}
.ld-beats {
color: var(--ink);
}
.ld-orb {
gap: 22px;
min-height: 132px;
color: var(--ink);
}
.ld-ring {
position: relative;
display: block;
width: 76px;
height: 76px;
animation: ld-beat-orb 5.5s ease-in-out 1.5s infinite;
}
.ld-ring i {
position: absolute;
left: 34.5px;
top: 34.5px;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
animation: ld-gather 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ld-eyes {
position: absolute;
left: 50%;
top: 50%;
display: flex;
gap: 9px;
margin: -8px 0 0 -10.5px;
animation:
ld-eyes-in 0.3s ease-out 0.95s both,
ld-blink 11s ease-in-out 1.6s infinite;
}
.ld-eyes u {
display: block;
width: 6px;
height: 16px;
border-radius: 3px;
background: currentColor;
}
@keyframes ld-gather {
from {
transform: translate(var(--x0), var(--y0)) scale(0.5);
opacity: 0;
}
35% {
opacity: 1;
}
to {
transform: translate(var(--x1), var(--y1)) scale(1);
opacity: 1;
}
}
@keyframes ld-beat-orb {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.018);
}
}
@keyframes ld-eyes-in {
from {
opacity: 0;
transform: scaleY(0.2);
}
}
@keyframes ld-blink {
0%,18%,23%,49%,54%,100% {transform:translateX(0) scaleY(1);}
20%,51% {transform:translateX(0) scaleY(.12);}
65%,73% {transform:translateX(1.5px) scaleY(1);}
82%,90% {transform:translateX(-1px) scaleY(1);}
}
.ld-note {
margin: 0;
max-width: 280px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
}
.ld-note:empty {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.ld,
.ld-beat i,
.ld-ring,
.ld-ring i,
.ld-eyes {
animation: none;
}
.ld-ring i {
transform: translate(var(--x1), var(--y1));
}
.ld-beat i {
opacity: 0.45;
}
}
#app img.ld-wait {
opacity: 0;
}
.is-busy {
pointer-events: none;
}
.btn.is-busy {
position: relative;
color: transparent;
}
.btn.is-busy > * {
visibility: hidden;
}
.btn.is-busy > .busy-beat {
position: absolute;
inset: 0;
justify-content: center;
height: auto;
visibility: visible;
color: var(--btn-ink);
}
.btn.second.is-busy > .busy-beat,
.btn.ghost.is-busy > .busy-beat {
color: var(--ink);
}
.busy-beat i {
width: 6px;
height: 6px;
}
.busy-beat i:first-child {
width: 8px;
height: 8px;
}
button.item.is-busy::after {
content: "";
position: absolute;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: sp-spin 0.7s linear infinite;
}
button.item.is-busy {
position: relative;
}
button.item.is-busy::after {
right: 18px;
color: var(--ink-2);
}
button.item.is-busy > .go,
button.item.is-busy > .check {
visibility: hidden;
}
button.is-busy:not(.btn):not(.item) {
opacity: 0.55;
}
@keyframes sp-spin {
to {
transform: rotate(360deg);
}
}
.back-link:active,
.flow-back:active,
.info-btn:active,
.link-btn:active,
.pl-close:active,
.tr-copy:active,
.kp-row:active,
.kf-head:active {
opacity: 0.6;
}
.pl-send:active,
.send:active {
transform: scale(0.92);
}
.page-head {
margin: 4px 0 20px;
}
.page-head .title {
margin: 0;
}
.page-head .lead {
margin: 8px 0 0;
}
.feature {
margin: 20px 0 8px;
}
.feature .kicker {
margin: 0 0 6px;
}
.feature h2 {
margin: 0;
font-size: 19px;
line-height: 24px;
font-weight: 500;
letter-spacing: -0.19px;
color: var(--ink);
text-wrap: balance;
}
.feature .meta {
margin: 4px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.feature-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 236px;
margin: 14px 0 0;
border-radius: var(--r-card);
color: var(--dark-ink);
background: var(--dark-card);
box-shadow: inset 0 0 0 1px var(--dark-edge);
overflow: hidden;
cursor: pointer;
transition: transform 0.16s ease;
}
.feature-card:active {
transform: scale(0.985);
}
.fc-art {
flex: 1;
display: flex;
align-items: center;
padding: 22px 20px 8px;
}
.fc-art > * {
width: 100%;
}
.fc-foot {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
padding: 10px 20px 20px;
}
.fc-meta {
font-size: 14px;
line-height: 18px;
color: var(--dark-ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-arrow {
width: 18px;
height: 18px;
color: var(--dark-ink-2);
stroke-width: 1.6;
}
.fc-btn {
appearance: none;
justify-self: end;
height: 32px;
padding: 0 16px;
border: 0;
border-radius: 16px;
background: var(--dark-pill);
font-size: 15px;
font-weight: 500;
color: #ffffff;
white-space: nowrap;
cursor: pointer;
}
.course-sec {
margin-bottom: 14px;
}
.stat-card {
margin: 0 0 20px;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.sc-big {
display: flex;
align-items: baseline;
gap: 8px;
}
.sc-big b {
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--ink);
}
.sc-big span {
font-size: 17px;
font-weight: 500;
color: var(--ink-2);
}
.stat-card > p {
margin: 2px 0 14px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.wk-head {
display: flex;
align-items: baseline;
gap: 8px;
margin: 22px 0 10px;
}
.wk-head b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.wk-head small {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.lrows {
display: flex;
flex-direction: column;
gap: 8px;
}
.lrow {
padding: 0 16px;
border-radius: 12px;
background: var(--well);
cursor: pointer;
transition:
transform 0.12s ease,
background-color 0.16s ease;
}
.lrow:active {
transform: scale(0.99);
background: var(--well-2);
}
.lr-top {
display: flex;
align-items: center;
min-height: 52px;
padding: 8px 0;
}
.lr-n {
flex: none;
width: 24px;
font-size: 17px;
line-height: 22px;
font-weight: 500;
text-align: center;
color: var(--ink);
}
.lr-k {
flex: none;
position: relative;
margin: 0 12px 0 10px;
padding-right: 12px;
font-size: 12px;
line-height: 12px;
font-weight: 500;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ink-2);
}
.lr-k::after {
content: "";
position: absolute;
top: -3px;
right: 0;
width: 1px;
height: 18px;
background: var(--rule);
}
.lr-t {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.lr-t b {
font-size: 15px;
line-height: 20px;
font-weight: 400;
color: var(--ink);
}
.lr-t small {
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.lrow .lr-lock,
.lrow .lr-done {
flex: none;
width: 18px;
height: 18px;
margin-left: 10px;
}
.lr-lock {
color: var(--ink-3);
stroke-width: 1.8;
}
.lr-done {
color: var(--good);
stroke-width: 2.4;
}
.lrow.locked .lr-t b,
.lrow.paywall .lr-t b,
.lrow.next .lr-t b,
.lrow.soon .lr-t b {
color: var(--ink-2);
}
.lrow.today {
padding-bottom: 12px;
box-shadow: inset 0 0 0 1px var(--rule);
}
.lrow.today .lr-t b {
font-weight: 500;
}
.lrow .lr-btn {
min-height: 42px;
border-radius: 12px;
font-size: 15px;
}
.group-label {
margin: 20px 0 10px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.empty-card {
padding: 8px 16px 20px;
}
.tag-lock {
flex: none;
padding: 5px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
background: var(--bg);
white-space: nowrap;
}
.tag-lock.on {
color: var(--accent-ink);
background: var(--accent);
}
.gift-view .title {
margin: 4px 0 16px;
}
.gift-view img {
display: block;
width: 100%;
margin: 0 0 12px;
border-radius: var(--r-card);
-webkit-touch-callout: none;
pointer-events: auto;
}
.gift-save {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 48px;
margin: 0 0 16px;
padding: 0 16px;
border: 0;
border-radius: var(--r-btn);
font: inherit;
font-size: 16px;
font-weight: 500;
color: var(--ink);
background: var(--chip);
cursor: pointer;
}
.gift-save .ic {
width: 20px;
height: 20px;
}
.gift-view img.gift-card {
margin-top: 8px;
box-shadow: 0 0 0 1px var(--line);
}
.sm-progress {
display: flex;
align-items: center;
gap: 12px;
margin: -4px 0 16px;
}
.sm-bar {
flex: 1;
display: flex;
gap: 4px;
}
.sm-bar i {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--track);
}
.sm-bar i.on {
background: var(--good);
}
.sm-bar i.no {
background: var(--ink-3);
}
.sm-bar i.now {
background: var(--accent);
}
.sm-progress span {
font-size: 14px;
color: var(--ink-2);
white-space: nowrap;
}
.sm-line {
margin: 0 0 14px;
padding: 12px 14px;
border-radius: 14px;
font-size: 15px;
line-height: 21px;
background: var(--well);
}
.sm-today .kicker {
margin: 0 0 6px;
color: var(--dark-ink-2);
}
.sm-today h2 {
margin: 0 0 8px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.sm-fact {
margin: 0 0 12px;
font-size: 15px;
line-height: 22px;
color: var(--dark-ink-2);
}
.card .sm-fact,
.sheet-lesson .sm-fact {
color: var(--ink-2);
}
.sm-task {
margin: 0 0 16px;
padding: 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
}
.sm-task b {
display: block;
margin: 0 0 4px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--dark-ink-2);
}
.sm-task p {
margin: 0;
font-size: 16px;
line-height: 23px;
}
.sm-mark {
margin: 0;
font-size: 15px;
font-weight: 500;
}
.sm-mark.ok,
.sm-mark.late {
color: #00d492;
}
.lrow.cur {
box-shadow: inset 0 0 0 1px var(--rule);
}
.lrow.cur .lr-t b {
font-weight: 500;
}
.sm-plan {
margin: 12px 0 8px;
padding-left: 20px;
font-size: 15px;
line-height: 22px;
}
.sm-plan li + li {
margin-top: 4px;
}
.sm-best {
margin-top: 4px;
}
.sm-best .kicker {
margin: 0 0 6px;
color: var(--dark-ink-2);
}
.sm-best h2 {
margin: 0 0 8px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.streams .list + .btn.second {
margin-top: -8px;
}
.trail {
margin: 6px 0 0;
}
.tr-wk {
position: relative;
display: flex;
justify-content: center;
padding: 26px 0 18px;
text-align: center;
}
.tr-wk::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 5px;
margin-left: -2.5px;
background: radial-gradient(circle, var(--ink-4) 2.4px, transparent 2.6px) center top / 5px 11px repeat-y;
}
.tr-wk.on::before {
width: 4px;
margin-left: -2px;
border-radius: 2px;
background: var(--ink);
}
.tr-wk.first::before {
display: none;
}
.tr-wk .in {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
max-width: 320px;
padding: 6px 14px;
background: var(--bg);
}
.tr-wk small {
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.tr-wk b {
margin-top: 4px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.tr-wk span {
margin-top: 2px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tr-field {
position: relative;
}
.tr-svg {
position: absolute;
left: 0;
top: 0;
overflow: visible;
pointer-events: none;
}
.tr-svg path {
fill: none;
stroke-linecap: round;
}
.tr-svg path.on {
stroke: var(--ink);
stroke-width: 4;
}
.tr-svg path.off {
stroke: var(--ink-4);
stroke-width: 5;
stroke-dasharray: 0.1 11;
}
.tr-node {
appearance: none;
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--well);
color: var(--ink-3);
box-shadow: 0 0 0 5px var(--bg);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.14s var(--ease);
}
.tr-node:active {
transform: scale(0.92);
}
.tr-node .ic {
position: relative;
width: 26px;
height: 26px;
stroke-width: 1.9;
}
.tr-node.done {
background: var(--ink);
color: var(--bg);
}
.tr-node.next,
.tr-node.missed,
.tr-node.paywall {
color: var(--ink-2);
}
.tr-node.today {
width: 76px;
height: 76px;
margin: -38px 0 0 -38px;
background: var(--accent);
color: #ffffff;
}
.tr-node.today .ic {
width: 32px;
height: 32px;
}
.tr-node.today::after {
content: "";
position: absolute;
inset: -9px;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--accent);
opacity: 0;
animation: tr-pulse 2.6s var(--ease) 0.6s infinite;
}
.tr-node.today.fx::after {
display: none;
}
@keyframes tr-pulse {
0% {
transform: scale(0.9);
opacity: 0.55;
}
70%,
100% {
transform: scale(1.22);
opacity: 0;
}
}
.tr-node.sel {
box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--ink);
}
.tr-node.review {
width: 66px;
height: 66px;
margin: -33px 0 0 -33px;
}
.tr-node .wk-ring {
position: absolute;
inset: -9px;
width: calc(100% + 18px);
height: calc(100% + 18px);
overflow: visible;
}
.tr-node .wk-ring path {
fill: none;
stroke: var(--ink-4);
stroke-width: 4;
stroke-linecap: round;
}
.tr-node .wk-ring path.on {
stroke: var(--ink);
}
.tr-lbl {
position: absolute;
z-index: 1;
transform: translateY(-50%);
pointer-events: none;
}
.tr-lbl.l {
text-align: right;
}
.tr-lbl small {
display: block;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.tr-lbl.now small {
color: var(--ink);
font-weight: 500;
}
.tr-lbl b {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
.tr-lbl.future b {
color: var(--ink-2);
}
.tr-pop {
position: absolute;
z-index: 6;
left: 0;
right: 0;
padding: 18px;
border-radius: var(--r-card);
background: var(--dark-card);
box-shadow: inset 0 0 0 1px var(--dark-edge);
color: var(--dark-ink);
transform-origin: var(--ox, 50%) 0;
animation: tr-pop 0.3s var(--spring) both;
}
.tr-pop::before {
content: "";
position: absolute;
top: -7px;
left: calc(var(--ox, 50%) - 8px);
width: 16px;
height: 16px;
border-radius: 3px;
background: var(--dark-card);
transform: rotate(45deg);
}
.tr-pop.above { transform-origin: var(--ox, 50%) 100%; }
.tr-pop.above::before { top: auto; bottom: -7px; }
@keyframes tr-pop {
from {
opacity: 0;
transform: scale(0.92) translateY(-8px);
}
}
.tr-pop .kicker {
margin: 0;
color: var(--dark-ink-2);
}
.tr-pop h3 {
margin: 6px 0 0;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.tr-sub {
margin: 4px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--dark-ink-2);
}
.tr-hint {
margin: 12px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--dark-ink-2);
}
.tr-pop .btn {
width: 100%;
margin-top: 16px;
background: var(--dark-ink);
color: var(--dark-card);
}
.tr-got {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.tr-got li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
font-size: 15px;
line-height: 21px;
}
.tr-got li + li {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.tr-got .ic {
flex: none;
width: 20px;
height: 20px;
margin-top: 1px;
}
.tr-fill {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--ink);
transform: scale(0);
}
.tr-check {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.tr-check svg {
width: 34px;
height: 34px;
fill: none;
stroke: var(--bg);
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.tr-node.fx .ic {
color: #ffffff;
}
.tr-ray {
position: absolute;
z-index: 3;
width: 3px;
height: 12px;
margin: -6px 0 0 -1.5px;
border-radius: 2px;
background: var(--ink);
opacity: 0;
pointer-events: none;
}
.tr-chip {
position: absolute;
z-index: 7;
height: 32px;
padding: 0 12px;
border-radius: 16px;
background: var(--ink);
color: var(--bg);
font-size: 14px;
line-height: 32px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
.tr-swap {
position: absolute;
left: 0;
right: 0;
top: 0;
}
.tr-swap.done {
color: var(--ink-2) !important;
font-weight: 400 !important;
}
.tr-roll {
display: inline-block;
height: 20px;
overflow: hidden;
vertical-align: top;
}
.tr-roll > span {
display: block;
}
.tr-roll i {
display: block;
height: 20px;
font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
.tr-node.today::after,
.tr-pop {
animation: none;
}
}
.road-staff .rs-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin: 24px 0 0;
}
.road-staff .rs-head small {
display: block;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.road-staff .rs-head b {
display: block;
margin-top: 2px;
font-size: 18px;
line-height: 24px;
font-weight: 500;
}
.road-staff .rs-head .tnum {
flex: none;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rs-staff {
display: block;
overflow: visible;
}
.rs-line {
stroke: var(--line);
stroke-width: 1.5;
}
.rs-bar {
stroke: var(--ink-3);
stroke-width: 2;
}
.rs-bar.end {
fill: var(--ink-3);
stroke: none;
}
.rs-tune {
stroke: var(--ink-4);
stroke-width: 2;
stroke-dasharray: 2 6;
stroke-linecap: round;
}
.rs-tune.on {
stroke: var(--ink);
stroke-dasharray: none;
opacity: 0.22;
}
.rs-note {
cursor: pointer;
outline: none;
}
.rs-dot {
fill: var(--bg);
stroke: var(--ink-4);
stroke-width: 2.2;
}
.rs-stem {
stroke: var(--ink-4);
stroke-width: 2;
stroke-linecap: round;
}
.rs-note.done .rs-dot {
fill: var(--ink);
stroke: var(--ink);
}
.rs-note.done .rs-stem {
stroke: var(--ink);
}
.rs-note.today .rs-dot {
fill: var(--accent);
stroke: var(--accent);
}
.rs-note.today .rs-stem {
stroke: var(--accent);
}
.rs-note.paywall .rs-dot,
.rs-note.soon .rs-dot {
stroke-dasharray: 3 3;
}
.rs-halo {
fill: color-mix(in srgb, var(--accent) 20%, transparent);
transform-box: fill-box;
transform-origin: center;
animation: rs-breathe 2.4s ease-in-out infinite;
}
@keyframes rs-breathe {
0%, 100% { transform: scale(0.85); opacity: 0.9; }
50% { transform: scale(1.18); opacity: 0.45; }
}
.rs-n {
font-size: 11px;
fill: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.rs-note.today .rs-n {
fill: var(--accent);
font-weight: 600;
}
.rs-hit {
fill: transparent;
}
.rs-note:focus-visible .rs-dot {
stroke: var(--accent);
stroke-width: 3;
}
@media (prefers-reduced-motion: reduce) {
.rs-halo {
animation: none;
}
}
.rs-tag {
fill: var(--accent);
}
.rs-tag-t {
font-size: 11.5px;
font-weight: 600;
fill: #fff;
}
.rl-hero {
margin: 4px 0 8px;
}
.rl-hero h2 {
margin: 6px 0 0;
font-size: 24px;
line-height: 30px;
font-weight: 600;
}
.rl-hero-sub {
margin: 6px 0 0;
font-size: 15px;
line-height: 21px;
opacity: 0.72;
}
.rl-hero .btn {
width: 100%;
margin-top: 16px;
}
.rdw-rail {
display: flex;
gap: 10px;
margin: 16px calc(var(--gutter) * -1) 0;
padding: 2px var(--gutter) 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.rdw-rail::-webkit-scrollbar {
display: none;
}
.rdw-card {
appearance: none;
flex: 0 0 78%;
max-width: 320px;
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
font: inherit;
text-align: left;
scroll-snap-align: center;
cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rdw-card.sel {
box-shadow: inset 0 0 0 2px var(--ink);
}
.rdw-card.now.sel {
box-shadow: inset 0 0 0 2px var(--accent);
}
.rdw-card:active {
transform: scale(0.985);
}
.rdw-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.rdw-top small {
display: block;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.rdw-top b {
display: block;
margin-top: 4px;
font-size: 19px;
line-height: 24px;
font-weight: 600;
}
.rdw-ring {
flex: none;
width: 56px;
height: 56px;
}
.rdw-ring-bg {
fill: none;
stroke: var(--chip);
stroke-width: 6;
}
.rdw-ring-on {
fill: none;
stroke: var(--accent);
stroke-width: 6;
stroke-linecap: round;
}
.rdw-ring-t {
fill: var(--ink);
font-size: 13px;
font-weight: 600;
}
.rdw-dots {
display: flex;
gap: 6px;
}
.rdw-dots i {
flex: 1;
height: 8px;
border-radius: 4px;
background: var(--chip);
}
.rdw-dots i.on {
background: var(--ink);
}
.rdw-dots i.now {
background: var(--accent);
}
.rdw-foot {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rdw-lessons {
margin-top: 8px;
}
.me-card {
appearance: none;
display: block;
width: 100%;
margin: 20px 0 16px;
padding: 16px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
.me-card:active {
background: var(--well-2);
}
.me-who {
display: flex;
align-items: center;
gap: 12px;
}
.me-ava {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 19px;
font-weight: 500;
color: #ffffff;
background: var(--ib-ink);
}
.me-ava .ic {
width: 20px;
height: 20px;
}
.me-name {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.me-name b {
font-size: 17px;
line-height: 22px;
font-weight: 500;
}
.me-name span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.me-lv {
display: block;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.me-lv-top,
.lv-now-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.me-lv-n,
.lv-now-n {
font-size: 14px;
line-height: 20px;
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.me-lv-name {
display: block;
margin: 4px 0 12px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
}
.me-lv-next {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.me-lv-next .go {
flex: none;
width: 18px;
height: 18px;
stroke-width: 1.6;
color: var(--ink-3);
}
.sw-list .item + .item::before,
.list .plain-row + .item::before {
left: 16px;
}
.sw-row {
min-height: 72px;
}
.sw-row .txt {
padding-right: 4px;
}
.sw-hint {
margin: -6px 4px 20px;
}
.notify .hint .link-btn {
font-size: 14px;
color: var(--ink);
}
.choice {
display: grid;
gap: 8px;
}
.opt.wide {
align-items: flex-start;
padding: 14px 16px 14px 14px;
}
.opt.wide::before {
margin-top: 0;
}
.opt-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.opt-txt b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.opt-txt span {
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: var(--ink-2);
}
.mode-view .hint.after {
margin: 14px 4px 0;
color: var(--ink);
opacity: 0;
transition: opacity 0.25s ease;
}
.mode-view .hint.after.on {
opacity: 1;
}
.theme-view .hint {
margin: 12px 4px 0;
}
.zone-sheet h3 {
margin: 0;
font-size: 19px;
line-height: 24px;
font-weight: 500;
}
.zone-sheet .hint {
margin: 6px 0 16px;
}
.zone-sheet .opt.wide {
min-height: 50px;
padding: 13px 16px 13px 14px;
}
.tool-head {
margin: 8px 0 20px;
}
.tool-head .eyebrow-s {
margin: 0 0 2px;
}
.tool-head .lead {
margin-top: 8px;
}
.lv-now {
margin: 0 0 8px;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.lv-now h2 {
margin: 4px 0 12px;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
}
.lv-now-next {
margin: 10px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.lv-gift {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: 15px;
line-height: 21px;
color: var(--ink);
}
.lv-gift .ic {
flex: none;
width: 20px;
height: 20px;
stroke-width: 1.8;
color: var(--ink-2);
}
.lv-list {
padding: 0;
list-style: none;
}
.lv-list .item {
align-items: flex-start;
min-height: 0;
padding: 14px 16px;
}
.lv-dot {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 15px;
font-weight: 500;
color: #ffffff;
background: var(--ink-4);
}
.lv-dot .ic {
width: 16px;
height: 16px;
stroke-width: 3;
}
.lv-row.done .lv-dot {
background: var(--good);
}
.lv-row.now .lv-dot {
color: var(--btn-ink);
background: var(--btn);
}
.lv-row.next .txt b {
color: var(--ink-2);
}
.lv-list .txt small {
margin-top: 2px;
font-size: 12px;
line-height: 16px;
color: var(--ink-3);
}
.earn .item {
min-height: 56px;
}
.earn-n {
flex: none;
font-size: 16px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.time-chips {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 8px;
}
.tchip {
appearance: none;
min-height: 46px;
padding: 8px 4px;
border: 0;
border-radius: 14px;
background: var(--well);
font-size: 16px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink);
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.12s ease;
}
.tchip:active {
transform: scale(0.96);
}
.tchip.on {
color: var(--btn-ink);
background: var(--btn);
}
.fine {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 10px;
border-radius: var(--r-group);
background: var(--well);
}
.fine-mid {
flex: 1;
text-align: center;
}
.fine-edit { appearance: none; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.fine-edit small { text-decoration: underline; text-underline-offset: 3px; }
.fine-edit:active { opacity: .65; }
.fine-val {
display: block;
font-size: 30px;
line-height: 38px;
font-weight: 500;
letter-spacing: -0.6px;
font-variant-numeric: tabular-nums;
}
.fine-mid small {
font-size: 12px;
color: var(--ink-2);
}
.tp-step {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
color: var(--ink);
background: var(--bg);
cursor: pointer;
transition: transform 0.12s ease;
}
.tp-step:active {
transform: scale(0.92);
}
.pace {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.pace-opt {
appearance: none;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 12px;
border: 0;
border-radius: 14px;
background: var(--well);
text-align: left;
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.12s ease;
}
.pace-opt:active {
transform: scale(0.97);
}
.pace-opt b {
font-size: 15px;
font-weight: 500;
}
.pace-opt small {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.pace-opt.on {
color: var(--btn-ink);
background: var(--btn);
}
.pace-opt.on small {
color: inherit;
opacity: 0.7;
}
.pace-soon { justify-content: center; align-items: center; text-align: center; gap: 8px; color: var(--ink-2); cursor: default; }
.pace-soon .ic { width: 20px; height: 20px; }
.pace-soon:active { transform: none; }
.wake-preview {
transition: opacity 0.2s ease;
}
.wake-preview.loading {
opacity: 0.45;
pointer-events: none;
}
.wake-card .facts {
margin-top: 12px;
}
.pv-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.pv-stats div {
padding: 10px 8px;
border-radius: 14px;
background: var(--bg);
text-align: center;
}
.pv-stats b {
display: block;
font-size: 17px;
line-height: 22px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.pv-stats span {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.pv-empty {
display: flex;
align-items: center;
gap: 14px;
}
.pv-empty .ic {
flex: none;
width: 24px;
height: 24px;
color: var(--ink-2);
}
.pv-empty p {
margin: 0;
font-size: 15px;
color: var(--ink-2);
}
.wake .btn.ghost {
margin-top: 4px;
}
.mode-view .after .ic.ok {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
vertical-align: -3px;
stroke-width: 2.6;
color: var(--good);
}
.help-aside {
display: flex;
flex: none;
align-items: center;
gap: 8px;
}
.profile-streak { margin: 16px 0; }
.level-gift-received { color: var(--accent-text); }
.streak-detail p + p { margin-top: 16px; }
.levels-coming { margin: 16px 0 24px; text-align: left; }
.payment-help { width: 100%; margin-top: 24px; }
.profile-entry-row {display:flex;align-items:center;gap:16px;margin:12px 0 20px;padding:16px;border-radius:var(--r-group);background:var(--accent-soft)}
.profile-entry {appearance:none;display:flex;align-items:center;flex:1;min-width:0;gap:12px;padding:0;
border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.profile-entry .me-ava {width:52px;height:52px;font-size:24px}
.profile-entry-name {display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
.profile-entry-name b {font-size:24px;line-height:28px;font-weight:500;overflow-wrap:anywhere}
.profile-entry-name>span {font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-entry>.go {flex:none;width:20px;height:20px;color:var(--ink-3)}
.profile-settings-button {appearance:none;display:grid;place-items:center;flex:none;width:44px;height:44px;
padding:0;border:0;border-radius:50%;background:var(--well);color:var(--ink);cursor:pointer}
.profile-settings-button>.ic {width:22px;height:22px}
.profile-entry:active {opacity:.7}
.profile-settings-button:active {background:var(--well-2)}
.profile-connections .item {position:relative}
.profile-connections .ava-count {right:32px;top:12px}
.personal-profile-bar {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.personal-profile-bar>.back-link {margin:0}
.personal-profile-bar>.profile-settings-button {margin-left:auto}
.personal-profile-who {display:flex;align-items:center;flex-direction:column;margin:16px 0 28px;text-align:center}
.personal-profile-who>.me-ava {width:80px;height:80px;margin-bottom:16px;font-size:32px}
.personal-profile-who>h1 {max-width:100%;margin:0;font-size:24px;line-height:30px;font-weight:500;overflow-wrap:anywhere}
.personal-profile-who>p {margin:4px 0 0;font-size:15px;line-height:21px;color:var(--ink-2)}
.profile-rhythm {display:flex;align-items:center;width:100%;gap:16px;margin:0 0 16px;padding:20px 16px;
appearance:none;border:0;border-radius:var(--r-group);background:var(--well);color:var(--ink);text-align:left;cursor:pointer}
.profile-rhythm>span {display:flex;flex:1;min-width:0;flex-direction:column;gap:6px}
.profile-rhythm b {font-size:24px;font-weight:500;line-height:28px;font-variant-numeric:tabular-nums}
.profile-rhythm span>span {font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-rhythm>.go {flex:none;width:18px;height:18px;color:var(--ink-3)}
.profile-rhythm:active {background:var(--well-2)}
.me-card-levels {margin-top:0}
.me-card-levels>.me-lv {margin-top:0;padding-top:0;border:0}
.profile-settings>.section {margin-top:24px}
.profile-overview {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}
.profile-stat {appearance:none;display:flex;align-items:flex-start;flex-direction:column;width:100%;padding:16px;
margin:0;border:0;border-radius:var(--r-group);background:var(--well);color:var(--ink);text-align:left;cursor:pointer}
.profile-stat-label {display:flex;align-items:center;gap:8px;font-size:15px;line-height:21px}
.profile-stat-label .bubble {width:28px;height:28px}
.profile-stat-label .bubble .ic {width:17px;height:17px}
.profile-stat>b {margin:12px 0 2px;font-size:32px;line-height:36px;font-weight:500;font-variant-numeric:tabular-nums}
.profile-stat>span:not(.profile-stat-label) {font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-stat>small {margin-top:12px;font-size:12px;line-height:17px;color:var(--ink-2)}
.profile-stat:active {background:var(--well-2)}
.profile-settings>.section>h2 {font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2)}
.profile-avatar {display:grid;place-items:center;overflow:hidden;flex:none;position:relative;color:var(--ink)}
.profile-avatar img {display:block;max-width:none;pointer-events:none}
.profile-avatar-photo {width:100%;height:100%;object-fit:cover}
.profile-avatar-art {width:78%;height:78%;object-fit:contain;transition:width .22s var(--ease),height .22s var(--ease)}
.profile-avatar.size-small .profile-avatar-art {width:60%;height:60%}
.profile-avatar.size-large .profile-avatar-art {width:96%;height:96%}
.tone-neutral.profile-avatar,.profile-preset-colors .tone-neutral {background:var(--well-2)}
.tone-violet.profile-avatar,.profile-preset-colors .tone-violet {background:var(--accent-soft)}
.tone-sky.profile-avatar,.profile-preset-colors .tone-sky {background:color-mix(in srgb,var(--ib-sky) 16%,var(--bg))}
.tone-pink.profile-avatar,.profile-preset-colors .tone-pink {background:color-mix(in srgb,var(--ib-pink) 16%,var(--bg))}
.profile-avatar-edit {appearance:none;position:relative;width:96px;height:96px;margin:0 0 16px;padding:0;border:0;background:none;cursor:pointer}
.profile-avatar-edit .me-ava {width:96px;height:96px;margin:0;font-size:36px}
.profile-avatar-camera {position:absolute;right:-2px;bottom:0;display:grid;place-items:center;width:32px;height:32px;border:3px solid var(--bg);border-radius:50%;background:var(--btn);color:var(--btn-ink)}
.profile-avatar-camera .ic {width:17px;height:17px}
.personal-profile-about {margin:-8px 0 12px;text-align:center;white-space:pre-line;overflow-wrap:anywhere}
.personal-profile-interests {margin:0 0 20px;color:var(--ink-2);font-size:14px;line-height:21px;text-align:center;overflow-wrap:anywhere}
.personal-profile>.profile-edit-button {margin:0 0 24px}
.personal-profile-info {display:grid;gap:20px;background:var(--well);border-radius:var(--r-group);padding:20px;margin:8px 0 16px}
.personal-profile-info h2 {margin:0 0 8px;font-size:14px;line-height:20px;color:var(--ink-2);font-weight:400}
.personal-profile-info p {margin:0;font-size:16px;line-height:24px;overflow-wrap:anywhere}
.profile-entry-row {transition:background-color .3s ease}
.profile-entry-row[data-avatar-tone=sky] {background:color-mix(in srgb,var(--ib-sky) 12%,var(--bg))}
.profile-entry-row[data-avatar-tone=pink] {background:color-mix(in srgb,var(--ib-pink) 12%,var(--bg))}
.profile-entry-row[data-avatar-tone=violet] {background:var(--accent-soft)}
.profile-edit {padding-bottom:32px}
.profile-edit-privacy {margin:12px 0 24px;font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-edit-field {display:grid;gap:8px;margin:0 0 20px;min-width:0}
.profile-edit-field label {font-size:15px;font-weight:500}
.profile-edit-field .input {width:100%;min-width:0;font-size:16px;line-height:24px;padding:14px 16px;scroll-margin:24px 0}
.profile-edit-field textarea {resize:none;min-height:104px}
.profile-edit-count {font-size:12px;line-height:16px;color:var(--ink-2);text-align:right}
.profile-edit-status {margin:0 0 16px;font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-edit-status:empty {display:none}
.profile-photo-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.profile-photo-heading>.sheet-title {margin:0}
.profile-photo-heading .profile-photo-close {flex:none;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border-radius:50%;background:var(--well);color:var(--ink)}
.profile-photo-close>span,.profile-photo-zoom>span {display:none}
.profile-photo-close>.ic,.profile-photo-zoom>.ic {display:block;width:20px;height:20px}
.profile-photo-lead {margin:0 0 20px;font-size:15px;line-height:22px}
.profile-photo-status {margin:12px 0 0;font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-photo-status:empty {display:none}
.profile-avatar-methods {display:grid;gap:16px}
.profile-avatar-method {padding:20px;border:0;border-radius:var(--r-group);background:var(--well);color:var(--ink);text-align:left}
.profile-avatar-method-title {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.profile-avatar-method-title h3 {margin:0;font-size:19px;line-height:24px;font-weight:500}
.profile-avatar-method-title>span {padding:4px 8px;border-radius:8px;background:var(--accent-soft);color:var(--accent-text);font-size:12px;line-height:16px}
.profile-avatar-method p {margin:12px 0 20px;font-size:15px;line-height:21px;color:var(--ink-2)}
.profile-avatar-sources,.profile-photo-auto {display:flex;gap:12px}
.profile-avatar-sources>.btn,.profile-photo-auto>.btn {flex:1;min-width:0;font-size:14px;padding:10px 8px;background:var(--bg)}
.profile-avatar-ready {appearance:none;display:flex;align-items:center;gap:16px;width:100%;cursor:pointer}
.profile-avatar-ready>span {display:grid;gap:8px;flex:1;min-width:0}
.profile-avatar-ready b {font-size:19px;line-height:24px;font-weight:500}
.profile-avatar-ready small {font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-avatar-ready>.ic {width:18px;height:18px;color:var(--ink-2);flex:none}
.profile-photo-auto {margin:0 0 20px;padding:4px;border-radius:var(--r-btn);background:var(--well)}
.profile-photo-crop::after {content:'';position:absolute;inset:-20%;pointer-events:none;opacity:0;background:linear-gradient(transparent 40%,var(--accent-soft) 50%,transparent 60%);transform:translateY(-70%)}
.profile-photo-crop.analyzing::after {opacity:.6;animation:photo-frame-scan .65s ease-in-out both}
@keyframes photo-frame-scan {to{transform:translateY(70%);opacity:0}}
@media(max-height:760px){.profile-photo-crop{width:min(100%,240px)}.profile-photo-lead{margin-bottom:16px}.profile-photo-controls{margin:12px 0 16px}}
@media(prefers-reduced-motion:reduce){.profile-photo-crop.analyzing::after{animation:none;opacity:0}.profile-entry-row{transition:none}}
.profile-photo-crop {position:relative;width:min(100%,320px);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:var(--r-card);touch-action:none;background:var(--well)}
.profile-photo-crop canvas {display:block;width:100%;height:100%}
.profile-photo-ring {position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 100px var(--scrim);border:2px solid var(--dark-ink);pointer-events:none}
.profile-photo-controls {display:flex;align-items:center;justify-content:center;gap:20px;margin:16px 0 24px}
.profile-photo-controls>.profile-photo-zoom {width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border-radius:50%;background:var(--well);color:var(--ink)}
.profile-photo-scale {min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
.profile-preset-preview {display:grid;place-items:center;margin:8px 0 24px}
.profile-preset-preview>.me-ava {width:112px;height:112px;font-size:44px}
.profile-preset-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.profile-preset-grid>button {appearance:none;display:flex;align-items:center;flex-direction:column;gap:8px;min-width:0;padding:12px 4px;border:2px solid transparent;border-radius:var(--r-row);background:var(--well);color:var(--ink);font-size:12px;line-height:18px;cursor:pointer}
.profile-preset-grid>button[aria-checked=true] {border-color:var(--ink)}
.profile-preset-grid .me-ava {width:48px;height:48px;font-size:24px}
.profile-preset-label {margin:24px 0 12px;font-size:14px;line-height:20px;color:var(--ink-2)}
.profile-preset-colors {display:flex;gap:16px;justify-content:center}
.profile-preset-colors>button {appearance:none;width:44px;height:44px;padding:0;border:3px solid var(--bg);border-radius:50%;outline:2px solid transparent;cursor:pointer}
.profile-preset-colors>button[aria-checked=true] {outline-color:var(--ink)}
.profile-preset-sizes {display:flex;gap:4px;padding:4px;margin-bottom:24px;border-radius:var(--r-row);background:var(--well)}
.profile-preset-sizes>button {appearance:none;flex:1;min-width:0;min-height:44px;padding:8px 4px;border:0;border-radius:10px;background:none;color:var(--ink-2);font-size:14px;line-height:20px;cursor:pointer}
.profile-preset-sizes>button[aria-checked=true] {background:var(--bg);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.profile-avatar-art{transition:none}}
.avatar-picker-sheet .sheet-body {overflow-x:hidden}
.avatar-picker-stage {min-width:0;display:flex;flex-direction:column;gap:20px}
.avatar-picker-head {display:flex;align-items:center;gap:12px;min-height:44px}
.avatar-picker-head .sheet-title {flex:1;min-width:0;margin:0;font-size:20px;line-height:26px}
.avatar-picker-close,.avatar-picker-back {appearance:none;flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--well);color:var(--ink)}
.avatar-picker-head .ic {width:20px;height:20px}
.avatar-picker-tabs {position:relative;display:flex;gap:4px;padding:4px;border-radius:var(--r-btn);background:var(--well)}
.avatar-picker-tabs::before {content:'';position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:10px;background:var(--bg);transform:translateX(calc(var(--tab,1)*100%));transition:transform .28s var(--ease)}
.avatar-picker-tabs>button {position:relative;z-index:1}
.avatar-picker-tabs>button {appearance:none;flex:1;min-height:44px;border:0;border-radius:10px;background:none;color:var(--ink-2);font-size:16px}
.avatar-picker-tabs>button[aria-selected=true] {background:transparent;color:var(--ink)}
.avatar-picker-content {display:flex;flex-direction:column;gap:20px;min-width:0}
.avatar-picker-preview {display:grid;place-items:center;min-height:128px}
.avatar-picker-preview>.me-ava {width:128px;height:128px;margin:0;font-size:44px}
.avatar-picker-hint {margin:0;text-align:center;font-size:14px;line-height:20px;color:var(--ink-2)}
.avatar-picker-rail {position:relative;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;min-width:0;padding:8px calc(50% - 44px);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.avatar-picker-rail::-webkit-scrollbar {display:none}
.avatar-picker-rail>button {appearance:none;display:flex;align-items:center;flex-direction:column;flex:0 0 88px;gap:10px;min-width:0;padding:4px 0;border:0;background:none;color:var(--ink);scroll-snap-align:center;cursor:pointer;transform:scale(calc(1 - var(--away,0)*.12));opacity:calc(1 - var(--away,0)*.35);will-change:transform}
.avatar-picker-rail .me-ava {width:80px;height:80px;margin:0;font-size:28px}
.avatar-picker-rail [aria-checked=true] .me-ava,.avatar-picker-rail [aria-checked=true] .avatar-picker-swatch {box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.avatar-picker-name {font-size:12px;line-height:18px;white-space:nowrap}
.avatar-picker-swatch {display:block;width:64px;height:64px;border-radius:50%;margin:8px}
.avatar-picker-swatch.tone-neutral {background:var(--well-2)}
.avatar-picker-swatch.tone-violet {background:var(--accent-soft)}
.avatar-picker-swatch.tone-sky {background:color-mix(in srgb,var(--ib-sky) 16%,var(--bg))}
.avatar-picker-swatch.tone-pink {background:color-mix(in srgb,var(--ib-pink) 16%,var(--bg))}
.avatar-picker-motion {appearance:none;display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 16px;border:0;border-radius:var(--r-row);background:var(--well);color:var(--ink);text-align:left}
.avatar-picker-motion>span:first-child {display:grid;gap:4px;flex:1;min-width:0}
.avatar-picker-motion b {font-size:15px;line-height:21px;font-weight:500}
.avatar-picker-motion small {font-size:12px;line-height:18px;color:var(--ink-2)}
.avatar-picker-switch {width:42px;height:26px;border-radius:20px;background:var(--well-2);padding:3px;flex:none;transition:background .2s var(--ease)}
.avatar-picker-switch::after {content:'';display:block;width:20px;height:20px;border-radius:50%;background:var(--bg);transition:transform .2s var(--ease)}
[aria-checked=true]>.avatar-picker-switch {background:var(--accent)}
[aria-checked=true]>.avatar-picker-switch::after {transform:translateX(16px)}
.profile-avatar.animated .profile-avatar-art {animation:avatar-float 3.6s ease-in-out infinite}
@keyframes avatar-float {50%{transform:translateY(-3px) rotate(3deg)}}
@media(max-height:720px){.avatar-picker-stage{gap:16px}.avatar-picker-preview{min-height:96px}.avatar-picker-preview>.me-ava{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){.profile-avatar.animated .profile-avatar-art{animation:none}.avatar-picker-switch,.avatar-picker-switch::after,.avatar-picker-tabs::before{transition:none}}
.profile-photo-crop-sheet .panel {max-height:calc(100dvh - var(--full-top,0px) - 16px);background:var(--bg)}
.profile-photo-crop-sheet .sheet-body {display:grid;gap:12px;align-content:start;background:inherit}
.profile-photo-crop-sheet .profile-photo-heading,.profile-photo-crop-sheet .profile-photo-lead,
.profile-photo-crop-sheet .profile-photo-controls,.profile-photo-crop-sheet .profile-photo-auto,
.profile-photo-crop-sheet .profile-photo-status {margin:0}
.profile-photo-crop-sheet .profile-photo-crop {width:min(100%,320px,max(160px,calc(100dvh - var(--full-top,0px) - var(--safe-b,0px) - 520px)))}
.profile-photo-crop-sheet .profile-photo-status {min-height:40px}
.profile-photo-footer {position:sticky;bottom:0;z-index:1;display:grid;gap:8px;padding-top:8px;background:inherit}
.profile-photo-footer>.btn {margin:0}
.lv-daily {
margin: 12px 0 0;
}
.lv-road .item + .item::before {
display: none;
}
.lv-road .lv-row {
position: relative;
}
.lv-road .lv-row:not(:last-child)::after {
content: "";
position: absolute;
left: 31px;
top: 48px;
bottom: -14px;
width: 2px;
border-radius: 1px;
background: repeating-linear-gradient(to bottom, var(--ink-4) 0 4px, transparent 4px 9px);
}
.lv-road .lv-row.done:not(:last-child)::after {
background: var(--good);
}
.lv-road .lv-row.now .lv-dot {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--btn) 18%, transparent);
}
.seg.period {
margin: 18px 0 14px;
}
.rhythm .stat-card {
margin-bottom: 8px;
}
.sc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 16px;
margin-top: 18px;
}
.sc-grid div {
display: flex;
flex-direction: column;
gap: 2px;
}
.sc-grid b {
font-size: 20px;
line-height: 26px;
font-weight: 500;
color: var(--ink);
}
.sc-grid span {
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.rhythm .section {
margin-top: 32px;
}
.sc-grid .sc-was,
.sleep-stat > p > .sc-was {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.night-readout {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin: 0 2px 14px;
min-height: 50px;
}
.night-readout > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.night-readout b {
font-size: 24px;
line-height: 30px;
font-weight: 500;
color: var(--ink);
}
.night-readout .nr-clock {
text-align: right;
}
.night-readout .nr-clock b {
font-size: 17px;
line-height: 22px;
}
.night-readout span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.chart-card {
padding: 18px 16px 16px;
}
.chart-card > .facts {
margin: 14px 2px 0;
}
.chart-card > .facts:first-child {
margin: 0 2px 14px;
}
.list.more {
margin-top: 32px;
}
.chart-box {
position: relative;
}
.chart {
display: block;
width: 100%;
height: auto;
overflow: visible;
font-family: var(--font);
}
.chart .grid {
stroke: var(--chart-grid);
stroke-width: 1;
}
.chart .grid.dash {
stroke-dasharray: 3 4;
}
.chart .axis {
fill: var(--chart-axis);
font-size: 12px;
font-weight: 400;
}
.chart .axis.we {
fill: var(--accent-text);
}
.chart .axis.strong {
fill: var(--ink);
font-weight: 500;
}
.chart .axis.unit {
font-size: 12px;
}
.chart .target {
stroke: var(--ink);
stroke-opacity: 0.6;
stroke-width: 1.5;
stroke-dasharray: 4 4;
}
.chart .miss {
stroke: var(--ink-4);
stroke-width: 2;
stroke-dasharray: 1 5;
stroke-linecap: round;
}
.chart .tick {
stroke: var(--chart-grid);
}
.chart .hit {
fill: transparent;
cursor: pointer;
outline: none;
}
.chart .bar {
transition: opacity 0.2s ease;
}
.chart .bar.f1 { fill: var(--c-f1); }
.chart .bar.f2 { fill: var(--c-f2); }
.chart .bar.f3 { fill: var(--c-f3); }
.chart .bar.f4 { fill: var(--c-f4); }
.chart .bar.f5 { fill: var(--c-f5); }
.chart .bar.grow {
transform-box: fill-box;
transform-origin: 0 50%;
animation: grow 0.6s var(--ease) backwards;
}
.chart .dbar {
fill: var(--ink-4);
transition: opacity 0.2s ease;
}
.chart .dbar.good {
fill: var(--accent);
}
.chart .dbar.rise {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: rise-y 0.6s var(--ease) backwards;
}
@keyframes rise-y {
from {
transform: scaleY(0);
}
}
.picking .bar,
.picking .dbar {
opacity: 0.25;
}
.picking .bar.on,
.picking .dbar.on {
opacity: 1;
}
.night-pick {
display: none;
margin: 12px 2px 0;
font-size: 14px;
line-height: 20px;
color: var(--ink);
}
.night-pick.on {
display: block;
animation: fade-in 0.28s var(--ease) backwards;
}
.night-pick b {
display: block;
font-size: 14px;
font-weight: 500;
}
.night-pick span {
color: var(--ink-2);
}
.chart-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: 14px 2px 0;
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.chart-legend + .chart-legend {
margin-top: 6px;
}
.chart-legend .dash {
width: 22px;
border-top: 2px dashed var(--ink);
opacity: 0.6;
}
.chart-legend .dash.ahead {
margin-left: 6px;
border-top-color: var(--accent);
opacity: 1;
}
.chart-legend .key {
width: 6px;
height: 14px;
border-radius: 3px;
background: var(--ink-4);
}
.chart-legend .key.ok {
background: var(--accent);
}
.chart-legend .key + .key,
.chart-legend .key ~ .dash {
margin-left: 8px;
}
.chart-legend .dot-hit,
.chart-legend .dot-miss {
width: 10px;
height: 10px;
border-radius: 50%;
}
.chart-legend .dot-hit {
background: var(--accent);
}
.chart-legend .dot-miss {
margin-left: 6px;
box-shadow: inset 0 0 0 2px var(--accent);
}
.chart .goal-l {
stroke: var(--ink);
stroke-opacity: 0.4;
stroke-width: 1.5;
stroke-dasharray: 4 5;
}
.chart .goal-t {
fill: var(--ink);
font-size: 12px;
font-weight: 500;
}
.chart .today-l {
stroke: var(--chart-grid);
stroke-width: 1.5;
}
.chart .today-t {
fill: var(--ink-2);
font-size: 12px;
}
.chart .stairs {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.chart .stairs.plan {
stroke-dasharray: 5 5;
opacity: 0.55;
}
.chart .stairs.fade {
animation: fade-in 0.6s ease 0.6s backwards;
}
.chart .stairs.draw {
animation: draw 1.1s var(--ease) forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.chart .goal-d {
fill: var(--ink);
stroke: var(--well);
stroke-width: 2.5;
}
.chart .start-d {
fill: var(--accent);
stroke: var(--well);
stroke-width: 2.5;
}
.chart .wake-d {
fill: var(--well);
stroke: var(--accent);
stroke-width: 2;
transition: opacity 0.2s ease;
}
.chart .wake-d.hit {
fill: var(--accent);
stroke: var(--well);
}
.picking .wake-d {
opacity: 0.35;
}
.picking .wake-d.on {
opacity: 1;
}
.chart .pop {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: pop 0.4s var(--ease) backwards;
}
.chart .pop.late {
animation-delay: 0.85s;
}
@keyframes pop {
from {
transform: scale(0);
}
}
.chart .nbar {
fill: var(--ink-4);
transition: opacity 0.2s ease;
}
.chart .nbar.ok {
fill: var(--accent);
}
.chart .nbar.rise {
transform-box: fill-box;
transform-origin: 50% 0;
animation: rise-y 0.6s var(--ease) backwards;
}
.chart .nplan {
fill: none;
stroke: var(--ink);
stroke-opacity: 0.45;
stroke-width: 1.5;
stroke-dasharray: 3 4;
}
.chart .nmiss {
fill: var(--ink-4);
}
.melody-card {
padding: 18px 14px 16px;
}
.chart.staff .staff-l {
stroke: var(--line);
stroke-width: 1;
}
.chart .melody-l {
fill: none;
stroke: var(--accent);
stroke-opacity: 0.35;
stroke-width: 1.5;
stroke-linejoin: round;
}
.chart .melody-l.fade {
animation: fade-in 0.6s ease 0.4s backwards;
}
.chart .nt ellipse {
fill: var(--well);
stroke: var(--accent);
stroke-width: 1.6;
}
.chart .nt.full ellipse {
fill: var(--accent);
stroke: none;
}
.chart .nt line {
stroke: var(--accent);
stroke-width: 1.5;
stroke-linecap: round;
}
.chart .nt {
transition: opacity 0.2s ease;
}
.picking .nt {
opacity: 0.3;
}
.picking .nt.on {
opacity: 1;
}
.melody-sum {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 2px 6px;
}
.melody-sum b {
font-size: 19px;
line-height: 24px;
font-weight: 500;
color: var(--ink);
}
.melody-sum span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.melody-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 12px 2px 0;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.melody-legend > span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.melody-legend .ml-ic {
display: grid;
place-items: center;
color: var(--accent);
}
.melody-legend .ml-ic .ic {
width: 16px;
height: 16px;
stroke-width: 2.2;
}
.melody-legend .note-mark {
width: 12px;
height: 16px;
}
.note-mark {
width: 15px;
height: 20px;
overflow: visible;
}
.note-mark ellipse {
fill: var(--bg);
stroke: currentColor;
stroke-width: 1.9;
}
.note-mark.full ellipse {
fill: currentColor;
stroke: none;
}
.note-mark line {
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
.melody-btns {
margin-top: 24px;
gap: 8px;
}
.melody-wait .pbar {
margin-top: 4px;
}
.chart-legend .lg {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 8px;
white-space: nowrap;
}
.chart-legend .lg .dash.ahead,
.chart-legend .lg .dot-miss {
margin-left: 0;
}
.kv-rows {
margin-top: 14px;
}
.kv-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 12px 2px;
border-top: 1px solid var(--line);
}
.kv-row span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kv-row b {
flex: none;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.kv-row .link-btn {
flex: none;
font-size: 14px;
color: var(--ink);
}
.kv-card {
padding: 4px 16px;
}
.kv-card .kv-rows {
margin: 0;
}
.kv-card .kv-row:first-child {
border-top: 0;
}
.segm.rh-courses {
margin: 18px 0 0;
}
.rhythm > .stat-card {
margin-top: 20px;
}
.section .per {
display: flex;
flex: none;
align-items: baseline;
gap: 6px;
}
.per button {
appearance: none;
padding: 4px 0;
border: 0;
background: none;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: var(--ink-2);
cursor: pointer;
}
.per button.on {
font-weight: 500;
color: var(--ink);
}
.per-sep {
font-size: 14px;
color: var(--ink-3);
}
.now-line {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.now-line > .ic {
flex: none;
width: 20px;
height: 20px;
margin-top: 1px;
stroke-width: 1.8;
color: var(--ink-2);
}
.now-line .txt {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.now-line .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.now-line .txt b {
font-size: 15px;
line-height: 21px;
font-weight: 500;
color: var(--ink);
}
.chart .row-l {
fill: var(--ink);
font-size: 14px;
font-weight: 500;
}
.chart .row-n {
fill: var(--ink-2);
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.chart .dg {
fill: none;
stroke: var(--ink-4);
stroke-width: 1.4;
transition: opacity 0.2s ease;
}
.chart .dg.full {
fill: var(--accent);
stroke: none;
}
.chart-legend .dgk {
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: inset 0 0 0 1.4px var(--ink-4);
}
.chart-legend .dgk.full {
background: var(--accent);
box-shadow: none;
}
.chart .axis-w {
fill: var(--ink-2);
font-size: 12px;
}
.chart .col-on {
fill: var(--well-2);
pointer-events: none;
}
.chart-legend .line {
width: 16px;
height: 2px;
border-radius: 1px;
background: var(--accent);
}
.wk-pr > .section {
margin-top: 24px;
}
.wk-pr-card {
padding: 18px 16px 20px;
}
.wk-pr-card > p {
margin: 8px 0 18px;
}
.wk-pr-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 18px;
}
.wk-pr-pair div {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.wk-pr-pair b {
font-size: 24px;
line-height: 28px;
font-weight: 500;
color: var(--ink);
}
.wk-pr-pair span {
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.wk-pr-rows {
margin-top: 8px;
}
.wk-pr-rows .kv-row span {
font-size: 16px;
line-height: 22px;
color: var(--ink);
}
.wk-pr-rows .kv-row b {
font-weight: 400;
color: var(--ink-2);
}
.form-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin: 8px 0 0;
}
.form-head .art {
display: none;
}
.form-head + .lead {
margin: 8px 0 24px;
}
.tp {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: var(--r-group);
background: var(--well);
}
.tp-time {
position: relative;
flex: 1;
display: block;
text-align: center;
font-size: 30px;
line-height: 48px;
font-weight: 500;
letter-spacing: -0.8px;
cursor: pointer;
}
.tp-time input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
border: 0;
cursor: pointer;
font-size: 16px;
}
.tp-extra {
display: flex;
justify-content: center;
margin-top: 10px;
}
.tp-extra .btn {
min-height: 38px;
font-size: 14px;
}
.opts.factors {
grid-template-columns: 1fr;
}
.feels {
display: flex;
justify-content: space-between;
gap: 6px;
}
.feel {
appearance: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1;
min-width: 0;
min-height: 78px;
padding: 12px 2px 10px;
border: 0;
border-radius: 16px;
background: var(--well);
font-size: 12px;
line-height: 14px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.12s ease;
}
.feel:active {
transform: scale(0.96);
}
.feel.on {
color: var(--btn-ink);
background: var(--btn);
}
.feel.on .feelbar i {
background: currentColor;
opacity: 0.3;
}
.feel.on .feelbar i.on {
opacity: 1;
}
.feels + .hint {
text-align: center;
}
.estimate {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 16px;
padding: 14px 16px;
border-radius: var(--r-group);
color: var(--dark-ink);
background: var(--dark-card);
}
.estimate .ic {
color: var(--accent);
}
.estimate b {
display: block;
font-size: 17px;
line-height: 22px;
font-weight: 500;
}
.estimate span {
font-size: 14px;
color: var(--dark-ink-2);
}
.submit {
margin-top: 8px;
}
.sleepline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 2px 0 12px;
}
.sleepline b {
font-size: 30px;
line-height: 38px;
font-weight: 500;
letter-spacing: -0.6px;
}
.span {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
font-size: 14px;
font-weight: 500;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.span i {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--accent);
}
.chip {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 8px 14px;
border: 0;
border-radius: 19px;
background: var(--well);
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: var(--ink);
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.12s ease;
}
.chip:active {
transform: scale(0.96);
}
.chip.on {
color: var(--btn-ink);
background: var(--btn);
}
.chip.small {
min-height: 32px;
padding: 5px 12px;
font-size: 12px;
}
.card .chip {
background: var(--bg);
}
.card .chip.on {
background: var(--btn);
}
.routine-chips {
margin: 12px 0 14px;
}
.result {
padding-top: 8px;
}
.result > .art {
width: 96px;
height: 96px;
margin: 0 auto 8px;
}
.result h1 {
margin: 0 0 20px;
font-size: 24px;
line-height: 34px;
font-weight: 500;
letter-spacing: -0.5px;
text-align: center;
}
.result > .card {
padding: 18px;
}
.result > .btns,
.result > .btn {
margin-top: 12px;
}
.nflow .flow-body > .title {
margin: 8px 0 8px;
}
.nflow .flow-body > .lead {
margin: 0 0 16px;
}
.nflow-start {
margin-top: 4px;
}
.nflow .field {
margin: 8px 0 0;
}
.nflow .feels {
margin-top: 8px;
}
.nflow .flow-main {
margin-top: 20px;
}
.nflow-sum {
margin: 8px 0 0;
}
.nflow-sum span {
display: block;
}
.day-title {
margin: 12px 0 8px;
}
.factor-list .check-row {
min-height: 56px;
}
.factor-list .check-row .box {
margin-left: auto;
}
.list.factor-list .check-row + .check-row::before {
left: 60px;
}
.player {
display: flex;
flex-direction: column;
min-height: calc(100vh - 12px - var(--safe-b));
}
.pl-top {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 12px;
margin: -12px calc(var(--gutter) * -1) 0;
padding: 14px var(--gutter) 12px;
background: var(--bg);
}
.pl-close {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 18px;
background: var(--chip);
color: var(--ink);
cursor: pointer;
}
.pl-close .ic {
width: 18px;
height: 18px;
stroke-width: 2.2;
}
.pl-bar {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--track);
overflow: hidden;
}
.pl-bar i {
display: block;
height: 100%;
width: 3%;
border-radius: inherit;
background: var(--accent);
transition: width 0.5s var(--ease);
}
.pl-count {
flex: none;
min-width: 40px;
font-size: 12px;
line-height: 18px;
text-align: right;
color: var(--ink-2);
}
.pl-stage {
flex: 1;
padding: 8px 0 24px;
}
.pl-step.in {
animation: pl-in 0.36s var(--ease) backwards;
}
.pl-step.back {
animation: pl-back 0.3s var(--ease) backwards;
}
@keyframes pl-in {
from {
opacity: 0;
transform: translateX(22px);
}
}
@keyframes pl-back {
from {
opacity: 0;
transform: translateX(-16px);
}
}
.pl-meta {
margin: 0 0 8px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pl-title {
margin: 0 0 12px;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
color: var(--ink);
text-wrap: balance;
}
.pl-photo {
display: block;
width: 100%;
height: auto;
margin: 4px 0 18px;
border-radius: var(--r-card);
pointer-events: none;
}
.pl-photo.gift {
margin-bottom: 12px;
pointer-events: auto;
-webkit-touch-callout: none;
}
.pl-text .lb-text {
font-size: 16px;
line-height: 25px;
}
.pl-hint {
margin: 18px 0 8px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pl-opts {
display: grid;
gap: 8px;
margin-top: 18px;
}
.pl-hint + .pl-opts {
margin-top: 0;
}
.pl-opt {
appearance: none;
display: flex;
align-items: center;
gap: 12px;
min-height: 52px;
padding: 12px 16px 12px 14px;
border: 0;
border-radius: var(--r-row);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
transition:
transform 0.12s ease,
opacity 0.25s ease,
background-color 0.18s ease;
}
.pl-opt::before {
content: "";
flex: none;
width: 22px;
height: 22px;
border-radius: 11px;
background: var(--ink-4) center / 13px 13px no-repeat;
transition: background-color 0.18s ease;
}
.pl-opt.multi::before {
border-radius: 7px;
}
.pl-opt b {
font-size: 16px;
line-height: 21px;
font-weight: 500;
}
.pl-opt b .e {
margin-right: 8px;
}
.pl-opt:active {
transform: scale(0.985);
}
.pl-opt.on::before {
background-color: var(--btn);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .pl-opt.on::before,
:root[data-island] .pl-opt.on::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.pl-opt.on.good::before {
background-color: var(--good);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.pl-opt.on.soft::before {
background-color: var(--warn);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.pl-opts.answered .pl-opt:not(.on) {
opacity: 0.45;
}
.pl-opts.answered .pl-opt {
pointer-events: none;
}
.pl-opt.pending {
animation: breathe 1s ease-in-out infinite;
}
.pl-fb {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 16px 0 0;
padding: 16px;
border-radius: 16px;
background: var(--well);
animation: pl-in 0.36s var(--ease) backwards;
}
.pl-fb-ic {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: 12px;
color: #ffffff;
background: var(--blue);
}
.pl-fb.good .pl-fb-ic {
background: var(--good);
}
.pl-fb.soft .pl-fb-ic {
color: #1d1d1f;
background: var(--warn);
}
.pl-fb-ic .ic {
width: 14px;
height: 14px;
stroke-width: 2.6;
}
.pl-fb .lb-text {
font-size: 16px;
line-height: 25px;
}
.pl-widget {
margin-top: 18px;
}
.pl-links {
display: grid;
gap: 8px;
margin-top: 18px;
}
.pl-foot {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
gap: 10px;
margin: 0 calc(var(--gutter) * -1);
padding: 16px var(--gutter) calc(16px + var(--safe-b));
background: linear-gradient(to top, var(--bg) 78%, transparent);
}
.pl-foot:empty {
display: none;
}
.player.busy .pl-foot .btn {
opacity: 0.6;
pointer-events: none;
}
.btn.pending {
animation: breathe 1s ease-in-out infinite;
}
.pl-say {
display: flex;
gap: 8px;
}
.pl-say input {
flex: 1;
min-width: 0;
height: 48px;
padding: 0 16px;
border: 0;
border-radius: var(--r-btn);
background: var(--well);
font-size: 16px;
color: var(--ink);
outline: none;
-webkit-user-select: text;
user-select: text;
}
.pl-say input::placeholder {
color: var(--ink-3);
}
.pl-send {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: var(--r-btn);
color: var(--btn-ink);
background: var(--btn);
cursor: pointer;
}
.pl-send .ic {
width: 20px;
height: 20px;
stroke-width: 2.2;
}
.pl-end {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 12px;
text-align: center;
}
.pl-orb {
width: 128px;
height: 128px;
margin: 0 0 8px;
}
.pl-end .pl-title {
margin-bottom: 10px;
}
.pl-takty-box {
display: block;
margin: 0 0 18px;
}
.pl-end .pl-text {
align-self: stretch;
text-align: left;
}
.pl-next {
align-self: stretch;
margin: 18px 0 0;
padding: 16px;
border-radius: 16px;
text-align: left;
background: var(--well);
}
.pl-next .kicker {
margin: 0 0 6px;
}
.pl-next .lb-text {
font-size: 15px;
line-height: 22px;
}
@keyframes breathe {
50% {
opacity: 0.55;
}
}
.lb-text {
font-size: 16px;
line-height: 25px;
color: var(--ink);
white-space: pre-line;
overflow-wrap: break-word;
}
.lb-text.empty {
display: none;
}
.lb-text b,
.lb-text strong {
font-weight: 500;
}
.lb-text i,
.lb-text em {
color: var(--ink-2);
}
.lb-text a[href] {
color: var(--link);
font-weight: 500;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
cursor: pointer;
}
.lb-text blockquote {
display: block;
margin: 10px 0 0;
padding: 16px;
border-radius: 16px;
background: var(--well);
white-space: pre-line;
}
.lb-text code,
.lb-text pre {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.9em;
padding: 1px 6px;
border-radius: 6px;
background: var(--chip);
}
.lb-text .tg-spoiler,
.lb-text tg-spoiler {
border-radius: 4px;
background: var(--well-2);
}
.item.pending {
animation: breathe 1s ease-in-out infinite;
}
.flow-text a,
.flow-body .lead a,
.quote a,
.callout a {
color: var(--link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.check-row {
cursor: pointer;
}
.check-row .box {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
color: transparent;
background: var(--ink-4);
transition: background-color 0.18s ease;
}
.check-row .box .ic {
width: 13px;
height: 13px;
stroke-width: 3;
}
.check-row.on .box {
color: var(--btn-ink);
background: var(--btn);
}
.list .check-row + .check-row::before {
left: 50px;
}
.consent-list {
display: grid;
gap: 8px;
margin: 4px 0 0;
background: transparent;
border-radius: 0;
overflow: visible;
}
.consent-list .item {
min-height: 50px;
padding: 12px 14px 12px 12px;
border-radius: var(--r-row);
background: var(--well);
}
.consent-list .item + .item::before {
display: none;
}
.consent-list .txt b {
font-weight: 500;
font-size: 16px;
line-height: 21px;
}
.info-btn {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
margin: -6px -8px -6px 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-2);
cursor: pointer;
}
.info-btn .ic {
width: 20px;
height: 20px;
}
.hint.center {
text-align: center;
}
.ok-note {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 12px 0 0;
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
text-align: center;
}
.ok-note .ic {
width: 14px;
height: 14px;
padding: 2px;
border-radius: 50%;
stroke-width: 3.2;
color: #ffffff;
background: var(--good);
}
.quote {
margin: 0 0 12px;
padding: 14px 16px;
border-radius: var(--r-group);
background: var(--well);
}
.quote p,
.quote-text {
margin: 0;
font-size: 14px;
line-height: 21px;
color: var(--ink-2);
}
details.quote {
margin-top: 12px;
padding: 0;
}
details.quote > summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 52px;
padding: 0 16px;
font-size: 15px;
font-weight: 500;
color: var(--ink);
list-style: none;
cursor: pointer;
}
details.quote > p {
padding: 0 16px 16px;
}
.opt-row .txt b .e,
.check-row .txt b .e {
margin-right: 10px;
}
.pl-paras {
display: grid;
gap: 12px;
}
.pl-opts.tight {
margin-top: 8px;
}
.pl-opt.pl-time::before {
display: none;
}
.pl-opt.pl-time .ic {
width: 20px;
height: 20px;
color: var(--ink-2);
}
.pl-opt.pl-time b {
font-weight: 500;
color: var(--ink);
}
#sheet .tp {
margin: 4px 0 16px;
}
.pl-stage {
display: flex;
flex-direction: column;
}
.pl-stage.mid::before,
.pl-stage.mid::after {
content: "";
flex: 2;
}
.pl-stage.mid::after {
flex: 3;
}
.pl-deal {
margin-top: 18px;
}
.pl-step.has-head .pl-widget .rw-lead {
display: none;
}
.pl-opts.answered .pl-opt.right {
opacity: 1;
}
.pl-opt.right::before,
.pl-opt.on.right::before {
background-color: var(--good);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.pl-opt.on.soft:not(.right)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
.vis {
margin: 4px 0 18px;
padding: 16px;
border-radius: var(--r-card);
background: var(--well);
}
.vis .kicker {
margin: 0 0 8px;
}
.vis-cover {
display: grid;
justify-items: center;
gap: 12px;
margin: 0 0 14px;
padding: 0;
background: transparent;
}
.vis-cover .kicker {
margin: 0;
}
.vis-ic {
width: 64px;
height: 64px;
background: var(--accent);
}
.vis-ic .ic {
width: 30px;
height: 30px;
stroke-width: 2;
}
.pl-step.cover {
text-align: center;
}
.pl-step.cover .pl-title {
text-wrap: balance;
}
.vis-day {
display: grid;
gap: 12px;
}
.vd-row {
display: grid;
gap: 6px;
}
.vd-l {
display: flex;
justify-content: space-between;
margin: 0;
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.vd-l b {
font-weight: 500;
color: var(--ink);
}
.vd-track {
position: relative;
height: 14px;
border-radius: 7px;
background: var(--track);
}
.vd-sleep {
position: absolute;
top: 0;
bottom: 0;
border-radius: 7px;
background: var(--accent);
transform-origin: 0 50%;
animation: vd-grow 0.7s var(--ease) backwards 0.15s;
}
.vd-sleep.goal {
background: transparent;
box-shadow: inset 0 0 0 2px var(--accent);
background-image: repeating-linear-gradient(90deg, var(--accent-soft) 0 6px, transparent 6px 10px);
}
.vd-axis {
display: flex;
justify-content: space-between;
margin-top: -4px;
font-size: 12px;
line-height: 16px;
color: var(--ink-3);
}
@keyframes vd-grow {
from {
transform: scaleX(0);
}
}
.vc-big {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 6px;
}
.vc-big b {
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--ink);
}
.vc-big span {
font-size: 16px;
color: var(--ink-2);
}
.vc-svg {
display: block;
width: 100%;
height: auto;
margin: 4px 0 10px;
overflow: visible;
}
.vc-grid {
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 3 5;
}
.vc-body,
.vc-plan {
fill: none;
stroke-linecap: round;
}
.vc-body {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: vc-draw 1.4s var(--ease) forwards 0.2s;
}
.vc-body {
stroke: var(--accent);
stroke-width: 3;
}
.vc-plan {
stroke: var(--ink-3);
stroke-width: 2;
stroke-dasharray: 5 6;
animation: vc-fade 0.8s ease backwards 0.9s;
}
@keyframes vc-fade {
from {
opacity: 0;
}
}
@keyframes vc-draw {
to {
stroke-dashoffset: 0;
}
}
.vc-legend {
display: grid;
gap: 4px;
font-size: 12px;
line-height: 18px;
color: var(--ink-2);
}
.vc-k {
display: grid;
grid-template-columns: 18px auto;
justify-content: start;
align-items: center;
gap: 8px;
}
.vc-k i {
display: block;
width: 18px;
height: 3px;
border-radius: 2px;
background: var(--accent);
}
.vc-k.plan i {
height: 2px;
border-radius: 0;
background: repeating-linear-gradient(90deg, var(--ink-3) 0 5px, transparent 5px 9px);
}
@media (prefers-reduced-motion: reduce) {
.vc-body {
stroke-dashoffset: 0;
animation: none;
}
}
.pl-end .pl-plan {
align-self: stretch;
text-align: left;
}
.pl-plan-row {
align-items: flex-start;
min-height: 0;
padding-top: 14px;
padding-bottom: 14px;
}
.pl-plan-row .bubble {
margin-top: 1px;
background: var(--accent);
}
.pl-plan-row .lb-text {
font-size: 15px;
line-height: 21px;
}
.pl-opts.many {
gap: 6px;
}
.pl-opts.many .pl-opt {
min-height: 46px;
padding-top: 10px;
padding-bottom: 10px;
}
.pl-opts.many .pl-opt b {
font-size: 15px;
line-height: 20px;
}
.vis-type {
display: flex;
align-items: center;
gap: 14px;
}
.vis-ic.sm {
width: 48px;
height: 48px;
}
.vis-ic.sm .ic {
width: 24px;
height: 24px;
}
.vt-txt {
display: grid;
gap: 2px;
min-width: 0;
}
.vt-txt .kicker {
margin: 0;
}
.vt-txt b {
font-size: 20px;
line-height: 26px;
font-weight: 500;
color: var(--ink);
}
.vt-txt span {
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.vp-ends {
display: flex;
justify-content: space-between;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.vp-ends b {
font-weight: 500;
color: var(--ink);
}
.vp-svg {
display: block;
width: 100%;
height: auto;
margin: 6px 0 4px;
overflow: visible;
}
.vp-line {
fill: none;
stroke: var(--accent);
stroke-width: 3;
stroke-linejoin: round;
stroke-linecap: round;
}
.vp-goal {
stroke: var(--ink-3);
stroke-width: 1.5;
stroke-dasharray: 5 5;
}
.vp-dot {
fill: var(--accent);
}
.vp-axis {
display: flex;
justify-content: space-between;
font-size: 12px;
line-height: 16px;
color: var(--ink-3);
}
.vp-note {
margin: 8px 0 0;
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.vis-map {
display: grid;
gap: 8px;
}
.vm-row {
display: grid;
grid-template-columns: 74px 1fr;
align-items: center;
gap: 8px;
}
.vm-w {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.vm-items {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.vm-i {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: var(--ink-3);
background: var(--bg);
}
.vm-i .ic {
width: 15px;
height: 15px;
stroke-width: 2;
}
.vm-i.typed {
box-shadow: inset 0 0 0 1.5px var(--accent);
color: var(--accent-text);
}
.vm-i.done {
color: var(--ink);
}
.vm-i.today {
color: #ffffff;
background: var(--accent);
box-shadow: none;
}
.vm-legend {
display: flex;
gap: 16px;
margin-top: 4px;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.vm-k {
display: inline-flex;
align-items: center;
gap: 6px;
}
.vm-k i {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent);
}
.vm-k.typed i {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--accent);
}
.tx-term {
display: grid;
gap: 6px;
padding: 16px;
border-radius: 16px;
background: var(--well);
}
.tx-term > b {
font-size: 19px;
line-height: 24px;
font-weight: 500;
color: var(--ink);
}
.tx-lab {
display: grid;
gap: 4px;
}
.tx-k {
margin: 0;
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.tx-list {
display: grid;
gap: 10px;
}
.tx-li {
display: grid;
grid-template-columns: 22px 1fr;
align-items: start;
gap: 8px;
}
.tx-mark {
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
background: var(--well);
}
.tx-mark:empty::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ink-3);
}
.tx-note {
margin: 0;
}
.tx-note .lb-text {
font-size: 15px;
line-height: 22px;
}
.pl-kick {
margin: 0 0 8px;
}
.pl-title.long {
font-size: 20px;
line-height: 26px;
letter-spacing: -0.1px;
}
.pl-text.quiet .lb-text {
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.pl-count:empty {
display: none;
}
.pl-opt.multi::before {
border-radius: 11px;
}
.pl-end .pl-plan {
margin-top: 6px;
}
.pl-plan-row .bubble {
background: var(--ib-gray);
}
.pl-note {
align-self: stretch;
margin: 14px 0 0;
font-size: 14px;
line-height: 20px;
text-align: left;
color: var(--ink-2);
}
html.lesson-open,
body.lesson-open {
height: 100%;
overflow-y: hidden;
}
body.lesson-open .app {
position: fixed;
left: 0;
right: 0;
top: var(--lesson-top, 0px);
height: var(--lesson-viewport);
padding-bottom: 0;
}
body.lesson-open .player {
height: var(--lesson-height);
min-height: 0;
}
body.lesson-open .player > .pl-top {
position: relative;
top: auto;
flex-shrink: 0;
}
body.lesson-open .pl-meta {
flex-shrink: 0;
}
body.lesson-open .pl-foot {
position: relative;
bottom: auto;
flex-shrink: 0;
}
body.lesson-open .pl-stage {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
overscroll-behavior-y: contain;
}
body.lesson-open .pl-stage > * {
flex-shrink: 0;
}
.msg, .msg p, .msg span, .compose textarea {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
.chat-rich-text {white-space:pre-wrap;overflow-wrap:anywhere}
.chat {
display: flex;
flex-direction: column;
min-height: calc(100vh - 40px);
}
.ritm-chat-top {
position: sticky;
top: 0;
z-index: 20;
padding: 8px 0;
background: var(--bg);
border-bottom: 1px solid var(--rule);
}
.chat-head {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 8px;
}
.chat-head .avatar-btn {
width: 40px;
height: 40px;
cursor: default;
}
.chat-head .avatar-btn img {
left: -13px;
top: -22px;
width: 66px;
height: 66px;
}
.chat-head b {
display: block;
font-size: 17px;
line-height: 22px;
font-weight: 500;
}
.chat-head span {
display: block;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.chat-log {
flex: 1;
padding: 8px 0 120px;
}
.chat-hello {
margin: 28px 0 6px;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
}
.chat-sub {
margin: 0 0 20px;
font-size: 16px;
line-height: 25px;
color: var(--ink-2);
}
.msg {
max-width: 86%;
margin: 10px 0 0;
padding: 12px 16px;
border-radius: 22px;
font-size: 16px;
line-height: 23px;
animation: rise 0.26s var(--ease) backwards;
}
.msg.me {
margin-left: auto;
border-bottom-right-radius: 6px;
color: var(--btn-ink);
background: var(--btn);
}
.msg.ritm {
border-bottom-left-radius: 6px;
color: var(--ink);
background: var(--well);
}
.msg.ritm p {
margin: 0 0 8px;
}
.msg.ritm p:last-child {
margin-bottom: 0;
}
.msg.ritm b,
.msg.ritm strong {
font-weight: 500;
}
.msg-acts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 0;
}
.typing {
display: inline-flex;
gap: 5px;
margin: 12px 0 0;
padding: 16px;
border-radius: 22px;
border-bottom-left-radius: 6px;
background: var(--well);
}
.typing .ld-beat {
color: var(--ink-2);
}
.compose {
position: fixed;
left: 50%;
bottom: 0;
z-index: 45;
display: flex;
align-items: flex-end;
gap: 8px;
width: 100%;
max-width: 560px;
padding: 10px var(--gutter) calc(12px + var(--safe-b));
background: var(--bg);
transform: translateX(-50%);
}
.compose textarea {
flex: 1;
min-width: 0;
overflow-y: hidden;
overscroll-behavior: contain;
min-height: 48px;
max-height: 140px;
margin: 0;
padding: 13px 18px;
border: 0;
border-radius: 24px;
outline: none;
resize: none;
font-size: 16px;
line-height: 22px;
color: var(--ink);
background: var(--well);
-webkit-user-select: text;
user-select: text;
}
.compose textarea::placeholder {
color: var(--ink-3);
}
.send {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--btn-ink);
background: var(--btn);
cursor: pointer;
}
.send .ic {
width: 20px;
height: 20px;
stroke-width: 2.2;
}
.send[disabled] {
opacity: 0.25;
}
.send.chat-mic {
color: var(--ink);
background: var(--well);
touch-action: none;
-webkit-touch-callout: none;
user-select: none;
transition: transform 0.18s var(--ease), background-color 0.18s ease, box-shadow 0.18s ease;
}
.send.chat-mic.holding {
transform: scale(1.32);
color: #fff;
background: var(--ib-violet);
box-shadow: 0 0 0 8px color-mix(in srgb, var(--ib-violet) 18%, transparent),
0 6px 24px color-mix(in srgb, var(--ib-violet) 45%, transparent);
}
.chat-rec {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
min-height: 48px;
padding: 0 4px 0 16px;
border-radius: 24px;
background: var(--well);
animation: chat-rec-in 0.2s var(--ease) both;
}
.chat-rec.locked {
padding-left: 4px;
}
.chat-rec-dot {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ib-violet);
transform: scale(calc(1 + var(--level, 0) * 0.6));
transition: transform 0.12s linear;
animation: chat-rec-dot 1.2s ease-in-out infinite;
}
.chat-rec b {
flex: none;
font-size: 15px;
line-height: 20px;
font-weight: 500;
}
.chat-rec-hint {
flex: 1;
min-width: 0;
overflow: hidden;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
white-space: nowrap;
text-overflow: ellipsis;
}
.chat-rec:not(.locked) .chat-rec-cancel,
.chat-rec:not(.locked) .chat-rec-send {
display: none;
}
.chat-rec-cancel {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--ink-2);
background: transparent;
}
.chat-rec .send.chat-rec-send {
width: 40px;
height: 40px;
}
.msg.me.voice-said {
display: flex;
align-items: flex-start;
gap: 6px;
}
.msg.me.voice-said > .ic {
flex: none;
width: 16px;
height: 16px;
margin-top: 3px;
opacity: 0.7;
}
.msg.me.voice-said.pending > span {
filter: blur(2px);
opacity: 0.6;
animation: chat-rec-dot 1.2s ease-in-out infinite;
}
@keyframes chat-rec-in {
from { opacity: 0; transform: translateX(8px); }
}
@keyframes chat-rec-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.send.chat-mic,
.chat-rec,
.chat-rec-dot,
.msg.me.voice-said.pending > span {
transition: none;
animation: none;
}
}
.undo-acts .chip-x.undo {
color: var(--ink-2);
background: transparent;
box-shadow: inset 0 0 0 1px var(--line);
}
.undo-acts .chip-x.undo .ic {
flex: none;
}
.undo-acts .chip-x.undo:disabled {
opacity: 0.5;
}
.undo-done {
display: inline-flex;
align-items: center;
min-height: 38px;
font-size: 14px;
line-height: 20px;
color: var(--ink-3);
}
.wm {
position: fixed;
inset: 0;
z-index: 50;
display: none;
pointer-events: none;
background-repeat: repeat;
background-size: 360px 240px;
}
body.marked .wm {
display: block;
}
.progress {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 60;
display: none;
height: 3px;
pointer-events: none;
}
body.reading .progress {
display: block;
}
.progress i {
display: block;
height: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
background: var(--ink);
}
.noscript {
margin: 30vh auto 0;
text-align: center;
color: var(--ink-2);
}
.kn {
max-width: 680px;
margin: 0 auto;
}
.kn[data-course="sleep"] { --accent: #ad46ff; --accent-soft: rgba(173, 70, 255, 0.12); }
.kn[data-course="focus"] { --accent: #3392ff; --accent-soft: rgba(51, 146, 255, 0.12); }
.kn[data-course="energy"] { --accent: #9ae600; --accent-soft: rgba(154, 230, 0, 0.16); }
.kn[data-course="food"] { --accent: #00bc7d; --accent-soft: rgba(0, 188, 125, 0.12); }
.kn[data-course="stress"],
.kn[data-course="teeth"] { --accent: #00a6f4; --accent-soft: rgba(0, 166, 244, 0.12); }
.kn[data-course="move"] { --accent: #f6339a; --accent-soft: rgba(246, 51, 154, 0.12); }
:root[data-theme="dark"] .kn[data-course] { --accent-soft: rgba(255, 255, 255, 0.1); }
.kn-head {
margin: 10px 0 22px;
}
.kn-ic {
width: 56px;
height: 56px;
margin: 0 0 18px;
}
.kn-ic .ic {
width: 26px;
height: 26px;
stroke-width: 2;
}
.kn-head .kicker {
margin: 0 0 8px;
}
.kn-title {
margin: 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
color: var(--ink);
text-wrap: balance;
}
.kn-lede {
margin: 10px 0 0;
font-size: 16px;
line-height: 25px;
color: var(--ink-2);
}
.kn-meta {
display: flex;
align-items: center;
gap: 6px;
margin: 14px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kn-meta .ic {
flex: none;
width: 16px;
height: 16px;
stroke-width: 2;
}
.kn-secs {
display: grid;
gap: 28px;
}
.kn-free {
display: grid;
gap: 12px;
}
.kn-free > p {
margin: 0;
font-size: 16px;
line-height: 25px;
}
.kn-solo > h2,
.kp-head h2,
.ks-h {
margin: 0;
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
color: var(--ink);
}
.kn-solo > h2 {
margin-bottom: 16px;
}
.kn-solo > .kf-you,
.ks > .kf-you {
margin: 0 0 6px;
}
.kf-you {
display: flex;
align-items: flex-start;
gap: 6px;
max-width: 100%;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ink-2);
}
.kf-you .ic {
flex: none;
width: 14px;
height: 14px;
margin-top: 1px;
}
.ks-n {
display: grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
border-radius: 13px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0;
color: var(--ink-2);
background: var(--well);
}
.ks-n .ic {
width: 14px;
height: 14px;
stroke-width: 2.2;
}
.ks {
display: grid;
gap: 16px;
}
.ks-h {
display: flex;
align-items: flex-start;
gap: 10px;
}
.ks-h .ks-n {
margin-top: 0;
}
.ks > p,
.kr-in > p,
.kp-rest > p {
margin: 0;
font-size: 16px;
line-height: 25px;
}
.ks:not(.open) > .kf-detail {
display: none;
}
.ks.open > .kf-detail {
animation: kf-show 0.3s var(--ease) backwards;
}
@keyframes kf-show {
from {
opacity: 0;
transform: translateY(-4px);
}
}
.ks-more {
appearance: none;
display: inline-flex;
align-items: center;
gap: 4px;
justify-self: start;
min-height: 44px;
margin: -12px 0 -14px;
padding: 0 12px 0 0;
border: 0;
background: none;
font: inherit;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
}
.ks-more .ic {
width: 16px;
height: 16px;
transform: rotate(90deg);
transition: transform 0.28s var(--ease);
}
.ks.open .ks-more .ic {
transform: rotate(-90deg);
}
.kg {
border-radius: var(--r-group);
background: var(--well);
overflow: hidden;
}
.kr {
position: relative;
}
.kr + .kr::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 54px;
height: 1px;
background: var(--line);
}
.kr-head {
appearance: none;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 60px;
padding: 14px 16px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
.kr-head:active {
background: var(--well-2);
}
.kr-head .ks-n {
background: var(--bg);
}
.kr-t {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.kr-t b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.kr-t small {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kr-go {
flex: none;
width: 20px;
height: 20px;
color: var(--ink-3);
transform: rotate(90deg);
transition: transform 0.28s var(--ease);
}
.kr.open .kr-go {
transform: rotate(-90deg);
}
.kr-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.32s var(--ease);
}
.kr.open .kr-body {
grid-template-rows: 1fr;
}
.kr-in {
display: grid;
gap: 12px;
min-height: 0;
overflow: hidden;
padding: 0 16px 0 54px;
}
.kr.open .kr-in {
padding-bottom: 16px;
}
.kn ul,
.kn ol:not(.pl-opts) {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.kn ul > li,
.kn-refs ol > li {
position: relative;
margin: 0;
font-size: 16px;
line-height: 25px;
}
.kn ul > li {
padding-left: 22px;
}
.kn ul > li::before {
content: "";
position: absolute;
top: 10px;
left: 6px;
width: 6px;
height: 6px;
border-radius: 3px;
background: var(--ink-2);
}
.kn .you-note {
display: grid;
gap: 8px;
margin: 0;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.kn .you-note > p:where(:not(.tag)) {
margin: 0;
font-size: 16px;
line-height: 25px;
}
.kn .tag {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
border-radius: 0;
background: none;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ink-2);
}
.kn .tag .ic {
width: 14px;
height: 14px;
}
.kn h3 {
margin: 4px 0 0;
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.kn strong {
font-weight: 500;
}
.kn .v {
font-weight: 500;
color: inherit;
}
.kn sup.cite {
font-size: 0.72em;
line-height: 0;
}
.kn sup.cite a {
position: relative;
display: inline;
margin-left: 2px;
padding: 1px 5px;
border-radius: 8px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
white-space: nowrap;
color: var(--ink-2);
background: var(--chip);
text-decoration: none;
vertical-align: 2px;
}
.kn sup.cite a::after {
content: "";
position: absolute;
inset: -8px -7px;
}
.kg sup.cite a,
.kn-plan sup.cite a,
.kv sup.cite a,
.vis sup.cite a,
.kn .you-note sup.cite a {
background: var(--bg);
}
.kp-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 12px;
}
.kp-head small {
flex: none;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kp-rows,
.kv-today {
border-radius: var(--r-group);
background: var(--well);
overflow: hidden;
}
.kp-row,
.kt-row {
appearance: none;
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 62px;
margin: 0;
padding: 13px 16px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
.kp-row:active {
background: var(--well-2);
}
.kp-row + .kp-row::before,
.kt-row + .kt-row::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 1px;
background: var(--line);
}
.kp-row.with-icon + .kp-row::before,
.kt-row + .kt-row::before {
left: 60px;
}
.kp-b {
background: var(--ib-gray);
}
.kp-box {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 11px;
color: transparent;
background: var(--ink-4);
transition: background-color 0.18s ease;
}
.kp-box .ic {
width: 13px;
height: 13px;
stroke-width: 3;
}
.kp-row.on .kp-box {
color: var(--btn-ink);
background: var(--btn);
}
.kp-t {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.kp-t b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.kp-t > span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kp-row.on .kp-t b {
color: var(--ink-2);
}
.kp-rest {
display: grid;
gap: 8px;
margin: 12px 2px 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kp-rest > p {
font-size: 14px;
line-height: 20px;
}
.kv,
.kn .vis {
margin: 0;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.kn-free > .vis {
margin: 0;
}
.kv > .kicker,
.kv-bars > .kicker,
.kv-week > .kicker {
margin: 0 0 12px;
}
.ks-nums {
display: grid;
gap: 14px;
}
.ks-num + .ks-num {
padding-top: 14px;
border-top: 1px solid var(--line);
}
.ks-num b {
display: block;
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--ink);
}
.ks-num > span {
display: block;
margin-top: 4px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kv-table {
padding: 14px 16px 6px;
}
.kv-table table {
width: 100%;
border-collapse: collapse;
}
.kv-table th,
.kv-table td {
padding: 11px 10px 11px 0;
text-align: left;
vertical-align: top;
font-size: 15px;
line-height: 21px;
color: var(--ink);
}
.kv-table th:last-child,
.kv-table td:last-child {
padding-right: 0;
}
.kv-table thead th {
padding-top: 0;
padding-bottom: 8px;
font-size: 12px;
line-height: 16px;
font-weight: 400;
letter-spacing: 0.72px;
text-transform: uppercase;
color: var(--ink-2);
}
.kv-table tbody tr {
border-top: 1px solid var(--line);
}
.kv-table tbody th {
font-weight: 500;
}
.kv-table.c2 tbody th {
width: 55%;
}
.kc-side .kicker {
margin: 0 0 4px;
}
.kc-side.after .kicker {
color: var(--ink);
}
.kc-t {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.kc-side.after .kc-t {
font-size: 16px;
line-height: 24px;
color: var(--ink);
}
.kc-arrow {
position: relative;
display: grid;
place-items: center;
height: 28px;
margin: 10px 0;
}
.kc-arrow::before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 1px;
background: var(--line);
}
.kc-arrow span {
position: relative;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 14px;
color: var(--ink-2);
background: var(--bg);
}
.kc-arrow .ic {
width: 16px;
height: 16px;
stroke-width: 2.2;
transform: rotate(90deg);
}
.kb-rows {
display: grid;
gap: 12px;
}
.kb-row {
display: grid;
gap: 6px;
}
.kb-l {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 0;
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.kb-l b {
flex: none;
font-weight: 500;
color: var(--ink);
}
.kb-track {
position: relative;
height: 10px;
border-radius: 5px;
background: var(--track);
overflow: hidden;
}
.kb-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-radius: 5px;
background: var(--ink-3);
transform-origin: 0 50%;
animation: vd-grow 0.7s var(--ease) backwards 0.15s;
}
.kb-fill.main {
background: var(--accent);
}
.kw-svg {
display: block;
width: 100%;
height: auto;
margin: 0 0 8px;
overflow: visible;
}
.kw-guide {
stroke: var(--line);
stroke-width: 1;
stroke-dasharray: 3 5;
}
.kw-t,
.kw-d {
font-size: 12px;
fill: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.kw-d.off {
font-weight: 500;
fill: var(--ink);
}
.kw-path {
fill: none;
stroke: var(--ink-4);
stroke-width: 2;
stroke-linejoin: round;
}
.kw-dot {
fill: var(--ink-2);
}
.kw-dot.off {
fill: var(--accent);
}
.kw-legend .vc-k {
grid-template-columns: 10px auto;
}
.kn .vc-legend {
font-size: 14px;
line-height: 20px;
}
.kw-legend .vc-k i {
width: 10px;
height: 10px;
border-radius: 5px;
background: var(--ink-2);
}
.kw-legend .vc-k.off i {
background: var(--accent);
}
.kv.kv-quiz {
padding: 0;
background: none;
}
.kq-q {
margin: 0 0 14px;
font-size: 17px;
line-height: 24px;
font-weight: 500;
color: var(--ink);
}
.kv-quiz .pl-opts {
margin-top: 0;
}
.kv-quiz .pl-fb {
margin-top: 12px;
}
.kq-a {
font-size: 15px;
line-height: 23px;
}
.kq-again {
appearance: none;
display: block;
min-height: 44px;
margin: 2px 0 -12px;
padding: 0 12px 0 0;
border: 0;
background: none;
font: inherit;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-decoration: underline;
text-decoration-color: var(--ink-4);
text-underline-offset: 3px;
cursor: pointer;
}
.kk-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
}
.kk-head b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.kk-ic {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
border-radius: 12px;
color: #1d1d1f;
background: var(--warn);
}
.kk-ic .ic {
width: 14px;
height: 14px;
stroke-width: 2.4;
}
.kk-t {
margin: 0;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.kv-term .kicker {
margin: 0 0 6px;
}
.kt-term {
margin: 0 0 4px;
font-size: 17px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.kt-def {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.kn-refs .kr-in {
padding-left: 16px;
}
.kn-refs ol {
gap: 14px;
}
.kn-refs li {
display: flex;
gap: 10px;
margin: 0;
padding: 0;
}
.kn-refs li::before {
display: none;
}
.kn-refs li.flash {
animation: flash 1.4s ease;
}
@keyframes flash {
30% {
background: var(--accent-soft);
}
}
.kn-refs .n {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 11px;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
background: var(--bg);
}
.kn-refs .ref a {
font-size: 15px;
line-height: 21px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
}
.kn-refs .ref p {
margin: 2px 0 0;
}
.kn-refs .ref .kind {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ink-2);
}
.kn-refs .ref .by {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kn-done {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 16px 0 0;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.kn-done .done-mark {
margin-top: 1px;
}
.kn-done b {
display: block;
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.kn-done p {
margin: 4px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
.kb-fill {
animation: none;
}
}
.doc {
max-width: 680px;
margin: 0 auto;
padding: 4px 0 24px;
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
.doc > .label {
display: none;
}
.doc .title {
margin: 4px 0 6px;
text-wrap: balance;
overflow-wrap: break-word;
hyphens: auto;
}
.doc-meta {
margin: 0 0 22px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.doc-body {
font-size: 16px;
line-height: 24px;
overflow-wrap: break-word;
}
.doc-body p {
margin: 0 0 12px;
}
.doc-body h2 {
margin: 30px 0 10px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
text-wrap: balance;
}
.doc-body b,
.doc-body strong {
font-weight: 500;
}
.doc-body ul,
.doc-body ol {
margin: 0 0 12px;
padding: 0;
list-style: none;
}
.doc-body li {
position: relative;
margin: 0 0 8px;
padding-left: 20px;
}
.doc-body li::before {
content: "";
position: absolute;
left: 4px;
top: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink);
}
.doc-body a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--ink-3);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.doc-body .card {
margin: 0 0 8px;
padding: 16px 18px;
border-radius: var(--r-group);
background: var(--well);
}
.doc-body .card p:last-child {
margin-bottom: 0;
}
.doc-body table,
.doc-body tbody,
.doc-body tr,
.doc-body td {
display: block;
}
.doc-body thead {
display: none;
}
.doc-body table {
margin: 4px 0 16px;
}
.doc-body tr {
padding: 12px 0;
border-top: 1px solid var(--line);
}
.doc-body tr:last-child {
border-bottom: 1px solid var(--line);
}
.doc-body td + td {
margin-top: 4px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.doc .section {
margin-top: 40px;
}
.chart text {
font-variant-numeric: tabular-nums;
}
.chart .cap {
fill: var(--ink-2);
font-size: 12px;
}
.chart .track {
fill: var(--c-track);
}
.chart .hit:focus-visible {
stroke: var(--accent);
stroke-width: 1.5;
stroke-dasharray: 3 3;
}
.chart .seg {
transition: opacity 0.22s ease;
}
.chart .s-dim {
fill: var(--c-dim);
}
.chart .s-light {
fill: var(--c-light);
}
.chart .s-light.lamp {
fill: none;
stroke: var(--c-light);
stroke-width: 2;
}
.chart .seg-t {
fill: #ffffff;
font-size: 12px;
font-weight: 500;
pointer-events: none;
}
.chart .sun-t {
fill: var(--warn);
font-size: 12px;
font-weight: 500;
}
.picking .seg {
opacity: 0.4;
}
.picking .seg.on {
opacity: 1;
}
.chart .grow {
transform-box: fill-box;
transform-origin: 0 50%;
animation: grow 0.7s var(--ease) backwards;
}
.chart .now-l {
stroke: var(--c-now);
stroke-width: 1.5;
stroke-dasharray: 2 3;
opacity: 0.7;
}
.chart .now-p {
fill: var(--c-now);
}
.chart .now-t {
fill: var(--bg);
font-size: 12px;
font-weight: 500;
}
.chart .now-d {
fill: var(--bg);
stroke: var(--c-now);
stroke-width: 2.5;
}
.chart .drop {
animation: drop 0.5s var(--ease) 0.55s backwards;
}
@keyframes drop {
from {
opacity: 0;
transform: translateY(-6px);
}
}
.legend-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 0;
}
.legend-chips .chip {
background: var(--bg);
}
.legend-chips .chip.on {
color: var(--ink);
background: var(--bg);
box-shadow: inset 0 0 0 1.5px var(--ink);
}
.sw {
flex: none;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 4px;
background: var(--c-track);
}
.sw.s-sun {
background: linear-gradient(90deg, var(--c-sun-a), var(--c-sun-b));
}
.sw.s-dim {
background: var(--c-dim);
}
.sw.s-sleep {
background: var(--accent);
}
.sw.s-light {
background: var(--c-light);
}
.sw.s-light.lamp {
background: transparent;
box-shadow: inset 0 0 0 2px var(--c-light);
}
.pick-info {
margin-top: 14px;
padding: 14px 16px;
border-radius: 16px;
background: var(--bg);
}
.pick-info.swap {
animation: swap 0.3s var(--ease) backwards;
}
@keyframes swap {
from {
opacity: 0.2;
transform: translateY(4px);
}
}
.pick-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 6px;
}
.pick-head b {
flex: 1;
min-width: 0;
font-size: 16px;
font-weight: 500;
}
.pick-t {
flex: none;
font-size: 14px;
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.pick-info p {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.note-card .card-head {
margin-bottom: 8px;
}
.file-in {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.lux .btns.two,
.tool.lux > .btns {
margin: 0 0 14px;
}
.slider > .label {
margin: 0 0 8px;
}
.slider-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 0 0 4px;
}
.slider-val {
font-size: 30px;
line-height: 32px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.slider.late-on .slider-val {
color: var(--c-dim);
}
.track-wrap {
position: relative;
height: 44px;
}
.track {
position: absolute;
left: 14px;
right: 14px;
top: 18px;
height: 8px;
border-radius: 999px;
background: var(--c-track);
}
.track i {
position: absolute;
top: 0;
bottom: 0;
border-radius: 999px;
}
.track .fill {
left: 0;
width: 0;
background: var(--accent);
}
.track .late {
right: 0;
background: repeating-linear-gradient(135deg, rgba(246, 51, 154, 0.22) 0 4px, transparent 4px 8px);
}
.track .mark {
top: -5px;
bottom: -5px;
width: 2px;
margin-left: -1px;
border-radius: 1px;
background: var(--c-dim);
}
.track-wrap input[type="range"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
touch-action: pan-y;
}
.track-wrap input[type="range"]:focus {
outline: none;
}
.track-wrap input[type="range"]::-webkit-slider-runnable-track {
height: 44px;
background: transparent;
}
.track-wrap input[type="range"]::-moz-range-track {
height: 44px;
background: transparent;
}
.track-wrap input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 28px;
height: 28px;
margin-top: 8px;
border: 0;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 0 4px var(--accent),
0 4px 12px rgba(0, 0, 0, 0.25);
}
.track-wrap input[type="range"]::-moz-range-thumb {
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 0 4px var(--accent),
0 4px 12px rgba(0, 0, 0, 0.25);
}
.slider-scale {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 0 4px;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.slider-scale .b {
color: var(--c-dim);
}
.chart .bed-l {
stroke: var(--ink-2);
stroke-width: 1.5;
stroke-dasharray: 4 4;
}
.chart .bed-t {
fill: var(--ink-2);
font-size: 12px;
font-weight: 500;
}
.chart .border-l {
stroke: var(--c-dim);
stroke-width: 1.5;
opacity: 0.8;
}
.chart .border-t {
fill: var(--c-dim);
font-size: 12px;
font-weight: 500;
}
.chart .caf-line {
fill: none;
stroke: var(--c-light);
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.chart .caf-line.draw {
animation: draw 0.9s var(--ease) 0.1s forwards;
}
.chart .caf-start {
fill: var(--c-light);
}
.chart .caf-start.pending {
fill: var(--bg);
stroke: var(--c-light);
stroke-width: 2;
}
.chart .caf-bed {
stroke: var(--well);
stroke-width: 2.5;
}
.chart .l-high { fill: var(--c-dim); }
.chart .l-some { fill: var(--c-light); }
.chart .l-low { fill: var(--accent); }
@media (min-width: 720px) {
.app {
max-width: 620px;
padding-top: 22px;
}
body.reading .app {
max-width: 720px;
}
.kn {
font-size: 17px;
line-height: 29px;
}
}
@media (max-width: 374px) {
:root {
--gutter: 16px;
}
.title {
font-size: 24px;
line-height: 32px;
}
.tab {
flex: 1 1 auto;
min-width: 44px;
padding: 0;
}
.tabs.raised .tab-gap {
flex-basis: 44px;
}
.tabs.raised .tab-orb img {
width: 44px;
height: 44px;
}
.hero .obj {
width: 92px;
height: 92px;
}
.hero.has-obj .hero-text {
padding-right: 92px;
}
}
@media print {
body > * {
display: none !important;
}
}
.lb > .lb-text:has(+ .rw-own) {
display: none;
}
.rw {
display: grid;
gap: 16px;
min-width: 0;
}
.rw-hint {
margin: -4px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-3);
}
.rw-go {
margin-top: 4px;
}
.rw.done,
.lb:not(.live) .rw,
.lesson-view.busy .rw {
pointer-events: none;
}
.rw.done .rw-go,
.rw.done .rw-sides,
.rw.done .rw-mvs,
.rw.done .rw-hint,
.lb:not(.live) .rw .rw-go,
.lb:not(.live) .rw .rw-sides {
display: none;
}
.rw.done .rw-grip {
visibility: hidden;
}
.rw-mark {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
color: #ffffff;
background: var(--good);
}
.rw-mark.miss {
background: var(--bad);
}
.rw-mark .ic {
width: 14px;
height: 14px;
stroke-width: 3;
}
.enter .rw-mark,
.rw-feedback.enter .rw-mark {
animation: rw-pop 0.42s var(--ease) 0.08s backwards;
}
@keyframes rw-pop {
0% {
opacity: 0;
transform: scale(0.4);
}
60% {
transform: scale(1.15);
}
}
@keyframes rw-up {
from {
opacity: 0;
transform: translateY(8px);
}
}
@keyframes rw-fade {
from {
opacity: 0;
}
}
.rw-progress {
display: flex;
gap: 4px;
}
.rw-seg {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--track);
transition: background-color 0.3s ease;
}
.rw-seg.now {
background: var(--ink);
}
.rw-seg.ok {
background: var(--good);
}
.rw-seg.miss {
background: var(--bad);
}
.rw-stack {
position: relative;
z-index: 0;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter) 18px;
overflow-x: hidden;
overflow-x: clip;
}
.rw-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 212px;
padding: 44px 22px 30px;
border-radius: var(--r-card);
background: var(--well);
color: var(--ink);
}
.rw-card-text {
margin: 0;
font-size: 20px;
line-height: 29px;
font-weight: 500;
letter-spacing: -0.01em;
text-wrap: balance;
}
.rw-count {
position: absolute;
top: 18px;
left: 22px;
font-size: 12px;
line-height: 18px;
color: var(--ink-3);
transition: opacity 0.15s ease;
}
.rw-top {
z-index: 1;
outline: none;
cursor: grab;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.2s ease;
}
.rw-top:focus-visible {
box-shadow: inset 0 0 0 2px var(--ink);
}
.rw-top.drag {
cursor: grabbing;
transition: box-shadow 0.2s ease;
box-shadow:
0 18px 40px rgba(10, 10, 10, 0.14),
0 2px 8px rgba(10, 10, 10, 0.08);
}
.rw-top.drag .rw-count {
opacity: 0;
}
.rw-top.fly {
pointer-events: none;
transition:
transform 0.32s cubic-bezier(0.3, 0.7, 0.4, 1),
opacity 0.32s ease;
box-shadow: 0 18px 40px rgba(10, 10, 10, 0.14);
}
.rw-top.enter {
animation: rw-rise 0.36s var(--ease) backwards;
}
.rw-top.enter .rw-card-text,
.rw-top.enter .rw-count {
animation: rw-fade 0.3s ease 0.08s backwards;
}
@keyframes rw-rise {
from {
background-color: var(--well-2);
transform: translateY(9px) scale(0.95);
}
}
.rw-ghost {
position: absolute;
top: 0;
right: var(--gutter);
left: var(--gutter);
z-index: 2;
pointer-events: none;
box-shadow: 0 18px 40px rgba(10, 10, 10, 0.14);
}
.rw-stamp {
position: absolute;
top: 14px;
padding: 3px 12px;
border: 2px solid currentColor;
border-radius: 10px;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
background: var(--well);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.rw-top.drag .rw-stamp {
transition: none;
}
.rw-stamp.s0 {
right: 18px;
transform: rotate(8deg);
}
.rw-stamp.s1 {
left: 18px;
transform: rotate(-8deg);
}
.rw-sides {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.rw-side {
appearance: none;
min-height: 56px;
padding: 0 12px;
border: 0;
border-radius: var(--r-btn);
background: var(--well);
font-size: 17px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition:
transform 0.12s ease,
background-color 0.18s ease,
color 0.18s ease;
}
.rw-side:active {
transform: scale(0.97);
background: var(--well-2);
}
.rw-side.hot,
.rw-side.hot:active {
color: var(--btn-ink);
background: var(--btn);
}
.rw-feedback {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: var(--r-group);
background: var(--well);
}
.rw-feedback.enter {
animation: rw-up 0.34s var(--ease) backwards;
}
.rw-fb {
display: grid;
gap: 2px;
min-width: 0;
}
.rw-fb > b {
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
.rw .rw-fb .lb-text {
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.rw-score {
display: grid;
gap: 2px;
}
.rw-score.enter {
animation: rw-up 0.4s var(--ease) 0.05s backwards;
}
.rw-big {
margin: 0;
font-size: 20px;
line-height: 28px;
color: var(--ink-2);
}
.rw-big b {
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
}
.rw-verdict {
margin: 0;
font-size: 16px;
line-height: 24px;
}
.rw-results,
.rw-pairs {
display: grid;
margin: 0;
padding: 4px 0;
list-style: none;
border-radius: var(--r-group);
background: var(--well);
}
.rw-results li,
.rw-pairs li {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 16px;
}
.rw-results li + li::before,
.rw-pairs li + li::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 52px;
height: 1px;
background: var(--line);
}
.rw-results li.enter,
.rw-pairs li.enter {
animation: rw-up 0.32s var(--ease) backwards;
}
.rw-rt,
.rw-pt {
display: grid;
flex: 1;
gap: 1px;
min-width: 0;
font-size: 15px;
line-height: 21px;
}
.rw-rt small,
.rw-pt small {
font-size: 12px;
line-height: 18px;
color: var(--ink-2);
}
.rw-pt b {
font-weight: 500;
}
.rw-pt span {
color: var(--ink-2);
}
.rw-readout {
margin: 4px 0 0;
text-align: center;
font-size: 24px;
line-height: 64px;
font-weight: 500;
color: var(--ink-2);
}
.rw-num {
display: inline-block;
font-size: 30px;
line-height: 64px;
font-weight: 500;
letter-spacing: -0.03em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.rw-num.bump {
animation: rw-bump 0.18s ease;
}
@keyframes rw-bump {
50% {
transform: scale(1.06);
}
}
.rw-readout span {
margin-left: 2px;
}
.rw-slider {
position: relative;
height: 44px;
margin: 0 14px;
outline: none;
cursor: pointer;
touch-action: pan-y;
}
.rw-rail {
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 8px;
margin-top: -4px;
overflow: hidden;
border-radius: 4px;
background: var(--track);
}
.rw-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
background: var(--ink);
}
.rw-knob {
position: absolute;
top: 50%;
left: 0;
width: 28px;
height: 28px;
margin: -14px 0 0 -14px;
border-radius: 50%;
background: var(--bg);
box-shadow: inset 0 0 0 3px var(--ink);
transition: transform 0.15s ease;
}
.rw-slider.active .rw-knob {
transform: scale(1.18);
}
.rw-slider:focus-visible .rw-knob {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.rw-ends {
display: flex;
justify-content: space-between;
margin-top: -10px;
padding: 0 2px;
font-size: 12px;
line-height: 18px;
color: var(--ink-3);
}
.rw-gscale {
display: grid;
gap: 4px;
padding-top: 26px;
}
.rw-gscale .rw-ends {
margin-top: 0;
}
.rw-gtrack {
position: relative;
height: 10px;
margin: 0 14px 22px;
border-radius: 5px;
background: var(--track);
}
.rw-band {
position: absolute;
top: 0;
bottom: 0;
border-radius: 5px;
background: var(--good);
opacity: 0.4;
transform-origin: 0 50%;
}
.rw-band.miss {
background: var(--bad);
}
.rw-pin {
position: absolute;
top: 50%;
width: 0;
height: 0;
}
.rw-pin i {
position: absolute;
top: -8px;
left: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
}
.rw-pin.truth i {
background: var(--ink);
box-shadow: 0 0 0 3px var(--bg);
}
.rw-pin.you i {
top: -6px;
left: -6px;
width: 12px;
height: 12px;
background: var(--bg);
box-shadow: inset 0 0 0 3px var(--ink-2);
}
.rw-pin b {
position: absolute;
left: 0;
font-size: 14px;
line-height: 18px;
font-weight: 500;
white-space: nowrap;
transform: translateX(-50%);
}
.rw-pin.truth b {
bottom: 12px;
}
.rw-pin.you b {
top: 10px;
font-weight: 400;
color: var(--ink-2);
}
.rw-pin.at-start b {
left: -8px;
transform: none;
}
.rw-pin.at-end b {
left: 8px;
transform: translateX(-100%);
}
.rw-guess.fresh .rw-band {
animation: rw-grow 0.42s var(--ease) backwards;
}
.rw-guess.fresh .rw-pin.truth {
animation: rw-drop 0.45s var(--ease) 0.18s backwards;
}
@keyframes rw-grow {
from {
transform: scaleX(0);
}
}
@keyframes rw-drop {
from {
opacity: 0;
transform: translateY(-10px);
}
}
.rw-mine {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.rw-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.rw-item {
position: relative;
display: flex;
align-items: center;
gap: 6px;
min-height: 58px;
padding: 7px 6px 7px 2px;
border-radius: var(--r-btn);
background: var(--well);
transition:
transform 0.26s var(--ease),
box-shadow 0.2s ease;
}
.rw-item.snap {
transition: none;
}
.rw-item.lift {
z-index: 2;
transition: box-shadow 0.2s ease;
box-shadow:
0 14px 32px rgba(10, 10, 10, 0.14),
0 2px 6px rgba(10, 10, 10, 0.08);
}
.rw-list.dragging {
-webkit-user-select: none;
user-select: none;
}
.rw-grip {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 44px;
color: var(--ink-3);
cursor: grab;
touch-action: none;
}
.rw-item.lift .rw-grip {
color: var(--ink);
cursor: grabbing;
}
.rw-dots {
width: 20px;
height: 20px;
fill: currentColor;
stroke: none;
}
.rw-n {
flex: none;
min-width: 18px;
font-size: 15px;
line-height: 21px;
font-weight: 500;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.rw-t {
flex: 1;
min-width: 0;
font-size: 16px;
line-height: 21px;
font-weight: 500;
}
.rw-mvs {
display: flex;
flex: none;
gap: 2px;
}
.rw-mv {
appearance: none;
display: grid;
place-items: center;
width: 38px;
height: 40px;
padding: 0;
border: 0;
border-radius: 10px;
color: var(--ink-2);
background: transparent;
cursor: pointer;
}
.rw-mv:active {
background: var(--well-2);
}
.rw-mv[disabled] {
opacity: 0.28;
cursor: default;
}
.rw-mv .ic {
width: 18px;
height: 18px;
stroke-width: 2.2;
}
.rw-mv.down .ic {
transform: rotate(180deg);
}
.rw-head {
margin: 0;
font-size: 17px;
line-height: 26px;
font-weight: 500;
}
.rw-head.enter {
animation: rw-up 0.3s var(--ease) backwards;
}
.rw-list.result .rw-item {
gap: 12px;
min-height: 52px;
padding: 10px 14px;
}
.rw-list.result .rw-item.enter {
animation: rw-up 0.32s var(--ease) backwards;
}
.rw-sort .rw-mine {
margin-top: -6px;
}
.rw-cols {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 8px 10px;
}
.rw-chip {
appearance: none;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: 56px;
padding: 10px 12px;
border: 0;
border-radius: var(--r-btn);
background: var(--well);
font-size: 15px;
line-height: 20px;
font-weight: 500;
text-align: left;
color: var(--ink);
cursor: pointer;
transition:
transform 0.12s ease,
background-color 0.18s ease,
box-shadow 0.18s ease,
color 0.18s ease;
}
.rw-chip:active {
transform: scale(0.98);
}
.rw-chip.sel {
background: var(--bg);
box-shadow: inset 0 0 0 2px var(--ink);
}
.rw-chip.on {
color: var(--ink);
background: color-mix(in srgb, var(--pair, var(--accent)) 14%, var(--bg));
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pair, var(--accent)) 60%, transparent);
}
.rw-chip.pop {
animation: rw-tap 0.3s var(--ease);
}
@keyframes rw-tap {
50% {
transform: scale(1.04);
}
}
.rw-badge {
display: none;
}
.rw-chip.on .rw-badge {
display: none;
}
.rw-ct {
min-width: 0;
}
@media (max-width: 360px) {
.rw-card-text {
font-size: 20px;
line-height: 27px;
}
.rw-mv {
width: 34px;
}
}
.rw-turned {
justify-content: flex-start;
gap: 0;
cursor: default;
}
.rw-turned .rw-card-text {
font-size: 17px;
line-height: 24px;
color: var(--ink-2);
}
.rw-verdict-row {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0 6px;
}
.rw-verdict-row b {
font-size: 19px;
line-height: 24px;
font-weight: 500;
}
.rw-turned .lb-text {
font-size: 15px;
line-height: 22px;
color: var(--ink);
}
.rw-next {
width: 100%;
margin-top: 4px;
}
.pl-foot .rw-go {
margin-top: 0;
}
.rw-ticks {
position: relative;
height: 18px;
margin: -8px 14px 0;
}
.rw-gscale .rw-ticks {
margin-top: 0;
}
.rw-ticks span {
position: absolute;
top: 0;
transform: translateX(-50%);
font-size: 12px;
line-height: 18px;
color: var(--ink-3);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.rw-ticks span.at-start {
transform: translateX(-4px);
}
.rw-ticks span.at-end {
transform: translateX(calc(-100% + 4px));
}
.pay,
.pay-wait,
.paid {
color: var(--ink);
}
.pay-title {
margin: 4px 0 0;
font-size: 36px;
line-height: 40px;
font-weight: 500;
letter-spacing: -0.9px;
color: var(--ink);
text-wrap: balance;
}
.pay-lead {
margin: 8px 0 24px;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.pay-what,
.pay-offer {
margin: 0 0 12px;
}
.btn + .pay-what {
margin-top: 24px;
}
.pay-level-sheet .sheet-title {
margin-bottom: 8px;
}
.pay-level-sheet .pay-level-copy {
margin: 12px 0 0;
font-size: 16px;
line-height: 25px;
color: var(--ink-2);
overflow-wrap: break-word;
}
.pay-level-sheet .kicker + .pay-level-copy {
margin-top: 16px;
color: var(--ink);
}
.pay-level-sheet .sheet-body > .btn {
margin-top: 24px;
}
.pay .section {
margin-top: 4px;
}
.pay .card + .btn {
margin: 8px 0 24px;
}
.pay-sub {
margin: 28px 0 12px;
}
.pay-sub h2 {
margin: 0;
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
}
.pay-sub p {
margin: 4px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.plans {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 12px 0 8px;
}
.plans .plan {
appearance: none;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
min-height: 132px;
padding: 14px 14px 14px 16px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
transition:
box-shadow 0.18s ease,
transform 0.12s ease;
}
.plans .plan:active {
transform: scale(0.98);
}
.plans .plan.on {
box-shadow: inset 0 0 0 2px var(--ink);
}
.plan-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.plan-top b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
}
.plan-sum {
margin: 10px 0 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.3px;
white-space: nowrap;
}
.plan-per {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.plan-tag {
margin-top: auto;
}
.plan-per + .plan-tag {
margin-top: 10px;
}
.plans .plan .box {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
color: transparent;
box-shadow: inset 0 0 0 1.5px var(--ink-4);
}
.plans .plan .box .ic {
width: 13px;
height: 13px;
stroke-width: 3;
}
.plans .plan.on .box {
color: var(--btn-ink);
background: var(--btn);
box-shadow: none;
}
.pay-sep {
height: 0;
margin: 20px 0;
border-top: 1px dashed var(--well);
}
.pay-hint {
margin: 8px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pay-hint.center {
margin-top: 12px;
text-align: center;
}
.pay-mail {
margin: 0 0 16px;
}
.pay-mail label {
font-size: 12px;
font-weight: 400;
color: var(--ink-2);
}
.pay-terms {
margin: 0 0 16px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pay-terms p {
margin: 0 0 8px;
}
.pay-terms .link-btn {
font-size: inherit;
color: var(--ink);
}
.pay-consent {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 16px;
padding: 14px;
border-radius: var(--r-row);
background: var(--well);
color: var(--ink);
font-size: 14px;
line-height: 20px;
}
.pay-consent input {
flex: none;
width: 22px;
height: 22px;
margin: 0;
accent-color: var(--btn);
cursor: pointer;
}
.pay-consent label { cursor: pointer; }
.pay-consent .link-btn {
color: inherit;
font: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.pay-facts {
margin: 0 0 16px;
}
.pay-fact {
min-height: 60px;
}
.pay-more p {
margin: 0 0 8px;
}
.pay-test {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 16px;
padding: 12px 14px;
border-radius: var(--r-row);
background: var(--well);
font-size: 14px;
line-height: 20px;
color: var(--ink);
}
.pay-test .ic {
flex: none;
width: 18px;
height: 18px;
margin-top: 1px;
color: var(--ink-2);
}
.btn.pay-go {
min-height: 52px;
}
.pay-note {
margin: 0 0 16px;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.pay-note p {
margin: 0 0 8px;
font-size: 15px;
line-height: 22px;
white-space: pre-line;
}
.pay-note p:last-child {
margin-bottom: 0;
}
.pw-body {
padding-top: 20px;
}
.pw-body .kicker {
margin: 0 0 6px;
}
.pw-title {
margin: 0 0 10px;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
color: var(--ink);
}
.pw-text {
margin: 0 0 12px;
font-size: 15px;
line-height: 22px;
color: var(--ink);
}
.pay-card-sum {
display: block;
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.5px;
color: var(--dark-ink);
}
.pd-head {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 8px 24px;
text-align: center;
}
.pd-mark {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin: 0 0 16px;
border-radius: 50%;
color: #ffffff;
background: var(--good);
animation: pd-pop 0.5s var(--spring) 0.1s backwards;
}
.pd-mark .ic {
width: 30px;
height: 30px;
stroke-width: 2.6;
}
.pd-title {
margin: 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
}
.pd-sub {
max-width: 330px;
margin: 8px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
text-wrap: balance;
}
.pd-next {
margin: 0 0 20px;
}
@keyframes pd-pop {
from {
opacity: 0;
transform: scale(0.6);
}
}
@media (prefers-reduced-motion: reduce) {
.pd-mark {
animation: none;
}
}
.tr-head {
padding-top: 8px;
}
.tr-head .kicker {
margin: 0 0 6px;
}
.tr-caption {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.tr-caption .kicker {
flex: 1;
min-width: 0;
margin: 0;
}
.tr-sum {
display: flex;
align-items: center;
gap: 12px;
}
.tr-amount {
margin: 0;
font-size: 36px;
line-height: 44px;
font-weight: 500;
letter-spacing: -1.2px;
white-space: nowrap;
}
.tr-copy {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--well);
color: var(--ink);
cursor: pointer;
}
.tr-copy .ic {
width: 17px;
height: 17px;
stroke-width: 2;
}
.tr-copy:active {
background: var(--well-2);
}
.tr-left {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
height: 32px;
padding: 0 12px;
border-radius: 16px;
background: var(--well);
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.tr-left .ic {
width: 16px;
height: 16px;
stroke-width: 2;
}
.tr-list .tr-copy {
background: var(--well-2);
}
.tr-note {
margin: 8px 0 20px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tr-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 0 0 12px;
padding: 20px 16px 16px;
border-radius: var(--r-group);
background: var(--well);
text-align: center;
}
.tr-qr-img {
width: min(232px, 70%);
padding: 8px;
border-radius: 14px;
background: #ffffff;
}
.tr-qr-img img {
display: block;
width: 100%;
height: auto;
image-rendering: pixelated;
pointer-events: none;
}
.tr-qr-txt b {
display: block;
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.tr-qr-txt p {
margin: 4px 0 12px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tr-pill {
appearance: none;
height: 44px;
padding: 0 20px;
border: 0;
border-radius: 22px;
background: var(--dark-pill);
font-size: 15px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.tr-list {
margin: 0 0 16px;
}
.tr-row {
appearance: none;
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 64px;
margin: 0;
padding: 10px 12px 10px 16px;
border: 0;
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
}
.tr-row + .tr-row::before,
.tr-row + .tr-fold-body::before,
.tr-fold-body .tr-row::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 1px;
background: var(--line);
}
.tr-fold-body {
position: relative;
}
.tr-fold-body .tr-row:first-child::before {
display: none;
}
.tr-val {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tr-val small {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tr-val b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
overflow-wrap: anywhere;
}
.tr-fold {
cursor: pointer;
}
.tr-fold:active {
background: var(--well-2);
}
.tr-go {
width: 20px;
height: 20px;
color: var(--ink-3);
stroke-width: 1.6;
transition: transform 0.2s var(--ease);
}
.tr-expand .tr-go {
transform: rotate(90deg);
}
.tr-expand.open .tr-go {
transform: rotate(-90deg);
}
.tr-fold-note {
margin: 0;
padding: 4px 16px 16px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tr-after {
margin: 0 0 16px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tr-btns {
display: grid;
gap: 8px;
margin-top: 4px;
}
.tr-more {
margin-top: 16px;
}
.tr-foot {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
gap: 8px;
margin: 8px calc(var(--gutter) * -1) 0;
padding: 12px var(--gutter) calc(12px + var(--safe-b));
background: var(--bg);
}
.tr-track {
margin: 20px 0 20px;
padding: 6px 0;
list-style: none;
}
.tr-step {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 60px;
padding: 8px 16px;
}
.tr-step:not(:last-child)::after {
content: "";
position: absolute;
top: 40px;
bottom: -20px;
left: 26px;
width: 2px;
border-radius: 1px;
background: var(--line);
}
.tr-step.done::after {
background: var(--good);
}
.tr-dot {
position: relative;
z-index: 1;
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--well);
box-shadow: inset 0 0 0 2px var(--ink-4);
}
.tr-step.done .tr-dot {
color: #ffffff;
background: var(--good);
box-shadow: none;
}
.tr-step.done .tr-dot .ic {
width: 13px;
height: 13px;
stroke-width: 3;
}
.tr-step.now .tr-dot {
box-shadow: inset 0 0 0 2px var(--warn);
}
.tr-step.now .tr-dot::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--warn);
animation: tr-blink 1.6s ease-in-out infinite;
}
.tr-step.next .tr-val b {
color: var(--ink-2);
}
@keyframes tr-blink {
50% {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
.tr-step.now .tr-dot::after {
animation: none;
}
}
.pw-orb {
min-height: 0;
margin: 8px 0 18px;
}
.pay-sheet .pay-more-list {
margin: 0;
}
.pay-cover {
--on-accent: var(--accent-ink);
position: relative;
margin: 12px calc(var(--gutter) * -1) 24px;
padding: 20px var(--gutter) 24px;
border-radius: 0 0 var(--r-hero) var(--r-hero);
color: var(--on-accent);
background: var(--accent);
}
.pay-cover[data-course="food"],
.pay-cover[data-course="energy"] {
--on-accent: var(--btn-ink);
}
.pay-cover.flush:first-child {
margin-top: -12px;
}
.pc-title {
margin: 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
text-wrap: balance;
}
.pc-sub {
margin: 8px 0 0;
font-size: 15px;
line-height: 21px;
}
.pay-cover.a .pc-stage {
position: relative;
display: grid;
gap: 8px;
align-content: start;
min-height: 320px;
margin: 0 0 20px;
}
.pay-cover.a .pc-obj {
position: absolute;
top: 4px;
left: -4%;
width: 52%;
height: auto;
animation: pc-float 6s ease-in-out infinite;
}
.pc-card {
position: relative;
z-index: 1;
width: 66%;
padding: 14px 16px;
border-radius: var(--r-group);
color: var(--btn-ink);
background: var(--btn);
transform: rotate(var(--r, 0deg));
animation: pc-pop 0.5s var(--spring) calc(0.12s + var(--k, 0) * 0.08s) backwards;
}
.pc-card.c1 {
--r: -2deg;
margin-left: 34%;
}
.pc-card.c2 {
--r: 1.5deg;
margin-left: 26%;
}
.pc-card.c3 {
--r: -1.5deg;
margin-left: 14%;
}
.pc-path {
display: flex;
align-items: center;
gap: 5px;
height: 14px;
margin: 0 0 8px;
}
.pc-path i {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ink-2);
}
.pc-path i.on {
background: var(--btn-ink);
}
.pc-path i.now {
width: 12px;
height: 12px;
background: var(--accent);
}
.pc-path em {
margin-left: 2px;
font-size: 12px;
line-height: 14px;
font-style: normal;
color: var(--ink-4);
}
.pc-card b {
display: block;
font-size: 16px;
line-height: 22px;
font-weight: 600;
text-wrap: balance;
}
.pc-desc {
display: block;
margin-top: 2px;
font-size: 14px;
line-height: 20px;
color: var(--ink-4);
text-wrap: balance;
}
.receipt-body { display: grid; gap: 16px; margin: 24px 0; }
.receipt-preview { width: 100%; max-height: 320px; object-fit: contain; border-radius: 14px; }
.receipt-error { color: var(--ink); }
.pb-levels { margin: 0 0 24px; }
.pb-level-sheet .care-hero { margin: 4px 0 16px; }
.pb-level-sheet .sheet-body > .kicker { margin: 0 0 8px; }
.pb-level-sheet .sheet-title { margin: 0 0 16px; font-size: 24px; line-height: 30px; }
.pb-level-sheet .pay-level-copy.pb-level-meaning { margin: 0; color: var(--ink); }
.pb-level-action { margin: 24px 0; }
.pb-level-action .btn { line-height: 22px; }
.pay > .pay-hint + .pay-offer,
.pay > .pay-hint + .plans { margin-top: 16px; }
.pb-level-note { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.pb-level-sheet details.pb-level-terms { margin: 0; }
.pb-level-sheet details.pb-level-terms > summary { gap: 16px; font-size: 16px; line-height: 22px; }
.pb-level-terms > summary::after { flex: none; }
.pb-level-terms-body { padding: 0 16px 16px; }
.pb-level-terms-body p { margin: 0 0 12px; font-size: 16px; line-height: 25px; color: var(--ink); }
.pb-level-terms-body p:last-child { margin-bottom: 0; }
.pd-welcome .pd-head { padding: 16px 0 28px; }
.pd-orb { width: 112px; height: 112px; display: grid; place-items: center; overflow: hidden; contain: paint; margin: 0 0 16px; }
.pd-orb .ld-ring { animation: ld-beat-orb 1.6s var(--ease) 1.1s 1; }
.pd-orb .ld-eyes { animation: ld-eyes-in .3s ease-out .95s both, ld-blink 3.2s ease-in-out 1.6s 1; }
.pd-course { margin-bottom: 28px; }
.pd-course > .kicker { margin: 0 0 8px; }
.pd-course > h2 { font-size: 20px; line-height: 26px; font-weight: 500; margin: 0; }
.pd-course > .pd-course-note { margin: 12px 0 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.pd-course > .pay-go { margin-top: 20px; }
.pd-welcome .pd-next .item { padding-top: 16px; padding-bottom: 16px; }
.pd-reveal .pd-course { animation: pd-unfold .45s var(--ease) .12s backwards; }
.pd-reveal .pd-next { animation: pd-unfold .45s var(--ease) .22s backwards; }
.pd-still .ld-ring, .pd-still .ld-ring i, .pd-still .ld-eyes { animation: none; }
.pd-still .ld-ring i { transform: translate(var(--x1), var(--y1)); }
@keyframes pd-unfold { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
.pd-reveal .pd-course, .pd-reveal .pd-next, .pd-orb .ld-ring, .pd-orb .ld-ring i, .pd-orb .ld-eyes { animation: none; }
.pd-orb .ld-ring i { transform: translate(var(--x1), var(--y1)); }
}
.paid > .pay-go + .pd-rc {
margin-top: 24px;
}
.paid-tour-shade {position:fixed;inset:0;z-index:70;background:var(--scrim);backdrop-filter:blur(2px)}
.paid-tour-target {position:relative;z-index:71;pointer-events:none}
.paid-tour-panel {position:fixed;z-index:72;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);padding:20px;background:var(--well);border-radius:var(--r-card);box-shadow:var(--float-shadow);display:grid;gap:16px;max-height:70dvh;overflow:auto}
.paid-tour-panel h2 {font-size:20px;line-height:26px;margin:0}.paid-tour-panel p {font-size:16px;line-height:24px;color:var(--ink-2);margin:0}.paid-tour-top {display:flex;align-items:center;justify-content:space-between}.paid-tour-icon {width:40px;height:40px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border-radius:14px}.paid-tour-icon .ic {width:24px;height:24px}.paid-tour-icon.unlocked {color:var(--good)}
.paid-tour-in {animation:pd-unfold .24s var(--ease)}
@media(prefers-reduced-motion:reduce){.paid-tour-in{animation:none}.paid-tour-shade{backdrop-filter:none}}
.pay-consent-box .pay-renewal {
margin: 0 0 12px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pay-consent-box .pay-consent {
margin: 0 0 8px;
padding: 8px 0;
background: none;
border-radius: 0;
align-items: center;
}
.pay-consent-box .pay-consent > div { min-height: 40px; align-content: center; }
.pay-method {
margin: 0 0 8px;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
text-align: center;
}
.pay .pay-terms {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: 20px;
row-gap: 0;
margin: 8px 0 16px;
}
.pay .pay-terms .link-btn { min-height: 44px; font-size: 12px; line-height: 16px; }
.pay .pay-terms p { flex-basis: 100%; margin: 0; }
.pay .pay-terms .pay-vpn {font-size:13px;line-height:19px;color:var(--ink-2);text-align:center;margin:4px 0 0}
.pay .pay-facts {margin:0 0 16px}
.pay .pay-consent { overflow-wrap: anywhere; }
.pd-origin { display: grid; gap: 4px; margin-top: 16px; }
.pd-origin .pd-sub { margin: 0; }
.pd-reveal .pd-gift { animation: pd-gift-in .42s var(--ease) both; animation-delay: .16s; }
@keyframes pd-gift-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pd-reveal .pd-gift { animation: none; } }
.v2-offer { padding: 16px 18px; border-radius: var(--r-group); background: var(--well); }
.v2-offer .kicker, .v2-offer .pay-lead { margin: 0; }
.v2-offer .pay-lead { margin-top: 6px; color: var(--ink); }
.v2-facts { margin-top: 8px; }
.pay-quote { padding: 18px; border-radius: var(--r-group); background: var(--well); }
.pay-quote .kicker, .pay-quote .pay-title { margin: 0; }
.pay-quote .pay-title { margin-top: 6px; }
.pay-quote-line { margin: 8px 0 12px; font-size: 17px; line-height: 24px; color: var(--ink); }
.pay-quote .pay-hint { margin-top: 8px; }
.pd-campaign .pd-origin { padding: 16px 18px; border-radius: var(--r-group); background: var(--well); }
.pd-campaign > .pay-go { width: 100%; margin-top: 24px; }
.pay-v2-checkout .pay-quote .pay-renewal {
margin: 6px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pay-v2-checkout .pay-quote-line { margin-top: 16px; }
.pay-v2-checkout .pay-facts { margin-bottom: 24px; }
.pay-v2-checkout .pay-terms { display: block; margin: 0 0 16px; }
.pay-v2-checkout .pay-consent {
min-height: 44px;
margin: 0 0 16px;
padding: 0;
align-items: center;
background: none;
border-radius: 0;
}
.pay-v2-checkout .pay-consent-copy { min-width: 0; }
.pay-v2-checkout .pay-terms .pay-consent .link-btn {
display: inline;
min-height: 0;
padding: 0;
font: inherit;
white-space: normal;
}
.pay-v2-checkout .pay-terms > .pay-go { width: 100%; margin: 0; }
.pay-campaign-checkout .campaign-checkout-head { margin: 0 0 20px; }
.pay-campaign-checkout .campaign-checkout-head .pay-title { margin: 0 0 14px; font-size: 24px; line-height: 30px; }
.pay-campaign-checkout .campaign-deadline { margin: 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.pay-campaign-checkout .checkout-chain:empty { display: none; }
.pay-campaign-checkout .checkout-chain { display: grid; gap: 8px; margin-bottom: 16px; }
.pay-campaign-checkout .checkout-choices[hidden] { display: none; }
.pay-campaign-checkout .checkout-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pay-campaign-checkout .checkout-term { margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; }
.pay-campaign-checkout .checkout-change { flex: none; width: auto; min-height: 44px; padding: 8px 12px; font-size: 14px; line-height: 20px; background: var(--well-2); }
.pay-campaign-checkout .checkout-summary-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 12px; }
.pay-campaign-checkout .checkout-summary-price .pay-title { margin: 0; font-size: 30px; line-height: 36px; }
.pay-campaign-checkout .plan-was { color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 400; }
.pay-campaign-checkout .pay-terms .pay-what { margin: 16px 0 0; }
.pay-includes-sheet .pay-limits-note { margin: 16px 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.pay-includes-sheet .pay-quote-details p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.pay-includes-sheet .pay-quote-details p:last-child { margin-bottom: 0; }
.avatar-btn .ava-count {
position: absolute;
top: -5px;
right: -9px;
z-index: 1;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
border: 2px solid var(--bg);
font-size: 12px;
line-height: 14px;
font-weight: 500;
text-align: center;
color: var(--btn-ink);
background: var(--btn);
font-variant-numeric: tabular-nums;
}
.avatar-btn .ava-count[hidden] {
display: none;
}
.chats-title {
margin: 8px 0 20px;
}
.chat-row {
align-items: center;
}
.chat-row .txt span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.chat-row.unread .txt span {
color: var(--ink);
}
.chat-aside {
display: flex;
flex: none;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 4px;
min-width: 36px;
align-self: stretch;
}
.chat-aside time {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.chat-count {
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
font-size: 12px;
line-height: 20px;
font-weight: 500;
text-align: center;
color: var(--btn-ink);
background: var(--btn);
font-variant-numeric: tabular-nums;
}
.chat-aside .chat-lock {
width: 18px;
height: 18px;
stroke-width: 1.8;
color: var(--ink-3);
}
.chat-orb {
position: relative;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
}
.chat-orb img {
position: absolute;
left: -11px;
top: -18px;
width: 54px;
height: 54px;
pointer-events: none;
}
.chat-orb.big {
width: 36px;
height: 36px;
}
.chat-orb.big img {
left: -12px;
top: -20px;
width: 60px;
height: 60px;
}
.bubble.chat-big {
width: 36px;
height: 36px;
}
.bubble.chat-big .ic {
width: 19px;
height: 19px;
}
.thread-head {
position: sticky;
top: 0;
z-index: 20;
margin: 0;
padding: 12px 0;
background: var(--bg);
border-bottom: 1px solid var(--rule);
}
.thread-head > div {
min-width: 0;
}
.thread-head > .bubble {
display: grid;
color: #ffffff;
font-size: 0;
line-height: 0;
}
.thread-state {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.thread-state.typing-now {
color: var(--ink);
}
.thread-offline {
margin: 12px 0 0;
padding: 12px 16px;
border-radius: var(--r-row);
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
background: var(--well);
}
.thread-offline[hidden] {
display: none;
}
.thread-log {
padding-bottom: 170px;
}
.thread .msg {
animation: none;
}
.thread .msg.fresh {
animation: rise 0.26s var(--ease) backwards;
}
.thread .msg-group.me > .msg.fresh {
transform-origin: 100% 100%;
animation: msg-fly 0.34s cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
}
@keyframes msg-fly {
from { opacity: 0; transform: translateY(26px) scale(0.92); }
to { opacity: 1; transform: none; }
}
.msg-status-row {
display: flex;
justify-content: flex-end;
gap: 16px;
}
@media (prefers-reduced-motion: reduce) {
.thread .msg-group.me > .msg.fresh { animation: none; }
}
.chat-day {
margin: 20px 0 4px;
text-align: center;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.chat-ticket {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 4px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
}
.chat-ticket::before,
.chat-ticket::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
}
.msg-group {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 12px 0 0;
min-width: 0;
max-width: 100%;
}
.thread .msg-acts {max-width:100%;min-width:0}
.thread .msg-acts .chip-x {max-width:100%;height:auto;min-height:36px;padding:8px 12px;white-space:normal;text-align:left;line-height:20px}
.thread .msg-acts .chip-x .ic {flex:none}
.msg-group.cont {
margin-top: 4px;
}
.msg-group.me {
align-items: flex-end;
}
.msg-group > .msg {
margin: 0;
}
.msg-who {
margin: 0 0 4px 4px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.msg-text {
white-space: pre-wrap;
word-break: break-word;
}
.thread .msg blockquote {
margin: 8px 0;
padding: 0 0 0 12px;
border-left: 2px solid var(--ink-4);
color: var(--ink);
}
.thread .msg time {
display: block;
margin: 4px 0 0;
font-size: 12px;
line-height: 16px;
text-align: right;
opacity: 0.55;
font-variant-numeric: tabular-nums;
}
.msg.with-photo {
max-width: 72%;
padding: 4px;
}
.msg.with-photo .msg-text {
display: block;
padding: 8px 12px 0;
}
.msg.with-photo time {
padding: 0 12px 4px;
}
.chat-photo {
display: block;
width: 100%;
max-width: 280px;
height: auto;
max-height: 360px;
border-radius: 18px;
object-fit: cover;
background: var(--well-2);
cursor: zoom-in;
}
.chat-photo.broken {
min-height: 60px;
}
.msg-status {
margin: 4px 4px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: right;
}
button.msg-status {
appearance: none;
padding: 0;
border: 0;
background: transparent;
font-weight: 500;
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.msg-chosen {
margin: 8px 0 0 4px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.chip-x.nav {
gap: 2px;
}
.chip-x.nav .ic {
width: 16px;
height: 16px;
margin-right: -4px;
color: var(--ink-2);
}
.rate-card {
width: 100%;
max-width: 360px;
margin: 8px 0 0;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.rate-card > b {
display: block;
margin: 0 0 12px;
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.rate-row {
display: flex;
justify-content: space-between;
gap: 8px;
}
.rate-dot {
appearance: none;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
font-size: 16px;
font-weight: 500;
color: var(--ink);
background: var(--bg);
cursor: pointer;
transition:
background-color 0.16s ease,
color 0.16s ease;
}
.rate-dot.on {
color: var(--btn-ink);
background: var(--btn);
}
.rate-ends {
display: flex;
justify-content: space-between;
margin: 8px 2px 0;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.rate-ends i {
font-style: normal;
}
.thread-intro .chat-hello {
margin-top: 24px;
}
.thread-kicker {
margin: 4px 4px 8px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.thread-topics .item {
min-height: 54px;
padding: 14px 16px;
}
.compose.thread-compose {
display: block;
}
.compose-row {
display: flex;
align-items: flex-end;
gap: 6px;
}
.thread-hint {
margin: 0 4px 8px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.thread-hint[hidden],
.thread-sugg[hidden],
.thread-attach[hidden] {
display: none;
}
.thread-sugg {
display: flex;
gap: 8px;
margin: 0 0 8px;
overflow-x: auto;
scrollbar-width: none;
}
.thread-sugg::-webkit-scrollbar {
display: none;
}
.thread-sugg .chip-x {
flex: none;
white-space: nowrap;
}
.thread-attach {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 8px;
padding: 8px 8px 8px 8px;
border-radius: var(--r-row);
background: var(--well);
}
.attach-thumb {
flex: none;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--well-2) center / cover no-repeat;
}
.attach-txt {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.attach-txt b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.thread-attach.bad .attach-txt span {
color: var(--ink);
}
.attach-x {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--ink-2);
background: transparent;
cursor: pointer;
}
.attach-x .ic {
width: 18px;
height: 18px;
}
.clip {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 48px;
margin: 0 -4px;
padding: 0;
border: 0;
color: var(--ink-2);
background: transparent;
cursor: pointer;
}
.clip .ic {
width: 22px;
height: 22px;
stroke-width: 1.9;
}
.thread-compose.locked .btn {
margin: 0;
}
.thread-compose.locked .btn + .btn {
margin-top: 8px;
}
.photo-full {position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:calc(var(--full-top,0px) + 72px) 12px calc(var(--safe-b) + 24px);isolation:isolate;overscroll-behavior:none;touch-action:none}
.photo-full-shade {position:absolute;inset:0;z-index:-1;background:#000;animation:photo-shade-in .32s var(--ease) both}
.photo-full-frame {flex:none;position:relative;transform-origin:top left;will-change:transform;touch-action:none;user-select:none}
.photo-full-frame img {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.photo-full-close {position:absolute;top:calc(var(--full-top,0px) + 12px);right:16px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--dark-card);color:var(--dark-ink);z-index:1;animation:photo-shade-in .24s var(--ease) both}
.photo-full-close .ic {width:24px;height:24px}
.photo-full.leaving .photo-full-shade,.photo-full.leaving .photo-full-close {animation:photo-shade-out .26s ease-out both}
body.photo-viewing {overflow:hidden;overscroll-behavior:none}
@keyframes photo-shade-in {from{opacity:0}to{opacity:1}}
@keyframes photo-shade-out {from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.photo-full-shade,.photo-full-close,.photo-full.leaving .photo-full-shade,.photo-full.leaving .photo-full-close{animation-duration:1ms}}
.care-hero {
margin: 28px 0 16px;
}
.care-hero .bubble.chat-big {
width: 64px;
height: 64px;
}
.care-hero .bubble.chat-big .ic {
width: 30px;
height: 30px;
}
.care-lead {
margin: 0 0 20px;
font-size: 16px;
line-height: 25px;
color: var(--ink-2);
}
.care-lock > .title {
margin-bottom: 8px;
}
.care-lock > .kicker {
margin-bottom: 16px;
}
.care-lock .hint {
margin: 16px 0 12px;
}
.care-lock .btn + .btn {
margin-top: 8px;
}
.thread-head > div {
flex: 1;
}
.thread-tickets {
appearance: none;
position: relative;
flex: none;
height: 36px;
padding: 0 12px;
border: 0;
border-radius: 18px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
background: var(--chip);
cursor: pointer;
}
.thread-tickets::after {
content: "";
position: absolute;
inset: -4px;
}
.thread-tickets[hidden] {
display: none;
}
.thread-ticket-list {
margin: 0 0 12px;
}
.sheet-title {
margin: 0 0 16px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.draft-card {
width: 100%;
max-width: 360px;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.draft-kicker {
margin: 0 0 8px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.draft-lead {
margin: 0 0 8px;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.draft-quote {
margin: 0;
padding: 0 0 0 12px;
border-left: 2px solid var(--ink-4);
font-size: 16px;
line-height: 24px;
white-space: pre-wrap;
}
.draft-due {
margin: 8px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.draft-card .btn {
width: 100%;
margin: 14px 0 0;
}
.draft-more .btn {
margin: 0;
}
.draft-more {
display: flex;
gap: 8px;
margin: 8px 0 0;
}
.draft-more .btn.second {
flex: 1;
background: var(--bg);
}
.chat-event {
margin: 16px 0 4px;
}
.pb-care > .kicker { margin: 0 0 8px; }
.pb-care > .title { margin: 0 0 20px; }
.pb-care-card .care-lead { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink); }
.pb-care-action { margin: 24px 0 0; }
.pb-care-help .item .txt span { white-space: normal; }
.pb-history-thread .thread-log { padding-bottom: 20px; }
.pb-history-thread .compose.pb-history-actions {
position: static;
width: auto;
max-width: none;
padding: 16px var(--gutter) calc(16px + var(--safe-b));
transform: none;
}
.pb-history-actions > .thread-hint { margin: 0 0 16px; font-size: 15px; line-height: 21px; }
.pb-history-actions details.pb-history-interest { margin: 0 0 16px; }
.pb-history-actions details.pb-history-interest > summary { gap: 16px; font-size: 16px; line-height: 22px; }
.pb-history-interest > summary::after { flex: none; }
.pb-history-interest-body { padding: 0 16px 16px; }
.pb-history-interest-body p { margin: 0 0 16px; font-size: 16px; line-height: 25px; color: var(--ink); }
.pb-history-help { margin: 0; }
.thread .msg[data-mid] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.msg-quote {
display: grid; gap: 1px; width: 100%; min-width: 0; margin: -2px 0 8px; padding: 2px 0 2px 10px;
border: 0; border-left: 2px solid currentColor; border-radius: 0; background: transparent; color: inherit;
font: inherit; text-align: left; cursor: pointer; opacity: .82;
}
.msg-quote b { font-size: 14px; line-height: 19px; font-weight: 600; }
.msg-quote span {
display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
font-size: 14px; line-height: 19px; overflow-wrap: anywhere;
}
.msg.with-photo .msg-quote { margin: 4px 8px 6px; width: auto; }
.thread .msg.msg-swiping { transition: none; position: relative; }
.thread .msg.msg-swiping::after {
content: ""; position: absolute; top: 50%; right: -40px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%;
background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3C/svg%3E") center / 16px no-repeat;
opacity: var(--reply, 0); transform: scale(calc(.6 + var(--reply, 0) * .4));
}
.thread .msg { transition: transform .22s var(--ease); }
.msg-flash { animation: msg-flash 1.2s ease; }
@keyframes msg-flash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ib-violet) 45%, transparent); } 100% { box-shadow: none; } }
.thread-reply {
display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 6px 4px 6px 12px;
border-radius: 18px; background: var(--well); animation: rise .22s var(--ease) backwards;
}
.thread-reply[hidden] { display: none; }
.thread-reply > .ic { flex: none; width: 20px; height: 20px; color: var(--ib-violet); }
.thread-reply-txt { flex: 1; min-width: 0; display: grid; }
.thread-reply-txt b { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ib-violet); }
.thread-reply-txt span { font-size: 14px; line-height: 19px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-menu-layer { position: fixed; inset: 0; z-index: 80; }
.msg-menu-scrim {
position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0;
background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
animation: msg-menu-fade .2s ease backwards;
}
.msg-lifted { position: fixed; margin: 0 !important; pointer-events: none; transform: scale(1.02); transform-origin: center;
box-shadow: var(--float-shadow); animation: msg-lift .24s var(--ease) backwards; }
.msg-menu {
position: fixed; min-width: 196px; padding: 6px; border-radius: 18px; background: var(--bg); box-shadow: var(--float-shadow);
display: grid; gap: 2px; animation: msg-menu-in .24s var(--ease) backwards;
}
:root[data-theme="dark"] .msg-menu { background: #232326; }
.msg-menu button {
display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px;
background: transparent; color: var(--ink); font: inherit; font-size: 16px; text-align: left;
}
.msg-menu button:active { background: var(--well); }
.msg-menu .ic { width: 20px; height: 20px; }
.msg-menu-layer.out { animation: msg-menu-fade .18s ease reverse forwards; }
@keyframes msg-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes msg-lift { from { transform: scale(1); box-shadow: none; } }
@keyframes msg-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
.msg-flash, .thread-reply, .msg-menu-scrim, .msg-lifted, .msg-menu, .msg-menu-layer.out { animation: none; }
.thread .msg { transition: none; }
}
.msg-lifted time { display: block; margin: 4px 0 0; font-size: 12px; line-height: 16px; text-align: right; opacity: .55;
font-variant-numeric: tabular-nums; }
.thread-head {
padding: 10px 0 12px;
border-bottom: 0;
background: color-mix(in srgb, var(--bg) 84%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0 1px 0 color-mix(in srgb, var(--rule) 55%, transparent);
}
.thread-head b { height: auto; font-size: 17px; line-height: 22px; font-weight: 600; }
.thread-head .thread-state { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.thread-head .thread-state.typing-now { color: var(--ib-violet); }
.thread-head {
background: var(--bg);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.thread-head::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 28px;
background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 85%, transparent), color-mix(in srgb, var(--bg) 0%, transparent));
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent);
mask-image: linear-gradient(to bottom, #000 20%, transparent);
pointer-events: none;
}
.compose::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 32px;
background: linear-gradient(to top, color-mix(in srgb, var(--bg) 85%, transparent), color-mix(in srgb, var(--bg) 0%, transparent));
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
-webkit-mask-image: linear-gradient(to top, #000 20%, transparent);
mask-image: linear-gradient(to top, #000 20%, transparent);
pointer-events: none;
}
.thread-head.th-center {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.thread-head.th-center > .th-title {
flex: none;
min-width: 0;
max-width: 62vw;
text-align: center;
}
.thread-head.th-center .th-side {
flex: none;
display: flex;
align-items: center;
min-width: 0;
}
.thread-head.th-center .th-side.end {
justify-content: flex-end;
}
.thread-head.th-center b {
font-size: 16px;
line-height: 21px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thread-head.th-center .thread-state {
-webkit-line-clamp: 1;
}
.thread-head.th-center .bubble.chat-big {
width: 32px;
height: 32px;
}
.thread-head.th-center .bubble.chat-big .ic {
width: 17px;
height: 17px;
}
.thread-head.th-center .th-side .bubble {
display: grid;
place-items: center;
color: #ffffff;
font-size: 0;
line-height: 0;
}
.thread-head.th-center{grid-template-columns:32px minmax(0,1fr) 32px}
.thread-head.th-center>.th-title{max-width:none}
.thread-head.th-center .thread-state{white-space:normal;-webkit-line-clamp:2}
.thread-tickets-nav{display:flex;justify-content:center;flex-shrink:0;padding:4px 0 12px}
.thread-tickets-nav[hidden]{display:none}
.thread-tickets{height:44px;padding:0 18px;border-radius:22px}
.thread-ticket-list{display:flex;flex-direction:column;gap:12px;margin:0}
.thread-ticket-card{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;border:0;border-radius:var(--r-group);background:var(--well);color:var(--ink);padding:20px;text-align:left;font:inherit}
.thread-ticket-card b{font-size:19px;line-height:25px;font-weight:500}
.thread-ticket-number{font-size:12px;color:var(--ink-2);white-space:nowrap;flex-shrink:0}
.thread-ticket-status{display:inline-block;max-width:100%;font-size:14px;line-height:20px;color:var(--ink-2)}
.thread-ticket-status.resolved{color:var(--ink);font-weight:500}
.thread-ticket-detail>.sheet-title{margin:14px 0 4px}
.thread-ticket-detail>.hint{margin:0}
.thread-ticket-steps{list-style:none;position:relative;margin:28px 0;padding:0 0 0 32px}
.thread-ticket-steps::before{content:"";position:absolute;left:8px;top:10px;bottom:30px;width:1px;background:var(--line)}
.thread-ticket-steps li{display:flex;flex-direction:column;gap:6px;margin:0 0 24px;position:relative}
.thread-ticket-steps li:last-child{margin-bottom:0}
.thread-ticket-steps li::before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;left:-28px;top:6px;background:var(--ink-2)}
.thread-ticket-steps b{font-size:16px;line-height:22px;font-weight:500}
.thread-ticket-steps span{font-size:14px;line-height:20px;color:var(--ink-2)}
.thread-ticket-detail>.btn+.btn{margin-top:8px}
.thread .support-widget{padding:16px;border-radius:var(--r-group);margin:16px 0;overflow-wrap:anywhere}
.thread .support-widget .cm-lead{margin:12px 0;line-height:1.5}
.support-widget-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px -6px 6px 0}
.support-widget-close{appearance:none;display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;color:var(--ink-2);background:transparent;font:inherit;font-size:24px;cursor:pointer}
.thread .support-widget .msg-acts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px}
.thread .support-widget .chip-x{min-height:48px;height:auto;padding:12px 14px;white-space:normal;line-height:22px;justify-content:center;text-align:center;background:var(--chip);border:0;border-radius:var(--r-btn);font:500 16px/22px var(--font)}
.thread .support-widget>.chip-x{width:100%;margin-top:12px}
.thread .support-widget .cm-rows{margin-top:16px}
.support-access-course{font-size:14px;line-height:20px;color:var(--ink-2);margin:0}
.support-widget-refresh{appearance:none;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:12px;min-height:44px;margin:8px 0 -8px;padding:8px 0;text-align:left;cursor:pointer}
.thread-ticket-card:focus-visible,.support-widget button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.thread-head:has(+.thread-tickets-nav:not([hidden]))::after{display:none}
.thread .support-tools{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;margin:0 0 8px;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.thread .support-tools::-webkit-scrollbar{display:none}
.thread .support-tools .chip-x{flex:0 0 auto;min-height:44px;height:44px;white-space:nowrap;line-height:20px;max-width:none;padding:0 16px;font:500 15px/20px var(--font)}
.thread-log>.thread-hint{margin:20px 0 12px;padding:0 8px;text-align:center;font:400 14px/20px var(--font);color:var(--ink-2)}
.thread-ticket-detail>.thread-ticket-number{margin:8px 0 0}
.thread-ticket-summary,.thread-ticket-preview{font:400 16px/24px var(--font);color:var(--ink-2);overflow-wrap:anywhere}
.thread-ticket-summary{margin:20px 0}
.thread-ticket-answer{margin:24px 0;padding:16px;border-radius:var(--r-group);background:var(--well)}
.thread-ticket-answer>b{font:500 15px/22px var(--font)}
.thread-ticket-answer>p{margin:8px 0 0;font:400 16px/24px var(--font);overflow-wrap:anywhere}
.thread-ticket-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:4px}
.thread-ticket-card .thread-ticket-status.resolved{color:var(--good)}
.care-tickets-sheet .scrim,.care-ticket-detail .scrim{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.sheet.care-tickets-sheet{align-items:stretch;padding-top:var(--full-top,0px)}
:root .sheet.care-tickets-sheet .panel{max-height:none!important;height:100%;max-width:560px;background:transparent;border-radius:0;padding:20px var(--gutter) calc(24px + var(--safe-b));box-shadow:none}
.care-tickets-sheet .grip{display:none}
.care-tickets-sheet .sheet-body{flex:1;display:flex;overflow:hidden;mask-image:none!important;-webkit-mask-image:none!important}
.thread-ticket-browser{display:flex;flex:1;min-height:0;flex-direction:column;width:100%}
.thread-ticket-browser>.sheet-title{text-align:center;margin:8px 0 28px;flex-shrink:0}
.thread-ticket-browser>.thread-ticket-list{overflow-y:auto;min-height:0;flex:1;padding:2px;overscroll-behavior:contain}
.thread-ticket-browser>.thread-ticket-list .thread-ticket-card{flex-shrink:0}
.thread-ticket-dismiss{display:flex;align-items:center;justify-content:center;gap:8px;align-self:center;flex-shrink:0;min-height:48px;margin-top:24px;padding:0 20px;border:0;border-radius:24px;background:var(--chip);color:var(--ink);font:500 16px/22px var(--font)}
.thread-ticket-dismiss svg{width:20px;height:20px}
.club-head + .feature {
margin-top: 20px;
}
.club-month + .list {
margin-top: 16px;
}
.cm-card {
min-height: 0;
}
.cm-art {
display: flex;
flex-direction: column;
gap: 8px;
}
.cm-label {
font-size: 14px;
line-height: 20px;
color: var(--dark-ink-2);
}
.cm-task {
margin: 0;
font-size: 17px;
line-height: 24px;
font-weight: 500;
color: #ffffff;
text-wrap: pretty;
}
.cm-bar {
height: 4px;
margin-top: 16px;
border-radius: 2px;
background: var(--dark-pill);
overflow: hidden;
}
.cm-bar i {
display: block;
height: 100%;
border-radius: inherit;
background: #ffffff;
}
.cm-rule {
font-size: 13px;
line-height: 18px;
color: var(--dark-ink-2);
}
.cm-rules {
display: grid;
gap: 6px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.cm-rules li {
position: relative;
padding-left: 14px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.cm-rules li::before {
content: "";
position: absolute;
left: 2px;
top: 8px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--ink-3);
}
.cm-card.static {
cursor: default;
}
.cm-card.static:active {
transform: none;
}
.fc-foot.cm-foot-line {
display: flex;
align-items: center;
gap: 8px;
}
.cm-lock {
flex: none;
width: 16px;
height: 16px;
color: var(--dark-ink-2);
}
.cm-card .fc-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
border-radius: 18px;
color: #1d1d1f;
background: #ffffff;
}
.cm-card .fc-btn::before {
content: "";
position: absolute;
inset: -4px -4px;
}
.cm-card .fc-btn.on {
color: #ffffff;
background: var(--dark-pill);
}
.cm-card .fc-btn .ic {
width: 16px;
height: 16px;
stroke-width: 2.6;
}
.cm-card .fc-btn[disabled] {
opacity: 0.6;
}
.cm-cal {
padding: 16px 8px 12px;
}
.cm-stat {
margin: 0 8px 16px;
padding: 0 0 16px;
border-bottom: 1px solid var(--line);
}
.cm-stat > p {
margin: 4px 0 16px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.cm-cal-head,
.cm-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cm-cal-head span {
padding: 0 0 8px;
font-size: 12px;
line-height: 16px;
text-align: center;
color: var(--ink-2);
}
.cm-grid {
row-gap: 4px;
}
.cm-cell {
appearance: none;
justify-self: center;
display: grid;
place-items: center;
width: min(44px, 100%);
height: auto;
aspect-ratio: 1;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
font: inherit;
font-size: 15px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink);
background: transparent;
transition: transform 0.12s ease;
}
.cm-cell.past {
font-weight: 400;
color: var(--ink-2);
}
.cm-cell.next {
font-weight: 400;
color: var(--ink-3);
}
.cm-cell.done {
color: var(--btn-ink);
background: var(--btn);
}
.cm-cell.done .ic {
width: 18px;
height: 18px;
stroke-width: 3;
}
.cm-cell.now {
box-shadow: inset 0 0 0 2px var(--ink);
}
.cm-cell.can {
cursor: pointer;
}
button.cm-cell:active {
transform: scale(0.9);
}
.cm-cell.blank {
visibility: hidden;
}
.cm-cal > .cm-hint {
margin: 12px 8px 0;
font-size: 14px;
line-height: 20px;
text-align: center;
color: var(--ink-2);
}
.cm-today > .kicker {
margin: 0 0 8px;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.card > .cm-today-task {
margin: 0 0 16px;
font-size: 16px;
line-height: 24px;
}
.cm-done {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
}
.cm-done b {
flex: 1;
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.cm-done .link-btn {
min-height: 44px;
font-size: 15px;
color: var(--ink-2);
}
.cy-mon {
flex: none;
width: 44px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.cy-row.cur .cy-mon {
font-weight: 500;
color: var(--ink);
}
.club-gifts .stat-card > p:last-child {
margin-bottom: 0;
}
.list.inside .item {
align-items: flex-start;
}
.list.inside .item > .ic.go {
margin-top: 8px;
}
.club-join {
margin: 0 0 24px;
}
.club-join p {
margin: 0 0 16px;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.sheet-lesson .cm-sheet-note {
font-size: 14px;
line-height: 20px;
}
.sheet-lesson .cm-sheet-var b {
display: block;
font-weight: 500;
color: var(--ink);
}
.sheet-lesson .cm-sheet-var span {
display: block;
margin-top: 4px;
}
.cm-opt {
align-items: center;
}
.cm-ideas .item {
min-height: 56px;
padding: 8px 16px;
}
.cm-ideas .txt {
gap: 0;
}
.cm-opt .txt span {
white-space: normal;
}
.fc-foot.cm-foot {
display: flex;
align-items: center;
justify-content: space-between;
}
.cm-progress {
display: inline-flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.cm-chev {
flex: none;
width: 16px;
height: 16px;
color: var(--dark-ink-2);
stroke-width: 2;
}
.c-sleep { --cc: #ad46ff; }
.c-food { --cc: #00bc7d; }
.c-energy { --cc: #9ae600; }
.c-stress,
.c-teeth { --cc: #00a6f4; }
.c-move { --cc: #f6339a; }
.c-focus { --cc: #3392ff; }
.bubble.cc { background: var(--cc, var(--accent)); }
.bubble.big {
width: 56px;
height: 56px;
}
.bubble.big .ic {
width: 28px;
height: 28px;
stroke-width: 2;
}
.group-lead {
margin: -4px 0 12px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.group-lead.first {
margin: 0 0 16px;
}
.wait-head {
display: flex;
flex-direction: column;
gap: 2px;
margin: 20px 0 10px;
}
.wait-head b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.wait-head span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tip-pill, .item .txt .tip-pill {
display: inline-flex;
align-items: center;
min-height: 24px;
margin-left: 8px;
padding: 0 8px;
border-radius: 999px;
font-size: 12px;
line-height: 1;
font-weight: 500;
color: var(--accent-text);
background: var(--accent-soft);
white-space: nowrap;
vertical-align: 2px;
}
.item .txt .type-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.type-name .tip-pill { margin-left: 0; }
.cv-head {
margin: 4px 0 0;
}
.cv-head .bubble.big,
.cq-body > .bubble.big {
margin: 0 0 16px;
}
.cv-head .kicker,
.cq-body > .kicker {
margin: 0 0 6px;
}
.cv-facts {
display: flex;
margin: 20px 0 0;
padding: 14px 0;
border-radius: var(--r-group);
background: var(--well);
}
.cv-fact {
flex: 1;
min-width: 0;
padding: 0 14px;
}
.cv-fact + .cv-fact {
box-shadow: inset 1px 0 0 var(--line);
}
.cv-fact b {
display: block;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.4px;
color: var(--ink);
}
.cv-fact span {
display: block;
margin: 2px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.cv-state {
margin: 12px 0 0;
padding: 14px 16px;
border-radius: var(--r-group);
box-shadow: inset 0 0 0 1px var(--rule);
}
.cv-state b {
display: block;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.cv-state p {
margin: 4px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.cv-state .pbar {
margin: 12px 0 2px;
}
.course-view .list .item .val {
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.more-row {
appearance: none;
position: relative;
display: block;
width: 100%;
min-height: 52px;
padding: 0 16px;
border: 0;
background: transparent;
font-size: 15px;
font-weight: 500;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.more-row::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 1px;
background: var(--line);
}
.more-row:active {
background: var(--well-2);
}
.cv-disc {
margin: 20px 0 0;
}
.cat-done {
display: grid;
justify-items: center;
gap: 8px;
padding-top: 40px;
text-align: center;
}
.cat-done > .back-link {
justify-self: start;
}
.cat-done .title {
margin-top: 12px;
}
.cat-done .lead {
margin: 0;
}
.cat-done .hint {
margin: 0;
}
.cat-done .btns {
justify-self: stretch;
margin-top: 20px;
}
.cq-body.in > * {
animation: rise-push 0.3s var(--ease) backwards;
}
.cq-top {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 20px;
}
.cq-top .pbar {
flex: 1;
}
.cq-top span {
flex: none;
font-size: 14px;
color: var(--ink-2);
}
.cq-body .title.cq-q {
font-size: 20px;
line-height: 26px;
}
.cq-body > .lead + .hint {
margin-top: 16px;
}
.cq-opts {
display: grid;
gap: 8px;
margin: 20px 0 0;
}
.cq-opts .opt {
width: 100%;
}
.cq-body > .btn.ghost {
margin-top: 12px;
}
.cq-body > .btn.submit {
margin-top: 20px;
}
.cq-traits {
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.cq-traits li {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 10px;
font-size: 16px;
line-height: 23px;
color: var(--ink);
}
.cq-traits .ic {
flex: none;
width: 18px;
height: 18px;
margin-top: 3px;
stroke-width: 2.4;
color: var(--good);
}
.cq-body > .callout {
margin: 16px 0 0;
}
.cq-stop p {
margin: 0 0 14px;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.cq-body > .btn + .btn {
margin-top: 10px;
}
.terms-view .seg {
margin: 20px 0 0;
}
.terms-stat {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 16px;
}
.terms-stat .pbar {
flex: 1;
}
.terms-stat span {
flex: none;
font-size: 14px;
color: var(--ink-2);
}
.term {
appearance: none;
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
margin: 0;
padding: 14px 16px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
button.term:active {
background: var(--well-2);
}
.term + .term::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 1px;
background: var(--line);
}
.tm-t {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.tm-t b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.tm-t span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tm-t .tm-x {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.term.locked {
cursor: default;
}
.term.locked b {
color: var(--ink-2);
}
.tm-t .tm-day {
font-size: 12px;
line-height: 16px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
.tm-state {
flex: none;
margin-top: 2px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.tm-state.again {
font-weight: 400;
color: var(--ink-2);
}
.tm-known {
flex: none;
width: 16px;
height: 16px;
margin: 3px -6px 0 0;
stroke-width: 2.6;
color: var(--good);
}
.tm-lock {
flex: none;
width: 16px;
height: 16px;
margin-top: 3px;
stroke-width: 1.8;
color: var(--ink-3);
}
.sheet-term .kicker {
margin: 0 0 6px;
}
.sheet-term h3 + p {
color: var(--ink);
font-size: 16px;
line-height: 25px;
}
.cards-top {
display: flex;
align-items: center;
gap: 12px;
margin: 4px 0 20px;
}
.cards-top .pbar {
flex: 1;
}
.cards-top span {
flex: none;
font-size: 14px;
color: var(--ink-2);
}
.flash-stage {
position: relative;
margin: 0 0 24px;
perspective: 1400px;
}
.flash-stage::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: -8px;
height: 48px;
border-radius: var(--r-card);
background: var(--well);
opacity: 0.55;
transition: opacity 0.2s ease;
}
.flash-stage.single::before {
opacity: 0;
}
.flash {
appearance: none;
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
transition: transform 0.23s var(--ease), opacity 0.23s var(--ease);
}
.fl-inner {
display: grid;
transform-style: preserve-3d;
transition: transform 0.52s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.flash.flipped .fl-inner {
transform: rotateY(180deg);
}
.fl-face {
grid-area: 1 / 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 340px;
padding: 28px 24px;
box-sizing: border-box;
border-radius: var(--r-card);
background: var(--well);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.fl-back {
transform: rotateY(180deg);
}
.flash.instant,
.flash.instant .fl-inner,
.flash.dragging {
transition: none;
}
.flash.out-right {
transform: translateX(115%) rotate(12deg);
opacity: 0;
}
.flash.out-left {
transform: translateX(-115%) rotate(-12deg);
opacity: 0;
}
.flash.enter {
animation: fl-enter 0.32s var(--ease);
}
@keyframes fl-enter {
from {
transform: translateY(12px) scale(0.96);
opacity: 0.5;
}
}
.fl-tag {
position: absolute;
top: 20px;
padding: 6px 12px;
border-radius: 999px;
font-size: 14px;
line-height: 18px;
font-weight: 500;
pointer-events: none;
}
.fl-yes {
right: 20px;
color: var(--btn-ink);
background: var(--btn);
opacity: clamp(0, var(--swipe, 0) * 1.6, 1);
}
.fl-no {
left: 20px;
color: var(--ink);
background: var(--chip);
opacity: clamp(0, var(--swipe, 0) * -1.6, 1);
}
.flash .kicker {
margin: 0 0 10px;
}
.fl-term {
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
text-wrap: balance;
}
.fl-hint {
margin: 18px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-3);
}
.fl-text {
font-size: 17px;
line-height: 26px;
color: var(--ink);
}
.fl-from {
margin: 18px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
.flash,
.fl-inner {
transition: none;
}
.flash.enter {
animation: none;
}
}
.program > .seg {
margin: 16px 0 20px;
}
.item .go.done {
color: var(--good);
stroke-width: 2.4;
}
.terms-facts {
margin: 20px 0 0;
}
.cards-view .cv-facts {
margin: 24px 0 0;
}
.cards-view > .btn.second {
margin-top: 20px;
}
.more-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.more-row .go {
width: 20px;
height: 20px;
stroke-width: 1.6;
color: var(--ink-3);
}
.cv-foot {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
gap: 10px;
margin: 20px calc(var(--gutter) * -1) 0;
padding: 12px var(--gutter) calc(12px + var(--safe-b));
background: var(--bg);
}
.cv-foot:empty {
display: none;
}
.cv-foot .cv-note {
margin: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
}
.cv-foot .btn.submit {
margin: 0;
}
.cv-plan {
margin: 8px 0 0;
}
.ck {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - 72px - var(--safe-b));
padding: 16px 0 8vh;
}
.ck-head {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 8px 24px;
text-align: center;
}
.ck-mark {
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin: 0 0 16px;
border-radius: 50%;
color: #ffffff;
background: var(--good);
animation: ck-pop 0.5s var(--spring) 0.1s backwards;
}
.ck-mark .ic {
width: 30px;
height: 30px;
stroke-width: 2.6;
}
.ck-title {
margin: 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
}
.ck-num {
margin: 12px 0 0;
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.4px;
font-variant-numeric: tabular-nums;
}
.ck-num span {
margin-left: 6px;
font-size: 17px;
line-height: 22px;
letter-spacing: 0;
color: var(--ink-2);
}
.ck-line {
max-width: 320px;
margin: 8px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
text-wrap: balance;
}
.ck-head .ck-pills {
justify-content: center;
margin: 16px 0 0;
}
.ck-edit {
appearance: none;
min-height: 44px;
margin: 8px 0 -8px;
padding: 0 16px;
border: 0;
background: transparent;
font: inherit;
font-size: 15px;
font-weight: 500;
color: var(--ink-2);
cursor: pointer;
transition: opacity 0.12s ease;
}
.ck-edit:active {
opacity: 0.6;
}
.ck-rows {
margin: 0 0 20px;
}
@keyframes ck-pop {
from {
opacity: 0;
transform: scale(0.6);
}
}
@media (prefers-reduced-motion: reduce) {
.ck-mark {
animation: none;
}
}
.ck-step > .kicker {
margin: 8px 0 6px;
}
.ck-step > .title {
margin: 8px 0 0;
}
.ck-step > .kicker + .title {
margin-top: 0;
}
.ck-step > .title.ck-long {
font-size: 20px;
line-height: 26px;
}
.ck-step > .lead {
margin: 8px 0 0;
font-size: 15px;
line-height: 21px;
}
.ck-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 8px;
margin: 20px 0 0;
}
.ck-stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 14px 12px 12px;
border-radius: var(--r-row);
background: var(--well);
}
.ck-stat b {
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.3px;
font-variant-numeric: tabular-nums;
}
.ck-stat span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ck-stat-feel b {
display: flex;
align-items: center;
height: 30px;
}
.ck-stat-feel .feelbar {
height: 22px;
}
.ck-text {
margin: 20px 0 0;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.ck-step > .ck-rows {
margin: 20px 0 0;
}
.ck-q {
margin: 28px 0 12px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.ck-step > .lead + .ck-q,
.ck-step > .title + .ck-q {
margin-top: 20px;
}
.ck-step > .title + .ck-choice,
.ck-step > .lead + .ck-choice,
.ck-step > .ck-more + .ck-choice {
margin-top: 20px;
}
.ck-choice.busy .opt {
pointer-events: none;
}
.ck-choice .opt.pending {
animation: breathe 1s ease-in-out infinite;
}
.ck-more {
margin: 12px 0 0;
}
.ck-more summary {
display: flex;
min-height: 48px;
align-items: center;
font-size: 15px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.ck-more summary::-webkit-details-marker {
display: none;
}
.ck-more p {
margin: 4px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.ck-step .btn.ck-go {
margin-top: 20px;
}
.ck-mail {
margin: 20px 0 0;
}
.ck-skip {
display: block;
margin: 8px auto 0;
}
.ck-done > .title {
margin: 8px 0 0;
}
.ck-done > .lead {
margin: 4px 0 20px;
font-size: 15px;
line-height: 21px;
}
.ck-done > .ck-pills {
margin: 0 0 20px;
}
.card.ck-night {
margin: 0 0 20px;
padding: 16px 16px 14px;
}
.ck-night .sleepline {
margin: 0 0 12px;
}
.ck-night .sleepline b {
font-size: 30px;
line-height: 36px;
letter-spacing: -0.4px;
}
.ck-night .span {
margin: 0 0 10px;
}
.card.ck-night > .facts {
margin: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.card.ck-night > .facts:first-letter {
text-transform: uppercase;
}
.nflow .flow-body > .title {
margin: 8px 0 20px;
}
.nflow .flow-body > .title.has-lead {
margin-bottom: 8px;
}
.nflow .flow-body > .lead {
margin: 0 0 20px;
font-size: 15px;
line-height: 21px;
}
.nflow .field {
margin: 0;
}
.opts.ck-one {
grid-template-columns: 1fr;
}
.ck-feel .opt {
justify-content: flex-start;
}
.ck-feel .ck-feel-w {
flex: 1;
}
.ck-feel .feelbar {
flex: none;
height: 18px;
}
.nflow .card.ck-night {
margin: 0;
}
.nflow .flow-main {
margin-top: 20px;
}
.nflow .btn.ck-change {
margin-top: 8px;
}
.adapt-now {
margin: 4px 0 0;
}
.adapt-now .kicker {
margin-bottom: 6px;
}
.adapt-now .an-rows {
margin: 14px 0 -6px;
border-top: 1px solid var(--line);
}
.adapt-now .item {
min-height: 0;
padding: 12px 0;
}
.adapt-now .item + .item::before {
left: 44px;
right: 0;
}
.adapt-day {
margin: 20px 4px 8px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.adapt-log > .adapt-day:first-child {
margin-top: 0;
}
.adapt-log .item + .item::before {
left: 16px;
}
.adapt-row .val {
align-self: flex-start;
margin-top: 2px;
font-size: 14px;
}
.adapt-log > .btn {
margin-top: 16px;
}
.adapt-empty {
margin: 0 0 8px;
}
.adapt-sheet h3 {
font-size: 20px;
line-height: 26px;
}
.seg button,
.segm button,
.kq-again,
.msg-status.fail,
.rate-dot,
.attach-x,
.clip,
.me-card,
.fc-btn,
.switch-row,
.toast-act {
transition: opacity 0.12s ease;
}
.seg button:active,
.segm button:active,
.kq-again:active,
.msg-status.fail:active,
.rate-dot:active,
.attach-x:active,
.clip:active,
.fc-btn:active,
.switch-row:active,
.toast-act:active {
opacity: 0.6;
}
.me-card:active {
opacity: 0.8;
}
.stream-row[role="button"] {
transition: background-color 0.16s ease;
}
.stream-row[role="button"]:active {
background: var(--well-2);
}
.btn + .btn.ghost {
margin-top: 4px;
}
.toast {
width: max-content;
}
.toast.act {
display: flex;
align-items: center;
gap: 12px;
width: calc(100% - 32px);
max-width: 520px;
padding: 4px 4px 4px 18px;
}
.toast.act .toast-t {
flex: 1;
min-width: 0;
padding: 6px 0;
}
body .toast.top,
body.full .toast.top,
body.composing .toast.top {
top: calc(64px + var(--full-top, 0px));
bottom: auto;
}
.toast-act {
appearance: none;
flex: none;
height: 44px;
padding: 0 16px;
border: 0;
border-radius: 22px;
background: rgba(127, 127, 127, 0.28);
font: inherit;
font-size: 15px;
font-weight: 500;
color: inherit;
cursor: pointer;
}
.home-list,
.place-list {
margin-top: 24px;
}
body.tg-full {
--full-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
}
body.tg-full::before {
content: "";
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 45;
height: var(--full-top);
background: var(--bg);
pointer-events: none;
}
body.tg-full .app {
padding-top: calc(12px + var(--full-top));
}
body.tg-full .pl-top,
body.tg-full .flow-top,
body.tg-full .thread-head,
body.tg-full .ritm-chat-top {
top: var(--full-top);
}
body.tg-full .sheet .panel {
max-height: min(72dvh, calc(100% - var(--full-top) - 16px));
}
.pl-full {
appearance: none;
position: relative;
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 18px;
background: var(--chip);
color: var(--ink);
cursor: pointer;
transition: opacity 0.12s ease;
}
.pl-full .ic {
width: 17px;
height: 17px;
stroke-width: 2.2;
}
.pl-full:active {
opacity: 0.6;
}
.pl-full::after {
content: "";
position: absolute;
inset: -4px;
}
.sm-mark.ok,
.sm-mark.late {
color: inherit;
}
.night-sheet {
display: grid;
justify-items: center;
gap: 8px;
margin: 4px 0 24px;
text-align: center;
}
.night-sheet .art {
width: 96px;
height: 96px;
margin: 0 0 8px;
}
.night-sheet h3 {
margin: 0;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.night-sheet p {
margin: 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.sm-do {
margin: 0 0 14px;
font-size: 16px;
line-height: 23px;
color: var(--dark-ink);
}
.sm-today .btn.small {
margin: 0 0 16px;
}
.sm-progress span {
font-size: 14px;
}
.chart .s-sun {
fill: var(--c-light);
}
.sw.s-sun {
background: var(--c-light);
}
.tool .chart-card .pick-info {
padding: 14px 0 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: transparent;
}
.chart .sun-t {
fill: var(--ink-2);
font-size: 12px;
}
.flow-top {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
margin: -12px calc(-1 * var(--gutter)) 12px;
padding: 8px var(--gutter);
background: var(--bg);
}
.flow-back {
appearance: none;
display: inline-flex;
align-items: center;
gap: 2px;
flex: none;
margin-left: -8px;
padding: 6px 10px 6px 2px;
border: 0;
border-radius: 16px;
background: transparent;
font-size: 16px;
color: var(--ink);
cursor: pointer;
}
.flow-back .ic {
width: 22px;
height: 22px;
}
.flow-bar {
flex: 1;
}
.flow-bar i {
width: 5%;
background: var(--ink);
transition: width 0.5s var(--ease);
animation: none;
}
.flow-body {
display: flex;
flex-direction: column;
padding-top: 8px;
}
.flow-body.in > * {
animation: rise 0.34s var(--ease) backwards;
}
.flow-body.in > *:nth-child(2) { animation-delay: 30ms; }
.flow-body.in > *:nth-child(3) { animation-delay: 60ms; }
.flow-body.in > *:nth-child(4) { animation-delay: 90ms; }
.flow-body.in > *:nth-child(n + 5) { animation-delay: 120ms; }
.flow-body > .title {
margin: 4px 0 10px;
}
.flow-text p {
margin: 0 0 12px;
font-size: 16px;
line-height: 24px;
color: var(--ink-2);
}
.flow-text p b,
.flow-text p strong {
font-weight: 500;
color: var(--ink);
}
.flow-body > .lead {
margin: 0 0 20px;
}
.flow-main {
margin-top: 16px;
}
.flow-body > .btn.ghost {
margin-top: 6px;
}
.ob {
display: flex;
flex-direction: column;
min-height: calc(100vh - 12px);
margin-bottom: calc(-28px - var(--safe-b));
}
.ob-top {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
margin: -12px calc(var(--gutter) * -1) 0;
padding: 14px var(--gutter) 12px;
background: var(--bg);
}
.ob-back {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 18px;
background: var(--chip);
color: var(--ink);
cursor: pointer;
}
.ob-back .ic {
width: 18px;
height: 18px;
stroke-width: 2.2;
}
.ob-back:active {
opacity: 0.6;
}
.ob-bar {
flex: 1;
height: 6px;
border-radius: 3px;
background: var(--track);
overflow: hidden;
}
.ob-bar i {
display: block;
width: 4%;
height: 100%;
border-radius: inherit;
background: var(--ink);
transition: width 0.5s var(--ease);
}
.ob[data-course] .ob-bar i {
background: var(--accent);
}
.ob-stage {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px 0 20px;
}
.ob-stage.mid::before,
.ob-stage.mid::after {
content: "";
flex: 2;
}
.ob-stage.mid::after {
flex: 3;
}
.ob-step {
display: flex;
flex-direction: column;
}
.ob-step.in {
animation: pl-in 0.36s var(--ease) backwards;
}
.ob-step.back {
animation: pl-back 0.3s var(--ease) backwards;
}
.ob-foot {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
gap: 8px;
margin: 0 calc(var(--gutter) * -1);
padding: 12px var(--gutter) calc(16px + var(--safe-b));
background: var(--bg);
}
.ob-foot:empty {
display: none;
}
.ob.busy .ob-stage,
.ob.busy .ob-foot {
pointer-events: none;
}
.ob .pending {
animation: breathe 1s ease-in-out infinite;
}
.ob-kicker {
margin: 0 0 8px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ob-kicker.sm {
margin: 24px 0 8px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.72px;
text-transform: uppercase;
}
.ob-title {
margin: 0 0 10px;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
color: var(--ink);
text-wrap: balance;
}
.ob-sub {
margin: 0 0 4px;
font-size: 16px;
line-height: 24px;
color: var(--ink-2);
text-wrap: pretty;
}
.ob-title.center,
.ob-sub.center,
.ob-hint.center {
text-align: center;
}
.ob-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 14px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ob-note.center {
justify-content: center;
margin: 12px 0 0;
text-align: center;
}
.ob-note .ic,
.ob-ok .ic {
flex: none;
width: 16px;
height: 16px;
margin-top: 2px;
padding: 2.5px;
border-radius: 50%;
stroke-width: 3.4;
color: #ffffff;
background: var(--good);
}
.ob-ok {
display: block;
margin: 14px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
text-wrap: balance;
}
.ob-foot .ob-ok {
margin: 2px 0 0;
}
.ob-ok .ic {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 6px 0 0;
vertical-align: -2px;
}
.ob-hint {
margin: 10px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ob-foot .ob-hint {
margin: 0;
}
.ob-error {
margin: 10px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--bad);
}
.ob-p {
margin: 12px 0 0;
font-size: 16px;
line-height: 24px;
color: var(--ink);
}
.ob-orb {
display: block;
width: 112px;
height: 112px;
margin: 0 auto 20px;
pointer-events: none;
}
.ob-orb.sm {
width: 88px;
height: 88px;
margin-bottom: 16px;
}
.ob-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
}
.ob-icon .ic {
width: 30px;
height: 30px;
stroke-width: 2;
}
.ob-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ob-hero .ob-kicker {
margin-bottom: 4px;
}
.ob-hero .ob-title {
margin-bottom: 6px;
}
.ob-step > .ck-mark {
margin: 0 auto 20px;
}
.ob-clock {
margin: 0 0 18px;
text-align: center;
}
.ob-clock .ob-kicker {
margin: 0;
}
.ob-clock b {
display: block;
margin-top: 2px;
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.4px;
color: var(--ink);
}
.ob-step .list {
margin: 20px 0 0;
}
.ob-step .ob-kicker.sm + .list {
margin-top: 0;
}
.ob-opts {
display: grid;
gap: 8px;
margin-top: 20px;
}
.ob-opt {
min-height: 54px;
}
.ob-opts.many {
gap: 6px;
}
.ob-opts.many .ob-opt {
min-height: 46px;
padding-top: 10px;
padding-bottom: 10px;
}
.ob-opts.many .ob-opt b {
font-size: 15px;
line-height: 20px;
}
.ob-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 20px;
}
.ob-tiles.three {
grid-template-columns: repeat(3, 1fr);
}
.ob-tile {
appearance: none;
min-width: 0;
min-height: 60px;
padding: 0 12px;
border: 0;
border-radius: var(--r-row);
background: var(--well);
font-size: 17px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition:
transform 0.12s ease,
background-color 0.18s ease,
color 0.18s ease;
}
.ob-tile:active {
transform: scale(0.97);
}
.ob-tile.on {
color: var(--btn-ink);
background: var(--btn);
}
.ob-check {
min-height: 56px;
padding-top: 10px;
padding-bottom: 10px;
}
.ob-box {
flex: none;
width: 22px;
height: 22px;
border-radius: 11px;
background: var(--ink-4) center / 13px 13px no-repeat;
transition: background-color 0.18s ease;
}
.ob-check.on .ob-box {
background-color: var(--btn);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .ob-check.on .ob-box {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.ob-field {
margin-top: 20px;
}
.ob-input {
height: 56px;
border-radius: var(--r-row);
font-size: 17px;
}
.ob-other {
display: grid;
}
.ob-cities .item {
min-height: 54px;
}
.ob-chips {
display: flex;
gap: 8px;
margin-top: 20px;
}
.ob-chips .tchip {
flex: 1;
min-width: 0;
min-height: 40px;
font-size: 15px;
}
.ob-chips .tchip.on {
color: var(--ink);
background: var(--bg);
box-shadow: inset 0 0 0 1.5px var(--ink);
}
.wheel {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
height: 220px;
margin: 16px 0 0;
user-select: none;
-webkit-user-select: none;
}
.wh-band {
position: absolute;
top: 88px;
right: 0;
left: 0;
height: 44px;
border-radius: 14px;
background: var(--well);
pointer-events: none;
}
.wh-col {
position: relative;
z-index: 1;
width: 88px;
height: 220px;
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior: contain;
touch-action: pan-y;
scroll-snap-type: y mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
outline: none;
border-radius: 14px;
}
.wh-col::-webkit-scrollbar {
display: none;
}
.wh-col:focus-visible {
box-shadow: inset 0 0 0 2px var(--ink-3);
}
.wh-list {
padding: 88px 0;
}
.wh-i {
display: flex;
align-items: center;
justify-content: center;
height: 44px;
scroll-snap-align: center;
font-size: 20px;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--ink-3);
opacity: 0.3;
cursor: pointer;
transition:
color 0.12s ease,
opacity 0.12s ease,
transform 0.12s ease;
}
.wh-i.on {
font-weight: 500;
color: var(--ink);
opacity: 1;
transform: scale(1.2);
}
.wh-i.n1 {
color: var(--ink-2);
opacity: 0.75;
}
.wh-i.n2 {
opacity: 0.45;
}
.wh-sep {
position: relative;
z-index: 1;
margin-top: -3px;
font-size: 24px;
font-weight: 500;
color: var(--ink);
}
.ob-vis {
margin-top: 20px;
}
.ob-step > .ob-vis:first-child {
margin-top: 0;
}
.ob-vis > .vis {
margin: 0;
}
.ob-pace {
margin: 0;
}
.ob-facts .item {
min-height: 0;
padding: 14px 16px;
}
.ob-facts .txt span {
font-size: 15px;
line-height: 22px;
color: var(--ink);
}
.ob-step > .callout {
margin: 20px 0 0;
}
.ob-care p {
font-size: 15px;
line-height: 22px;
}
.ob-ask {
margin: 0 0 4px;
}
.ob-ask b {
display: block;
font-size: 19px;
line-height: 24px;
font-weight: 500;
color: var(--ink);
}
.ob-ask span {
display: block;
margin-top: 4px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ob-step > details.quote {
margin: 12px 0 0;
}
.ob-step .consent-list {
margin-top: 20px;
}
.ob-meters {
display: grid;
gap: 12px;
}
.ob-meter {
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 12px;
}
.ob-meter b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.ob-cells {
display: flex;
gap: 4px;
}
.ob-cells i {
width: 18px;
height: 8px;
border-radius: 4px;
background: var(--track);
}
.ob-cells i.on {
background: var(--ink-3);
}
.ob-meter.tip .ob-cells i.on {
background: var(--accent);
}
.ob-chat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
.ob-ava {
display: block;
flex: none;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: var(--bg);
}
.ob-ava img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ob-chat .txt {
flex: 1;
display: grid;
gap: 2px;
min-width: 0;
text-align: left;
}
.ob-chat .txt b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.ob-chat .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ob-pin .ic {
width: 18px;
height: 18px;
color: var(--ink-2);
transform: rotate(45deg);
}
.ob-lesson .txt small {
margin: 0 0 2px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.72px;
text-transform: uppercase;
color: var(--ink-2);
}
.ob-lesson .item {
min-height: 78px;
}
.ob-kicker.center {
text-align: center;
}
.ob-note.mid {
justify-content: center;
text-align: center;
}
.ob-vis .vis-plan > .kicker,
.ob-vis .vis-plan > .vp-note {
display: none;
}
.ob-vis .vm-w {
font-size: 12px;
}
.ob-traits {
margin: 22px 0 0;
}
.ob-traits li:last-child {
margin-bottom: 0;
}
.ob-fold {
margin: 12px 0 0;
}
.ob-fold-in {
display: grid;
gap: 10px;
padding: 0 16px 16px;
}
.ob-orb.left,
.ob-icon.left {
margin-left: 0;
margin-right: 0;
}
.ob-orb.left {
width: 88px;
height: 88px;
margin-bottom: 16px;
}
.ob-hero {
align-items: flex-start;
text-align: left;
}
.ob-icon.left {
margin-bottom: 14px;
}
.ob-live {
margin: 12px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
text-align: center;
}
.ob-care-more {
display: inline;
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
cursor: pointer;
}
.ob-opt.one::before {
background: none;
box-shadow: inset 0 0 0 2px var(--ink-4);
}
.ob-opt.one.on::before,
:root[data-theme="dark"] .ob-opt.one.on::before,
:root[data-island] .ob-opt.one.on::before {
background: radial-gradient(circle, var(--bg) 0 4px, var(--btn) 4.5px);
box-shadow: none;
}
.ob-opts.chosen .pl-opt:not(.on),
.ob-tiles.chosen .ob-tile:not(.on) {
opacity: 0.45;
}
.ob-opts.sent .pl-opt,
.ob-tiles.sent .ob-tile {
pointer-events: none;
}
.adm-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0 0 16px;
}
.adm-tile {
min-width: 0;
padding: 14px 16px 16px;
border-radius: var(--r-group);
background: var(--well);
}
.adm-tile b {
display: block;
overflow: hidden;
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.6px;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ink);
}
.adm-tile span {
display: block;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.adm-tiles.four {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.adm-tiles.four .adm-tile {
padding: 12px 10px 12px;
text-align: center;
}
.adm-tiles.four .adm-tile b {
font-size: 20px;
line-height: 26px;
letter-spacing: -0.2px;
}
.adm-tiles.four .adm-tile span {
font-size: 14px;
line-height: 20px;
}
.adm-funnel {
padding: 4px 0;
}
.adm-step {
padding: 12px 16px;
}
.adm-step + .adm-step {
border-top: 1px solid var(--line);
}
.adm-step-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 8px;
}
.adm-step-top b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.adm-step-top span {
font-size: 15px;
color: var(--ink-2);
}
.adm-step.off .adm-step-top {
margin: 0;
}
.adm-search {
position: relative;
display: block;
margin: 0 0 14px;
}
.adm-search .ic {
position: absolute;
top: 14px;
left: 14px;
width: 20px;
height: 20px;
stroke-width: 2;
color: var(--ink-3);
pointer-events: none;
}
.adm-search .input {
padding-left: 44px;
-webkit-appearance: none;
appearance: none;
}
.adm-search .input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.adm-ini {
font-size: 15px;
line-height: 1;
font-weight: 500;
color: #ffffff;
}
.adm-person {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 20px;
align-items: start;
gap: 12px;
padding-top: 16px;
padding-bottom: 16px;
}
.adm-person > .bubble,
.adm-person > .go {
margin-top: 3px;
}
.adm-person .txt {
gap: 4px;
}
.adm-person .txt b {
white-space: normal;
overflow-wrap: anywhere;
}
.adm-person .txt .adm-person-state {
font-size: 16px;
line-height: 22px;
color: var(--ink);
}
.adm-person > .adm-activity {
grid-column: 1 / -1;
}
.adm-activity {
display: grid;
gap: 12px;
min-width: 0;
}
.adm-activity-row {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.adm-activity-label {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.adm-activity-value {
font-size: 16px;
line-height: 25px;
color: var(--ink);
overflow-wrap: anywhere;
}
.adm-person .adm-activity-value {
font-size: 15px;
line-height: 21px;
}
.adm-person-times {
margin: 0 0 24px;
}
.adm-person-body > .adm-now {
margin: 0 0 20px;
}
.adm-handle {
font-weight: 400;
color: var(--ink-2);
}
.adm-person .val {
font-size: 14px;
}
.adm-more {
margin: 4px 0 16px;
}
.adm-empty p {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.adm-now {
margin: -8px 0 20px;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.adm-now b {
font-weight: 500;
color: var(--ink);
}
.adm-acc {
display: flex;
flex-direction: column;
gap: 2px;
}
.adm-acc .kicker {
margin: 0 0 4px;
}
.adm-acc-line {
font-size: 20px;
line-height: 26px;
font-weight: 500;
color: var(--ink);
}
.adm-acc-sub {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.adm-acc > .btn:not(.ghost) {
margin-top: 16px;
}
.adm-acc > .btn.adm-revoke {
margin-top: 4px;
min-height: 44px;
font-size: 15px;
color: var(--bad);
}
.adm-history .adm-ev {
display: flex;
gap: 12px;
align-items: baseline;
padding: 11px 16px;
font-size: 15px;
line-height: 21px;
}
.adm-history .adm-ev + .adm-ev {
border-top: 1px solid var(--line);
}
.adm-ev-t {
flex: none;
width: 92px;
font-size: 14px;
color: var(--ink-2);
}
.adm-ev-w {
min-width: 0;
color: var(--ink);
}
button.adm-ev.more {
appearance: none;
width: 100%;
border: 0;
border-top: 1px solid var(--line);
background: transparent;
font: inherit;
font-weight: 500;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.adm-sheet .choice {
margin: 0 0 12px;
}
.adm-sheet .opt.wide {
min-height: 50px;
padding: 13px 16px 13px 14px;
}
.adm-switch {
appearance: none;
width: 100%;
min-height: 64px;
margin: 0 0 16px;
padding: 12px 16px;
border: 0;
text-align: left;
font: inherit;
}
.adm-switch .lbl {
display: flex;
flex-direction: column;
gap: 2px;
}
.adm-switch .lbl b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.adm-switch .lbl span {
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: var(--ink-2);
}
.adm-lines {
margin: 0 0 16px;
}
.adm-lines .item.static {
min-height: 52px;
padding: 12px 16px;
}
.adm-lines .txt span {
font-size: 16px;
line-height: 22px;
color: var(--ink);
}
.adm-li {
flex: none;
width: 20px;
height: 20px;
stroke-width: 2;
color: var(--ink-2);
}
.kicker.adm-k {
margin: 4px 0 10px;
}
.adm-time {
margin: 0 0 18px;
}
.adm-sheet .list + .adm-switch {
margin-top: -4px;
}
.adm-sheet .input,
.adm-sheet .segm {
margin: 0 0 20px;
}
.adm-sheet .adm-grant-own {
margin-top: 8px;
}
.adm-sheet .adm-chips + .kicker,
.adm-sheet .adm-chips + .switch-row {
margin-top: 16px;
}
.adm-sheet .adm-offer-price {
height: 56px;
font-size: 22px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.adm-acc-offer {
margin: 12px 0 4px;
font-size: 15px;
line-height: 21px;
color: var(--ink);
}
.twin-card .kicker {
color: var(--dark-ink-2);
}
.twin-card h2 {
margin: 6px 0 0;
font-size: 19px;
line-height: 24px;
font-weight: 500;
color: var(--dark-ink);
}
.twin-card .tw-line {
margin: 6px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--dark-ink-2);
}
.twin-card .tw-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 18px 0 0;
padding: 14px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 14px;
line-height: 20px;
color: var(--dark-ink-2);
}
.twin-card .tw-row .btn.small {
color: #ffffff;
background: var(--dark-pill);
}
.twin-head .twin-now b {
font-weight: 500;
color: var(--ink);
}
.avatar-btn.twin-ava {
display: grid;
place-items: center;
border-radius: 50%;
color: #ffffff;
background: var(--dark-card);
}
.avatar-btn.twin-ava .ic {
width: 20px;
height: 20px;
stroke-width: 2;
}
.adm-weeks {display:grid;gap:12px;margin-top:20px}
.adm-weeks .week {min-width:0;overflow:hidden;border-radius:var(--r-group);background:var(--well)}
.adm-weeks .wk-toggle {appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;
padding:16px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.adm-weeks .wk-t {display:flex;flex:1;min-width:0;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.adm-weeks .wk-t b {font-size:17px;line-height:23px;font-weight:500}
.adm-weeks .wk-t small {color:var(--ink-2)}
.adm-weeks .wk-n {flex:none;max-width:72px;font-size:12px;line-height:18px;color:var(--ink-2);text-align:right}
.adm-weeks .wk-chev {flex:none;width:18px;height:18px;color:var(--ink-3);transition:transform .2s var(--ease)}
.adm-weeks .wk-toggle.open .wk-chev {transform:rotate(90deg)}
.adm-weeks .wk-toggle:active {background:var(--well-2)}
.adm-weeks .lrows[hidden] {display:none}
.adm-course .seg {
margin-bottom: 8px;
}
.adm-weeks .lrows {
margin: 0 0 10px;
}
.adm-lrow .lr-t small:empty {
display: none;
}
.adm-lrow .lr-n {
font-size: 17px;
}
.adm-lrow .lr-k {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.72px;
}
.adm-lrow .lr-t small,
.adm-weeks .wk-t small {
font-size: 14px;
line-height: 20px;
}
.tc-feed {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 20px;
}
.tc-day {
margin: 8px 0 2px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.72px;
text-transform: uppercase;
text-align: center;
color: var(--ink-2);
}
.tc-msg {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 88%;
}
.tc-msg.me {
align-self: flex-end;
align-items: flex-end;
}
.tc-bubble {
position: relative;
padding: 10px 14px 8px;
border-radius: 18px 18px 18px 6px;
background: var(--well);
font-size: 16px;
line-height: 23px;
color: var(--ink);
overflow-wrap: anywhere;
}
.tc-msg.me .tc-bubble {
border-radius: 18px 18px 6px 18px;
color: var(--btn-ink);
background: var(--btn);
}
.tc-bubble p {
margin: 0 0 8px;
}
.tc-bubble p:last-of-type {
margin-bottom: 4px;
}
.tc-bubble b,
.tc-bubble strong {
font-weight: 500;
}
.tc-photo {
display: block;
width: calc(100% + 28px);
max-width: none;
margin: -10px -14px 10px;
border-radius: 18px 18px 0 0;
}
.tc-time {
display: block;
font-size: 12px;
line-height: 16px;
text-align: right;
color: var(--ink-2);
}
.tc-msg.me .tc-time {
color: var(--dark-ink-2);
}
.tc-row {
display: flex;
gap: 6px;
}
.btn.tc-b {
flex: 1 1 0;
min-width: 0;
min-height: 40px;
padding: 0 10px;
border-radius: 12px;
font-size: 14px;
line-height: 18px;
}
.tc-aside {
margin: 0;
padding: 0 12px;
font-size: 14px;
line-height: 20px;
text-align: center;
color: var(--ink-2);
}
.tc-kb {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 20px;
}
.adm-people-view .tool-head .lead { max-width: 32em; }
.adm-people .ac-person-row {
grid-template-columns: 32px minmax(0, 1fr) 20px;
gap: 4px 12px;
padding: 16px;
}
.adm-people .ac-person-row > .txt { gap: 4px; }
.adm-people .ac-person-row .txt b { font-size: 16px; line-height: 22px; }
.adm-people .ac-person-row .txt .adm-person-state { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.adm-people .ac-person-row > .adm-activity { grid-column: 2 / -1; }
.adm-activity-brief { display: block; font-size: 14px; line-height: 20px; color: var(--ink-2); overflow-wrap: anywhere; }
.adm-person-access { display: flex; align-items: baseline; gap: 6px; }
.adm-person-access::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.adm-person-access.ad-access-paid::before { background: var(--blue); }
.adm-person-access.ad-access-trial::before { background: var(--good); }
.adm-person-access.ad-access-expired::before { background: var(--warn); }
.ac-person-body > .tool-head { margin-bottom: 16px; }
.ac-person-body details.adm-person-times { margin: 0 0 16px; padding: 0; background: var(--well); }
.ac-person-body .ac-current-step > .kicker,
.ac-person-body .adm-acc > .kicker { margin: 0 0 8px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
details.adm-person-times.quote > summary { min-height: 76px; padding: 16px; gap: 16px; }
details.adm-person-times.quote > summary::after { flex: none; }
.adm-time-heading { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.adm-time-heading > .kicker { margin: 0; font-size: 12px; line-height: 16px; }
.adm-time-heading > .adm-last-seen { font-size: 16px; line-height: 22px; font-weight: 400; }
.ac-person-body .ac-identity { padding: 0 16px 16px; }
.ac-identity > p { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--ink-2); overflow-wrap: anywhere; }
.ac-identity > p:last-child { margin-bottom: 0; }
.ac-current-step > .kicker,
.ac-person-body .adm-acc > .kicker { margin: 0 0 8px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.ac-person-body .adm-last-seen { margin: 0; font-size: 16px; line-height: 22px; }
.ac-current-step > p:last-child { margin: 0; font-size: 16px; line-height: 22px; }
.ac-current-course { margin: 0 0 16px; }
.ac-current-course > .kicker { margin: 0 0 8px; }
.ac-courses { overflow: hidden; border-radius: var(--r-group); background: var(--well); }
.ac-course { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; }
.ac-course > .bubble { margin-top: 3px; }
.ad-course-copy { flex: 1; min-width: 0; }
.ac-course h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; }
.ac-person-body .ac-course-position { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.ac-course-position > span { display: block; }
.ac-person-body .ac-course-type { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ac-person-body > .adm-acc { margin-bottom: 16px; }
.ac-person-body .adm-acc .adm-acc-sub { margin-top: 4px; }
.ac-person-body .adm-acc .btn { font-size: 16px; line-height: 22px; }
.ac-access-more.quote { margin: 12px 0 0; padding: 0; background: transparent; }
details.ac-access-more > summary { min-height: 44px; padding: 8px 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
details.ac-access-more > summary::after { flex: none; margin-left: 16px; }
.ac-access-more .adm-revoke { margin: 8px 0 0; color: var(--bad); background: var(--bg); }
.ac-person-body > .ac-detail.quote { margin: 0 0 16px; padding: 0; }
details.ac-detail > summary { min-height: 56px; padding: 16px; gap: 16px; font-size: 16px; line-height: 22px; }
details.ac-detail > summary::after { flex: none; }
.ac-summary-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 12px; }
.ac-preview { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 400; }
.ac-preview > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
details.ac-detail[open] > summary .ac-preview { display: none; }
.ac-thread-title { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ac-thread-section { margin-bottom: 24px; }
.ac-conversations .adm-threads { margin: 0; }
.ac-conversations .adm-msg:not(.out) { background: var(--bg); }
.ac-conversations .adm-msg { padding: 12px; }
.ac-conversations .adm-msg p { margin-top: 6px; }
.ac-detail-body { padding: 0 16px 16px; }
.ac-detail-body > .list { margin-bottom: 0; background: transparent; }
.ac-detail-body > .list > .item { padding-left: 0; padding-right: 0; }
.ac-detail-body > .list > .item + .item::before { left: 44px; right: 0; }
.ac-detail-body > .list.plain > .item + .item::before { left: 0; }
.ac-detail-body .ac-courses { background: transparent; }
.ac-detail-body .ac-course { padding: 8px 0; }
.ac-detail-body .ac-course + .ac-course { margin-top: 8px; }
.ac-detail-body .adm-history .adm-ev { padding-left: 0; padding-right: 0; }
.ac-detail-body .adm-history { margin-bottom: 0; }
.ac-progress-title { margin: 0 0 16px; font-size: 16px; line-height: 22px; font-weight: 500; }
.ac-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ac-metrics > div { display: flex; flex-direction: column-reverse; gap: 4px; min-width: 0; }
.ac-metrics dt { color: var(--ink-2); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.ac-metrics dd { margin: 0; font-size: 24px; line-height: 28px; font-weight: 500; overflow-wrap: anywhere; }
.ac-progress .ac-progress-course { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ac-person-body .adm-intro-fact { align-items: flex-start; gap: 12px; }
.adm-fact-icon { flex: none; color: var(--ink-2); width: 20px; height: 20px; margin-top: 2px; }
.adm-fact-icon svg { width: 20px; height: 20px; }
.adm-intro-fact .txt { display: flex; flex-direction: column; gap: 4px; }
.adm-intro-fact .txt > span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.adm-intro-fact .txt > b { font-size: 16px; line-height: 22px; }
.adm-history-caption { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.adm-history > .seg { margin-bottom: 16px; }
.adm-history-rows { display: flex; flex-direction: column; gap: 20px; }
.adm-history-event { min-width: 0; }
.adm-history-event > p { margin: 0; overflow-wrap: anywhere; }
.adm-history-event > .adm-history-title { font-size: 16px; line-height: 22px; }
.adm-history-event > .adm-history-detail { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.adm-history-event > .adm-history-time { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.adm-history-code { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.adm-history-code > summary { min-height: 48px; padding: 8px 0; cursor: pointer; }
.adm-history-code > code { display: block; padding: 4px 0; overflow-wrap: anywhere; }
.ac-history .adm-history > .seg { gap: 8px 4px; margin: 8px 0 24px; }
.ac-history .adm-history-rows { gap: 24px; }
.ac-history .adm-history-event { display: flex; align-items: flex-start; gap: 12px; }
.adm-history-icon { flex: none; width: 20px; height: 20px; color: var(--ink-2); margin-top: 2px; }
.adm-history-icon svg { width: 20px; height: 20px; }
.adm-history-copy { flex: 1; min-width: 0; }
.ac-person-body .adm-history-copy > p { margin: 0; overflow-wrap: anywhere; }
.ac-person-body .adm-history-copy > .adm-history-title { font-size: 16px; line-height: 22px; color: var(--ink); }
.ac-person-body .adm-history-copy > .adm-history-detail { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ac-person-body .adm-history-copy > .adm-history-time { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.ac-history .adm-history-rows > .btn { margin: 0; }
.adm-filter-form { display: flex; flex-direction: column; gap: 24px; }
.adm-filter-form > .title { margin: 0; }
.adm-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.adm-filter-group legend { padding: 0 0 12px; font-size: 16px; line-height: 22px; font-weight: 600; }
.adm-filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-filter-options > .btn { width: auto; min-height: 44px; padding: 10px 16px; border-radius: 24px; font-size: 15px; line-height: 20px; }
.adm-filter-options > .btn[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.adm-filter-form > .btn + .btn { margin-top: -12px; }
.ac-history .adm-history-rows { gap: 0; }
.adm-history-event { position: relative; padding-bottom: 24px; }
.adm-history-event:has(+ .adm-history-event)::after { content: ""; position: absolute; left: 9px; top: 28px; bottom: 4px; border-left: 1px dashed var(--ink-4); }
.adm-history-copy > p { margin: 0; overflow-wrap: anywhere; }
.adm-history-copy > .adm-history-title { font-size: 16px; line-height: 22px; color: var(--ink); }
.adm-history-copy > .adm-history-detail { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.adm-history-copy > .adm-history-time { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.ac-detail .adm-history-code > summary { padding: 10px 0; min-height: 44px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.sheet.receipt-reader-sheet { align-items: center; padding: max(24px, var(--tg-content-safe-area-inset-top, 0px)) 16px max(24px, var(--safe-b)); }
.sheet.receipt-reader-sheet .panel { border-radius: var(--r-card); padding: 16px; max-height: 78vh; max-height: 78dvh; overflow: hidden; }
.sheet.receipt-reader-sheet .grip { display: none; }
.receipt-reader { display: flex; flex-direction: column; max-height: calc(78vh - 32px); max-height: calc(78dvh - 32px); gap: 12px; min-height: 160px; }
.rr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; }
.rr-head b { font-size: 20px; font-weight: 500; }
.rr-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--well); color: var(--ink); flex: none; }
.rr-close svg { width: 22px; height: 22px; }
.rr-note, .rr-state, .rr-hints p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.rr-hints { padding: 12px 14px; background: var(--well); border-radius: var(--r-row); flex: none; }
.rr-hints p + p { margin-top: 4px; }
.rr-page { min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; border-radius: 10px; }
.rr-page canvas { display: block; width: 100%; height: auto; background: white; }
.rr-pages { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex: none; }
.rr-pages .btn { width: auto; min-height: 44px; padding: 10px 12px; }
.rr-head .rr-zoom { margin-left: auto; width: auto; padding: 8px 10px; min-height: 44px; font-size: 14px; }
.rr-page.zoom canvas { width: 200%; max-width: none; }
.edge-back-hint { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 16px; }
.edge-back-hint > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.edge-back-hint b { font-size: 14px; line-height: 20px; font-weight: 500; }
.edge-back-hint > span:nth-child(2) > span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.edge-hint-arrow { width: 24px; flex: none; animation: edge-hint 1.1s var(--ease) 2; }
.edge-hint-arrow svg { width: 24px; height: 24px; }
.edge-hint-close { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; color: var(--ink-2); background: transparent; }
.edge-hint-close svg { width: 20px; height: 20px; }
@keyframes edge-hint { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .edge-hint-arrow { animation: none; } }
.adm-live-row { grid-column: 2 / -1; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.adm-live-row:empty { display: none; }
[data-live-user].is-online { color: var(--ink); }
[data-live-user].is-online::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--good); vertical-align: middle; }
.engagement-steps {display:grid;gap:16px;margin-top:24px}.engagement-steps details {padding:16px;background:var(--well);border-radius:var(--r-card)}.engagement-steps summary {font-size:16px;line-height:24px;cursor:pointer}.engagement-people {margin-top:16px}.engagement-people .txt span {white-space:normal;line-height:22px}.engagement-people .note {margin:16px 0}
.adm-service-balances { display: grid; gap: 16px; margin-block: 24px; }
.adm-service-balances .adm-tiles { margin: 0; }
.adm-service.adm-tile { display: grid; min-width: 0; gap: 8px; align-content: start; }
.adm-service.adm-tile b { font-size: 24px; line-height: 30px; white-space: normal; overflow-wrap: anywhere; }
.adm-service.adm-tile p { margin: 0; }
.adm-service.adm-tile small { color: var(--muted); font-size: 12px; }
.adm-models { display: grid; gap: 20px; }
.adm-models > .input { width: 100%; min-width: 0; }
.adm-planned-models > .note { margin-block: 16px; }
.adm-planned-models .list { margin-top: 16px; }
.adm-models .seg { min-width: 0; }
.adm-model-list .item { min-width: 0; }
.adm-model-list .txt { overflow-wrap: anywhere; }
.adm-service.adm-tile .balance-urgent { color: var(--bad); font-weight: 500; }
.adm-usage .item.static {
gap: 12px;
}
.adm-spark {
display: flex;
flex: none;
align-items: flex-end;
gap: 2px;
width: 64px;
height: 24px;
}
.adm-spark i {
flex: 1;
min-width: 1px;
border-radius: 2px;
background: var(--accent);
opacity: 0.85;
}
.adm-usage .item .tnum {
flex: none;
min-width: 32px;
text-align: right;
}
.adm-ab {
margin: 0 0 16px;
}
.adm-ab-view > .hint {
margin: 0 0 16px;
}
.adm-ab-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.adm-ab-head h3 {
margin: 0;
}
.adm-ab-head .pill {
flex: none;
}
.adm-ab .adm-funnel {
margin: 0 0 12px;
}
.adm-ab .adm-step .hint {
margin: 4px 0 8px;
}
.adm-ab-verdict {
margin: 0 0 16px;
font-size: 15px;
line-height: 21px;
}
.adm-where .adm-where-row .txt {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.adm-where-bar {
display: flex;
gap: 2px;
height: 8px;
overflow: hidden;
border-radius: 4px;
}
.adm-where-bar i,
.adm-where-legend i {
display: block;
min-width: 3px;
background: var(--c-f2);
}
.adm-where .w-busy { background: var(--accent); }
.adm-where .w-looked { background: var(--accent); opacity: 0.45; }
.adm-where .w-quiet3 { background: var(--c-f4); }
.adm-where .w-quiet7 { background: var(--c-f3); }
.adm-where .w-gone { background: var(--c-f2); }
.adm-where .w-blocked { background: repeating-linear-gradient(135deg, var(--c-f3) 0 2px, transparent 2px 5px); }
.adm-where .nw { white-space: nowrap; }
.adm-where-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin: 12px 0 4px;
color: var(--ink-2);
font-size: 13px;
line-height: 18px;
}
.adm-where-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.adm-where-legend i {
flex: none;
width: 10px;
height: 10px;
border-radius: 3px;
}
.adm-home-search {
position: relative;
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 16px;
}
.adm-home-search > .ic {
position: absolute;
left: 14px;
width: 18px;
height: 18px;
color: var(--ink-3);
pointer-events: none;
}
.adm-home-search .input {
flex: 1;
min-width: 0;
padding-left: 40px;
}
.adm-home-find {
appearance: none;
flex: none;
height: 44px;
padding: 0 16px;
border: 0;
border-radius: 22px;
background: var(--btn);
color: var(--btn-ink);
font: inherit;
font-weight: 600;
cursor: pointer;
}
.adm-home-nums .seg {
margin: 0 0 10px;
}
.adm-home-tiles {
appearance: none;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
grid-template-columns: repeat(3, minmax(0, 1fr));
transition: opacity 0.2s ease;
}
.adm-home-tiles.loading {
opacity: 0.5;
}
.adm-home-tiles .adm-tile {
padding: 12px 12px 14px;
}
.adm-home-tiles .adm-tile b {
font-size: 24px;
line-height: 30px;
}
.adm-home-tiles .adm-tile span {
font-size: 13px;
line-height: 17px;
}
.adm-home-group {
margin-top: 18px;
}
.adm-home-groups {
margin-top: 20px;
}
.adm-home-groups > .seg {
margin-bottom: 12px;
}
.adm-gtile.wide {
grid-column: 1 / -1;
min-height: 0;
}
.adm-home-tab > .card {
margin-top: 12px;
}
.adm-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.adm-gtile {
appearance: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
min-height: 112px;
padding: 14px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.adm-gtile:active {
background: var(--well-2);
}
.adm-gtile .bubble {
margin-bottom: 6px;
}
.adm-gtile b {
font-size: 15px;
line-height: 20px;
font-weight: 600;
}
.adm-gtile > span:not(.bubble) {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 13px;
line-height: 17px;
color: var(--ink-2);
}
.adm-home .twin-card {
margin-top: 22px;
}
@media (max-width: 340px) {
.adm-home-tiles {
grid-template-columns: 1fr 1fr;
}
}
.adm-links-sum {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 14px;
}
.adm-links-sum .adm-tile b {
font-size: 24px;
line-height: 30px;
}
.adm-link-box {
display: grid;
gap: 10px;
margin: 4px 0 16px;
padding: 14px;
border-radius: var(--r-group);
background: var(--well);
}
.adm-link-url {
display: block;
overflow-wrap: anywhere;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 14px;
line-height: 20px;
color: var(--ink);
user-select: all;
-webkit-user-select: all;
}
.adm-link-acts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.adm-link-acts .btn {
width: 100%;
min-width: 0;
padding-left: 6px;
padding-right: 6px;
}
.adm-link-qr {
display: block;
width: min(280px, 80%);
margin: 6px auto 16px;
border-radius: 16px;
background: #fff;
image-rendering: pixelated;
}
.adm-link-days {
display: flex;
align-items: flex-end;
gap: 3px;
height: 48px;
margin: 0 0 6px;
}
.adm-link-days i {
flex: 1;
min-width: 0;
border-radius: 3px;
background: var(--ink-4);
}
.adm-link-days i.on {
background: var(--accent);
}
.adm-ch-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.adm-ch {
appearance: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
min-width: 0;
padding: 12px;
border: 0;
border-radius: var(--r-row);
background: var(--well);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.adm-ch:active {
background: var(--well-2);
}
.adm-ch .bubble {
margin-bottom: 6px;
}
.adm-ch b {
font-size: 15px;
line-height: 20px;
font-weight: 600;
}
.adm-ch > span:not(.bubble) {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.adm-form {
display: grid;
gap: 8px;
margin-bottom: 14px;
}
.adm-label {
display: block;
margin: 10px 0 0;
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: var(--ink-2);
}
.adm-code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 16px;
}
.adm-code-hint {
margin: 0;
overflow-wrap: anywhere;
}
.adm-code-hint.bad {
color: var(--bad);
}
.adm-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 4px;
}
.adm-chip {
appearance: none;
min-height: 36px;
max-width: 100%;
padding: 7px 14px;
border: 0;
border-radius: 18px;
background: var(--well);
color: var(--ink);
font: inherit;
font-size: 14px;
line-height: 20px;
text-align: left;
cursor: pointer;
}
.adm-chip.on {
background: var(--btn);
color: var(--btn-ink);
}
.adm-tip-row .txt .pbar {
margin-top: 8px;
}
.adm-tip-sheet {
display: flex;
flex-direction: column;
gap: 12px;
}
.adm-tip-sheet > .title {
margin: 0;
}
.adm-tip-sheet > .seg {
margin: 0;
}
.adm-days {
padding: 16px 16px 12px;
}
.adm-days-chart {
display: grid;
grid-template-columns: repeat(14, minmax(0, 1fr));
align-items: end;
gap: 4px;
height: 124px;
}
.adm-day {
appearance: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
cursor: pointer;
}
.adm-day i {
width: 100%;
max-width: 14px;
border-radius: 4px;
background: var(--track);
}
.adm-day.on i {
background: var(--accent);
}
.adm-day span {
font-size: 11px;
line-height: 14px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.adm-days-note {
margin: 12px 0 0;
}
.adm-bc .adm-bc-text {
min-height: 140px;
margin: 0 0 4px;
resize: vertical;
}
.adm-bc-preview {
margin: 0 0 4px;
padding: 14px;
border-radius: var(--r-group);
background: var(--well);
}
.adm-bc-from {
display: block;
margin: 0 0 6px 4px;
font-size: 13px;
line-height: 18px;
font-weight: 500;
color: var(--ink-2);
}
.adm-bc-bubble {
max-width: 92%;
margin: 0;
padding: 10px 14px;
border-radius: 18px 18px 18px 6px;
font-size: 16px;
line-height: 22px;
color: var(--ink);
background: var(--bg);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.adm-bc-preview.adm-bc-blank .adm-bc-bubble {
color: var(--ink-3);
}
.adm-bc .adm-bc-when {
margin: 0 0 4px;
}
.adm-bc .ptr-acts {
margin-top: 20px;
}
.adm-subtabs {
display: flex;
gap: 6px;
margin: 0 calc(-1 * var(--gutter)) 16px;
padding: 0 var(--gutter);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.adm-subtabs::-webkit-scrollbar {
display: none;
}
.adm-subtabs .adm-chip {
flex: 0 0 auto;
white-space: nowrap;
}
.adm .adm-tile-action { appearance:none; border:0; text-align:left; font:inherit; color:var(--ink); cursor:pointer; }
.adm-tile-action:focus-visible, .adm-payment:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.adm-money-field { display:flex; min-width:0; flex-direction:column; gap:6px; margin:0 0 16px; font-size:14px; line-height:20px; color:var(--ink-2); }
.adm-money-field > .input { width:100%; min-width:0; color:var(--ink); box-sizing:border-box; }
.adm-money-field select { font-size:16px; }
.adm-money-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.adm-money-dates[hidden], .adm-money-field[hidden] { display:none; }
.adm-money-dates .adm-money-field { margin:0; }
.adm-money-dates > .btn { margin:0; }
.adm-money-dates > .btn:last-child:nth-child(3) { grid-column:1 / -1; }
.adm-money-search { display:flex; gap:8px; margin:0 0 20px; }
.adm-money-search .input { flex:1; min-width:0; }
.adm-money-search .btn { width:auto; margin:0; flex:none; }
.adm-payment-list { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.adm-payment { display:flex; flex-direction:column; gap:6px; width:100%; border:0; border-radius:var(--r-row); padding:16px; background:var(--well); font:inherit; color:var(--ink-2); text-align:left; cursor:pointer; }
.adm-payment > span { font-size:14px; line-height:20px; }
.adm-payment > small { font-size:12px; line-height:16px; }
.adm-payment-top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; }
.adm-payment-top b { color:var(--ink); font-size:16px; line-height:22px; overflow-wrap:anywhere; }
.adm-payment-top .tnum { white-space:nowrap; }
.sheet-lesson .adm-money-amount { font-size:24px; line-height:30px; color:var(--ink); }
.adm-notices .list > .adm-switch { margin-bottom:0; border-radius:0; background:none; }
.adm-notices .list > .adm-switch + .adm-switch { border-top:1px solid var(--line); }
.adm-notices .group-label { margin-top:24px; }
.adm-notices .btn:disabled { cursor:default; }
.adm-money-totals { grid-template-columns:1fr; gap:8px; }
.adm-money-totals .adm-tile { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; }
.adm-money-totals .adm-tile b, .adm-tile.adm-money-tile b { font-size:24px; line-height:30px; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; }
.adm-money-extra { margin:0 0 16px; }
.adm-money-extra > summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--ink); font-size:16px; }
.adm-money-extra > summary::after { content:'＋'; margin-left:auto; }
.adm-money-extra[open] > summary::after { content:'−'; }
.adm-money-extra[open] > summary { margin-bottom:12px; }
.adm-money-extra summary::-webkit-details-marker { display:none; }
.adm .adm-money-notices { background:transparent; color:var(--ink-2); padding-left:0; padding-right:0; margin:0 0 12px; min-height:44px; text-align:left; justify-content:flex-start; font-size:16px; }
.adm-tiles > .adm-money-tile { order:-1; }
.adm-home-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
.adm .adm-att-entry { margin:0 0 16px; text-align:left; justify-content:space-between; }
.adm-att-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.adm-att-toolbar .note { margin:0; }
.adm-att-toolbar .btn { width:auto; flex:none; margin:0; min-height:44px; }
.adm-att-list { border-radius:var(--r-group); overflow:hidden; background:var(--well); margin:0 0 16px; }
.adm-att-row { appearance:none; display:flex; flex-direction:column; gap:6px; padding:16px; width:100%; border:0; background:transparent; color:var(--ink); text-align:left; font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.adm-att-row + .adm-att-row { border-top:1px solid var(--line); }
.adm-att-row:active { background:var(--well-2); }
.adm-att-row:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; border-radius:var(--r-row); }
.adm-att-answer { font-size:19px; line-height:24px; font-weight:500; }
.adm-att-meta { color:var(--ink-2); font-size:14px; line-height:20px; margin:0; overflow-wrap:anywhere; }
.adm-att-quote { margin:12px 0 20px; padding:0; border:0; font-size:24px; line-height:30px; font-weight:500; overflow-wrap:anywhere; white-space:pre-wrap; }
.adm-att-detail .adm-att-payment { margin:24px 0 6px; font-size:16px; line-height:22px; }
.adm-att-refund { margin:10px 0; font-size:15px; line-height:21px; }
.adm-att-detail .adm-att-source { margin-top:12px; }
.adm-att-heading { font-size:20px; line-height:26px; font-weight:500; margin:28px 0 8px; }
.adm-att-latest { background:var(--well); border-radius:var(--r-group); padding:16px; margin:16px 0; overflow-wrap:anywhere; }
.adm-att-latest p { margin:0; white-space:pre-wrap; }
.adm-att-latest p + p { margin-top:6px; }
.adm-att-previous { margin:0 0 16px; }
.adm-att-previous p { margin:6px 0; overflow-wrap:anywhere; }
.adm-att-detail textarea { resize:vertical; min-height:112px; }
.adm-att-detail .input:focus-visible, .adm-attention .input:focus-visible, .adm-att-detail summary:focus-visible, .adm-attention summary:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.adm-att-detail .adm-money-extra p { white-space:normal; }
.adm-att-retained { overflow-wrap:anywhere; white-space:pre-wrap; }
.adm-att-nav:empty, .adm-att-list:empty, .adm-att-actions:empty { display:none; }
.adm-att-heading + .note { margin-bottom:20px; }
.adm-att-actions { display:flex; flex-direction:column; gap:12px; }
.adm-att-detail .btn { scroll-margin-bottom:calc(40px + var(--safe-b)); }
.adm-finance-chart { margin:0 0 20px; min-width:0; }
.adm-finance-plot { display:block; width:100%; height:auto; overflow:hidden; }
.adm-finance-zero { stroke:var(--chart-axis); stroke-width:1; }
.adm-finance-bar { fill:var(--chart-bar); }
.th-acts {
display: flex;
flex: none;
align-items: center;
gap: 20px;
}
.sos-btn {
appearance: none;
display: inline-flex;
align-items: center;
height: 32px;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: 16px;
background: var(--chip);
font-size: 14px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink);
cursor: pointer;
transition: transform 0.12s ease, opacity 0.16s ease;
}
.sos-btn:active {
transform: scale(0.96);
opacity: 0.7;
}
.day-card {
margin: 20px 0 0;
padding: 16px 20px 20px;
border-radius: var(--r-card);
color: var(--dark-ink);
background: var(--dark-card);
box-shadow: inset 0 0 0 1px var(--dark-edge);
}
.day-card.solo {
padding-top: 20px;
}
.beats {
display: flex;
gap: 8px;
margin: 0 -4px 18px;
}
.beat {
appearance: none;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-height: 52px;
margin: 0;
padding: 4px 4px 2px;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--dark-ink-2);
text-align: left;
cursor: pointer;
transition: opacity 0.16s ease;
}
.beat:active {
opacity: 0.6;
}
.beat-bar {
position: relative;
display: block;
width: 100%;
height: 4px;
margin: 0 0 9px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.16);
overflow: hidden;
}
.beat.done .beat-bar {
background: #ffffff;
}
.beat.now .beat-bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
border-radius: 2px;
background: #ffffff;
}
.beat b {
display: flex;
align-items: center;
gap: 4px;
max-width: 100%;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: inherit;
white-space: nowrap;
}
.beat small {
max-width: 100%;
font-size: 12px;
line-height: 16px;
color: var(--dark-ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.beat.on {
color: var(--dark-ink);
}
.beat-ok {
flex: none;
width: 14px;
height: 14px;
stroke-width: 2.6;
}
.dc-kicker {
margin: 0 0 6px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.72px;
text-transform: uppercase;
color: var(--dark-ink-2);
}
.dc-title {
margin: 0;
font-size: 24px;
line-height: 30px;
font-weight: 500;
letter-spacing: -0.24px;
color: var(--dark-ink);
text-wrap: balance;
}
.dc-line {
margin: 6px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--dark-ink-2);
}
.dc-sum {
display: block;
margin: 10px 0 0;
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.4px;
color: var(--dark-ink);
}
.dc-body {
display: flex;
flex-direction: column;
align-items: stretch;
}
.day-card:not(.solo) .dc-body {
min-height: 166px;
}
.dc-gap {
flex: 1 0 18px;
}
.dc-body.swap {
animation: dc-swap 0.26s var(--ease);
}
@keyframes dc-swap {
from {
opacity: 0;
transform: translateX(10px);
}
}
.home-inbox:empty {
display: none;
}
.home-inbox {
margin: 20px 0 0;
}
.hm-msg {
appearance: none;
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
animation: rise 0.26s var(--ease) backwards;
}
.hm-msg + .hm-msg,
.hm-ask + .hm-msg,
.hm-msg + .hm-ask {
margin-top: 12px;
}
button.hm-msg {
cursor: pointer;
}
button.hm-msg:active .hm-bubble {
background: var(--well-2);
}
.hm-msg > .chat-orb,
.hm-msg > .bubble {
margin-bottom: 2px;
}
.hm-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hm-bubble {
display: block;
max-width: 100%;
padding: 10px 16px 12px;
border-radius: 22px 22px 22px 6px;
background: var(--well);
transition: background-color 0.16s ease;
}
.hm-bubble small {
display: block;
margin: 0 0 2px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.hm-bubble p,
.hm-bubble .hm-p {
display: block;
margin: 0;
font-size: 16px;
line-height: 22px;
color: var(--ink);
}
.hm-reply .hm-bubble .hm-p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.hm-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 0 42px;
}
.hm-chips .btn {
width: auto;
min-height: 40px;
padding: 0 18px;
border-radius: 20px;
font-size: 15px;
}
.hm-chips.sent .btn:not(.pending) {
opacity: 0.4;
}
.bento {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 20px 0 0;
}
.tile {
appearance: none;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
margin: 0;
padding: 14px 16px 16px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
.tile.wide {
grid-column: 1 / -1;
}
button.tile:active,
.stream-tile:active:not(:has(.btn:active)) {
background: var(--well-2);
}
.tl-label {
display: block;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tl-big {
display: block;
margin: 6px 0 0;
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.4px;
color: var(--ink);
white-space: nowrap;
}
.tl-name {
display: block;
margin: 4px 0 0;
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
color: var(--ink);
}
.tl-sub {
display: block;
margin: 2px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tile .pbar {
margin: auto 0 0;
}
.wake-tile .tl-sub,
.level-tile .tl-sub {
margin-bottom: 14px;
}
.pb-top {
display: flex;
align-items: center;
gap: 12px;
}
.pb-top .txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.pb-top .txt b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.pb-top .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pb-top .go {
flex: none;
width: 20px;
height: 20px;
stroke-width: 1.6;
color: var(--ink-3);
}
.pb-ticks,
.ph-ticks {
display: flex;
gap: 7px;
margin: 14px 0 0;
}
.pb-ch {
display: flex;
flex: 7 1 0;
gap: 3px;
min-width: 0;
}
.pb-ch i {
flex: 1;
min-width: 0;
height: 6px;
border-radius: 3px;
background: var(--track);
}
.pb-ch i.on {
background: var(--accent);
}
.pb-ch i.now {
background: var(--ink);
}
.pb-foot {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 8px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.pb-foot span:first-child {
flex: none;
white-space: nowrap;
}
.pb-foot span:last-child:not(:first-child) {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nt-bars {
display: flex;
align-items: flex-end;
gap: 5px;
height: 40px;
margin: 12px 0 0;
}
.nt-bars i {
flex: 1;
min-width: 0;
border-radius: 3px;
background: var(--accent);
}
.nt-bars i.short {
background: var(--ink-4);
}
.tl-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 28px;
}
.tl-head .bubble {
width: 28px;
height: 28px;
}
.tl-head .bubble .ic {
width: 15px;
height: 15px;
}
.wake-tile .pbar i {
background: var(--ib-amber);
}
.nt-bars i.none,
.nt-bars i.nos {
height: 4px;
background: var(--track);
}
.tools-tile {
cursor: default;
}
.tt-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 10px -6px 0;
}
.tt {
appearance: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
min-width: 0;
min-height: 92px;
margin: 0;
padding: 6px;
border: 0;
border-radius: 14px;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
.tt:active {
background: var(--well-2);
}
.tt .bubble {
width: 40px;
height: 40px;
margin: 0 0 2px;
}
.tt .bubble .ic {
width: 20px;
height: 20px;
}
.tt b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
}
.tt small {
margin-top: -6px;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.tt.locked b {
color: var(--ink-2);
}
.st-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.st-dots {
display: flex;
flex: none;
gap: 6px;
}
.st-dots i {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--track);
}
.st-dots i.on {
background: var(--ink);
}
.st-dots i.now {
box-shadow: inset 0 0 0 2px var(--ink);
background: transparent;
}
.stream-tile .btns {
margin-top: 14px;
}
.stream-tile .btn.second {
background: var(--bg);
}
.home-kept {
margin-top: 16px;
}
.prog-head {
appearance: none;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
margin: 4px 0 0;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: opacity 0.16s ease;
}
.prog-head:active {
opacity: 0.6;
}
.prog-head .bubble.big {
width: 48px;
height: 48px;
}
.prog-head .bubble.big .ic {
width: 24px;
height: 24px;
}
.prog-head .txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.prog-head .txt b {
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
}
.prog-head .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.prog-head .go {
flex: none;
width: 20px;
height: 20px;
stroke-width: 1.6;
color: var(--ink-3);
}
.ph-ticks {
margin-top: 16px;
}
.ph-ticks + .pb-foot {
margin-top: 8px;
}
.ph-stats {
display: flex;
gap: 8px;
margin: 16px 0 0;
}
.ph-stat {
appearance: none;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
padding: 10px 14px 12px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
transition: background-color 0.16s ease;
}
.ph-stat:active {
background: var(--well-2);
}
.ph-stat b {
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.4px;
}
.ph-stat span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.chapter {
margin: 0;
box-shadow: inset 0 1px 0 var(--line);
}
.ph-stats + .chapter,
.pb-foot + .chapter,
.list + .chapter {
margin-top: 20px;
}
.ch-head {
appearance: none;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 68px;
margin: 0;
padding: 14px 0;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: opacity 0.16s ease;
}
.ch-head:active {
opacity: 0.6;
}
.ch-t {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.ch-t small {
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.72px;
text-transform: uppercase;
color: var(--ink-2);
}
.ch-t b {
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
}
.ch-n {
flex: none;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ch-chev {
flex: none;
width: 18px;
height: 18px;
stroke-width: 1.8;
color: var(--ink-3);
transform: rotate(90deg);
transition: transform 0.22s var(--ease);
}
.ch-head.open .ch-chev {
transform: rotate(-90deg);
}
.rail {
margin: 2px 0 14px;
}
.rl {
appearance: none;
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
width: 100%;
margin: 0;
padding: 0 0 18px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
button.rl:active .rl-txt {
opacity: 0.6;
}
.rl.static {
cursor: default;
}
.rl::before {
content: "";
position: absolute;
top: 36px;
bottom: 4px;
left: 15px;
width: 2px;
border-radius: 1px;
background: var(--track);
}
.rl:last-child::before {
display: none;
}
.rl.done::before {
background: var(--ink);
}
.rl-node {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
color: #ffffff;
background: var(--ink-4);
}
.rl.done .rl-node,
.rl.today .rl-node {
color: var(--btn-ink);
background: var(--btn);
}
.rl-node .ic {
width: 16px;
height: 16px;
stroke-width: 2.2;
}
.rl-txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 5px;
transition: opacity 0.16s ease;
}
.rl-txt small {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rl-txt b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.rl-txt span {
display: -webkit-box;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.rl-card {
flex: 1;
min-width: 0;
padding: 14px 16px 16px;
border-radius: var(--r-group);
background: var(--well);
}
.rl-kick {
margin: 0 0 4px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rl-card b {
display: block;
font-size: 20px;
line-height: 26px;
font-weight: 500;
letter-spacing: -0.2px;
color: var(--ink);
}
.rl-card p:not(.rl-kick) {
margin: 4px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.rl-card .btn {
margin-top: 14px;
}
.cv-plan {
margin-top: 20px;
}
.orb-head {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
}
.orb-head .art {
width: 52px;
height: 52px;
}
.orb-head b {
display: block;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.orb-head span {
display: block;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.orb-note {
margin: 14px 2px 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.tab-head .th-acts { gap: 12px; }
.home-inbox-button { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink); }
.home-inbox-button .ic { width: 20px; height: 20px; }
.home-inbox-dot { position: absolute; top: 9px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--ib-pink); }
.notification-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.notification-heading > div { flex: 1; min-width: 0; }
.notification-heading h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 500; }
.notification-heading .hint { margin: 4px 0 0; font-size: 12px; line-height: 16px; }
.notification-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--well); color: var(--ink); flex: none; }
.notification-text { font-size: 16px; line-height: 25px; overflow-wrap: anywhere; }
.notification-text p { margin: 0 0 16px; }
.notification-text strong { font-weight: 500; }
.notification-text blockquote { margin: 16px 0; padding: 16px; background: var(--well); border-radius: var(--r-row); }
.notification-full > .btn { margin-top: 24px; }
.continuation-prompt { margin: 20px 0; }
.continuation-invite { position: relative; width: 100%; border: 0; border-radius: 20px; background: var(--surface); color: var(--ink); padding: 20px; text-align: left; }
.continuation-invite > span { display: block; }
.continuation-day { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.continuation-invite-title { font-size: 19px; line-height: 25px; font-weight: 500; margin: 8px 28px 12px 0; }
.continuation-invite-link { font-size: 14px; line-height: 20px; }
.continuation-invite > .ic { position: absolute; right: 20px; bottom: 20px; width: 20px; height: 20px; }
.continuation-question { display: grid; gap: 16px; padding-bottom: 8px; }
.continuation-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.continuation-heading .continuation-day { grid-column: 2; text-align: center; }
.continuation-heading > .feedback-close:last-child { grid-column: 3; }
.continuation-question .title, .continuation-intro { margin: 0; }
.continuation-intro { font-size: 16px; line-height: 23px; color: var(--ink-2); }
.continuation-choices { background: var(--surface); border-radius: 16px; overflow: hidden; }
.continuation-choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 54px; padding: 14px 16px; border: 0; background: transparent; color: var(--ink); text-align: left; font-size: 17px; line-height: 23px; }
.continuation-choice + .continuation-choice { border-top: 1px solid var(--line); }
.continuation-radio { width: 20px; height: 20px; flex: 0 0 20px; border: 1.5px solid var(--ink-3); border-radius: 50%; }
.continuation-choice[aria-pressed="true"] .continuation-radio { border: 6px solid var(--ink); }
.continuation-reasons { display: grid; gap: 16px; }
.continuation-reasons p { margin: 0; font-size: 16px; line-height: 22px; }
.continuation-reasons textarea { min-height: 112px; padding: 16px; resize: none; }
.continuation-back { grid-column: 1; }
.update-note { margin: 8px 0 0; overflow: hidden; color: var(--ink); }
.update-note-card { padding: 16px; border-radius: var(--r-card); background: var(--well); background: color-mix(in srgb, var(--ib-pink) 14%, var(--bg)); }
.update-note-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; align-items: center; gap: 10px; }
.update-note-heart { display: block; width: 28px; height: 28px; object-fit: contain; }
.update-note-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; overflow-wrap: anywhere; }
.update-note-copy { margin: 10px 0 0; font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.update-note-close { width: 44px; height: 44px; margin: -6px; padding: 0; border: 0; border-radius: 50%; color: var(--ink-2); background: transparent; display: grid; place-items: center; cursor: pointer; }
.update-note-close .ic { width: 18px; height: 18px; }
.update-note-close:active { background: var(--well-2); }
.update-note-close:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.checkin-history-sheet .grip { margin-bottom: 0; }
.checkin-history { display: grid; gap: 20px; }
.checkin-history-head { display: grid; gap: 8px; }
.checkin-history-head .lead { margin: 0; }
.checkin-history > .list { margin: 0; }
.streak-chip { appearance: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; margin: 0; padding: 0 4px;
border: 0; background: none; color: var(--ink); font-size: 19px; line-height: 24px; font-weight: 600;
font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .16s var(--ease); }
.streak-chip .sc-flame { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--ink-3); }
.streak-chip .sc-flame .ic { width: 26px; height: 26px; stroke-width: 1.9; }
.streak-chip.on .sc-flame { color: var(--ib-pink); }
.streak-chip.on .sc-flame .ic { fill: color-mix(in srgb, var(--ib-pink) 26%, transparent); }
.streak-chip:active { transform: scale(.95); }
.tab-head .th-acts:has(.streak-chip) { gap: 10px; }
@media (max-width: 359px) {
.tab-head .th-acts:has(.streak-chip) { gap: 8px; }
.streak-chip:not(.on) { display: none; }
}
.streak-chip .sc-flame { position:relative; width:44px; height:44px; }
.streak-chip .sc-flame .ic { width:40px; height:40px; }
.streak-chip .sc-count { position:absolute; inset:18px 0 auto; text-align:center; font-size:12px; line-height:16px; color:var(--ink); }
.streak-chip.on .sc-flame .ic { fill:var(--ib-pink); }
.streak-chip.on .sc-count { color:#1d1d1f; }
@media (max-width:359px) { .streak-chip:not(.on) { display:inline-flex; } }
.msg.cmsg {
padding: 12px 16px;
}
.msg.cmsg.wide {
width: 100%;
max-width: 100%;
}
.cm-title {
margin: 0 0 2px;
font-size: 16px;
line-height: 23px;
font-weight: 500;
color: var(--ink);
}
.msg.ritm .cm-lead {
margin: 0;
}
.cm-rows {
margin: 12px -16px 0;
border-top: 1px solid var(--line);
}
.cm-row {
appearance: none;
position: relative;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 64px;
margin: 0;
padding: 10px 16px;
border: 0;
background: transparent;
font: inherit;
color: var(--ink);
text-align: left;
transition: background-color 0.16s ease;
}
button.cm-row {
cursor: pointer;
}
button.cm-row:active {
background: var(--well-2);
}
.cm-row + .cm-row::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 60px;
height: 1px;
background: var(--line);
}
.cm-row .txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.cm-row .txt b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.cm-row .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.cm-row .val {
flex: none;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.cm-row .go {
flex: none;
width: 20px;
height: 20px;
stroke-width: 1.6;
color: var(--ink-3);
}
.cm-num {
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 14px;
line-height: 1;
font-weight: 500;
color: #ffffff;
background: var(--ib-gray);
font-variant-numeric: tabular-nums;
}
.cm-num.on {
color: var(--btn-ink);
background: var(--btn);
}
.cm-rows.points {
margin-top: 8px;
border-top: 0;
}
.cm-rows.points .cm-row {
align-items: flex-start;
gap: 10px;
min-height: 0;
padding: 6px 16px;
}
.cm-rows.points .cm-row + .cm-row::before {
display: none;
}
.cm-rows.points .txt b {
font-size: 15px;
line-height: 22px;
font-weight: 400;
}
.cm-dot {
flex: none;
width: 6px;
height: 6px;
margin: 8px 0 0 2px;
border-radius: 50%;
background: var(--ink-3);
}
.msg.ritm .cm-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 14px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.msg.ritm .cm-rows:not(.points) + .cm-note {
margin: 0 -16px;
padding: 12px 16px 2px;
border-top: 1px solid var(--line);
}
.cm-note .ic {
flex: none;
width: 16px;
height: 16px;
margin-top: 2px;
stroke-width: 2;
}
.cm-note.done .ic {
color: var(--good);
}
.cm-more {
appearance: none;
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% + 32px);
min-height: 44px;
margin: 10px -16px -12px;
padding: 0 16px;
border: 0;
border-top: 1px solid var(--line);
background: transparent;
font: inherit;
font-size: 15px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.cm-more:active {
background: var(--well-2);
}
.cm-more .ic {
width: 18px;
height: 18px;
stroke-width: 1.8;
color: var(--ink-3);
}
.thread .msg.cmsg time {
margin-top: 6px;
}
.cm-sheet p {
margin: 0 0 12px;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.cm-sheet p:last-child {
margin-bottom: 0;
}
.guide {
display: flex;
flex-direction: column;
min-height: calc(100vh - 40px);
}
.guide > .kicker {
margin: 8px 0 8px;
}
.guide > .lead + .list {margin-top:20px}
.gd-foot {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
gap: 4px;
margin: auto calc(var(--gutter) * -1) 0;
padding: 16px var(--gutter) calc(12px + var(--safe-b));
background: var(--bg);
}
.gs-box {
margin: 24px 0 0;
padding: 20px;
border-radius: var(--r-card);
background: var(--well);
}
.gs-word {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 16px;
}
.gs-l {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--r-row);
font-size: 20px;
line-height: 1;
font-weight: 500;
color: var(--ink-2);
background: var(--bg);
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.gs-l.on {
color: var(--btn-ink);
background: var(--btn);
}
.gs-hint {
margin: 0;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.gs-tip {
margin-top: 16px;
}
.gs-example { margin: 20px 0; }
.gs-example > summary { min-height: 48px; padding: 12px 16px; border-radius: var(--r-row); background: var(--well); font-size: 16px; line-height: 24px; }
.gs-example .gs-box { margin-top: 8px; }
.gs-example .btn { margin-top: 16px; }
.gg-steps {
margin: 24px 0 0;
}
.gg-step .txt b {
color: var(--ink-2);
}
.gg-step.on .txt b,
.gg-step.was .txt b {
color: var(--ink);
}
.guide-breath { min-height: calc(100svh - 48px - var(--safe-b) - var(--full-top, 0px)); }
.gb-setup, .gb-practice { flex: 1; display: flex; flex-direction: column; }
.gb-prelude { margin: auto 0; padding: 48px 0; text-align: center; }
.gb-prelude .title { margin: 0 0 16px; }
.gb-prelude .lead { font-size: 16px; line-height: 24px; margin: 0; white-space: pre-line; }
.gb-durations { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.gb-duration { width: 72px; height: 80px; border: 0; border-radius: var(--r-btn); background: var(--well); color: var(--ink); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.gb-duration b { font-size: 24px; line-height: 30px; font-weight: 500; }
.gb-duration span { font-size: 14px; line-height: 20px; }
.gb-duration[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.gb-focus { margin: auto 0; padding: 24px 0 32px; }
.gb-stage { display: grid; place-items: center; height: 280px; }
.gb-ring { position: relative; width: 240px; height: 240px; color: var(--ink); }
.gb-dot { position: absolute; left: 117px; top: 117px; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.gb-dot:nth-child(8n + 2) { color: var(--ib-violet); }
.gb-glow { position: absolute; left: 58px; top: 58px; width: 124px; height: 124px; border-radius: 50%; background: var(--ib-violet); filter: blur(40px); }
.gb-word { display: block; margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; text-align: center; }
.gb-count { margin: 8px 0 0; text-align: center; font-size: 14px; line-height: 20px; }
.gb-comfort { text-align: center; font-size: 14px; line-height: 20px; max-width: 280px; margin: 12px auto 8px; }
.gb-setup .gd-foot, .gb-practice .gd-foot { position: static; margin-top: 8px; }
@media (max-height: 680px) {
.gb-prelude { padding: 24px 0; }
.gb-stage { height: 220px; }
.gb-focus { padding: 8px 0 20px; }
}
.cm-rows.plain .cm-row {
min-height: 48px;
padding: 12px 16px;
}
.cm-rows.plain .cm-row + .cm-row::before {
left: 16px;
}
.cm-rows.plain .txt b {
font-weight: 400;
}
.cm-rows.plain .val {
font-weight: 500;
color: var(--ink);
}
.kn-secs {
gap: 36px;
}
.kq-again {
display: inline-flex;
align-items: center;
min-height: 36px;
margin: 12px 0 0;
padding: 0 14px;
border-radius: 18px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
background: var(--chip);
text-decoration: none;
}
.kn-refs2 {
margin: 40px 0 0;
}
.kn-refs2 .section {
margin: 0 0 12px;
}
.kn-ref-list .item {
align-items: flex-start;
min-height: 64px;
}
.kn-ref .ks-n {
margin-top: 1px;
background: var(--bg);
}
.kn-ref .txt b {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.kn-ref .val {
margin-top: 1px;
font-size: 14px;
line-height: 22px;
}
.kn-ref.item {
gap: 10px;
}
.kn-ref .go {
width: 18px;
height: 18px;
margin-top: 2px;
}
.kn-ref.flash {
animation: flash 1.4s ease;
}
.kn-refs2 + .kn-done {
margin-top: 24px;
}
.sheet-lesson.info-sheet {
margin-bottom: 16px;
}
.info-list {
margin: 0 0 12px;
}
.info-note {
margin: 0 0 20px;
}
.light-tool .lw-main {
margin: 20px 0 8px;
}
.lw-k {
margin: 0;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.72px;
text-transform: uppercase;
color: var(--dark-ink-2);
}
.lw-time {
margin: 6px 0 0;
font-size: 30px;
line-height: 36px;
font-weight: 500;
color: var(--dark-ink);
font-variant-numeric: tabular-nums;
}
.sun-arc {
position: relative;
margin: 14px -20px 0;
padding-bottom: 20px;
}
.sun-arc-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.sa-horizon {
stroke: var(--dark-ink);
stroke-opacity: 0.16;
stroke-width: 1;
}
.sa-night {
fill: none;
stroke: var(--dark-ink);
stroke-opacity: 0.24;
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 2 5;
}
.sa-day {
fill: none;
stroke: var(--dark-ink);
stroke-opacity: 0.72;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 1;
animation: sa-draw 1.1s cubic-bezier(0.25, 0.7, 0.25, 1) both;
}
.sa-window {
fill: none;
stroke: var(--amber);
stroke-width: 7;
stroke-linecap: round;
stroke-dasharray: 1;
animation: sa-draw 0.5s 0.75s cubic-bezier(0.25, 0.7, 0.25, 1) both;
}
.sa-now {
fill: var(--dark-ink);
stroke: var(--dark-card);
stroke-width: 3;
animation: sa-fade 0.3s 1s ease both;
}
.sa-label {
position: absolute;
bottom: 0;
transform: translateX(-50%);
font-size: 12px;
line-height: 16px;
color: var(--dark-ink-2);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@keyframes sa-draw {
from {
stroke-dashoffset: 1;
opacity: 0;
}
8% {
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
@keyframes sa-fade {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sa-day,
.sa-window,
.sa-now {
animation: none;
}
}
.lw-how {
margin: 8px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--dark-ink-2);
}
.lw-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 16px 0 0;
}
.lw-now {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
border-radius: 14px;
font-size: 14px;
font-weight: 500;
color: var(--dark-ink);
background: var(--dark-pill);
}
.lw-why {
appearance: none;
display: inline-flex;
align-items: center;
gap: 2px;
min-height: 36px;
margin-left: auto;
padding: 0 0 0 12px;
border: 0;
background: none;
font: inherit;
font-size: 14px;
font-weight: 500;
color: var(--dark-ink);
cursor: pointer;
}
.lw-why .ic {
width: 16px;
height: 16px;
color: var(--dark-ink-2);
}
.lw-list {
margin-bottom: 16px;
}
.rc-counts {
margin: 0 0 8px;
}
.rc-count {
min-height: 64px;
}
.rc-count .txt {
gap: 8px;
}
.rc-count .txt b {
font-size: 16px;
line-height: 22px;
}
.rc-bar {
display: block;
height: 6px;
border-radius: 3px;
background: var(--track);
overflow: hidden;
}
.rc-bar > i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--accent);
}
.rc-count .val {
align-self: flex-start;
margin-top: 1px;
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.rc-strip {
margin-bottom: 20px;
}
.rc-days {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: 4px 0;
}
.rc-days.two {
grid-template-columns: repeat(15, 1fr);
}
.rc-d {
appearance: none;
display: grid;
justify-items: center;
gap: 6px;
min-height: 44px;
padding: 6px 0 4px;
border: 0;
border-radius: 10px;
background: transparent;
font: inherit;
cursor: pointer;
}
.rc-d > i {
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: inset 0 0 0 1.4px var(--ink-4);
}
.rc-d.m > i {
background: var(--ink);
box-shadow: none;
}
.rc-d.main > i {
background: var(--accent);
}
.rc-d > span {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.rc-d.on {
background: var(--well-2);
}
.rc-d.on > span {
color: var(--ink);
font-weight: 500;
}
.rc-day-t {
display: flex;
flex-direction: column;
gap: 2px;
margin: 12px 0 0;
padding: 12px 0 0;
border-top: 1px solid var(--line);
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rc-day-t b {
font-size: 15px;
line-height: 21px;
font-weight: 500;
color: var(--ink);
}
.chart-legend .rck {
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: inset 0 0 0 1.4px var(--ink-4);
}
.chart-legend .rck.m {
background: var(--ink);
box-shadow: none;
}
.chart-legend .rck.main {
background: var(--accent);
box-shadow: none;
}
.pay-more-list {
display: grid;
gap: 8px;
margin: 0 0 12px;
padding: 0;
list-style: none;
}
.pay-more-list li {
position: relative;
padding-left: 16px;
}
.pay-more-list li::before {
content: "";
position: absolute;
top: 8px;
left: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink-3);
}
.pay-hint.pay-wait {
margin: 0 0 16px;
font-size: 15px;
line-height: 21px;
}
.doc-body .doc-short ul {
display: grid;
gap: 10px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.doc-body .doc-short li {
position: relative;
padding-left: 16px;
font-size: 15px;
line-height: 22px;
}
.doc-body .doc-short li::before {
content: "";
position: absolute;
top: 9px;
left: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink-3);
}
.kn-disclaimer {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 12px 4px 0;
}
.kn-disclaimer .ic {
flex: none;
width: 16px;
height: 16px;
margin-top: 2px;
stroke-width: 1.8;
color: var(--ink-3);
}
.kr-in {
padding-left: 16px;
}
.kr-in > p {
max-width: 100%;
}
.lux-points {
display: grid;
gap: 6px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.lux-points li {
position: relative;
padding-left: 16px;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.lux-points li::before {
content: "";
position: absolute;
top: 8px;
left: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ink-3);
}
.sos-page > .kicker {
margin: 8px 0 8px;
}
.sos-page .list {
margin-bottom: 8px;
}
.sos-crisis {
margin-top: 24px;
}
.sos-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 14px 4px 0;
}
.sos-note .ic {
flex: none;
width: 16px;
height: 16px;
margin-top: 2px;
stroke-width: 1.8;
color: var(--ink-3);
}
.sos-note.strong {
margin: 16px 0 4px;
padding: 12px 14px;
border-radius: var(--r-row);
color: var(--ink);
background: var(--well);
}
.sos-rec {
display: grid;
gap: 10px;
margin: 20px 0 0;
}
.sos-rec .hint {
margin: 0;
}
.gg-box {
text-align: left;
}
.gg-num {
display: block;
font-size: 30px;
line-height: 36px;
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.gg-what {
margin: 2px 0 12px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
color: var(--ink);
}
.gp-stage {
display: grid;
place-items: center;
margin: 24px 0 8px;
}
.gp-ring {
display: grid;
place-items: center;
width: 200px;
height: 200px;
}
.gp-ring > svg {
grid-area: 1 / 1;
transform: rotate(-90deg);
}
.gp-track,
.gp-arc {
fill: none;
stroke-width: 8;
}
.gp-track {
stroke: var(--well);
}
.gp-arc {
stroke: var(--accent);
stroke-linecap: round;
transition: stroke-dashoffset 1s linear;
}
.gp-time {
grid-area: 1 / 1;
font-size: 30px;
line-height: 36px;
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.gp-tips {
margin-top: 16px;
}
.gp-tips .item {
min-height: 52px;
}
.gh-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin: 24px 0 0;
}
.gh-n {
appearance: none;
min-height: 52px;
border: 0;
border-radius: var(--r-row);
font: inherit;
font-size: 20px;
font-weight: 500;
color: var(--ink);
background: var(--well);
cursor: pointer;
}
.gh-n.on {
color: var(--btn-ink);
background: var(--btn);
}
.gh-say {
margin: 20px 0 12px;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.inbox-day {
margin: 20px 4px 8px;
}
.inbox-row .txt b {
font-weight: 400;
}
.inbox-row.unread .txt b {
font-weight: 500;
}
.inbox-prev {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.inbox-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--btn);
}
.link-btn.info-more {
display: block;
margin: 14px 0 22px;
padding: 6px 0;
}
.vis.vis-light {
display: grid;
gap: 8px;
padding: 0;
background: none;
}
.vis-light .lw-main,
.vis-light .lw-list {
margin: 0;
}
.gs-word-choice { padding: 24px 20px 12px; background: var(--well); border-radius: var(--r-card); margin: 16px 0 24px; text-align: center; }
.gs-word-choice .hint { margin: 0 0 8px; font-size: 14px; line-height: 20px; }
.gs-word-choice .title { margin: 0; }
.gs-word-choice .gs-replace { display: inline-flex; width: auto; margin: 8px auto 0; padding: 12px 16px; font-size: 16px; }
.gs-instruction { font-size: 16px; line-height: 25px; margin: 0 0 16px; }
.pl-prev[hidden] {
display: none;
}
.rw-mark.miss {
color: #1d1d1f;
background: var(--warn);
}
.rw-seg.miss {
background: var(--warn);
}
.rw-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.rw-tiles.n3 {
grid-template-columns: 1fr 1fr 1fr;
}
.rw-tile {
appearance: none;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0;
padding: 18px 12px 16px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
text-align: center;
cursor: pointer;
transition:
transform 0.12s ease,
box-shadow 0.18s ease,
opacity 0.25s ease;
}
.rw-tile:active {
transform: scale(0.98);
}
.rw-tile b {
font-size: 16px;
line-height: 21px;
font-weight: 500;
}
.rw-tile > span:not(.bubble):not(.rw-mark) {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rw-tile.on {
box-shadow: inset 0 0 0 2px var(--ink);
}
.rw-tiles.answered .rw-tile {
pointer-events: none;
}
.rw-tiles.answered .rw-tile:not(.on):not(.right) {
opacity: 0.45;
}
.rw-tile .rw-mark {
position: absolute;
top: 10px;
right: 10px;
}
.rw-lamp {
display: block;
width: 96px;
height: 64px;
}
.rw-scale-ask {
position: relative;
}
.rw-scale-ask.done {
padding-top: 34px;
}
.rw-zones {
display: flex;
overflow: hidden;
border-radius: var(--r-group);
}
.rw-zone {
appearance: none;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 2px;
min-width: 0;
min-height: 124px;
padding: 14px 10px 12px;
border: 0;
border-right: 2px solid var(--bg);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
transition:
box-shadow 0.18s ease,
opacity 0.25s ease,
background-color 0.18s ease;
}
.rw-zone:last-child {
border-right: 0;
}
.rw-zone:active {
background: var(--well-2);
}
.rw-zone-ic {
flex: none;
width: 22px;
height: 22px;
margin: 0 0 14px;
color: var(--ink-2);
}
.rw-zone b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
overflow-wrap: anywhere;
}
.rw-zone span {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.rw-zone.on {
box-shadow: inset 0 0 0 2px var(--ink);
}
.rw-zone:first-child.on {
border-radius: var(--r-group) 0 0 var(--r-group);
}
.rw-zone:last-child.on {
border-radius: 0 var(--r-group) var(--r-group) 0;
}
.rw-scale-ask.done .rw-zone:not(.on):not(.right) {
opacity: 0.55;
}
.rw-zone .rw-mark {
position: absolute;
top: 12px;
right: 8px;
width: 20px;
height: 20px;
}
.rw-zline {
position: absolute;
top: 28px;
bottom: -6px;
width: 2px;
margin-left: -1px;
border-radius: 1px;
background: var(--accent);
pointer-events: none;
}
.rw-ztag {
position: absolute;
top: 0;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
transform: translateX(-50%);
}
.rw-ztag.start {
transform: translateX(-12px);
}
.rw-ztag.end {
transform: translateX(calc(-100% + 12px));
}
.rw-scale.fresh .rw-zline,
.rw-scale.fresh .rw-ztag {
animation: rw-drop 0.45s var(--ease) 0.15s backwards;
}
.rw-scale .rw-ends {
margin-top: 6px;
}
.rw-dayline {
gap: 14px;
padding: 16px;
border-radius: var(--r-card);
background: var(--well);
}
.rw-dl-head {
display: grid;
gap: 2px;
}
.rw-dl-head .kicker {
margin: 0 0 2px;
}
.rw-dl-at {
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--ink);
}
.rw-dl-lead {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rw-dl-scale {
display: grid;
gap: 8px;
padding: 0 11px;
}
.rw-dl-track {
position: relative;
height: 14px;
margin: 6px 0;
border-radius: 7px;
background: var(--track);
outline: none;
cursor: pointer;
touch-action: pan-y;
}
.rw-dayline.done .rw-dl-track {
cursor: default;
}
.rw-dl-day,
.rw-dl-sun,
.rw-dl-sleep {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.rw-dl-day {
border-radius: 7px 0 0 7px;
background: var(--c-f2);
}
.rw-dl-sun {
background: var(--accent);
transition:
left 0.25s var(--ease),
width 0.25s var(--ease);
}
.rw-dl-sleep {
border-radius: 0 7px 7px 0;
background: var(--ink);
}
.rw-dl-day {
transition: width 0.25s var(--ease);
}
.rw-dl-knob {
position: absolute;
top: 50%;
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
border-radius: 50%;
background: var(--bg);
box-shadow: inset 0 0 0 3px var(--accent);
transition: left 0.25s var(--ease);
}
.rw-dayline.done .rw-dl-knob {
display: none;
}
.rw-dl-track:focus-visible .rw-dl-knob {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
.rw-dl-tags {
position: relative;
height: 18px;
font-size: 12px;
line-height: 18px;
color: var(--ink-2);
}
.rw-dl-tag {
position: absolute;
top: 0;
white-space: nowrap;
}
.rw-dl-tag b {
font-weight: 500;
color: var(--ink);
}
.rw-dl-tag.wake {
left: -11px;
}
.rw-dl-tag.bed {
transform: translateX(-50%);
}
.rw-dl-tag.bed.end {
transform: translateX(calc(-100% + 11px));
}
.rw-dl-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rw-chip-t {
appearance: none;
height: 40px;
padding: 0 14px;
border: 0;
border-radius: 20px;
background: var(--bg);
font-size: 15px;
line-height: 1;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition:
box-shadow 0.18s ease,
opacity 0.12s ease;
}
.rw-chip-t:active {
opacity: 0.6;
}
.rw-chip-t.on {
box-shadow: inset 0 0 0 2px var(--ink);
}
.rw-chip-t[disabled]:not(.on) {
display: none;
}
.rw-evening {
gap: 12px;
}
.rw-ev-line {
display: grid;
gap: 6px;
}
.rw-ev-row {
appearance: none;
position: relative;
display: grid;
grid-template-columns: 46px 14px minmax(0, 1fr);
align-items: center;
gap: 8px;
width: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
}
button.rw-ev-row {
cursor: pointer;
}
.rw-ev-t {
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.rw-ev-dot {
position: relative;
justify-self: center;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--c-f2);
}
.rw-ev-row:not(.point.end) .rw-ev-dot::after {
content: "";
position: absolute;
top: 10px;
left: 4px;
width: 2px;
height: 60px;
background: var(--track);
}
.rw-ev-row.point.start .rw-ev-dot {
width: 12px;
height: 12px;
background: var(--accent);
}
.rw-ev-row.point.start .rw-ev-dot::after {
left: 5px;
top: 12px;
}
.rw-ev-row.point.end .rw-ev-dot {
width: 12px;
height: 12px;
background: var(--ink);
}
.rw-ev-row.point {
min-height: 40px;
}
.rw-ev-txt {
display: grid;
gap: 1px;
min-width: 0;
}
.rw-ev-txt b {
font-size: 16px;
line-height: 21px;
font-weight: 500;
}
.rw-ev-txt span {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.rw-ev-card {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 10px 12px;
border-radius: var(--r-row);
background: var(--well);
transition: transform 0.12s ease;
}
button.rw-ev-row:active .rw-ev-card {
transform: scale(0.985);
background: var(--well-2);
}
.rw-ev-card .rw-ev-txt {
flex: 1;
}
.rw-ev-x {
flex: none;
width: 18px;
height: 18px;
color: var(--ink-3);
}
.rw-ev-empty {
margin: 0 0 0 68px;
padding: 12px 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rw-ev-k {
margin: 8px 0 -4px;
}
.rw-ev-add {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.rw-ev-opt {
appearance: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
min-width: 0;
padding: 12px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
transition:
transform 0.12s ease,
opacity 0.2s ease;
}
.rw-ev-opt:active {
transform: scale(0.98);
background: var(--well-2);
}
.rw-ev-opt[disabled] {
opacity: 0.45;
cursor: default;
}
.rw-ev-top {
display: flex;
align-items: center;
justify-content: space-between;
align-self: stretch;
margin-bottom: 4px;
}
.rw-ev-opt b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
}
.rw-ev-at {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rw-ev-plus {
flex: none;
width: 20px;
height: 20px;
color: var(--ink-2);
}
.rw-bins {
gap: 14px;
}
.rw-bin-card {
display: grid;
gap: 10px;
}
.rw-bin-now {
min-height: 128px;
padding: 38px 20px 24px;
}
.rw-bin-now.enter {
animation: rw-rise 0.32s var(--ease) backwards;
}
.rw-bin-ready {
margin: 0;
padding: 14px 16px;
border-radius: var(--r-row);
background: var(--well);
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.rw-bin-groups {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.rw-bin-groups.done {
grid-template-columns: 1fr;
}
.rw-bin {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
min-height: 132px;
padding: 12px;
border-radius: var(--r-group);
background: var(--well);
outline: none;
transition:
background-color 0.18s ease,
transform 0.12s ease;
}
.rw-bin.ready {
cursor: pointer;
}
.rw-bin.ready:active {
transform: scale(0.985);
background: var(--well-2);
}
.rw-bin:focus-visible {
box-shadow: inset 0 0 0 2px var(--ink);
}
.rw-bin-empty {
margin: 4px 0 0;
font-size: 14px;
line-height: 19px;
color: var(--ink-3);
}
.rw-bin-empty[hidden] {
display: none;
}
.rw-bin-h {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.rw-bin-h .bubble {
width: 24px;
height: 24px;
}
.rw-bin-h .bubble .ic {
width: 14px;
height: 14px;
}
.rw-bin-h b {
flex: 1;
min-width: 0;
font-size: 15px;
line-height: 20px;
font-weight: 500;
}
.rw-bin-n {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rw-bin-list {
display: grid;
gap: 6px;
}
.rw-bin-item {
appearance: none;
min-height: 40px;
padding: 8px 10px;
border: 0;
border-radius: 10px;
background: var(--bg);
font-size: 14px;
line-height: 19px;
font-weight: 500;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.rw-bin-item.new {
animation: rw-up 0.26s var(--ease) backwards;
}
.rw-bin-item:active {
opacity: 0.6;
}
.rw-bin.done .rw-results {
padding: 0;
background: transparent;
}
.rw-bin.done .rw-results li {
padding: 8px 0;
}
.rw-bin.done .rw-results li + li::before {
left: 36px;
}
.rw-rc-card {
min-height: 148px;
padding: 40px 20px 24px;
}
.rw-rc-card .rw-card-text {
font-size: 19px;
line-height: 26px;
}
.rw-recall .rw-rc-opts {
margin-top: -4px;
}
.rw-recall .pl-fb {
margin: 0;
}
.rw-deal {
gap: 16px;
}
.rw-deal-opt {
align-items: flex-start;
padding-top: 14px;
padding-bottom: 14px;
}
.rw-deal-opt .txt span {
margin-top: 2px;
}
.rw-radio {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
margin-top: 5px;
border-radius: 50%;
color: var(--btn-ink);
background: var(--ink-4);
transition: background-color 0.18s ease;
}
.rw-radio.on {
background: var(--btn);
}
.rw-radio .ic {
width: 13px;
height: 13px;
stroke-width: 3;
}
.rw-deal.done .rw-radio {
background: var(--good);
}
.rw-deal-note {
margin: -4px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rw-deal-note:empty {
display: none;
}
.rw-deal-quick {
margin: 0 0 12px;
}
.rw-deal-quick .rw-chip-t {
background: var(--well);
}
.vs-rows {
display: grid;
gap: 14px;
}
.vs-row {
display: grid;
gap: 6px;
}
.vs-l {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 0;
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.vs-l b {
font-weight: 500;
color: var(--ink);
}
.vs-track {
position: relative;
height: 10px;
border-radius: 5px;
background: var(--bg);
}
.vs-band {
position: absolute;
top: 0;
bottom: 0;
border-radius: 5px;
background: var(--c-f2);
}
.vs-dot {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: var(--ink-2);
box-shadow: 0 0 0 2px var(--well);
animation: rw-pop 0.4s var(--ease) backwards;
}
.vs-dot.main {
background: var(--accent);
}
.vs-legend {
margin-top: 12px;
}
.vs-k i {
width: 18px;
height: 8px;
border-radius: 4px;
background: var(--c-f2);
}
.vis-shift .segm,
.vis-howto .segm {
background: var(--well-2);
}
.vis-shift .segm button.on,
.vis-howto .segm button.on {
background: var(--bg);
}
:root[data-theme="dark"] .vis-shift .segm,
:root[data-theme="dark"] .vis-howto .segm {
background: var(--bg);
}
:root[data-theme="dark"] .vis-shift .segm button.on,
:root[data-theme="dark"] .vis-howto .segm button.on {
background: #5c5c5c;
}
.vsh-rows {
display: grid;
gap: 6px;
margin: 18px 0 8px;
}
.vsh-row {
position: relative;
height: 10px;
}
.vsh-row::before {
content: "";
position: absolute;
top: 4.5px;
right: 0;
left: 0;
height: 1px;
background: var(--line);
}
.vsh-p,
.vsh-ghost {
position: absolute;
top: 0;
width: 10px;
height: 10px;
margin-left: -5px;
border-radius: 50%;
}
.vsh-p {
background: var(--ink-2);
transition:
left 0.7s var(--ease),
background-color 0.3s ease;
}
.vsh-ghost {
box-shadow: inset 0 0 0 1.5px var(--ink-4);
opacity: 0;
transition: opacity 0.3s ease;
}
.vsh-line {
position: absolute;
top: 4px;
height: 2px;
width: 0;
border-radius: 1px;
background: var(--accent-soft);
transition: width 0.7s var(--ease);
}
.vsh-rows.moved .vsh-p {
background: var(--accent);
}
.vsh-rows.moved .vsh-ghost {
opacity: 1;
}
.vsh-axis {
display: flex;
justify-content: space-between;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.vsh-big {
display: grid;
gap: 2px;
margin: 14px 0 0;
animation: rw-up 0.36s var(--ease) backwards;
}
.vsh-big b {
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--ink);
}
.vsh-big span,
.vsh-note {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.vsh-note {
margin: 14px 0 0;
}
.vsh-big[hidden],
.vsh-note[hidden] {
display: none;
}
.vsc-room {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.vsc-floor {
stroke: var(--c-f2);
stroke-width: 2;
}
.vsc-cord {
fill: none;
stroke: var(--ink-2);
stroke-width: 2.5;
stroke-linecap: round;
}
.vsc-shade {
fill: var(--ink-2);
}
.vsc-bulb {
fill: var(--ib-amber);
transition: fill 0.4s ease;
}
.vsc-cone {
fill: var(--ib-amber);
opacity: 0.24;
transition: opacity 0.5s ease;
}
.s-off .vsc-cone {
opacity: 0;
}
.s-off .vsc-bulb {
fill: var(--ink-4);
}
.vsc-screen {
fill: var(--ib-sky);
transition: fill 0.4s ease;
}
.s-tint .vsc-screen {
fill: var(--ib-amber);
}
.s-off .vsc-screen {
fill: var(--ink-4);
}
.vsc-tags {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin: 10px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.vsc-tag b {
font-weight: 500;
color: var(--ink);
}
.vsc-meter {
display: grid;
gap: 6px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.vsc-l {
display: flex;
justify-content: space-between;
margin: 0;
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.vsc-l b {
font-weight: 500;
color: var(--ink);
}
.vsc-track {
height: 8px;
border-radius: 4px;
background: var(--bg);
overflow: hidden;
}
.vsc-fill {
display: block;
height: 100%;
border-radius: inherit;
background: var(--ink);
transition: width 0.6s var(--ease);
}
.vis-tug {
display: grid;
gap: 10px;
}
.vt-row {
display: flex;
align-items: center;
gap: 12px;
}
.vt-row .txt {
display: grid;
flex: 1;
gap: 1px;
min-width: 0;
}
.vt-row .txt b {
font-size: 16px;
line-height: 21px;
font-weight: 500;
}
.vt-row .txt span {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.vt-dir {
display: inline-flex;
align-items: center;
gap: 4px;
flex: none;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.vt-dir .ic {
width: 16px;
height: 16px;
}
.vt-dir.back .ic {
transform: rotate(180deg);
}
.vh-body {
margin-top: 14px;
}
.vh-steps {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.vh-steps li {
display: flex;
align-items: center;
gap: 12px;
}
.vh-n {
display: grid;
place-items: center;
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
background: var(--bg);
}
.vh-steps li.last .vh-n {
color: #ffffff;
background: var(--accent);
}
.vh-steps b {
font-size: 16px;
line-height: 21px;
font-weight: 500;
}
.vh-note {
margin: 14px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.vst-who {
display: grid;
gap: 2px;
margin: 0;
}
.vst-who b {
font-size: 30px;
line-height: 36px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--ink);
}
.vst-who span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.vst-groups {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-top: 14px;
}
.vst-groups.n2 {
grid-template-columns: 1fr 1fr;
}
.vst-g {
display: grid;
justify-items: center;
align-content: start;
gap: 8px;
padding: 12px 6px;
border-radius: var(--r-row);
background: var(--bg);
text-align: center;
}
.vst-g span {
font-size: 14px;
line-height: 18px;
color: var(--ink-2);
}
.vst-g.main span {
font-weight: 500;
color: var(--ink);
}
.vst-g.main {
box-shadow: inset 0 0 0 1.5px var(--ink);
}
.vst-res {
margin: 14px 0 0;
font-size: 15px;
line-height: 22px;
color: var(--ink);
}
.vst-res.enter {
animation: rw-up 0.34s var(--ease) backwards;
}
.vst-res[hidden],
.vst-ask[hidden] {
display: none;
}
.vst-ask {
margin: 14px 0 -4px;
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
button.vst-g {
appearance: none;
position: relative;
border: 0;
color: var(--ink);
cursor: pointer;
transition: transform 0.12s ease, opacity 0.2s ease;
}
button.vst-g:active {
transform: scale(0.97);
}
button.vst-g[disabled] {
cursor: default;
}
.vst-groups.done .vst-g:not(.main):not(.mine) {
opacity: 0.5;
}
.vst-g.mine {
box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
.vst-g .rw-mark {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
}
.deal-card {
margin: 16px 0 0;
}
.deal-main {
align-items: center;
padding-top: 14px;
padding-bottom: 14px;
}
.deal-main .txt b {
font-size: 16px;
line-height: 21px;
}
.deal-k {
display: block;
margin: 0 0 2px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.deal-at {
display: grid;
justify-items: end;
flex: none;
margin-left: 4px;
}
.deal-at small {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.deal-at b {
font-size: 20px;
line-height: 26px;
font-weight: 500;
color: var(--ink);
}
.deal-step {
min-height: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.deal-step .deal-t {
flex: none;
width: 44px;
white-space: nowrap;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink-2);
}
.deal-step .txt b {
font-size: 15px;
line-height: 20px;
font-weight: 400;
}
.deal-note {
min-height: 0;
gap: 8px;
padding-top: 12px;
padding-bottom: 12px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.deal-note .ic {
flex: none;
width: 16px;
height: 16px;
margin-left: 8px;
color: var(--ink-2);
}
.pl-take {
max-width: 330px;
margin: 0 0 14px;
font-size: 16px;
line-height: 24px;
color: var(--ink-2);
text-wrap: balance;
}
.pl-deal-end {
align-self: stretch;
text-align: left;
}
.pl-deal-end .deal-card {
margin: 0;
}
.pl-end.with-deal .pl-plan {
margin-top: 12px;
}
.pl-vis {
margin-top: 18px;
}
.pl-vis > .vis,
.pl-vis > .kv {
margin: 0;
}
.vis-howto.one .vh-body {
margin-top: 0;
}
.pl-bonus-preview .pl-stage { padding-top:8px; }
.pl-bonus-preview .pl-foot { background:var(--bg); }
.pl-bonus-closed { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:420px; padding:16px 0 32px; }
.pl-chest-heading { flex:none; }
.pl-bonus-closed .pl-title { margin:0; font-size:30px; line-height:36px; }
.pl-chest-cta { margin:10px 0 0; color:var(--ink-2); font-size:16px; line-height:24px; }
.pl-chest-tap { flex:1; display:grid; place-items:center; width:100%; min-height:320px; padding:12px 0 24px; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.pl-chest-tap:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-card); }
.pl-chest-art { position:relative; display:block; width:min(290px,84vw); aspect-ratio:1; animation:pl-chest-breathe 3.2s ease-in-out infinite; transform-origin:50% 78%; }
.pl-chest-art::after { content:""; position:absolute; left:12%; right:12%; bottom:4%; height:5%; border-radius:50%; background:var(--ink); opacity:.05; }
.pl-chest-body { position:absolute; inset:40% 11% 9%; }
.pl-chest-half { position:absolute; top:0; bottom:0; width:50.1%; background:var(--well-2); border:2px solid var(--ink); }
.pl-chest-half.left { left:0; border-right:0; border-radius:0 0 0 32px; }
.pl-chest-half.right { right:0; border-left:0; border-radius:0 0 32px 0; }
.pl-chest-half::after { content:""; position:absolute; top:0; bottom:0; width:22%; background:var(--ink); }
.pl-chest-half.left::after { right:0; }
.pl-chest-half.right::after { left:0; }
.pl-chest-lid { position:absolute; left:6%; right:6%; top:21%; height:27%; border-radius:48px 48px 13px 13px; background:var(--accent); border:2px solid var(--ink); transform-origin:50% 85%; }
.pl-chest-lid::before { content:""; position:absolute; top:-2px; bottom:-2px; left:39%; width:22%; background:var(--ink); }
.pl-chest-lock { position:absolute; top:48%; left:50%; transform:translate(-50%,0); width:44px; height:48px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:14px; background:var(--ink); color:var(--bg); }
.pl-chest-lock .ic { width:25px; height:25px; }
.pl-chest-prize { position:absolute; z-index:1; top:34%; left:34%; width:32%; height:38%; border-radius:var(--r-card); background:var(--well); color:var(--accent); border:2px solid var(--accent); display:grid; place-items:center; opacity:0; }
.pl-chest-prize .ic { width:40px; height:40px; }
.pl-chest-spark { position:absolute; z-index:2; width:7px; height:14px; border-radius:4px; background:var(--accent); opacity:0; top:44%; left:49%; }
.pl-chest-spark.a { --dx:-100px; --dy:-100px; --spin:-40deg; }
.pl-chest-spark.b { --dx:98px; --dy:-115px; --spin:45deg; }
.pl-chest-spark.c { --dx:-110px; --dy:20px; --spin:-80deg; }
.pl-chest-spark.d { --dx:118px; --dy:14px; --spin:85deg; }
.pl-chest-tap:active:not(:disabled) .pl-chest-art { animation:none; transform:scale(.94) translateY(5px); }
.pl-bonus-closed.is-opening .pl-chest-art { animation:pl-chest-charge .94s linear both; }
.pl-bonus-closed.is-opening .pl-chest-lid { animation:pl-chest-lift .7s .24s var(--ease) both; }
.pl-bonus-closed.is-opening .pl-chest-half.left { animation:pl-chest-left .7s .24s var(--ease) both; }
.pl-bonus-closed.is-opening .pl-chest-half.right { animation:pl-chest-right .7s .24s var(--ease) both; }
.pl-bonus-closed.is-opening .pl-chest-prize { animation:pl-chest-prize .7s .24s var(--ease) both; }
.pl-bonus-closed.is-opening .pl-chest-spark { animation:pl-chest-spark .6s .24s var(--ease) both; }
.pl-bonus-closed.is-opening .pl-chest-heading { opacity:0; transform:translateY(-8px); transition:opacity .2s,transform .2s; }
.pl-bonus-closed.is-opening .pl-chest-art::after { opacity:0; transition:opacity .4s; }
.pl-bonus-content { width:100%; margin:auto 0; padding:16px 0 24px; }
.pl-bonus-label { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 20px; font-size:16px; line-height:24px; color:var(--accent-text); }
.pl-bonus-label .ic { width:22px; height:22px; }
.pl-bonus-card { padding:28px 24px; border-radius:var(--r-card); background:var(--well); }
.pl-bonus-card .pl-title { text-align:center; margin:0 0 24px; text-wrap:balance; }
.pl-bonus-card .pl-text { font-size:16px; line-height:1.5; }
.pl-bonus-card .pl-text > :last-child { margin-bottom:0; }
.pl-bonus-scale { display:flex; flex-direction:column; gap:16px; }
.pl-bonus-scale-row { display:flex; align-items:center; gap:16px; font-size:16px; line-height:22px; }
.pl-bonus-scale-row > b { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:20px; font-weight:500; color:var(--ink-2); background:var(--bg); }
.pl-bonus-scale-row.key > b { color:var(--accent-ink); background:var(--accent); }
.pl-bonus-scale-row span { display:block; }
.pl-bonus-scale-row small { display:block; margin-top:2px; font-size:13px; line-height:18px; color:var(--ink-2); }
.pl-bonus-reveal { animation:pl-bonus-reveal .5s var(--ease) both; }
@keyframes pl-chest-breathe { 0%,100% { transform:translateY(3px) scale(1); } 50% { transform:translateY(-7px) scale(1.035); } }
@keyframes pl-chest-charge { 0% { transform:scale(.96); } 12% { transform:translateY(5px) scale(1.04,.91) rotate(-2deg); } 20% { transform:translateY(3px) scale(.98,.94) rotate(2deg); } 26% { transform:scale(1.06); } 42%,100% { transform:none; } }
@keyframes pl-chest-lift { 0% { transform:none; } 50% { transform:translate(-12%,-95%) rotate(-17deg); opacity:1; } 100% { transform:translate(-24%,-145%) rotate(-30deg) scale(.88); opacity:0; } }
@keyframes pl-chest-left { to { transform:translate(-30%,26%) rotate(-18deg); opacity:0; } }
@keyframes pl-chest-right { to { transform:translate(30%,26%) rotate(18deg); opacity:0; } }
@keyframes pl-chest-prize { 0% { transform:translateY(18px) scale(.6); opacity:0; } 40% { opacity:1; } 100% { transform:translateY(-28px) scale(1.9); opacity:0; } }
@keyframes pl-chest-spark { 0% { opacity:0; transform:scale(.4); } 15% { opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) rotate(var(--spin)); opacity:0; } }
@keyframes pl-bonus-reveal { from { opacity:0; transform:translateY(16px) scale(.94); } to { opacity:1; transform:none; } }
@media (max-width:350px) { .pl-bonus-card { padding:24px 18px; } .pl-bonus-scale-row { gap:12px; } }
@media (max-height:660px) { .pl-bonus-closed { min-height:340px; padding-top:4px; } .pl-chest-tap { min-height:260px; } .pl-chest-art { width:min(240px,80vw); } }
@media (prefers-reduced-motion:reduce) { .pl-chest-art,.pl-chest-lid,.pl-chest-half,.pl-chest-prize,.pl-chest-spark,.pl-bonus-reveal { animation:none !important; } .pl-chest-heading,.pl-chest-art::after { transition:none !important; } }
.pl-reward-reason { margin:0 auto 16px; max-width:300px; padding:12px 16px; border-radius:var(--r-row); background:var(--well); text-align:center; }
.pl-reward-reason b { font-size:14px; font-weight:600; color:var(--ink); }
.pl-reward-reason p { font-size:13px; line-height:1.45; color:var(--ink-2); margin:5px 0 0; }
.tp-wheel .ob-chips {
margin-top: 0;
}
.tp-wheel .ob-chips + .wheel {
margin-top: 12px;
}
#sheet .tp-wheel {
margin: 0 0 16px;
}
#sheet .tp-wheel .wheel {
margin-top: 4px;
}
.opt .opt-usual {
flex: none;
margin-left: auto;
padding-left: 8px;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: var(--ink-2);
}
.rc-ask {
margin: 0 0 16px;
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.rc-q {
display: block;
font-size: 17px;
line-height: 24px;
font-weight: 600;
color: var(--ink);
}
.rc-sub,
.rc-done {
margin: 4px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.rc-done {
margin: 0;
color: var(--ink);
}
.rc-btns {
display: flex;
gap: 8px;
margin-top: 12px;
}
.rc-btns .btn {
flex: 1 1 0;
}
.payments .list,
.payments .pm-group {
margin-bottom: 16px;
}
.pm-group .list {
margin-bottom: 8px;
}
.rc-row .txt b {
font-weight: 500;
}
.rc-change {
display: inline;
margin-top: 2px;
padding: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: left;
}
.ptr-card {
display: flex;
flex-direction: column;
gap: 6px;
}
.ptr-card.new {
box-shadow: inset 0 0 0 1.5px var(--ink);
}
.ptr-top {
display: flex;
align-items: center;
gap: 8px;
}
.ptr-sum {
font-size: 24px;
line-height: 30px;
font-weight: 600;
letter-spacing: -0.4px;
color: var(--ink);
}
.ptr-code,
.ptr-want {
padding: 2px 10px;
border-radius: 12px;
font-size: 14px;
line-height: 20px;
color: var(--ink);
background: var(--bg);
font-variant-numeric: tabular-nums;
}
.ptr-want.on {
color: var(--btn-ink);
background: var(--btn);
}
.ptr-want.off {
color: var(--ink-2);
}
.ptr-dot {
width: 8px;
height: 8px;
margin-left: auto;
border-radius: 50%;
background: var(--ink);
}
.ptr-who {
align-self: flex-start;
padding: 0;
border: 0;
font: inherit;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
background: none;
text-align: left;
text-decoration: underline;
text-decoration-color: var(--line);
text-underline-offset: 3px;
cursor: pointer;
}
.ptr-who[disabled] {
text-decoration: none;
cursor: default;
}
.ptr-line,
.ptr-hint {
margin: 0;
font-size: 15px;
line-height: 21px;
color: var(--ink);
}
.ptr-line.muted,
.ptr-hint {
color: var(--ink-2);
}
.ptr-line .icon {
width: 16px;
height: 16px;
vertical-align: -3px;
}
.ptr-photos {
display: flex;
gap: 8px;
margin-top: 4px;
overflow-x: auto;
}
.ptr-photo {
width: 96px;
height: 128px;
border-radius: 12px;
object-fit: cover;
background: var(--bg);
cursor: zoom-in;
}
.ptr-attachment { flex: 0 0 auto; }
.ptr-photo.broken {
display: grid;
place-items: center;
font-size: 12px;
color: var(--ink-2);
}
.ptr-acts {
display: flex;
gap: 8px;
margin-top: 8px;
}
.ptr-acts .btn {
flex: 1 1 0;
}
.ptr-attach {
display: flex;
gap: 8px;
margin-top: 8px;
}
.ptr-input {
flex: 1 1 auto;
min-width: 0;
height: 40px;
padding: 0 12px;
border: 0;
border-radius: 12px;
font: inherit;
font-size: 16px;
color: var(--ink);
background: var(--bg);
outline: none;
}
.ptr-input::placeholder {
color: var(--ink-3);
}
.ptr-input:focus {
box-shadow: inset 0 0 0 1.5px var(--ink);
}
.ptr-attach .btn.small {
flex: none;
min-height: 40px;
border-radius: 12px;
white-space: nowrap;
}
.ptr-steps ol {
margin: 8px 0 8px;
padding-left: 20px;
font-size: 15px;
line-height: 21px;
color: var(--ink);
}
.ptr-steps li + li {
margin-top: 6px;
}
.ptr-steps .link-btn {
padding: 0;
font-size: 15px;
}
.adm-facts .item.static {
gap: 12px;
min-height: 48px;
padding-top: 12px;
padding-bottom: 12px;
}
.adm-facts .txt span {
color: var(--ink-2);
}
.adm-facts .val {
max-width: 60%;
font-weight: 500;
color: var(--ink);
text-align: right;
white-space: normal;
}
.adm-threads {
margin: 8px 0 16px;
}
.adm-talk {
display: flex;
flex-direction: column;
gap: 8px;
}
.adm-msg {
max-width: 86%;
padding: 8px 12px;
border-radius: 16px;
background: var(--well);
}
.adm-msg.out {
align-self: flex-end;
color: var(--btn-ink);
background: var(--btn);
}
.adm-msg.out p {
color: var(--btn-ink);
}
.adm-msg.out .adm-msg-who {
color: var(--btn-ink);
opacity: 0.62;
}
.adm-msg-who {
display: block;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.adm-msg p {
margin: 2px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ptr-card {gap:16px}
.ptr-meta {display:grid;gap:4px}
.ptr-card p {margin:0}
.ptr-card .ptr-photos {margin-top:12px}
.ptr-body > .note {margin-bottom:16px}
.fnd-kind {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: 12px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
background: var(--bg);
}
.fnd-kind i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ib-pink);
}
.fnd-kind.idea i {
background: var(--ib-violet);
}
.fnd-reason {
min-width: 0;
overflow: hidden;
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
}
.fnd-code {
flex: 0 0 auto;
margin-left: auto;
}
.fnd-words {
font-size: 16px;
line-height: 22px;
color: var(--ink);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ptr-line.fnd-tech {
font-size: 13px;
line-height: 18px;
overflow-wrap: anywhere;
}
.fnd-quote {
margin: 0 0 12px;
padding: 12px 14px;
border-radius: var(--r-row);
font-size: 15px;
line-height: 21px;
color: var(--ink);
background: var(--well);
}
.soc-card .soc-photo {
width: 100%;
height: auto;
max-height: 260px;
}
.soc-card .ptr-acts {
flex-wrap: wrap;
}
.soc-card .ptr-acts .btn {
flex: 1 1 120px;
}
.svt {
--sv-a: #8f37e4;
--sv-b: #6f1cc6;
--sv-ink: #ffffff;
--sv-ink-2: rgba(255, 255, 255, 0.86);
--sv-pill: #ffffff;
--sv-pill-ink: #1d1d1f;
--sv-opt: #ffffff;
--sv-opt-ink: #1d1d1f;
--sv-warm: #ffe8bd;
--sv-track: #5a12a8;
--sv-tint: #ebd9fb;
--sv-pale: #b98af0;
--sv-bar: #ffffff;
--sv-bar-track: rgba(255, 255, 255, 0.36);
--sv-btn: #ffffff;
--sv-btn-ink: #1d1d1f;
--sv-x: #ffffff;
--sv-x-ink: #1d1d1f;
--sv-shadow: rgba(20, 0, 50, 0.3);
--sv-dot-a: #ffffff;
--sv-dot-b: #fdc700;
--sv-dot-c: #ffd7ee;
}
.svt[data-theme="night"] {
--sv-a: #8f37e4;
--sv-b: #6f1cc6;
--sv-track: #5a12a8;
--sv-tint: #ebd9fb;
--sv-pale: #b98af0;
}
.svt[data-theme="dawn"] {
--sv-a: #e0338f;
--sv-b: #bf1b72;
--sv-track: #a1135f;
--sv-tint: #fbd9ea;
--sv-pale: #f08ac0;
--sv-shadow: rgba(80, 0, 40, 0.3);
}
.svt[data-theme="amber"] {
--sv-a: #e75a0f;
--sv-b: #c84508;
--sv-track: #ac3a05;
--sv-tint: #fde0cf;
--sv-pale: #f5a06b;
--sv-shadow: rgba(80, 20, 0, 0.32);
}
.svt[data-theme="mint"] {
--sv-a: #0b9b73;
--sv-b: #077f5c;
--sv-track: #066a4d;
--sv-tint: #d0f0e5;
--sv-pale: #6bd0b1;
--sv-shadow: rgba(0, 40, 25, 0.32);
}
.svt[data-theme="sky"] {
--sv-a: #2f7cf0;
--sv-b: #1b5fd1;
--sv-track: #144fb5;
--sv-tint: #d8e6fd;
--sv-pale: #8cb6f6;
--sv-shadow: rgba(0, 20, 80, 0.32);
}
.svt[data-theme="ink"],
.svt[data-theme="photo"] {
--sv-a: #333336;
--sv-b: #1b1b1e;
--sv-track: #3a3a3e;
--sv-tint: #e6e6ea;
--sv-pale: #5c5c62;
--sv-shadow: rgba(0, 0, 0, 0.5);
}
.svt[data-theme="course"] {
--sv-a: #8f37e4;
--sv-b: #6f1cc6;
--sv-track: #5a12a8;
--sv-tint: #ebd9fb;
--sv-pale: #b98af0;
}
:root[data-course="focus"] .svt[data-theme="course"] {
--sv-a: #2f7cf0;
--sv-b: #1b5fd1;
--sv-track: #144fb5;
--sv-tint: #d8e6fd;
--sv-pale: #8cb6f6;
--sv-shadow: rgba(0, 20, 80, 0.32);
}
:root[data-course="stress"] .svt[data-theme="course"] {
--sv-a: #0a8696;
--sv-b: #076573;
--sv-track: #055560;
--sv-tint: #cdebef;
--sv-pale: #6ec3cd;
--sv-shadow: rgba(0, 35, 40, 0.32);
}
:root[data-course="food"] .svt[data-theme="course"] {
--sv-a: #e5620f;
--sv-b: #c34e0a;
--sv-track: #a84307;
--sv-tint: #fde2d0;
--sv-pale: #f5a874;
--sv-shadow: rgba(80, 20, 0, 0.32);
}
:root[data-course="energy"] .svt[data-theme="course"] {
--sv-a: #4f8a0e;
--sv-b: #3e6f08;
--sv-track: #335c06;
--sv-tint: #deedc9;
--sv-pale: #9cc464;
--sv-shadow: rgba(20, 40, 0, 0.32);
}
:root[data-course="move"] .svt[data-theme="course"] {
--sv-a: #e0338f;
--sv-b: #bf1b72;
--sv-track: #a1135f;
--sv-tint: #fbd9ea;
--sv-pale: #f08ac0;
--sv-shadow: rgba(80, 0, 40, 0.3);
}
:root[data-course="teeth"] .svt[data-theme="course"] {
--sv-a: #0f9060;
--sv-b: #0b7650;
--sv-track: #096443;
--sv-tint: #cdeee0;
--sv-pale: #6ccaa6;
--sv-shadow: rgba(0, 40, 25, 0.32);
}
.svt[data-theme="paper"] {
--sv-a: #ffffff;
--sv-b: #ffffff;
--sv-ink: #1d1d1f;
--sv-ink-2: #6e6e73;
--sv-pill: #f4f4f4;
--sv-pill-ink: #1d1d1f;
--sv-opt: #f4f4f4;
--sv-opt-ink: #1d1d1f;
--sv-warm: #ffe8bd;
--sv-track: #e4e4e4;
--sv-tint: #dcdcdc;
--sv-pale: #d6d6d6;
--sv-bar: #1d1d1f;
--sv-bar-track: rgba(0, 0, 0, 0.14);
--sv-btn: #1d1d1f;
--sv-btn-ink: #ffffff;
--sv-x: #f4f4f4;
--sv-x-ink: #1d1d1f;
--sv-shadow: rgba(0, 0, 0, 0.16);
--sv-dot-a: #1d1d1f;
--sv-dot-b: #fdc700;
--sv-dot-c: #a1a1a1;
}
.stories {
display: flex;
gap: 14px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
scroll-snap-type: x proximity;
scroll-padding: 0 var(--gutter);
margin: 12px calc(-1 * var(--gutter)) 22px;
padding: 2px var(--gutter);
}
.stories::-webkit-scrollbar {
display: none;
}
.st {
appearance: none;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 76px;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font-size: 12px;
line-height: 16px;
font-weight: 500;
scroll-snap-align: start;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.st-ring {
--ring: 3px;
--gap: 3px;
position: relative;
display: block;
width: 72px;
height: 72px;
padding: var(--ring);
border-radius: 50%;
background: linear-gradient(140deg, var(--accent) 10%, var(--ib-amber) 95%);
transition: transform 0.16s var(--ease);
}
.st.seen .st-ring {
--ring: 1px;
--gap: 5px;
background: var(--ink-4);
}
.st:active .st-ring {
transform: scale(0.94);
}
.st-gap {
display: block;
width: 100%;
height: 100%;
padding: var(--gap);
border-radius: 50%;
background: var(--bg);
}
.st-face {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
background: linear-gradient(180deg, var(--sv-a), var(--sv-b));
}
.st-face img {
display: block;
object-fit: contain;
-webkit-user-drag: none;
}
.st-face .sv-c-obj {
width: 82%;
height: 82%;
margin-top: 2%;
filter: drop-shadow(0 3px 4px var(--sv-shadow));
}
.st-face .sv-c-orb {
width: 92%;
height: 92%;
}
.st-face .sv-c-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.st-face .sv-c-emoji {
font-size: 30px;
line-height: 1;
}
.st-l {
max-width: 76px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.st.seen .st-l {
color: var(--ink-2);
}
.st-n {
position: absolute;
top: -2px;
right: -2px;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--ink);
color: var(--bg);
font-size: 12px;
line-height: 20px;
text-align: center;
box-shadow: 0 0 0 2px var(--bg);
}
.story-view {
--sv-top: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
position: fixed;
inset: 0;
z-index: 95;
display: flex;
flex-direction: column;
overflow: hidden;
background: #000000;
color: #ffffff;
user-select: none;
-webkit-user-select: none;
touch-action: none;
overscroll-behavior: contain;
}
.story-view.opening {
animation: sv-open 0.28s var(--spring) both;
transform-origin: var(--ox, 50%) var(--oy, 22%);
}
.story-view.out {
animation: sv-out 0.22s ease both;
pointer-events: none;
}
@keyframes sv-open {
from {
transform: scale(0.16);
opacity: 0;
border-radius: 40px;
}
}
@keyframes sv-out {
to {
transform: translateY(36px) scale(0.94);
opacity: 0;
}
}
.sv-deck {
position: relative;
z-index: 1;
flex: 1;
min-height: 0;
perspective: 1400px;
}
.sv-card {
position: absolute;
inset: var(--sv-top) 0 0;
overflow: hidden;
border-radius: min(24px, var(--sv-top)) min(24px, var(--sv-top)) 24px 24px;
color: var(--sv-ink);
background: var(--sv-b);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
transform-origin: 50% 50%;
}
.sv-card.drag {
transition: none;
}
.sv-card.snap {
transition: transform 0.3s var(--ease);
}
.sv-shade {
position: absolute;
inset: 0;
z-index: 6;
background: #000000;
opacity: var(--sh, 0);
pointer-events: none;
}
.sv-bg {
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--sv-a), var(--sv-b));
}
.sv-photo {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
}
.sv-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.38) 24%, rgba(0, 0, 0, 0) 52%,
rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.6) 100%);
}
.svt[data-theme="photo"] .sv-stage {
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}
.sv-top {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
padding: 10px 16px 0;
}
.sv-bars {
display: flex;
gap: 4px;
transition: opacity 0.2s ease;
}
.sv-card.paused .sv-bars {
opacity: 0.4;
}
.sv-bars i {
flex: 1;
height: 3px;
overflow: hidden;
border-radius: 2px;
background: var(--sv-bar-track);
}
.sv-bars b {
display: block;
width: 0;
height: 100%;
background: var(--sv-bar);
transition: width 0.3s var(--ease);
}
.sv-bars i.done b {
width: 100%;
}
.sv-bars i.cur b {
width: 0;
animation: sv-bar var(--dur, 6s) linear forwards;
transition: none;
}
.sv-bars i.cur.wait b {
animation: none;
}
.sv-card.paused .sv-bars i.cur b {
animation-play-state: paused;
}
@keyframes sv-bar {
to {
width: 100%;
}
}
.sv-head {
display: flex;
align-items: center;
gap: 10px;
height: 40px;
margin-top: 12px;
}
.sv-head .st-face {
flex: none;
width: 32px;
height: 32px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.sv-head .st-face .sv-c-emoji {
font-size: 17px;
}
.sv-head p {
min-width: 0;
margin: 0;
overflow: hidden;
font-size: 14px;
line-height: 20px;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--sv-ink);
}
.sv-head p span {
color: var(--sv-ink-2);
font-weight: 400;
}
.sv-x {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
margin: 0 0 0 auto;
padding: 0;
border: 0;
border-radius: 12px;
background: var(--sv-x);
color: var(--sv-x-ink);
cursor: pointer;
}
.sv-x .ic {
width: 20px;
height: 20px;
stroke-width: 2.2;
}
.sv-x:active {
transform: scale(0.94);
}
.sv-stage {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
min-height: 0;
padding: 92px 24px 24px;
}
.sv-slide {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
animation: sv-in 0.4s var(--ease) both;
}
@keyframes sv-in {
from {
opacity: 0;
transform: translateY(12px);
}
}
.sv-copy {
flex: none;
}
.sv-slide.center > .sv-copy {
margin-top: auto;
margin-bottom: auto;
}
.sv-slide.center > .sv-copy + .sv-btn {
margin-top: 0;
}
.sv-kick {
margin: 0 0 10px;
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sv-ink);
opacity: 0.84;
}
.sv-title {
margin: 0;
font-size: clamp(27px, 4.1vh, 34px);
line-height: 1.12;
font-weight: 700;
letter-spacing: -0.02em;
text-wrap: balance;
overflow-wrap: break-word;
hyphens: manual;
}
.sv-text {
margin: 14px 0 0;
font-size: 17px;
line-height: 24px;
font-weight: 400;
color: var(--sv-ink);
opacity: 0.92;
text-wrap: pretty;
}
.sv-hero {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
margin: 8px -24px 0;
}
.sv-slide.top .sv-hero {
align-items: flex-end;
}
.sv-slide.bottom .sv-hero {
align-items: flex-start;
margin: 0 -24px 8px;
}
.sv-obj,
.sv-orb {
display: block;
width: auto;
height: auto;
max-width: 82%;
max-height: 100%;
object-fit: contain;
animation:
sv-float 6s ease-in-out infinite alternate,
sv-shift 0.5s var(--ease) both;
-webkit-user-drag: none;
}
.sv-obj {
filter: drop-shadow(0 22px 22px var(--sv-shadow));
}
.sv-orb {
max-width: 64%;
}
.sv-pic {
display: block;
max-width: 76%;
max-height: 100%;
border-radius: 24px;
object-fit: cover;
box-shadow: 0 22px 40px var(--sv-shadow);
}
@keyframes sv-float {
from {
transform: translateY(-6px);
}
to {
transform: translateY(6px);
}
}
.sv-pill {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 64%;
padding: 9px 16px;
border-radius: 999px;
background: var(--sv-pill);
color: var(--sv-pill-ink);
font-size: 16px;
line-height: 22px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 6px 16px var(--sv-shadow);
opacity: 0;
transition: opacity 0.3s ease 0.15s;
animation: sv-pill 5s ease-in-out infinite alternate;
animation-delay: var(--ph, 0s);
}
.sv-pill.on {
opacity: 1;
}
.sv-pill.p0 {
--rot: -6deg;
--ph: -1s;
}
.sv-pill.p1 {
--rot: 5deg;
--ph: -2.6s;
}
.sv-pill.p2 {
--rot: 4deg;
--ph: -3.8s;
}
.sv-pill.p3 {
--rot: -5deg;
--ph: -0.4s;
}
@keyframes sv-pill {
from {
transform: translateY(-4px) rotate(var(--rot));
}
to {
transform: translateY(4px) rotate(var(--rot));
}
}
.sv-number {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.sv-big {
margin: 0;
font-size: 96px;
line-height: 1;
font-weight: 700;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
animation: sv-pop 0.6s var(--spring) both;
}
.sv-big .sv-of {
font-size: 34px;
font-weight: 600;
letter-spacing: 0;
color: var(--sv-ink-2);
}
@keyframes sv-pop {
from {
opacity: 0;
transform: scale(0.8);
}
}
.sv-number .sv-title {
margin-top: 14px;
font-size: clamp(24px, 3.4vh, 28px);
line-height: 1.16;
}
.sv-spark {
display: flex;
align-items: flex-end;
gap: 6px;
height: 64px;
margin-top: 28px;
}
.sv-spark i {
flex: 1;
height: calc(var(--v, 0.5) * 100%);
min-height: 6px;
border-radius: 4px;
background: var(--sv-bar);
transform-origin: bottom;
animation: sv-grow 0.6s var(--ease) both;
animation-delay: calc(var(--k, 0) * 40ms + 150ms);
}
.sv-scale {
height: 10px;
margin-top: 28px;
overflow: hidden;
border-radius: 5px;
background: var(--sv-track);
}
.sv-scale b {
display: block;
width: calc(var(--v, 0.5) * 100%);
height: 100%;
border-radius: 5px;
background: var(--sv-bar);
animation: sv-wide 0.8s var(--ease) both;
animation-delay: 0.15s;
}
.sv-scale-cap {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 14px;
line-height: 20px;
color: var(--sv-ink);
opacity: 0.86;
}
@keyframes sv-wide {
from {
width: 0;
}
}
@keyframes sv-grow {
from {
transform: scaleY(0.04);
}
}
.sv-chart {
position: relative;
flex: none;
display: flex;
align-items: flex-end;
gap: 10px;
height: min(44vh, 340px);
margin-top: auto;
}
.sv-slide.bottom .sv-chart {
margin-top: 0;
}
.sv-slide.k-chart > .sv-copy {
margin-bottom: 24px;
}
.sv-slide.k-chart.bottom > .sv-copy {
margin: auto 0 0;
}
.sv-chart .col {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 8px;
height: 100%;
}
.sv-chart .bar {
width: 100%;
min-height: 4px;
border-radius: 8px;
background: var(--sv-pale);
transform-origin: bottom;
animation: sv-grow 0.6s var(--ease) both;
animation-delay: calc(var(--k, 0) * 60ms + 120ms);
}
.sv-chart .bar.hot {
background: var(--sv-bar);
}
.sv-chart small {
font-size: 12px;
line-height: 16px;
color: var(--sv-ink);
opacity: 0.86;
}
.sv-goal {
position: absolute;
left: 0;
right: 0;
border-top: 2px dashed var(--sv-ink);
opacity: 0.7;
pointer-events: none;
}
.sv-legend {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--sv-ink);
opacity: 0.86;
}
.sv-legend i {
width: 18px;
border-top: 2px dashed var(--sv-ink);
}
.sv-answer {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.sv-answer .sv-hero {
margin-top: 4px;
margin-bottom: 4px;
}
.sv-answer .sv-obj {
max-width: 56%;
}
.sv-answer .sv-orb {
max-width: 44%;
}
.sv-opts {
flex: none;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: 18px;
}
.sv-opt {
appearance: none;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 56px;
margin: 0;
padding: 0 22px;
overflow: hidden;
border: 0;
border-radius: 28px;
background: var(--sv-opt);
color: var(--sv-opt-ink);
font-size: 17px;
line-height: 22px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition:
transform 0.14s var(--ease),
opacity 0.3s ease,
background-color 0.2s ease;
}
.sv-opt:active {
transform: scale(0.98);
}
.sv-opt span {
min-width: 0;
}
.sv-opt .sv-tick {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--sv-b);
color: #ffffff;
animation: sv-pop 0.4s var(--spring) both;
}
.svt[data-theme="paper"] .sv-opt .sv-tick {
background: #1d1d1f;
}
.sv-opt .sv-tick .ic {
width: 16px;
height: 16px;
stroke-width: 2.6;
}
.sv-opts.done .sv-opt {
pointer-events: none;
}
.sv-opts.done .sv-opt:not(.right):not(.pick) {
background: var(--sv-pale);
color: rgba(29, 29, 31, 0.56);
}
.sv-opt.pick:not(.right) {
background: var(--sv-warm);
animation: sv-shake 0.42s ease both;
}
.sv-opt.right {
animation: sv-bump 0.4s var(--spring) both;
}
@keyframes sv-shake {
0%,
100% {
transform: translateX(0);
}
22% {
transform: translateX(-7px);
}
48% {
transform: translateX(6px);
}
72% {
transform: translateX(-3px);
}
}
@keyframes sv-bump {
from {
transform: scale(0.97);
}
}
.sv-result {
flex: none;
margin: 26px 0 0;
animation: sv-in 0.4s var(--ease) both;
}
.sv-result b {
display: block;
font-size: 22px;
line-height: 28px;
font-weight: 700;
letter-spacing: -0.01em;
}
.sv-result p {
margin: 8px 0 0;
font-size: 17px;
line-height: 24px;
opacity: 0.92;
text-wrap: pretty;
}
.sv-slide.answered .sv-kick {
margin-bottom: 6px;
}
.sv-slide.answered .sv-title {
font-size: clamp(22px, 3.2vh, 26px);
line-height: 1.16;
}
.sv-slide.answered .sv-text {
display: none;
}
.sv-slide.has-shares:not(.k-poll) .sv-hero {
display: none;
}
.sv-slide.answered .sv-answer .sv-obj {
max-width: 48%;
}
.sv-slide.answered .sv-answer .sv-orb {
max-width: 38%;
}
.sv-slide.answered .sv-opt {
min-height: 48px;
}
.sv-slide.answered .sv-opts {
gap: 8px;
padding-top: 14px;
}
.sv-slide.fit1 .sv-result {
margin-top: 16px;
}
.sv-slide.fit1 .sv-result p {
font-size: 16px;
line-height: 22px;
}
.sv-slide.fit1 .sv-opt {
min-height: 42px;
}
.sv-slide.fit1 .sv-opts {
gap: 6px;
padding-top: 10px;
}
.sv-slide.fit1 .sv-shares {
margin-top: 12px;
}
.sv-slide.fit1 .sv-shares h4 {
margin-bottom: 6px;
}
.sv-slide.fit1 .sv-share {
margin-top: 6px;
}
.sv-slide.fit2 .sv-kick {
display: none;
}
.sv-slide.fit2 .sv-result {
margin-top: 12px;
}
.sv-slide.fit2 .sv-opt {
min-height: 38px;
font-size: 16px;
}
.sv-slide.fit2 .sv-shares h4 {
display: none;
}
.sv-slide.fit2 .sv-share i {
height: 4px;
margin-top: 2px;
}
.sv-slide.fit2 .sv-share {
margin-top: 4px;
}
.sv-slide.fit3 .sv-shares {
display: none;
}
.sv-shares {
flex: none;
margin-top: 18px;
animation: sv-in 0.45s var(--ease) both;
}
.sv-shares h4 {
margin: 0 0 10px;
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.84;
}
.sv-share {
margin-top: 9px;
}
.sv-share div {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 14px;
line-height: 20px;
}
.sv-share div b {
font-weight: 600;
}
.sv-share i {
display: block;
height: 6px;
margin-top: 4px;
overflow: hidden;
border-radius: 3px;
background: var(--sv-track);
}
.sv-share i b {
display: block;
width: calc(var(--v, 0) * 1%);
height: 100%;
border-radius: 3px;
background: var(--sv-bar);
animation: sv-wide 0.8s var(--ease) both;
animation-delay: 0.2s;
}
.sv-share.mine div {
font-weight: 600;
}
.sv-shares.solo {
margin-top: auto;
}
.sv-thanks {
margin: 14px 0 0;
font-size: 17px;
line-height: 24px;
animation: sv-in 0.4s var(--ease) both;
}
.sv-myth {
flex: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: auto;
padding-top: 18px;
}
.sv-myth .sv-opt {
min-height: 108px;
justify-content: center;
border-radius: 28px;
font-size: 22px;
line-height: 28px;
font-weight: 700;
letter-spacing: -0.01em;
text-align: center;
}
.sv-myth .sv-opt .sv-tick {
position: absolute;
top: 12px;
right: 12px;
}
.sv-slide.answered .sv-myth .sv-opt {
min-height: 64px;
}
.sv-conf {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
z-index: 8;
pointer-events: none;
}
.sv-conf i {
position: absolute;
left: -4px;
top: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c, #ffffff);
animation: sv-conf 0.6s cubic-bezier(0.15, 0.7, 0.3, 1) both;
}
.sv-conf i:nth-child(3n) {
width: 6px;
height: 10px;
border-radius: 2px;
}
@keyframes sv-conf {
0% {
opacity: 1;
transform: translate(0, 0) rotate(0) scale(0.6);
}
70% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 120deg)) scale(1);
}
}
.sv-breathe {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
}
.sv-ring {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: min(268px, 68vw);
height: min(268px, 68vw);
border-radius: 50%;
box-shadow: inset 0 0 0 2px var(--sv-bar);
}
.sv-disc {
display: flex;
align-items: center;
justify-content: center;
width: 66%;
height: 66%;
border-radius: 50%;
background: var(--sv-bar);
color: var(--sv-b);
transform: scale(1);
transition: transform 6s cubic-bezier(0.45, 0, 0.35, 1);
}
.sv-disc.in {
transform: scale(1.5);
transition-duration: 4s;
}
.sv-disc b {
font-size: 20px;
line-height: 26px;
font-weight: 700;
}
.svt[data-theme="paper"] .sv-disc {
color: #ffffff;
}
.sv-count {
margin: 22px 0 0;
min-height: 24px;
font-size: 14px;
line-height: 20px;
opacity: 0.86;
}
.sv-btn {
appearance: none;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 56px;
margin: 20px 0 0;
padding: 0 24px;
border: 0;
border-radius: 28px;
background: var(--sv-btn);
color: var(--sv-btn-ink);
font-size: 17px;
line-height: 22px;
font-weight: 600;
cursor: pointer;
transition: transform 0.14s var(--ease);
}
.sv-btn:active {
transform: scale(0.98);
}
.sv-btn.dark {
background: #1d1d1f;
color: #ffffff;
}
.svt[data-theme="ink"] .sv-btn.dark,
.svt[data-theme="photo"] .sv-btn.dark {
background: #ffffff;
color: #1d1d1f;
}
.sv-btn.accent {
background: var(--accent);
color: var(--accent-ink);
}
.svt:not([data-theme="ink"]):not([data-theme="paper"]):not([data-theme="photo"]) .sv-btn.accent {
background: #ffffff;
color: var(--sv-b);
}
.sv-btn.ghost {
background: transparent;
color: var(--sv-ink);
box-shadow: inset 0 0 0 2px var(--sv-ink);
}
.sv-slide .sv-btn + .sv-btn {
margin-top: 10px;
}
.sv-strip {
position: relative;
z-index: 0;
flex: none;
display: flex;
align-items: center;
justify-content: center;
height: calc(64px + var(--safe-b));
padding: 0 16px var(--safe-b);
background: #000000;
}
.sv-next {
appearance: none;
display: flex;
align-items: center;
gap: 10px;
max-width: 100%;
height: 44px;
padding: 0 18px 0 6px;
border: 0;
border-radius: 22px;
background: #1f1f21;
color: #ffffff;
font-size: 15px;
line-height: 20px;
font-weight: 500;
cursor: pointer;
transition: transform 0.14s var(--ease);
}
.sv-next:active {
transform: scale(0.97);
}
.sv-next .st-face {
flex: none;
width: 32px;
height: 32px;
}
.sv-next .st-face .sv-c-emoji {
font-size: 17px;
}
.sv-next span {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sv-next span b {
font-weight: 600;
}
.sv-next .ic {
flex: none;
width: 18px;
height: 18px;
margin-left: 2px;
opacity: 0.8;
}
.sv-next.plain {
padding-left: 22px;
}
.sv-slide.fwd {
--dx: 26px;
}
.sv-slide.back {
--dx: -26px;
}
@keyframes sv-shift {
from {
opacity: 0;
translate: var(--dx, 0px) 0;
}
}
@media (min-width: 560px) {
.story-view {
align-items: center;
}
.sv-deck,
.sv-strip {
width: 480px;
max-width: 100%;
}
.sv-card {
border-radius: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.story-view,
.story-view.out,
.sv-slide,
.sv-obj,
.sv-orb,
.sv-pill,
.sv-big,
.sv-spark i,
.sv-chart .bar,
.sv-share i b,
.sv-scale b {
animation: none !important;
}
.sv-disc,
.sv-disc.in {
transition-duration: 0.01s;
}
}
.sv-c-icon { display: grid; place-items: center; width: 100%; height: 100%; color: var(--sv-ink, var(--ink)); }
.sv-c-icon .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.companion-preview { position:fixed; inset:0; z-index:240; isolation:isolate; display:flex; align-items:center; justify-content:center; padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); box-sizing:border-box; color:var(--ink); }
.cp-shade { position:absolute; inset:0; z-index:-1; background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:cp-shade-in 340ms ease both; }
.cp-panel { position:relative; width:min(100%,440px); max-height:100%; overflow:auto; overscroll-behavior:contain; box-sizing:border-box; padding:28px 24px 20px; border-radius:32px; background:var(--bg); box-shadow:var(--sheet-shadow); display:flex; flex-direction:column; gap:20px; animation:cp-arrive 440ms cubic-bezier(.22,1,.36,1) both; }
.cp-panel > * { flex-shrink:0; min-width:0; }
.cp-panel h2 { margin:0; font-size:24px; line-height:1.3; text-align:center; padding-inline:6px; }
.cp-example { margin:0 34px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.cp-close { position:absolute; top:16px; right:12px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--ink); display:grid; place-items:center; }
.cp-orb { display:grid; place-items:center; height:104px; color:var(--accent-text); }
.cp-state { margin:0; font-size:15px; line-height:1.5; color:var(--muted); text-align:center; }
.cp-record-time { display:block; margin:0; text-align:center; font-size:24px; line-height:1.4; }
.cp-capture-note { margin:0; text-align:center; color:var(--muted); font-size:12px; line-height:1.5; }
.cp-capture .cp-orb { transition:transform 160ms ease-out; }
.cp-content:empty { display:none; }
.cp-actions { display:grid; gap:12px; }
.cp-actions .btn { width:100%; margin:0; }
.cp-thought { margin:0; font-size:20px; line-height:1.45; text-align:center; }
.cp-answer { margin:0; font-size:17px; line-height:1.6; }
.cp-content textarea { width:100%; min-height:112px; box-sizing:border-box; resize:none; }
.cp-situations { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-situation { display:flex; flex-direction:column; gap:10px; text-align:left; padding:16px; min-width:0; border:0; border-radius:20px; background:var(--surface); color:var(--ink); font:inherit; }
.cp-situation .bubble { width:32px; height:32px; }
.cp-situation .bubble .ic { width:20px; height:20px; }
.cp-situation b { font-size:16px; line-height:1.35; }
.cp-situation .cp-hint { color:var(--muted); font-size:14px; line-height:1.4; }
.cp-sos .cp-orb { display:none; }
.cp-sos.cp-compact .cp-situations { grid-template-columns:1fr; }
.cp-sos.cp-compact .cp-situation { display:grid; grid-template-columns:32px 1fr; column-gap:14px; row-gap:4px; align-items:center; }
.cp-sos.cp-compact .cp-situation .bubble { grid-row:span 2; }
.cp-bottom { align-items:flex-end; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.cp-bottom .cp-panel { border-radius:32px; }
.cp-keyboard .cp-panel { gap:14px; }
.cp-keyboard .cp-orb { display:none; }
.cp-leaving .cp-panel { animation:cp-depart 220ms ease both; }
.cp-leaving .cp-shade { animation:cp-shade-in 220ms ease reverse both; }
@keyframes cp-arrive { from { opacity:0; transform:translateY(20px) scale(.96); filter:blur(4px); } to {opacity:1; transform:none; filter:blur(0);} }
@keyframes cp-depart { to { opacity:0; transform:translateY(12px) scale(.98); } }
@keyframes cp-shade-in { from {opacity:0;} to {opacity:1;} }
@media(max-width:350px) { .companion-preview { padding-inline:12px; } .cp-panel {padding:24px 18px 18px;gap:16px;} .cp-situation {padding:12px;} .cp-situation b {font-size:15px;} }
@media(prefers-reduced-motion:reduce) { .companion-preview *, .companion-preview { animation:none!important; transition:none!important; } }
.cp-reduced, .cp-reduced * { animation:none!important; transition:none!important; }
.interface-lab { display:grid; gap:20px; }
.cp-voice.cp-center .cp-panel { background:transparent; box-shadow:none; }
.cp-voice.cp-bottom .cp-orb { height:84px; justify-items:start; }
.cp-voice.cp-bottom h2, .cp-voice.cp-bottom .cp-state { text-align:left; }
.cp-voice.cp-bottom {padding:24px 20px calc(32px + env(safe-area-inset-bottom))}
.cp-voice.cp-bottom .cp-panel {background:transparent;box-shadow:none;border-radius:0;padding:24px 4px 0;gap:14px;overflow:visible;animation:cp-rise 640ms var(--ease) both}
.cp-voice.cp-bottom .cp-close {top:0;right:0;background:var(--well);color:var(--ink)}
.cp-voice.cp-bottom .cp-example {order:9;margin:2px 0 0;text-align:center}
.cp-voice.cp-bottom .cp-orb {height:156px;justify-items:center;position:relative;isolation:isolate;margin:6px 0 12px}
.cp-voice.cp-bottom .cp-orb:before {content:"";position:absolute;z-index:-1;width:128px;height:64px;border-radius:50%;background:var(--accent);filter:blur(32px);opacity:.12;animation:cp-ripple 820ms var(--ease) both}
.cp-voice.cp-bottom .ld-ring {scale:1.65;animation:ld-beat-orb 1.6s var(--ease) 1.1s 1}
.cp-voice.cp-bottom .ld-eyes {animation:ld-eyes-in .3s ease-out .95s both,ld-blink 3.2s ease-in-out 1.6s 1}
.cp-voice.cp-bottom h2,.cp-voice.cp-bottom .cp-state {text-align:center}
.cp-voice.cp-bottom .cp-state {max-width:264px;align-self:center}
.cp-voice.cp-bottom .cp-actions {margin-top:12px;padding:10px;background:var(--bg);border-radius:28px;box-shadow:var(--float-shadow)}
.cp-voice.cp-bottom[data-stage="ready"] .cp-actions {grid-template-columns:1.25fr 1fr;gap:8px}
.cp-voice.cp-bottom .cp-actions .btn {border-radius:20px;min-height:56px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;padding:12px 10px}
.cp-voice.cp-bottom:not([data-stage="ready"]) .cp-panel {overflow:auto}
.cp-voice.cp-bottom:not([data-stage="ready"]) .cp-orb {height:96px;margin:0}
.cp-voice.cp-bottom:not([data-stage="ready"]) .ld-ring {scale:1.2}
.cp-voice.cp-bottom .cp-answer,.cp-voice.cp-bottom .cp-thought {padding:20px;border-radius:24px;background:var(--bg)}
.cp-voice.cp-bottom.cp-keyboard .cp-panel {overflow:auto;gap:12px}
.cp-voice.cp-bottom.cp-keyboard .cp-orb {display:none}
.cp-voice.cp-bottom.cp-leaving .cp-panel {animation:cp-depart 220ms ease both}
.cp-sos.cp-center .cp-panel {padding:28px 20px 18px;gap:16px}
.cp-sos.cp-center .cp-situation {border-radius:22px;gap:6px;padding:18px 16px;min-height:142px;transition:transform 180ms var(--ease)}
.cp-sos.cp-center .cp-situation .bubble {width:40px;height:40px;margin-bottom:14px}
.cp-sos.cp-center .cp-situation:active {transform:scale(.96)}
.cp-sos.cp-center .cp-situation[data-tone="violet"] {background:color-mix(in srgb,var(--ib-violet) 13%,var(--bg))}
.cp-sos.cp-center .cp-situation[data-tone="sky"] {background:color-mix(in srgb,var(--ib-sky) 12%,var(--bg))}
.cp-sos.cp-center .cp-situation[data-tone="amber"] {background:color-mix(in srgb,var(--ib-amber) 13%,var(--bg))}
.cp-sos.cp-center .cp-situation[data-tone="green"] {background:color-mix(in srgb,var(--ib-green) 12%,var(--bg))}
.cp-sos.cp-center .cp-hint {font-size:12px;line-height:1.5}
@keyframes cp-rise {from{opacity:0;transform:translateY(60px) scale(.98);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cp-ripple {from{transform:translateY(36px) scale(1.8,.3);opacity:0}60%{opacity:.18}to{transform:none;opacity:.12}}
@media(max-width:350px){
.cp-voice.cp-bottom {padding-inline:12px;padding-bottom:20px}
.cp-voice.cp-bottom .cp-orb {height:132px;margin-bottom:4px}
.cp-voice.cp-bottom .cp-actions .btn {gap:6px;font-size:14px}
.cp-sos.cp-center .cp-panel {padding:24px 16px 16px}
.cp-sos.cp-center .cp-situation {padding:14px 12px;min-height:138px}
}
@media(max-height:600px){.cp-voice.cp-bottom .cp-panel{overflow:auto}.cp-voice.cp-bottom .cp-orb{height:92px;margin:0}.cp-voice.cp-bottom .ld-ring{scale:1.1}}
@media(prefers-reduced-motion:reduce){.cp-voice.cp-bottom .cp-orb:before{animation:none}}
.cp-reduced .cp-orb:before {animation:none!important}
.cp-float {padding:calc(20px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px)) 24px calc(24px + var(--safe-b));}
.cp-float .cp-panel {display:grid;grid-template-rows:44px minmax(220px,1fr) auto auto;width:min(100%,420px);height:100%;max-height:780px;padding:0;gap:16px;background:transparent;box-shadow:none;border-radius:0;overflow:auto;animation:cp-float-arrive 480ms var(--ease) both;}
.cp-float .cp-example {grid-row:1;min-height:44px;display:flex;align-items:center;max-width:calc(100% - 64px);font-size:12px;line-height:18px;}
.cp-float .cp-close {top:0;right:0;background:var(--well);}
.cp-float .cp-presence {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0;}
.cp-float .cp-orb {height:180px;min-height:180px;width:100%;}
.cp-float .ld-ring {scale:1.85;animation:none;}
.cp-float .ld-ring i {animation-iteration-count:1;}
.cp-float .ld-eyes {animation:ld-eyes-in .3s ease-out .55s both,ld-blink 5s ease-in-out 1.4s 1;}
.cp-float .cp-state {max-width:300px;justify-self:center;font-size:14px;line-height:20px;}
.cp-float .cp-actions {display:flex;gap:12px;align-items:center;justify-content:center;margin-top:8px;}
.cp-float .cp-actions .btn {flex:1;min-width:0;width:auto;border-radius:999px;font-size:16px;}
.cp-float .cp-content {width:100%;}
.cp-float .cp-thought {font-size:20px;line-height:28px;padding:16px 20px;background:var(--well);border-radius:24px 24px 8px 24px;margin:0;}
.cp-float.cp-reduced .ld-ring i {transform:translate(var(--x1),var(--y1));}
.cp-float .cp-entry-wave {position:absolute;pointer-events:none;inset:0;overflow:hidden;z-index:-1;}
.cp-float .cp-entry-wave:before {content:"";position:absolute;width:160%;height:75%;border:2px solid var(--accent);border-radius:50%;left:-30%;top:100%;animation:cp-floating-wave 820ms var(--ease) both;}
.cp-float[data-stage="processing"] .cp-thought-send {animation:cp-message-flight 500ms var(--ease) both;}
.cp-float[data-stage="answer"] .cp-panel {grid-template-rows:44px auto 1fr auto;}
.cp-float[data-stage="answer"] .cp-presence {display:grid;grid-template-columns:72px 1fr;grid-template-rows:auto auto;gap:4px 16px;align-items:center;}
.cp-float[data-stage="answer"] .cp-orb {height:72px;min-height:72px;width:72px;grid-row:1/3;justify-self:start;}
.cp-float[data-stage="answer"] .cp-content {align-self:start;}
.cp-float[data-stage="answer"] .ld-ring {scale:.8;}
.cp-float[data-stage="answer"] h2,.cp-float[data-stage="answer"] .cp-state {text-align:left;justify-self:start;padding:0;}
.cp-float .cp-reply {background:var(--bg);border-radius:8px 28px 28px;padding:24px;box-shadow:var(--float-shadow);}
.cp-float .cp-answer {font-size:17px;line-height:26px;margin:0;user-select:text;-webkit-user-select:text;}
.cp-float .cp-reply-time {display:block;text-align:right;color:var(--ink-2);font-size:12px;line-height:18px;margin-top:16px;}
.cp-float .cp-reply .btn {margin:12px 0 0;padding:8px 12px;font-size:14px;min-height:44px;width:auto;}
.cp-float .cp-copy-state {font-size:14px;line-height:20px;color:var(--ink-2);margin:8px 0 0;}
.cp-float .cp-copy-state:empty {display:none;}
.cp-float.cp-keyboard .cp-panel {grid-template-rows:44px auto 1fr auto;}
.cp-float.cp-keyboard .cp-orb {display:none;}
.cp-float.cp-leaving .cp-panel {animation:cp-depart 220ms ease both;}
@keyframes cp-float-arrive {from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cp-floating-wave {0%{transform:translateY(0) scale(.8);opacity:0}25%{opacity:.16}100%{transform:translateY(-190%) scale(1.1);opacity:0}}
@keyframes cp-message-flight {to{transform:translateY(-40px) scale(.85);opacity:0}}
@media(max-width:350px){.cp-float{padding-inline:20px}.cp-float .cp-panel{gap:12px}.cp-float .cp-thought{font-size:17px;line-height:24px}.cp-float .cp-reply{padding:20px}}
@media(max-height:620px){.cp-float .cp-panel{grid-template-rows:44px minmax(180px,1fr) auto auto;overflow:auto}.cp-float .cp-orb{height:100px;min-height:100px}.cp-float .ld-ring{scale:1.2}}
@media(prefers-reduced-motion:reduce){.cp-float .cp-entry-wave:before{animation:none;opacity:0}}
.cp-float.cp-reduced .cp-entry-wave:before{animation:none;opacity:0}
.cp-sos.cp-center .cp-situation[data-tone="blue"] {background:color-mix(in srgb,var(--ib-blue) 12%,var(--bg))}
.cp-sos.cp-center .cp-situation[data-tone="pink"] {background:color-mix(in srgb,var(--ib-pink) 12%,var(--bg))}
.sos-live .sos-top {display:flex;align-items:center;min-height:20px;margin:-8px 0 -4px}
.sos-live .sos-top .cp-example {margin:0;font-size:12px;line-height:16px;letter-spacing:.6px;text-transform:uppercase}
.sos-live .cp-close {top:6px;right:6px}
.sos-live .sos-more {margin:12px 0 0}
.sos-live .cp-content {display:flex;flex-direction:column}
.sos-live .cp-actions .btn.ghost {min-height:44px}
.ast-face {
display: block;
flex: none;
width: 52px;
height: 52px;
border-radius: 50%;
overflow: hidden;
}
.ast-face .st-face {
width: 100%;
height: 100%;
}
.ast-view > .btn {
margin-bottom: 18px;
}
.ast-row {
align-items: flex-start;
min-height: 0;
padding: 14px 16px;
}
.ast-row .txt {
gap: 1px;
}
.ast-row .txt b {
display: flex;
align-items: center;
gap: 8px;
}
.ast-row .txt .ast-resp {
margin-top: 3px;
color: var(--ink);
}
.ast-row .go {
align-self: center;
}
.item .txt .ast-pin,
.ast-pin {
display: inline-block;
padding: 0 7px;
border-radius: 8px;
background: var(--chip);
color: var(--ink-2);
font-size: 12px;
line-height: 20px;
font-weight: 500;
}
.ast-group {
margin: 0 0 26px;
}
.ast-group > h2 {
margin: 0 0 12px;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.ast-note {
margin: -4px 0 14px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.ast-field {
display: block;
margin: 0 0 16px;
}
.ast-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 8px;
}
.ast-label b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
}
.ast-label small {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
text-align: right;
}
.ast-input {
margin: 0;
}
textarea.ast-input {
height: auto;
min-height: 92px;
padding: 12px 16px;
resize: none;
line-height: 22px;
}
.ast-count {
display: block;
margin: 6px 4px 0 0;
font-size: 13px;
line-height: 18px;
color: var(--ink-3);
text-align: right;
}
.ast-row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.ast-row2 > .ast-field:only-child {
grid-column: 1 / -1;
}
.ast-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ast-chip {
appearance: none;
min-height: 38px;
padding: 8px 14px;
border: 0;
border-radius: 19px;
background: var(--well);
color: var(--ink);
font-size: 15px;
line-height: 20px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.12s ease;
}
.ast-chip:active {
transform: scale(0.97);
}
.ast-chip.on {
background: var(--btn);
color: var(--btn-ink);
}
.ast-cover {
display: flex;
align-items: center;
gap: 16px;
}
.ast-cover .ast-face {
width: 72px;
height: 72px;
}
.ast-themes {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px 8px;
}
.ast-theme-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
.ast-theme-box small {
max-width: 100%;
overflow: hidden;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
}
.ast-theme {
appearance: none;
display: block;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background: linear-gradient(180deg, var(--sv-a), var(--sv-b));
box-shadow: inset 0 0 0 1px var(--line);
cursor: pointer;
transition: box-shadow 0.18s ease;
}
.ast-theme.on {
box-shadow:
0 0 0 3px var(--bg),
0 0 0 5px var(--ink);
}
.ast-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 12px 0 4px;
}
.ast-grid.emoji {
grid-template-columns: repeat(6, 1fr);
}
.ast-tile {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
min-width: 0;
padding: 8px;
border: 0;
border-radius: 16px;
background: var(--well);
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.ast-tile img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.ast-tile.on {
box-shadow: inset 0 0 0 2px var(--ink);
}
.ast-pic {
display: flex;
align-items: center;
gap: 14px;
margin: 12px 0 4px;
}
.ast-thumb {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 64px;
height: 64px;
overflow: hidden;
border-radius: 14px;
background: var(--well);
color: var(--ink-3);
}
.ast-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ast-file {
display: none;
}
.ast-slides {
display: flex;
flex-direction: column;
gap: 8px;
}
.ast-slide {
display: flex;
align-items: center;
gap: 4px;
padding-right: 10px;
border-radius: var(--r-group);
background: var(--well);
}
.ast-slide-main {
appearance: none;
display: flex;
flex: 1;
align-items: center;
gap: 12px;
min-width: 0;
padding: 12px 6px 12px 14px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.ast-slide-main .txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ast-slide-main .txt b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
}
.ast-slide-main .txt span {
overflow: hidden;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
white-space: nowrap;
text-overflow: ellipsis;
}
.ast-slide-main .go {
flex: none;
width: 18px;
height: 18px;
color: var(--ink-3);
}
.ast-n {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--ink);
color: var(--bg);
font-size: 14px;
font-weight: 500;
}
.ast-slide-acts {
display: flex;
gap: 4px;
}
.ast-mini {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--bg);
color: var(--ink);
cursor: pointer;
}
.ast-mini .ic {
width: 16px;
height: 16px;
stroke-width: 2;
}
.ast-mini.down .ic {
transform: rotate(180deg);
}
.ast-mini[disabled] {
opacity: 0.35;
pointer-events: none;
}
.ast-add {
align-self: flex-start;
margin-top: 4px;
}
.ast-warn {
margin: 12px 0 0;
}
.ast-warn p {
font-size: 15px;
line-height: 22px;
}
.ast-warn b {
display: inline;
margin: 0 6px 0 0;
}
.ast-count-line {
margin: 4px 0 0;
padding: 14px 16px;
border-radius: var(--r-group);
background: var(--well);
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.ast-count-line b {
display: block;
font-size: 20px;
line-height: 26px;
font-weight: 500;
color: var(--ink);
}
.ast-count-line.bad {
color: var(--bad);
}
.ast-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.ast-option {
display: flex;
flex-direction: column;
gap: 6px;
}
.ast-option-top {
display: flex;
align-items: center;
gap: 8px;
}
.ast-option-top .ast-input {
flex: 1;
min-width: 0;
}
.ast-reply {
height: 40px;
font-size: 16px;
}
.ast-right {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--well);
color: var(--ink-4);
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease;
}
.ast-right.on {
background: var(--good);
color: #ffffff;
}
.ast-right .ic {
width: 18px;
height: 18px;
stroke-width: 2.6;
}
.ast-pills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.ast-button {
padding: 16px;
border-radius: var(--r-group);
background: var(--well);
}
.ast-button .input {
background: var(--bg);
}
.ast-button .ast-chip {
background: var(--bg);
}
.ast-button .ast-chip.on {
background: var(--btn);
}
.ast-answers {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 8px;
}
.ast-ans > div {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 15px;
line-height: 20px;
}
.ast-ans.right > div span {
font-weight: 500;
}
.ast-ans i {
display: block;
height: 8px;
margin-top: 6px;
overflow: hidden;
border-radius: 4px;
background: var(--track);
}
.ast-ans i b {
display: block;
height: 100%;
border-radius: 4px;
background: var(--ink-3);
}
.ast-ans.right i b {
background: var(--good);
}
.ast-per .item {
min-height: 0;
padding: 10px 16px;
}
.ast-errs {
margin: 0 0 18px;
padding: 14px 16px;
border-radius: var(--r-group);
background: var(--well);
}
.ast-errs p {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--bad);
}
.ast-errs p + p {
margin-top: 4px;
}
.ast-actions {
position: sticky;
bottom: 0;
z-index: 3;
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 calc(-1 * var(--gutter));
padding: 12px var(--gutter) calc(12px + var(--safe-b));
background: var(--bg);
box-shadow: 0 -1px 0 var(--line);
}
.ast-dirty {
margin: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
}
.ast-more {
display: flex;
flex-direction: column;
margin: 8px 0 0;
}
.ast-danger {
color: var(--bad);
}
.su > .kicker,
.hn-body > .kicker {
margin: 8px 0 6px;
}
.su-stats {
margin: 20px 0 0;
}
.su-steps {
display: flex;
flex-direction: column;
min-height: calc(100svh - 40px - var(--safe-b) - var(--full-top, 0px));
}
.su-steps > .back-link {
align-self: flex-start;
}
.hn-bar.su-bar {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.su-body {
padding-bottom: 24px;
}
.su-body > .title {
margin-bottom: 20px;
}
.su-body > .title:focus {
outline: none;
}
.su-foot {
margin-top: auto;
min-height: 76px;
}
.su-foot .btn.su-go {
margin-top: 0;
}
.su-more {
border-radius: 18px;
background: var(--surface);
}
.su-more-body {
padding: 0 16px 16px;
}
.su-more-body > .hn-text {
margin: 12px 0 0;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.su-more-body > :first-child {
margin-top: 0;
}
.su-more-body > :last-child {
margin-bottom: 0;
}
.su-note {
margin: 12px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.su-note.center {
margin: 24px 0 0;
text-align: center;
}
.club-offer .dc-title {
font-size: 24px;
line-height: 30px;
text-wrap: pretty;
}
.club-offer .club-includes {
margin-top: 16px;
}
.club-deadline {
margin: 12px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--dark-ink);
}
.club-summary.btn {
margin: 4px 0 0;
}
.club-actions {
display: flex;
gap: 12px;
}
.club-actions .btn {
flex: 1 1 0;
min-width: 0;
margin: 0;
}
.club-offer .club-actions .btn.ghost {
margin: 0;
color: var(--dark-ink);
background: transparent;
}
.su-list {
margin: 16px 0 0;
}
.su-row {
align-items: flex-start;
min-height: 0;
}
.su-row .bubble {
margin-top: -2px;
}
.su-row .txt p,
.su-row .txt .lb-text {
margin: 0;
font-size: 15px;
line-height: 21px;
color: var(--ink);
white-space: normal;
}
.su-text .lb-text {
margin: 0 0 12px;
white-space: normal;
}
.su .vis,
.hn .vis {
margin: 0 0 16px;
}
.su-ahead {
margin: 24px 0 0;
}
.su-ahead .ic {
color: var(--accent);
}
.btn.su-go {
min-height: 52px;
margin: 28px 0 0;
}
.su .btn.ghost,
.hn .btn.ghost {
margin: 8px 0 0;
}
.hn-bar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
margin: 8px 0 20px;
}
.hn-bar i {
height: 3px;
border-radius: 2px;
background: var(--line);
}
.hn-bar i.on {
background: var(--accent);
}
.hn-text {
margin: 16px 0 0;
font-size: 16px;
line-height: 25px;
color: var(--ink);
}
.hn-price {
margin: 24px 0 0;
}
.hn-sum {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
}
.hn-sum b {
font-size: 40px;
line-height: 44px;
font-weight: 500;
letter-spacing: -0.8px;
}
.hn-sum span {
font-size: 17px;
line-height: 22px;
color: var(--ink-2);
}
.hn-day {
margin: 6px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.hn-offer {
margin: 20px 0 0;
}
.hn-offer .val {
text-decoration: line-through;
}
.hn-body.swap {
animation: dc-swap 0.26s var(--ease);
}
.dc-offer {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 10px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--dark-ink);
}
.dc-offer .ic {
flex: none;
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--warn);
stroke-width: 2.2;
}
.on-dark .btn.ghost.dc-more {
min-height: 44px;
margin: 4px 0 -8px;
color: var(--dark-ink-2);
background: transparent;
}
@media (prefers-reduced-motion: reduce) {
.hn-body.swap {
animation: none;
}
}
.pb-summary .su-stats { margin: 0 0 16px; }
.pb-summary .ck-stat b { font-size: 30px; line-height: 36px; letter-spacing: -0.3px; }
.pb-summary .pb-summary-lead { margin: 16px 0; }
.pb-summary .pb-summary-lead > .hn-text { margin: 0; }
.pb-summary details.su-more { margin: 16px 0 0; }
.pb-summary details.su-more > summary { gap: 16px; font-size: 16px; line-height: 22px; }
.pb-summary details.su-more > summary::after { flex: none; }
.pb-summary .su-more-body .lb-text,
.pb-summary .su-more-body p { font-size: 16px; line-height: 25px; color: var(--ink); }
.pb-summary .su-more-body .su-text + .su-text { margin-top: 16px; }
.pb-summary .su-row .txt .lb-text,
.pb-summary .su-row .txt p { font-size: 16px; line-height: 25px; }
.pb-summary .su-foot { padding-top: 24px; }
.pb-plan-next { margin: 0 0 16px; }
.pb-plan-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.pb-plan-heading > .kicker { margin: 0; }
.pb-plan-time { display: block; font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -0.3px; }
.pb-plan-next > .pb-plan-goal { margin: 16px 0 0; font-size: 16px; line-height: 22px; }
.pb-plan-next > .pb-plan-step { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.sun-preview {display:grid;gap:20px;padding-bottom:16px}
.sun-preview>section,.sun-preview>.back-link {margin:0}
.sun-preview>.back-link {justify-self:start}
.sun-preview-head {display:grid;gap:8px}
.sun-preview-head>* {margin:0}
.sun-preview-head .title {font-size:24px;line-height:1.3}
.sun-preview-day,.sun-preview-route,.sun-preview-rest {background:var(--well);border-radius:var(--r-card);padding:20px}
.sun-preview-day-top {display:flex;gap:12px;align-items:center}
.sun-preview-day-top p {margin:0 0 4px;color:var(--ink-2);font-size:14px}
.sun-preview-day-top strong {font-size:20px;line-height:1.3;font-weight:600}
.sun-preview .bubble {flex:0 0 32px;width:32px;height:32px}
.sun-preview .bubble .ic {width:20px;height:20px}
.sun-preview-chart {display:block;width:100%;height:auto;overflow:visible;margin-top:4px}
.sun-preview-horizon {stroke:var(--line);stroke-width:1.5}
.sun-preview-path {fill:none;stroke:var(--ib-amber);stroke-width:4;stroke-linecap:round}
.sun-preview-dot,.sun-preview-end {fill:var(--ib-amber)}
.sun-preview-dot {stroke:var(--bg);stroke-width:4}
.sun-preview-guide {stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 5}
.sun-preview-times {display:flex;justify-content:space-between;gap:16px;margin-top:4px}
.sun-preview-pair {display:grid;gap:4px}
.sun-preview-pair:last-child {text-align:right}
.sun-preview-pair span {font-size:14px;color:var(--ink-2)}
.sun-preview-pair strong {font-size:20px;font-weight:600}
.sun-preview-caption {font-size:12px;line-height:1.4;color:var(--ink-2);margin:16px 0 0}
.sun-preview-focus {display:grid;gap:12px;padding:24px}
.sun-preview-focus p,.sun-preview-focus h2 {margin:0}
.sun-preview-focus h2 {font-size:24px;line-height:1.25}
.sun-preview-focus p {font-size:16px;line-height:1.5;color:var(--dark-ink-2)}
.sun-preview-focus .sun-preview-kicker {font-size:14px}
.sun-preview-step {display:flex;gap:14px;align-items:flex-start}
.sun-preview-step>div {min-width:0;flex:1}
.sun-preview-step-head {display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:16px;line-height:1.35}
.sun-preview-step-head span {white-space:nowrap;font-variant-numeric:tabular-nums}
.sun-preview-step p {margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.sun-preview-step+.sun-preview-step {margin-top:24px}
.sun-preview-route h2 {font-size:20px;line-height:1.3;margin:0 0 24px}
.sun-preview-compact .sun-preview-times {margin-top:24px}
@media(max-width:350px){.sun-preview-day,.sun-preview-route,.sun-preview-rest {padding:16px}.sun-preview-focus {padding:20px}.sun-preview-step-head {gap:4px 10px}}
.sun-preview-mode-arc .sun-preview-day {padding:20px 20px 0;overflow:hidden}
.sun-preview-mode-arc .sun-preview-day-top {justify-content:space-between;gap:12px;align-items:baseline}
.sun-preview-mode-arc .sun-preview-day-top p {font-size:14px;color:var(--ink);margin:0}
.sun-preview-mode-arc .sun-preview-day-top>span {font-size:12px;color:var(--ink-2)}
.sun-preview-mode-arc .sun-preview-chart {margin-top:4px}
.sun-preview-mode-arc .sun-preview-horizon {stroke:var(--line);stroke-width:1}
.sun-preview-track {fill:none;stroke:var(--ink-4);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 7}
.sun-preview-mode-arc .sun-preview-path {stroke-width:3;stroke-dasharray:1;animation:sun-trace 850ms var(--ease) both}
.sun-preview-mode-arc .sun-preview-dot {stroke:var(--well);stroke-width:5;fill:var(--ib-amber)}
.sun-preview-rays {fill:none;stroke:var(--ib-amber);stroke-width:2;stroke-linecap:round}
.sun-preview-clock {font-family:var(--font);font-size:36px;font-weight:500;fill:var(--ink);font-variant-numeric:tabular-nums}
.sun-preview-clock-label {font-family:var(--font);font-size:14px;fill:var(--ink-2)}
.sun-preview-mode-arc .sun-preview-times {margin-top:-10px;padding:0 0 22px}
.sun-preview-mode-arc .sun-preview-pair strong {font-size:17px}
.sun-preview-window {display:grid;grid-template-columns:40px 1fr;gap:12px;margin:0 -20px;padding:20px;background:var(--bg);border:1px solid var(--well);border-top:0;border-radius:0 0 var(--r-card) var(--r-card)}
.sun-preview-window .bubble {width:40px;height:40px;align-self:center}
.sun-preview-window p {margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.sun-preview-window strong {display:block;margin-top:4px;font-size:24px;font-weight:500;line-height:1.25}
.sun-preview-window .sun-preview-window-copy {grid-column:1/-1;font-size:15px;color:var(--ink-2);line-height:1.5}
.sun-preview-evening>h2 {font-size:17px;line-height:1.4;margin:0 0 4px}
.sun-preview-evening>p {font-size:12px;color:var(--ink-2);margin:0 0 16px}
.sun-preview-night-pair {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sun-preview-night-pair .sun-preview-step {display:flex;flex-direction:column;gap:12px;margin:0;padding:16px;border-radius:var(--r-card);background:var(--well)}
.sun-preview-night-pair .sun-preview-step-head {display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:14px}
.sun-preview-night-pair .sun-preview-step-head span {font-size:24px;line-height:1.2}
.sun-preview-night-pair .sun-preview-step p {font-size:12px;line-height:1.5;margin:8px 0 0}
@keyframes sun-trace {from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.sun-preview-mode-arc .sun-preview-path{animation:none}}
@media(max-width:350px){.sun-preview-mode-arc .sun-preview-day{padding:16px 16px 0}.sun-preview-window{margin-inline:-16px;padding:16px}.sun-preview-mode-arc .sun-preview-day-top{align-items:flex-start;flex-direction:column;gap:4px}.sun-preview-night-pair .sun-preview-step{padding:14px}}
.voice-control,.voice-mic {
flex: 0 0 44px; width:44px; height:44px; display:grid; place-items:center;
border:0; border-radius:50%; color:inherit; background:transparent; padding:0;
transition:transform .18s var(--ease,ease),opacity .18s ease;
}
.voice-control:active,.voice-mic:active { transform:scale(.94); }
.voice-control:focus-visible,.voice-mic:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.voice-control:disabled,.voice-mic:disabled { opacity:.4; }
.voice-time { font-size:14px; line-height:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.voice-caption { margin:8px 0 0; font-size:14px; line-height:20px; overflow-wrap:anywhere; }
.voice-compose-panel { padding:8px 0 4px; min-width:0; animation:voice-panel-in .22s var(--ease,ease); }
.voice-compose-row { display:flex; align-items:center; gap:8px; min-width:0; }
.voice-compose-info { flex:1; min-width:0; display:grid; gap:4px; }
.voice-title { font-size:15px; line-height:21px; font-weight:500; overflow-wrap:anywhere; }
.voice-reading { display:flex; align-items:center; gap:8px; }
.voice-send { background:var(--btn); color:var(--btn-ink); }
.voice-compose-panel>.voice-caption { color:var(--ink-2); padding:0 8px; }
.voice-draft { margin:8px 8px 0; font-size:14px; line-height:20px; max-height:60px; overflow:auto; overflow-wrap:anywhere; }
.voice-card { border-radius:var(--r-group); padding:12px 8px; background:var(--well); margin-top:8px; }
.voice-message-fallback { font-size:14px; line-height:20px; padding:8px; }
@keyframes voice-panel-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
.voice-compose-panel { animation:none; }
.voice-control,.voice-mic { transition:none; }
}
.voice-mic { position:relative; touch-action:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.voice-mic.holding { transform:scale(1.12); color:#fff; background:var(--ib-violet); }
.voice-mic[data-orb].holding { opacity:0; transform:none; transition:none; }
.voice-orb { position:fixed; z-index:60; width:64px; height:64px; margin:-32px 0 0 -32px; pointer-events:none;
transform:translate(var(--dx,0px),var(--dy,0px)); transition:transform .12s ease-out; animation:voice-orb-in .22s var(--ease,ease) backwards; }
.voice-orb[hidden], .voice-lock[hidden], .voice-tip[hidden] { display:none; }
.voice-orb-halo { position:absolute; inset:0; border-radius:50%; background:color-mix(in srgb,var(--ib-violet) 24%,transparent);
transform:scale(calc(1 + var(--level,0) * .25)); transition:transform .2s linear; }
.voice-orb-core { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--ib-violet); }
.voice-orb-core svg { width:28px; height:28px; }
.voice-orb.out { animation:voice-orb-out .2s ease forwards; }
.voice-orb.out[data-out=send] { animation-name:voice-orb-send; }
.voice-lock { position:fixed; z-index:60; width:40px; height:76px; margin-left:-20px; pointer-events:none;
display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:12px 0 10px;
border-radius:20px; color:var(--ink); background:var(--well); box-shadow:var(--float-shadow);
transform:translateY(calc(-100% - var(--up,0px) * .5)); animation:voice-lock-in .26s var(--ease,ease) backwards; }
.voice-lock svg { width:18px; height:18px; flex:none; }
.voice-lock svg + svg { opacity:calc(1 - var(--lock,0)); animation:voice-nudge-up 1.4s ease-in-out infinite; }
.voice-lock.out { animation:voice-fade-out .18s ease forwards; }
.voice-tip { position:fixed; z-index:61; max-width:calc(100vw - 32px); padding:8px 12px; border-radius:14px; pointer-events:none;
font-size:14px; line-height:20px; white-space:nowrap; color:var(--bg); background:var(--ink); box-shadow:var(--float-shadow);
transform:translateY(-100%); animation:voice-tip-in .2s var(--ease,ease) backwards; }
.voice-tip.out { animation:voice-fade-out .2s ease forwards; }
.compose-row { position:relative; }
.voice-strip { display:none; flex:1; min-width:0; align-items:center; gap:10px; height:44px; padding:0 4px 0 14px;
animation:voice-strip-in .24s var(--ease,ease); }
.compose-row.voice-holding > .voice-strip, .compose-row.voice-leaving > .voice-strip { display:flex; }
.compose-row.voice-leaving > .voice-strip { animation:voice-strip-out .2s ease forwards; }
.compose-row.voice-holding > textarea, .compose-row.voice-leaving > textarea {
position:absolute; left:52px; right:52px; top:4px; opacity:0; pointer-events:none; }
.compose-row.voice-holding > .clip, .compose-row.voice-holding > .send,
.compose-row.voice-leaving > .clip, .compose-row.voice-leaving > .send { display:none; }
.voice-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--ib-violet); animation:voice-dot 1.2s ease-in-out infinite; }
.voice-strip .voice-time, .voice-reading .voice-time { flex:none; min-width:34px; color:var(--ink); }
.voice-wave { display:block; flex:1; min-width:0; height:36px; color:var(--ib-violet); }
.voice-slide { flex:none; display:flex; align-items:center; gap:2px; padding-right:8px; font-size:14px; line-height:20px; color:var(--ink-2);
transform:translateX(calc(-1 * var(--left,0px))); opacity:var(--fade,1); }
.voice-strip .voice-wave { opacity:calc(var(--fade,1) * var(--fade,1) * var(--fade,1)); }
.voice-slide svg { width:16px; height:16px; animation:voice-nudge-left 1.4s ease-in-out infinite; }
.voice-compose-panel .voice-compose-row { gap:4px; padding:4px; min-height:52px; border-radius:28px; background:var(--well); }
.voice-compose-panel .voice-compose-info { gap:0; }
.voice-compose-panel .voice-title { padding:0 8px; }
.voice-compose-panel[data-mode=recording] .voice-send { background:var(--ib-violet); color:#fff; }
.voice-reading { min-width:0; gap:10px; padding:0 6px; }
.voice-reading[hidden], .voice-review[hidden], .voice-title[hidden], .voice-caption[hidden] { display:none; }
.voice-review { display:flex; align-items:center; gap:8px; min-width:0; padding-right:6px; }
.voice-review-bars { flex:1; min-width:0; display:flex; }
.voice-review-bars .voice-bars { flex:1; justify-content:space-between; color:var(--ink); }
.voice-review .voice-time { flex:none; min-width:34px; color:var(--ink-2); font-size:14px; }
.voice-review-play { background:var(--ink); color:var(--bg); }
.voice-message { display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; padding:2px 0; }
.voice-play { flex:none; width:40px; height:40px; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
color:inherit; background:currentColor; transition:transform .16s var(--ease,ease); }
.voice-play svg { color:var(--voice-ground,var(--bg)); }
.voice-play:active { transform:scale(.94); }
.voice-play:disabled { opacity:.6; }
.msg.me .voice-play { color:var(--btn-ink); --voice-ground:var(--btn); }
.msg.ritm .voice-play { color:var(--ink); --voice-ground:var(--well); }
.voice-body { display:grid; gap:4px; min-width:0; }
.voice-bars { display:flex; align-items:center; gap:2px; height:24px; min-width:0; cursor:pointer; touch-action:pan-y; }
.voice-bars i { flex:none; width:3px; min-height:3px; border-radius:2px; background:color-mix(in srgb,currentColor 32%,transparent);
transition:background-color .15s ease; }
.voice-bars i.on { background:currentColor; }
.voice-bars:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:6px; }
.voice-meta { display:flex; align-items:center; gap:8px; min-height:20px; }
.voice-meta .voice-time { font-size:13px; line-height:18px; opacity:.72; }
.voice-speed { height:20px; min-width:34px; padding:0 7px; border:0; border-radius:10px; font:inherit; font-size:12px; line-height:20px;
font-weight:600; font-variant-numeric:tabular-nums; color:inherit; background:color-mix(in srgb,currentColor 16%,transparent); }
.voice-speed[hidden] { display:none; }
@keyframes voice-dot { 50% { opacity:.35; transform:scale(.8); } }
@keyframes voice-strip-in { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
@keyframes voice-strip-out { to { opacity:0; transform:translate(16px,-10px) scale(.96); } }
@keyframes voice-orb-in { from { opacity:0; scale:.5; } to { opacity:1; scale:1; } }
@keyframes voice-orb-out { to { opacity:0; scale:.4; } }
@keyframes voice-orb-send { to { opacity:0; scale:.6; translate:0 -18px; } }
@keyframes voice-lock-in { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes voice-tip-in { from { opacity:0; translate:0 6px; } to { opacity:1; translate:0 0; } }
@keyframes voice-fade-out { to { opacity:0; } }
@keyframes voice-nudge-up { 50% { translate:0 -3px; } }
@keyframes voice-nudge-left { 50% { translate:-3px 0; } }
@media (prefers-reduced-motion:reduce) {
.voice-orb, .voice-lock, .voice-tip, .voice-dot, .voice-strip, .voice-lock svg + svg, .voice-slide svg { animation:none; }
.voice-orb-halo, .voice-orb, .voice-bars i { transition:none; }
}
.voice-wrap { display: grid; gap: 8px; min-width: 0; }
.voice-totext { flex: none; align-self: center; min-width: 36px; height: 28px; padding: 0 9px; border: 0; border-radius: 10px;
color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); font: inherit; font-size: 13px; line-height: 28px;
font-weight: 600; cursor: pointer; transition: background-color .2s ease, transform .16s var(--ease, ease); }
.voice-totext.on { background: color-mix(in srgb, currentColor 26%, transparent); }
.voice-totext:active { transform: scale(.94); }
.voice-totext.busy { animation: voice-dot 1s ease-in-out infinite; }
.voice-transcript { margin: 0; font-size: 15px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere;
animation: voice-strip-in .24s var(--ease, ease); }
.voice-transcript[hidden] { display: none; }
.voice-transcript.err { opacity: .72; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .voice-totext.busy, .voice-transcript { animation: none; } }
.voice-body { flex: 1; }
.voice-bars { overflow: hidden; }
.feedback-form {display:flex;flex-direction:column;gap:20px;min-width:0}
.feedback-form,.feedback-mark,.feature-orb-tip {font-family:var(--font);letter-spacing:normal}
.feedback-form h2,.feedback-browse b,.feedback-attachment b,.feedback-mark-top b,.feature-orb-tip b,.paid-tour-panel h2 {font-weight:500}
.feedback-mark-top b {font-size:16px;line-height:22px}
.feedback-form h2,.feedback-form p {margin:0}
.feedback-heading {display:flex;align-items:center;justify-content:space-between;gap:16px}
.feedback-heading h2 {font-size:20px;line-height:26px}
.feedback-close {flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--well);color:var(--ink)}
.feedback-close svg {width:20px;height:20px}
.feedback-note {font-size:14px;line-height:20px;color:var(--ink-2);overflow-wrap:anywhere}
.feedback-text {font:inherit;font-size:16px;line-height:24px;color:var(--ink);background:var(--well);border:0;border-radius:var(--r-btn);padding:16px;resize:vertical;min-height:120px;width:100%;box-sizing:border-box}
.feedback-data {font-size:14px;line-height:20px}.feedback-data summary {padding:12px 0;cursor:pointer}.feedback-data p {margin:12px 0}
.feedback-check {display:flex;align-items:center;gap:12px}.feedback-check input {width:20px;height:20px;accent-color:var(--accent)}
.feedback-attachment {display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start}.feedback-attachment img {width:76px;max-height:150px;object-fit:contain;border-radius:12px;background:var(--well)}.feedback-attachment p {margin:8px 0}
.feedback-browse {position:fixed;z-index:85;top:calc(var(--safe-top,0px) + 76px);left:16px;right:16px;padding:16px;border-radius:var(--r-card);background:var(--well);box-shadow:var(--float-shadow);display:grid;gap:12px}.feedback-browse .btn {min-height:44px}
.feedback-loading {position:fixed;z-index:210;inset:0;background:transparent;touch-action:none}
.feedback-mark {position:fixed;inset:0;z-index:200;background:var(--bg);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:calc(var(--full-top,0px) + 8px) 12px calc(var(--safe-b) + 12px)}
.feedback-ambient {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px);transform:scale(1.04);opacity:.16;z-index:-1;pointer-events:none}
.feedback-stage {min-height:0;flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain;touch-action:pan-y}
.feedback-stage.zoomed {display:block}
.feedback-picture {position:relative;flex:none;overflow:hidden;border-radius:var(--r-btn);box-shadow:var(--float-shadow);animation:feedback-screen-in .24s var(--ease)}
.feedback-frozen {position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.feedback-draw {position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.feedback-selection {stroke:var(--accent);stroke-width:2;fill:transparent;pointer-events:none}.feedback-object {stroke:var(--accent);stroke-width:2;fill:var(--accent-soft);pointer-events:none}
.feedback-reveal .feedback-object,.feedback-reveal .feedback-selection {animation:feedback-reveal .6s var(--ease);filter:drop-shadow(0 0 3px var(--accent-soft))}
.feedback-mark-top,.feedback-mark-bottom {flex:none}
.feedback-mark-top {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.feedback-mark-actions {display:flex;gap:8px}
.feedback-mark-bottom {display:grid;gap:8px}.feedback-mark-bottom p {margin:0;text-align:center;font-size:12px;line-height:16px}
.feedback-tools {display:flex;gap:8px;background:var(--well);border-radius:var(--r-btn);padding:4px}.feedback-tools .btn {min-height:44px;font-size:14px;padding:8px;flex:1;min-width:0;background:transparent}.feedback-tools .btn[aria-pressed=true] {background:var(--bg);color:var(--ink)}
.feedback-result {position:fixed;left:0;right:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;gap:16px;padding:calc(var(--full-top,0px) + 12px) 20px calc(var(--safe-b) + 12px);overflow:hidden;font-family:var(--font)}
.feedback-result .feedback-heading {flex:none}.feedback-result h2 {font-size:20px;line-height:26px;font-weight:500;margin:0}
.feedback-result-preview {flex:0 1 auto;min-height:40px;max-height:30%;display:flex;flex-direction:column;gap:8px;align-items:center;animation:feedback-screen-in .24s var(--ease)}
.feedback-result-preview img {min-height:0;max-height:100%;max-width:100%;object-fit:contain;border-radius:var(--r-btn)}.feedback-result-preview p {font-size:12px;line-height:16px;margin:0;flex:none}
.feedback-result-body {flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:16px;animation:feedback-panel-in .24s var(--ease)}.feedback-result-body > * {flex:none}.feedback-result-body .feedback-text {min-height:96px;height:96px}.feedback-result-body .feedback-note:empty {display:none}
@keyframes feedback-screen-in {from{transform:scale(1.025);opacity:.7}to{transform:scale(1);opacity:1}}
@keyframes feedback-panel-in {from{transform:translateY(24px);opacity:.5}to{transform:translateY(0);opacity:1}}
@keyframes feedback-reveal {from{stroke-dasharray:2 7;opacity:.2}to{stroke-dasharray:2 0;opacity:1}}
.orb-new img {animation:orb-feature 2s ease-in-out 2}.orb-feature-note {margin:0 0 16px;padding:16px;background:var(--well);border-radius:var(--r-card);font-size:15px;line-height:22px}
@keyframes orb-feature {50%{transform:translateY(-5px) scale(1.08);filter:drop-shadow(0 0 12px var(--accent))}}
@media(prefers-reduced-motion:reduce){.orb-new img,.feedback-reveal .feedback-object{animation:none}}
.feature-orb-tip {position:fixed;z-index:75;bottom:calc(var(--safe-bottom,0px) + 126px);left:20px;right:20px;padding:20px;border-radius:var(--r-card);background:var(--well);box-shadow:var(--float-shadow);display:grid;gap:12px}
.feature-orb-tip::after {content:"";position:absolute;bottom:-8px;left:calc(50% - 8px);width:16px;height:16px;transform:rotate(45deg);background:var(--well)}
.feature-orb-tip b {font-size:20px;line-height:26px}.feature-orb-tip p {margin:0;font-size:15px;line-height:22px;color:var(--ink-2)}.feature-orb-tip .btn {min-height:44px}
.feature-new-row {background:var(--accent-soft);border-radius:var(--r-row)}
.adm-search .input {padding-right:48px}.adm-search-clear {position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center}.adm-search-clear .ic {position:static;width:20px;height:20px}.adm-people-view > .btn {margin-bottom:20px}
.tab-head .th-acts,.tab-head.big .th-acts {display:flex;align-items:center;gap:10px;align-self:center}
.tab-head .sos-btn {width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;background:var(--ib-pink);color:var(--ink);font-size:12px;line-height:16px;display:grid;place-items:center}
.edge-glow::before {content:"";position:fixed;left:0;top:34%;height:120px;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 16px 4px var(--accent-soft);pointer-events:none;animation:edge-cue 1.7s ease-in-out 3}
.edge-glow .edge-hint-arrow {animation:edge-cue-arrow 1.7s ease-in-out 3}
@keyframes edge-cue {50%{opacity:.35;transform:scaleY(.8)}}@keyframes edge-cue-arrow {50%{transform:translateX(8px)}}
@media(prefers-reduced-motion:reduce){.edge-glow::before,.edge-glow .edge-hint-arrow{animation:none}}
.feedback-reasons {display:flex;flex-wrap:wrap;gap:8px}.feedback-reasons .btn {width:auto;min-height:40px;padding:8px 12px;font-size:14px;line-height:20px}.feedback-reasons .btn[aria-pressed=true] {background:var(--btn);color:var(--btn-ink)}
.feature-orb-shade {position:fixed;inset:0;z-index:73;background:var(--scrim)}
html.chat-open,body.chat-open {height:100%;overflow:hidden;overscroll-behavior:none}
body.chat-open .app {position:fixed;left:0;right:0;top:var(--chat-top,0px);height:var(--chat-height,100dvh);padding-bottom:0;overflow:hidden}
body.chat-open .chat {height:100%;min-height:0;overflow:hidden}
body.chat-open .chat > * {flex-shrink:0;animation:none}
body.chat-open .chat .chat-log {flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:none;padding:8px 0 20px;overflow-anchor:auto}
body.chat-open .compose {position:relative;left:auto;bottom:auto;transform:none;width:auto;max-width:none;margin:0 calc(-1 * var(--gutter));flex-shrink:0}
body.chat-open .ritm-chat-top,body.chat-open .thread-head {position:relative;top:auto}
body.chat-keyboard .compose {padding-bottom:8px}
.answer-rating {display:flex;gap:16px;margin:8px 0 16px;flex-wrap:wrap}.answer-rating button {display:flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0;color:var(--ink-2);font-size:12px;min-height:40px}.answer-rating .ic {width:18px;height:18px}.answer-rating button[aria-pressed="true"] {color:var(--ink);font-weight:500}.chat-rating-tip {padding:16px;border-radius:var(--r-card);background:var(--well);margin-bottom:20px}.chat-rating-tip p {margin:0 0 12px;font-size:14px;line-height:20px}
@media(prefers-reduced-motion:reduce){.feedback-picture,.feedback-result-preview,.feedback-result-body,.feedback-reveal .feedback-selection{animation:none}}
.feedback-focus {display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.scanning .feedback-focus {display:block}
.feedback-reveal .feedback-selection {filter:drop-shadow(0 0 3px var(--accent));animation:feedback-reveal .6s var(--ease)}
.feedback-result {isolation:isolate}
@media(prefers-reduced-motion:reduce){.scanning .feedback-frozen{transition:none}.feedback-reveal .feedback-selection{animation:none}}
.feature-orb-shade {backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);touch-action:none}
.feature-target {position:fixed;z-index:76;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.feature-target-orb {background:transparent;overflow:visible}
.feature-target-orb img {display:block;width:100%;height:100%;object-fit:contain;transform:translateY(-5px) scale(1.08);filter:drop-shadow(0 0 12px var(--accent));animation:feature-orb-breathe 2.4s ease-in-out infinite}
.feature-target-bell {background:var(--well);border-radius:50%;box-shadow:0 0 24px var(--accent-soft);animation:feature-bell-breathe 2.4s ease-in-out infinite}
.feature-target-bell .ic {width:22px;height:22px;stroke:var(--ink);fill:none}
.feature-orb-tip,.feature-bell-tip {font-family:var(--font);letter-spacing:normal;max-height:calc(100dvh - 180px);overflow:visible}
.feature-bell-tip {position:fixed;z-index:75;left:20px;right:20px;padding:20px;border-radius:var(--r-card);background:var(--well);box-shadow:var(--float-shadow);display:grid;gap:12px}
.feature-bell-tip::before {content:"";position:absolute;top:-8px;left:calc(var(--pointer-x) - 8px);width:16px;height:16px;transform:rotate(45deg);background:var(--well)}
.feature-bell-tip b {font-size:20px;line-height:26px;font-weight:500}.feature-bell-tip p {margin:0;font-size:15px;line-height:22px;color:var(--ink-2)}.feature-bell-tip .btn {min-height:44px}
.feature-kicker {font-size:14px;line-height:20px;color:var(--accent-text)}
@keyframes feature-orb-breathe {50%{transform:translateY(-9px) scale(1.12);filter:drop-shadow(0 0 18px var(--accent))}}
@keyframes feature-bell-breathe {50%{transform:translateY(-2px);box-shadow:0 0 30px var(--accent-soft)}}
.edge-coach {position:fixed;inset:0;z-index:76;background:var(--scrim);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);touch-action:none;overflow:hidden;font-family:var(--font);color:var(--ink);opacity:calc(1 - var(--gesture-progress,0)*.5)}
.edge-coach::before {content:"";position:absolute;inset:0;background:var(--bg);opacity:.78;pointer-events:none}
.edge-coach-light {position:absolute;left:-4px;top:22%;height:46%;width:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px 7px var(--accent),0 0 55px 18px var(--accent-soft);animation:edge-light-breathe 2.4s ease-in-out infinite;pointer-events:none}
.edge-coach-body {position:absolute;left:48px;right:28px;top:34%;display:grid;gap:12px;max-width:310px;pointer-events:none}
.edge-coach-body h2 {font-size:24px;line-height:30px;font-weight:500;margin:8px 0 0;letter-spacing:normal}
.edge-coach-body p {font-size:17px;line-height:24px;margin:0}.edge-coach-body .edge-coach-context {font-size:14px;line-height:20px;color:var(--ink-2);max-width:250px;margin-top:4px}
.edge-coach-arrow {width:64px;height:36px;display:grid;place-items:center;color:var(--accent);filter:drop-shadow(0 0 8px var(--accent-soft));animation:edge-arrow-drift 2.4s ease-in-out infinite}
.edge-coach-arrow .ic {width:36px;height:36px;stroke-width:1.5}
.edge-coach-later {position:absolute;bottom:calc(var(--safe-b) + 32px);left:calc(50% - 72px);width:144px;min-height:48px;background:var(--well)}
@keyframes edge-light-breathe {50%{transform:scaleY(.9);opacity:.65;box-shadow:0 0 23px 10px var(--accent),0 0 70px 24px var(--accent-soft)}}
@keyframes edge-arrow-drift {50%{transform:translateX(26px)}}
@media(prefers-reduced-motion:reduce){.feature-target-orb img,.feature-target-bell,.edge-coach-light,.edge-coach-arrow{animation:none}.edge-coach{backdrop-filter:none;-webkit-backdrop-filter:none}}
.feedback-mark {padding:calc(var(--full-top,0px) + 6px) 12px calc(var(--safe-b) + 16px);gap:10px}
.feedback-mark-top {min-height:44px;padding:0 4px}.feedback-mark-top b {font-size:14px;line-height:20px;font-weight:400;color:var(--ink-2)}
.feedback-mark-top .feedback-close,.feedback-result-top .feedback-close {background:transparent}
.feedback-picture {border-radius:26px}
.feedback-mark-bottom {justify-items:center;gap:12px}
.feedback-tools {padding:4px 8px;border-radius:32px;width:auto;max-width:100%;gap:4px;box-shadow:var(--float-shadow);background:var(--float)}
.feedback-tools .btn {flex:0 1 auto;padding:8px 14px;font-size:14px;min-height:44px;border-radius:24px}.feedback-tools .btn[aria-pressed=true] {background:var(--float-puck)}
.feedback-selection {stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.feedback-object {stroke:none;fill:var(--accent-soft)}
.feedback-reveal .feedback-selection {filter:drop-shadow(0 0 5px var(--accent));animation:feedback-edge-light .85s ease-in-out}
.feedback-scan-line {fill:var(--accent);filter:blur(2px);opacity:.6;animation:feedback-scan .65s var(--ease) forwards}
@keyframes feedback-scan {to{transform:translateY(var(--scan-height));opacity:0}}
@keyframes feedback-edge-light {0%,100%{opacity:.7}50%{opacity:1;filter:drop-shadow(0 0 10px var(--accent))}}
.feedback-result {padding:0;gap:0;background:var(--bg)}
.feedback-result > .feedback-ambient {opacity:.32;filter:blur(24px)}
.feedback-result-top {display:flex;justify-content:space-between;align-items:center;flex:0 0 auto;padding:calc(var(--full-top,0px) + 6px) 16px 0}
.feedback-result-top p {font-size:14px;line-height:20px;margin:0}
.feedback-result-preview {flex:1 1 40%;min-height:64px;max-height:none;justify-content:center;gap:12px;padding:16px 0 20px;animation:none}
.feedback-fragment {position:relative;flex:none;transform-origin:0 0;filter:drop-shadow(0 0 14px var(--accent-soft))}
.feedback-fragment img {display:block;width:100%;height:100%;max-height:none;object-fit:contain;border-radius:20px}
.feedback-result-preview > p {padding:0 24px;text-align:center;max-width:100%;font-size:12px;line-height:16px}
.feedback-corner {position:absolute;width:24px;height:24px;border:3px solid var(--accent);filter:drop-shadow(0 0 4px var(--accent-soft));animation:feedback-corner-breathe 2.4s ease-in-out infinite;pointer-events:none}
.feedback-corner.tl {top:-3px;left:-3px;border-right:0;border-bottom:0;border-top-left-radius:20px}.feedback-corner.tr {top:-3px;right:-3px;border-left:0;border-bottom:0;border-top-right-radius:20px}.feedback-corner.bl {bottom:-3px;left:-3px;border-right:0;border-top:0;border-bottom-left-radius:20px}.feedback-corner.br {bottom:-3px;right:-3px;border-left:0;border-top:0;border-bottom-right-radius:20px}
@keyframes feedback-corner-breathe {50%{filter:drop-shadow(0 0 9px var(--accent));opacity:.8}}
.feedback-result-body {flex:0 1 auto;max-height:58%;min-height:200px;background:var(--bg);border-radius:26px 26px 0 0;padding:10px 20px calc(var(--safe-b) + 16px);gap:16px;box-shadow:var(--sheet-shadow);animation:none}
:root[data-theme=dark] .feedback-result-body {background:#121214}
.feedback-result-body .grip {margin:0 auto 0;flex:none}
.feedback-result-body {transition:transform .24s var(--ease)}
.feedback-selection-name {display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:20px;color:var(--ink-2)}
.feedback-selected {width:100%;min-height:48px;font-family:var(--font);font-size:16px;line-height:22px;color:var(--ink)}
.feedback-result-body h2 {font-size:20px;line-height:26px;font-weight:500;margin:4px 0 0}
.feedback-result-body .feedback-text {min-height:72px;height:88px;resize:none;font-size:16px;line-height:22px}
.feedback-result-body .feedback-data summary {padding:0;font-size:12px;line-height:18px;color:var(--ink-2)}
.feedback-result-body > .btn.second {background:transparent;min-height:40px;font-size:14px;padding:6px}
@media(max-height:600px){.feedback-result-body{max-height:72%;min-height:200px}.feedback-result-preview{padding:8px 0}.feedback-result-preview > p{display:none}}
@media(prefers-reduced-motion:reduce){.feedback-scan-line,.feedback-reveal .feedback-selection,.feedback-corner{animation:none}}
.edge-coach-arrow {width:36px;justify-items:start;margin-left:-12px;color:var(--ink-2);filter:none}
.edge-coach-arrow .ic {stroke-width:2.2}
@keyframes edge-arrow-drift {50%{transform:translateX(14px)}}
.feedback-data summary {display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
.feedback-data summary::marker {content:""}.feedback-data summary::-webkit-details-marker {display:none}
.feedback-data summary .ic {width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}.feedback-data[open] summary .ic {transform:rotate(180deg)}
.answer-rating {align-items:center;gap:4px;margin:4px 0 16px}
.answer-rating button {font-family:var(--font);font-size:14px;line-height:20px;min-width:44px;height:44px;padding:10px;justify-content:center;border-radius:var(--r-btn)}
.answer-rating .ic {width:20px;height:20px;stroke-width:1.75}.answer-rating button[aria-pressed=true] {background:var(--well)}
.answer-rating .answer-clarify {margin-left:8px;padding:10px 12px;min-width:0;font-weight:400}
.chat-rating-tip {display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0;max-width:100%;margin:12px 0 8px;padding:12px 8px 12px 16px;align-self:stretch}
.chat-rating-tip p {flex:1;min-width:0;font-size:14px;line-height:20px;margin:0;color:var(--ink-2)}
.chat-rating-tip>button {appearance:none;display:grid;place-items:center;flex:none;width:44px;height:44px;margin:-8px 0;padding:0;border:0;background:none;color:var(--ink-2);cursor:pointer}
.chat-rating-tip>button .ic {width:18px;height:18px}
.rating-coach {position:fixed;inset:0;z-index:240;animation:rating-coach-in .36s var(--ease) both}
.rating-coach-shade {position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
.rating-coach-caption {position:absolute;left:20px;right:20px;max-width:360px;margin:0 auto;padding:20px;border-radius:var(--r-card);background:var(--bg);color:var(--ink);box-shadow:var(--sheet-shadow)}
.rating-coach-caption h2 {margin:0;font-size:19px;line-height:25px;font-weight:500}
.rating-coach-caption p {margin:8px 0 20px;font-size:15px;line-height:22px;color:var(--ink-2)}
.rating-coach-caption .btn {margin:0}
.rating-coach-ring {position:absolute;pointer-events:none;border-radius:50%;animation:rating-coach-pulse .85s var(--ease) both}
.rating-coach.leaving {pointer-events:none;animation:rating-coach-out .22s ease both}
@keyframes rating-coach-in {from{opacity:0}to{opacity:1}}
@keyframes rating-coach-out {from{opacity:1}to{opacity:0}}
@keyframes rating-coach-pulse {0%,100%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 5px var(--accent-soft)}}
@media(prefers-reduced-motion:reduce){.rating-coach,.rating-coach.leaving,.rating-coach-ring{animation:none}.rating-coach-shade{backdrop-filter:none;-webkit-backdrop-filter:none}}
.thread-hint {margin:0 4px 16px}
.feature-tip-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-8px}
.feature-tip-top .feature-later {width:auto;min-width:64px;min-height:44px;padding:10px 0 10px 12px;background:transparent;color:var(--ink-2);font-size:14px;line-height:20px;font-weight:400}
.orb-head > div {flex:1;min-width:0}.orb-head .orb-close {flex:none;align-self:flex-start;background:transparent}
.sv-care-heart {filter:none;mix-blend-mode:multiply}
.paid-tour-focus {position:fixed;z-index:71;pointer-events:none}
.paid-tour-object {transform-origin:0 0}.paid-tour-object > * {margin:0!important}
.paid-tour-object .item {background:var(--well);border-radius:var(--r-group);padding:16px}
.paid-tour-panel {left:32px;right:32px;bottom:auto;padding:0;gap:12px;max-height:none;background:transparent;border-radius:0;box-shadow:none;overflow:visible}
.paid-tour-panel p {font-size:17px;line-height:25px;font-weight:400;color:var(--ink)}
.paid-tour-panel > .hint {font-size:12px;line-height:16px;color:var(--ink-2)}
.paid-tour-actions {display:flex;align-items:center;gap:12px;margin-top:8px}
.paid-tour-actions .btn {flex:1;min-width:0;padding:12px 10px;white-space:normal;font-size:15px;line-height:20px}
.paid-tour-actions .second {background:transparent;font-weight:400;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.feedback-data summary .ic{transition:none}}
.paid-tour-shade {background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.edge-coach {animation:edge-coach-enter .5s ease both}
.edge-coach-light {animation:edge-light-enter .55s var(--ease) both,edge-light-breathe 3.6s ease-in-out .55s infinite}
.edge-coach-light::after {content:"";position:absolute;left:-2px;top:8%;width:14px;height:28%;border-radius:50%;background:var(--accent);filter:blur(10px);opacity:.35;animation:edge-light-flow 5s ease-in-out infinite alternate}
.edge-coach-arrow {animation:edge-copy-enter .35s var(--ease) .2s both,edge-arrow-drift 2.6s ease-in-out .55s infinite}
.edge-coach-body h2 {animation:edge-copy-enter .35s var(--ease) .3s both}
.edge-coach-body > p {animation:edge-copy-enter .35s var(--ease) .38s both}
.edge-coach-later {animation:edge-copy-enter .35s var(--ease) .48s both}
@keyframes edge-coach-enter {from{opacity:0}to{opacity:1}}
@keyframes edge-light-enter {from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:scaleY(1)}}
@keyframes edge-copy-enter {from{opacity:0;translate:-6px 0}to{opacity:1;translate:0 0}}
@keyframes edge-light-flow {to{transform:translateY(170%);opacity:.6}}
@media(prefers-reduced-motion:reduce){.edge-coach,.edge-coach-light,.edge-coach-light::after,.edge-coach-arrow,.edge-coach-body h2,.edge-coach-body > p,.edge-coach-later{animation:none}.paid-tour-shade{backdrop-filter:none;-webkit-backdrop-filter:none}}
.feedback-browse {top:auto;bottom:calc(var(--safe-b) + 104px);left:12px;right:12px;padding:8px 8px 8px 16px;display:flex;align-items:center;gap:8px;border-radius:var(--r-card)}
.feedback-browse .feedback-note {flex:1;min-width:0;font-size:12px;line-height:16px;margin:0}
.feedback-browse > .btn {flex:none;width:auto;min-height:44px;font-size:14px;line-height:20px;padding:10px 12px}
.feedback-browse .feedback-close {background:transparent;width:36px;flex-basis:36px}
body.feedback-browsing .app {padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 120px)}
.edge-coach {animation-fill-mode:backwards}
.feature-new-row {position:relative;isolation:isolate;background:transparent;z-index:1}
.feature-new-row::before {content:"";position:absolute;inset:4px 0;border-radius:var(--r-card);z-index:-1;pointer-events:none;background:var(--well);outline:1px solid var(--accent);animation:feature-row-light .25s var(--ease) both}
.feature-menu-guided > .item:not(.feature-new-row) {opacity:1;filter:none}
.feature-new-row .bubble {box-shadow:none}
@keyframes feature-row-light {from{opacity:0}to{opacity:1}}
@keyframes feature-row-breathe {50%{box-shadow:0 0 32px var(--accent-soft)}}
@media(prefers-reduced-motion:reduce){.feature-new-row::before{animation:none}.feature-menu-guided > .item:not(.feature-new-row){transition:none;filter:none}}
.home-beta {margin-top:24px;padding:20px;background:var(--well);border-radius:var(--r-card);display:grid;gap:20px}
.home-beta-copy {display:flex;align-items:flex-start;gap:12px}.home-beta-copy > div {min-width:0}
.home-beta h2 {font-size:17px;line-height:23px;font-weight:500;margin:0 0 8px}.home-beta p {font-size:14px;line-height:20px;color:var(--ink-2);margin:0}
.home-beta .btn {background:var(--bg);border:1px solid var(--line)}
.beta-consent {font-size:15px;line-height:22px;align-items:flex-start}.beta-consent input {flex:none;margin:2px 0 0}
.feedback-selection {stroke-width:2.5;stroke-opacity:.8}
.feedback-scan-line {fill:url(#feedback-light);color:var(--accent);filter:none;opacity:1;animation:feedback-scan .65s ease-in-out forwards}
.feedback-reveal .feedback-object {animation:feedback-object-in .32s var(--ease) both;fill:var(--accent-soft);stroke:none;filter:none}
@keyframes feedback-object-in {from{opacity:0}to{opacity:.7}}
.feedback-corner {border-width:2.5px;opacity:.8}
@media(prefers-reduced-motion:reduce){.feedback-scan-line{display:none}.feedback-reveal .feedback-object{animation:none}}
.item .txt > b.feature-labelled {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feature-badge {display:inline-flex;align-items:center;flex:none;font-size:12px;line-height:16px;font-weight:500;letter-spacing:normal;padding:3px 8px;border-radius:8px;background:var(--accent-soft);color:var(--accent-text)}
.edge-coach-forward .edge-coach-light {left:auto;right:-4px}
.edge-coach-forward .edge-coach-body {left:28px;right:48px;margin-left:auto;text-align:right}
.edge-coach-forward .edge-coach-arrow {margin-left:auto;margin-right:-12px;scale:-1 1}
.edge-coach-forward .edge-coach-context {margin-left:auto}
.edge-forward-actions {position:absolute;bottom:calc(var(--safe-b) + 24px);left:32px;right:32px;display:grid;gap:8px}
.edge-forward-actions .second {background:transparent;color:var(--ink-2)}
.release-demo {display:grid;gap:20px}.release-demo .hint{margin:0}.release-demo-bar{display:flex;align-items:center;gap:12px;padding:8px 0 16px;flex:none;position:relative;z-index:1}.release-demo-bar>span{flex:1;color:var(--ink-2);font-size:12px;line-height:16px}.release-demo-bar .btn{width:auto;margin:0;min-height:44px}.release-demo-bar .feedback-close{flex:none}
.beta-consent {position:relative;gap:12px;min-height:48px;cursor:pointer;line-height:22px}
.beta-consent input {position:absolute;left:0;width:28px;height:28px;opacity:0;margin:0}
.beta-checkmark {display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);transition:background .2s,border-color .2s}
.beta-checkmark .ic {width:18px;height:18px;opacity:0;transition:opacity .2s}
.beta-consent input:checked + .beta-checkmark {background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.beta-consent input:checked + .beta-checkmark .ic {opacity:1}
.beta-consent input:focus-visible + .beta-checkmark {outline:2px solid var(--ink);outline-offset:4px}
.beta-celebrate {position:relative;isolation:isolate;animation:beta-settle .55s var(--ease) both}
.beta-celebrate::before {content:"";position:absolute;pointer-events:none;inset:-6px;border:1px solid var(--accent);border-radius:24px;box-shadow:inset 0 0 20px var(--accent-soft),0 0 28px var(--accent-soft);opacity:0;animation:beta-wave .95s var(--ease) both}
@keyframes beta-wave {0%{opacity:0;clip-path:inset(0 100% 95% 0 round 24px)}35%{opacity:.7;clip-path:inset(0 0 0 0 round 24px)}100%{opacity:0;clip-path:inset(0 0 0 0 round 24px)}}
@keyframes beta-settle {from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.beta-celebrate,.beta-celebrate::before{animation:none}.beta-checkmark,.beta-checkmark .ic{transition:none}}
.edge-drag-cue {position:fixed;z-index:205;left:-40px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--well);color:var(--ink-2);box-shadow:var(--float-shadow);transform:translateX(var(--pull,0px));pointer-events:none}
.edge-drag-cue.forward {left:auto;right:-40px;transform:translateX(calc(-1 * var(--pull,0px)))}
.edge-drag-cue.ready {color:var(--ink);background:var(--chip)}
.edge-coach {backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.edge-coach::before {opacity:.42}
.feedback-result-preview {min-height:0;overflow:hidden}
.feedback-result-body {overflow-x:hidden}
.feature-orb-shade {background:var(--scrim);opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none}
.feature-target,.feature-target-bell {background:transparent;box-shadow:none;animation:none}
.feature-orb-tip::after,.feature-bell-tip::before {display:block;background:var(--bg)}
.feature-orb-tip,.feature-bell-tip {box-shadow:none;background:var(--bg);padding:20px;gap:16px}
.feature-orb-tip p,.feature-bell-tip p {font-size:16px;line-height:24px}
.feature-target-orb img {filter:none;transform:none;animation:none}
.pd-course > .btn.second {margin-top:12px}
.paid-tour-shade {background:var(--bg);opacity:.85;backdrop-filter:none;-webkit-backdrop-filter:none}
.paid-tour-panel {top:auto!important;bottom:0;left:0;right:0;padding:24px 24px calc(var(--safe-b) + 24px);background:var(--bg);max-height:50dvh;overflow-y:auto}
body.paid-guiding .app {padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 300px)}
body.paid-guiding.chat-open .app {padding-bottom:250px}
.paid-tour-panel p {font-size:17px;line-height:25px}
.paid-tour-actions {display:grid;gap:8px}.paid-tour-actions .btn {font-size:16px;line-height:22px;min-height:48px}
.inbox-peek-item {background:var(--well);border-radius:var(--r-card);margin-bottom:12px;overflow:hidden}
.inbox-peek-item summary {display:flex;align-items:center;gap:12px;padding:16px;list-style:none;cursor:pointer}
.inbox-peek-item summary::-webkit-details-marker {display:none}
.inbox-peek-item summary>.ic {width:18px;height:18px;color:var(--ink-2);transition:transform .2s var(--ease)}
.inbox-peek-item[open] summary>.ic {transform:rotate(180deg)}
.inbox-peek-item .txt {min-width:0;flex:1}.inbox-peek-item .txt b {display:block;font-size:16px;line-height:22px;font-weight:500;margin-bottom:4px}
.inbox-peek-item .inbox-prev {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:20px;color:var(--ink-2)}
.inbox-symbol {align-self:flex-start;display:grid;place-items:center;flex:0 0 24px;height:24px;color:var(--ink-2)}
.inbox-symbol .ic {width:20px;height:20px}
.inbox-item-meta {display:flex;gap:8px;align-items:center}.inbox-item-meta b {margin:0!important}
.inbox-item-time {display:block;font-size:12px;line-height:18px;color:var(--ink-2);margin:2px 0 6px}
.inbox-filters {margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.inbox-filters>summary {display:flex;align-items:center;gap:12px;min-height:44px;list-style:none;font-size:15px;cursor:pointer}
.inbox-filters>summary::-webkit-details-marker {display:none}
.inbox-filters>summary>span:nth-child(2) {flex:1;text-align:right;color:var(--ink-2);font-size:12px}
.inbox-filters>summary>.ic {width:18px;height:18px;flex:none;color:var(--ink-2)}
.inbox-filters[open]>summary>.ic {transform:rotate(180deg)}
.inbox-filter-fields,.inbox-date-fields {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:8px}
.inbox-date-fields[hidden] {display:none}.inbox-date-fields>.btn {grid-column:1/-1}
.inbox-filter-field {display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12px;color:var(--ink-2)}
.inbox-filter-field select,.inbox-filter-field input {box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:48px;padding:0 10px;border:0;border-radius:14px;background:var(--well);color:var(--ink);font:inherit;font-size:16px}
.inbox-content>p:empty {display:none}
.inbox-peek-item[open] .inbox-prev {display:none}
.inbox-peek-body {padding:0 16px 16px}.inbox-peek-body .notification-text {font-size:16px;line-height:25px;margin:16px 0}
#sheet-body > .title + .list {margin-top:20px}
.rating-example .card {margin:0}.rating-example .card p {margin:0}
.answer-rating {gap:8px;margin-top:8px;margin-bottom:16px}
.answer-rating button {background:var(--well);border-radius:22px;min-width:44px;padding:10px 14px}
.answer-rating button[aria-pressed=true] {background:var(--accent-soft);color:var(--accent-text)}
.beta-form {gap:24px}.beta-form .feedback-note,.beta-form .beta-consent {font-size:16px;line-height:24px}
.beta-form .feedback-note:empty {display:none}
.beta-celebrate::before {display:none}
.beta-screen-wave {position:fixed;inset:3px;z-index:220;border:2px solid var(--accent);border-radius:30px;pointer-events:none;box-shadow:inset 0 0 20px var(--accent-soft),0 0 14px var(--accent-soft);animation:beta-perimeter 1.35s var(--ease) both}
@keyframes beta-perimeter {0%{opacity:0;clip-path:inset(85% 0 0 0 round 30px)}25%{opacity:.7;clip-path:inset(40% 0 0 0 round 30px)}65%{opacity:.6;clip-path:inset(0 0 0 0 round 30px)}100%{opacity:0;clip-path:inset(0 0 0 0 round 30px)}}
.streak-detail>p {font-size:16px;line-height:25px;color:var(--ink-2)}
.streak-counters {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.streak-counters>div {background:var(--well);padding:20px 16px;border-radius:var(--r-card);display:grid;gap:8px}
.streak-counters b {font-size:30px;line-height:36px;font-weight:500}.streak-counters span {font-size:14px;line-height:20px;color:var(--ink-2)}
.streak-counters .ic {color:var(--accent);width:24px;height:24px}
.levels-coming .lv-dot .ic {width:18px;height:18px}.levels-coming .txt b {color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.beta-screen-wave{display:none}.inbox-peek-item summary>.ic{transition:none}}
html:has(.sheet:not([hidden])),body:has(.sheet:not([hidden])) {overflow:hidden;overscroll-behavior:none}
.feedback-mark-bottom>.btn {width:100%;max-width:360px}
.feedback-mark,.feedback-result {touch-action:pan-y}
.feedback-data {background:var(--well);border-radius:var(--r-btn);overflow:hidden;flex:none}
.feedback-data>summary,.feedback-result-body .feedback-data>summary {padding:14px 16px;min-height:48px;font-size:16px;line-height:22px;color:var(--ink);font-weight:500;cursor:pointer}
.feedback-data>p,.feedback-data>label {margin:0;padding:0 16px 16px;font-size:15px;line-height:22px}
.feedback-data>label {align-items:center}.feedback-data>p:last-child {padding-bottom:20px}
.feedback-data summary .ic {width:20px;height:20px}
.chat > .back-link {align-self:flex-start}
.feedback-text {resize:none}
.edge-coach {backdrop-filter:none;-webkit-backdrop-filter:none}
.feedback-capture-copy *, .feedback-capture-copy *::before, .feedback-capture-copy *::after {animation:none!important;transition:none!important;caret-color:transparent!important}
.feedback-capture-copy .screen > * {opacity:1!important;transform:none!important;filter:none!important}
.feedback-capture-copy .tabs.raised .tab-orb::before {display:none!important}
.feedback-capture-copy .day-card {box-shadow:none!important;background-clip:border-box!important;background-origin:border-box!important}
.feedback-capture-copy .dc-body {background:transparent!important}
.feedback-result-body {overflow:hidden;flex-shrink:0;min-height:120px;gap:8px;transition:transform .24s var(--ease),height .24s var(--ease)}
.feedback-result-body[data-expanded="true"],.feedback-result-body[data-dragging="true"] {max-height:calc(100% - 60px)}
.feedback-result-body .sheet-scroll {flex:1;gap:16px;padding-bottom:8px}
.feedback-result-body .sheet-scroll > * {flex:none}
.feedback-result:has([data-expanded="true"]) .feedback-result-preview {min-height:0;flex-basis:0;padding:0;overflow:hidden}
@media(prefers-reduced-motion:reduce){.feedback-result-body{transition:none}}
.home-beta.list {display:block;padding:0;background:var(--well);border:0}
.home-beta.list h2 {font-size:16px;line-height:22px}
body.tg-full .sheet .panel[data-expanded="true"],body.tg-full .sheet .panel[data-dragging="true"] {max-height:calc(100% - var(--full-top) - 16px)}
.feedback-picture {box-shadow:none;overflow:visible;border-radius:0}
.feedback-frozen {border-radius:20px;transition:filter .2s ease,opacity .2s ease}
.feedback-stage {scrollbar-width:none}
.feedback-stage::-webkit-scrollbar {display:none}
.has-selection .feedback-focus {display:block}
.has-selection .feedback-draw {overflow:visible}
.has-selection .feedback-selection {filter:drop-shadow(0 0 7px var(--accent-soft));animation:feedback-selection-air 3.6s ease-in-out infinite}
@keyframes feedback-selection-air {50%{filter:drop-shadow(0 0 12px var(--accent-soft));stroke-opacity:1}}
@media(prefers-reduced-motion:reduce){.feedback-frozen{transition:none}.has-selection .feedback-selection{animation:none}}
.feedback-mark > .feedback-ambient {opacity:.2;filter:blur(10px)}
.feedback-mark::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.11),transparent 30%,transparent 62%,rgba(0,0,0,.12))}
.feedback-picture {animation:none;transform-origin:0 0}
.feedback-entering .feedback-stage {overflow:visible;pointer-events:none}
.feedback-context-shade {position:absolute;inset:0;border-radius:20px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.13),transparent 30%,transparent 64%,rgba(0,0,0,.14));opacity:0;transition:opacity .2s ease}
.has-selection .feedback-context-shade {opacity:1}
.feedback-entry-sweep {display:none;position:absolute;inset:0;overflow:hidden;border-radius:20px;pointer-events:none}
.feedback-entering .feedback-entry-sweep {display:block}
.feedback-entry-sweep::after {content:"";position:absolute;left:0;right:0;top:-50%;height:40%;background:linear-gradient(180deg,transparent,var(--accent-soft),transparent);filter:blur(12px);animation:feedback-entry-water .62s ease-out both;opacity:.45}
@keyframes feedback-entry-water {to{transform:translateY(350%);opacity:0}}
@media(prefers-reduced-motion:reduce){.feedback-context-shade{transition:none}.feedback-entry-sweep{display:none!important}}
.feedback-result > .feedback-ambient {opacity:.2;filter:blur(10px)}
.feedback-result::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.11),transparent 30%,transparent 62%,rgba(0,0,0,.12))}
.feedback-result {isolation:isolate}
.feedback-result-preview .feedback-refine {flex:none;min-height:44px;width:auto;padding:8px 16px;border-radius:22px;font-size:14px;background:var(--float);color:var(--ink);box-shadow:none}
.feedback-result-body .feedback-data[open] {display:flex;flex-direction:column;gap:16px}
.feedback-result-body .feedback-data p {margin:0}
.feedback-result-body .feedback-note:empty {display:none}
.feedback-mark.has-panel {padding-bottom:0;gap:10px}
.feedback-stage.framed {position:relative;display:block;overflow:hidden;mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 16px),transparent);-webkit-mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.feedback-stage.framed .feedback-picture {position:absolute}
.feedback-settling .feedback-stage {pointer-events:none}
.feedback-mark.has-panel .feedback-mark-bottom {gap:8px}
.feedback-mark.has-panel .feedback-mark-bottom>.feedback-note {display:none}
.feedback-mark.has-panel .feedback-practice-text {display:none}
.feedback-mark.has-panel>.feedback-result-body {margin:0 -12px;max-height:46%;width:calc(100% + 24px);min-height:180px;flex-shrink:0;transition:none}
.feedback-mark .feedback-result-body .sheet-scroll {min-height:0;overflow-y:auto;overscroll-behavior:contain}
.feedback-mark.has-panel .feedback-tools {box-shadow:none;background:transparent;padding:0;gap:4px}
.feedback-mark.has-panel .feedback-tools .btn {min-height:40px;padding:6px 14px}
.feedback-recognition {max-width:calc(100% - 24px);display:flex;align-items:center;gap:8px;padding:8px 14px;min-height:36px;border-radius:24px;background:var(--float);color:var(--ink);box-shadow:var(--float-shadow);font-size:14px;line-height:20px}
.feedback-recognition[hidden] {display:none}
.feedback-recognition>.ic {width:16px;height:16px;flex:none;color:var(--accent-text)}
.feedback-recognition>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feedback-mark.keyboard-open .feedback-mark-bottom {display:none}
.feedback-mark.keyboard-open>.feedback-result-body {max-height:calc(100% - 110px)}
.feedback-scan-line {fill:url(#feedback-light);filter:blur(4px);opacity:1;animation:feedback-scan .65s cubic-bezier(.32,0,.25,1) forwards}
.feedback-draw {color:var(--accent)}
.feedback-reveal .feedback-object {animation:feedback-object-found .3s ease-out both;opacity:0}
@keyframes feedback-object-found {0%{opacity:0}40%{opacity:.55}100%{opacity:.12}}
@media(prefers-reduced-motion:reduce){.feedback-scan-line,.feedback-reveal .feedback-object{animation:none;display:none}}
.feedback-mark.has-panel .feedback-recognition[hidden] {display:flex;visibility:hidden}
.feedback-mark>.feedback-ambient {transform:none}
.feedback-stage {position:relative}
.feedback-recognition {position:absolute;z-index:3;left:50%;top:16px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:8px 14px;pointer-events:none;text-align:center;background:var(--btn);color:var(--btn-ink);box-shadow:var(--float-shadow)}
.feedback-recognition>span {white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.feedback-mark.has-panel .feedback-tools {background:var(--float);padding:4px;gap:4px}
.feedback-mark.has-panel .feedback-tools .btn {min-height:44px;padding:8px 14px}
.feedback-mark.has-panel>.feedback-result-body {position:relative;padding-top:44px;gap:0}
.feedback-mark>.feedback-result-body>.grip {position:absolute;inset:0 0 auto;width:100%;height:44px;margin:0}
.feedback-mark>.feedback-result-body h2 {margin:0}
.feedback-mark>.feedback-result-body .sheet-scroll {gap:16px}
.feedback-stroke-air {fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:blur(5px);opacity:.25;pointer-events:none}
.feedback-recognition {appearance:none;border:0;text-align:center;cursor:pointer;pointer-events:auto;max-height:40%;overflow-y:auto;overscroll-behavior:contain}
.feedback-recognition>span {min-width:0}
.feedback-recognition.is-expanded>span {display:block;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset}
.feedback-recognition.is-expanded>.ic {transform:rotate(180deg)}
.feedback-selected {min-height:64px;resize:none;line-height:22px}
.welcome-tour-lead {margin-bottom:24px}
.tool-access {display:flex;flex-direction:column;gap:20px;min-width:0}
.tool-access>.sheet-title {margin:0}
.tool-access-description {margin:0;font-size:16px;line-height:24px;color:var(--ink-2);overflow-wrap:anywhere}
.tool-access-status {margin:4px 0 0;padding:16px;border-radius:var(--r-row);background:var(--well);font-size:14px;line-height:20px;color:var(--ink)}
.rating-reason {display:flex;flex-direction:column;gap:20px;min-width:0}
.rating-reason p {margin:0;font-size:15px;line-height:22px;color:var(--ink-2)}
.rating-reason textarea {min-height:112px;width:100%;resize:none;font-size:16px;line-height:24px;padding:16px}
.answer-rating button[aria-pressed=true] {background:var(--accent-soft);color:var(--accent-text);animation:rating-selected .26s var(--ease)}
@keyframes rating-selected {0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.answer-rating button[aria-pressed=true]{animation:none}}
.feedback-mark>.feedback-result-body[hidden] {display:none}
.feedback-text:focus-visible,.feedback-selected:focus-visible {outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.feedback-loading {background:color-mix(in srgb,var(--bg) 8%,transparent);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);opacity:1;transition:opacity .24s ease}
.feedback-loading.ready {opacity:0;pointer-events:none}
.feedback-frozen {filter:blur(.55px)}
.feedback-context-shade {opacity:1}
.feature-orb-tip,.feature-bell-tip,.feature-orb-shade {animation:feature-soft-in .32s ease both}
.feature-target-orb img {filter:none;animation:feature-soft-in .32s ease both,feature-orb-rest 3s ease-in-out .32s infinite}
@keyframes feature-soft-in {from{opacity:0}to{opacity:1}}
@keyframes feature-orb-rest {50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.feature-orb-tip,.feature-bell-tip,.feature-orb-shade,.feature-target-orb img{animation:none}}
.inbox-curtain {min-height:min(60dvh,520px)}
.inbox-skel {height:112px;margin-bottom:12px;border-radius:var(--r-card);background:var(--well);animation:inbox-skel 1.1s ease-in-out infinite alternate}
@keyframes inbox-skel {from{opacity:.55}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.inbox-skel{animation:none}}
.feedback-live {position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--live-scale,1));overflow:hidden;pointer-events:none;
border-radius:calc(20px / var(--live-scale,1));contain:layout paint;box-shadow:0 0 0 calc(1px / var(--live-scale,1)) var(--line, rgba(127,127,127,.18))}
.feedback-live * {animation:none!important;transition:none!important;caret-color:transparent!important}
.feedback-live-page {position:relative}
.feedback-focus {display:block!important;opacity:0;transition:opacity .24s ease;border-radius:20px;overflow:hidden}
.has-selection .feedback-focus,.scanning .feedback-focus {opacity:1}
.feedback-focus .feedback-dim {fill:rgba(0,0,0,.4)}
.feedback-text-ask {box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)!important;transition:box-shadow .3s ease}
@media(prefers-reduced-motion:reduce){.feedback-focus{transition:none}}
.paid-tour-panel {grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;outline:none}
.paid-tour-panel > p {min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:360px){.paid-tour-actions{grid-template-columns:1fr 1fr;align-items:stretch}}
.paid-tour-panel.orb-guidance {top:var(--tour-top)!important;bottom:auto!important;padding:24px}
.paid-tour-panel.orb-guidance .paid-tour-actions {grid-template-columns:1fr}
.kn [data-konspekt-practice] {margin-bottom:24px}
[data-week-practice] {display:grid;gap:12px;margin:0 0 24px}
[data-takty-practice] {display:grid;gap:12px;margin:16px 0 24px}
.voice-practice { display:flex; flex-wrap:wrap; gap:10px; align-items:center; max-width:260px; }
.voice-practice-wave { display:flex; align-items:center; gap:3px; min-height:34px; color:inherit; }
.voice-practice-wave i { width:3px; border-radius:3px; background:currentColor; opacity:.7; }
.voice-practice .voice-transcript { flex-basis:100%; margin:2px 0 0; font-size:14px; line-height:1.5; }
.voice-practice .voice-text-toggle { border:1px solid currentColor; border-radius:8px; padding:4px 7px; background:none; color:inherit; font:inherit; }
.list > .item.feature-new-row {background:var(--accent-soft);border-radius:var(--r-row);box-shadow:inset 0 0 0 2px var(--accent);}
.list > .item.feature-new-row::before {display:none;}
.beta-intro {display:flex;gap:12px;align-items:center;margin:8px 0;}
.beta-intro p {margin:0;font-size:20px;line-height:26px;font-weight:500;}
.beta-form .feedback-note {margin:0;}
.beta-form > [role=status]:empty {display:none;}
.thread[data-practice=true] .care-practice-intro {display:grid;gap:20px;padding-top:12px;}
.care-practice-safety {margin:0;text-align:center;font-size:12px;line-height:18px;color:var(--ink-2);}
.care-practice-message {padding:16px;border-radius:var(--r-card);background:var(--well);max-width:290px;}
.care-practice-message b {font-size:14px;color:var(--accent-text);font-weight:500;}
.care-practice-message p {margin:6px 0 0;font-size:16px;line-height:23px;}
.thread[data-practice=true]:not(.practice-sent) .thread-compose .voice-mic {background:var(--accent-text);color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft);}
body.ut-guiding.chat-open .thread[data-practice=true] {padding-bottom:80px;}
.thread[data-practice=true] .thread-log {min-height:0;padding-bottom:20px;}
#sheet :focus-visible,.feedback-result :focus-visible,.thread :focus-visible {outline-offset:-3px;}
.feedback-text:focus-visible {outline:2px solid var(--accent);outline-offset:-2px;}
@property --fade-top {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@property --fade-bottom {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
.sheet-body[data-fade]:not([data-fade=""]),
.sheet-scroll[data-fade]:not([data-fade=""]) {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent 100%);
transition: --fade-top 0.22s ease, --fade-bottom 0.22s ease;
}
.sheet-body[data-fade~="top"],
.sheet-scroll[data-fade~="top"] {
--fade-top: 22px;
}
.sheet-body[data-fade~="bottom"],
.sheet-scroll[data-fade~="bottom"] {
--fade-bottom: 36px;
}
body::after {
content: "";
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 39;
height: calc(36px + var(--safe-b));
background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 82%);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
body.edge-bottom::after {
opacity: 1;
}
body.tg-full::before {
height: calc(var(--full-top) + 20px);
background: linear-gradient(to bottom, var(--bg) var(--full-top), color-mix(in srgb, var(--bg) 0%, transparent) 100%);
-webkit-mask-image: none;
mask-image: none;
transition: height 0.22s ease;
}
body.tg-full:not(.edge-top)::before {
height: var(--full-top);
}
body:not(.tg-full)::before {
content: "";
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 39;
height: 16px;
background: linear-gradient(to bottom, var(--bg), color-mix(in srgb, var(--bg) 0%, transparent));
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
body:not(.tg-full).edge-top::before {
opacity: 1;
}
body.chat-open::after,
body.composing::after,
body.reading::after,
body:has(.pl-top, .flow-top, .thread-head, .ritm-chat-top)::after {
opacity: 0;
}
body.tg-full:has(.pl-top, .flow-top, .thread-head, .ritm-chat-top)::before {
height: var(--full-top);
}
body:not(.tg-full):has(.pl-top, .flow-top, .thread-head, .ritm-chat-top)::before,
body:not(.tg-full).chat-open::before,
body:not(.tg-full).reading::before {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.sheet-body,
.sheet-scroll,
body::after,
body::before {
transition: none;
}
}
.edge-drag-glow {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 204;
width: 120px;
background: radial-gradient(64px 180px at 0 var(--y, 50%), color-mix(in srgb, var(--ib-violet) 55%, transparent),
transparent 100%);
opacity: calc(var(--p, 0) * 0.75);
transform: scaleX(calc(0.55 + var(--p, 0) * 0.45));
transform-origin: left center;
pointer-events: none;
transition: opacity 0.12s linear;
}
.edge-drag-glow.forward {
right: 0;
left: auto;
background: radial-gradient(64px 180px at 100% var(--y, 50%), color-mix(in srgb, var(--ib-violet) 55%, transparent),
transparent 100%);
transform-origin: right center;
}
.edge-drag-glow.ready {
opacity: 0.95;
}
.edge-drag-glow.gone {
opacity: 0;
transition: opacity 0.24s ease;
}
@media (prefers-reduced-motion: reduce) {
.edge-drag-glow {
transition: none;
}
}
.pl-done-fx {
position: relative;
display: grid;
place-items: center;
width: 136px;
height: 136px;
margin: 0 0 8px;
color: var(--ib-violet);
}
.pl-done-fx > * {
grid-area: 1 / 1;
}
.pl-done-fx .ld-ring {
animation:
pl-done-tremble 0.36s ease-in-out 0.98s both,
pl-done-dissolve 0.5s ease-in 1.34s forwards;
}
.pl-done-light {
width: 136px;
height: 136px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--ib-violet) 70%, #fff) 0%,
color-mix(in srgb, var(--ib-violet) 42%, transparent) 42%, transparent 70%);
opacity: 0;
transform: scale(0.35);
filter: blur(4px);
animation: pl-done-bloom 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.36s forwards;
}
.pl-done-fx .pl-done-orb {
width: 104px;
height: 104px;
margin: 0;
opacity: 0;
transform: scale(0.7);
filter: blur(8px);
animation: pl-done-orb-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}
.pl-done-fx.still .pl-done-light {
opacity: 0.5;
transform: none;
animation: none;
}
.pl-done-fx.still .pl-done-orb {
opacity: 1;
transform: none;
filter: none;
animation: none;
}
.pl-end.pl-fx > .pl-title {
animation: pl-done-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.7s both;
}
.pl-end.pl-fx > :not(.pl-done-fx):not(.pl-title) {
animation: pl-done-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.9s both;
}
@keyframes pl-done-tremble {
0%, 100% { transform: none; }
18% { transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }
36% { transform: translate(1.6px, -0.4px) rotate(1.4deg); }
54% { transform: translate(-1px, 0.3px) rotate(-0.9deg); }
72% { transform: translate(0.7px, 0) rotate(0.5deg); }
88% { transform: translate(-0.3px, 0) rotate(-0.2deg); }
}
@keyframes pl-done-dissolve {
to {
opacity: 0;
filter: blur(6px);
transform: scale(1.25);
}
}
@keyframes pl-done-bloom {
0% { opacity: 0; transform: scale(0.35); }
55% { opacity: 1; transform: scale(1.12); }
100% { opacity: 0.5; transform: scale(1); }
}
@keyframes pl-done-orb-in {
to {
opacity: 1;
transform: none;
filter: none;
}
}
@keyframes pl-done-rise {
from {
opacity: 0;
transform: translateY(10px);
filter: blur(4px);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.pl-done-fx .ld-ring,
.pl-done-light,
.pl-done-fx .pl-done-orb,
.pl-end.pl-fx > * {
animation: none;
}
.pl-done-fx .ld-ring {
display: none;
}
.pl-done-light {
opacity: 0.5;
transform: none;
}
.pl-done-fx .pl-done-orb {
opacity: 1;
transform: none;
filter: none;
}
}
.streak-screen .sk-hero {
margin: 4px 0 16px;
padding: 20px 16px 16px;
border-radius: var(--r-group);
background: color-mix(in srgb, var(--ib-pink) 9%, var(--well));
}
.sk-head {
display: flex;
align-items: center;
gap: 14px;
}
.sk-head .sk-flame {
width: 52px;
height: 52px;
}
.sk-head .sk-flame .ic {
width: 28px;
height: 28px;
}
.sk-count {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.sk-count b {
font-size: 44px;
line-height: 48px;
font-weight: 600;
letter-spacing: -1px;
color: var(--ink);
}
.sk-count span {
font-size: 15px;
line-height: 20px;
color: var(--ink-2);
}
.sk-best {
margin: 10px 0 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.sk-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px 6px;
margin: 18px 0 0;
justify-items: center;
}
.sk-wd {
font-size: 12px;
line-height: 16px;
color: var(--ink-3);
}
.sk-cell {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--ink-3);
background: color-mix(in srgb, var(--ink) 5%, transparent);
animation: sk-cell-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
animation-delay: calc(var(--k, 0) * 14ms);
}
.sk-cell i {
font-style: normal;
}
.sk-cell .ic {
width: 16px;
height: 16px;
stroke-width: 2.4;
}
.sk-cell.sk-pad {
visibility: hidden;
animation: none;
}
.sk-cell[data-state="future"] {
background: transparent;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
}
.sk-cell[data-state="before"] {
background: transparent;
color: color-mix(in srgb, var(--ink) 22%, transparent);
}
.sk-cell[data-state="marked"] {
background: var(--ib-pink);
color: #fff;
}
.sk-cell[data-state="frozen"] {
background: color-mix(in srgb, var(--ib-violet) 24%, var(--bg));
color: var(--ib-violet);
}
.sk-cell[data-state="missed"] {
background: color-mix(in srgb, var(--ink) 7%, transparent);
color: var(--ink-3);
}
.sk-cell[data-state="today"] {
position: relative;
background: transparent;
color: var(--ink);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ib-pink) 30%, transparent);
}
.sk-cell[data-state="today"]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ib-pink) 70%, transparent);
animation: sk-today 2.4s ease-in-out 0.8s infinite;
pointer-events: none;
}
.sk-legend {
display: flex;
justify-content: center;
gap: 16px;
margin: 14px 0 0;
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.sk-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sk-legend span::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.sk-legend span[data-state="marked"]::before {
background: var(--ib-pink);
}
.sk-legend span[data-state="frozen"]::before {
background: color-mix(in srgb, var(--ib-violet) 45%, var(--bg));
}
.sk-today {
margin: 0 0 12px;
font-size: 15px;
line-height: 22px;
color: var(--ink);
}
.sk-today.done {
color: var(--ink-2);
}
.streak-screen > .btn {
margin: 0 0 20px;
}
.streak-screen .sk-list {
margin: 0 0 16px;
}
.sk-row .txt .pbar.sk-bar {
margin: 8px 0 2px;
}
.sk-row .txt .pbar.sk-bar i {
background: var(--ib-amber);
}
.sk-shields {
display: flex;
gap: 4px;
flex: none;
align-self: center;
}
.sk-shields i {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
color: var(--ink-3);
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.sk-shields i.on {
color: #fff;
background: var(--ib-violet);
}
.sk-shields .ic {
width: 14px;
height: 14px;
stroke-width: 2.2;
}
@keyframes sk-cell-in {
from {
opacity: 0;
transform: scale(0.6);
}
}
@keyframes sk-today {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media (max-width: 350px) {
.sk-cell {
width: 30px;
height: 30px;
font-size: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-cell,
.sk-cell[data-state="today"]::after {
animation: none;
}
}
.home-streak {
appearance: none;
display: block;
width: 100%;
margin: 16px 0 0;
padding: 16px 16px 14px;
border: 0;
border-radius: var(--r-group);
background: color-mix(in srgb, var(--ib-pink) 9%, var(--well));
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.12s ease;
}
.home-streak:active {
transform: scale(0.985);
}
.home-streak .hs-top {
display: flex;
align-items: center;
gap: 12px;
}
.home-streak .sk-flame {
width: 44px;
height: 44px;
flex: none;
}
.home-streak .sk-flame .ic {
width: 24px;
height: 24px;
}
.home-streak .hs-count {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.home-streak .hs-n {
display: flex;
align-items: baseline;
gap: 6px;
}
.home-streak .hs-n b {
font-size: 28px;
line-height: 32px;
font-weight: 600;
letter-spacing: -0.5px;
}
.home-streak .hs-n span {
font-size: 16px;
line-height: 20px;
}
.home-streak .hs-title {
font-size: 19px;
line-height: 24px;
font-weight: 500;
}
.home-streak .hs-line {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.home-streak .hs-fz {
display: inline-flex;
align-items: center;
gap: 4px;
flex: none;
align-self: flex-start;
padding: 6px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--ib-violet) 16%, transparent);
color: var(--ib-violet);
font-size: 14px;
line-height: 18px;
}
.home-streak .hs-fz .ic {
width: 16px;
height: 16px;
}
.home-streak .hs-week {
display: grid;
margin-top: 14px;
gap: 6px 4px;
}
.home-streak .sk-cell {
width: 32px;
height: 32px;
}
.home-streak .sk-wd.on {
color: var(--ink);
font-weight: 500;
}
.sk-row .bubble .ic,
.home-streak .hs-fz .ic {
stroke-width: 2.4;
}
.streak-screen > .btn + .btn.sk-share {
margin-top: -12px;
}
.sk-card-note {
margin: -6px 0 14px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.sk-card-prev {
display: grid;
place-items: center;
margin: 0 0 16px;
}
.sk-card-prev img {
display: block;
width: 158px;
height: 281px;
border-radius: 16px;
background: #f5e9ff;
object-fit: cover;
}
.sk-card-more {
display: grid;
gap: 8px;
margin-top: 8px;
}
.sk-card-more.two {
grid-template-columns: 1fr 1fr;
}
.lx-hero {
margin: 20px 0 16px;
}
.lx-top + .lx-title {
margin-top: 8px;
}
.lx-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 16px;
}
.lx-photo {
flex: none;
width: 40px;
height: 40px;
margin: -6px 0 -10px;
border-radius: 12px;
object-fit: cover;
}
.lx-num {
display: flex;
align-items: baseline;
gap: 8px;
margin: 8px 0 0;
color: var(--dark-ink);
}
.lx-num b {
font-size: 48px;
line-height: 52px;
font-weight: 500;
letter-spacing: -1px;
font-variant-numeric: tabular-nums;
}
.lx-num span {
font-size: 17px;
line-height: 22px;
color: var(--dark-ink-2);
}
.lx-num.pending b {
color: var(--dark-ink-2);
animation: breathe 1.2s ease-in-out infinite;
}
.lx-title {
margin: 0;
font-size: 22px;
line-height: 28px;
font-weight: 500;
color: var(--dark-ink);
}
.lx-words {
margin: 8px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--dark-ink-2);
}
.lx-hero .lux-points {
margin: 12px 0 0;
color: var(--dark-ink-2);
}
.lx-scale {
margin: 22px 0 0;
}
.lx-track {
position: relative;
display: flex;
align-items: center;
height: 18px;
}
.lx-bar {
display: flex;
gap: 3px;
width: 100%;
height: 6px;
}
.lx-seg {
flex: 1;
border-radius: 3px;
transition: opacity 0.4s ease;
}
.lx-seg.z-evening {
background: var(--z-evening);
}
.lx-seg.z-room {
background: var(--z-room);
}
.lx-seg.z-window {
background: var(--z-window);
}
.lx-seg.z-outdoor {
background: var(--z-outdoor);
}
.lx-seg.dim {
opacity: 0.32;
}
.lx-knob {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 0 3px var(--dark-card);
transition: left 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lx-labels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
margin: 8px 0 0;
font-size: 12px;
line-height: 16px;
color: var(--dark-ink-2);
text-align: center;
}
.lx-labels .on {
font-weight: 500;
color: var(--dark-ink);
}
.lx-acts {
display: grid;
gap: 4px;
margin: 22px 0 0;
}
.lx-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 20px;
}
.lx-link {
appearance: none;
min-height: 40px;
padding: 0 4px;
border: 0;
background: none;
font: inherit;
font-size: 15px;
font-weight: 500;
color: var(--dark-ink);
cursor: pointer;
}
.lx-link:active {
opacity: 0.6;
}
.lx-after .list {
margin: 0 0 12px;
}
.lx-after .callout {
margin: 0 0 12px;
}
@media (prefers-reduced-motion: reduce) {
.lx-knob,
.lx-seg {
transition: none;
}
.lx-num.pending b {
animation: none;
}
}
.lx-live {
display: grid;
gap: 12px;
}
.lx-view {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
max-height: 58vh;
border-radius: 28px;
background: #121214;
isolation: isolate;
}
.lx-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.06);
transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
}
.lx-video.on {
opacity: 1;
transform: none;
}
.lx-view::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 55%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
pointer-events: none;
z-index: 1;
}
.lx-reticle {
position: absolute;
left: 50%;
top: 40%;
width: 88px;
height: 88px;
margin: -44px 0 0 -44px;
border: 1.5px solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
z-index: 2;
animation: lx-breathe 2.8s ease-in-out infinite;
}
.lx-reticle::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: #ffffff;
}
.lx-view-top {
position: absolute;
top: 16px;
left: 18px;
right: 16px;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.lx-live-k {
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.72px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.lx-live-pill {
padding: 6px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.38);
color: #ffffff;
font-size: 13px;
line-height: 16px;
white-space: nowrap;
}
.lx-view-bottom {
position: absolute;
left: 20px;
right: 20px;
bottom: 18px;
z-index: 2;
color: #ffffff;
}
.lx-live-read {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
min-height: 60px;
}
.lx-live-num {
font-size: 56px;
line-height: 60px;
font-weight: 600;
letter-spacing: -1.4px;
}
.lx-live-unit {
font-size: 19px;
line-height: 24px;
color: rgba(255, 255, 255, 0.82);
}
.lx-live-sub {
margin: 4px 0 0;
min-height: 22px;
font-size: 16px;
line-height: 22px;
color: rgba(255, 255, 255, 0.86);
}
.lx-live-panel .lx-scale {
margin: 0;
}
.lx-knob.live {
transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lx-breathe {
0%,
100% {
transform: scale(1);
opacity: 0.85;
}
50% {
transform: scale(1.06);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.lx-video,
.lx-knob.live {
transition: none;
}
.lx-reticle {
animation: none;
}
}
.caf-hero {
margin: 20px 0 20px;
}
.caf-share {
flex: none;
padding: 3px 10px;
border-radius: 999px;
font-size: 13px;
line-height: 18px;
color: var(--dark-ink-2);
background: var(--dark-pill);
}
.caf-num.l-some {
color: var(--amber);
}
.caf-num.l-high {
color: var(--c-dim);
}
.caf-hero .caf-head {
margin-bottom: 4px;
}
.caf-dial {
margin: 14px 0 0;
}
.caf-dial .cd {
display: block;
margin: 0 auto;
overflow: visible;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.cd-track {
fill: none;
stroke: var(--dark-ink);
stroke-opacity: 0.09;
}
.cd-tick {
stroke: var(--dark-ink);
stroke-opacity: 0.24;
stroke-width: 1.5;
stroke-linecap: round;
}
.cd-hour {
fill: var(--dark-ink-2);
font-size: 11px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.cd-late {
fill: none;
stroke: var(--amber);
stroke-linecap: round;
}
.cd-sleep {
fill: none;
stroke: var(--accent);
stroke-linecap: round;
}
.cd .ic.cd-moon,
.cd .ic.cd-wake {
color: #fff;
stroke-width: 2.2;
}
.cd-ribbon {
fill: var(--amber);
fill-opacity: 0.88;
}
.cd-dots circle {
fill: var(--amber);
stroke: var(--dark-card);
stroke-width: 2;
}
.cd-time {
fill: var(--dark-ink);
font-size: 34px;
font-weight: 600;
letter-spacing: -0.5px;
}
.cd.sm .cd-time {
font-size: 26px;
}
.cd-name {
fill: var(--dark-ink-2);
font-size: 13px;
}
.cd-note {
fill: var(--dark-ink-2);
font-size: 12px;
}
.cd-note.late {
fill: var(--amber);
}
.cd-knob {
cursor: grab;
outline: none;
}
.cd-knob circle {
fill: #fff;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
transform-box: fill-box;
transform-origin: center;
transition: transform 0.18s var(--spring), fill 0.18s ease;
}
.cd-knob .ic {
color: #1d1d1f;
stroke-width: 2.2;
}
.cd-knob.on circle {
transform: scale(1.14);
}
.cd-knob.late circle {
fill: var(--amber);
}
.cd-knob:focus-visible circle {
stroke: var(--accent);
stroke-width: 3;
}
.caf-dial-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
font-size: 13px;
line-height: 18px;
color: var(--dark-ink-2);
}
.caf-dial-foot .chip {
flex: none;
background: var(--dark-pill);
color: var(--dark-ink);
}
@media (prefers-reduced-motion: reduce) {
.cd-knob circle {
transition: none;
}
}
.caf-drinks {
display: flex;
gap: 8px;
margin: 0 calc(var(--gutter) * -1);
padding: 2px var(--gutter) 4px;
overflow-x: auto;
scroll-padding-inline: var(--gutter);
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.caf-drinks::-webkit-scrollbar {
display: none;
}
.caf-drink {
appearance: none;
display: flex;
flex: none;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-height: 56px;
padding: 9px 14px;
border: 0;
border-radius: 16px;
background: var(--well);
text-align: left;
cursor: pointer;
scroll-snap-align: start;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.12s ease;
}
.caf-drink:active {
transform: scale(0.97);
}
.caf-drink b {
font-size: 15px;
line-height: 20px;
font-weight: 500;
white-space: nowrap;
}
.caf-drink span {
font-size: 13px;
line-height: 18px;
font-variant-numeric: tabular-nums;
color: var(--ink-2);
}
.caf-drink.on {
color: var(--btn-ink);
background: var(--btn);
}
.caf-drink.on span {
color: inherit;
opacity: 0.7;
}
.caf-verdict {
flex-direction: column;
gap: 6px;
}
.caf-verdict b {
font-size: 15px;
font-weight: 500;
}
.caf-today .caf-removed {
margin: 0 0 10px;
font-size: 15px;
line-height: 22px;
}
.caf-today .caf-list {
margin: 0 0 4px;
}
.caf-undo {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
margin: 0 0 12px;
padding: 0 4px;
border: 0;
background: none;
font: inherit;
font-size: 15px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.caf-undo .ic {
width: 16px;
height: 16px;
color: var(--ink-2);
}
.home-widgets > .hw-wide {
grid-column: 1 / -1;
min-width: 0;
}
.home-widgets > .hw-wide > .home-streak,
.home-widgets > .hw-wide > .home-kept {
margin: 0;
}
.home-widgets > * {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.home-streak.line {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px 12px 12px;
}
.home-streak.line .txt {
flex: 1;
min-width: 0;
display: grid;
gap: 2px;
}
.home-streak.line .txt b {
font-size: 16px;
line-height: 21px;
font-weight: 600;
}
.home-streak.line .txt span {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.home-streak.line .hs-fz {
position: static;
margin: 0;
}
.home-streak.line .go {
flex: none;
color: var(--ink-3);
}
.home-tune {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin: 18px 0 4px;
padding: 12px;
border: 0;
border-radius: var(--r-row);
background: transparent;
color: var(--ink-2);
font: inherit;
font-size: 15px;
line-height: 20px;
cursor: pointer;
}
.home-tune .ic {
width: 18px;
height: 18px;
}
.home-tune:active {
background: var(--well);
}
.he-head p {
color: var(--ink-2);
}
.he-list {
position: relative;
display: grid;
gap: 8px;
margin-top: 14px;
background: none;
}
.he-list > .he-row {
display: flex;
align-items: center;
gap: 12px;
min-height: 60px;
padding: 10px 12px;
border-radius: var(--r-row);
background: var(--well);
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, opacity 0.2s ease;
}
.he-list > .item + .item::before {
display: none;
}
.he-row .txt {
flex: 1;
min-width: 0;
}
.he-row.pinned {
background: transparent;
box-shadow: inset 0 0 0 1px var(--line);
}
.he-row.pinned .bubble {
opacity: 0.55;
}
.he-row.spare {
background: transparent;
box-shadow: inset 0 0 0 1px var(--line);
}
.he-row.spare .bubble,
.he-row.spare .txt {
opacity: 0.6;
}
.he-row.focus {
animation: he-focus 1.2s ease;
}
@keyframes he-focus {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
30% { box-shadow: 0 0 0 3px var(--accent); }
}
.he-btn {
appearance: none;
display: grid;
place-items: center;
flex: none;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 13px;
color: #fff;
cursor: pointer;
}
.he-btn .ic {
width: 16px;
height: 16px;
stroke-width: 2.6;
}
.he-btn.he-off {
background: var(--bad, #ef4444);
}
.he-btn.he-on {
background: var(--good, #22c55e);
}
.he-btn.he-lock {
background: none;
color: var(--ink-3);
cursor: default;
}
.he-grip {
display: grid;
place-items: center;
flex: none;
width: 36px;
height: 44px;
margin: -8px -6px -8px 0;
color: var(--ink-3);
touch-action: none;
cursor: grab;
}
.he-grip .ic {
width: 20px;
height: 20px;
}
.he-list.sorting .he-row:not(.dragging) {
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.he-row.dragging {
position: relative;
z-index: 2;
transition: none;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
cursor: grabbing;
}
.he-cap,
.he-style-cap {
display: block;
margin: 22px 0 0;
font-size: 13px;
line-height: 18px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink-3);
}
.he-style .seg {
margin-top: 8px;
}
.he-foot {
display: grid;
gap: 8px;
margin-top: 24px;
}
@media (prefers-reduced-motion: reduce) {
.he-list > .he-row,
.he-list.sorting .he-row:not(.dragging) {
transition: none;
}
.he-row.focus {
animation: none;
}
}
.soundspace{background:var(--bg);color:var(--ink);min-height:calc(100svh - 110px);padding-bottom:24px;isolation:isolate}
.ss-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:28px}
.ss-brand{font-size:16px;font-weight:500;letter-spacing:-.2px}
.soundspace button{border:0;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.soundspace button:focus-visible,.ss-mini button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.soundspace svg,.ss-mini svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ss-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--well);color:var(--ink);flex:none}
.ss-hero{text-align:center;position:relative}
.ss-eyebrow{font-size:12px;line-height:18px;color:var(--ink-2);margin:0 0 8px}
.ss-title{font-size:30px;line-height:1.14;letter-spacing:-1px;font-weight:500;margin:0 0 10px;text-wrap:balance}
.ss-detail{font-size:14px;line-height:21px;color:var(--ink-2);margin:0 auto;max-width:340px;min-height:21px;text-wrap:balance}
.ss-stage{position:relative;max-width:328px;width:100%;aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.ss-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ss-play{position:relative;width:68px;height:68px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:transform .24s var(--ease),opacity .24s}
.ss-play:active{transform:scale(.89)}.ss-play svg{width:27px;height:27px;stroke-width:2}.ss-play[aria-busy=true]{animation:ss-loading 1.6s ease-in-out infinite}
@keyframes ss-loading{50%{opacity:.45;transform:scale(.94)}}
.ss-mix-chips{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:44px;margin:-8px 0 18px}
.ss-mix-chip{background:var(--well);color:var(--ink-2);min-height:40px;border-radius:24px;padding:8px 14px;display:flex;gap:7px;align-items:center;font-size:14px!important;line-height:20px}
.ss-mix-chip{box-sizing:border-box;max-width:calc((100% - 58px)/2);min-width:0}.ss-mix-chip>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ss-mix-chip svg{width:16px;height:16px}.ss-mix-edit{display:grid;place-items:center;width:42px;height:42px;background:var(--well);color:var(--ink);border-radius:50%}
.ss-controls{display:flex;align-items:center;justify-content:center;gap:28px}
.ss-control{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:transparent;color:var(--ink);padding:0 4px;font-size:14px!important}
.ss-control svg{width:19px;height:19px}.ss-control[aria-pressed=true]{color:var(--accent)}
.ss-status{font-size:12px;line-height:18px;color:var(--ink-2);margin:10px 12px 0;min-height:18px}
.ss-collection{margin-top:34px;border-top:1px solid var(--line);padding-top:24px}
.ss-collection-tabs{display:flex;gap:24px;margin-bottom:22px}.ss-collection-tab{background:transparent;color:var(--ink-2);font-size:22px!important;letter-spacing:-.5px;font-weight:500!important;padding:4px 0 10px;min-height:44px;border-bottom:2px solid transparent!important}
.ss-collection-tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)!important}
.ss-modes,.ss-filters{display:flex;gap:8px;overflow:auto;scrollbar-width:none;max-width:100%;padding-bottom:4px}
.ss-mode,.ss-filter{border-radius:24px;background:var(--well);color:var(--ink-2);min-height:40px;padding:9px 19px;white-space:nowrap;font-size:14px!important}
.ss-mode[aria-pressed=true],.ss-filter[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.ss-scenes{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px;margin-top:18px}
.ss-scene{min-width:0;display:flex;align-items:center;flex-direction:column;background:transparent;color:var(--ink);text-align:center;border-radius:18px;padding:0 4px 10px;transition:transform .24s var(--ease)}
.ss-scene:active{transform:scale(.95)}.ss-scene-orb{display:block;width:min(100%,150px);height:auto;aspect-ratio:1;border-radius:50%;background:var(--well);margin-bottom:12px;border:1px solid transparent;transition:border-color .3s,transform .3s}
.ss-scene.chosen .ss-scene-orb{border-color:var(--ink-2);transform:scale(.96)}
.ss-scene-title{font-size:16px;line-height:21px;font-weight:500;letter-spacing:-.2px}.ss-scene-detail{font-size:12px;line-height:18px;color:var(--ink-2);display:block;margin-top:6px;max-width:165px;text-wrap:balance}
.ss-collection-note{font-size:12px;line-height:18px;color:var(--ink-2);text-align:center;margin:24px 10px 0}
.ss-search{display:flex;align-items:center;gap:10px;background:var(--well);border-radius:16px;padding:0 14px;margin-bottom:16px;color:var(--ink-2)}
.ss-search input,.ss-picker-search{border:0;color:var(--ink);background:transparent;font:inherit;font-size:16px;min-height:48px;width:100%;min-width:0;outline-offset:-3px}.ss-search:focus-within{box-shadow:inset 0 0 0 1px var(--ink-2)}
.ss-library{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.ss-sound{display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;background:var(--well);color:var(--ink);min-height:84px;padding:12px;border-radius:18px}
.ss-sound-orb{width:52px;height:52px;flex:none}.ss-sound>svg:last-child{width:18px;height:18px;margin-left:auto}
.ss-sound-words{min-width:0;flex:1}.ss-sound-words b{font-size:16px;font-weight:500;display:block;line-height:21px}.ss-sound-words span{font-size:12px;line-height:18px;color:var(--ink-2);display:block;margin-top:4px}.ss-sound.chosen{box-shadow:inset 0 0 0 1px var(--ink-2)}.ss-sound:disabled{opacity:.6;cursor:default}
.ss-immersed .ss-collection{display:none}.ss-immersed .ss-hero{min-height:calc(100svh - 220px);display:flex;flex-direction:column;justify-content:center}.ss-immersed .ss-stage{flex:none;max-width:390px}.ss-immersed .ss-mix-chips{opacity:.6}.ss-immersed .ss-header{margin-bottom:0}
.ss-sheet-wrap{position:fixed;inset:0;z-index:5000;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding-top:max(70px,var(--tg-content-safe-area-inset-top,0px));backdrop-filter:none}
.ss-sheet{box-sizing:border-box;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-bottom:0;border-radius:28px 28px 0 0;padding:22px 22px max(28px,env(safe-area-inset-bottom));max-width:560px;width:100%;max-height:84svh;overflow:auto;overscroll-behavior:contain;animation:ss-sheet-in .28s var(--ease)}
@keyframes ss-sheet-in{from{transform:translateY(24px);opacity:.3}to{transform:none;opacity:1}}
.ss-sheet-head{position:sticky;top:0;z-index:1;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.ss-sheet h2{margin:0;font-size:24px;font-weight:500;letter-spacing:-.6px}.ss-sheet h3{font-size:17px;margin:25px 0 10px;font-weight:500}
.ss-note{font-size:14px;line-height:21px;color:var(--ink-2);margin:12px 0 20px}.ss-credit{display:block;color:var(--ink);font-size:14px;line-height:22px;margin:12px 0}
.ss-timers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ss-timer-option{border-radius:14px;background:var(--well);color:var(--ink);min-height:52px;font-size:15px!important}.ss-timer-option:last-child{grid-column:1/-1}
.ss-slider{display:block;margin:22px 0;min-width:0}.ss-slider-label{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin-bottom:8px}.ss-slider-label output{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ss-slider input{display:block;width:100%;height:34px;margin:0;accent-color:var(--ink);touch-action:pan-x}.ss-slider-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2)}
.ss-layer{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line)}.ss-layer>.ss-slider{flex:1}.ss-layer>.ss-icon{width:40px;height:40px}
.ss-wide{width:100%;min-height:50px;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 16px;font-size:15px!important}
.ss-add{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 28px}.ss-add svg{width:18px;height:18px}.ss-picker-search{background:var(--well);border-radius:14px;padding:0 14px;box-sizing:border-box;margin-bottom:16px}.ss-picker-list{display:flex;flex-direction:column;gap:8px}
.ss-mini{position:fixed;z-index:55;left:50%;transform:translateX(-50%);bottom:calc(var(--tabs-h,64px) + 22px + var(--safe-b,0px));width:calc(100% - 40px);max-width:520px;display:flex;align-items:center;gap:8px;background:var(--dark-card);color:var(--dark-ink);border:1px solid var(--dark-pill);border-radius:22px;padding:6px 10px;box-shadow:none}
.ss-mini button{border:0;cursor:pointer;background:transparent;color:inherit;font:inherit;min-height:44px}.ss-mini-open{flex:1;text-align:left;padding:0 12px;font-size:14px!important}.ss-mini-action{width:40px;display:grid;place-items:center}.ss-mini svg{width:20px;height:20px}
body.full .ss-mini{bottom:calc(16px + var(--safe-b,0px))}body.soundspace-open .ss-mini,body.composing .ss-mini,body:has(.sheet:not([hidden])) .ss-mini{display:none}
body.has-sound-mini:not(.soundspace-open) .app{padding-bottom:calc(var(--tabs-h,64px) + 118px + var(--safe-b,0px))}
@media(max-width:350px){.ss-header{margin-bottom:24px}.ss-title{font-size:26px}.ss-stage{max-width:268px}.ss-controls{gap:18px}.ss-control{font-size:13px!important}.ss-mix-chip{font-size:12px!important;padding:8px 10px}.ss-sheet{padding-left:18px;padding-right:18px}.ss-scene-title{font-size:15px}.ss-sound-orb{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.soundspace *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.pk-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 4px 0 0;
}
.pk-head .title {
margin: 0;
}
.pk-bank {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
height: 40px;
padding: 0 14px 0 12px;
border: 0;
border-radius: 20px;
background: var(--well);
color: var(--ink);
font: inherit;
cursor: pointer;
}
.pk-bank .ic {
width: 18px;
height: 18px;
color: var(--accent);
}
.pk-bank b {
font-size: 17px;
font-weight: 700;
}
.pk-bank.pop {
animation: pk-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pk-pop {
0% { transform: scale(1); }
40% { transform: scale(1.18); }
100% { transform: scale(1); }
}
.pk-lead {
margin: 8px 0 16px;
color: var(--ink-2);
}
.pk-label {
margin-top: 20px;
}
.pk-gift,
.pk-reel {
position: relative;
overflow: hidden;
margin: 0 0 14px;
padding: 18px;
border-radius: 28px;
isolation: isolate;
}
.pk-gift-top {
display: flex;
align-items: center;
gap: 8px;
}
.pk-gift-txt {
flex: 1;
min-width: 0;
}
.pk-gift h2,
.pk-reel h2 {
margin: 6px 0 0;
font-size: 22px;
line-height: 28px;
font-weight: 600;
}
.pk-sub {
margin: 6px 0 0;
font-size: 14px;
line-height: 20px;
opacity: 0.72;
}
.pk-orb-box {
position: relative;
flex: none;
width: 104px;
height: 128px;
}
@media (max-width: 359px) {
.pk-orb-box {
width: 84px;
height: 104px;
}
}
.pk-orb {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
animation: pk-bob 3.2s ease-in-out infinite;
}
.pk-glow {
position: absolute;
inset: 8px -10px -6px;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
filter: blur(12px);
opacity: 0.7;
}
@keyframes pk-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.pk-btn {
width: 100%;
margin-top: 16px;
}
.pk-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
margin-top: 16px;
}
.pk-day {
display: grid;
justify-items: center;
gap: 4px;
}
.pk-day i {
display: grid;
place-items: center;
width: 100%;
max-width: 40px;
aspect-ratio: 1;
border-radius: 12px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.72);
font-style: normal;
}
.pk-day i b {
font-size: 12px;
font-weight: 700;
}
.pk-day i .ic {
width: 16px;
height: 16px;
}
.pk-day small {
font-size: 11px;
line-height: 14px;
opacity: 0.55;
}
.pk-day.done i {
background: var(--accent);
color: #fff;
}
.pk-day.today i {
background: #fff;
color: #121212;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent);
animation: pk-ring 1.8s ease-in-out infinite;
}
.pk-day.chest i {
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
color: #fff;
}
@keyframes pk-ring {
0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
}
.pk-gift.burst::after {
content: "";
position: absolute;
z-index: 0;
top: 18px;
right: 18px;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--accent) 60%, transparent) 45%, transparent 70%);
animation: pk-burst 0.9s ease-out forwards;
pointer-events: none;
}
@keyframes pk-burst {
0% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(3.2); opacity: 0; }
}
.pk-fly {
position: absolute;
z-index: 3;
top: 64px;
right: 24px;
white-space: nowrap;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
animation: pk-fly 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pk-fly {
0% { transform: translateY(20px) scale(0.6); opacity: 0; }
20% { transform: translateY(0) scale(1.05); opacity: 1; }
70% { transform: translateY(-20px) scale(1); opacity: 1; }
100% { transform: translateY(-120px) scale(0.7); opacity: 0; }
}
.pk-reel-head {
margin-bottom: 14px;
}
.pk-win {
position: relative;
height: 276px;
overflow: hidden;
border-radius: 22px;
background: rgba(255, 255, 255, 0.05);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.pk-strip {
display: grid;
justify-items: center;
gap: 12px;
padding-top: 6px;
will-change: transform, filter;
}
.pk-tile {
display: grid;
place-items: center;
width: 84px;
height: 84px;
border-radius: 24px;
background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 85%, #fff), var(--tone));
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.35), 0 8px 20px color-mix(in srgb, var(--tone) 35%, transparent);
}
.pk-tile img {
width: 64px;
height: 64px;
object-fit: contain;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}
.t-violet { --tone: #ad46ff; }
.t-amber { --tone: #fdc700; }
.t-sky { --tone: #00a6f4; }
.t-orange { --tone: #ff8a3d; }
.t-pink { --tone: #f6339a; }
.t-blue { --tone: #2b7fff; }
.t-green { --tone: #00bc7d; }
.t-accent { --tone: var(--accent); }
.pk-frame {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
border-radius: 30px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);
pointer-events: none;
}
.pk-win.won .pk-frame {
animation: pk-win 1.4s ease-out;
}
@keyframes pk-win {
0% { box-shadow: 0 0 0 2px #fff, 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
30% { box-shadow: 0 0 0 4px #fff, 0 0 48px color-mix(in srgb, var(--accent) 90%, transparent); }
100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); }
}
.pk-win.locked .pk-strip {
opacity: 0.35;
filter: grayscale(0.6) blur(1px);
}
.pk-prize {
min-height: 24px;
margin: 14px 0 0;
font-size: 18px;
line-height: 24px;
font-weight: 600;
text-align: center;
}
.pk-prize.ask {
font-weight: 500;
opacity: 0.7;
}
.pk-spins {
margin: 4px 0 0;
font-size: 13px;
line-height: 18px;
text-align: center;
opacity: 0.6;
}
.pk-lock {
display: grid;
justify-items: center;
gap: 6px;
margin-top: 14px;
text-align: center;
}
.pk-lock .ic {
width: 22px;
height: 22px;
opacity: 0.8;
}
.pk-lock b {
font-size: 16px;
}
.pk-lock span {
font-size: 14px;
line-height: 20px;
opacity: 0.7;
}
.pk-lock .btn {
margin-top: 8px;
}
.pk-shop-img {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 85%, #fff), var(--tone));
color: #fff;
}
.pk-shop-img img {
width: 34px;
height: 34px;
object-fit: contain;
}
.pk-shop-img .ic {
width: 22px;
height: 22px;
stroke-width: 2.2;
}
.pk-why {
color: var(--ink-3);
}
.btn.small.pk-buy {
flex: none;
min-width: 0;
padding-left: 14px;
padding-right: 14px;
white-space: nowrap;
}
.pk-buy.off,
.pk-buy.off:disabled {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--line);
color: var(--ink-3);
opacity: 1;
}
.pk-rules {
appearance: none;
display: block;
margin: 16px auto 8px;
padding: 10px 14px;
border: 0;
background: none;
color: var(--ink-2);
font: inherit;
font-size: 14px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.perks-tile {
flex-direction: row;
align-items: center;
gap: 8px;
}
.perks-tile .pt-txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.perks-tile .pt-orb {
flex: none;
width: 56px;
height: 68px;
object-fit: contain;
animation: pk-bob 3.2s ease-in-out infinite;
}
.perks-tile.calm .pt-orb {
animation: none;
opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
.pk-orb,
.perks-tile .pt-orb,
.pk-day.today i,
.pk-fly,
.pk-gift.burst::after,
.pk-win.won .pk-frame,
.pk-bank.pop {
animation: none;
}
}
.pk-cb-list {
display: grid;
gap: 8px;
margin: 4px 0 12px;
}
.pk-cb-row {
appearance: none;
display: flex;
align-items: center;
gap: 14px;
min-height: 76px;
padding: 12px 14px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: opacity 0.2s ease, box-shadow 0.2s ease, background-color 0.15s ease;
}
.pk-cb-row:active:not(:disabled) {
background: var(--well-2);
}
.pk-cb-row .txt {
display: grid;
flex: 1;
gap: 2px;
min-width: 0;
}
.pk-cb-row b {
font-size: 17px;
line-height: 22px;
font-weight: 600;
}
.pk-cb-row .txt span {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.pk-cb-row.on {
box-shadow: inset 0 0 0 2px var(--accent);
}
.pk-cb-row.dim {
opacity: 0.45;
}
.pk-cb-row:disabled {
cursor: default;
}
.pk-cb-img {
display: grid;
place-items: center;
flex: none;
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 85%, #fff), var(--tone));
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.35), 0 6px 14px color-mix(in srgb, var(--tone) 30%, transparent);
color: #fff;
}
.pk-cb-img img {
width: 42px;
height: 42px;
object-fit: contain;
}
.pk-cb-x {
flex: none;
padding: 3px 9px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-style: normal;
font-weight: 700;
white-space: nowrap;
}
.pk-cb-x.soft {
background: var(--chip);
color: var(--ink-2);
}
.pk-bento {
margin-top: 0;
}
.pk-hub-tile {
flex-direction: row;
align-items: center;
gap: 10px;
min-height: 118px;
}
.pk-hub-tile .pt-txt {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.pk-hub-tile .tl-name {
font-size: 19px;
line-height: 24px;
}
.pk-hub-art {
display: grid;
place-items: center;
flex: none;
width: 56px;
height: 56px;
border-radius: 18px;
background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 85%, #fff), var(--tone));
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.35), 0 6px 14px color-mix(in srgb, var(--tone) 30%, transparent);
}
.pk-hub-art img {
width: 46px;
height: 46px;
object-fit: contain;
}
.pk-bento .pk-hub-tile:not(.wide) {
flex-direction: column;
align-items: flex-start;
}
.pk-bento .pk-hub-tile:not(.wide) .pk-hub-art {
order: -1;
margin-bottom: 8px;
}
.pk-hub-art.bare,
.pk-ware-art.bare {
background: none;
box-shadow: none;
}
.pk-hub-art.bare img,
.pk-ware-art.bare img {
width: 56px;
height: 56px;
}
.pk-how {
margin: 20px 0 0;
padding: 18px;
border-radius: var(--r-group);
background: var(--well);
}
.pk-how h2 {
margin: 0 0 6px;
font-size: 20px;
line-height: 26px;
font-weight: 600;
}
.pk-how h3 {
margin: 16px 0 4px;
font-size: 16px;
line-height: 22px;
font-weight: 600;
}
.pk-how p {
margin: 0;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.pk-skip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
margin: 12px 0;
}
.pk-skip-d {
display: grid;
justify-items: center;
gap: 4px;
padding: 8px 0;
border-radius: 12px;
background: var(--bg);
}
.pk-skip-d small {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.pk-skip-d b {
font-size: 17px;
line-height: 22px;
font-weight: 600;
}
.pk-skip-d.miss {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--line);
}
.pk-skip-d.miss b {
color: var(--ink-3);
}
.pk-how .pk-how-note {
font-size: 13px;
line-height: 18px;
}
.pk-hint {
margin: 6px 0 0;
font-size: 13px;
line-height: 18px;
text-align: center;
opacity: 0.6;
}
.pk-win {
touch-action: none;
cursor: grab;
}
.pk-win.held {
cursor: grabbing;
}
.pk-odds {
margin-top: 20px;
}
.pk-odds-row .txt {
flex: 1;
min-width: 0;
}
.pk-bank-card {
margin: 16px 0 20px;
}
.pk-bank-n {
margin: 6px 0 0;
font-size: 44px;
line-height: 50px;
font-weight: 600;
letter-spacing: -0.6px;
}
.pk-bank-n span {
font-size: 18px;
font-weight: 500;
letter-spacing: 0;
opacity: 0.7;
}
.pk-shop-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pk-ware {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
padding: 14px;
border-radius: var(--r-group);
background: var(--well);
}
.pk-ware-art {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: 8px;
border-radius: 18px;
background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 85%, #fff), var(--tone));
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.35), 0 6px 14px color-mix(in srgb, var(--tone) 30%, transparent);
}
.pk-ware-art img {
width: 46px;
height: 46px;
object-fit: contain;
}
.pk-ware b {
font-size: 16px;
line-height: 21px;
font-weight: 600;
}
.pk-ware-sub,
.pk-ware .pk-why {
flex: 1;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.pk-ware .pk-buy {
align-self: stretch;
margin-top: 10px;
}
.card-dark .btn.pk-btn:disabled {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
.kit-seg {
margin-bottom: 12px;
}
.kit-tools {
margin-bottom: 8px;
}
.kit-cards {
display: grid;
gap: 8px;
}
.kit-card {
appearance: none;
display: grid;
gap: 6px;
padding: 16px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color 0.15s ease;
}
.kit-card:active {
background: var(--well-2);
}
.kit-card-top {
display: flex;
align-items: center;
gap: 10px;
}
.kit-card-top b {
flex: 1;
min-width: 0;
font-size: 15px;
line-height: 20px;
font-weight: 600;
}
.kit-card-top .go {
width: 18px;
height: 18px;
color: var(--ink-3);
}
.kit-value {
margin-top: 4px;
font-size: 34px;
line-height: 40px;
font-weight: 600;
letter-spacing: -0.5px;
}
.kit-line {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.kit-card.off .kit-card-top b {
color: var(--ink-2);
}
.kit-line-day {
display: grid;
gap: 10px;
margin-top: 4px;
}
.kit-row {
position: relative;
display: grid;
grid-template-columns: 44px 32px minmax(0, 1fr);
align-items: start;
gap: 10px;
}
.kit-row::before {
content: "";
position: absolute;
top: 34px;
bottom: -12px;
left: 69px;
width: 2px;
border-radius: 1px;
background: var(--line);
}
.kit-row:last-child::before {
display: none;
}
.kit-time {
padding-top: 7px;
font-size: 14px;
line-height: 18px;
font-weight: 600;
text-align: right;
color: var(--ink-2);
}
.kit-dot {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--chip);
color: var(--ink-2);
}
.kit-dot[class*=" t-"] {
background: var(--tone);
color: #fff;
}
.kit-row.is-anchor .kit-dot {
background: var(--btn);
color: var(--btn-ink);
}
.kit-dot .ic {
width: 16px;
height: 16px;
}
.kit-step {
appearance: none;
display: grid;
gap: 4px;
min-width: 0;
padding: 12px 14px;
border: 0;
border-radius: var(--r-row);
background: var(--well);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.kit-step:active {
background: var(--well-2);
}
.kit-step b {
font-size: 15px;
line-height: 20px;
font-weight: 600;
}
.kit-step > span {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.kit-step.anchor {
padding: 6px 0 2px;
background: transparent;
cursor: default;
}
.kit-step.off b {
color: var(--ink-2);
}
.kit-step > .kit-chip {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 6px;
margin-top: 6px;
padding: 6px 10px;
border-radius: 999px;
background: var(--bg);
color: var(--ink);
font-size: 13px;
line-height: 16px;
font-weight: 600;
}
.kit-chip .ic {
width: 14px;
height: 14px;
}
.kit-empty p {
margin: 0;
}
.st-hero {
margin: 16px 0 14px;
perspective: 900px;
}
.st-card {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
aspect-ratio: 1.586;
padding: 18px 20px;
border-radius: 22px;
color: #fff;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26), 0 2px 6px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: transform 0.5s var(--spring);
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
.st-card.held {
transition: transform 0.08s linear;
}
.st-grain {
position: absolute;
inset: 0;
z-index: -1;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px);
pointer-events: none;
}
.st-sheen {
position: absolute;
inset: -40%;
z-index: -1;
background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.3) 49%, transparent 58%);
transform: translateX(var(--sx, 30%));
transition: transform 0.5s var(--ease);
animation: st-sweep 1.4s var(--ease) 0.15s both;
pointer-events: none;
}
.st-card.held .st-sheen {
transition: transform 0.08s linear;
}
@keyframes st-sweep {
from { transform: translateX(-60%); }
to { transform: translateX(var(--sx, 30%)); }
}
.st-top,
.st-bottom {
display: flex;
justify-content: space-between;
gap: 12px;
}
.st-top {
align-items: center;
}
.st-bottom {
align-items: flex-end;
}
.st-brand {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 17px;
line-height: 22px;
font-weight: 600;
}
.st-brand .ic {
width: 18px;
height: 18px;
stroke-width: 2.2;
}
.st-tier {
padding: 3px 10px;
border: 1px solid rgba(241, 213, 138, 0.55);
border-radius: 999px;
color: #f1d58a;
font-size: 11px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.st-who {
min-width: 0;
}
.st-name {
display: block;
overflow: hidden;
font-size: 14px;
line-height: 18px;
font-weight: 600;
letter-spacing: 0.14em;
white-space: nowrap;
text-overflow: ellipsis;
}
.st-who small {
display: block;
margin-top: 2px;
font-size: 13px;
line-height: 18px;
opacity: 0.72;
}
.st-league {
flex: none;
font-size: 20px;
line-height: 24px;
font-weight: 600;
letter-spacing: -0.2px;
}
.skin-graphite {
background: linear-gradient(135deg, #505057 0%, #29292e 45%, #3d3d44 70%, #1e1e22 100%);
}
.skin-silver {
background: linear-gradient(135deg, #fbfbfd 0%, #cdd0d7 40%, #f2f3f6 58%, #b3b7bf 100%);
}
.skin-violet {
background: linear-gradient(135deg, #d6a2ff 0%, #a145f7 42%, #7d22dd 70%, #4f0fa3 100%);
}
.skin-gold {
background: linear-gradient(135deg, #fbe9b2 0%, #dbae55 42%, #f6dd95 60%, #b4852b 100%);
}
.skin-black {
background: linear-gradient(135deg, #2c2c31 0%, #0d0d0f 50%, #1d1d21 75%, #050506 100%);
}
.skin-premier {
background: radial-gradient(130% 150% at 0% 0%, #44444b 0%, #141416 52%, #050506 100%);
}
.st-card.skin-silver,
.st-badge.skin-silver {
color: #1d1d1f;
}
.st-card.skin-gold,
.st-badge.skin-gold {
color: #2b1d05;
}
.st-card.skin-black,
.st-badge.skin-black,
.st-badge.skin-premier {
color: #f1d58a;
}
.st-next {
display: grid;
gap: 8px;
margin-bottom: 18px;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.st-prem {
margin-bottom: 4px;
}
.st-rail {
display: flex;
gap: 12px;
margin: 0 calc(var(--gutter) * -1);
padding: 4px var(--gutter) 12px;
overflow-x: auto;
scroll-padding-inline: var(--gutter);
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.st-rail::-webkit-scrollbar {
display: none;
}
.st-step {
display: grid;
flex: none;
gap: 2px;
width: 152px;
scroll-snap-align: start;
}
.st-card.mini {
margin-bottom: 8px;
padding: 11px 13px;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.st-card.mini .st-brand {
font-size: 12px;
line-height: 16px;
}
.st-card.mini .st-brand .ic {
width: 12px;
height: 12px;
}
.st-card.mini .st-league {
font-size: 14px;
line-height: 18px;
}
.st-card.mini .st-sheen {
animation: none;
}
.st-step b {
font-size: 14px;
line-height: 18px;
font-weight: 600;
}
.st-step small {
font-size: 12px;
line-height: 16px;
color: var(--ink-2);
}
.st-step.now small {
color: var(--accent-text);
font-weight: 600;
}
.st-step.next .st-card {
filter: saturate(0.4) brightness(0.92);
opacity: 0.6;
}
.st-club {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: var(--r-group);
background: var(--well);
}
.st-club .profile-avatar {
width: 44px;
height: 44px;
flex: none;
}
.st-club .txt {
display: grid;
gap: 2px;
min-width: 0;
}
.st-club .txt b {
display: flex;
align-items: center;
gap: 6px;
font-size: 15px;
line-height: 20px;
font-weight: 600;
}
.st-club .txt > span {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.st-badge {
display: inline-grid;
place-items: center;
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
color: #fff;
font-size: 10px;
line-height: 1;
font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.st-mark {
padding: 1px 7px;
border-radius: 999px;
background: #141416;
color: #f1d58a;
font-size: 10px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
.st-card,
.st-sheen {
transition: none;
animation: none;
}
}
.search-view .title {
margin-bottom: 12px;
}
.sr-field {
display: flex;
align-items: center;
gap: 8px;
height: 44px;
margin: 0 0 18px;
padding: 0 12px;
border-radius: var(--r-row);
background: var(--well);
color: var(--ink-2);
}
.sr-field > .ic {
width: 18px;
height: 18px;
flex: none;
}
.sr-input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: none;
background: transparent;
color: var(--ink);
font: inherit;
font-size: 17px;
-webkit-appearance: none;
appearance: none;
}
.sr-input::placeholder {
color: var(--ink-3);
}
.sr-input::-webkit-search-cancel-button,
.sr-input::-webkit-search-decoration {
display: none;
-webkit-appearance: none;
}
.sr-clear {
display: grid;
place-items: center;
flex: none;
width: 20px;
height: 20px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ink-3);
color: var(--bg);
cursor: pointer;
}
.sr-clear[hidden] {
display: none;
}
.sr-clear .ic {
width: 12px;
height: 12px;
stroke-width: 3;
}
.sr-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sr-chip {
appearance: none;
padding: 9px 14px;
border: 0;
border-radius: 999px;
background: var(--chip);
color: var(--ink);
font: inherit;
font-size: 15px;
line-height: 20px;
cursor: pointer;
}
.sr-chip:active {
background: var(--well-2);
}
.sr-none {
display: grid;
gap: 14px;
margin-top: 8px;
}
.sr-none p {
margin: 0;
font-size: 15px;
line-height: 22px;
color: var(--ink-2);
}
.ie {
--ies: 26px;
flex: none;
width: var(--ies);
height: var(--ies);
margin: -2px 0;
background: url(/static/interests.webp?v=4e097619be51) no-repeat;
background-size: calc(var(--ies) * 8) auto;
background-position: calc(var(--c, 0) * var(--ies) * -1) calc(var(--r, 0) * var(--ies) * -1);
}
.interest-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 28px;
}
.chip.interest {
min-height: 44px;
padding: 8px 16px 8px 10px;
border-radius: 22px;
font-size: 16px;
line-height: 20px;
}
.chip.interest.static {
min-height: 36px;
padding: 5px 12px 5px 7px;
font-size: 14px;
cursor: default;
}
.chip.interest.static .ie {
--ies: 22px;
}
.chip.interest.static:active {
transform: none;
}
.interests .section {
margin: 24px 0 12px;
}
.interests-own {
margin-top: 4px;
}
.interests-own textarea {
min-height: 72px;
scroll-margin-bottom: 150px;
}
.interests-foot {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
gap: 8px;
margin: 8px calc(var(--gutter) * -1) calc(-28px - var(--safe-b));
padding: 12px var(--gutter) calc(16px + var(--safe-b));
background: var(--bg);
}
.interests-count {
margin: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
}
.personal-profile-interests-pick .interest-chips {
margin: 0;
}
.personal-profile-interests-pick .chip.interest.static {
background: var(--bg);
}
.personal-profile-interests-pick .interest-chips + p {
margin-top: 12px;
}
.chip.interest-add {
background: var(--bg);
}
.personal-profile-interests-pick.tappable {
cursor: pointer;
}
.tk-chip {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 14px 0 5px;
border-radius: 999px;
background: var(--btn);
color: var(--btn-ink);
font-size: 15px;
line-height: 20px;
font-weight: 500;
white-space: nowrap;
animation: tk-in 0.5s var(--spring) both;
}
.tk-chip b {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.2px;
}
.tk-word {
opacity: 0.75;
}
.tk-note {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
color: #fff;
transform-origin: 50% 60%;
animation: tk-swing 0.9s ease 0.25s 1 both;
}
.tk-note .ic {
width: 15px;
height: 15px;
stroke-width: 2.4;
}
.card-dark .tk-chip,
.pk-fly .tk-chip {
background: #fff;
color: #1d1d1f;
}
@keyframes tk-in {
from {
opacity: 0;
transform: translateY(6px) scale(0.9);
}
}
@keyframes tk-swing {
0% { transform: rotate(0); }
30% { transform: rotate(-14deg); }
60% { transform: rotate(9deg); }
100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
.tk-chip,
.tk-note {
animation: none;
}
}
.tk-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.tk-dark {
margin-bottom: 18px;
padding: 20px;
}
.tk-dark .tk-row {
margin: 0;
}
.tks-hero {
margin: 4px 0 24px;
padding: 20px 18px 18px;
border-radius: var(--r-group);
background: color-mix(in srgb, var(--ib-violet) 11%, var(--well));
}
.tks-top {
display: flex;
align-items: center;
gap: 14px;
}
.tks-note {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
color: #fff;
background: var(--ib-violet);
}
.tks-note .ic {
width: 28px;
height: 28px;
}
.tks-num {
display: flex;
flex-direction: column;
min-width: 0;
}
.tks-num b {
font-size: 44px;
line-height: 54px;
font-weight: 700;
letter-spacing: -1px;
color: var(--ink);
}
.tks-num span {
font-size: 15px;
line-height: 20px;
color: var(--ink-2);
}
.tks-level {
margin: 16px 0 12px;
font-size: 24px;
line-height: 30px;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--ink);
}
.tks-beats {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
}
.tks-beats i {
height: 10px;
border-radius: 5px;
background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.tks-beats i.on {
background: var(--ib-violet);
}
.tks-next {
margin: 12px 0 0;
font-size: 15px;
line-height: 21px;
color: var(--ink);
}
.tks-gift {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
font-size: 15px;
line-height: 21px;
color: var(--ink);
}
.tks-gift .ic {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 1px;
}
.tks-sec {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 8px 0 12px;
}
.tks-sec h3 {
margin: 0;
font-size: 20px;
line-height: 26px;
font-weight: 600;
color: var(--ink);
}
.tks-sec span {
font-size: 15px;
color: var(--ink-2);
}
.tks-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
align-items: end;
margin: 0 0 24px;
padding: 16px 14px 12px;
border-radius: var(--r-group);
background: var(--well);
}
.tks-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
.tks-day i {
width: 100%;
max-width: 28px;
height: var(--h, 4px);
border-radius: 8px;
background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.tks-day i.on {
background: var(--ib-violet);
}
.tks-day.today i.on {
background: var(--ink);
}
.tks-day-n {
min-height: 18px;
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: var(--ink);
}
.tks-wd {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.tks-day.today .tks-wd {
font-weight: 600;
color: var(--ink);
}
.tks-road {
display: flex;
gap: 10px;
margin: 0 calc(-1 * var(--gutter)) 24px;
padding: 2px var(--gutter);
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--gutter);
-webkit-overflow-scrolling: touch;
}
.tks-road::-webkit-scrollbar {
display: none;
}
.tks-lv {
display: flex;
flex: 0 0 156px;
flex-direction: column;
gap: 6px;
min-height: 168px;
padding: 14px;
border-radius: var(--r-group);
background: var(--well);
scroll-snap-align: start;
}
.tks-lv.now {
box-shadow: inset 0 0 0 2px var(--ink);
}
.tks-lv.next,
.tks-lv.soon {
color: var(--ink-2);
}
.tks-lv-badge {
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin-bottom: 4px;
border-radius: 50%;
font-size: 15px;
color: var(--ink-2);
background: var(--bg);
}
.tks-lv-badge .ic {
width: 18px;
height: 18px;
}
.tks-lv.done .tks-lv-badge {
color: #fff;
background: var(--good);
}
.tks-lv.now .tks-lv-badge {
color: var(--btn-ink);
background: var(--btn);
}
.tks-lv-title {
font-size: 17px;
line-height: 22px;
font-weight: 600;
color: var(--ink);
}
.tks-lv.next .tks-lv-title,
.tks-lv.soon .tks-lv-title {
color: var(--ink-2);
}
.tks-lv-gift {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.tks-lv small {
margin-top: auto;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.tks-recent {
margin-bottom: 24px;
}
.tks-plus {
flex: 0 0 auto;
font-size: 17px;
font-weight: 700;
color: var(--ink);
}
.tks-earn {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0 0 16px;
}
.tks-tile {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
padding: 14px;
border-radius: var(--r-group);
background: var(--well);
}
.tks-tile.wide {
grid-column: 1 / -1;
}
.tks-tile .bubble {
margin-bottom: 6px;
}
.tks-tile-n {
font-size: 22px;
line-height: 26px;
font-weight: 700;
color: var(--ink);
}
.tks-tile-t {
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.tks-tile small {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.tks-perks {
margin-bottom: 8px;
}
.upd {
position: fixed;
inset: 0;
z-index: 246;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
box-sizing: border-box;
padding: calc(24px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)) 24px
calc(20px + var(--safe-b, 0px));
color: #fff;
background: #000;
color-scheme: dark;
animation: upd-in 0.3s ease-out both;
}
.upd.out {
animation: upd-out 0.24s ease-in both;
}
.upd-mid {
display: grid;
justify-items: center;
align-content: center;
gap: 12px;
text-align: center;
}
.upd-orb {
display: grid;
place-items: center;
width: 120px;
height: 120px;
margin-bottom: 20px;
transform: scale(1.5);
}
.upd-kick {
margin: 0;
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.55);
animation: upd-rise 0.5s var(--ease) 1.05s both;
}
.upd-title {
margin: 0;
font-size: 28px;
line-height: 34px;
font-weight: 600;
letter-spacing: -0.02em;
animation: upd-rise 0.5s var(--ease) 1.15s both;
}
.upd-text {
margin: 0;
max-width: 310px;
font-size: 16px;
line-height: 23px;
color: rgba(255, 255, 255, 0.72);
animation: upd-rise 0.5s var(--ease) 1.25s both;
}
.upd-foot {
display: grid;
gap: 4px;
width: 100%;
max-width: 420px;
margin-inline: auto;
animation: upd-rise 0.5s var(--ease) 1.45s both;
}
.upd .upd-go {
width: 100%;
color: #000;
background: #fff;
}
.upd-later {
appearance: none;
padding: 12px;
border: 0;
background: none;
font: inherit;
font-size: 15px;
line-height: 20px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
}
.upd-later:focus-visible,
.upd .upd-go:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.85);
outline-offset: 3px;
}
@keyframes upd-in {
from {
opacity: 0;
}
}
@keyframes upd-out {
to {
opacity: 0;
}
}
@keyframes upd-rise {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion: reduce) {
.upd,
.upd.out,
.upd-kick,
.upd-title,
.upd-text,
.upd-foot {
animation: none;
}
}
.update-finish {
display: flex;
flex-direction: column;
gap: 28px;
min-height: calc(100dvh - var(--full-top, 0px) - 24px);
box-sizing: border-box;
padding-bottom: calc(20px + var(--safe-b, 0px));
}
.uf-body { display: grid; gap: 16px; }
.uf-body .kicker, .uf-body .title, .uf-body p { margin: 0; }
.uf-body .title { font-size: 24px; line-height: 30px; }
.uf-lead { color: var(--ink-2); font-size: 16px; line-height: 23px; }
.uf-offer { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-card); background: var(--well); }
.uf-term { font-size: 17px; line-height: 24px; font-weight: 500; }
.uf-price { font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; }
.uf-renew, .uf-deadline { font-size: 15px; line-height: 21px; }
.uf-note { color: var(--ink-2); font-size: 14px; line-height: 20px; }
.uf-foot { display: grid; gap: 8px; margin-top: auto; }
.uf-foot .btn { width: 100%; }
.uf-body h1:focus { outline: none; }
.uf-foot .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.update-finish { gap: 20px; }
.uf-hero { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-card); background: var(--well); }
.uf-hero .kicker, .uf-hero .pay-title, .uf-hero .uf-lead { margin: 0; }
.uf-hero .pay-title { font-size: 36px; line-height: 40px; }
.uf-lead { color: var(--ink); }
.update-finish .plans { margin: 0; }
.update-finish .plans .plan { min-height: 132px; gap: 8px; }
.update-finish .plans .plan-sum { margin-top: auto; font-size: 24px; line-height: 30px; }
.update-finish .plans .plan-per { white-space: normal; }
.uf-deadline { width: fit-content; margin: 0; padding: 12px 16px; border-radius: var(--r-row); background: var(--well); color: var(--ink-2); }
.uf-deadline.quiet-accent { color: var(--ink); font-weight: 500; }
.uf-foot .pay-go { min-height: 52px; }
@media (max-width: 340px) {
.update-finish { gap: 16px; }
.uf-body { gap: 12px; }
.update-finish .plans .plan { padding: 12px; min-height: 96px; }
}
.update-finish.uf-native { display: block; min-height: 0; }
.uf-native .uf-body { display: flex; flex-direction: column; gap: 0; }
.uf-native .pay-cover { margin: 0 calc(var(--gutter) * -1) 16px; padding-top: 18px; padding-bottom: 20px; }
.uf-native .pay-cover .pc-sub { margin: 8px 0 0; }
.uf-native .pay-cover.a .pc-stage { min-height: 285px; margin-bottom: 14px; }
.uf-native .pay-cover.a .pc-obj { top: 8px; }
.uf-native .pay-cover.a .pc-card.c4 { --r: 1deg; margin-left: 26%; }
.uf-native .plans { order: 2; gap: 8px; margin: 0; }
.uf-native .plans .plan { min-height: 146px; padding: 14px 10px; gap: 0; }
.uf-native .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 10px; }
.uf-native .plan-price .plan-sum { margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; }
.uf-native .plan-was { color: var(--ink-2); font-size: 12px; line-height: 17px; font-weight: 400; }
.uf-native .plans .plan-per { margin-top: 8px; font-size: 12px; line-height: 17px; }
.uf-native .plans .plan-gift, .pay-v2-checkout .plan-gift { padding: 6px 8px; border-radius: var(--r-row); font-family: var(--font);
font-size: 14px; line-height: 20px; font-weight: 500; background: var(--ib-pink); color: var(--ib-ink); }
.checkout-summary .plan-gift { width: fit-content; }
.uf-native .uf-body .uf-context { margin: 0 0 16px; font-size: 16px; line-height: 22px; color: var(--ink); }
.uf-native .uf-deadline { order: 1; margin: 0 0 16px; padding: 0; border-radius: 0; background: none; color: var(--ink); font-size: 15px; line-height: 21px; }
.uf-native .uf-foot { margin: 22px 0 0; gap: 0; }
.uf-native .uf-check { min-height: 48px; margin: 0; }
.uf-native .pay-what { margin: 16px 0 0; }
.uf-native .uf-exit { margin: 10px 0 0; }
.uf-native .uf-hero { padding: 0; margin: 0 0 24px; background: none; border-radius: 0; }
.uf-native .uf-hero .pay-title { font-size: 24px; line-height: 30px; }
.uf-deal {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0 6px;
}
.uf-deal-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
height: 48px;
padding: 0 14px;
border-radius: 999px;
color: #fff;
background: #00bc7d;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.5px;
font-variant-numeric: tabular-nums;
}
.uf-deal-title {
font-size: 22px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.3px;
}
.plan-was-wrap {
font-size: 14px;
opacity: 0.7;
}
body.ut-guiding .app { padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 260px); }
.ut-ring {
position: fixed; left: 0; top: 0; z-index: 62; width: 0; height: 0; pointer-events: none;
box-shadow: 0 0 0 200vmax rgba(18, 18, 22, 0.52); border-radius: 50%; will-change: transform;
transition: transform 0.36s var(--ease), width 0.36s var(--ease), height 0.36s var(--ease),
border-radius 0.36s var(--ease), opacity 0.22s ease;
}
.ut-ring.ut-track { transition: opacity 0.22s ease; }
.ut-ring::after {
content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.ut-ring::before {
content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.35);
opacity: 0; will-change: opacity; animation: ut-breathe 2.2s ease-in-out infinite;
}
.ut-ring.ut-none::after, .ut-ring.ut-none::before, .ut-ring.ut-off::before { opacity: 0; animation: none; }
.ut-ring.ut-off { opacity: 0; }
.ut-ring.ut-nudge::after { animation: ut-nudge 0.42s var(--ease); }
.ut-block { position: fixed; inset: 0; z-index: 63; background: transparent; touch-action: pan-x pan-y; }
.ut-block[hidden] { display: none; }
.ut-panel {
position: fixed; z-index: 64; left: 12px; right: 12px; margin: 0 auto; max-width: 440px;
bottom: calc(max(12px, var(--safe-b)) + var(--tabs-h) + 12px);
box-sizing: border-box; display: grid; gap: 12px; padding: 16px 18px 18px; min-height: 196px;
grid-template-rows: auto 1fr auto;
color: var(--ink); background: var(--bg); border-radius: var(--r-card);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
opacity: 0; transform: translateY(14px); pointer-events: none;
transition: opacity 0.24s ease, transform 0.32s var(--ease);
}
.ut-panel.ut-in { opacity: 1; transform: none; pointer-events: auto; }
.ut-top { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.ut-tag {
display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent-text); font-size: 13px; line-height: 18px; font-weight: 500;
transition: background-color 0.24s ease, color 0.24s ease;
}
.ut-tag .ic { width: 16px; height: 16px; }
.ut-tag-ic { display: inline-flex; }
.ut-tag.ok { background: rgba(0, 188, 125, 0.14); color: #00865a; }
.ut-dots { display: flex; gap: 5px; margin-left: auto; }
.ut-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink-4); transition: width 0.3s var(--ease), background-color 0.3s ease; }
.ut-dots i.past { background: var(--ink-3); }
.ut-dots i.on { width: 16px; background: var(--ink); }
.ut-close {
appearance: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -2px -6px -2px 2px; padding: 0;
border: 0; border-radius: 50%; background: var(--well); color: var(--ink-2); cursor: pointer;
}
.ut-close .ic { width: 16px; height: 16px; }
.ut-copy { display: grid; align-content: start; gap: 6px; transition: opacity 0.14s ease; }
.ut-panel.ut-swap .ut-copy, .ut-panel.ut-swap .ut-go-text { opacity: 0; }
.ut-copy h2 { margin: 0; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.01em; }
.ut-copy p { margin: 0; font-size: 15px; line-height: 21px; color: var(--ink-2); }
.ut-copy .ut-ask { justify-self: start; margin: 4px 0 0; padding: 10px 14px; border-radius: var(--r-row);
background: var(--accent-soft); color: var(--accent-text); font-size: 17px; line-height: 23px; font-weight: 600; }
.ut-how { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 4px 0 0; padding: 0; list-style: none;
counter-reset: ut-how; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ut-how li { display: inline-flex; align-items: center; gap: 6px; counter-increment: ut-how; }
.ut-how li::before { content: counter(ut-how); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
background: var(--well); color: var(--ink); font-size: 12px; line-height: 1; font-weight: 600; }
.ut-how li:not(:last-child)::after { content: ""; width: 14px; height: 1px; margin: 0 8px; background: var(--ink-4); }
.ut-ask[hidden], .ut-how[hidden] { display: none; }
.ut-actions { display: flex; align-items: center; gap: 8px; }
.ut-go { position: relative; flex: 1; min-width: 0; min-height: 48px; overflow: hidden; font-size: 16px; line-height: 22px; }
.ut-go-text { position: relative; transition: opacity 0.14s ease; }
.ut-go-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: rgba(255, 255, 255, 0.16); }
.ut-go.ut-auto .ut-go-fill { animation: ut-fill 2.3s linear forwards; }
.ut-skip {
appearance: none; flex: none; min-height: 48px; padding: 0 12px; border: 0; background: none; font: inherit;
font-size: 15px; line-height: 20px; color: var(--ink-2); cursor: pointer;
}
.ut-skip[hidden] { display: none; }
.ut-close:focus-visible, .ut-skip:focus-visible, .ut-go:focus-visible, .ut-pill-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ut-pill {
position: fixed; z-index: 250; left: 16px; right: 16px; width: max-content; max-width: min(440px, calc(100% - 32px));
margin: 0 auto; bottom: calc(max(12px, var(--safe-b)) + var(--tabs-h) + 12px);
display: flex; align-items: center; gap: 12px; box-sizing: border-box; padding: 6px 6px 6px 16px;
border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
font-size: 14px; line-height: 20px; opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity 0.22s ease, transform 0.3s var(--ease);
}
.ut-pill.ut-in { opacity: 1; transform: none; pointer-events: auto; }
.ut-pill-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ut-pill-go {
appearance: none; display: inline-flex; align-items: center; gap: 2px; flex: none; height: 36px; padding: 0 10px 0 14px;
border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.ut-pill-go .ic { width: 16px; height: 16px; }
@keyframes ut-breathe { 50% { opacity: 1; } }
@keyframes ut-nudge { 40% { transform: scale(1.06); } }
@keyframes ut-fill { to { transform: scaleX(1); } }
@media (max-width: 360px) {
.ut-panel { left: 8px; right: 8px; padding: 14px 14px 14px; gap: 10px; min-height: 184px; }
.ut-copy h2 { font-size: 18px; line-height: 23px; }
.ut-copy p { font-size: 14px; line-height: 20px; }
.ut-dots { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.ut-ring, .ut-panel, .ut-pill, .ut-copy, .ut-go-text { transition: none; }
.ut-ring::before, .ut-ring::after, .ut-go.ut-auto .ut-go-fill { animation: none; }
}
.update-finish.uf-native .uf-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.update-finish.uf-native .uf-plans .uf-card {
display: grid; align-content: start; justify-items: start; gap: 2px; min-height: 0; margin: 0; padding: 16px 14px 14px;
border-radius: var(--r-card); background: var(--well); color: var(--ink); text-align: left; white-space: normal;
box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.update-finish.uf-native .uf-plans .uf-card.on { box-shadow: inset 0 0 0 2px var(--ink); }
.update-finish.uf-native .uf-plans .uf-card:active { transform: scale(0.985); }
.update-finish.uf-native .uf-plans .uf-main { grid-column: 1 / -1; padding: 20px 18px 18px; color: #fff;
background: radial-gradient(120% 140% at 88% 0%, #a85af8 0%, #8026f4 42%, #4b13a8 78%, #2c096a 100%), #2c096a; }
.update-finish.uf-native .uf-plans.odd .uf-card:not(.uf-main):last-child:nth-child(2) { grid-column: 1 / -1; }
.uf-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 28px; margin-bottom: 6px; }
.uf-x2, .uf-cut { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px;
background: #00bc7d; color: #fff; font-size: 16px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uf-cut { margin-top: 8px; height: 24px; font-size: 14px; }
.uf-term { font-size: 16px; line-height: 22px; font-weight: 500; }
.uf-card .box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--ink-4); color: transparent; }
.uf-card .box .ic { width: 14px; height: 14px; }
.uf-card.on .box { background: var(--ink); box-shadow: none; color: var(--bg); }
.uf-main .box { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.uf-main.on .box { background: #fff; color: #2c096a; }
.update-finish.uf-native .uf-plans .uf-main.on { box-shadow: inset 0 0 0 2px #fff; }
.uf-terms { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.uf-from { font-size: 26px; line-height: 32px; font-weight: 500; opacity: 0.5; }
.uf-arrow { font-size: 22px; line-height: 32px; opacity: 0.5; }
.uf-to { font-size: 44px; line-height: 46px; font-weight: 600; letter-spacing: -0.03em; }
.uf-main .uf-to { font-size: 56px; line-height: 58px; }
.uf-main .uf-from, .uf-main .uf-arrow { opacity: 0.7; }
.uf-unit { font-size: 16px; line-height: 20px; font-weight: 500; }
.uf-sub { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.uf-main .uf-sub { font-size: 15px; line-height: 20px; color: rgba(255, 255, 255, 0.85); }
.uf-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 10px; }
.uf-pay b { font-size: 18px; line-height: 24px; font-weight: 600; }
.uf-pay s { font-size: 14px; line-height: 20px; color: var(--ink-3); }
.uf-main .uf-pay b { font-size: 20px; }
.uf-main .uf-pay s { color: rgba(255, 255, 255, 0.6); }
.uf-pay-big b { font-size: 34px; line-height: 40px; letter-spacing: -0.02em; }
.uf-main .uf-pay-big b { font-size: 44px; line-height: 48px; }
.uf-pay-big s { font-size: 18px; line-height: 24px; }
@media (max-width: 360px) {
.update-finish.uf-native .uf-plans { gap: 8px; }
.update-finish.uf-native .uf-plans .uf-card { padding: 14px 12px 12px; }
.uf-to { font-size: 38px; line-height: 40px; }
.uf-main .uf-to { font-size: 48px; line-height: 50px; }
.uf-pay-big b { font-size: 28px; line-height: 34px; }
}
.uf-terms .uf-unit { margin-left: 2px; font-size: 18px; font-weight: 600; }
.uf-gift { display: inline-flex; align-self: flex-start; width: fit-content; margin-top: 8px; padding: 4px 10px;
border-radius: 999px; color: #fff; background: #00bc7d; font-size: 14px; line-height: 20px; font-weight: 600; }
.update-finish.uf-light { display: block; min-height: 0; padding-bottom: 0; }
.update-finish.uf-light .uf-body { display: flex; flex-direction: column; gap: 0; }
.uf-light .uf-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.uf-light .uf-head-text { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 10px; }
.uf-light .uf-badge { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px;
background: #00bc7d; color: #fff; font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.uf-light .uf-title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.uf-light .uf-title:focus { outline: none; }
.uf-light .uf-obj { flex: none; width: 88px; height: 88px; object-fit: contain; }
.update-finish.uf-light .uf-body .uf-lead { margin: 0 0 16px; font-size: 16px; line-height: 22px; color: var(--ink-2); }
.update-finish.uf-light .pay-what { margin: 0 0 28px; }
.uf-light .uf-section { margin: 0 0 12px; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.update-finish.uf-light .uf-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.update-finish.uf-light .uf-plans .uf-card {
appearance: none; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px;
width: auto; height: auto; min-height: 0; margin: 0; padding: 14px 14px 14px 16px; border: 0; border-radius: var(--r-card);
background: var(--well); color: var(--ink); font: inherit; text-align: left; white-space: normal;
box-shadow: inset 0 0 0 2px transparent; transition: box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.update-finish.uf-light .uf-plans .uf-card.on { box-shadow: inset 0 0 0 2px var(--ink); }
.update-finish.uf-light .uf-plans .uf-card:active { transform: scale(0.985); }
.uf-light .uf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 0; margin: 0; }
.uf-light .uf-term { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.uf-light .uf-card .box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--ink-4); color: transparent; }
.uf-light .uf-card .box .ic { width: 14px; height: 14px; }
.uf-light .uf-card.on .box { background: var(--ink); box-shadow: none; color: var(--bg); }
.uf-light .uf-card-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.uf-light .uf-gift { display: inline-flex; align-items: center; width: fit-content; margin: 0; padding: 3px 10px; border-radius: 999px;
background: #00bc7d; color: #fff; font-size: 13px; line-height: 18px; font-weight: 600; white-space: normal; }
.uf-light .uf-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.uf-light .uf-pay b { font-size: 17px; line-height: 22px; font-weight: 600; }
.uf-light .uf-pay s { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.update-finish.uf-light .uf-plans .uf-main { grid-column: 1 / -1; padding: 16px 18px; background: var(--accent); color: #fff; }
.update-finish.uf-light .uf-plans .uf-main.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--accent); }
.uf-light .uf-main .uf-term { font-size: 24px; line-height: 30px; }
.uf-light .uf-main .uf-card-row { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.uf-light .uf-main .uf-pay b { font-size: 20px; line-height: 26px; }
.uf-light .uf-main .uf-pay s { color: rgba(255, 255, 255, 0.72); }
.uf-light .uf-main .box { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.uf-light .uf-main.on .box { background: #fff; color: var(--accent-text); }
.update-finish.uf-light .uf-plans.odd .uf-card:not(.uf-main):last-child:nth-child(2) { grid-column: 1 / -1; }
.update-finish.uf-light .uf-deadline { order: 0; width: auto; margin: 14px 0 0; padding: 0; border-radius: 0; background: none;
text-align: center; color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 400; }
.update-finish.uf-light .uf-deadline.quiet-accent { color: var(--ink); font-weight: 500; }
.update-finish.uf-light .uf-foot { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 8px;
margin: 12px calc(var(--gutter) * -1) 0; padding: 18px var(--gutter) calc(12px + var(--safe-b, 0px));
background: linear-gradient(to bottom, transparent, var(--bg) 18px); }
.update-finish.uf-light .uf-check { width: 100%; min-height: 52px; margin: 0; }
.update-finish.uf-light .uf-after { padding: 0 0 calc(16px + var(--safe-b, 0px)); }
.update-finish.uf-light .uf-exit { width: 100%; margin: 0; }
@media (max-width: 360px) {
.uf-light .uf-title { font-size: 24px; line-height: 30px; }
.uf-light .uf-obj { width: 64px; height: 64px; }
.update-finish.uf-light .uf-plans .uf-card { padding: 12px 12px 12px 14px; }
.uf-light .uf-term { font-size: 18px; line-height: 24px; }
.uf-light .uf-main .uf-term { font-size: 22px; line-height: 28px; }
}
.uf-light .uf-card:not(.uf-main) .uf-gift { padding: 3px 8px; border-radius: 8px; font-size: 12px; line-height: 16px; }
body.ut-guiding #app { transition: opacity 0.24s ease; }
body.ut-moving #app { opacity: 0; transition-duration: 0.16s; }
.ut-ritm { flex: none; display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
background: radial-gradient(circle at 35% 30%, #e9dcff 0%, #ad46ff 55%, #6b1fd1 100%); }
.ut-ritm img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ut-panel.ut-talk .ut-ritm { animation: ut-talk 0.6s ease-in-out infinite alternate; }
@keyframes ut-talk { from { transform: scale(1); } to { transform: scale(1.1); } }
.ut-copy p .ut-rest { color: transparent; }
.ut-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; }
.ut-ring .ut-wave { position: absolute; inset: -2px; border-radius: inherit; opacity: 0; pointer-events: none; }
.ut-ring.ut-press .ut-wave { box-shadow: 0 0 0 2px var(--accent); animation: ut-wave 1.6s ease-out infinite; }
@keyframes ut-wave { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
body.ut-guiding #app, body.ut-moving #app { transition: none; }
.ut-panel.ut-talk .ut-ritm, .ut-ring.ut-press .ut-wave { animation: none; }
}
.uf-light .uf-kick { display: flex; align-items: center; gap: 8px; }
.uf-light .uf-kicker { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--accent-text); }
.update-finish.uf-light .uf-plans .uf-main { background: var(--accent-soft); color: var(--ink);
box-shadow: inset 0 0 0 1px rgba(130, 0, 219, 0.2); }
.update-finish.uf-light .uf-plans .uf-card.on, .update-finish.uf-light .uf-plans .uf-main.on { box-shadow: inset 0 0 0 2px var(--accent-text); }
.uf-light .uf-main .uf-term { color: var(--ink); }
.uf-light .uf-main .uf-pay s { color: var(--ink-3); }
.uf-light .uf-main .box { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.uf-light .uf-card.on .box, .uf-light .uf-main.on .box { background: var(--accent-text); color: #fff; box-shadow: none; }
.campaign-offer { animation: uf-pop 0.38s var(--ease) both; }
@keyframes uf-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.upd .upd-away { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .campaign-offer { animation: none; } }
.ut-ring { transition: opacity 0.22s ease; }
.ut-ring::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28); }
.ut-ring.ut-focus::after { animation: ut-focus 0.32s var(--ease); }
@keyframes ut-focus { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.ut-ring.ut-press .ut-wave { box-shadow: 0 0 0 1.5px var(--accent); animation: ut-wave 1.8s ease-out infinite; }
@keyframes ut-wave { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.32); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ut-ring.ut-focus::after { animation: none; } }
body.ut-guiding #app { transition: opacity 0.28s ease, transform 0.36s var(--ease); transform-origin: 50% 40%; }
body.ut-moving #app { opacity: 0; transform: scale(1.04); transition-duration: 0.18s; }
body.ut-arrive #app { opacity: 0; transform: scale(0.97); transition: none; }
.ut-ring.ut-iris { transition: transform 0.42s var(--ease), width 0.42s var(--ease), height 0.42s var(--ease),
border-radius 0.42s var(--ease), opacity 0.22s ease; }
@media (prefers-reduced-motion: reduce) { body.ut-moving #app, body.ut-arrive #app { transform: none; } }
body.ut-guiding #app { transition: opacity 0.22s ease, transform 0.28s var(--ease); }
body.ut-moving #app { transform: scale(1.025); transition-duration: 0.16s; }
body.ut-arrive #app { transform: scale(0.985); }
.ut-ring.ut-iris { transition: transform 0.26s var(--ease), width 0.26s var(--ease), height 0.26s var(--ease),
border-radius 0.26s var(--ease), opacity 0.18s ease; }
.ut-ring.ut-focus::after { animation-duration: 0.2s; }
.immersive-ritm .ir-guide-phrase {margin:12px 0 0;text-align:center;font:500 30px/38px var(--font);color:var(--dark-ink-2);max-width:340px;}
.immersive-ritm .ir-guide-phrase[hidden] {display:none;}
.ir-guide-phrase span {transition:color 180ms ease;}
.ir-guide-phrase .ir-guide-heard {color:var(--ib-violet);}
.immersive-ritm.ir-guided-question .ir-presence h2 {display:none;}
.immersive-ritm .ir-guide-answer-title {margin:0 0 16px;font:500 24px/30px var(--font);color:var(--dark-ink);}
.immersive-ritm .ir-guide-answer-note {margin:16px 0 0;font:400 15px/22px var(--font);color:var(--dark-ink-2);}
@media(prefers-reduced-motion:reduce){.ir-guide-phrase span {transition:none;}}
.feedback-selection-guide { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.feedback-guide-line { fill:none; stroke:var(--ib-violet); stroke-width:3; stroke-linecap:round; stroke-dasharray:7 6; }
.feedback-guide-cursor { fill:var(--ink); stroke:var(--bg); stroke-width:3; }
.feedback-guide-again { font:inherit; font-size:14px; min-height:32px; padding:4px 12px; }
.feedback-voice-practice { display:grid; gap:10px; }
.feedback-voice-demo { display:flex; gap:8px; align-items:center; justify-content:center; min-height:44px; font:inherit; border:0; border-radius:var(--r-btn); padding:10px 14px; }
.feedback-voice-demo .ic,.feedback-voice-bubble .ic { width:20px; height:20px; flex:none; }
.feedback-voice-example[hidden] { display:none; }
.feedback-voice-example { display:grid; gap:10px; }
.feedback-voice-example p { margin:0; font-size:15px; line-height:22px; }
.feedback-voice-bubble { display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--r-btn); background:var(--surface); color:var(--ink); font-weight:500; }
.pd-gift-result { animation:uf-pop .38s var(--ease) both; }
.pd-gift-result .pd-title { color:var(--ib-pink); }
@media(prefers-reduced-motion:reduce){.pd-gift-result {animation:none;}}
.update-finish.uf-light .uf-card .uf-gift,
.pay-v2-checkout .checkout-summary .plan-gift { background:var(--ib-pink);color:#1d1d1f;font-weight:500; }
.update-finish.uf-light .uf-plans .uf-main {background:var(--well);border:0;box-shadow:inset 0 0 0 1px var(--line);}
.pay-legacy-choice .pay-title {font-size:24px;line-height:30px;margin:12px 0;}
.pay-choice-actions {display:grid;gap:12px;margin-top:24px;}
.pay-choice-actions > .btn {margin:0;white-space:normal;}
.commitment-check {padding:20px;background:var(--well);border-radius:var(--r-card);margin:20px 0;}
.commitment-check > .kicker {margin:0 0 8px;}
.commitment-check h2 {font-size:19px;line-height:26px;font-weight:500;margin:0;}
.commitment-check .commitment-question {font-size:15px;color:var(--ink-2);margin:12px 0;}
.commitment-check .hm-chips {margin:0;display:flex;gap:8px;flex-wrap:wrap;}
.commitment-check .hm-chips .btn {background:var(--bg);color:var(--ink);min-height:44px;margin:0;font-size:15px;padding:8px 14px;}
.ut-pill-text {white-space:normal;overflow:visible;text-overflow:clip;}
.ir-guide-card .ir-guide-answer-title {font-size:24px;line-height:30px;margin:0 0 12px;}
.ir-guide-lead {font-size:16px;line-height:23px;margin:0 0 20px;color:var(--dark-ink-2);}
.ir-guide-abilities {padding:0;margin:0;list-style:none;display:grid;gap:16px;}
.ir-guide-abilities li {display:grid;gap:4px;}
.ir-guide-abilities b {font-size:17px;line-height:23px;font-weight:500;}
.ir-guide-abilities span {font-size:15px;line-height:21px;color:var(--dark-ink-2);}
.ir-reply-text[hidden] {display:none;}
.update-finish.uf-light .uf-main.on { box-shadow:inset 0 0 0 2px var(--accent); }
.home-payment {padding:20px;}
.home-payment .dc-title {font-size:20px;line-height:26px;}
.home-payment .dc-sum {font-size:24px;line-height:30px;}
.home-payment .dc-line {font-size:15px;line-height:21px;}
.home-payment .btn {margin-top:16px;}
.update-finish.uf-light .uf-plans .uf-card:last-child:nth-child(2) {grid-column:1 / -1;}
.pay-includes-sheet .pay-research-note { margin:20px 0 0; padding:0 4px; font-size:14px; line-height:20px; color:var(--ink-2); }
.uf-light .uf-badge { white-space:nowrap; flex-shrink:0; }
.rec-status-slot:empty {
display: none;
}
.rec-status {
appearance: none;
display: grid;
grid-template-columns: 10px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
width: 100%;
margin: 0 0 20px;
padding: 14px 16px;
border: 0;
border-radius: var(--r-group);
background: var(--well);
color: var(--ink);
text-align: left;
cursor: pointer;
}
.rec-status:active {
background: var(--well-2);
}
.rec-status .txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rec-status .txt b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.rec-status .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rec-status-go {
font-size: 15px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
}
.rec-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ib-gray);
}
.rec-dot.green { background: var(--ib-green); }
.rec-dot.amber { background: var(--ib-amber); }
.rec-link {
appearance: none;
display: inline-flex;
margin: -8px 0 20px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 15px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.rec-filter-bar {
margin: 0 0 4px;
}
.rec-filter-bar .btn.on {
background: var(--btn);
color: var(--btn-ink);
}
.adm-rec .group-label.rec-day {
margin: 20px 0 8px;
}
.adm-rec-more {
margin-top: 4px;
}
.rec-session {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 20px;
align-items: start;
gap: 12px;
padding-top: 14px;
padding-bottom: 14px;
}
.rec-session > .bubble,
.rec-session > .go {
margin-top: 2px;
}
.rec-session .txt {
gap: 2px;
}
.rec-session .txt b {
white-space: normal;
overflow-wrap: anywhere;
}
.rec-session .txt .rec-path {
overflow: hidden;
font-size: 13px;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--ink-2);
}
.rec-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.item .txt .rec-chip,
.rec-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px;
border-radius: 12px;
background: var(--chip);
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
white-space: nowrap;
}
.rec-chip.red::before,
.rec-chip.amber::before,
.rec-chip.violet::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
}
.rec-chip.red::before { background: var(--ib-red); }
.rec-chip.amber::before { background: var(--ib-amber); }
.rec-chip.violet::before { background: var(--ib-violet); }
.item .txt .rec-chip.red,
.item .txt .rec-chip.amber,
.item .txt .rec-chip.violet {
color: var(--ink);
}
.rec-head {
margin-bottom: 16px;
}
.rec-player {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 20px;
}
.rec-frame {
position: relative;
box-sizing: content-box;
width: calc(100% - 12px);
margin: 0 auto 4px;
padding: 6px;
overflow: hidden;
border-radius: var(--r-card);
background: var(--well);
}
.rec-frame iframe {
position: absolute;
inset: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border: 0;
border-radius: 14px;
display: block;
background: transparent;
}
.rec-wait {
position: absolute;
inset: auto 16px 16px;
margin: 0;
font-size: 15px;
line-height: 20px;
color: var(--ink-2);
text-align: center;
}
.rec-bar {
display: flex;
align-items: center;
gap: 12px;
}
.rec-play {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--btn);
color: var(--btn-ink);
cursor: pointer;
}
.rec-play .ic {
width: 20px;
height: 20px;
}
.rec-track {
position: relative;
flex: 1;
min-width: 0;
height: 44px;
cursor: pointer;
touch-action: none;
}
.rec-rail {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 4px;
margin-top: -2px;
border-radius: 2px;
background: var(--track);
}
.rec-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: 2px;
background: var(--ink);
}
.rec-knob {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: var(--ink);
box-shadow: 0 0 0 3px var(--bg);
pointer-events: none;
}
.rec-marks {
position: absolute;
inset: 0;
pointer-events: none;
}
.rec-mark {
position: absolute;
top: -9px;
width: 6px;
height: 6px;
margin-left: -3px;
border-radius: 50%;
background: var(--ib-gray);
}
.rec-mark.screen { background: var(--ib-blue); }
.rec-mark.lesson { background: var(--ib-green); }
.rec-mark.tap { top: -6px; width: 2px; height: 3px; margin-left: -1px; border-radius: 1px; opacity: 0.6; }
.rec-mark.rage,
.rec-mark.dead { background: var(--ib-amber); }
.rec-mark.layout { background: var(--ib-violet); }
.rec-mark.error,
.rec-mark.api { top: 9px; background: var(--ib-red); }
.rec-under {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-left: 56px;
}
.rec-time {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rec-pills {
display: flex;
gap: 8px;
}
.rec-pill {
appearance: none;
height: 32px;
min-width: 44px;
padding: 0 12px;
border: 0;
border-radius: 16px;
background: var(--chip);
font: inherit;
font-size: 14px;
line-height: 1;
font-weight: 500;
color: var(--ink);
cursor: pointer;
}
.rec-pill[aria-pressed="true"] {
background: var(--btn);
color: var(--btn-ink);
}
.rec-noreplay {
margin: 0 0 20px;
}
.rec-tabs .seg {
margin: 0 0 12px;
}
.rec-panel > .btn {
margin-top: 4px;
}
.rec-row {
appearance: none;
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
width: 100%;
margin: 0;
padding: 13px 16px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
font: inherit;
}
button.rec-row {
cursor: pointer;
}
button.rec-row:active,
.rec-row.now {
background: var(--well-2);
}
.rec-row + .rec-row::before {
content: "";
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 1px;
background: var(--line);
}
.rec-tc {
min-width: 44px;
padding: 1px 8px;
border-radius: 8px;
background: var(--chip);
font-size: 13px;
line-height: 20px;
text-align: center;
color: var(--ink-2);
}
.rec-tc::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin: 0 6px 1px 0;
border-radius: 50%;
vertical-align: middle;
background: transparent;
}
.rec-row.tone-blue .rec-tc::before { background: var(--ib-blue); }
.rec-row.tone-green .rec-tc::before { background: var(--ib-green); }
.rec-row.tone-red .rec-tc::before { background: var(--ib-red); }
.rec-row.tone-amber .rec-tc::before { background: var(--ib-amber); }
.rec-row.tone-violet .rec-tc::before { background: var(--ib-violet); }
.rec-row.now .rec-tc {
background: var(--btn);
color: var(--btn-ink);
}
.rec-row-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rec-row-txt b {
font-size: 15px;
line-height: 21px;
font-weight: 500;
overflow-wrap: anywhere;
}
.rec-row.step .rec-row-txt b {
font-weight: 400;
}
.rec-row-txt span {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
overflow-wrap: anywhere;
}
.rec-row-aside {
font-size: 13px;
line-height: 22px;
color: var(--ink-2);
}
.rec-rows.compact .rec-row {
padding-top: 10px;
padding-bottom: 10px;
}
.rec-rows.compact .rec-row-txt b {
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.rec-facts .item {
min-height: 0;
}
.rec-facts .txt span {
font-size: 13px;
line-height: 18px;
}
.rec-facts .txt b {
font-weight: 400;
}
.rec-settings .rec-note {
margin: 10px 0 0;
}
.rec-live-btn {
margin: 0 0 16px;
}
.rec-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
max-width: 100%;
min-height: 26px;
margin: 0 auto;
}
.rec-badge,
.rec-clock {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 10px;
border-radius: 13px;
font-size: 13px;
line-height: 1;
font-weight: 600;
color: var(--btn-ink);
background: var(--btn);
}
.rec-badge:empty {
visibility: hidden;
}
.rec-badge.rec {
color: var(--ink);
background: var(--chip);
}
.rec-clock {
font-weight: 500;
color: var(--ink);
background: var(--chip);
}
.rec-clock[hidden] {
display: none;
}
.rec-badge.live {
color: #fff;
background: var(--bad);
}
.rec-badge.live::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
animation: rec-beat 1.6s ease-in-out infinite;
}
@keyframes rec-beat {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.rec-badge.live::before { animation: none; }
}
.rec-veil {
position: absolute;
inset: 6px;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 24px;
border-radius: 14px;
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.74);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.rec-veil[hidden] {
display: none;
}
.rec-veil b {
font-size: 19px;
line-height: 24px;
font-weight: 600;
}
.rec-veil span {
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.78);
}
.rec-caption {
min-height: 20px;
margin: 0 8px;
overflow: hidden;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--ink);
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s ease;
}
.rec-caption.on {
opacity: 1;
}
.rec-caption.tone-red { color: var(--bad); }
.rec-caption.quiet { font-weight: 400; color: var(--ink-2); }
.rec-times {
display: flex;
flex-direction: column;
min-width: 0;
}
.rec-when {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.rec-when:empty {
display: none;
}
.rec-pill[hidden] {
display: none;
}
.rec-golive {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
background: var(--bad);
}
.rec-golive .rec-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
}
.rec-track.at-live .rec-fill {
background: var(--bad);
}
.rec-track.at-live .rec-knob {
background: var(--bad);
}
.rec-chip.rec-chip-live {
color: #fff;
background: var(--bad);
}
.rec-person {
margin: 0 0 20px;
}
.rec-person .group-label {
margin-top: 4px;
}
.rec-subday {
margin: 12px 0 6px;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.rec-person .rec-row-aside {
min-width: 20px;
text-align: center;
color: var(--ink);
}
.rec-ses-box + .rec-ses-box {
border-top: 1px solid var(--line);
}
.rec-ses-row {
display: flex;
align-items: stretch;
}
.rec-ses {
appearance: none;
display: grid;
grid-template-columns: auto minmax(0, 1fr) 20px;
align-items: start;
gap: 12px;
flex: 1;
min-width: 0;
margin: 0;
padding: 13px 8px 13px 16px;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
font: inherit;
cursor: pointer;
}
.rec-ses:active {
background: var(--well-2);
}
.rec-ses .go {
width: 20px;
height: 20px;
margin-top: 2px;
color: var(--ink-3);
transition: transform 0.2s var(--ease);
}
.rec-ses.open .go {
transform: rotate(180deg);
}
.rec-ses-play {
appearance: none;
flex: none;
display: grid;
place-items: center;
width: 52px;
margin: 0;
padding: 0;
border: 0;
border-left: 1px solid var(--line);
background: transparent;
color: var(--ink);
cursor: pointer;
}
.rec-ses-play .ic {
width: 20px;
height: 20px;
}
.rec-ses-play:active {
background: var(--well-2);
}
.rec-ses-details {
margin: 0;
border-radius: 0;
background: transparent;
border-top: 1px solid var(--line);
}
.rec-finds-slot:empty {
display: none;
}
.rec-finds-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.rec-finds-head .group-label {
margin: 0 0 8px;
}
.rec-finds {
display: grid;
gap: 10px;
margin: 0 0 20px;
}
.rec-find {
display: grid;
gap: 8px;
padding: 14px 16px;
}
.rec-find-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.rec-find-top .txt {
display: flex;
flex-direction: column;
min-width: 0;
}
.rec-find-top b {
font-size: 16px;
line-height: 21px;
font-weight: 600;
color: var(--ink);
}
.rec-find-where {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
overflow-wrap: anywhere;
}
.rec-find-nums {
margin: 0;
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.rec-find-nums b {
font-weight: 600;
color: var(--ink);
}
.rec-find-hint {
margin: 0;
font-size: 14px;
line-height: 19px;
color: var(--ink);
}
.rec-find-ex {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rec-find-ex:empty {
display: none;
}
.rec-find-who {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
height: 30px;
padding: 0 10px 0 8px;
border: 0;
border-radius: 15px;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--ink);
background: var(--bg);
cursor: pointer;
}
.rec-find-who span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rec-find-who .ic {
flex: none;
width: 14px;
height: 14px;
}
.rf-hero {
margin: 4px 0 8px;
padding: 20px 20px 16px;
border-radius: var(--r-group);
background: var(--well);
}
.rf-hero .kicker {
margin-bottom: 4px;
}
.rf-say {
margin: 6px 0 0;
font-size: 16px;
line-height: 23px;
color: var(--ink);
}
.rf-day {
margin: 16px 0 6px;
}
.rf-day .rf-track {
fill: color-mix(in srgb, var(--ink) 8%, transparent);
}
.rf-day .rf-plan {
fill: none;
stroke: var(--ink-2);
stroke-width: 1.6;
stroke-dasharray: 4 4;
}
.rf-day .rf-sleep {
fill: var(--accent);
}
.rf-day .rf-t {
font-size: 14px;
font-weight: 500;
fill: var(--ink);
font-variant-numeric: tabular-nums;
}
.rf-legend {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.rf-legend .lg {
display: inline-flex;
align-items: center;
gap: 6px;
}
.rf-legend .key {
width: 14px;
height: 8px;
border-radius: 4px;
background: var(--accent);
}
.rf-legend .dash {
width: 16px;
height: 0;
border-top: 1.6px dashed var(--ink-2);
}
.rf-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.rf-facts b {
display: block;
font-size: 20px;
line-height: 26px;
font-weight: 500;
}
.rf-facts span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rf-card {
padding: 16px 12px 12px;
}
.rf-week .rf-h {
font-size: 15px;
font-weight: 500;
fill: var(--ink);
font-variant-numeric: tabular-nums;
}
.rf-week .rf-h.dim {
fill: var(--ink-2);
}
.rf-path {
padding: 20px;
}
.rf-path-head {
display: flex;
align-items: baseline;
gap: 10px;
}
.rf-path-head b {
font-size: 40px;
line-height: 44px;
font-weight: 500;
letter-spacing: -0.4px;
}
.rf-path-head span {
font-size: 15px;
color: var(--ink-2);
}
.rf-path-bar {
position: relative;
height: 12px;
margin: 18px 10px 10px;
border-radius: 6px;
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.rf-path-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: calc(var(--p) * 100%);
border-radius: 6px;
background: var(--accent);
}
.rf-path-dot {
position: absolute;
top: 50%;
left: calc(var(--p) * 100%);
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
border-radius: 50%;
background: var(--well);
box-shadow: inset 0 0 0 6px var(--accent);
}
.rf-path-ends {
display: flex;
justify-content: space-between;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.rf-dots {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 4px;
align-items: center;
margin: 10px 0 0;
}
.rf-dot {
justify-self: center;
width: 12px;
height: 12px;
border-radius: 50%;
}
.rf-dots.big .rf-dot {
width: 16px;
height: 16px;
}
.rf-dot[data-st="on"] {
background: var(--accent);
}
.rf-dot[data-st="off"] {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent);
}
.rf-dot[data-st="none"] {
transform: scale(0.45);
background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.rf-dot[data-today] {
outline: 2px solid color-mix(in srgb, var(--ink) 55%, transparent);
outline-offset: 2px;
}
.rf-dots-legend {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 10px;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.rf-dots-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.rf-dots-legend span::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
}
.rf-dots-legend [data-st="on"]::before {
background: var(--accent);
}
.rf-dots-legend [data-st="off"]::before {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent);
}
.rf-dots-legend [data-st="none"]::before {
width: 5px;
height: 5px;
background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.rf-label {
margin: 2px 0 0;
font-size: 16px;
line-height: 22px;
color: var(--ink-2);
}
.rf-next {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.rf-habits {
display: grid;
gap: 18px;
padding: 18px 16px;
}
.rf-habit-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.rf-habit-top b {
font-size: 16px;
line-height: 22px;
font-weight: 500;
}
.rf-habit-top span {
flex: none;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.rf-habit .rf-dots {
margin-top: 8px;
}
.scene {
min-height: calc(100vh - 12px);
padding-bottom: calc(100px + var(--safe-b));
}
body.full .app:has(> .scene) {
padding-bottom: 0;
}
.scn-canvas {
position: relative;
margin: -12px calc(-1 * var(--gutter)) 0;
padding: calc(12px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px)) var(--gutter) 22px;
overflow: hidden;
border-radius: 0 0 30px 30px;
color: #fff;
background:
radial-gradient(80% 70% at 46% 42%, #d49aff 0%, #a85af8 22%, #8026f4 46%, #4b13a8 72%, rgba(44, 9, 106, 0) 100%),
linear-gradient(180deg, #2c096a, #27065c);
}
.scn-canvas.compact {
padding-bottom: 18px;
}
.scn-bar {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
}
.scn-glass {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
cursor: pointer;
}
.scn-glass .ic {
width: 22px;
height: 22px;
}
.scn-bar-gap {
flex: none;
width: 40px;
}
.scn-brand {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
font-size: 18px;
line-height: 24px;
font-weight: 500;
letter-spacing: -0.2px;
white-space: nowrap;
}
.scn-orb {
width: 22px;
height: auto;
margin-top: -2px;
}
.scn-canvas-k {
margin: 18px 0 0;
font-size: 14px;
line-height: 19px;
color: rgba(255, 255, 255, 0.72);
}
.scn-headline {
margin: 14px 0 8px;
font-size: 36px;
line-height: 46px;
font-weight: 500;
letter-spacing: -1px;
color: #fff;
overflow-wrap: anywhere;
}
.scn-canvas-k + .scn-headline {
margin-top: 4px;
}
.scn-headline.small {
font-size: 30px;
line-height: 38px;
letter-spacing: -0.7px;
}
.scn-headline > span + span {
margin-left: 8px;
}
.scn-pill {
display: inline-block;
padding: 0 12px;
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.scn-pill.green {
color: #fff;
background: #00bc7d;
}
.scn-pill.white {
color: #4b13a8;
background: #fff;
}
.scn-lead {
margin: 0;
font-size: 15px;
line-height: 21px;
color: rgba(255, 255, 255, 0.8);
}
.scn-wave {
margin: 16px 0 0;
padding: 14px 14px 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 22px;
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.scn-wave-track {
position: relative;
height: 132px;
margin: 0 18px;
}
.scn-wave-track::before,
.scn-wave-line {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
border-radius: 2px;
}
.scn-wave-track::before {
right: 0;
background: rgba(255, 255, 255, 0.2);
}
.scn-wave-line {
background: linear-gradient(90deg, #fdc700, #fb64b6);
box-shadow: 0 0 12px rgba(253, 199, 0, 0.6);
}
.scn-wave-face {
position: absolute;
bottom: 14px;
display: grid;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
transform: translateX(-50%);
cursor: pointer;
}
.scn-wave-face.lane1 { bottom: 52px; }
.scn-wave-face.lane2 { bottom: 90px; }
.scn-wave-face .scn-face {
box-shadow: 0 0 0 2px #fff;
}
.scn-wave-face.own .scn-face {
box-shadow: 0 0 0 3px #00d492;
}
.scn-wave-run {
position: absolute;
top: -6px;
right: -10px;
min-width: 20px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
font-size: 11px;
line-height: 18px;
font-style: normal;
font-weight: 700;
text-align: center;
color: #4b13a8;
background: #fff;
}
.scn-wave-axis {
display: flex;
justify-content: space-between;
margin: 8px 0 0;
font-size: 11px;
line-height: 14px;
color: rgba(255, 255, 255, 0.62);
font-variant-numeric: tabular-nums;
}
.scn-wave-note {
margin: 8px 0 0;
font-size: 12px;
line-height: 16px;
color: rgba(255, 255, 255, 0.62);
}
.scn-home {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin: 16px 0 0;
}
.scn-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
width: 100%;
padding: 16px;
border: 0;
border-radius: 22px;
font: inherit;
text-align: left;
color: var(--ink);
background: var(--well);
}
button.scn-card {
cursor: pointer;
}
.scn-card.dark {
color: var(--dark-ink);
background: var(--dark-card);
}
.scn-kick {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.scn-card.dark .scn-kick {
color: var(--dark-ink-2);
}
.scn-team-empty {
display: flex;
align-items: center;
gap: 14px;
}
.scn-3d {
flex: none;
width: 64px;
height: 64px;
object-fit: contain;
}
.scn-team-empty .txt,
.scn-league-mini .txt {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.scn-team-empty .txt b,
.scn-league-mini .txt b {
font-size: 17px;
line-height: 22px;
font-weight: 600;
}
.scn-team-empty .txt span,
.scn-league-mini .txt span {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.scn-card .go {
flex: none;
width: 20px;
height: 20px;
color: var(--ink-3);
}
.scn-team-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.scn-chip-flame {
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 9px 0 7px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
color: #8a4b00;
background: rgba(253, 199, 0, 0.3);
}
.scn-chip-flame .ic {
width: 14px;
height: 14px;
color: #ff8a3d;
}
.scn-team-name {
font-size: 20px;
line-height: 26px;
font-weight: 600;
letter-spacing: -0.2px;
}
.scn-team-goal {
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.scn-team-faces {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 6px 0 0;
}
.scn-team-face {
position: relative;
display: grid;
justify-items: center;
gap: 4px;
}
.scn-team-face .scn-face {
box-shadow: 0 0 0 2px var(--well), 0 0 0 4px transparent;
}
.scn-team-face.done .scn-face {
box-shadow: 0 0 0 2px var(--well), 0 0 0 4px var(--good);
}
.scn-team-n {
font-size: 11px;
line-height: 14px;
font-style: normal;
font-weight: 600;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.scn-deed-top {
display: flex;
align-items: center;
gap: 12px;
}
.scn-deed-ic {
display: grid;
flex: none;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--dark-pill);
}
.scn-deed-ic .ic {
width: 22px;
height: 22px;
}
.scn-deed b {
font-size: 20px;
line-height: 26px;
font-weight: 600;
letter-spacing: -0.2px;
}
.scn-deed-n {
margin: 0;
font-size: 14px;
line-height: 19px;
color: var(--dark-ink-2);
}
.scn-deed-thumbs {
display: flex;
gap: 8px;
margin: 4px -16px 0;
padding: 0 16px;
overflow-x: auto;
scrollbar-width: none;
}
.scn-deed-thumbs::-webkit-scrollbar {
display: none;
}
.scn-thumb {
flex: none;
width: 72px;
height: 90px;
padding: 0;
overflow: hidden;
border: 0;
border-radius: 14px;
background: var(--dark-pill);
cursor: pointer;
}
.scn-thumb-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.scn-thumb-tile {
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding: 6px;
}
.scn-thumb-tile p {
display: -webkit-box;
margin: 0;
overflow: hidden;
font-size: 9px;
line-height: 12px;
font-weight: 600;
text-align: center;
color: var(--ink);
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.scn-deed-acts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin: 6px 0 0;
}
.scn-deed .btn {
color: var(--dark-card);
background: var(--dark-ink);
}
.scn-deed .btn.second {
color: var(--dark-ink);
background: var(--dark-pill);
}
.scn-league-mini {
display: flex;
align-items: center;
gap: 14px;
}
.scn-league-rank {
display: grid;
flex: none;
justify-items: center;
min-width: 52px;
}
.scn-league-rank b {
font-size: 28px;
line-height: 32px;
font-weight: 700;
}
.scn-league-rank span {
font-size: 11px;
line-height: 14px;
color: var(--ink-2);
}
.scn-stack {
display: inline-flex;
flex: none;
}
.scn-stack:empty {
display: none;
}
.scn-stack .scn-face {
box-shadow: 0 0 0 2px var(--well);
}
.scn-stack .scn-face + .scn-face {
margin-left: -9px;
}
.scn-face {
position: relative;
display: inline-grid;
flex: none;
place-items: center;
overflow: hidden;
border-radius: 50%;
color: #fff;
background: var(--ib-violet);
}
.scn-face b {
font-weight: 600;
line-height: 1;
}
.scn-face img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.scn-face.preset {
background: #f4f4f4;
}
.scn-face.preset .me-ava {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
}
.scn-face.team {
color: #fff;
background: #8026f4;
}
.scn-face.s28 { width: 28px; height: 28px; font-size: 12px; }
.scn-face.s32 { width: 32px; height: 32px; font-size: 13px; }
.scn-face.s36 { width: 36px; height: 36px; font-size: 15px; }
.scn-face.s44 { width: 44px; height: 44px; font-size: 18px; }
.scn-face.s52 { width: 52px; height: 52px; font-size: 20px; }
.scn-face.s64 { width: 64px; height: 64px; font-size: 24px; }
.scn-face.s88 { width: 88px; height: 88px; font-size: 34px; }
.scn-face.s28 .ic, .scn-face.s32 .ic { width: 15px; height: 15px; }
.scn-face.s36 .ic { width: 18px; height: 18px; }
.scn-face.tone0 { background: var(--ib-violet); }
.scn-face.tone1 { background: var(--ib-sky); }
.scn-face.tone2 { background: var(--ib-pink); }
.scn-face.tone3 { background: var(--ib-green); }
.scn-face.tone4 { color: var(--ib-ink); background: var(--ib-amber); }
.scn-face.tone5 { background: var(--ib-blue); }
.scn-feed-wrap {
margin: 8px 0 0;
}
.scn-feed-head {
margin: 26px 0 12px;
font-size: 26px;
line-height: 32px;
font-weight: 500;
letter-spacing: -0.6px;
color: var(--ink);
}
.scn-feed {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.scn-ev {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding: 14px;
border-radius: 22px;
background: var(--well);
}
.scn-ev-head {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.scn-who-btn {
display: grid;
flex: none;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.scn-who {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.scn-who b {
overflow: hidden;
font-size: 15px;
line-height: 20px;
font-weight: 600;
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
}
.scn-who span {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.scn-dots {
display: grid;
flex: none;
place-items: center;
width: 36px;
height: 36px;
margin-right: -6px;
padding: 0;
border: 0;
border-radius: 50%;
color: var(--ink-2);
background: transparent;
cursor: pointer;
}
.scn-ev-body {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 16px;
background: var(--bg);
user-select: none;
}
.scn-ev-body p {
margin: 0;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: var(--ink);
}
.scn-ev-mile {
position: relative;
display: grid;
gap: 2px;
padding: 18px 18px 16px;
overflow: hidden;
border-radius: 18px;
color: #fff;
background: radial-gradient(90% 90% at 30% 20%, #d49aff 0%, #a85af8 30%, #8026f4 62%, #4b13a8 100%);
user-select: none;
}
.scn-ev-mile-n {
font-size: 52px;
line-height: 64px;
font-weight: 700;
letter-spacing: -1.5px;
}
.scn-ev-mile-t {
font-size: 18px;
line-height: 24px;
font-weight: 500;
}
.scn-ev-mile-ic {
position: absolute;
top: 14px;
right: 14px;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
}
.scn-ev-mile-ic .ic {
width: 26px;
height: 26px;
color: #fdc700;
}
.scn-media,
.scn-tile {
position: relative;
overflow: hidden;
border-radius: 16px;
background: var(--bg);
cursor: pointer;
-webkit-touch-callout: none;
user-select: none;
}
.scn-photo {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.scn-tile {
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
padding: 28px 24px;
}
.scn-tile p,
.scn-cell-tile p,
.scn-v-tile p {
margin: 0;
color: var(--ink);
text-align: center;
text-wrap: balance;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.scn-tile.xl p { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.6px; }
.scn-tile.l p { font-size: 23px; line-height: 29px; font-weight: 600; letter-spacing: -0.4px; }
.scn-tile.m p { font-size: 19px; line-height: 26px; font-weight: 500; letter-spacing: -0.2px; }
.scn-tile.s p { font-size: 16px; line-height: 23px; font-weight: 500; }
.tone0.scn-tile, .tone0.scn-cell-tile, .tone0.scn-thumb-tile { background: rgba(194, 122, 255, 0.24); }
.tone1.scn-tile, .tone1.scn-cell-tile, .tone1.scn-thumb-tile { background: rgba(0, 188, 255, 0.2); }
.tone2.scn-tile, .tone2.scn-cell-tile, .tone2.scn-thumb-tile { background: rgba(251, 100, 182, 0.22); }
.tone3.scn-tile, .tone3.scn-cell-tile, .tone3.scn-thumb-tile { background: rgba(0, 212, 146, 0.2); }
.tone4.scn-tile, .tone4.scn-cell-tile, .tone4.scn-thumb-tile { background: rgba(253, 199, 0, 0.28); }
.tone5.scn-tile, .tone5.scn-cell-tile, .tone5.scn-thumb-tile { background: rgba(51, 146, 255, 0.2); }
.scn-moment.team .scn-tile {
color: #fff;
background: radial-gradient(90% 90% at 30% 20%, #a85af8 0%, #8026f4 55%, #4b13a8 100%);
}
.scn-moment.team .scn-tile p {
color: #fff;
}
.scn-caption {
margin: 0;
font-size: 16px;
line-height: 23px;
color: var(--ink);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.scn-foot {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.scn-takt {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px 0 8px;
border: 0;
border-radius: 18px;
font: inherit;
font-size: 14px;
font-weight: 500;
color: var(--ink);
background: var(--bg);
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--spring);
}
.scn-takt-ic {
display: grid;
place-items: center;
}
.scn-takt .ic {
width: 18px;
height: 18px;
}
.scn-takt .n:empty {
display: none;
}
.scn-takt.on {
color: #fff;
background: #8026f4;
}
.scn-takt:active {
transform: scale(0.94);
}
.scn-chip {
display: inline-flex;
align-items: center;
gap: 5px;
min-width: 0;
overflow: hidden;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.scn-chip .ic {
flex: none;
width: 14px;
height: 14px;
}
.scn-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scn-by {
margin: -4px 0 0;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.scn-empty {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: 8px;
padding: 28px 12px 20px;
text-align: center;
}
.scn-empty-ic {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 0 4px;
border-radius: 50%;
color: #fff;
background: #8026f4;
}
.scn-empty-ic .ic {
width: 26px;
height: 26px;
}
.scn-empty b {
font-size: 18px;
line-height: 24px;
font-weight: 600;
color: var(--ink);
}
.scn-empty p {
max-width: 300px;
margin: 0 0 8px;
font-size: 15px;
line-height: 21px;
color: var(--ink-2);
}
.scn-pad {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
padding: 18px 0 0;
}
.scn-team-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 16px 0 0;
}
.scn-team-stats.four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.scn-stat-glass {
display: grid;
gap: 2px;
min-width: 0;
padding: 10px 10px 9px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.14);
}
.scn-stat-glass b {
font-size: 22px;
line-height: 26px;
font-weight: 700;
color: #fff;
}
.scn-stat-glass span {
font-size: 12px;
line-height: 15px;
color: rgba(255, 255, 255, 0.78);
}
.scn-team-rule {
margin: 0;
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.scn-members {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.scn-member {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 20px;
background: var(--well);
}
.scn-member .txt {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.scn-member b {
overflow: hidden;
font-size: 16px;
line-height: 21px;
font-weight: 600;
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
}
.scn-member .txt > span:not(.scn-week) {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.scn-member.done .txt > span:not(.scn-week) {
color: var(--good);
}
.scn-week {
display: flex;
gap: 5px;
margin: 4px 0 0;
}
.scn-cell-d {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--line);
}
.scn-cell-d.done {
background: #8026f4;
}
.scn-cell-d.today {
background: transparent;
box-shadow: inset 0 0 0 2px #8026f4;
}
.scn-cell-d.future {
background: var(--well-2);
}
.scn-nudge {
display: inline-flex;
flex: none;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 12px 0 10px;
border: 0;
border-radius: 17px;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #fff;
background: #8026f4;
cursor: pointer;
}
.scn-nudge .ic {
width: 15px;
height: 15px;
}
.scn-you,
.scn-nudged {
flex: none;
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
}
.scn-ok {
display: grid;
flex: none;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: #fff;
background: var(--good);
}
.scn-ok .ic {
width: 17px;
height: 17px;
stroke-width: 2.6;
}
.scn-link {
justify-self: center;
margin: 6px 0 0;
padding: 8px;
border: 0;
font: inherit;
font-size: 14px;
color: var(--ink-2);
background: transparent;
cursor: pointer;
}
.scn-code {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-radius: var(--r-row);
background: var(--well);
}
.scn-code span {
font-size: 14px;
color: var(--ink-2);
}
.scn-code b {
font-size: 20px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--ink);
}
.scn-hero-3d {
position: absolute;
right: 8px;
top: 58px;
width: 92px;
height: 92px;
object-fit: contain;
pointer-events: none;
}
.scn-goals {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
}
.scn-goal {
display: grid;
justify-items: center;
gap: 0;
padding: 10px 0 8px;
border: 0;
border-radius: 16px;
font: inherit;
color: var(--ink);
background: var(--well);
cursor: pointer;
}
.scn-goal b {
font-size: 22px;
line-height: 26px;
font-weight: 700;
}
.scn-goal span {
font-size: 11px;
line-height: 14px;
color: var(--ink-2);
}
.scn-goal.on {
color: #fff;
background: #8026f4;
}
.scn-goal.on span {
color: rgba(255, 255, 255, 0.8);
}
.scn-h2 {
margin: 10px 0 0;
font-size: 22px;
line-height: 28px;
font-weight: 500;
letter-spacing: -0.4px;
color: var(--ink);
}
.scn-label {
margin: 4px 0 -4px;
font-size: 14px;
line-height: 19px;
font-weight: 600;
color: var(--ink);
}
.scn-status {
margin: 0;
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.scn-status:empty {
display: none;
}
.scn-note {
margin: 0;
font-size: 14px;
line-height: 19px;
color: var(--ink-2);
}
.scn-podium {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: end;
gap: 8px;
margin: 18px 0 0;
}
.scn-place {
position: relative;
display: grid;
justify-items: center;
gap: 4px;
min-width: 0;
padding: 12px 6px 36px;
border-radius: 18px 18px 6px 6px;
text-align: center;
background: rgba(255, 255, 255, 0.14);
}
.scn-place.p1 {
padding-top: 16px;
padding-bottom: 46px;
background: rgba(255, 255, 255, 0.22);
}
.scn-place.empty {
visibility: hidden;
}
.scn-place .scn-face {
box-shadow: 0 0 0 3px #c9c9cc;
}
.scn-place.p1 .scn-face {
box-shadow: 0 0 0 3px #fdc700;
}
.scn-place.p3 .scn-face {
box-shadow: 0 0 0 3px #ff8a3d;
}
.scn-place-nick {
max-width: 100%;
overflow: hidden;
font-size: 14px;
line-height: 18px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.scn-place-n {
font-size: 12px;
line-height: 15px;
color: rgba(255, 255, 255, 0.8);
}
.scn-step {
position: absolute;
left: 50%;
bottom: 8px;
font-size: 20px;
line-height: 24px;
font-style: normal;
font-weight: 700;
transform: translateX(-50%);
}
.scn-ranks {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
.scn-rank {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 8px 14px;
border-radius: 18px;
}
.scn-rank.own {
background: var(--accent-soft);
}
.scn-rank-n {
flex: none;
min-width: 24px;
font-size: 15px;
font-weight: 600;
text-align: center;
color: var(--ink-2);
}
.scn-rank b {
flex: 1;
min-width: 0;
overflow: hidden;
font-size: 15px;
line-height: 20px;
font-weight: 600;
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
}
.scn-rank > span:last-child {
flex: none;
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.scn-rank-gap {
padding: 2px 0;
font-size: 14px;
text-align: center;
color: var(--ink-3);
}
.scn-profile {
display: grid;
justify-items: center;
margin: 14px 0 0;
text-align: center;
}
.scn-profile .scn-face {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.scn-profile .scn-headline {
margin: 12px 0 2px;
}
.scn-my {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.scn-switch {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 16px;
border: 0;
border-radius: var(--r-row);
font: inherit;
text-align: left;
background: var(--well);
cursor: pointer;
}
.scn-switch .txt {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.scn-switch b {
font-size: 15px;
line-height: 20px;
font-weight: 600;
color: var(--ink);
}
.scn-switch .txt span {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.scn-knob {
position: relative;
flex: none;
width: 44px;
height: 26px;
border-radius: 13px;
background: var(--track);
transition: background 0.18s ease;
}
.scn-knob::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform 0.18s var(--ease);
}
.scn-switch.on .scn-knob {
background: var(--good);
}
.scn-switch.on .scn-knob::after {
transform: translateX(18px);
}
.scn-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
overflow: hidden;
border-radius: 18px;
}
.scn-cell {
position: relative;
aspect-ratio: 1 / 1;
padding: 0;
overflow: hidden;
border: 0;
background: var(--well);
cursor: pointer;
}
.scn-cell-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.scn-cell-tile {
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding: 10px 10px 34px;
}
.scn-cell-tile p {
display: -webkit-box;
overflow: hidden;
font-size: 13px;
line-height: 17px;
font-weight: 600;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.scn-cell-n {
position: absolute;
left: 6px;
bottom: 6px;
display: inline-flex;
align-items: center;
gap: 3px;
height: 22px;
padding: 0 7px 0 5px;
border-radius: 11px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: rgba(0, 0, 0, 0.45);
}
.scn-cell-n .ic {
width: 12px;
height: 12px;
}
.scn-canvas.welcome {
padding-bottom: 28px;
}
.scn-canvas.welcome .scn-headline {
font-size: 44px;
line-height: 56px;
}
.scn-points {
display: grid;
gap: 14px;
margin: 4px 0;
padding: 0;
list-style: none;
}
.scn-points li {
display: flex;
align-items: flex-start;
gap: 12px;
}
.scn-point-ic {
display: grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #8026f4;
}
.scn-point-ic .ic {
width: 20px;
height: 20px;
}
.scn-points .txt {
display: flex;
flex-direction: column;
min-width: 0;
}
.scn-points b {
font-size: 16px;
line-height: 21px;
font-weight: 600;
color: var(--ink);
}
.scn-points .txt span {
font-size: 14px;
line-height: 20px;
color: var(--ink-2);
}
.scn-nav {
position: fixed;
left: 50%;
bottom: max(12px, var(--safe-b));
z-index: 40;
display: flex;
align-items: center;
width: min(420px, calc(100vw - 24px));
height: 64px;
padding: 5px;
border-radius: 32px;
background: var(--float);
box-shadow: var(--float-shadow);
transform: translateX(-50%);
}
.scn-nav-tab {
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 0;
height: 54px;
padding: 0;
border: 0;
border-radius: 27px;
font: inherit;
font-size: 11px;
line-height: 14px;
font-weight: 500;
color: var(--ink-2);
background: transparent;
white-space: nowrap;
cursor: pointer;
}
.scn-nav-tab .ic {
width: 23px;
height: 23px;
}
.scn-nav-tab.on {
color: var(--ink);
background: var(--float-puck);
box-shadow: var(--float-puck-shadow);
}
.scn-nav-new {
display: grid;
flex: none;
place-items: center;
width: 52px;
height: 52px;
margin: 0 4px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: #8026f4;
box-shadow: 0 6px 16px rgba(128, 38, 244, 0.35);
cursor: pointer;
}
.scn-nav-new .ic {
width: 26px;
height: 26px;
stroke-width: 2.4;
}
.scn-compose {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.scn-compose .sheet-title {
margin-bottom: 0;
}
.scn-shot {
position: relative;
display: grid;
place-items: center;
align-content: center;
gap: 4px;
width: 100%;
aspect-ratio: 4 / 3;
max-height: 46vh;
padding: 16px;
overflow: hidden;
border: 1.5px dashed var(--line);
border-radius: var(--r-group);
font: inherit;
text-align: center;
color: var(--ink);
background: var(--well);
cursor: pointer;
}
.scn-shot-ic {
display: grid;
place-items: center;
width: 52px;
height: 52px;
margin: 0 0 4px;
border-radius: 50%;
color: #fff;
background: #8026f4;
}
.scn-shot-ic .ic {
width: 24px;
height: 24px;
}
.scn-shot b {
font-size: 16px;
line-height: 21px;
font-weight: 600;
}
.scn-shot > span:not(.scn-shot-ic):not(.scn-shot-swap) {
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
.scn-shot.has {
padding: 0;
border: 0;
}
.scn-shot.has img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.scn-shot-swap {
position: absolute;
right: 10px;
bottom: 10px;
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 12px;
border-radius: 15px;
font-size: 13px;
font-weight: 500;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
textarea.scn-field {
min-height: 84px;
resize: none;
}
.scn-deed-chip {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 6px;
max-width: 100%;
min-height: 36px;
padding: 6px 14px 6px 10px;
border: 0;
border-radius: 18px;
font: inherit;
font-size: 14px;
line-height: 19px;
font-weight: 500;
text-align: left;
color: var(--ink-2);
background: var(--chip);
cursor: pointer;
}
.scn-deed-chip .ic {
flex: none;
width: 16px;
height: 16px;
}
.scn-deed-chip.on {
color: var(--accent-text);
background: var(--accent-soft);
}
.scn-compose-note {
margin: 0;
font-size: 13px;
line-height: 18px;
color: var(--ink-2);
}
html.scn-locked,
html.scn-locked body {
overflow: hidden;
}
.scn-viewer {
position: fixed;
inset: 0;
z-index: 70;
background: #000;
opacity: 0;
transition: opacity 0.2s ease;
}
.scn-viewer.in {
opacity: 1;
}
.scn-viewer.out {
opacity: 0;
}
.scn-v-track {
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.scn-v-track::-webkit-scrollbar {
display: none;
}
.scn-v-slide {
position: relative;
display: grid;
place-items: center;
height: 100%;
overflow: hidden;
scroll-snap-align: start;
scroll-snap-stop: always;
user-select: none;
-webkit-touch-callout: none;
}
.scn-v-media {
display: grid;
place-items: center;
width: 100%;
height: 100%;
}
.scn-v-photo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.scn-v-tile {
display: grid;
place-items: center;
width: 100%;
height: 100%;
padding: 96px 36px 180px;
background: radial-gradient(80% 70% at 46% 42%, #d49aff 0%, #a85af8 22%, #8026f4 46%, #4b13a8 72%, #2c096a 100%);
}
.scn-v-tile p {
color: #fff;
font-size: 32px;
line-height: 38px;
font-weight: 500;
letter-spacing: -0.8px;
}
.scn-v-tile.m p,
.scn-v-tile.s p {
font-size: 23px;
line-height: 31px;
letter-spacing: -0.3px;
}
.tone1.scn-v-tile { background: radial-gradient(80% 70% at 46% 42%, #7dd8ff 0%, #00a6f4 40%, #0369a1 75%, #082f49 100%); }
.tone2.scn-v-tile { background: radial-gradient(80% 70% at 46% 42%, #ffa3d4 0%, #f6339a 40%, #9d174d 75%, #4a0627 100%); }
.tone3.scn-v-tile { background: radial-gradient(80% 70% at 46% 42%, #7ff0c4 0%, #00bc7d 40%, #047857 75%, #022c22 100%); }
.tone4.scn-v-tile { background: radial-gradient(80% 70% at 46% 42%, #ffe27a 0%, #f59e0b 40%, #b45309 75%, #451a03 100%); }
.tone5.scn-v-tile { background: radial-gradient(80% 70% at 46% 42%, #9cc8ff 0%, #2b7fff 40%, #1d4ed8 75%, #0b1d4f 100%); }
.scn-v-shade {
position: absolute;
inset: auto 0 0;
height: 42%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
pointer-events: none;
}
.scn-v-info {
position: absolute;
left: 16px;
right: 84px;
bottom: calc(24px + var(--safe-b));
display: grid;
gap: 10px;
}
.scn-v-who {
display: flex;
align-items: center;
gap: 10px;
}
.scn-v-info .scn-who b,
.scn-v-text {
color: #fff;
}
.scn-v-info .scn-who span {
color: rgba(255, 255, 255, 0.75);
}
.scn-v-text {
display: -webkit-box;
margin: 0;
overflow: hidden;
font-size: 16px;
line-height: 22px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.scn-v-rail {
position: absolute;
right: 12px;
bottom: calc(24px + var(--safe-b));
display: grid;
justify-items: center;
gap: 14px;
}
.scn-v-takt {
display: grid;
justify-items: center;
gap: 4px;
padding: 0;
border: 0;
font: inherit;
color: #fff;
background: transparent;
cursor: pointer;
}
.scn-v-takt .scn-takt-ic {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: background 0.18s ease, transform 0.18s var(--spring);
}
.scn-v-takt .ic {
width: 26px;
height: 26px;
}
.scn-v-takt.on .scn-takt-ic {
background: #8026f4;
}
.scn-v-takt:active .scn-takt-ic {
transform: scale(0.92);
}
.scn-v-takt b {
min-height: 18px;
font-size: 14px;
line-height: 18px;
font-weight: 600;
}
.scn-v-more,
.scn-v-close {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
cursor: pointer;
}
.scn-v-more .ic,
.scn-v-close .ic {
width: 22px;
height: 22px;
}
.scn-v-close {
position: absolute;
top: calc(12px + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
left: 12px;
z-index: 2;
}
.scn-burst {
position: fixed;
z-index: 90;
width: 0;
height: 0;
pointer-events: none;
}
.scn-burst i {
position: absolute;
display: grid;
place-items: center;
color: #a85af8;
}
.scn-burst .big {
width: 96px;
height: 96px;
margin: -48px 0 0 -48px;
color: #fff;
filter: drop-shadow(0 4px 14px rgba(128, 38, 244, 0.6));
animation: scn-big 0.9s var(--ease) forwards;
}
.scn-burst .big .ic {
width: 84px;
height: 84px;
stroke-width: 2.2;
}
.scn-burst .note {
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
opacity: 0;
animation: scn-note 0.95s var(--ease) var(--d, 0ms) forwards;
}
.scn-burst .note .ic {
width: 22px;
height: 22px;
}
@keyframes scn-big {
0% { opacity: 0; transform: scale(0.4); }
25% { opacity: 1; transform: scale(1.08); }
45% { transform: scale(0.96); }
70% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.1) translateY(-20px); }
}
@keyframes scn-note {
0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
.scn-viewer,
.scn-takt,
.scn-v-takt .scn-takt-ic {
transition: none;
}
}
.co {
padding: 0 0 calc(32px + var(--safe-b));
}
.co-head-acts {
display: flex;
align-items: center;
gap: 6px;
}
.co-hbtn {
position: relative;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
color: var(--ink);
background: var(--well);
}
.co-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
color: #fff;
background: var(--bad);
font-size: 11px;
font-style: normal;
font-weight: 600;
line-height: 18px;
text-align: center;
}
.co-tabs {
display: flex;
gap: 4px;
margin: 0 0 14px;
padding: 4px;
border-radius: 14px;
background: var(--well);
}
.co-tab {
flex: 1;
height: 36px;
border: 0;
border-radius: 10px;
color: var(--ink-2);
background: none;
font-size: 15px;
font-weight: 500;
}
.co-tab.on {
color: var(--ink);
background: var(--bg);
box-shadow: var(--float-puck-shadow);
}
.co-note {
margin: 0 0 16px;
color: var(--ink-2);
font-size: 15px;
}
.co-face {
position: relative;
display: grid;
flex: none;
place-items: center;
overflow: hidden;
border-radius: 50%;
color: #fff;
}
.co-face b {
font-weight: 600;
}
.co-face img,
.co-face .profile-avatar {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.co-face.pic b {
visibility: hidden;
}
.co-face.s32 { width: 32px; height: 32px; font-size: 14px; }
.co-face.s36 { width: 36px; height: 36px; font-size: 15px; }
.co-face.s40 { width: 40px; height: 40px; font-size: 16px; }
.co-face.s44 { width: 44px; height: 44px; font-size: 17px; }
.co-face.s72 { width: 72px; height: 72px; font-size: 28px; }
.co-face.tone0 { background: var(--ib-violet); }
.co-face.tone1 { background: var(--ib-sky); }
.co-face.tone2 { background: var(--ib-pink); }
.co-face.tone3 { background: var(--ib-green); }
.co-face.tone4 { color: var(--ib-ink); background: var(--ib-amber); }
.co-face.tone5 { background: var(--ib-blue); }
.co-face.team { background: var(--well); }
.co-list {
display: grid;
gap: 12px;
}
.co-post {
padding: 14px 16px 6px;
border-radius: var(--r-group);
background: var(--well);
}
.co-post.page {
margin-bottom: 8px;
}
.co-post-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.co-who {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 0;
border: 0;
color: inherit;
background: none;
text-align: left;
}
.co-who .txt {
display: grid;
min-width: 0;
}
.co-who b {
overflow: hidden;
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.co-who .txt > span {
color: var(--ink-2);
font-size: 14px;
line-height: 18px;
}
.co-icon-btn {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-right: -8px;
border: 0;
border-radius: 50%;
color: var(--ink-2);
background: none;
}
.co-text {
margin: 10px 0 0;
font-size: 17px;
line-height: 24px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.co-text:not(.full) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
}
.co-photo {
position: relative;
overflow: hidden;
margin: 12px 0 0;
border-radius: 14px;
background: var(--well-2);
aspect-ratio: 4 / 3;
}
.co-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.2s var(--ease);
}
.co-photo.ready img {
opacity: 1;
}
.co-pop {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: -40px 0 0 -40px;
background: #fff;
pointer-events: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
animation: co-pop 0.7s var(--ease) forwards;
}
@keyframes co-pop {
0% { opacity: 0; transform: scale(0.4); }
25% { opacity: 0.95; transform: scale(1); }
70% { opacity: 0.95; transform: scale(1); }
100% { opacity: 0; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.co-pop { animation-duration: 0.01s; }
}
.co-acts {
display: flex;
align-items: center;
gap: 4px;
margin: 6px -8px 0;
}
.co-act {
display: flex;
align-items: center;
gap: 6px;
height: 40px;
min-width: 44px;
padding: 0 8px;
border: 0;
border-radius: 12px;
color: var(--ink-2);
background: none;
font-size: 15px;
font-weight: 500;
}
.co-act.end {
margin-left: auto;
}
.co-act.on {
color: var(--ink);
}
.co-act.on .ic[class*="filled"],
.ic.filled {
fill: currentColor;
}
.co-act.on:first-child {
color: var(--bad);
}
.co-more {
height: 48px;
border: 0;
border-radius: var(--r-btn);
color: var(--ink);
background: var(--well);
font-size: 16px;
font-weight: 500;
}
.co-empty {
display: grid;
justify-items: center;
gap: 8px;
padding: 40px 12px;
text-align: center;
}
.co-empty b {
font-size: 19px;
line-height: 24px;
}
.co-empty p {
margin: 0 0 8px;
color: var(--ink-2);
font-size: 16px;
line-height: 22px;
}
.co-empty .btn {
min-width: 200px;
}
.co-quiet {
margin: 8px 0;
color: var(--ink-2);
font-size: 15px;
}
.co-sub {
margin: 20px 0 10px;
font-size: 19px;
font-weight: 600;
line-height: 24px;
}
.co-post-view {
padding-bottom: calc(96px + var(--safe-b));
}
.co-comments {
display: grid;
gap: 12px;
}
.co-comment {
display: flex;
align-items: flex-start;
gap: 10px;
}
.co-face-btn {
padding: 0;
border: 0;
background: none;
}
.co-bubble {
min-width: 0;
padding: 8px 12px 6px;
border-radius: 16px;
background: var(--well);
}
.co-bubble b {
font-size: 14px;
font-weight: 600;
}
.co-bubble p {
margin: 2px 0 0;
font-size: 16px;
line-height: 22px;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.co-meta {
display: flex;
gap: 12px;
margin-top: 4px;
color: var(--ink-2);
font-size: 13px;
}
.co-link {
padding: 0;
border: 0;
color: var(--ink-2);
background: none;
font-size: 13px;
font-weight: 600;
}
.co-reply {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 8px;
padding: 10px var(--gutter) calc(10px + var(--safe-b));
border-top: 1px solid var(--line);
background: var(--bg);
}
.co-reply .input {
flex: 1;
height: 44px;
margin: 0;
}
.co-send {
display: grid;
flex: none;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
color: var(--btn-ink);
background: var(--btn);
}
.co-send:disabled {
opacity: 0.5;
}
textarea.input.co-area {
width: 100%;
min-height: 120px;
resize: none;
font-size: 17px;
line-height: 24px;
}
textarea.input.co-area.small {
min-height: 80px;
}
.co-area + .scn-deed-chip {
margin-top: 10px;
}
.co-compose-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
.co-pick {
display: flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 14px;
border: 0;
border-radius: 12px;
color: var(--ink);
background: var(--chip);
font-size: 15px;
font-weight: 500;
}
.co-count {
color: var(--ink-2);
font-size: 13px;
}
.co-shot {
position: relative;
overflow: hidden;
margin: 0 0 12px;
border-radius: 14px;
}
.co-shot img {
display: block;
width: 100%;
max-height: 280px;
object-fit: cover;
}
.co-shot-x {
position: absolute;
top: 8px;
right: 8px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.55);
}
.co-err {
min-height: 0;
margin: 6px 0;
color: var(--bad);
font-size: 15px;
}
.co-err:empty {
margin: 0;
}
.co-label {
display: block;
margin: 14px 0 6px;
color: var(--ink-2);
font-size: 14px;
}
.co-switches {
margin: 14px 0;
}
.co-switch .txt span {
color: var(--ink-2);
font-size: 14px;
}
.btn.co-danger {
color: var(--bad);
}
.co-welcome .btn {
margin-top: 16px;
}
.co-profile {
margin: 8px 0 4px;
}
.co-profile-row {
display: flex;
align-items: center;
gap: 20px;
}
.co-stats {
display: flex;
flex: 1;
justify-content: space-around;
}
.co-stat {
display: grid;
justify-items: center;
padding: 4px 2px;
border: 0;
color: var(--ink);
background: none;
}
.co-stat b {
font-size: 19px;
font-weight: 600;
line-height: 24px;
}
.co-stat span {
color: var(--ink-2);
font-size: 13px;
}
.co-stat:disabled {
opacity: 1;
}
.co-name {
margin: 14px 0 0;
font-size: 20px;
line-height: 26px;
}
.co-bio {
margin: 4px 0 0;
font-size: 16px;
line-height: 22px;
white-space: pre-wrap;
}
.co-bio.quiet {
color: var(--ink-2);
}
.co-profile > .btn,
.co-row2 {
margin-top: 14px;
}
.co-row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.co-people .input {
width: 100%;
}
.co-people-list {
display: grid;
gap: 2px;
}
.co-person-row,
.co-notice {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
cursor: pointer;
}
.co-person-row .txt,
.co-notice .txt {
display: grid;
flex: 1;
min-width: 0;
}
.co-person-row b {
overflow: hidden;
font-size: 16px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.co-person-row .txt span {
overflow: hidden;
color: var(--ink-2);
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.co-chip {
flex: none;
height: 34px;
padding: 0 12px;
border: 0;
border-radius: 10px;
color: var(--ink);
background: var(--chip);
font-size: 14px;
font-weight: 600;
}
.co-chip.main {
color: var(--btn-ink);
background: var(--btn);
}
.co-notice {
padding: 10px 12px;
margin: 0 -12px;
border-radius: 14px;
}
.co-notice.new {
background: var(--accent-soft);
}
.co-notice .line {
font-size: 16px;
line-height: 21px;
}
.co-notice .line b {
font-weight: 600;
}
.co-notice .quote {
overflow: hidden;
color: var(--ink-2);
font-size: 15px;
text-overflow: ellipsis;
white-space: nowrap;
}
.co-notice .time {
color: var(--ink-2);
font-size: 13px;
}
.co-space {
padding-bottom: calc(100px + var(--safe-b));
}
body.full .app:has(> .co-space) {
padding-bottom: 0;
}
.co-canvas {
--ink: #fff;
--ink-2: rgba(255, 255, 255, 0.76);
--ink-3: rgba(255, 255, 255, 0.6);
--well: rgba(255, 255, 255, 0.14);
--chip: rgba(255, 255, 255, 0.16);
--btn: #fff;
--btn-ink: #3a0d8c;
position: relative;
margin: calc(-12px - var(--full-top, 0px)) calc(-1 * var(--gutter)) 16px;
padding: calc(12px + var(--full-top, 0px)) var(--gutter) 22px;
overflow: hidden;
border-radius: 0 0 30px 30px;
color: #fff;
background:
radial-gradient(80% 70% at 46% 42%, #d49aff 0%, #a85af8 22%, #8026f4 46%, #4b13a8 72%, rgba(44, 9, 106, 0) 100%),
linear-gradient(180deg, #2c096a, #27065c);
}
.co-canvas.compact {
padding-bottom: 18px;
}
.co-canvas > :last-child {
margin-bottom: 0;
}
:root[data-violet] body.tg-full::before {
background: linear-gradient(to bottom, #2c096a var(--full-top), rgba(44, 9, 106, 0) 100%);
}
:root[data-violet] body:not(.tg-full)::before {
background: linear-gradient(to bottom, #2c096a, rgba(44, 9, 106, 0));
}
.co-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 40px;
}
.co-brand {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 18px;
font-weight: 500;
line-height: 24px;
letter-spacing: -0.2px;
white-space: nowrap;
}
.co-orb {
width: 24px;
height: auto;
margin-top: -2px;
}
.co-canvas .co-hbtn {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.co-headline {
margin: 18px 0 8px;
color: #fff;
font-size: 36px;
font-weight: 500;
line-height: 46px;
letter-spacing: -1px;
overflow-wrap: anywhere;
}
.co-headline.small {
margin: 14px 0 12px;
font-size: 30px;
line-height: 38px;
letter-spacing: -0.7px;
}
.co-headline > span + span {
margin-left: 8px;
}
.co-pill {
display: inline-block;
padding: 0 12px;
border-radius: 999px;
color: #fff;
background: #00bc7d;
font-variant-numeric: tabular-nums;
}
.co-canvas-lead {
margin: 0 0 4px;
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
line-height: 21px;
}
.co-headline.small + .co-canvas-lead {
margin-top: -6px;
}
.co-canvas .input {
margin-top: 4px;
color: #fff;
}
.co-canvas .input::placeholder {
color: rgba(255, 255, 255, 0.62);
}
.co-canvas .co-profile {
margin-top: 18px;
}
.co-canvas .co-name {
font-size: 28px;
font-weight: 600;
line-height: 34px;
letter-spacing: -0.6px;
}
.co-canvas .co-face.s72 {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.co-canvas + .co-sub {
margin-top: 8px;
}
.scn-wave-face .co-face {
box-shadow: 0 0 0 2px #fff;
}
.scn-wave-face.own .co-face {
box-shadow: 0 0 0 3px #00d492;
}
.co-deed {
margin: 0;
}
.co-feed-head {
margin: 24px 0 12px;
color: var(--ink);
font-size: 26px;
font-weight: 500;
line-height: 32px;
letter-spacing: -0.6px;
}
.co-wait {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.15s var(--ease);
}
.co-ev-body {
position: relative;
display: flex;
align-items: center;
gap: 12px;
margin: 12px 0 0;
padding: 12px;
overflow: hidden;
border-radius: 16px;
background: var(--bg);
cursor: pointer;
user-select: none;
}
.co-ev-body p {
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 22px;
}
.co-mile {
position: relative;
display: grid;
gap: 2px;
margin: 12px 0 0;
padding: 18px 18px 16px;
overflow: hidden;
border-radius: 18px;
color: #fff;
background: radial-gradient(90% 90% at 30% 20%, #d49aff 0%, #a85af8 30%, #8026f4 62%, #4b13a8 100%);
cursor: pointer;
user-select: none;
}
.co-mile-n {
font-size: 52px;
font-weight: 700;
line-height: 64px;
letter-spacing: -1.5px;
font-variant-numeric: tabular-nums;
}
.co-mile-t {
font-size: 18px;
font-weight: 500;
line-height: 24px;
}
.co-mile-ic {
position: absolute;
top: 14px;
right: 14px;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
}
.co-mile-ic .ic {
width: 26px;
height: 26px;
color: #fdc700;
}
.co-act:disabled {
opacity: 1;
}
.co-deed-tag {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 10px 0 0;
padding: 4px 10px 4px 8px;
border-radius: 12px;
color: var(--ink-2);
background: var(--chip);
font-size: 13px;
font-weight: 500;
line-height: 18px;
}
.co-deed-tag .ic {
width: 15px;
height: 15px;
}
.co-dock .scn-nav-tab {
position: relative;
}
.co-dock-badge {
position: absolute;
top: 4px;
left: calc(50% + 4px);
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
color: #fff;
background: var(--bad);
font-size: 11px;
font-style: normal;
font-weight: 600;
line-height: 18px;
text-align: center;
}
.rh-breath{width:100%;max-width:620px;margin:auto;color:var(--ink);font-family:var(--font);display:flex;flex-direction:column;flex:1}
.rh-breath *{box-sizing:border-box}.rh-breath [hidden]{display:none!important}.rh-breath p{font-weight:400}.rh-breath button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}.rh-breath button:disabled{opacity:.35}.rh-breath button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.rh-breath-view{display:flex;flex-direction:column;flex:1;min-height:calc(100svh - 164px)}
.rh-breath .gb-prelude h1{font-size:30px;line-height:1.2;font-weight:500;letter-spacing:-.7px}.rh-breath .lead{color:var(--ink-2)}
.rh-breath .rh-breath-tune{display:block;min-height:44px;padding:10px 16px;margin:12px auto 0;border:0;border-radius:24px;background:none;color:var(--ink-2);font-size:15px}
.rh-breath .gd-foot{display:grid;gap:10px;margin-top:auto}
.rh-breath .rh-breath-primary{display:block;width:100%;min-height:48px;padding:12px 18px;border:0;border-radius:var(--r-btn);background:var(--btn);color:var(--btn-ink);font-size:17px;font-weight:500}
.rh-breath .rh-breath-finish{display:block;min-height:44px;width:100%;border:0;background:none;color:var(--ink-2);font-size:15px}
.rh-breath-settings h2{margin:0}.rh-breath-lead{font-size:16px;line-height:1.5;color:var(--ink-2);margin:12px 0 0}.rh-breath-settings button{border:0}
.guide-breath-shared{padding-bottom:max(24px,var(--safe-b))!important}.guide-breath-shared .rh-breath-view{min-height:calc(100svh - 200px)}
.gb-setup, .gb-practice { flex: 1; display: flex; flex-direction: column; }
.gb-prelude { margin: auto 0; padding: 48px 0; text-align: center; }
.gb-prelude .title { margin: 0 0 16px; }
.gb-prelude .lead { font-size: 16px; line-height: 24px; margin: 0; white-space: pre-line; }
.gb-durations { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.gb-duration { width: 72px; height: 80px; border: 0; border-radius: var(--r-btn); background: var(--well); color: var(--ink); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.gb-duration b { font-size: 24px; line-height: 30px; font-weight: 500; }
.gb-duration span { font-size: 14px; line-height: 20px; }
.gb-duration[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.gb-focus { margin: auto 0; padding: 24px 0 32px; }
.gb-stage { display: grid; place-items: center; height: 280px; }
.gb-ring { position: relative; width: 240px; height: 240px; color: var(--ink); }
.gb-dot { position: absolute; left: 117px; top: 117px; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.gb-dot:nth-child(8n + 2) { color: var(--ib-violet); }
.gb-glow { position: absolute; left: 58px; top: 58px; width: 124px; height: 124px; border-radius: 50%; background: var(--ib-violet); filter: blur(40px); }
.gb-word { display: block; margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; text-align: center; }
.gb-count { margin: 8px 0 0; text-align: center; font-size: 14px; line-height: 20px; }
.gb-comfort { text-align: center; font-size: 14px; line-height: 20px; max-width: 280px; margin: 12px auto 8px; }
.gb-setup .gd-foot, .gb-practice .gd-foot { position: static; margin-top: 8px; }
@media (max-height: 680px) {
.gb-prelude { padding: 24px 0; }
.gb-stage { height: 220px; }
.gb-focus { padding: 8px 0 20px; }
}
.rh-breath-settings{padding:16px 0 24px}.rh-breath-settings h2{font-size:28px;line-height:1.2;letter-spacing:-.6px}.rh-breath-settings h3{font-size:17px;margin:28px 0 12px}.rh-breath-settings :is(h1,h2)[tabindex]:focus{outline:none}
.rh-breath-presets{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.rh-breath-presets button,.rh-breath-minutes button{min-height:44px;padding:11px 16px;background:var(--well);border-radius:24px;font-size:15px}
.rh-breath :is(.rh-breath-presets,.rh-breath-minutes) button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.rh-breath-steppers{display:grid;gap:14px;padding:20px;border-radius:28px;background:var(--well)}.rh-breath-stepper{display:grid;grid-template-columns:1fr 44px 56px 44px;align-items:center;gap:4px;font-size:17px}
.rh-breath-stepper button{width:44px;height:44px;border-radius:50%;background:var(--bg);font-size:24px}.rh-breath-stepper output{text-align:center;font-size:20px;font-variant-numeric:tabular-nums}
.rh-breath-minutes{display:flex;gap:8px;flex-wrap:wrap}.rh-breath-duration-note{font-size:14px;line-height:1.5;color:var(--ink-2);margin:16px 0 24px!important}
@media(max-width:350px){.rh-breath-steppers{padding:16px}.rh-breath-stepper{grid-template-columns:1fr 44px 48px 44px;gap:2px}}
.rh-breath-sound{margin:12px 0 24px;padding:8px 16px 16px;border-radius:24px;background:var(--well)}.rh-breath-sound input{width:100%;min-height:44px;accent-color:var(--ink)}.rh-breath-credit{display:block;text-align:center;color:var(--ink-2);font-size:12px;line-height:18px}.rh-breath .gb-durations{flex-wrap:wrap;gap:8px}.rh-breath .gb-duration span{font-size:12px}
.invites-screen { display:flex; flex-direction:column; gap:24px; min-width:0; }
.invites-screen .tool-head { margin:0; }
.invites-screen .tool-head .lead { margin-top:12px; }
.invites-screen .back-link { margin:0; align-self:flex-start; }
.invite-offer { display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r-card); overflow:hidden; background:var(--well); }
.invite-offer > div { min-width:0; padding:24px 18px; display:flex; flex-direction:column; gap:8px; }
.invite-friend { background:var(--accent-soft); }
.invite-person { font-size:14px; line-height:20px; color:var(--ink-2); }
.invite-offer strong { font-size:30px; line-height:1.2; font-weight:500; overflow-wrap:anywhere; }
.invite-offer p { margin:0; font-size:14px; line-height:20px; color:var(--ink-2); }
.invite-sharing { display:flex; flex-direction:column; gap:12px; min-width:0; }
.invite-sharing .btn { margin:0; }
.invite-status { margin:0; font-size:14px; line-height:20px; color:var(--ink-2); }
.invite-link-row { display:flex; align-items:center; gap:8px; min-height:56px; padding:4px 4px 4px 18px; box-sizing:border-box; border-radius:var(--r-group); background:var(--well); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 120ms ease; }
.invite-link-row:active { transform:scale(.985); }
.invite-link { flex:1; width:auto; min-width:0; box-sizing:border-box; font:16px/20px var(--font); color:var(--ink-2); background:transparent; border:0; padding:0; text-align:left; text-overflow:ellipsis; pointer-events:none; outline:none; }
.invite-link-row.manual .invite-link { pointer-events:auto; -webkit-user-select:text; user-select:text; }
.invite-copy { appearance:none; display:inline-flex; align-items:center; gap:6px; flex:none; height:48px; padding:0 16px 0 14px; border:0; border-radius:var(--r-btn); background:var(--bg); color:var(--ink); font:500 15px/20px var(--font); cursor:pointer; }
.invite-copy .invite-copy-icon { display:grid; place-items:center; width:18px; height:18px; }
.invite-copy .ic { width:18px; height:18px; }
.invite-copy:disabled { opacity:.45; }
.invite-copy.done .invite-copy-icon { animation:invite-copied 260ms var(--ease); }
@keyframes invite-copied { from { transform:scale(.6); opacity:0; } to { transform:none; opacity:1; } }
.invite-how h2 { margin:0 0 16px; font-size:20px; line-height:26px; font-weight:500; }
.invite-steps { list-style:none; margin:0; padding:18px; display:grid; gap:18px; border-radius:var(--r-group); background:var(--well); }
.invite-steps li { position:relative; display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start; }
.invite-steps li:not(:last-child)::after { content:""; position:absolute; left:13px; top:34px; bottom:-12px; width:2px; border-radius:1px; background:var(--line); }
.invite-step-n { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--bg); color:var(--ink-2); font-size:14px; font-weight:500; }
.invite-steps li.last .invite-step-n { background:var(--accent); color:#fff; }
.invite-step-txt { display:grid; gap:4px; min-width:0; padding-top:3px; }
.invite-step-txt b { font-size:16px; line-height:22px; font-weight:500; }
.invite-step-txt span { font-size:14px; line-height:20px; color:var(--ink-2); }
.invite-fine { margin:12px 0 0; padding:0 4px; font-size:14px; line-height:20px; color:var(--ink-2); }
.invite-qr { padding:20px; background:var(--well); border-radius:var(--r-group); text-align:center; animation:invite-appear 220ms var(--ease); }
.invite-qr img { display:block; width:min(240px,100%); height:auto; margin:0 auto; border-radius:0; }
.invite-qr p { margin:16px 0 0; font-size:14px; line-height:20px; color:var(--ink-2); }
.invite-results h2 { margin:0 0 16px; font-size:20px; line-height:26px; font-weight:500; }
.invite-empty { margin:0; font-size:16px; line-height:24px; color:var(--ink-2); }
.invite-counts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0; }
.invite-counts div { display:flex; flex-direction:column-reverse; justify-content:end; gap:6px; min-width:0; }
.invite-counts dt { font-size:14px; line-height:20px; color:var(--ink-2); }
.invite-counts dd { margin:0; font-size:30px; line-height:36px; font-weight:500; }
.invite-states { list-style:none; padding:0; margin:20px 0 0; border-radius:var(--r-group); background:var(--well); }
.invite-states li { padding:16px 18px; display:flex; justify-content:space-between; gap:16px; font-size:14px; line-height:20px; }
.invite-states li+li { border-top:1px solid var(--line); }
.invite-note { margin:16px 0 0; color:var(--ink-2); font-size:14px; line-height:20px; }
.invites-screen [hidden] { display:none !important; }
@keyframes invite-appear { from {opacity:0;transform:translateY(-6px);} to {opacity:1;transform:translateY(0);} }
@media (prefers-reduced-motion:reduce) { .invite-qr { animation:none; } .invite-link-row { transition:none; } }
.invite-offer .invite-limit strong { font-size:20px; line-height:26px; }
.invite-presenter { position:fixed;inset:0;margin:0;border:0;width:100%;max-width:none;height:100dvh;max-height:none;box-sizing:border-box;padding:calc(16px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px)) 20px calc(16px + var(--safe-b));background:var(--bg);color:var(--ink);font-family:var(--font);overflow:auto; }
.invite-presenter[open] {display:grid;grid-template-rows:auto auto minmax(160px,1fr) auto;gap:20px;animation:invite-presenter-in 480ms var(--ease);}
.invite-presenter::backdrop {background:var(--bg);}
.invite-presenter::before {content:"";position:fixed;pointer-events:none;width:150vw;height:80vh;left:-25vw;top:-75vh;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:invite-wave 850ms var(--ease) both;}
.invite-presenter-head {display:flex;align-items:center;justify-content:space-between;gap:16px;}
.invite-presenter-brand {font-size:24px;font-weight:500;}
.invite-presenter-close {font:16px var(--font);color:var(--ink);border:0;background:var(--well);border-radius:999px;padding:12px 18px;min-height:44px;}
.invite-presenter-modes {display:flex;justify-self:center;gap:4px;padding:4px;background:var(--well);border-radius:999px;max-width:100%;}
.invite-presenter-modes button {font:16px var(--font);color:var(--ink-2);background:transparent;border:0;min-height:44px;padding:10px 24px;border-radius:999px;}
.invite-presenter-modes button[aria-pressed="true"] {background:var(--bg);color:var(--ink);}
.invite-presenter-stage {display:flex;align-items:center;justify-content:center;min-height:0;position:relative;}
.invite-presenter-card {display:block;height:auto;width:auto;max-width:100%;max-height:100%;border-radius:28px;object-fit:contain;}
.invite-presenter.ready .invite-presenter-stage {animation:invite-card-in 620ms var(--ease);}
.invite-presenter.ready .invite-presenter-stage.switching {animation:invite-mode-in 280ms var(--ease);}
.invite-presenter-nearby {display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;width:min(100%,320px);max-height:100%;overflow:auto;}
.invite-presenter-orb {width:76px;height:76px;object-fit:contain;}
.invite-presenter-nearby h1 {font:500 24px/30px var(--font);margin:0;}
.invite-presenter-code {width:min(220px,65vw);height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border:16px solid #fff;box-sizing:border-box;border-radius:24px;}
.invite-presenter-nearby p {font:16px/23px var(--font);color:var(--ink-2);margin:0;white-space:pre-line;}
.invite-presenter-footer {display:grid;gap:12px;width:min(100%,390px);justify-self:center;}
.invite-presenter-footer .btn {width:100%;margin:0;}
.invite-presenter-status {font:14px/20px var(--font);color:var(--ink-2);text-align:center;margin:0;}
.invite-presenter-status:empty {display:none;}
.invite-presenter [hidden] {display:none!important;}
.invite-presenter.leaving {animation:invite-presenter-out 180ms var(--ease) both;pointer-events:none;}
@keyframes invite-presenter-in {from {opacity:0;transform:translateY(12px);}to {opacity:1;transform:translateY(0);}}
@keyframes invite-wave {0% {opacity:0;transform:translateY(0) scale(.9);}25% {opacity:.14;}100% {opacity:0;transform:translateY(130vh) scale(1.25);}}
@keyframes invite-card-in {from {opacity:0;transform:translateY(18px) scale(.96);}to {opacity:1;transform:translateY(0) scale(1);}}
@keyframes invite-mode-in {from {opacity:.3;transform:translateY(6px);}to {opacity:1;transform:translateY(0);}}
@keyframes invite-presenter-out {to {opacity:0;transform:translateY(10px);}}
@media (prefers-reduced-motion:reduce) {.invite-presenter,.invite-presenter::before,.invite-presenter.ready .invite-presenter-stage,.invite-presenter.ready .invite-presenter-stage.switching,.invite-presenter.leaving {animation:none!important;}}
.invite-presenter:focus,.invite-presenter-close:focus:not(:focus-visible),.invite-presenter-act:focus:not(:focus-visible) {outline:none;}
.invite-presenter-loading {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:min(100%,300px);aspect-ratio:4/5;border-radius:28px;background:linear-gradient(110deg,color-mix(in srgb,var(--ib-violet) 10%,var(--well)) 20%,color-mix(in srgb,var(--ib-violet) 22%,var(--well)) 45%,color-mix(in srgb,var(--ib-violet) 10%,var(--well)) 70%);background-size:220% 100%;animation:invite-shimmer 1.6s ease-in-out infinite;}
.invite-presenter-loading-orb {width:64px;height:64px;object-fit:contain;animation:invite-breathe 1.6s ease-in-out infinite;}
.invite-presenter-loading p {font:15px/21px var(--font);color:var(--ink-2);margin:0;}
.invite-presenter-loading.failed {animation:none;background:var(--well);}
.invite-presenter-loading.failed .invite-presenter-loading-orb {animation:none;opacity:.5;}
.invite-presenter.ready .invite-presenter-card {animation:invite-card-reveal 640ms cubic-bezier(.22,1,.36,1) both;}
.invite-presenter-quick {display:flex;justify-content:center;gap:28px;margin-top:4px;}
.invite-presenter-act {display:flex;flex-direction:column;align-items:center;gap:8px;min-width:72px;padding:0;border:0;background:none;color:var(--ink);font:14px/18px var(--font);}
.invite-presenter-act-ring {display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--well);transition:transform 160ms var(--ease),background-color 160ms ease;}
.invite-presenter-act-ring svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.invite-presenter-act:active .invite-presenter-act-ring {transform:scale(.92);}
.invite-presenter-act:disabled {opacity:.45;}
@keyframes invite-shimmer {from {background-position:120% 0;}to {background-position:-20% 0;}}
@keyframes invite-breathe {0%,100% {transform:scale(1);}50% {transform:scale(1.06);}}
@keyframes invite-card-reveal {from {opacity:0;filter:blur(14px);transform:scale(.97);}to {opacity:1;filter:blur(0);transform:none;}}
@media (prefers-reduced-motion:reduce) {.invite-presenter-loading,.invite-presenter-loading-orb,.invite-presenter.ready .invite-presenter-card {animation:none!important;}}
@media (max-width:359px) { .invite-offer > div { padding:20px 14px; } .invite-offer strong { font-size:24px; } }
.tab-orb.ir-arming img {transform:scale(.9);transition:transform 260ms var(--ease);}
.immersive-ritm {position:fixed;inset:0;z-index:245;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;box-sizing:border-box;overflow:hidden;color:#fff;background:#000;color-scheme:dark;font-family:var(--font);padding:calc(12px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px)) 24px calc(24px + var(--safe-b));animation:ir-enter 680ms var(--ease) both;}
.ir-atmosphere {position:absolute;z-index:-1;inset:0;overflow:clip;contain:paint;pointer-events:none;background:radial-gradient(ellipse at 84% 43%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 47%),radial-gradient(ellipse at 8% 86%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 43%);animation:ir-light 1300ms var(--ease) both;}
.ir-edges {position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip;}
.ir-edge {position:absolute;inset:0;transition:opacity 240ms ease-out;opacity:0;}
.ir-edge-left {background:radial-gradient(ellipse at -8% 48%,rgba(255,255,255,.2),transparent 48%);opacity:var(--head-left,0);}
.ir-edge-right {background:radial-gradient(ellipse at 108% 48%,rgba(255,255,255,.2),transparent 48%);opacity:var(--head-right,0);}
.ir-edge-top {background:radial-gradient(ellipse at 50% -16%,rgba(255,255,255,.16),transparent 48%);opacity:var(--head-top,0);}
.ir-edge-bottom {background:radial-gradient(ellipse at 50% 116%,rgba(255,255,255,.16),transparent 48%);opacity:var(--head-bottom,0);}
.immersive-ritm {overflow:clip;}
.immersive-ritm.ir-settled:not(.ir-leaving) {animation:none;}
.ir-header {position:relative;z-index:2;transform:translateZ(0);backface-visibility:hidden;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:16px;min-height:52px;}
.ir-header h1 {text-align:center;font:500 17px/25px var(--font);letter-spacing:.01em;margin:0;}
.ir-control {flex-shrink:0;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;transition:background 160ms ease,transform 240ms var(--ease);touch-action:manipulation;}
.ir-control .ic {width:22px;height:22px;}
.ir-control:active {transform:scale(.94);background:rgba(255,255,255,.13);}
.ir-control:disabled {opacity:.35;cursor:default;}
.ir-control:focus-visible,.ir-answer-actions button:focus-visible {outline:2px solid var(--ib-violet);outline-offset:4px;}
.ir-header .ir-control {width:44px;height:44px;background:transparent;color:#bdbdbd;}
.ir-feed {position:relative;min-height:0;isolation:isolate;}
.ir-body {height:100%;box-sizing:border-box;min-height:0;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;display:flex;flex-direction:column;scrollbar-width:none;padding:24px 0 28px;}
.ir-scroll-edge {position:absolute;z-index:2;left:-1px;right:-1px;height:26px;pointer-events:none;opacity:0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity 180ms ease;background:rgba(0,0,0,.2);}
.ir-scroll-top {top:0;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent);}
.ir-scroll-bottom {bottom:0;mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000);}
.ir-above .ir-scroll-top,.ir-below .ir-scroll-bottom {opacity:1;}
.ir-voice .ir-scroll-edge {opacity:0;}
.ir-body::-webkit-scrollbar {display:none;}
.ir-presence {flex:1;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 0 12px;}
.ir-presence h2 {font-size:24px;font-weight:500;line-height:32px;margin:28px 0 0;text-align:center;}
.ir-status {font-size:15px;line-height:22px;color:#bdbdbd;margin:0;text-align:center;max-width:280px;}
.ir-setup-progress {display:none;gap:8px;margin-top:18px;}
.immersive-ritm[data-stage="gesture-preview"] .ir-setup-progress {display:flex;}
.ir-setup-progress i {width:5px;height:5px;border-radius:50%;background:#fff;opacity:.2;transition:opacity 240ms ease,transform 240ms ease;}
.ir-setup-progress .ir-current {opacity:1;transform:scale(1.4);}
.ir-setup-progress .ir-done {opacity:.65;}
.ir-setup-later {min-height:48px;padding:12px 24px;border:0;background:transparent;color:#bdbdbd;font:16px/24px var(--font);border-radius:24px;cursor:pointer;}
.ir-setup-later:focus-visible {outline:2px solid #fff;outline-offset:4px;}
.ir-face {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:176px;height:176px;color:#fff;transform-origin:center;--voice-level:0;}
.ir-face .ld-ring {flex-shrink:0;animation:none;transform:scale(calc(1.8 + var(--voice-level)*.065));transition:transform 220ms ease-out;}
.ir-face .ld-ring i {width:5px;height:5px;left:35.5px;top:35.5px;animation:ir-gather 1150ms var(--ease) both;}
.ir-settled .ld-ring i {animation:none;transform:translate(var(--x1),var(--y1));opacity:1;}
.ir-face .ld-eyes {animation:ld-eyes-in 480ms var(--ease) 1.1s both,ir-look 11s ease-in-out 2s infinite;}
.ir-face .ld-eyes u {width:5px;height:15px;border-radius:5px;}
.ir-transcript {font-size:24px;line-height:34px;font-weight:500;text-align:center;color:#fff;width:100%;max-width:360px;max-height:176px;overflow:auto;overflow-wrap:anywhere;align-self:center;scrollbar-width:none;}
.ir-transcript:empty {display:none;}
.ir-word {white-space:pre-wrap;animation:ir-word-in 230ms var(--ease) var(--d,0ms) both;}
.ir-clock {font:14px/20px var(--font);font-variant-numeric:tabular-nums;color:#999;text-align:center;}
.ir-clock:empty {display:none;}
.ir-history {display:flex;flex-shrink:0;flex-direction:column;gap:28px;min-width:0;margin-top:auto;transition:opacity 220ms ease,visibility 0s;}
.ir-history:empty {display:none;}
.ir-own {align-self:flex-end;max-width:88%;padding:15px 19px;background:rgba(255,255,255,.085);border-radius:24px 24px 7px 24px;color:#fff;}
.ir-own p {margin:0;font-size:17px;line-height:25px;overflow-wrap:anywhere;}
.ir-answer-row {display:flex;align-items:flex-start;gap:10px;}
.ir-answer-row .ir-face {width:40px;height:40px;margin-top:6px;}
.ir-answer-row .ir-face .ld-ring {transform:scale(.48);}
.ir-answer-row .ld-ring i {animation:none;transform:translate(var(--x1),var(--y1));}
.ir-answer-row .ld-eyes {animation:ir-look 11s ease-in-out 1s infinite;}
.ir-answer {min-width:0;flex:1;padding:20px 20px 8px;border-radius:7px 25px 25px;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
.ir-answer p {margin:0;font-size:17px;line-height:27px;overflow-wrap:anywhere;white-space:pre-wrap;}
.ir-answer {touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;}
.ir-own p,.ir-reply-text,.ir-reply-text *,.ir-thread-answer,.ir-lifted .ir-answer p {
user-select:text;-webkit-user-select:text;-webkit-touch-callout:default;
}
.ir-reply-fragment {animation:ir-reply-in 180ms ease-out both;}
.ir-reply-wait {display:block;color:#999;font-size:15px;line-height:27px;}
.ir-reply-wait[hidden] {display:none;}
.ir-waiting .ir-answer {background:none;box-shadow:none;padding-top:12px;}
.ir-waiting .ir-answer-meta {display:none;}
.ir-answer-row.ir-responding .ld-ring i {animation:ir-thinking 1800ms linear infinite;animation-delay:calc(var(--ir-step,0)*100ms)!important;}
.ir-answer-meta {display:flex;align-items:center;justify-content:flex-end;color:#999;font-size:12px;line-height:18px;margin-top:12px;padding-bottom:4px;}
.ir-answer:focus-visible {outline:2px solid var(--ib-violet);outline-offset:4px;}
.ir-footer {position:relative;min-width:0;padding-top:12px;display:flex;flex-direction:column;gap:16px;}
.ir-message {margin:0;color:#bdbdbd;font-size:14px;line-height:21px;text-align:center;overflow-wrap:anywhere;}
.ir-message:empty {display:none;}
.ir-composer {display:flex;align-items:center;justify-content:center;gap:20px;min-width:0;min-height:76px;}
.ir-primary {width:72px;height:72px;background:#f4f4f4;color:#1d1d1f;box-shadow:0 0 32px rgba(255,255,255,.045);}
.ir-primary:active {background:#fff;}
.ir-primary .ic {width:26px;height:26px;}
.ir-stop {display:block;width:17px;height:17px;border-radius:4px;background:currentColor;}
.ir-input {display:flex;flex:1;min-width:0;align-items:flex-end;gap:4px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:30px;padding:7px;transition:border-color 200ms ease;}
.ir-input:focus-within {border-color:color-mix(in srgb,var(--ib-violet) 60%,#333);}
.ir-input textarea {width:100%;min-width:0;min-height:40px;max-height:140px;overflow-y:hidden;overscroll-behavior:contain;border:0;outline:0;background:transparent;color:#fff;resize:none;font:17px/25px var(--font);padding:7px 6px 7px 12px;box-sizing:border-box;border-radius:0;margin:0;box-shadow:none;}
.ir-input textarea::placeholder {color:#999;}
.ir-departing {position:fixed;z-index:3;pointer-events:none;box-sizing:border-box;}
.ir-input-mic {width:44px;height:44px;background:transparent;color:#fff;}
.ir-input-mic .ic {width:26px;height:26px;}
.ir-send {background:#f4f4f4;color:#1d1d1f;width:44px;height:44px;}
.ir-send:disabled {background:rgba(255,255,255,.08);color:#999;opacity:1;}
.ir-context {position:absolute;inset:0;z-index:10;}
.ir-context-shade {position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.38);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:ir-shade-in 280ms ease-out both;cursor:default;}
.ir-lifted {position:absolute;overflow:auto;overscroll-behavior:contain;margin:0;scrollbar-width:none;}
.ir-lifted .ir-answer {background:#262629;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 32px rgba(0,0,0,.2);}
.ir-lifted .ir-answer:focus {outline:none;}
.ir-answer-actions {position:absolute;box-sizing:border-box;display:flex;gap:8px;background:#262629;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:7px;box-shadow:0 16px 40px #000;animation:ir-menu 220ms var(--ease) both;}
.ir-answer-actions button {display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;flex:1;min-width:0;border:0;border-radius:14px;background:transparent;color:#fff;font:15px/21px var(--font);}
.ir-answer-actions .ic {width:20px;height:20px;}
.ir-context-closing {pointer-events:none;}
.ir-context-closing .ir-context-shade,.ir-context-closing .ir-answer-actions {animation:ir-shade-out 220ms ease both;}
.ir-answer-actions button:active {background:#333;}
.immersive-ritm[data-stage="text"] .ir-presence {min-height:140px;}
.immersive-ritm[data-stage="processing"] .ir-presence {flex:0;min-height:160px;}
.immersive-ritm[data-stage="processing"] .ir-presence h2 {display:none;}
.immersive-ritm[data-stage="recording"] .ir-presence h2,.immersive-ritm[data-stage="dictation-preview"] .ir-presence h2 {display:none;}
.immersive-ritm[data-stage="recording"] .ir-presence,.immersive-ritm[data-stage="dictation-preview"] .ir-presence {gap:28px;}
.immersive-ritm[data-stage="transcribing"] .ir-presence h2,.immersive-ritm[data-stage="heard"] .ir-presence h2 {display:none;}
.immersive-ritm[data-stage="transcribing"] .ir-presence,.immersive-ritm[data-stage="heard"] .ir-presence {gap:28px;}
.immersive-ritm[data-stage="transcribing"] .ir-face .ld-ring i {transform:translate(var(--x1),var(--y1));opacity:1;animation:ir-thinking 1800ms linear infinite;animation-delay:calc(var(--ir-step,0)*100ms)!important;}
.immersive-ritm[data-stage="heard"] .ir-transcript {max-height:240px;}
.immersive-ritm[data-stage="consent"] .ir-message {max-width:320px;margin-inline:auto;}
.immersive-ritm[data-stage="consent"] .ir-composer,.immersive-ritm[data-stage="gesture-offer"] .ir-composer {flex-direction:column;gap:4px;}
.immersive-ritm[data-stage="gesture-setup"] .ir-setup-progress {display:flex;}
.immersive-ritm[data-stage="gesture-offer"] .ir-message {max-width:320px;margin-inline:auto;}
.ir-consent-accept {width:100%;max-width:340px;white-space:nowrap;min-height:52px;padding:14px 26px;border:0;border-radius:26px;background:#f4f4f4;color:#1d1d1f;font:500 16px/24px var(--font);cursor:pointer;touch-action:manipulation;transition:transform 240ms var(--ease),background 160ms ease;}
.ir-consent-accept:active {transform:scale(.97);background:#fff;}
.ir-consent-accept:disabled {opacity:.5;cursor:default;}
.ir-consent-accept:focus-visible,.ir-answer-chip:focus-visible,.ir-inline-link:focus-visible {outline:2px solid var(--ib-violet);outline-offset:4px;}
.ir-control-spacer {flex-shrink:0;width:48px;height:48px;}
.ir-inline-link {border:0;background:none;color:#fff;text-decoration:underline;text-underline-offset:3px;padding:0;font:inherit;cursor:pointer;}
.ir-answer-chips {display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ir-answer-chip {min-height:36px;padding:7px 14px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.06);color:#fff;font:14px/20px var(--font);cursor:pointer;touch-action:manipulation;transition:background 160ms ease,transform 240ms var(--ease);}
.ir-answer-chip:active {transform:scale(.96);background:rgba(255,255,255,.12);}
.immersive-ritm.ir-voice .ir-history {position:fixed;left:var(--history-x);top:var(--history-y);width:var(--history-width);margin:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 220ms ease,visibility 0s 220ms;}
.immersive-ritm.ir-from-orb:not(.ir-leaving) {animation:none}
.immersive-ritm.ir-from-orb:not(.ir-dropped) {background:transparent;box-shadow:none}
.ir-drop {position:absolute;z-index:-1;pointer-events:none;left:calc(var(--ir-origin-x) - var(--ir-reveal-radius));
top:calc(var(--ir-origin-y) - var(--ir-reveal-radius));width:calc(var(--ir-reveal-radius) * 2);height:calc(var(--ir-reveal-radius) * 2);
border-radius:50%;background:radial-gradient(closest-side,#000 calc(100% - 4px),color-mix(in srgb,var(--accent) 40%,#000) calc(100% - 1.5px),transparent);
transform:scale(var(--ir-drop-from,.04));will-change:transform;animation:ir-drop 600ms cubic-bezier(.32,.72,0,1) both}
@keyframes ir-drop {to{transform:scale(1)}}
.immersive-ritm.ir-conversation:not(.ir-voice) .ir-presence {display:none;}
.ir-keyboard .ir-body {padding-top:8px;padding-bottom:16px;}
.ir-keyboard .ir-presence {min-height:80px!important;gap:6px;}
.ir-keyboard .ir-presence .ir-face {width:72px;height:72px;}
.ir-keyboard .ir-presence .ld-ring {transform:scale(.75);}
.ir-keyboard .ir-presence h2 {display:none;}
.ir-keyboard .ir-footer {gap:8px;padding-top:0;}
.ir-keyboard .ir-composer {min-height:56px;}
.ir-leaving {pointer-events:none;animation:ir-exit 360ms var(--ease) both;}
@keyframes ir-enter {from{opacity:0;transform:translateY(5%) scale(.985);border-radius:40px}to{opacity:1;transform:none;border-radius:0}}
@keyframes ir-exit {to{opacity:0;transform:translateY(4%) scale(.985);border-radius:40px}}
@keyframes ir-light {from{opacity:0;transform:translateY(12%) scale(.8)}to{opacity:1;transform:none}}
@keyframes ir-gather {from{opacity:0;transform:translate(var(--x0),var(--y0)) scale(.6)}30%{opacity:.7}to{opacity:1;transform:translate(var(--x1),var(--y1))}}
@keyframes ir-look {0%,18%,23%,49%,54%,100%{transform:translateX(0) scaleY(1)}20%,51%{transform:translateX(0) scaleY(.15)}65%,73%{transform:translateX(2px) scaleY(1)}82%,90%{transform:translateX(-1.5px) scaleY(1)}}
@keyframes ir-menu {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes ir-word-in {from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes ir-reply-in {from{opacity:.25;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@keyframes ir-thinking {0%,70%,100%{opacity:.35}20%{opacity:1}}
@keyframes ir-shade-in {from{opacity:0}to{opacity:1}}
@keyframes ir-shade-out {from{opacity:1}to{opacity:0}}
@media(max-width:350px){.immersive-ritm{padding-inline:20px}.ir-answer{padding:16px 16px 6px}.ir-answer-row{gap:8px}.ir-answer p{font-size:16px;line-height:25px}.ir-composer{gap:12px}.ir-input textarea{font-size:16px}.ir-presence h2{margin-top:16px}}
@media(max-height:600px){.ir-presence{min-height:140px}.ir-presence h2{margin-top:0}.ir-face{width:100px;height:100px}.ir-face .ld-ring{transform:scale(1)}.ir-body{padding-block:12px}.ir-composer{min-height:56px}.ir-primary{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.immersive-ritm,.immersive-ritm *{animation:none!important;transition:none!important}.ir-face .ld-ring i{transform:translate(var(--x1),var(--y1));opacity:1}}
.ir-reduced,.ir-reduced *{animation:none!important;transition:none!important}.ir-reduced .ld-ring i{transform:translate(var(--x1),var(--y1));opacity:1}
.ir-reduced::before {display:none;}
.immersive-ritm {box-shadow:0 0 0 100vmax #000}
.immersive-ritm:focus {outline:none}
.immersive-ritm.ir-real .ir-header {display:none}
.ir-real .ir-answer-row {display:block}
.ir-real .ir-answer-row .ir-face {display:none}
.ir-real .ir-answer-row.ir-waiting .ir-face {display:flex;width:44px;height:44px;margin:0 0 6px -4px}
.ir-real .ir-answer {padding:0;border-radius:0;background:none;box-shadow:none}
.ir-real .ir-answer p {font-size:18px;line-height:28px}
.ir-real .ir-answer-meta {justify-content:flex-start;margin-top:10px}
.ir-real .ir-reply-wait {padding-left:2px}
.ir-reply-fragment {animation:ir-word-soft 320ms ease-out both}
@keyframes ir-word-soft {from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
.ir-primary.ir-busy:disabled {opacity:1;cursor:default}
.ir-busy-dots {display:flex;gap:5px;align-items:center}
.ir-busy-dots i {width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;animation:ir-busy 1.1s ease-in-out infinite}
.ir-busy-dots i:nth-child(2) {animation-delay:.15s}
.ir-busy-dots i:nth-child(3) {animation-delay:.3s}
@keyframes ir-busy {0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ir-face {position:relative}
.ir-face::before {content:"";position:absolute;inset:-36px;border-radius:50%;pointer-events:none;opacity:calc(var(--voice-level,0) * .9);
background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%);transition:opacity 160ms linear}
.immersive-ritm[data-stage="recording"] .ir-face .ld-ring i {opacity:1;scale:calc(1 + var(--v,0) * .28)}
.immersive-ritm[data-stage="recording"] .ir-face .ld-eyes u {transform:scaleY(calc(1 + var(--voice-level,0) * .3));transition:transform 120ms ease-out}
.ir-answer-row .ir-face::before {display:none}
.immersive-ritm.ir-real {grid-template-rows:minmax(0,1fr) auto}
.immersive-ritm.ir-real[data-stage="recording"] .ir-presence,.immersive-ritm.ir-real[data-stage="transcribing"] .ir-presence,
.immersive-ritm.ir-real[data-stage="heard"] .ir-presence {gap:14px}
.ir-real .ir-transcript {font-size:18px;line-height:28px;font-weight:400;color:rgba(255,255,255,.94);max-width:340px;margin-top:14px}
.ir-real .ir-status {font-size:15px;line-height:22px}
html.ir-open,html.ir-open body {overflow:hidden!important;overscroll-behavior:none!important}
.immersive-ritm {touch-action:none;overscroll-behavior:none}
.immersive-ritm .ir-body {touch-action:pan-y}
.immersive-ritm textarea {touch-action:pan-y}
.immersive-ritm .ir-scroll-edge {display:none}
.ir-feed.ir-below .ir-body {-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
.ir-feed.ir-above .ir-body {-webkit-mask-image:linear-gradient(transparent,#000 48px);mask-image:linear-gradient(transparent,#000 48px)}
.ir-feed.ir-above.ir-below .ir-body {-webkit-mask-image:linear-gradient(transparent,#000 48px,#000 calc(100% - 64px),transparent);
mask-image:linear-gradient(transparent,#000 48px,#000 calc(100% - 64px),transparent)}
.ir-real .ir-footer .ir-transcript {order:0;margin:0 auto;font-size:19px;line-height:28px;font-weight:400;max-width:340px;max-height:112px;
overflow:hidden;text-align:center;color:rgba(255,255,255,.95)}
.ir-real .ir-footer .ir-transcript.ir-transcript-over {-webkit-mask-image:linear-gradient(transparent,#000 28px);mask-image:linear-gradient(transparent,#000 28px)}
.immersive-ritm.ir-real:is([data-stage="recording"],[data-stage="stopping"],[data-stage="transcribing"],[data-stage="heard"]) .ir-footer .ir-transcript,
.immersive-ritm.ir-real:is([data-stage="recording"],[data-stage="stopping"],[data-stage="transcribing"],[data-stage="heard"]) .ir-footer .ir-transcript:empty {
display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-end;position:relative;width:100%;height:112px;max-height:112px}
.immersive-ritm.ir-real:is([data-stage="recording"],[data-stage="stopping"],[data-stage="transcribing"],[data-stage="heard"]) .ir-footer .ir-message,
.immersive-ritm.ir-real:is([data-stage="recording"],[data-stage="stopping"],[data-stage="transcribing"],[data-stage="heard"]) .ir-footer .ir-message:empty {display:block;min-height:21px}
.immersive-ritm.ir-real:is([data-stage="recording"],[data-stage="stopping"],[data-stage="transcribing"],[data-stage="heard"]) .ir-footer .ir-clock,
.immersive-ritm.ir-real:is([data-stage="recording"],[data-stage="stopping"],[data-stage="transcribing"],[data-stage="heard"]) .ir-footer .ir-clock:empty {display:block;min-height:20px}
@media(max-height:600px){.immersive-ritm.ir-real:is([data-stage="recording"],[data-stage="stopping"],[data-stage="transcribing"],[data-stage="heard"]) .ir-footer .ir-transcript{height:84px;max-height:84px}}
.ir-real .ir-footer .ir-transcript:empty {display:none}
.ir-real .ir-word {display:inline;animation:ir-word-rise 620ms cubic-bezier(.22,1,.36,1) var(--d,0ms) backwards;
transition:filter .7s cubic-bezier(.22,1,.36,1),opacity .7s cubic-bezier(.22,1,.36,1)}
@keyframes ir-word-rise {from{opacity:0;filter:blur(5px)}}
.ir-real .ir-word.ir-draft {filter:blur(calc(var(--k,3) * .9px));opacity:calc(1 - var(--k,3) * .14)}
.ir-real .ir-answer-row .ir-face {display:flex;width:44px;height:44px;margin:0 0 6px -4px;opacity:0;max-height:0;overflow:visible;
transition:opacity 220ms ease,max-height 320ms cubic-bezier(.22,1,.36,1),margin 320ms cubic-bezier(.22,1,.36,1)}
.ir-real .ir-answer-row.ir-waiting .ir-face {opacity:1;max-height:44px}
.ir-real .ir-answer-row:not(.ir-waiting) .ir-face {margin:0}
.ir-real .ir-reply-wait {animation:ir-word-rise 420ms ease-out both}
.ir-pill {position:fixed;z-index:235;left:50%;bottom:calc(var(--safe-b,0px) + 96px);transform:translateX(-50%);display:flex;align-items:center;gap:2px;
padding:4px;border-radius:28px;background:#18181a;color:#fff;
box-shadow:0 12px 32px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)}
.ir-pill-open {display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 4px;border:0;background:none;color:inherit;font:500 15px/20px var(--font);cursor:pointer}
.ir-pill-face {display:grid;place-items:center;width:36px;height:36px;flex-shrink:0}
.ir-pill-title {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(240px,calc(100vw - 150px))}
.ir-pill-face .ld-ring {animation:none;transform:scale(.42)}
.ir-pill-face .ld-ring i {animation:none;transform:translate(var(--x1),var(--y1));opacity:1}
.ir-pill-close {display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#bdbdbd;cursor:pointer}
.ir-pill-close .ic {width:16px;height:16px}
.ir-pill-open:active,.ir-pill-close:active {opacity:.7}
.immersive-ritm.ir-minimizing,.immersive-ritm.ir-settled.ir-minimizing {pointer-events:none;animation:ir-minimize 280ms cubic-bezier(.4,0,.2,1) both}
@keyframes ir-minimize {to{opacity:0;transform:translateY(8%) scale(.94);border-radius:36px}}
.immersive-ritm.ir-expanding,.immersive-ritm.ir-settled.ir-expanding {animation:ir-expand 340ms cubic-bezier(.22,1,.36,1) both}
@keyframes ir-expand {from{opacity:0;transform:translateY(8%) scale(.94);border-radius:36px}to{opacity:1;transform:none;border-radius:0}}
.ir-restored .ir-reply-text {white-space:pre-wrap}
.immersive-ritm[data-stage="gesture-setup"] .ir-setup-progress {display:none!important}
.immersive-ritm[data-stage="gesture-setup"] .ir-presence > .ir-face {display:flex;width:210px;height:210px}
.immersive-ritm[data-stage="gesture-setup"] .ir-face .ld-eyes {animation:ir-blink 4.8s ease-in-out 1.2s infinite}
@keyframes ir-blink {0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.12)}}
.immersive-ritm[data-stage="gesture-setup"] .ir-face .ld-ring i {opacity:calc(.2 + var(--aim,0) * .55);scale:calc(1 + var(--aim,0) * .24);
transition:background-color .4s ease}
.immersive-ritm[data-stage="gesture-setup"] .ir-face .ld-ring i.ir-dot-on {opacity:1;animation:ir-dot-pop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes ir-dot-pop {0%{scale:1.38;opacity:.55}}
.immersive-ritm.ir-setup-done .ir-face .ld-ring i {opacity:1;background-color:#34c759}
.immersive-ritm.ir-setup-done .ir-face .ld-eyes u {background-color:#34c759}
.immersive-ritm[data-stage="gesture-setup"] .ir-edge {transition:none}
.ir-setup-percent {display:block;margin-top:10px;color:#fff;font:600 20px/26px var(--font);font-variant-numeric:tabular-nums}
.immersive-ritm[data-stage="gesture-setup"] .ir-presence {gap:18px}
.immersive-ritm[data-stage="gesture-setup"] .ir-presence h2 {margin-top:44px}
.immersive-ritm.ir-real.ir-has-topic {padding-top:calc(max(12px + var(--tg-content-safe-area-inset-top,0px),46px) + var(--tg-safe-area-inset-top,0px))}
.ir-topic {position:absolute;z-index:3;left:104px;right:104px;margin:0;text-align:center;color:#fff;opacity:.92;
top:calc(var(--tg-safe-area-inset-top,0px) + max(12px,(var(--tg-content-safe-area-inset-top,0px) - 22px) / 2));
font:600 15px/22px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease,transform .2s ease}
.ir-topic:empty {display:none}
.ir-topic.ir-topic-out {opacity:0;transform:translateY(-4px)}
.immersive-ritm.ir-voice .ir-topic {opacity:.5}
.immersive-ritm[data-stage="gesture-setup"] .ir-face .ld-ring {transform:scale(2.25)}
.immersive-ritm[data-stage="gesture-setup"] .ir-presence > .ir-face .ld-ring,
.immersive-ritm[data-stage="recording"] .ir-presence > .ir-face .ld-ring {scale:var(--squash-x,1) var(--squash-y,1)}
.immersive-ritm[data-stage="gesture-setup"] .ir-presence > .ir-face .ld-eyes,
.immersive-ritm[data-stage="recording"] .ir-presence > .ir-face .ld-eyes {translate:var(--eye-x,0px) var(--eye-y,0px)}
.immersive-ritm.ir-dragging,.immersive-ritm.ir-docking {box-shadow:none;animation:none!important;overflow:hidden;will-change:transform,opacity}
.tab-orb.ir-docked img {border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--ib-violet) 34%,transparent);animation:none}
.tab-orb.ir-dock-arrive img {animation:ir-orb-arrive 520ms cubic-bezier(.34,1.56,.64,1)}
@keyframes ir-orb-docked {0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ib-violet) 0%,transparent)}
50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ib-violet) 34%,transparent)}}
@keyframes ir-orb-arrive {0%{transform:scale(.86)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tab-orb.ir-docked img,.tab-orb.ir-dock-arrive img{animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--ib-violet) 34%,transparent)}}
.ir-grab {display:none;position:absolute;z-index:4;left:0;right:0;top:0;touch-action:none;
height:calc(var(--tg-safe-area-inset-top,0px) + max(44px,var(--tg-content-safe-area-inset-top,0px) + 8px))}
.immersive-ritm.ir-real .ir-grab {display:block}
.ir-grab-pill {position:absolute;left:50%;bottom:0;width:72px;height:24px;margin-left:-36px;padding:0;border:0;background:none;cursor:grab}
.ir-grab-pill i {position:absolute;left:50%;top:8px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(255,255,255,.26);
transition:background .2s ease,width .2s ease}
.ir-grab-pill:active i,.ir-dragging .ir-grab-pill i {background:rgba(255,255,255,.5)}
.ir-grab-pill:focus-visible {outline:2px solid var(--ib-violet);outline-offset:2px;border-radius:12px}
.ir-topic {pointer-events:none}
.ir-real .ir-word.ir-word-still {animation:none}
.ir-threads {position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;gap:14px;overflow:auto;overscroll-behavior:contain;
padding:calc(var(--tg-safe-area-inset-top,0px) + max(16px,var(--tg-content-safe-area-inset-top,0px) + 8px)) 20px calc(24px + var(--safe-b,0px));
background:#000;scrollbar-width:none;touch-action:pan-y}
.ir-threads::-webkit-scrollbar {display:none}
.ir-threads-head {display:flex;align-items:center;gap:10px;min-height:48px}
.ir-threads-head h2 {margin:0;min-width:0;font:600 20px/26px var(--font);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ir-threads-new {display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border:0;border-radius:26px;
background:#f4f4f4;color:#1d1d1f;font:500 16px/22px var(--font);cursor:pointer;touch-action:manipulation;transition:transform .2s var(--ease)}
.ir-threads-new .ic {width:20px;height:20px}
.ir-threads-new:active {transform:scale(.98)}
.ir-threads-new:disabled {opacity:.5}
.ir-threads-list {display:flex;flex-direction:column;gap:8px}
.ir-thread {display:grid;gap:4px;min-width:0;text-align:left;padding:14px 16px;border:0;border-radius:20px;background:rgba(255,255,255,.06);
color:#fff;font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .2s var(--ease),background .2s ease}
.ir-thread b {min-width:0;font:500 16px/22px var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ir-thread span {font:13px/18px var(--font);color:#999}
.ir-thread-now {background:color-mix(in srgb,var(--ib-violet) 20%,rgba(255,255,255,.04))}
.ir-thread:active {transform:scale(.985);background:rgba(255,255,255,.1)}
.ir-thread:focus-visible,.ir-threads-new:focus-visible {outline:2px solid var(--ib-violet);outline-offset:3px}
.ir-threads-note {margin:2px 4px;color:#999;font:14px/20px var(--font)}
.ir-threads-turns {display:flex;flex-direction:column;gap:18px;padding:4px 0 12px}
.ir-threads-turns .ir-own {align-self:flex-end}
.ir-thread-answer {margin:0;color:#fff;font:17px/27px var(--font);white-space:pre-wrap;overflow-wrap:anywhere}
.ir-composer .ir-threads-open {flex:0 0 48px}
.ir-composer:has(> .ir-input) {gap:10px}
.ir-composer.ir-pending-actions {flex-wrap:wrap;justify-content:flex-start;gap:8px 12px}
.ir-pending-actions > .ir-consent-accept {flex:1 1 200px;min-width:0;white-space:normal}
.ir-pending-actions > .ir-setup-later {flex:1 1 100%;min-width:0;white-space:normal;overflow-wrap:anywhere}
.ir-grab .ir-close {position:absolute;right:16px;bottom:-12px;width:44px;height:44px;background:transparent}
.immersive-ritm.ir-real {padding-top:calc(var(--tg-safe-area-inset-top,0px) + max(60px,var(--tg-content-safe-area-inset-top,0px) + 60px))}
.immersive-ritm.ir-real.ir-has-topic {padding-top:calc(var(--tg-safe-area-inset-top,0px) + max(60px,var(--tg-content-safe-area-inset-top,0px) + 60px))}
.ir-composer.ir-tutorial-choices {flex-wrap:wrap;gap:6px 12px}
.ir-tutorial-choices > .ir-consent-accept {flex:1 1 100%}
.ir-tutorial-choices > .ir-setup-later {flex:1 1 auto}
.ir-threads { overflow:hidden; }
.ir-threads-head,.ir-threads-new,.ir-threads > .ir-threads-note,.ir-threads > button { flex-shrink:0; }
.ir-threads-head h2 { flex:1; }
.ir-threads-list,.ir-threads-turns { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.ir-threads-head .ir-threads-back,.ir-threads-head .ir-close-thread { flex:0 0 44px; }
.ir-grab .ir-close { bottom:-32px; }
.ir-real .ir-topic { left:64px; right:72px; top:calc(var(--tg-safe-area-inset-top,0px) + max(48px,var(--tg-content-safe-area-inset-top,0px) + 12px)); }
.immersive-ritm.ir-real,.immersive-ritm.ir-real.ir-has-topic { padding-top:calc(var(--tg-safe-area-inset-top,0px) + max(88px,var(--tg-content-safe-area-inset-top,0px) + 60px)); }
.ir-text-history{display:none}
.ir-text-entry .ir-text-history{display:grid;position:absolute;left:16px;bottom:-32px;width:44px;height:44px}
.ir-text-entry .ir-text-history[hidden]{display:none}
.ir-text-entry .ir-grab .ir-close{right:16px}
.ir-text-entry .ir-atmosphere{background:radial-gradient(ellipse at 82% 0%,color-mix(in srgb,var(--accent),transparent 65%),transparent 58%),radial-gradient(ellipse at 0% 25%,color-mix(in srgb,var(--accent),transparent 82%),transparent 65%),var(--bg)}
.ir-text-entry{background:var(--bg);color:var(--ink);color-scheme:normal}
.ir-text-entry .ir-control{color:var(--ink)}
.ir-text-entry .ir-primary{background:var(--ink);color:var(--bg)}
.ir-welcome-open .ir-presence,.ir-welcome-open .ir-history{display:none}
.ir-welcome{display:flex;flex:1 0 auto;flex-direction:column;padding:16px 0 8px}
.ir-welcome[hidden]{display:none}
.ir-welcome-greeting{font-size:clamp(30px,8.5vw,40px);font-weight:500;line-height:1.17;letter-spacing:-.035em;margin:0 0 44px;overflow-wrap:anywhere}
.ir-welcome-name{color:var(--ink-2)}
.ir-welcome-question{display:block}
.ir-welcome-brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;margin:auto 0 18px}
.ir-welcome-mark{width:28px;height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.ir-welcome-mark .ld-ring{flex-shrink:0;animation:none;transform:scale(.36);transform-origin:center}
.ir-welcome-mark .ld-ring i{animation:none;transform:translate(var(--x1),var(--y1));opacity:1}
.ir-welcome-mark .ld-eyes{animation:none}
.ir-welcome-about{background:transparent;border:0;color:var(--ink-2);font:inherit;font-size:12px;margin-left:auto;padding:10px 0;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.ir-welcome-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ir-welcome-card{border:1px solid var(--line);background:var(--well);border-radius:var(--r-card);padding:18px 16px;color:var(--ink);font:inherit;text-align:left;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:148px}
.ir-welcome-main{grid-row:span 2;min-height:0}
.ir-welcome-card strong{font-weight:500;font-size:18px;line-height:1.2;overflow-wrap:anywhere}
.ir-welcome-card span{font-size:13px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.ir-welcome-card svg{width:22px;height:22px;margin-top:auto;color:var(--ink-2)}
.ir-welcome-hint{font-size:12px;line-height:1.4;color:var(--ink-2);margin:16px 0 0}
.ir-text-entry .ir-input{border-color:var(--line);background:var(--well);color:var(--ink)}
.ir-text-entry .ir-input textarea{color:var(--ink)}
.ir-text-entry .ir-input textarea::placeholder{color:var(--ink-3)}
.ir-text-entry .ir-topic{color:var(--ink)}
.ir-text-entry .ir-own{background:var(--well);color:var(--ink)}
.ir-text-entry .ir-reply-text{color:var(--ink)}
.ir-text-entry .ir-answer-chip{background:var(--well);border-color:var(--line);color:var(--ink);min-height:44px}
.ir-text-entry .ir-answer-chip:active{background:var(--well-2)}
.ir-text-entry .ir-message,.ir-text-entry .ir-answer-meta{color:var(--ink-2)}
.ir-text-entry .ir-lifted .ir-answer,.ir-text-entry .ir-answer-actions{background:var(--well);color:var(--ink);border-color:var(--line)}
.ir-text-entry .ir-answer-actions button{color:var(--ink)}
.ir-text-entry .ir-answer-actions button:active{background:var(--well-2)}
.ir-text-entry .ir-threads{background:var(--bg);color:var(--ink)}
.ir-text-entry .ir-threads-head h2{color:var(--ink)}
.ir-text-entry .ir-thread{background:var(--well);color:var(--ink)}
.ir-text-entry .ir-thread-now,.ir-text-entry .ir-thread:active{background:var(--well-2)}
.ir-text-entry .ir-thread span,.ir-text-entry .ir-threads-note{color:var(--ink-2)}
.ir-text-entry .ir-thread-answer{color:var(--ink)}
.ir-text-entry button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-height:680px){.ir-welcome-greeting{margin-bottom:24px}.ir-welcome-card{min-height:124px}}
@media(max-width:350px){.ir-welcome-card{padding:14px 12px}.ir-welcome-card strong{font-size:16px}}
.thread-compose .compose-row {
gap: 4px;
padding: 4px;
border-radius: 28px;
background: var(--well);
}
.thread-compose .compose-row textarea {
background: transparent;
border-radius: 0;
min-height: 44px;
padding: 11px 6px;
}
.thread-compose .compose-row > .clip,
.thread-compose .compose-row > .voice-mic,
.thread-compose .compose-row > .send {
flex: 0 0 44px;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin: 0;
border-radius: 50%;
}
.thread-compose .compose-row > .voice-mic .ic { width: 24px; height: 24px; }
.pay-consent > div { min-width: 0; overflow-wrap: anywhere; }
.pay-consent input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 24px;
height: 24px;
border: 1.5px solid var(--ink-3);
border-radius: 50%;
background: transparent;
color: var(--btn-ink);
outline: none;
box-shadow: none;
}
.pay-consent input[type="checkbox"]:checked { background: var(--btn); border-color: var(--btn); }
.pay-consent input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid currentColor;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pay-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pay-consent input[type="checkbox"]:disabled { opacity: .5; }
.pay-resume-sheet .panel { max-height: min(88dvh, calc(100dvh - var(--full-top, 0px) - 16px)); }
.pay-resume-sheet .sheet-body { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.pay-resume-head { flex: none; }
.pay-resume-head h3 { margin: 0 0 8px; font-size: 24px; line-height: 30px; font-weight: 500; }
.pay-resume-head p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 22px; }
.pay-resume-terms { flex: 1 1 auto; min-height: 64px; overflow-y: auto; overflow-x: hidden; padding-right: 8px;
overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
.pay-resume-terms p { font-size: 15px; line-height: 23px; margin: 0 0 12px; }
.pay-resume-terms p:last-child { margin-bottom: 0; }
.pay-resume-actions { flex: none; display: grid; gap: 12px; min-width: 0; }
.pay-resume-actions .pay-consent, .pay-resume-actions .btn { margin: 0; }
.pay-resume-actions .btn + .btn.ghost { margin-top: 0; }
.pay-resume-actions .btn { width: 100%; min-width: 0; white-space: normal; }
.pay-resume-terms::-webkit-scrollbar { width: 3px; }
.pay-resume-terms::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }
.bento + .callout { margin-top: 16px; }
@media (max-width: 360px) {
.tools-tile .tt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.tools-tile .tt-row > .tt:last-child { grid-column: 1 / -1; }
.tools-tile .tt { min-height: 96px; }
.tools-tile .tt small { overflow-wrap: anywhere; }
}