*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
[lang^="zh"] h1, [lang^="zh"] h2 { letter-spacing: 0.01em !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.sel { user-select: text; -webkit-user-select: text; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }
.auth :focus-visible, .demo :focus-visible, .viewer :focus-visible, .okcard :focus-visible { outline-color: var(--cyan); }
[tabindex="-1"]:focus-visible { outline: none; }

#app { position: fixed; inset: var(--rv-h) 0 0 0; overflow: hidden; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand__logo { display: block; flex: none; width: 112px; height: 27px; }
.brand__tag { padding-left: 12px; border-left: 1px solid currentColor; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; line-height: 16px; text-transform: uppercase; opacity: 0.7; white-space: nowrap; }
.lx { display: block; width: 100%; height: 100%; overflow: visible; }
.lx [data-anchor], .lx [data-letter], .lx [data-e], .lx [data-bridge], .lx [data-foot], .lx [data-intact] { transform-box: view-box; transform-origin: 0 0; }
.auth { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: var(--stage); color: var(--stage-text); }
.auth__dots {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgb(255 255 255 / 6.5%) 1.2px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 80% at 80% 20%, #000, transparent 70%);
  mask-image: radial-gradient(120% 80% at 80% 20%, #000, transparent 70%);
}
.auth__ribbon { position: absolute; z-index: -1; pointer-events: none; transition: opacity 700ms var(--ease); }
.auth[data-panel="help"] .auth__ribbon { opacity: 0.36; }
.auth[data-panel="code"] .auth__ribbon { opacity: 0.7; }
.auth__ribbon.is-fallback { background: radial-gradient(40% 50% at 60% 40%, rgb(90 44 255 / 45%), transparent 70%), radial-gradient(30% 40% at 40% 70%, rgb(255 74 43 / 30%), transparent 70%); }
@media (min-width: 900px) {
  .auth__ribbon { top: -16%; right: -18%; width: 74%; height: 132%; -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 34%); mask-image: linear-gradient(90deg, transparent 2%, #000 34%); }
}
@media (max-width: 899px) {
  .auth__ribbon { top: -4%; left: -34%; width: 168%; height: 50%; -webkit-mask-image: linear-gradient(#000 40%, transparent 94%); mask-image: linear-gradient(#000 40%, transparent 94%); }
}
.auth__bar { position: relative; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gut) 12px; }
.auth .brand { color: var(--stage-text); }
@media (max-width: 359px) { .auth .brand__tag { display: none; } }
@media (min-width: 900px) { .auth__bar { padding-inline: clamp(48px, 7vw, 112px) 28px; } }
.lang { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgb(18 23 21 / 92%); box-shadow: inset 0 0 0 1px var(--stage-line); }
.lang__btn { min-width: 48px; height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--stage-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 200ms, color 200ms; }
.lang__btn[aria-pressed="true"] { background: var(--stage-text); color: var(--stage); }
.auth__main { position: relative; flex: 1; min-height: 0; }
.panel { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.panel__in { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 620px; min-height: 100%; padding: 20px var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .panel__in { justify-content: center; max-width: 760px; padding: 40px 48px 64px clamp(48px, 7vw, 112px); }
}
.ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ln > span { display: block; }
.auth__h1 { font-size: clamp(40px, 11vw, 76px); letter-spacing: -0.05em; line-height: 0.96; }
.panel--phone .auth__h1, .panel--code .auth__h1, .panel--help .auth__h1 { margin-top: 18px; font-size: clamp(32px, 8.4vw, 56px); letter-spacing: -0.045em; line-height: 1; }
.auth__sub { max-width: 36ch; margin-top: 12px; color: #a9b2ac; font-size: 16px; line-height: 1.45; }
[lang^="zh"] .auth__sub { line-height: 1.6; }
.auth__error { min-height: 22px; margin-top: 12px; color: #ff8c73; font-size: 14.5px; line-height: 1.4; }
.back { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 40px; margin-left: -4px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: rgb(18 23 21 / 90%); box-shadow: inset 0 0 0 1px var(--stage-line); color: #c3cac5; font-size: 13.5px; cursor: pointer; }
.back svg { width: 16px; height: 16px; }
.regions { display: grid; margin-top: clamp(28px, 4.5vh, 44px); border-top: 1px solid var(--stage-line); }
.region {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "code go" "name name";
  align-items: center;
  gap: 4px 16px;
  padding: 16px 2px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--stage-line);
  background: none;
  color: var(--stage-text);
  text-align: left;
  cursor: pointer;
  transition: opacity 300ms var(--ease);
}
.region::before { position: absolute; inset: 0 -12px; z-index: -1; border-radius: 16px; background: linear-gradient(90deg, rgb(90 44 255 / 16%), rgb(194 28 192 / 8%) 55%, transparent); content: ""; opacity: 0; transition: opacity 300ms var(--ease); }
.region__code { grid-area: code; display: flex; font-size: clamp(72px, 21vw, 148px); font-weight: 400; letter-spacing: -0.065em; line-height: 1; font-variant-numeric: tabular-nums; will-change: transform; }
.rc { position: relative; display: inline-block; margin-right: -0.065em; letter-spacing: 0; transition: color 450ms var(--ease); }
.rc:last-child { margin-right: 0; }
.rc::after { position: absolute; inset: 0; background: var(--foil); background-size: calc(var(--n) * 100%) 100%; background-position: calc(var(--i) / max(1, var(--n) - 1) * 100%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; content: attr(data-c); opacity: 0; transition: opacity 450ms var(--ease); transition-delay: var(--lit-delay, 0ms); }
.region.is-active .rc::after, .region:focus-visible .rc::after, .regions--lit .rc::after { opacity: 1; }
.region.is-active .rc, .region:focus-visible .rc, .regions--lit .rc { color: transparent; transition-delay: var(--lit-delay, 0ms); }
.regions--lit .rc { --lit-delay: calc(var(--row, 0) * 260ms + var(--i) * 90ms); }
.region__name { grid-area: name; display: flex; align-items: baseline; gap: 10px; }
.region__name b { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.region__name small { color: var(--stage-muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.region__go { grid-area: go; position: relative; display: grid; place-items: center; width: 56px; height: 56px; color: var(--stage-text); will-change: transform; }
.region__go::after { position: absolute; inset: 6px; border-radius: 50%; background: var(--stage-text); content: ""; opacity: 0; transform: scale(0.6); transition: opacity 300ms var(--ease), transform 500ms var(--spring-pop); }
.region.is-active .region__go::after, .region:focus-visible .region__go::after { opacity: 1; transform: none; }
.region.is-active .region__go svg, .region:focus-visible .region__go svg { color: var(--stage); }
.region__go i { position: absolute; inset: 0; border-radius: 50%; background: var(--iri); -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%); mask: radial-gradient(closest-side, transparent 90%, #000 91%); opacity: 0.55; transition: transform 700ms var(--spring), opacity 300ms; }
.region__go svg { position: relative; z-index: 1; width: 20px; height: 20px; transition: transform 400ms var(--spring), color 200ms; }
.region.is-active::before, .region:focus-visible::before { opacity: 1; }
.region.is-active .region__go i, .region:focus-visible .region__go i { opacity: 1; transform: rotate(180deg); }
.region.is-active .region__go svg, .region:focus-visible .region__go svg { transform: translateX(3px); }
.regions:has(.region.is-active) .region:not(.is-active) { opacity: 0.42; }
.region:focus-visible { outline-offset: -2px; }
.regions--lit .region__go i { opacity: 1; animation: spin 12s linear infinite; }
@media (prefers-reduced-motion: reduce) { .regions--lit .region__go i { animation: none; } }
@media (min-width: 900px) {
  .region { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "code name go"; align-items: end; gap: 24px; padding: 18px 4px 22px 0; }
  .region__name { flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 12px; text-align: right; }
  .region__go { align-self: center; }
}
.phone { --pf: clamp(30px, 9.2vw, 62px); display: flex; flex-direction: column; margin-top: clamp(24px, 4vh, 36px); }
.phone__field { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 14px; }
.phone__prefix { flex: none; color: var(--stage-text); font-size: var(--pf); font-weight: 400; letter-spacing: -0.04em; line-height: 1.2; }
.phone__box { position: relative; flex: 1; min-width: 0; height: calc(var(--pf) * 1.2); }
.phone__box input, .phone__mirror {
  display: block;
  height: calc(var(--pf) * 1.2);
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font);
  font-size: var(--pf);
  font-weight: 400;
  font-kerning: none;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: calc(var(--pf) * 1.2);
  white-space: pre;
}
.phone__box input { position: relative; z-index: 1; width: 100%; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--cyan); outline: none; }
.phone__box input:-webkit-autofill, .otp__input:-webkit-autofill { opacity: 0; }
.phone__box input::selection { background: rgb(196 181 255 / 28%); }
.phone__mirror { position: absolute; top: 0; left: 0; color: var(--stage-text); pointer-events: none; }
.phone__mirror .c { position: relative; display: inline-block; color: #313935; transition: color 220ms var(--ease); }
.phone__mirror .c.is-on { color: var(--stage-text); }
.phone__mirror .c--d { transition: none; }
.phone__mirror .c i { position: absolute; left: 0; top: 0; background: linear-gradient(135deg, #8b8fff, #b35cff 35%, #ff5aa8 70%, #ff6242); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; opacity: 0; pointer-events: none; }
.phone__mirror[data-busy] .c--d.is-on { animation: shimmer 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.phone__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(238 241 236 / 22%); transition: background-color 200ms; }
.phone__field[data-filled] .phone__line { background: rgb(238 241 236 / 48%); }
.phone__line::after { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, #3547ff, #9a6bff 30%, #ff5aa8 70%, #ff4a2b); content: ""; transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--spring); }
.phone__field:focus-within .phone__line::after { transform: scaleX(1); }
.phone__field[data-invalid] .phone__line { background: #ff8c73; }
@media (hover: none), (pointer: coarse) {
  .phone__field:not(:focus-within):not([data-filled]) .phone__line::after { animation: invite 2.6s var(--ease) 1.1s infinite backwards; }
  .otp__cursor[data-mode="idle"] { opacity: 0.7; animation: cursor-invite 2.6s var(--ease) 1.1s infinite backwards; }
}
@keyframes invite { 0%, 100% { transform: scaleX(0.06); } 50% { transform: scaleX(0.34); } }
@keyframes cursor-invite { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .phone__field .phone__line::after, .otp__cursor { animation: none !important; }
}
.btn-auth {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  height: 56px;
  margin-top: 16px;
  padding: 0 20px 0 22px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--stage-text);
  color: var(--stage);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 260ms var(--ease), opacity 200ms;
}
.btn-auth svg { width: 18px; height: 18px; flex: none; transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn-auth:hover { transform: translateY(-2px); } }
@media (hover: hover) and (pointer: fine) { .btn-auth:hover svg { transform: translateX(3px); } }
.btn-auth:active { transform: scale(0.98); }
.btn-auth[data-busy] { cursor: progress; }
.btn-auth__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #3547ff, var(--violet), var(--magenta), var(--coral)); transform: scaleX(0); transform-origin: 0 50%; }
.btn-auth[data-busy] .btn-auth__bar { animation: busy 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes busy { 0% { transform: scaleX(0); transform-origin: 0 50%; } 50% { transform: scaleX(1); transform-origin: 0 50%; } 50.01% { transform: scaleX(1); transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
@media (min-width: 900px) { .btn-auth { align-self: flex-start; width: auto; min-width: 250px; } }
.panel__foot { margin-top: 8px; }
.help__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1d1614; box-shadow: inset 0 0 0 1px rgb(255 140 115 / 35%); color: #ff8c73; }
.help__mark svg { width: 28px; height: 28px; }
.numline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.numline__num { padding: 7px 12px; border-radius: 10px; background: var(--stage-2); box-shadow: inset 0 0 0 1px var(--stage-line); font-family: var(--mono); font-size: 15px; letter-spacing: 0.02em; user-select: text; }
.numline__edit { height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--lilac); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.helplist { display: grid; margin-top: 24px; border-radius: 18px; background: var(--stage-2); box-shadow: inset 0 0 0 1px var(--stage-line); }
.helplist__h { padding: 14px 16px 4px; color: var(--stage-muted); font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.helprow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; }
.helprow + .helprow { border-top: 1px solid var(--stage-line); }
.helprow__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--stage-3); color: #cfd6d1; }
.helprow__icon svg { width: 18px; height: 18px; }
.helprow__txt { display: grid; min-width: 0; }
.helprow__txt > span { color: var(--stage-muted); font-size: 13px; }
.helprow__txt b { font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.helprow__txt b.sel { font-family: var(--mono); font-size: 14px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.helprow__acts { display: flex; gap: 6px; }
@media (max-width: 359px) {
  .helprow { grid-template-columns: 36px minmax(0, 1fr); }
  .helprow__acts { grid-column: 2; }
}
.chipbtn { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--stage-3); box-shadow: inset 0 0 0 1px var(--stage-line); color: var(--stage-text); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.chipbtn[data-done] { color: var(--lilac); }
.wait { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.wait__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wait__track { fill: none; stroke: rgb(238 241 236 / 10%); stroke-width: 4; }
.wait__arc { fill: none; stroke: url(#wait-g); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 0; }
.wait__txt { position: relative; display: grid; justify-items: center; gap: 2px; }
.wait__txt span { color: var(--stage-muted); font-size: 11.5px; }
.wait__txt b { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; }
.otp { display: flex; flex-direction: column; margin-top: 26px; }
.otp__wrap { position: relative; align-self: flex-start; }
.otp__slots { position: relative; display: flex; gap: clamp(5px, 2vw, 8px); }
.otp__slot {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(38px, 12.4vw, 66px);
  height: clamp(52px, 15.4vw, 80px);
  border-radius: 14px;
  background: var(--stage-2);
  box-shadow: inset 0 0 0 1px var(--stage-line);
  font-size: clamp(28px, 7.4vw, 40px);
  font-variant-numeric: tabular-nums;
  transition: box-shadow 240ms var(--ease), background-color 240ms var(--ease), color 240ms var(--ease);
}
.otp__slot:nth-child(2) { --k: 1; }
.otp__slot:nth-child(3) { --k: 2; margin-right: clamp(4px, 2vw, 12px); }
.otp__slot:nth-child(4) { --k: 3; }
.otp__slot:nth-child(5) { --k: 4; }
.otp__slot:nth-child(6) { --k: 5; }
.otp__slot b { position: relative; z-index: 1; font-weight: 400; }
.otp__glow { position: absolute; inset: 0; padding: 1.5px; border-radius: 14px; background: var(--iri); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease); }
.otp__slot[data-filled] .otp__glow { opacity: 0.42; transition-delay: var(--gd, 0ms); }
.otp__slots[data-state="error"] .otp__glow, .otp__slots[data-state="expired"] .otp__glow { opacity: 0; transition-delay: 0ms; }
.otp__slots[data-state="error"] .otp__slot { background: #1e1513; box-shadow: inset 0 0 0 1.5px #ff8c73; color: #ffb3a3; }
.otp__slots[data-state="expired"] .otp__slot { color: #59625d; }
.otp__slots[data-state="ok"] .otp__slot { background: #1b1433; box-shadow: inset 0 0 0 1.5px #7b5cff; color: #fff; transition-delay: calc(var(--k, 0) * 45ms); }
.otp__slots[data-state="ok"] .otp__glow { opacity: 1; transition-duration: 380ms; transition-delay: calc(var(--k, 0) * 45ms); }
.otp__cursor { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(38px, 12.4vw, 66px); height: clamp(52px, 15.4vw, 80px); border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgb(228 222 255 / 80%); opacity: 0; pointer-events: none; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease-out; will-change: transform, opacity; }
.otp__cursor[data-mode="on"] { opacity: 1; }
.otp__cursor i { position: absolute; top: 30%; left: calc(50% - 1px); width: 2px; height: 40%; border-radius: 1px; background: var(--lilac); opacity: 0; }
.otp__cursor[data-mode="on"] i { opacity: 1; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.otp__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 2em; outline: none; cursor: text; }
.otp__input::selection { background: transparent; }
.otp__input:focus-visible { outline: none; }
.otp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 34px; color: var(--stage-muted); font-size: 14px; }
.otp__meta [data-resend-txt] { font-variant-numeric: tabular-nums; }
.linkbtn { height: 44px; padding: 0; border: 0; background: none; color: var(--lilac); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.flyer { position: fixed; z-index: 80; margin: 0; color: var(--stage-text); pointer-events: none; transform-origin: 0 0; white-space: nowrap; }
.portal { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.top { position: relative; z-index: 4; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gut) 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.top .brand { transition: opacity 220ms var(--ease), transform 320ms var(--spring); }
.top__title { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 30px); left: 50%; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) translateY(8px); transition: opacity 220ms var(--ease), transform 360ms var(--spring); }
.brand--ink { color: var(--ink); }
.brand--ink .brand__logo { width: 104px; height: 25px; }
.me-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: background-color 160ms; }
@media (hover: hover) and (pointer: fine) { .me-btn:hover { background: rgb(17 20 18 / 5%); } }
.me-btn__name { font-size: 14.5px; font-weight: 500; }
.avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #f4f5f1; font-size: 13.5px; font-weight: 600; }
.avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.tav { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; }
.tav i { position: absolute; inset: 0; border-radius: 50%; background: var(--iri); }
.tav span { position: absolute; inset: 2.5px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--violet); font-size: 13px; font-weight: 600; }

.ws { position: relative; display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); }
.side { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.side__head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 22px var(--gut) 12px; }
.side__title { font-size: 36px; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
@media (min-width: 760px) { .side__title { font-size: 32px; } }
.side__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px calc(var(--gut) - 8px) 28px; }
.fgroup + .fgroup { margin-top: 14px; }
.fgroup__h { padding: 10px 8px 6px; color: var(--meta); font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.frow {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms;
}
@media (hover: hover) and (pointer: fine) { .frow:hover { background: rgb(17 20 18 / 4%); } }
.frow[aria-current="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px rgb(17 20 18 / 40%); }
.frow__thumb { position: relative; overflow: hidden; width: 52px; aspect-ratio: 3 / 4; border-radius: 10px; background: #e4e7e1; }
.frow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.frow__thumb--blank { display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--bg); color: var(--muted); }
.frow__thumb--blank svg { width: 18px; height: 18px; }
.frow__main { display: grid; gap: 5px; min-width: 0; padding-top: 1px; }
.frow__top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.frow__name { flex: 1; min-width: 0; overflow: hidden; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.frow__time { flex: none; color: var(--meta); font-family: var(--mono); font-size: 11.5px; }
.frow__last { overflow: hidden; color: var(--meta); font-size: 13.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.frow__pill { display: flex; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; flex: none; }
.pill[data-s="draft"] { background: #e9ece6; color: #434b46; }
.pill[data-s="review"] { background: #fff0cf; color: #7a5200; }
.pill[data-s="changes"] { background: #ffe5dc; color: #a3301a; }
.pill[data-s="approved"] { background: #ebe5ff; color: #4b22e0; }
.pill--lg { position: relative; height: 30px; padding: 0 12px 0 10px; background: transparent !important; font-size: 13.5px; }
.pill--lg svg { width: 14px; height: 14px; }
.pill__bg { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; }
.pill__c { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.pill--lg[data-s="draft"] .pill__bg { background: #e9ece6; }
.pill--lg[data-s="review"] .pill__bg { background: #fff0cf; }
.pill--lg[data-s="changes"] .pill__bg { background: #ffe5dc; }
.pill--lg[data-s="approved"] .pill__bg { background: #ebe5ff; }
.pill--ghost { position: absolute; top: 0; left: 0; pointer-events: none; }
.fhead__pill { position: relative; }
.pill[data-s="review"] .pill__pulse { transform-origin: 50% 50%; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--ink);
  color: #f4f5f1;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms var(--ease), background-color 180ms, opacity 180ms;
}
.btn svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--sm { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.btn--ghost { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.btn--block { width: 100%; height: 50px; }
.btn--pearl { position: relative; overflow: hidden; background: var(--stage-text); color: var(--stage); }
.sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(123 92 255 / 35%) 35%, rgb(196 181 255 / 40%) 60%, transparent); opacity: 0; pointer-events: none; }
.btn[aria-disabled="true"] { background: #e3e6e0; color: #7b847e; cursor: not-allowed; transform: none; }
.btn--ghost[aria-disabled="true"] { background: transparent; }
.iconbtn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { background: rgb(17 20 18 / 6%); } }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn--dark { color: var(--stage-text); }
@media (hover: hover) and (pointer: fine) { .iconbtn--dark:hover { background: rgb(255 255 255 / 8%); } }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 32px var(--gut) 48px; text-align: center; }
.empty__art { position: relative; width: 220px; height: 170px; margin-bottom: 26px; }
.empty__card { position: absolute; top: 12px; left: 50%; overflow: hidden; width: 104px; aspect-ratio: 3 / 4; margin-left: -52px; border-radius: 16px; background: #e4e7e1; box-shadow: 0 18px 30px -18px rgb(17 20 18 / 45%); }
.empty__card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; filter: saturate(0.7); }
.empty__card--l { transform: translateX(-58px) rotate(-10deg); }
.empty__card--r { transform: translateX(58px) rotate(9deg); }
.empty__card--c { display: grid; place-items: center; top: 4px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 24px 40px -20px rgb(17 20 18 / 45%); color: var(--violet); }
.empty__card--c::before { position: absolute; inset: 8px; border: 1.5px dashed var(--line-strong); border-radius: 11px; content: ""; }
.empty__card--c svg { position: relative; width: 30px; height: 30px; }
.empty__h { font-size: clamp(36px, 5.4vw, 60px); letter-spacing: -0.055em; line-height: 0.98; }
.empty__p { max-width: 44ch; margin-top: 12px; color: var(--text); font-size: 16px; }
.empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
@media (min-width: 760px) {
  .empty__art { width: 300px; height: 230px; margin-bottom: 34px; }
  .empty__card { width: 140px; margin-left: -70px; border-radius: 20px; }
  .empty__card--l { transform: translateX(-80px) rotate(-10deg); }
  .empty__card--r { transform: translateX(80px) rotate(9deg); }
  .empty__card--c svg { width: 38px; height: 38px; }
  .empty__p { font-size: 17px; }
  .empty__acts .btn { height: 48px; padding: 0 20px; }
}
.crop { transform: scale(var(--z, 1)); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__img img.crop { transform: scale(calc(var(--z, 1) * 1.04)); } }
.ph { display: grid; place-items: center; width: 100%; height: 100%; background: #1a1f1d; color: #cfd6d1; }
.ph svg { width: 42%; max-width: 26px; height: auto; }
.pane { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.folder { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.fhead { position: relative; z-index: 3; flex: none; border-bottom: 1px solid var(--line); background: var(--bg); }
.fhead__row { display: flex; align-items: center; gap: 8px; padding: 12px var(--gut) 8px 8px; }
.fhead__title { flex: 1; min-width: 0; }
.fhead__title h2 { overflow: hidden; font-size: 18px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.fhead__meta { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 6px; }
.fhead__prods { flex: 1; min-width: 0; overflow: hidden; color: var(--meta); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.fhead__prods span { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; vertical-align: middle; }
.fhead__prods img { width: 7px; height: 16px; object-fit: contain; }
.fhead__pill { display: flex; flex: none; }
.fhead__bar { display: flex; align-items: center; gap: 12px; padding: 0 var(--gut) 12px; }
.fhead__note { display: none; flex: 1; min-width: 0; color: var(--text); font-size: 14.5px; line-height: 1.4; }
.fhead__act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fhead__act .btn { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.tabs { display: inline-flex; flex: none; padding: 3px; border-radius: 11px; background: #e7eae4; }
.tabs__btn { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.tabs__btn[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(17 20 18 / 14%); }

.thread { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.thread__in { display: flex; flex-direction: column; gap: 14px; max-width: 780px; margin: 0 auto; padding: 18px var(--gut) 22px; }
.day { align-self: center; color: var(--meta); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.sys { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; color: var(--meta); font-size: 13px; text-align: center; }
.sys svg { width: 15px; height: 15px; }
.sys .mono { font-size: 11.5px; }
.sys .pill { height: 22px; font-size: 12px; }
.msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: end; gap: 10px; max-width: min(88%, 560px); }
.msg__body { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.msg__who { color: var(--meta); font-size: 12.5px; }
.msg__who b { color: var(--ink); font-weight: 500; }
.bubble { padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.msg--me { align-self: flex-end; grid-template-columns: minmax(0, 1fr); justify-items: end; }
.msg--me .msg__body { justify-items: end; }
.msg--me .bubble { border-radius: 20px 20px 6px 20px; background: var(--ink); box-shadow: none; color: #f4f5f1; }
.msg__at { color: var(--meta); font-family: var(--mono); font-size: 11px; }
.tc { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 0 1px; padding: 0 8px 0 6px; border: 0; border-radius: 7px; background: #ffe5dc; color: #a3301a; font-family: var(--mono); font-size: 12.5px; font-weight: 500; vertical-align: 1px; cursor: pointer; }
.tc svg { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) { .tc:hover { background: #ffd6c9; } }
.typing { display: inline-flex; gap: 5px; padding: 13px 15px; border-radius: 18px 18px 18px 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa29c; animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 30% { transform: translateY(-4px); opacity: 0.6; } 60% { transform: none; opacity: 1; } }
.ups { align-self: flex-end; width: min(100%, 470px); overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.ups__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--meta); font-size: 12.5px; }
.ups__head .mono { font-size: 11px; }
.item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px 10px 14px; }
.item + .item { border-top: 1px solid var(--line); }
.item:has(> [data-open]) { cursor: pointer; }
.item__thumb { position: relative; display: block; overflow: hidden; width: 40px; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 8px; background: #e4e7e1; cursor: pointer; }
.item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.item__thumb .glyph { position: absolute; left: 4px; bottom: 4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: rgb(11 14 13 / 70%); color: #fff; }
.item__thumb .glyph svg { width: 7px; height: 7px; margin-left: 1px; }
.item__thumb--doc { display: grid; place-items: center; background: #f1f2ee; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.item__thumb--doc svg { width: 18px; height: 18px; }
.item__main { display: grid; gap: 1px; min-width: 0; }
.item__name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14.5px; font-weight: 500; }
.item__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item__meta { overflow: hidden; color: var(--meta); font-family: var(--mono); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.ver { flex: none; padding: 1px 6px; border-radius: 5px; background: #e9ece6; color: var(--text); font-family: var(--mono); font-size: 10.5px; font-weight: 500; }
.ver--cur { background: #ebe5ff; color: #4b22e0; }
.ver--old { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--meta); }
.item__end { display: flex; align-items: center; gap: 6px; }
.item__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; }
.item__ok svg { width: 13px; height: 13px; }
.item__prog { grid-column: 2 / 4; display: grid; gap: 6px; padding-top: 4px; }
.item__stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); font-size: 12.5px; }
.item__stat .mono { font-size: 11.5px; }
.bar { position: relative; height: 4px; overflow: hidden; border-radius: 2px; background: #e7eae4; }
.bar i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--magenta)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.bar i::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 20%, rgb(255 255 255 / 60%) 50%, transparent 80%); content: ""; opacity: 0; transform: translateX(-100%); }
[data-state="uploading"] .bar i::after { opacity: 1; animation: sheen 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes sheen { to { transform: translateX(100%); } }
.item[data-state="paused"] .bar i { background: #aab2ab; }
.item[data-state="failed"] .bar i { background: var(--coral); }
.item[data-state="queued"] .bar i { background: transparent; }
.item[data-state="processing"] .bar i { background: linear-gradient(90deg, var(--violet), var(--magenta), #ff5aa8); }
.item[data-state="failed"] .item__stat { color: #a3301a; }
.mini { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.mini svg { width: 12px; height: 12px; }
.mini--danger { border-color: #ffc4b5; background: #fff4f0; color: #a3301a; }
.item__err { color: #a3301a; font-size: 12.5px; }
.addcard { display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.addcard h3 { font-size: 26px; letter-spacing: -0.045em; line-height: 1.05; }
.addcard p { color: var(--text); font-size: 14.5px; }
.addcard__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.addbtn { display: grid; justify-items: start; gap: 10px; padding: 14px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color 160ms, background-color 160ms; }
@media (hover: hover) and (pointer: fine) { .addbtn:hover { border-color: var(--violet); background: #f6f4ff; } }
.addbtn svg { width: 20px; height: 20px; color: var(--violet); }
.addbtn small { display: block; color: var(--meta); font-size: 12px; font-weight: 400; }
.okcard { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 22px; overflow: hidden; padding: clamp(20px, 3vw, 30px); border-radius: 26px; background: var(--stage); color: var(--stage-text); box-shadow: 0 30px 60px -30px rgb(17 20 18 / 55%); }
.okcard::before { position: absolute; z-index: 2; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(120deg, rgb(123 92 255 / 70%), rgb(194 28 192 / 45%) 30%, transparent 55%, rgb(255 90 168 / 55%)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); content: ""; pointer-events: none; }
.okcard__glow { position: absolute; z-index: -1; top: -120px; right: -120px; width: 300px; height: 300px; }
.okcard__glow > i { position: absolute; inset: 0; border-radius: 50%; background: var(--iri); filter: blur(46px); opacity: 0.42; }
.okcard.is-live .okcard__glow { animation: spin 18s linear infinite; }
.okcard__ring { position: relative; display: grid; place-items: center; width: clamp(72px, 9vw, 96px); height: clamp(72px, 9vw, 96px); }
.okcard__rays { position: absolute; inset: 0; pointer-events: none; }
.okcard__rays i { position: absolute; top: 50%; left: 50%; width: 3px; height: 16px; margin: -8px 0 0 -1.5px; border-radius: 2px; background: linear-gradient(#fff, rgb(217 204 255 / 0%)); opacity: 0; }
.okcard__ring > i { position: absolute; inset: 0; }
.okcard__ring > i > u { position: absolute; inset: 0; border-radius: 50%; background: var(--iri); -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%); mask: radial-gradient(closest-side, transparent 84%, #000 85%); }
.okcard.is-live .okcard__ring > i > u { animation: spin 14s linear infinite; }
.okcard__ring b { position: absolute; inset: 0; border: 2px solid rgb(255 255 255 / 70%); border-radius: 50%; opacity: 0; }
.okcard__ring svg { position: relative; width: 44%; height: 44%; }
.okcard__eyebrow { color: #d9ccff; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.okcard h3 { margin-top: 6px; font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.055em; line-height: 0.95; }
.okcard__p { margin-top: 10px; color: #a9b2ac; font-size: 14.5px; }
.okcard__row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--stage-line); }
.okcard__item { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 190px; }
.okcard__item .sthumb { width: 34px; }
.okcard__txt { display: grid; min-width: 0; }
.okcard__txt b { font-size: 14px; font-weight: 500; }
.okcard__txt span { overflow: hidden; color: var(--stage-muted); font-family: var(--mono); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.okcard .btn--pearl { height: 40px; font-size: 14px; }
.composer { position: relative; z-index: 3; flex: none; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
.composer__box { max-width: 780px; margin: 0 auto; padding: 4px 6px 6px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow 160ms; }
.composer__box:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgb(90 44 255 / 12%); }
.composer textarea { display: block; width: 100%; min-height: 40px; max-height: 132px; padding: 9px 10px 6px; border: 0; background: transparent; color: var(--ink); font-size: 16px; line-height: 1.4; resize: none; outline: none; }
.composer textarea::placeholder { color: #8a928c; }
.composer__row { display: flex; align-items: center; gap: 6px; }
.tool { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px 0 9px; border: 0; border-radius: 9px; background: #f0f2ed; color: var(--ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 160ms; }
@media (hover: hover) and (pointer: fine) { .tool:hover { background: #e6e9e3; } }
.tool svg { width: 17px; height: 17px; flex: none; }
.send { display: grid; place-items: center; flex: none; width: 44px; height: 38px; margin-left: auto; padding: 0; border: 0; border-radius: 10px; background: var(--ink); color: #f4f5f1; cursor: pointer; }
.send svg { width: 18px; height: 18px; }
.keepopen { display: flex; align-items: center; gap: 10px; max-width: 780px; margin: 0 auto 8px; padding: 9px 12px; border-radius: 12px; background: #efecff; color: #2f1a99; font-size: 13px; line-height: 1.35; }
.keepopen b { display: block; font-weight: 600; }
.keepopen [data-keepopen-sum] { color: #5b4bb8; font-variant-numeric: tabular-nums; }
.keepopen__spin { flex: none; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--violet)); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%); mask: radial-gradient(closest-side, transparent 62%, #000 64%); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.files { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px var(--gut) 28px; }
.media { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 32px; border-left: 1px solid var(--line); background: #fafbf8; }
.fsec + .fsec { margin-top: 24px; }
.fsec__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--meta); font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.media__title { margin-bottom: 18px; font-size: 22px; letter-spacing: -0.035em; }
.cut { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; width: 100%; padding: 10px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-align: left; cursor: pointer; }
.cut__img { position: relative; overflow: hidden; width: 76px; aspect-ratio: 3 / 4; border-radius: 10px; background: #e4e7e1; }
.cut__img img { width: 100%; height: 100%; object-fit: cover; }
.cut__img .glyph { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgb(11 14 13 / 62%); color: #fff; }
.cut__img .glyph svg { width: 11px; height: 11px; margin-left: 2px; }
.cut__main { display: grid; align-content: center; gap: 6px; min-width: 0; }
.cut__name { overflow: hidden; font-size: 14.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cut__meta { color: var(--meta); font-family: var(--mono); font-size: 11.5px; }
.cut__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.olds { display: grid; margin-top: 8px; }
.old { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--meta); font-size: 13px; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .old:hover { background: rgb(17 20 18 / 4%); } }
.old .sthumb { width: 24px; border-radius: 5px; opacity: 0.6; }
.old > span:not(.sthumb) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) and (max-width: 1099px) { .files .grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: grid; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.tile__img { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 12px; background: #e4e7e1; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__img img { transform: scale(1.04); } }
.tile__img .glyph { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(11 14 13 / 62%); color: #fff; }
.tile__img .glyph svg { width: 9px; height: 9px; margin-left: 1px; }
.tile__img .bar { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgb(255 255 255 / 70%); }
.tile__name { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tile__meta { margin-top: -4px; color: var(--meta); font-family: var(--mono); font-size: 11px; }
.draftcard { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.draftcard p { font-size: 14px; line-height: 1.5; }
.draftcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--meta); font-family: var(--mono); font-size: 11px; }
.pchip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip-static { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; }
.pchip-static img { width: 12px; height: 24px; object-fit: contain; }
.filelist { display: grid; gap: 6px; }
.fileline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; }
.fileline svg { width: 16px; height: 16px; flex: none; color: var(--meta); }
.fileline span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileline .mono { flex: none; color: var(--meta); font-size: 11px; }
.hist { display: grid; margin: 0; padding: 0; list-style: none; }
.hist li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; }
.hist li::before { position: absolute; top: 14px; bottom: -2px; left: 7px; width: 2px; background: var(--line); content: ""; }
.hist li:last-child::before { display: none; }
.hist i { position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-strong); }
.hist li[data-s="review"] i { box-shadow: inset 0 0 0 2px #e2a52a; }
.hist li[data-s="changes"] i { box-shadow: inset 0 0 0 2px var(--coral); }
.hist li[data-s="approved"] i { background: var(--violet); box-shadow: none; }
.hist li[data-now] i::after { position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(90 44 255 / 25%); content: ""; }
.hist b { display: block; font-size: 13.5px; font-weight: 500; }
.hist span { color: var(--meta); font-size: 12.5px; }
.dropzone { position: absolute; z-index: 20; inset: 10px; display: grid; place-items: center; border: 2px dashed var(--violet); border-radius: 22px; background: #f3f1ff; pointer-events: none; }
.dropzone__in { display: grid; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.dropzone__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--surface); box-shadow: 0 16px 30px -16px rgb(90 44 255 / 60%); color: var(--violet); }
.dropzone__icon svg { width: 28px; height: 28px; }
.dropzone__h { font-size: 24px; font-weight: 500; letter-spacing: -0.035em; }
.dropzone__p { color: #5b4bb8; font-size: 14.5px; }
@media (max-width: 759px) {
  .side { overflow-y: auto; overscroll-behavior: contain; }
  .side__list { flex: none; overflow: visible; }
  .portal.is-scrolled[data-view="list"] .top .brand { opacity: 0; transform: translateY(-6px); }
  .portal.is-scrolled[data-view="list"] .top__title { opacity: 1; transform: translate(-50%, -50%); }
  .portal[data-empty] .side { display: none; }
  .portal[data-empty] .pane { transform: none !important; }
  .side, .pane { position: absolute; inset: 0; transition: transform 460ms var(--spring), opacity 300ms; }
  .portal[data-view="folder"] .side { transform: translateX(-28%); opacity: 0; }
  .portal[data-view="list"] .pane { transform: translateX(104%); }
  .portal[data-view="folder"] .top { display: none; }
  .portal[data-view="folder"] .fhead { padding-top: env(safe-area-inset-top, 0px); }
  .me-btn__name { display: none; }
  .dropzone { inset: 8px; }
}
@media (min-width: 760px) {
  .ws { grid-template-columns: 340px minmax(0, 1fr); }
  .side { border-right: 1px solid var(--line); }
  .fhead__back { display: none; }
  .fhead__row { padding: 18px 24px 8px; }
  .fhead__title h2 { font-size: clamp(26px, 2.3vw, 34px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.08; }
  .fhead__row { padding-top: 22px; }
  .fhead__bar { padding: 0 24px 14px; }
  .fhead__note { display: block; }
  .thread__in { padding: 22px 24px 26px; }
  .composer { padding-inline: 24px; }
  .portal[data-empty] .side { display: none; }
  .portal[data-empty] .ws { grid-template-columns: minmax(0, 1fr); }
  .dropzone { left: 350px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .fhead__note { display: none; }
}
@media (min-width: 1100px) {
  .ws { grid-template-columns: 340px minmax(0, 1fr) 360px; }
  .tabs { display: none; }
  .files--m { display: none !important; }
  .portal[data-empty] .ws { grid-template-columns: minmax(0, 1fr); }
  .portal[data-empty] .media { display: none; }
  .dropzone { left: 350px; }
}
@media (max-width: 1099px) { .media { display: none !important; } }
@media (max-width: 380px) { .tool { padding: 0 8px; font-size: 13px; } .tool svg { width: 16px; height: 16px; } }
@media (max-width: 359px) { .tool__l { display: none; } .tool { width: 44px; justify-content: center; padding: 0; } }
@media (max-width: 759px) {
  .tool { height: 44px; border-radius: 12px; }
  .send { width: 48px; height: 44px; border-radius: 12px; }
  .tabs__btn { height: 40px; }
  .fhead__act .btn { height: 44px; border-radius: 12px; }
  .btn--sm { height: 44px; border-radius: 12px; }
  .chipbtn { height: 40px; }
  .mini { height: 36px; }
  .composer textarea { min-height: 44px; }
}
.mini::before, .tc::before, .chipbtn::before { position: absolute; inset: -6px -4px; content: ""; }
.chipbtn { position: relative; }
.btn:active, .tool:active, .send:active, .frow:active, .pchip:active, .mini:active, .rowbtn:active, .addbtn:active, .chipbtn:active { transform: scale(0.97); transition-duration: 80ms; }
.sheet { position: fixed; inset: var(--rv-h) 0 0 0; z-index: 60; }
.sheet__scrim { position: absolute; inset: 0; background: rgb(11 14 13 / 44%); opacity: 0; transition: opacity 300ms; }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__panel {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 24px);
  border-radius: 26px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 90px -20px rgb(0 0 0 / 55%);
  transform: translateY(calc(100% + 30px));
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet.is-open .sheet__panel { transform: none; transition: transform 620ms var(--spring-sheet); }
.sheet:not(.is-open) .sheet__panel { transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.sheet__panel.is-dragging { transition: none !important; }
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-sheet: linear(0, 0.043, 0.144, 0.271, 0.402, 0.526, 0.636, 0.728, 0.804, 0.864, 0.909, 0.943, 0.967, 0.984, 0.995, 1.002, 1.005, 1.007, 1.008, 1.007, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1);
    --spring-pop: linear(0, 0.043, 0.151, 0.297, 0.458, 0.616, 0.76, 0.881, 0.977, 1.047, 1.093, 1.118, 1.126, 1.122, 1.109, 1.091, 1.07, 1.05, 1.032, 1.016, 1.004, 0.995, 0.989, 0.985, 0.984, 0.985, 0.986, 0.988, 0.991, 0.993, 0.996, 0.998, 0.999, 1.001, 1.001, 1.002, 1);
  }
}
.sheet__grab { display: grid; flex: none; place-items: center; height: 22px; cursor: grab; touch-action: none; }
.sheet__grab i { width: 40px; height: 5px; border-radius: 3px; background: #d4d9d1; }
.sheet__head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 12px 6px 22px; touch-action: none; }
.sheet__head h2 { font-size: 28px; letter-spacing: -0.045em; line-height: 1.05; }
.sheet__body { display: grid; gap: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 22px 22px; }
.sheet__lead { color: var(--text); font-size: 15px; }
.sheet__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.sheet__actions .btn { height: 50px; }
@media (min-width: 760px) {
  .sheet__panel { top: 50%; left: 50%; right: auto; bottom: auto; width: min(560px, calc(100vw - 48px)); max-height: calc(100% - 64px); opacity: 0; transform: translate(-50%, -46%) scale(0.94); transition: transform 300ms cubic-bezier(0.4, 0, 1, 1), opacity 200ms; }
  .sheet.is-open .sheet__panel { opacity: 1; transform: translate(-50%, -50%); transition: transform 640ms var(--spring-pop), opacity 220ms; }
  .sheet__grab { visibility: hidden; height: 14px; }
  .sheet--account .sheet__panel { top: 68px; left: auto; right: 16px; width: 420px; transform: translateY(-10px) scale(0.94); transform-origin: calc(100% - 24px) 0; }
  .sheet--account.is-open .sheet__panel { transform: none; }
  .sheet--account .sheet__scrim { background: rgb(11 14 13 / 16%); }
}
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { padding: 0; color: var(--text); font-size: 13.5px; font-weight: 500; }
.field__label span { margin-left: 6px; color: var(--meta); font-weight: 400; }
.field__input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 17px; transition: border-color 160ms, box-shadow 160ms; }
.field__input::placeholder { color: #9aa29c; }
.field__input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgb(90 44 255 / 12%); outline: none; }
.field__input[aria-invalid="true"] { border-color: var(--coral); }
.field__error { min-height: 0; color: #a3301a; font-size: 13.5px; }
.field__error:empty { display: none; }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 160ms, box-shadow 160ms; }
.pchip img { width: 14px; height: 30px; object-fit: contain; }
.pchip svg { width: 14px; height: 14px; margin-left: -2px; opacity: 0; transition: opacity 160ms; }
.pchip[aria-pressed="true"] { background: #f1edff; box-shadow: inset 0 0 0 1.5px var(--violet); }
.pchip[aria-pressed="true"] svg { opacity: 1; color: var(--violet); }
.sendlist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sendlist li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.sthumb { position: relative; display: block; flex: none; overflow: hidden; width: 30px; aspect-ratio: 3 / 4; border-radius: 6px; background: #e4e7e1; }
.sthumb img { width: 100%; height: 100%; object-fit: cover; }
.sendlist .doc { display: grid; place-items: center; width: 30px; aspect-ratio: 3 / 4; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--meta); }
.sendlist .doc svg { width: 14px; height: 14px; }
.sendlist .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sendlist .mono { flex: none; color: var(--meta); font-size: 11px; }
.acct { display: grid; gap: 10px; }
.acct__me, .acct__rep { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--bg); }
.acct__me b, .acct__rep b { display: block; font-size: 16px; font-weight: 500; }
.acct__me span.mono { color: var(--meta); font-size: 13px; user-select: text; }
.acct__rep span:not(.tav span) { color: var(--meta); font-size: 13px; }
.acct__rep .tav { width: 48px; height: 48px; }
.acct__rep .tav span { inset: 3px; font-size: 18px; }
.acct__h { margin-bottom: -8px; color: var(--meta); font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; }
.helplist--light { margin-top: 0; background: var(--bg); box-shadow: none; }
.helplist--light .helprow + .helprow { border-top-color: var(--line); }
.helplist--light .helprow__icon { background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--text); }
.helplist--light .helprow__txt > span { color: var(--meta); }
.helplist--light .chipbtn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); }
.helplist--light .chipbtn[data-done] { color: var(--violet); }
@media (max-width: 480px) {
  .helplist--light .helprow { grid-template-columns: 36px minmax(0, 1fr); }
  .helplist--light .helprow__acts { grid-column: 2; }
}
.acct__acts { display: grid; gap: 4px; margin-inline: -8px; }
.rowbtn { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .rowbtn:hover { background: rgb(17 20 18 / 5%); } }
.rowbtn svg { width: 20px; height: 20px; color: var(--text); }
.demo { position: fixed; inset: var(--rv-h) 0 0 0; z-index: 70; display: grid; place-items: center; background: rgb(11 14 13 / 0%); transition: background-color 400ms; }
.demo.is-open { background: rgb(11 14 13 / 78%); }
.demo__sheet {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--stage);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 320ms, transform 560ms var(--spring);
}
.demo.is-open .demo__sheet { opacity: 1; transform: none; }
.demo__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gut) calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--stage-text);
}
.demo__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: opacity 700ms var(--ease); }
.demo__h { font-size: clamp(30px, 7vw, 50px); letter-spacing: -0.05em; line-height: 1; transition: color 380ms var(--ease); }
.demo__skip { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--stage-2); box-shadow: inset 0 0 0 1px var(--stage-line); color: var(--stage-text); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 380ms var(--ease), box-shadow 380ms var(--ease), color 380ms var(--ease); }
.demo__frame { position: relative; flex: none; width: 100%; margin: 18px auto 0; overflow: hidden; border-radius: 20px; box-shadow: 0 0 0 1px rgb(255 255 255 / 7%); transition: opacity 700ms var(--ease), transform 900ms var(--spring), box-shadow 400ms var(--ease); }
.demo__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; isolation: isolate; display: flex; align-items: center; gap: 8px; padding: 22px 12px 12px; }
.demo__bar::before, .demo__bar::after { position: absolute; inset: 0; z-index: -1; content: ""; transition: opacity 400ms var(--ease); }
.demo__bar::before { background: linear-gradient(rgb(11 14 13 / 0%), rgb(11 14 13 / 72%) 58%); }
.demo__bar::after { background: linear-gradient(rgb(230 233 227 / 0%), rgb(230 233 227 / 94%) 58%); opacity: 0; }
.icon-btn { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; background: #171c1a; color: #eef1ec; cursor: pointer; transition: background-color 400ms var(--ease), border-color 400ms var(--ease), color 400ms var(--ease); }
.icon-btn svg { width: 16px; height: 16px; }
.demo__track { display: grid; flex: 1; gap: 2px; min-width: 0; padding: 0 2px 0 6px; }
.demo__now { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--stage-text); font-size: 13.5px; line-height: 1.25; transition: color 400ms var(--ease); }
.demo__now span { flex: none; color: var(--stage-muted); font-family: var(--mono); font-size: 11.5px; transition: color 400ms var(--ease); }
.demo__now b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.demo__steps { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.demo__steps li { flex: 1; min-width: 0; }
.demo__steps button { display: flex; align-items: center; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.demo__steps i { position: relative; display: block; width: 100%; height: 4px; overflow: hidden; border-radius: 2px; background: rgb(238 241 236 / 20%); transition: background-color 200ms; }
.demo__steps b { position: absolute; inset: 0; border-radius: inherit; background: var(--stage-text); transform: scaleX(0); transform-origin: 0 50%; transition: background-color 400ms var(--ease); }
.demo .sx-stage { transition: background-color 400ms var(--ease); }
.demo .sx-bg { transition: filter 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .demo__steps button:hover i { background: rgb(238 241 236 / 34%); } }
.demo__foot { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.demo__cta { position: relative; display: flex; }
.demo__cta .btn { z-index: 1; height: 50px; padding: 0 22px; transition: transform 220ms var(--ease), background-color 420ms var(--ease), color 420ms var(--ease); }
.demo__cta .btn::before { position: absolute; inset: 0; background: var(--foil); content: ""; opacity: 0; transition: opacity 480ms var(--ease); }
.demo__cta [data-demo-done], .demo__arrow { position: relative; z-index: 1; }
.demo__arrow { width: 18px; height: 18px; flex: none; }
.demo:not(.is-create) .demo__arrow { display: none; }
.demo__halo { position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: var(--foil); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; pointer-events: none; }
.demo.is-done .demo__halo { animation: halo 2.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s infinite backwards; }
.demo.is-done .demo__arrow { animation: nudge 2.4s var(--ease) 1.1s infinite; }
@keyframes halo { 0% { opacity: 0.95; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(var(--hx, 1.05), var(--hy, 1.48)); } }
@keyframes nudge { 0%, 28%, 100% { transform: none; } 11% { transform: translateX(5px); } }
@media (max-width: 759px) { .demo__cta { flex: 1; } .demo__cta .btn { width: 100%; } }
.demo__lights { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.demo__disc { position: absolute; left: var(--lx, 50%); top: var(--ly, 100%); width: var(--ld, 300vmax); height: var(--ld, 300vmax); margin: calc(var(--ld, 300vmax) / -2) 0 0 calc(var(--ld, 300vmax) / -2); border-radius: 50%; background: var(--bg); transform: scale(0.001) rotate(-80deg); transition: transform 560ms cubic-bezier(0.55, 0, 0.75, 0.25); }
.demo__disc::after { position: absolute; inset: 0; border-radius: 50%; background: var(--iri); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); content: ""; }
.demo.is-done .demo__disc { transform: scale(1) rotate(30deg); transition: transform 1000ms cubic-bezier(0.5, 0, 0.15, 1); }
.demo__cta::before { position: absolute; inset: 12px 6% -12px; z-index: 0; border-radius: 16px; background: var(--foil); filter: blur(16px); content: ""; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease); }
.demo.is-done .demo__cta::before { opacity: 0.55; transition: opacity 700ms var(--ease) 300ms; }
.demo.is-done .demo__cta .btn::before { opacity: 1; transition: opacity 220ms var(--ease) 230ms; }
.demo.is-done .demo__cta .btn { animation: cta-edge 800ms var(--ease) both; }
@keyframes cta-edge { 0%, 55% { box-shadow: 0 0 0 1px rgb(17 20 18 / 14%); } 100% { box-shadow: 0 0 0 1px rgb(17 20 18 / 0%); } }
.demo.is-done .demo__frame { box-shadow: 0 0 0 1px var(--line); transform: scale(0.985); transition: opacity 700ms var(--ease), transform 900ms var(--spring) 280ms, box-shadow 320ms var(--ease) 280ms; }
.demo.is-done .sx-stage { background-color: #e6e9e3; transition: background-color 320ms var(--ease) 280ms; }
.demo.is-done .sx-bg { filter: invert(1); transition: filter 320ms var(--ease) 280ms; }
.demo.is-done .demo__bar::before { opacity: 0; transition: opacity 320ms var(--ease) 280ms; }
.demo.is-done .demo__bar::after { opacity: 1; transition: opacity 320ms var(--ease) 280ms; }
.demo.is-done .icon-btn { border-color: var(--line-strong); background: var(--surface); color: var(--ink); transition: background-color 320ms var(--ease) 280ms, border-color 320ms var(--ease) 280ms, color 320ms var(--ease) 280ms; }
.demo.is-done .demo__now { color: var(--ink); transition: color 320ms var(--ease) 280ms; }
.demo.is-done .demo__now span { color: var(--muted); transition: color 320ms var(--ease) 280ms; }
.demo.is-done .demo__steps i { background: rgb(17 20 18 / 14%); transition: background-color 320ms var(--ease) 280ms; }
.demo.is-done .demo__steps b { background: var(--ink); transition: background-color 320ms var(--ease) 280ms; }
.demo.is-done .demo__h { color: var(--ink); transition: color 300ms var(--ease) 600ms; }
.demo.is-done .demo__skip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); transition: background-color 300ms var(--ease) 640ms, box-shadow 300ms var(--ease) 640ms, color 300ms var(--ease) 640ms; }

@media (min-width: 760px) {
  .demo__sheet { width: min(1180px, calc(100vw - 48px)); height: auto; max-height: calc(100% - 40px); border-radius: 28px; box-shadow: 0 40px 120px -30px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 6%); }
  .demo__panel { padding: 28px 32px 26px; }
  .demo__frame { width: min(100%, calc((100dvh - var(--rv-h) - 250px) * 1.6)); }
  .demo__bar { padding: 28px 16px 16px; }
}
.viewer { position: fixed; inset: var(--rv-h) 0 0 0; z-index: 75; background: rgb(8 10 9 / 0%); transition: background-color 300ms; }
.viewer.is-open { background: #080a09; }
.viewer__panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 14px; width: 100%; max-width: 620px; height: 100%; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gut) calc(16px + env(safe-area-inset-bottom, 0px)); color: var(--stage-text); opacity: 0; transform: scale(0.98); transition: opacity 260ms, transform 420ms var(--spring); }
.viewer.is-open .viewer__panel { opacity: 1; transform: none; }
.viewer__head { display: flex; align-items: center; gap: 12px; }
.viewer__title { flex: 1; min-width: 0; }
.viewer__title h2 { overflow: hidden; font-size: 17px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.viewer__title p { color: var(--stage-muted); font-size: 12px; }
.viewer__vers { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--stage-2); box-shadow: inset 0 0 0 1px var(--stage-line); }
.viewer__vers:empty { display: none; }
.viewer__vers button { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--stage-muted); font-family: var(--mono); font-size: 12px; cursor: pointer; }
.viewer__vers button[aria-pressed="true"] { background: var(--stage-text); color: var(--stage); }
.viewer__media { position: relative; display: grid; place-items: center; min-height: 0; }
.viewer__media img { width: auto; max-width: 100%; height: 100%; max-height: 100%; aspect-ratio: 3 / 4; border-radius: 18px; background: #151a18; object-fit: cover; }
.viewer__media video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; background: #000; object-fit: contain; }
.viewer__doc { width: 100%; max-width: 480px; padding: 22px; border-radius: 18px; background: var(--stage-2); box-shadow: inset 0 0 0 1px var(--stage-line); font-size: 18px; line-height: 1.5; }
.viewer__doc .btn { margin-top: 18px; }
.viewer__bar { display: flex; align-items: center; gap: 12px; }
.viewer__bar:empty { display: none; }
.viewer__bar .mono { flex: none; color: var(--stage-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.scrub { position: relative; flex: 1; height: 28px; cursor: pointer; }
.scrub__line, .scrub__fill { position: absolute; top: 12px; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgb(238 241 236 / 16%); }
.scrub__fill { background: linear-gradient(90deg, var(--violet), var(--magenta)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.scrub__head { position: absolute; top: 7px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; transform: translateX(var(--x, 0)); }
.scrub__mark { position: absolute; top: 4px; width: 20px; height: 20px; margin-left: -10px; padding: 0; border: 0; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px #2a1410; cursor: pointer; }
.viewer__note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--stage-2); box-shadow: inset 0 0 0 1px var(--stage-line); font-size: 14.5px; }
.viewer__note:empty { display: none; }
.viewer__note .tav span { background: var(--stage-2); color: #b9a8ff; }
.viewer__note b { display: block; color: var(--stage-muted); font-size: 12px; font-weight: 500; }
.iris { position: fixed; z-index: 90; top: 0; left: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.iris__ring { position: absolute; inset: 0; border-radius: 50%; background: var(--iri); }
.iris__core { position: absolute; inset: 7%; border-radius: 50%; background: var(--bg); }
.welcome { position: fixed; inset: var(--rv-h) 0 0 0; z-index: 91; display: grid; place-items: center; padding: var(--gut); color: var(--ink); pointer-events: none; text-align: center; }
.welcome span { font-size: clamp(44px, 9vw, 104px); font-weight: 500; letter-spacing: -0.058em; line-height: 1; }
.welcome b { font-weight: 500; background: linear-gradient(110deg, #5a2cff, #c21cc0 45%, #ff4a2b 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 95; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #f4f5f1; font-size: 14px; box-shadow: 0 16px 40px -16px rgb(0 0 0 / 50%); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity 200ms, transform 300ms var(--spring); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
  .demo__halo, .demo__arrow, .otp__cursor i, .typing i, .keepopen__spin, .pill__pulse, .phone__mirror[data-busy] .c--d, .okcard.is-live .okcard__glow, .okcard.is-live .okcard__ring > i > u, [data-state="uploading"] .bar i::after { animation: none !important; }
  .btn:active, .tool:active, .send:active, .frow:active, .pchip:active, .mini:active, .rowbtn:active, .addbtn:active, .chipbtn:active { transform: none; }
  .btn-auth[data-busy] .btn-auth__bar { animation: none; transform: scaleX(1); }
  .phone__mirror[data-busy] .c--d.is-on { opacity: 0.55; }
}