/* Generated by bin/ui-kit from docs/ui/simulators/web-app.html. Don't edit: land a design drop and rerun. */
.gps { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 2px; }
.gps.q > span + span { font-weight: 400; color: var(--text-2); }
.gps.q1 > span:first-child:not(:only-child) { color: var(--text-3); }
:root {
  --chrome-bg: #f6f8f9; --chrome-line: #d9dfe3; --chrome-url: #e7ecef; --chrome-fg: #42515b; --chrome-dot: #cfd6db;
  --font-ui: "Instrument Sans", "Instrument Sans Fallback", "Instrument Sans Fallback Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", "DM Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    --chrome-bg: #1b252d; --chrome-line: #2a3741; --chrome-url: #26323b; --chrome-fg: #b4c1ca; --chrome-dot: #3a4852;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --chrome-bg: #1b252d; --chrome-line: #2a3741; --chrome-url: #26323b; --chrome-fg: #b4c1ca; --chrome-dot: #3a4852;
  color-scheme: dark;
}
html, body { height: 100%; }
* { box-sizing: border-box; }
button { font: inherit; color: inherit; }
.frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }
.frame.win.bare { border-radius: 4px; clip-path: inset(0 round 4px); }
.frame.win.full { position: absolute; inset: 0; border-radius: 0; clip-path: none; box-shadow: none; transform: none; }
.wbar { height: 44px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--chrome-bg); border-bottom: 1px solid var(--chrome-line); color: var(--chrome-fg); }
.wbar .dots { display: flex; gap: 7px; margin-right: 10px; }
.wbar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--chrome-dot); }
.cbtn { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px; display: grid; place-items: center; color: var(--chrome-fg); cursor: pointer; }
.cbtn:hover:not([disabled]) { background: var(--chrome-url); }
.cbtn[disabled] { opacity: .35; cursor: default; }
.url { flex: 1; min-width: 0; max-width: 560px; margin: 0 auto; height: 30px; border-radius: 8px; background: var(--chrome-url); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--chrome-fg); padding: 0 12px; white-space: nowrap; overflow: hidden; }
.url span { overflow: hidden; text-overflow: ellipsis; }
.wbar .spacer { width: 66px; flex: none; }
.phone .pscreen { border-radius: 46px; overflow: hidden; clip-path: inset(0 round 46px); isolation: isolate; display: flex; flex-direction: column; background: var(--chrome-bg); position: relative; }
.pbar { height: 58px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px 6px; background: var(--chrome-bg); border-top: 1px solid var(--chrome-line); color: var(--chrome-fg); }
.pbar .url { height: 36px; border-radius: 12px; font-size: 14px; }
.phone .ptop { height: 14px; flex: none; background: var(--chrome-bg); }
.resize.resize-h { top: auto; left: 50%; width: 72px; height: 14px; margin: 0 0 0 -36px; cursor: ns-resize; }
.resize.resize-h::after { width: 28px; height: 2px; }
.row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.sbtn[disabled] { opacity: .4; cursor: default; }
.field { display: flex; flex-direction: column; gap: 6px; }
.tog[aria-pressed="true"] i::after { transform: translateX(14px); }
details.state summary { cursor: pointer; font-size: 13px; }
.web {
  --bg-page: #ebeef0; --bg-surface: #ffffff; --bg-surface-subtle: #f2f6f9; --bg-surface-strong: #c5cace;
  --bg-brand: #003a5d; --bg-brand-raised: #0d4a70; --bg-brand-subtle: #e5f6fc; --bg-brand-tint: #bde4f7;
  --bg-normal: #65c74f; --bg-normal-subtle: #ddf3d8; --bg-borderline: #ffca43; --bg-borderline-subtle: #fff3d6;
  --bg-high: #f65b51; --bg-high-subtle: #fddbd9; --bg-zone: #0000001a; --bg-error-subtle: #f4c1dc; --text: #003a5d;
  --text-2: #5f6063; --text-3: #939598; --text-strong: #231f20; --text-action: #0077c0; --text-link: #000000;
  --text-on-brand: #ffffff; --text-on-brand-2: #bde4f7; --text-error: #ce0058; --text-normal: #0f5307;
  --text-borderline: #6e4a00; --text-high: #8a1c00; --text-success: #43b02a; --on-normal: #0f5307;
  --on-borderline: #5a3c00; --on-high: #4a0d00; --ring-normal: #3a9a3a; --ring-borderline: #c98a00;
  --ring-high: #c9372d; --toast-ok: #357a2d; --toast-ok-ic: #c6ebc0; --toast-warn: #6e4a00; --toast-warn-ic: #ffd866;
  --toast-err: #b3261e; --toast-err-ic: #f9cdc6; --toast-info: #003a5d; --toast-info-ic: #6dcff6; --toast-note: #3a3637;
  --toast-note-ic: #d1d3d4; --toast-note-act: #000000; --tooltip: #231f20; --border: #c5cace; --border-subtle: #dde1e4;
  --border-action: #0077c0; --border-error: #ce0058; --border-selected: #00a3e0; --icon: #003a5d; --icon-2: #6d6e71;
  --icon-3: #939598; --brand-primary: #00a3e0; --brand-tertiary: #6dcff6; --btn-bg: #231f20; --btn-bg-hover: #3a3637;
  --btn-bg-pressed: #48494c; --btn-text: #ffffff; --btn-chip: #2e2a2b; --tint: #0000000d; --tint-2: #00000017;
  --scrim: #0a151d66; --selected: #6dcff6; --glass: #ffffffbf; --border-glass: #fffffff2; --hover: #f5f6f7;
  --hover-on-subtle: #eceef0; --black-4: #0000000a; --black-8: #00000014; --black-12: #0000001f; --black-40: #00000066;
  --white-8: #ffffff14; --white-20: #ffffff33; --white-50: #ffffff80; --ring-soft: 0 0 0 1px rgba(0, 30, 50, .09);
  --lift: 0 1px 2px rgba(0, 30, 50, .06), 0 2px 8px -3px rgba(0, 30, 50, .10);
  --lift-hover: 0 2px 4px rgba(0, 30, 50, .06), 0 14px 28px -12px rgba(0, 30, 50, .30);
  --lift-selected: 0 1px 2px rgba(0, 30, 50, .08); --lift-fill-hover: 0 14px 28px -12px rgba(0, 30, 50, .5);
  --shadow-pop: 0 0 0 1px #dde1e4, 0 20px 50px -16px rgba(0, 30, 50, .3);
  --shadow-float: 0 18px 40px -16px rgba(0, 30, 50, .45); --field-rest: 0 1px 2px rgba(0, 30, 50, .04);
  --glim: rgba(0, 163, 224, .9); --glim-fill: rgba(109, 207, 246, .95); --halo-action: rgba(0, 119, 192, .14);
  --halo-error: rgba(206, 0, 88, .12);
  --font-ui: "Instrument Sans", "Instrument Sans Fallback", "Instrument Sans Fallback Roboto", "Noto Sans Bengali", "Noto Naskh Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", "DM Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace; --r-card: 28px; --r-input: 12px;
  --r-sheet: 24px; --r-drawer: 28px; --r-auth: 32px; --gutter: 16px; --ctl-l: 56px; --ctl-m: 48px; --ctl-s: 40px;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-move: cubic-bezier(.4, 0, .2, 1);
  --ease-glimmer: cubic-bezier(.4, 0, .2, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-base-out: 160ms;
  --dur-slow: 320ms; --dur-slow-out: 240ms; --dur-page: 420ms; --dur-color: 150ms; --dur-press: 80ms; --dur-lift: 300ms;
  --dur-glimmer: 2400ms; --glim-edge: 1.5px; --dur-toast-in: 360ms; --dur-toast-out: 260ms; --enter-distance: 8px;
}
.web.dark {
  --bg-page: #0a151d; --bg-surface: #172a37; --bg-surface-subtle: #0a151d; --bg-surface-strong: #24394a;
  --bg-brand: #003a5d; --bg-brand-raised: #0d4a70; --bg-brand-subtle: #1d3547; --bg-brand-tint: #003a5d;
  --bg-normal: #65c74f; --bg-normal-subtle: #173a1c; --bg-borderline: #ffca43; --bg-borderline-subtle: #3b2f0a;
  --bg-high: #f65b51; --bg-high-subtle: #44191a; --bg-zone: #ffffff14; --bg-error-subtle: #7d003c; --text: #e5f6fc;
  --text-2: #adb1b5; --text-3: #939598; --text-strong: #ffffff; --text-action: #6dcff6; --text-link: #ffffff;
  --text-on-brand: #ffffff; --text-on-brand-2: #bde4f7; --text-error: #eb4799; --text-normal: #a5d49c;
  --text-borderline: #ffd866; --text-high: #f69c95; --text-success: #6fbf65; --on-normal: #0f5307;
  --on-borderline: #5a3c00; --on-high: #4a0d00; --ring-normal: #3a9a3a; --ring-borderline: #c98a00;
  --ring-high: #c9372d; --toast-ok: #357a2d; --toast-ok-ic: #c6ebc0; --toast-warn: #6e4a00; --toast-warn-ic: #ffd866;
  --toast-err: #b3261e; --toast-err-ic: #f9cdc6; --toast-info: #003a5d; --toast-info-ic: #6dcff6; --toast-note: #3a3637;
  --toast-note-ic: #d1d3d4; --toast-note-act: #000000; --tooltip: #231f20; --border: #55738a; --border-subtle: #24394a;
  --border-action: #25b6e9; --border-error: #eb4799; --border-selected: #25b6e9; --icon: #e5f6fc; --icon-2: #adb1b5;
  --icon-3: #939598; --brand-primary: #00a3e0; --brand-tertiary: #6dcff6; --btn-bg: #ffffff; --btn-bg-hover: #ebeef0;
  --btn-bg-pressed: #dde1e4; --btn-text: #231f20; --btn-chip: #ebeef0; --tint: #ffffff14; --tint-2: #ffffff1f;
  --scrim: #00000099; --selected: #00609c; --glass: #172a37bf; --border-glass: #ffffff14; --hover: #1d3342;
  --hover-on-subtle: #1d3342; --black-4: #0000000a; --black-8: #00000014; --black-12: #0000001f; --black-40: #00000066;
  --white-8: #ffffff14; --white-20: #ffffff33; --white-50: #ffffff80; --ring-soft: 0 0 0 1px rgba(255, 255, 255, .10);
  --lift: 0 1px 2px rgba(0, 0, 0, .35); --lift-hover: 0 14px 28px -12px rgba(0, 0, 0, .7); --lift-selected: none;
  --lift-fill-hover: 0 14px 28px -12px rgba(0, 0, 0, .8);
  --shadow-pop: 0 0 0 1px #24394a, 0 24px 60px -16px rgba(0, 0, 0, .6);
  --shadow-float: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -16px rgba(0, 0, 0, .7); --field-rest: none;
  --glim: rgba(109, 207, 246, .9); --glim-fill: rgba(0, 163, 224, .9); --halo-action: rgba(37, 182, 233, .22);
  --halo-error: rgba(235, 71, 153, .20); color-scheme: dark;
}
.web { container: web / inline-size; position: relative; overflow: hidden; flex: none; background: var(--bg-page); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.web :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; padding: 0; }
.web :where(ul, ol) { list-style: none; }
.web :where(button) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; }
.web :where(input, select) { font: inherit; color: inherit; }
.web a { color: var(--text-action); text-decoration: none; font-weight: 600; cursor: pointer; }
.web :focus { outline: none; }
.web :focus-visible, .web .st-focus { outline: 2px solid var(--border-action); outline-offset: 2px; }
.web .ic { display: block; flex: none; }
.vscroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.t-display { font-size: 30px; font-weight: 600; line-height: 1.08; letter-spacing: -0.8px; text-wrap: balance; }
.t-title { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.6px; text-wrap: balance; }
.t-section { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -0.5px; text-wrap: balance; }
.t-h2 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; text-wrap: balance; }
.t-h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.15px; }
.t-bodylg { font-size: 18px; line-height: 1.5; letter-spacing: -0.1px; }
.t-body { font-size: 16px; line-height: 1.5; }
.t-sm { font-size: 14px; line-height: 1.45; }
.t-label { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.t-over { font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.t-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 16px; }
.c2 { color: var(--text-2); }
.c3 { color: var(--text-3); }
.ca { color: var(--text-action); }
.cs { color: var(--text-strong); }
@container web (min-width: 600px) {
.t-display { font-size: 38px; letter-spacing: -1.1px; }
.t-title { font-size: 30px; letter-spacing: -0.8px; }
.t-section { font-size: 28px; letter-spacing: -0.7px; }
.t-h2 { font-size: 22px; letter-spacing: -0.3px; }
.web-root { --r-card: 32px; --r-auth: 40px; --gutter: 24px; }
}
@container web (min-width: 1024px) {
.t-display { font-size: 44px; letter-spacing: -1.3px; }
.web-root { --r-auth: 48px; --gutter: 40px; }
}
.web-root { position: absolute; inset: 0; }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 9999px; flex: none; white-space: nowrap; font-weight: 600; letter-spacing: -0.1px; }
.btn:active:not([disabled]), :where(.web) .btn.st-press:not([disabled]) { transform: scale(.985); }
.btn .lb { padding: 0 18px 0 22px; }
.btn.l { height: var(--ctl-l); padding: 4px; font-size: 17px; }
.btn.m { height: var(--ctl-m); padding: 4px; font-size: 16px; }
.btn.s { height: var(--ctl-s); padding: 0 16px; font-size: 15px; justify-content: center; }
.btn.s .lb { padding: 0; }
.btn .chip { width: 48px; height: 48px; border-radius: 50%; background: var(--btn-chip); display: grid; place-items: center; }
.btn.m .chip { width: 40px; height: 40px; }
.btn.fill { background: var(--btn-bg); color: var(--btn-text); }
:where(.web.hov) .btn.fill:hover:not([disabled]), :where(.web) .btn.fill.st-hover:not([disabled]) { background: var(--btn-bg-hover); }
.btn.fill:active:not([disabled]), :where(.web) .btn.fill.st-press:not([disabled]) { background: var(--btn-bg-pressed); }
.btn.fill.nochip { justify-content: center; padding: 0 24px; }
.btn.fill.nochip .lb { padding: 0; }
.btn.outline { background: var(--bg-surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); justify-content: center; padding: 0 22px; }
.btn.outline .lb { padding: 0; }
:where(.web.hov) .btn.outline:hover:not([disabled]), :where(.web) .btn.outline.st-hover:not([disabled]) { background: var(--hover); }
.btn.ghost { background: var(--tint); color: var(--text); justify-content: center; padding: 0 20px; }
.btn.ghost .lb { padding: 0; }
:where(.web.hov) .btn.ghost:hover:not([disabled]), :where(.web) .btn.ghost.st-hover:not([disabled]) { background: var(--tint-2); }
.btn.plain { color: var(--text-action); justify-content: center; padding: 0 14px; }
.btn.plain .lb { padding: 0; }
:where(.web.hov) .btn.plain:hover:not([disabled]), :where(.web) .btn.plain.st-hover:not([disabled]) { background: var(--tint); }
.btn.danger { color: var(--text-error); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.block { width: 100%; }
.btn .ic + .lb, .btn .lb + .ic { margin-left: 0; }
.icobtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--icon); flex: none; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
:where(.web.hov) .icobtn:hover, :where(.web) .icobtn.st-hover { background: var(--tint); }
.icobtn:active, :where(.web) .icobtn.st-press { transform: scale(.94); }
.icobtn.tint { background: var(--tint); }
:where(.web.hov) .icobtn.tint:hover, :where(.web) .icobtn.tint.st-hover { background: var(--tint-2); }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--bg-brand-tint); border-top-color: var(--text-action); animation: rot .8s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.navwait { position: absolute; inset: 0; z-index: 90; }
.navwait .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nw-page { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; animation: nwIn var(--dur-base) var(--ease) both; }
.nw-disc { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-pop); display: grid; place-items: center; }
.nw-ring { width: 32px; height: 32px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid rgba(0, 0, 0, .08); border-top-color: var(--brand-primary); animation: rot .8s linear infinite; }
.nw-msg { margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--bg-surface); box-shadow: var(--shadow-pop); font-size: 15px; line-height: 1.3; color: var(--text-2); white-space: nowrap; animation: nwIn var(--dur-base) var(--ease) both; }
.nw-under { position: absolute; transform: translate(-50%, -50%); }
.nbx { position: absolute; width: var(--nb-sz, 20px); height: var(--nb-sz, 20px); border-radius: 50%; box-sizing: border-box; border: 2.5px solid color-mix(in srgb, var(--nb-ink, currentColor) 28%, transparent); border-top-color: var(--nb-ink, currentColor); animation: rot .8s linear infinite; pointer-events: none; }
.nb-label { color: transparent !important; }
.nb-label > :not(.nbx) { visibility: hidden; }
@keyframes nwIn { from { opacity: 0; } }
:where(.web) [data-wait="overlay"][aria-busy="true"] { background-image: linear-gradient(var(--press), var(--press)); background-size: 100% 100%; }
.nb-wash { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--nb-wash, color-mix(in srgb, var(--bg-surface) 60%, transparent)); animation: nwIn var(--dur-base) var(--ease) both; }
.lrail { --nb-wash: color-mix(in srgb, var(--bg-page) 60%, transparent); }
.mbtn { --nb-wash: color-mix(in srgb, var(--hover) 60%, transparent); }
.nbx.nb-end { inset-inline-end: 14px; }
.subnav button { transition: padding var(--dur-fast) var(--ease); }
.subnav button[aria-busy="true"] { color: var(--text); background: var(--bg-surface); box-shadow: var(--ring-soft), var(--lift); }
.subnav:has(button[aria-busy="true"]) button[aria-current="true"]:not([aria-busy="true"]) { color: var(--text-2); background: none; box-shadow: none; }
@container web (max-width: 1023.98px) {
.subnav button[aria-busy="true"]:has(.nb-end) { padding-inline: 4px 28px; }
.subnav .nbx.nb-end { inset-inline-end: 6px; }
}
.nb-after { position: relative; display: inline-block; vertical-align: middle; width: 0; height: var(--nb-sz); margin-top: -2px; overflow: hidden; transition: width var(--dur-fast) ease-out; }
.nb-after.on { width: calc(var(--nb-sz) + 7px); }
.nb-after .nbx { inset-inline-start: 7px; top: 0; opacity: 0; transition: opacity var(--dur-fast) ease-out; }
.nb-after.on .nbx { opacity: 1; }
.tabs { isolation: isolate; }
.tabs.seg-go::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: var(--seg-x); width: var(--seg-w); border-radius: 9999px; background: var(--bg-surface); box-shadow: var(--ring-soft), var(--lift); pointer-events: none; transition: left var(--dur-base) var(--ease-move), width var(--dur-base) var(--ease-move); }
.tabs.seg-go > .tab { background: transparent; box-shadow: none; transition: color var(--dur-base) var(--ease-move); }
.tabs.seg-set > .tab { transition: none; }
.nw-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 95; height: 3px; background: var(--brand-primary); pointer-events: none; transform: scaleX(0); transform-origin: left; }
.nw-bar.on { transform: scaleX(.8); transition: transform 6s cubic-bezier(.1, .7, .2, 1); }
.nw-bar.done { transform: scaleX(1); opacity: 0; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease) var(--dur-fast); }
@media (prefers-reduced-motion: reduce) {
.nb-after, .nb-after .nbx, .subnav button { transition: none; }
.nw-bar, .nw-bar.on { transform: none; transition: none; }
.nb-wash { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.nw-ring, .nbx { animation: none; }
.nw-page, .nw-msg { animation: none; }
}
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inp { width: 100%; height: 56px; border-radius: var(--r-input); background: var(--bg-surface); border: 1.5px solid var(--border); padding: 0 16px; font-size: 17px; color: var(--text-strong); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.web.dark .inp { color: var(--text); }
.inp::placeholder { color: var(--text-3); }
:where(.web.hov) .inp:hover, :where(.web) .inp.st-hover { border-color: var(--icon-2); }
.inp:focus { border-color: var(--border-action); box-shadow: inset 0 0 0 1.5px var(--border-action); outline: none; }
.inp.err, .inp.err:focus { border-color: var(--border-error); box-shadow: inset 0 0 0 1.5px var(--border-error); }
.inp[readonly] { background: var(--bg-surface-subtle); color: var(--text-2); border-color: var(--border-subtle); box-shadow: none; }
.inp-wrap { position: relative; display: flex; align-items: center; }
.inp-wrap .inp { padding-right: 76px; }
.inp-wrap .suffix { position: absolute; right: 6px; }
.inp-wrap .unit { position: absolute; right: 14px; color: var(--text-2); font-size: 15px; pointer-events: none; }
.inp-wrap .lockic { position: absolute; right: 16px; color: var(--icon-3); }
.inp-wrap .inp[readonly] { padding-right: 44px; text-overflow: ellipsis; }
.inp.num { padding-right: 40px; }
.inp.center { text-align: center; padding: 0 8px; }
.errmsg { display: flex; align-items: flex-start; gap: 8px; color: var(--text-error); font-size: 15px; line-height: 1.4; animation: errIn var(--dur-base) var(--ease); }
.errmsg .ic { margin-top: 1px; }
@keyframes errIn { from { opacity: 0; transform: translateY(-6px); } }
.hint { font-size: 14px; color: var(--text-2); line-height: 1.45; }
.dob { display: grid; grid-template-columns: 72px 72px 96px; gap: 8px; }
.dob .fld { gap: 4px; }
.dob .t-sm { color: var(--text-2); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { height: 52px; border-radius: 9999px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text); }
:where(.web.hov) .opt:hover, :where(.web) .opt.st-hover { background: var(--hover); }
.opt:active, :where(.web) .opt.st-press { transform: scale(.985); }
.opt.sel { background: var(--selected); box-shadow: none; }
.opts.err .opt { box-shadow: inset 0 0 0 2px var(--border-error); }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--text-strong); }
.web.dark .check { color: var(--text); }
.check .box { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--border); background: var(--bg-surface); display: grid; place-items: center; color: #ffffff; flex: none; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); margin-top: -1px; }
.check.on .box { background: var(--brand-primary); border-color: var(--brand-primary); }
.check.err .box { border-color: var(--border-error); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check:has(input:focus-visible) .box, :where(.web) .check:has(input.st-focus) .box { outline: 2px solid var(--border-action); outline-offset: 2px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.meter i { height: 4px; border-radius: 2px; background: var(--border-subtle); transition: background-color var(--dur-base) var(--ease); }
.meter.s1 i:nth-child(-n+1) { background: var(--bg-high); }
.meter.s2 i:nth-child(-n+2) { background: var(--bg-borderline); }
.meter.s3 i:nth-child(-n+3), .meter.s4 i { background: var(--bg-normal); }
.codes { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.codes .cbox { height: 60px; border-radius: var(--r-input); background: var(--bg-surface); border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 26px; font-weight: 500; color: var(--text); letter-spacing: -0.5px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.codes .cbox.on { border-color: var(--border-action); box-shadow: inset 0 0 0 1.5px var(--border-action); }
.codes.err .cbox { border-color: var(--border-error); }
.codes input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; caret-color: transparent; cursor: text; }
.caret { display: inline-block; width: 2px; height: 28px; background: var(--border-action); animation: blink 1s steps(1) infinite; border-radius: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.unitseg { display: inline-flex; background: var(--tint); border-radius: 9999px; padding: 2px; }
.unitseg button { height: 28px; padding: 0 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.unitseg button[aria-pressed="true"] { background: var(--bg-surface); color: var(--text); box-shadow: var(--lift); }
.yn { display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--tint); border-radius: 9999px; padding: 3px; min-width: 132px; }
.yn button { height: 34px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: var(--text-2); padding: 0 14px; text-align: center; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.yn button[aria-pressed="true"] { background: var(--bg-surface); color: var(--text); box-shadow: var(--lift); }
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; }
.swap > [aria-hidden="true"] { visibility: hidden; }
.captcha { margin: -8px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-3); text-align: center; text-wrap: balance; }
.captcha a, .web .captcha a { color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; }
.srv { min-height: 100%; display: flex; flex-direction: column; background: var(--bg-page); }
.srv-top { padding: 20px var(--gutter); }
.srv-in { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding: 24px var(--gutter) 32px; }
.srv-ic { width: 96px; height: 96px; border-radius: 9999px; display: grid; place-items: center; background: var(--bg-brand-subtle); color: var(--text-action); }
.srv-in .hd { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.srv-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.srv-help { padding: 0 var(--gutter) 28px; text-align: center; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.srv-help .ref { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); }
@container web (max-width: 599px) {
.srv-acts { flex-direction: column-reverse; align-self: stretch; }
.srv-acts .btn { width: 100%; }
}
.web-root.kb-up .ov { bottom: var(--kb); }
.dkbd { position: absolute; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column; gap: 10px; padding: 10px 4px 14px; background: #d1d4d9; animation: kbUp var(--dur-base) var(--ease); }
.dkbd .kr { display: flex; gap: 6px; flex: 1; justify-content: center; }
.dkbd i { flex: 1; max-width: 64px; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 #8a8e94; }
.dkbd i.w { max-width: none; flex: 5; }
.dkbd i.f { background: #abb0b8; }
.dkbd .kx { flex: 1; max-width: 64px; display: grid; place-items: center; border-radius: 6px; background: #abb0b8; box-shadow: 0 1px 0 #8a8e94; color: #231f20; }
@keyframes kbUp { from { transform: translateY(100%); } }
.kb-compact .dr-hd { padding: 12px 20px 8px 24px; gap: 12px; }
.kb-compact .dr-ttl { align-items: center; }
.kb-compact .dr-ttl .dr-x { align-self: center; margin-top: 0; }
.kb-compact .dr-ttl .tx > .t-title { font-size: 20px; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-compact .dr-ttl .tx > p, .kb-compact .dr-ttl .gspot { display: none; }
.kb-compact .dr-body { padding-top: 16px; }
.kb-compact .dr-body .hp section > h3.t-over { display: none !important; }
.kb-compact .mini .box.chg { gap: 12px; }
.kb-compact .mini .box.chg > .chg-k, .kb-compact .mini .box.chg > h2 + p { display: none; }
.kb-compact .mini .box.chg > h2 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw { position: relative; width: 52px; height: 32px; border-radius: 9999px; background: var(--bg-surface-strong); flex: none; transition: background-color var(--dur-base) var(--ease-move), box-shadow var(--dur-fast) var(--ease); }
.sw::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: var(--lift); transition: transform var(--dur-base) var(--ease-move); }
.sw[aria-checked="true"] { background: var(--brand-primary); }
.sw[aria-checked="true"]::after { transform: translateX(20px); }
.sel-wrap { position: relative; }
.sel-wrap select { appearance: none; -webkit-appearance: none; height: 48px; padding: 0 44px 0 16px; border-radius: var(--r-input); border: 1.5px solid var(--border); background: var(--bg-surface); font-size: 16px; color: var(--text); cursor: pointer; }
.sel-wrap .ic { position: absolute; right: 14px; top: 50%; margin-top: -10px; pointer-events: none; color: var(--icon-2); }
@supports (appearance: base-select) {
.sel-wrap select, .sel-wrap select::picker(select) { appearance: base-select; }
.sel-wrap select { display: flex; align-items: center; }
.sel-wrap select::picker-icon { display: none; }
.sel-wrap select:open + .ic { transform: rotate(180deg); }
.sel-wrap .ic { transition: transform var(--dur-base) var(--ease); }
.sel-wrap select::picker(select) { margin-top: 6px; padding: 6px; border: 0; border-radius: 18px; background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-pop); min-width: anchor-size(width);
    opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), overlay var(--dur-fast) allow-discrete, display var(--dur-fast) allow-discrete; }
.sel-wrap select:open::picker(select) { opacity: 1; transform: none; }
@starting-style {
.sel-wrap select:open::picker(select) { opacity: 0; transform: translateY(-4px); }
}
.sel-wrap option { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 16px; color: var(--text); cursor: pointer; }
.sel-wrap option::checkmark { display: none; }
.sel-wrap option:hover { background: var(--bg-surface-subtle); }
.sel-wrap option:focus-visible { outline: 2px solid var(--border-selected); outline-offset: -2px; }
.sel-wrap option:checked { background: var(--selected); font-weight: 600; }
}
.itip { position: relative; display: inline-flex; vertical-align: middle; }
.ibtn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-action); margin: -4px 0; }
.ibtn span { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-brand-tint); display: grid; place-items: center; }
.ibtn[aria-expanded="true"] span { background: var(--brand-primary); color: #ffffff; }
.ibub { position: absolute; left: -10px; top: calc(100% + 10px); width: min(300px, 70cqw); max-width: calc(100cqw - 32px); white-space: normal; padding: 12px 14px; border-radius: 12px; background: var(--icon); color: var(--bg-surface); font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; z-index: 20; box-shadow: var(--shadow-float); animation: errIn var(--dur-fast) var(--ease); }
.ibub::before { content: ""; position: absolute; left: calc(16px + var(--ax, 0px)); top: -6px; width: 12px; height: 12px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.spot { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-brand-subtle); color: var(--text-action); position: relative; flex: none; }
.spot .bdg { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--text-success); color: #ffffff; box-shadow: 0 0 0 3px var(--bg-page); }
.spot .bdg.bad { background: var(--text-error); }
.spot .bdg.wait { background: var(--bg-page); color: var(--text-2); box-shadow: inset 0 0 0 2px var(--border), 0 0 0 3px var(--bg-page); }
.nv-empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.nv-empty .gspot { margin-bottom: 4px; }
.nv-empty p { max-width: 44ch; }
.nv-empty .btn { margin-top: 8px; }
.rp-stats .dd.none { color: var(--text-2); }
.gspot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-brand-subtle); color: var(--brand-primary); flex: none; }
.web.dark .gspot { color: var(--brand-tertiary); }
.auth { position: absolute; inset: 0; display: flex; flex-direction: column; }
.brandp { position: relative; overflow: hidden; background: var(--bg-brand); color: var(--text-on-brand); flex: none; }
.brandp .logo { color: #ffffff; }
.brandp .bp-in { position: relative; height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; }
.brandp .bp-copy, .brandp .bp-foot, .brandp .bp-media { display: none; }
.authmain { flex: 1; min-height: 0; position: relative; }
.authcol { min-height: 100%; display: flex; flex-direction: column; padding: 32px var(--gutter) 24px; }
.authform { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.authform.center { align-items: center; text-align: center; }
.authform .hd { display: flex; flex-direction: column; gap: 8px; }
.authform .stack { display: flex; flex-direction: column; gap: 16px; }
.authform .links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.authfoot { width: 100%; max-width: 400px; margin: auto auto 0; padding-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.authfoot .rowl { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-2); }
.authfoot .rowl a { font-weight: 500; color: var(--text-2); }
.passkey-wait { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; }
.passkey-wait .scrim { position: absolute; inset: 0; background: var(--scrim); animation: fadeIn var(--dur-base) var(--ease); }
.passkey-wait .card { position: relative; background: var(--bg-surface); border-radius: var(--r-sheet); padding: 28px; width: min(340px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; box-shadow: var(--shadow-pop); animation: sheetIn var(--dur-base) var(--ease); }
@container web (min-width: 600px) {
.authcol { padding-top: 64px; }
}
@container web (min-width: 1024px) {
.auth { flex-direction: row; }
.brandp { width: 44%; max-width: 640px; display: flex; flex-direction: column; }
.brandp .bp-in { height: auto; padding: 48px 56px 0; }
.brandp .bp-copy { display: flex; flex-direction: column; gap: 28px; position: relative; padding: 0 56px; margin-top: auto; }
.brandp .bp-foot { display: flex; position: relative; padding: 0 56px 48px; margin-top: auto; }
.brandp .bp-media { display: block; position: absolute; inset: 0; background: var(--bg-brand); }
.brandp .bp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.brandp .bp-media .veil { position: absolute; inset: 0; background: var(--bg-brand); opacity: .55; }
.authmain { flex: 1; }
.authcol { padding: 48px var(--gutter) 32px; justify-content: center; }
.authform { margin-top: auto; }
.authfoot { margin-top: auto; }
}
.tiles { display: flex; gap: 10px; }
.tiles span { width: 52px; height: 52px; border-radius: 12px; background: var(--bg-brand-raised); display: grid; place-items: center; color: var(--brand-tertiary); }
.findloc { display: inline-flex; align-items: center; gap: 10px; color: #ffffff !important; font-weight: 600; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-primary); }
.web.dark .logo { color: var(--brand-tertiary); }
.logo .s { width: 36px; height: 36px; }
.logo .w { width: 108px; height: 18px; }
.logo svg { width: 100%; height: 100%; display: block; }
.logo.lg .s { width: 44px; height: 44px; }
.logo.lg .w { width: 132px; height: 22px; }
.page { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) 48px; }
.apphdr { position: sticky; top: 0; z-index: 8; background: var(--bg-page); }
.apphdr .in { max-width: 1120px; margin: 0 auto; height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; gap: 4px; }
.apphdr .sp { flex: 1; }
.apphdr.shadow { box-shadow: 0 1px 0 var(--border-subtle); }
.hact { display: flex; align-items: center; gap: 4px; }
.hact .wide { display: none; }
.acct { height: 44px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 6px; color: var(--icon); transition: background-color var(--dur-fast) var(--ease); margin-left: 4px; }
:where(.web.hov) .acct:hover, :where(.web) .acct.st-hover, .acct[aria-expanded="true"] { background: var(--tint); }
.acct .em { display: none; font-size: 15px; font-weight: 500; color: var(--text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .chev { transition: transform var(--dur-base) var(--ease-move); }
.acct[aria-expanded="true"] .chev { transform: rotate(180deg); }
@container web (min-width: 600px) {
.apphdr .in { height: 76px; }
.hact .wide { display: inline-flex; }
.hact .narrow { display: none; }
.acct { padding: 0 14px 0 8px; box-shadow: inset 0 0 0 1.5px var(--border); background: var(--bg-surface); }
:where(.web.hov) .acct:hover, :where(.web) .acct.st-hover, .acct[aria-expanded="true"] { background: var(--hover); }
.acct .em { display: block; }
}
.menu-ov { position: absolute; inset: 0; z-index: 40; }
.menu { position: absolute; right: var(--gutter); top: 64px; width: 260px; background: var(--bg-surface); border-radius: 18px; padding: 8px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; transform-origin: top right; animation: popIn var(--dur-fast) var(--ease); }
@container web (min-width: 600px) {
.menu { top: 72px; }
}
@container web (min-width: 1168px) {
.menu { right: calc((100cqw - 1120px) / 2 + var(--gutter)); }
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.menu .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.menu .mi { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--text); }
:where(.web.hov) .menu .mi:hover, :where(.web) .menu .mi.st-hover { background: var(--tint); }
.menu .mi.on { background: var(--bg-brand-subtle); }
.menu .mi .ic { color: var(--icon-2); }
.menu .mi.on .ic { color: var(--text-action); }
.menu .mi.out { margin-top: 6px; border-top: 1px solid var(--border-subtle); border-radius: 0 0 12px 12px; }
.menu .mi.out .ic { color: var(--text-error); }
.appfoot { max-width: 1120px; margin: 0 auto; padding: 24px var(--gutter) 40px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.appfoot a { color: var(--text-2); font-weight: 500; }
.dash { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.card { background: var(--bg-surface); border-radius: var(--r-card); }
.sum { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
.sum .me { display: flex; align-items: center; gap: 16px; min-width: 0; }
.figure { width: 56px; height: 72px; border-radius: 12px; background: var(--bg-brand-subtle); color: var(--brand-primary); display: grid; place-items: center; flex: none; }
.web.dark .figure { color: var(--brand-tertiary); }
.stats { display: flex; gap: 20px; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.1; color: var(--text); }
.stat b small { font-size: 14px; font-weight: 500; color: var(--text-2); margin-left: 2px; letter-spacing: 0; }
.sum .edit { align-self: start; grid-column: 2; grid-row: 1; }
.sum .me-tx { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sum .who-sm { display: none; font-size: 14px; color: var(--text-2); }
.sum .who-sm { display: block; }
.sum .stat.st-a { display: none; }
.sum .stats { flex-wrap: nowrap; gap: 24px; }
.sum .meas { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.mbtn { display: flex; flex-direction: column; gap: 10px; text-align: left; border-radius: 12px; padding: 6px; margin: -6px; transition: background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .mbtn:hover, :where(.web) .mbtn.st-hover { background: var(--hover); }
.mbtn .mh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mbtn .mh .ab { font-weight: 700; font-size: 15px; color: var(--text); }
.mbtn .mh .ful { font-size: 14px; color: var(--text-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbtn .mh { flex-wrap: nowrap; }
@container web (min-width: 600px) {
.sum { padding: 20px 24px; }
.sum .meas { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@container web (min-width: 1024px) {
.sum { padding: 24px 28px; gap: 20px; }
.sum .meas { gap: 40px; padding-top: 20px; }
}
.tabsrow { display: flex; flex-direction: column; gap: 12px; }
.tabs { position: relative; display: inline-flex; align-self: flex-start; max-width: 100%; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--tint); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; height: 40px; padding: 0 18px; font-size: 15px; font-weight: 600; color: var(--text-2); white-space: nowrap; border-radius: 9999px; flex: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
:where(.web.hov) .tab:hover, :where(.web) .tab.st-hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); background: var(--bg-surface); box-shadow: var(--ring-soft), var(--lift); }
.filters { display: flex; gap: 8px; }
.fchip { height: 40px; padding: 0 14px; border-radius: 9999px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; flex: none; }
:where(.web.hov) .fchip:hover, :where(.web) .fchip.st-hover { background: var(--hover); }
.fchip[aria-pressed="true"] { background: var(--selected); box-shadow: none; }
.fchip[disabled] { opacity: .45; cursor: default; }
.fchip .n { color: var(--text-2); font-weight: 500; }
.fchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-normal); }
.fchip i.warn { background: var(--bg-borderline); }
.fchip i.high { background: var(--bg-high); }
@container web (min-width: 768px) {
.tabsrow { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.tabs { align-self: center; }
.filters { flex: none; }
}
.grp { padding: 20px 16px 8px; display: flex; flex-direction: column; }
.grp-h { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 16px; }
.grp-h .tx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grp-h p { max-width: 70ch; }
@container web (min-width: 600px) {
.grp { padding: 24px 24px 8px; }
}
@container web (min-width: 1024px) {
.grp { padding: 28px 28px 12px; }
.grp-h { padding-bottom: 20px; }
}
.rrow { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "nm ch" "bar bar" "st st"; gap: 10px 12px; padding: 16px 8px; margin: 0 -8px; width: calc(100% + 16px); border-radius: 12px; text-align: left; position: relative; transition: background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .rrow:hover, :where(.web) .rrow.st-hover { background: var(--hover); }
.rrow + .rrow::before { content: ""; position: absolute; left: 8px; right: 8px; top: -1px; height: 1px; background: var(--border-subtle); }
.rrow + .rrow { margin-top: 1px; }
:where(.web.hov) .rrow:hover::before, :where(.web) .rrow.st-hover::before, :where(.web.hov) .rrow:hover + .rrow::before, :where(.web) .rrow.st-hover + .rrow::before { opacity: 0; }
.rrow .nm { grid-area: nm; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rrow .nm b { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.15px; }
.rrow .nm span { font-size: 14px; color: var(--text-2); }
.rrow .bar { grid-area: bar; min-width: 0; }
.rrow .st { grid-area: st; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rrow .st .tg { font-size: 14px; color: var(--text-2); }
.rrow .st .dt { font-size: 14px; color: var(--text-2); }
.rrow .ch { grid-area: ch; align-self: center; color: var(--icon-3); }
@container web (min-width: 768px) {
.rrow { grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 190px 24px; grid-template-areas: "nm bar st ch"; align-items: center; gap: 24px; padding: 14px 12px; margin: 0 -12px; width: calc(100% + 24px); }
.rrow + .rrow::before { left: 12px; right: 12px; }
.rrow .st { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@container web (min-width: 1024px) {
.rrow { grid-template-columns: minmax(180px, 1fr) minmax(0, 2.1fr) 200px 24px; padding: 16px 16px; margin: 0 -16px; width: calc(100% + 32px); }
.rrow + .rrow::before { left: 16px; right: 16px; }
}
.rrow.all { }
.noresult { font-size: 15px; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.noresult i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.foot-note { font-size: 13px; color: var(--text-2); }
.grp-note { padding: 4px 0 12px; }
@container web (min-width: 768px) {
.rrow.nr .st, .rrow.nr .ch { margin-bottom: 22px; }
}
.risk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 9999px; font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.risk.ok { background: var(--bg-normal-subtle); color: var(--text-normal); }
.risk.warn { background: var(--bg-borderline-subtle); color: var(--text-borderline); }
.risk.high { background: var(--bg-high-subtle); color: var(--text-high); }
.risk.none { background: var(--tint); color: var(--text-2); }
.risk.lg { font-size: 16px; padding: 6px 16px 6px 10px; }
.vbar { display: flex; flex-direction: column; gap: 6px; }
.vbar .zs { display: flex; gap: 4px; height: 36px; }
.vbar .zs i { flex: 1; min-width: 0; position: relative; background: var(--bg-zone); border-radius: 6px; font-style: normal; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.vbar .zs i:first-child { border-radius: 18px 6px 6px 18px; }
.vbar .zs i:last-child { border-radius: 6px 18px 18px 6px; }
.vbar .zs i.on { background: var(--bg-normal); color: var(--on-normal); }
.vbar.warn .zs i.on { background: var(--bg-borderline); color: var(--on-borderline); }
.vbar.high .zs i.on { background: var(--bg-high); color: var(--on-high); }
.vbar .zs i b { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.vbar .zs i small { font-size: 12px; font-weight: 600; opacity: .85; }
.vbar .zc { position: relative; height: 16px; }
.vbar .zc span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; }
.vbar.sm .zs { height: 30px; }
.vbar.sm .zs i b { font-size: 15px; }
.vbar.sm .zs i small { display: none; }
.zbar { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.zbar .zs { display: flex; gap: 4px; height: 16px; }
.zbar .zs i { flex: 1; position: relative; background: var(--bg-zone); border-radius: 4px; }
.zbar .zs i:first-child { border-radius: 8px 4px 4px 8px; }
.zbar .zs i:last-child { border-radius: 4px 8px 8px 4px; }
.zbar .zs i.on { background: var(--bg-normal); }
.zbar.warn .zs i.on { background: var(--bg-borderline); }
.zbar.high .zs i.on { background: var(--bg-high); }
.zbar .zs i b { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--on-normal); }
.zbar.warn .zs i b { background: var(--on-borderline); }
.zbar.high .zs i b { background: var(--on-high); }
.zbar .zc { position: relative; height: 16px; }
.zbar .zc span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; }
.hero { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 20px; margin: 0 0 8px; border-radius: 16px; background: var(--bg-surface-subtle); text-align: left; transition: background-color var(--dur-fast) var(--ease); width: 100%; }
.web.dark .hero { background: var(--bg-page); }
:where(.web.hov) .hero:hover, :where(.web) .hero.st-hover { background: var(--hover-on-subtle); }
.hero .hm { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hero .hm .tt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero .val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hero .val b { font-size: 44px; font-weight: 500; letter-spacing: -1.4px; line-height: 1; color: var(--text); }
.hero .val span { font-size: 17px; color: var(--text-2); }
.hero .hs { display: flex; flex-direction: column; gap: 12px; }
.dots100 { display: grid; grid-template-columns: repeat(10, 8px); gap: 6px; }
.dots100 i { aspect-ratio: 1; border-radius: 50%; background: var(--border-subtle); }
.web.dark .dots100 i { background: var(--bg-surface-strong); }
.dots100.neutral i.on { background: var(--text); }
.dots100.ok i.on { background: var(--bg-normal); }
.dots100.warn i.on { background: var(--bg-borderline); }
.dots100.high i.on { background: var(--bg-high); }
@container web (min-width: 768px) {
.hero { grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; padding: 24px 28px; align-items: center; }
.dots100 { grid-template-columns: repeat(10, 10px); gap: 7px; }
}
.ov { position: absolute; inset: 0; z-index: 30; display: flex; align-items: stretch; justify-content: center; }
.ov .scrim { position: absolute; inset: 0; background: var(--scrim); animation: fadeIn var(--dur-base) var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
.dlg { position: relative; background: var(--bg-surface); width: 100%; display: flex; flex-direction: column; min-height: 0; animation: sheetUp var(--dur-base) var(--ease); }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes drawerIn { from { transform: translateX(100%); } }
@keyframes drawerOut { to { transform: translateX(100%); } }
@keyframes fadeOut { to { opacity: 0; } }
.ov.drawer { justify-content: flex-end; }
.ov.drawer .dlg { animation: drawerIn var(--dur-slow) var(--ease) both; }
.ov.drawer.closing .dlg { animation: drawerOut var(--dur-slow-out) var(--ease-in) both; }
.ov.drawer.closing .scrim { animation: fadeOut var(--dur-slow-out) var(--ease-in) both; pointer-events: none; }
.dlg .dhd { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.dlg .dbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dlg .dfoot { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); }
@container web (min-width: 768px) {
.ov.center { align-items: center; padding: 32px; }
.ov.center .dlg { max-width: 720px; max-height: 100%; border-radius: var(--r-sheet); box-shadow: var(--shadow-pop); animation: sheetIn var(--dur-base) var(--ease); overflow: hidden; }
.ov.drawer { justify-content: flex-end; }
.ov.drawer .dlg { max-width: calc(640px + var(--sbw, 0px)); box-shadow: var(--shadow-pop); border-radius: var(--r-drawer) 0 0 var(--r-drawer); overflow: hidden; }
.dlg .dfoot { padding: 16px 24px; }
}
.rnav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; font-size: 14px; }
.rnav .pg { color: var(--text-2); padding: 0 8px; white-space: nowrap; }
.rnav .nb { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: 10px; font-weight: 600; color: var(--text-action); max-width: 40%; min-width: 0; }
.rnav .nb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.web.hov) .rnav .nb:hover:not([disabled]), :where(.web) .rnav .nb.st-hover:not([disabled]) { background: var(--tint); }
.rnav .nb[disabled] { color: var(--text-3); cursor: default; }
.rd-top { padding: 20px 16px 0; display: flex; flex-direction: column; gap: 16px; }
.rd-title { display: flex; gap: 14px; align-items: center; }
.rd-title .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); }
.rd-in { padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 20px; }
@container web (min-width: 768px) {
.rd-top { padding: 24px 28px 0; }
.rd-in { padding: 24px 28px 32px; }
}
.latest { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; }
.latest .lv { display: flex; align-items: baseline; gap: 6px; }
.latest .lv b { font-size: 40px; font-weight: 500; letter-spacing: -1.2px; line-height: 1; color: var(--text); }
.latest .lv span { font-size: 16px; color: var(--text-2); }
.latest .meta { font-size: 14px; color: var(--text-2); }
.chart { width: 100%; }
.chart > svg { display: block; width: 100%; overflow: visible; }
.chart > svg text { font-family: var(--font-ui); }
.readings { border-radius: 12px; overflow: hidden; background: var(--bg-surface-subtle); }
.web.dark .readings { background: var(--bg-page); }
.readings li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; font-size: 15px; }
.readings li + li { border-top: 1px solid var(--border-subtle); }
.readings li b { font-weight: 600; color: var(--text); }
.showall { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; margin-left: -10px; border-radius: 10px; color: var(--text-action); font-weight: 600; font-size: 15px; }
:where(.web.hov) .showall:hover, :where(.web) .showall.st-hover { background: var(--tint); }
.showall .ic { transition: transform var(--dur-base) var(--ease-move); }
.showall[aria-expanded="true"] .ic { transform: rotate(180deg); }
.about { display: grid; grid-template-columns: 1fr; gap: 20px; }
.about .sumtx { display: flex; flex-direction: column; gap: 12px; }
.about .more { padding: 14px 16px; border-radius: 12px; background: var(--bg-surface-subtle); font-size: 15px; }
.web.dark .about .more { background: var(--bg-page); }
.ranges { border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.ranges ul { display: flex; flex-direction: column; gap: 10px; }
.ranges li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.ranges li .l { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ranges li .l i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-normal); }
.ranges li .l i.warn { background: var(--bg-borderline); }
.ranges li .l i.high { background: var(--bg-high); }
.ranges li .r { color: var(--text-2); text-align: right; white-space: nowrap; font-size: 14px; }
.ranges li .l { min-width: 0; }
.ranges .yl { border-radius: 12px; padding: 12px 14px; background: var(--bg-normal-subtle); display: flex; flex-direction: column; gap: 4px; }
.ranges .yl.warn { background: var(--bg-borderline-subtle); }
.ranges .yl.high { background: var(--bg-high-subtle); }
.ranges .yl b { font-size: 22px; font-weight: 600; color: var(--text); }
@container web (min-width: 768px) {
.about { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
}
.empty-trend { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 12px; border: 1.5px dashed var(--border); color: var(--text-2); font-size: 15px; }
.empty-trend.chart-h { justify-content: center; }
.hp { padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 28px; }
@container web (min-width: 768px) {
.hp { padding: 24px 28px 32px; }
}
.hp section { display: flex; flex-direction: column; gap: 16px; }
.hp .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp .bp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; max-width: 320px; }
.hp .bp .sl { padding-bottom: 16px; color: var(--text-3); font-size: 20px; }
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.hrow + .hrow { border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.hrow .lb { display: block; font-size: 16px; font-weight: 500; color: var(--text); }
.hrow .lb .nw { white-space: nowrap; }
.hrow .lb .itip { display: inline-flex; vertical-align: middle; margin: -4px 0 0 4px; }
.dfoot .note { flex: 1; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.ov.mini { align-items: center; padding: 24px 16px; }
.mini .box { position: relative; background: var(--bg-surface); border-radius: var(--r-sheet); padding: 24px; width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-pop); animation: sheetIn var(--dur-base) var(--ease); }
.mini .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mini .box.chg { max-width: 560px; gap: 14px; }
.mini .box.legal { gap: 6px; overflow: hidden; }
.legal .lg-body { display: flex; flex-direction: column; gap: 18px; margin: 14px -24px 0; padding: 0 24px 20px; overflow-y: auto; min-height: 0; flex: 1; border-bottom: 1px solid var(--border-subtle); }
@container web (min-width: 600px) {
.legal .lg-body { margin: 14px -32px 0; padding: 0 32px 24px; }
}
.legal .lg-body section { display: flex; flex-direction: column; gap: 4px; }
.legal .t-h3 { font-size: 16px; color: var(--text); }
@container web (min-width: 600px) {
.mini .box { padding: 32px; }
}
.mini .acts .alt { margin-right: auto; }
@container web (max-width: 599px) {
.mini .acts { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.mini .acts .btn { width: 100%; justify-content: center; }
.mini .acts .alt { margin-right: 0; }
.ov.mini:has(.box.chg) { align-items: flex-end; padding: 0; }
.mini .box.chg { max-width: none; max-height: 90%; border-radius: var(--r-sheet) var(--r-sheet) 0 0; animation: sheetUp var(--dur-slow) var(--ease); }
}
.btn.fill.dgr { background: var(--text-error); color: #ffffff; }
:where(.web.hov) .btn.fill.dgr:hover:not([disabled]) { background: color-mix(in srgb, var(--text-error) 86%, #000000); }
.web.dark .btn.fill.dgr { color: #231f20; }
.mini .box.chg .chg-k { margin-bottom: -8px; }
.mini .box.chg .fld { margin-top: 4px; }
.kio-no { white-space: nowrap; }
.sw:disabled { opacity: .45; cursor: not-allowed; }
.kio-note { display: flex; align-items: center; gap: 8px; margin: 0; }
.kio-note .ic { color: var(--icon-2); flex: none; }
.wtoast { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); top: 14px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 9999px; background: var(--bg-surface); color: var(--text-strong); box-shadow: var(--shadow-pop); font-size: 15px; font-weight: 500; }
.web.dark .wtoast { color: var(--text); }
.wtoast .ti { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-normal-subtle); color: var(--text-normal); flex: none; }
.back { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px 0 4px; margin-left: -4px; margin-bottom: 8px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--text-action); }
:where(.web.hov) .back:hover, :where(.web) .back.st-hover { background: var(--tint); }
.set { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.set-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.subnav { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 2px; padding: 4px; border-radius: 9999px; background: var(--tint); overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
@container web (min-width: 1024px) {
.set-hd { position: sticky; top: var(--set-top, 76px); z-index: 4; background: var(--bg-page); margin-top: -16px; padding: 16px 0 12px; }
.lmain .set-hd { --set-top: 0px; background: var(--bg-surface); margin-top: -48px; padding-top: 48px; }
.lmain .subnav { top: 114.5px; }
}
.subnav button { position: relative; height: 40px; padding: 0 16px; font-size: 15px; font-weight: 600; color: var(--text-2); white-space: nowrap; border-radius: 9999px; flex: none; }
:where(.web.hov) .subnav button:hover, :where(.web) .subnav button.st-hover { color: var(--text); }
.subnav button[aria-current="true"] { color: var(--text); background: var(--bg-surface); box-shadow: var(--ring-soft), var(--lift); }
@container web (min-width: 1024px) {
.set-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.subnav { display: flex; flex-direction: column; align-self: start; padding: 0; gap: 4px; background: none; border-radius: 0; position: sticky; top: 92px; }
.subnav button { height: 44px; border-radius: 12px; text-align: left; }
.subnav button[aria-current="true"] { background: var(--selected); box-shadow: none; }
:where(.web.hov) .subnav button:hover:not([aria-current="true"]), :where(.web) .subnav button.st-hover:not([aria-current="true"]) { background: var(--tint); }
.subnav button[aria-current="true"]::after { display: none; }
}
.sset { display: flex; flex-direction: column; gap: 28px; min-width: 0; max-width: 760px; }
.sset section { display: flex; flex-direction: column; gap: 12px; }
.sset .sh { display: flex; flex-direction: column; gap: 2px; }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l a" "v v"; gap: 4px 16px; padding: 16px; align-items: center; }
.srow + .srow { border-top: 1px solid var(--border-subtle); }
.sset .card > .srow:first-child { padding-top: 24px; }
.sset .card > .srow:last-child { padding-bottom: 24px; }
@container web (max-width: 599px) {
.sset .card > .srow:first-child { padding-top: 22px; }
.sset .card > .srow:last-child { padding-bottom: 22px; }
}
.srow .l { grid-area: l; font-weight: 600; font-size: 15px; color: var(--text); }
.srow .v { grid-area: v; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--text); }
.srow .v .hint { font-size: 14px; }
.whosees { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.whosees li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.whosees li + li { border-top: 1px solid var(--border-subtle); }
.whosees li:first-child { padding-top: 0; }
.whosees li:last-child { padding-bottom: 0; }
.whosees b { font-weight: 600; }
.whosees span { font-size: 14px; color: var(--text-2); }
.whosees .ws-progs { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
.whosees .ws-progs li { padding: 0; border: 0; gap: 0; }
.whosees .ws-progs b { font-weight: 500; font-size: 14px; }
.ws-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.srow .a { grid-area: a; justify-self: end; }
.srow .a { margin: -9px 0; }
.srow.pks .v > :last-child { margin-bottom: -8px; }
@container web (max-width: 599px) {
.srow:has(.a select, .a .rep-seg) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "v" "a"; }
.srow .a:has(select, .rep-seg) { margin: 8px 0 0; justify-self: stretch; }
.srow .a:has(.rep-seg) .rep-seg { display: flex; }
.srow .a:has(.rep-seg) .rep-seg > button { flex: 1; }
.srow .a:has(select) select { width: 100%; }
}
@container web (min-width: 600px) {
.srow { grid-template-columns: 170px minmax(0, 1fr) auto; grid-template-areas: "l v a"; padding: 18px 20px; align-items: start; }
.srow .a { align-self: start; }
}
.pk { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.srow.pks .a { display: none; }
.srow.pks .addpk { margin-left: -14px; }
@container web (min-width: 600px) {
.srow.pks .v { grid-column: 2 / -1; }
}
.pk span { display: inline-flex; align-items: center; gap: 8px; }
.pk .ic { color: var(--icon-2); }
.on-pill { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 9999px; background: var(--bg-brand-subtle); color: var(--text-action); font-size: 13px; font-weight: 600; }
.item { display: flex; gap: 16px; padding: 18px 20px; align-items: flex-start; }
.item + .item { border-top: 1px solid var(--border-subtle); }
.item .gspot { width: 44px; height: 44px; }
.item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@container web (max-width: 599px) {
.item { flex-wrap: wrap; padding: 16px; row-gap: 4px; }
.item .acts { flex: none; width: calc(100% - 60px); margin: 0 0 -8px 60px; justify-content: flex-start; }
.item .acts .btn.plain { margin-left: -14px; }
}
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-success); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rep-bar { position: sticky; top: 0; z-index: 8; background: var(--bg-page); box-shadow: 0 1px 0 var(--border-subtle); }
.rep-bar .in { max-width: 1120px; margin: 0 auto; min-height: 64px; padding: 8px var(--gutter); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rep-bar .sp { flex: 1; }
.rep-seg { display: inline-flex; background: var(--tint); border-radius: 9999px; padding: 3px; }
.rep-seg button { height: 34px; padding: 0 14px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.rep-seg button[aria-pressed="true"] { background: var(--bg-surface); color: var(--text); box-shadow: var(--lift); }
.rep-stage { padding: 24px var(--gutter) 48px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rep-cap { font-size: 14px; color: var(--text-2); text-align: center; }
.paper-wrap { position: relative; width: 100%; max-width: 794px; }
.paper { position: absolute; left: 0; top: 0; width: 794px; height: 1123px; transform-origin: 0 0; background: #ffffff; color: #231f20; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 20px 50px -20px rgba(0, 30, 50, .35); padding: 56px 64px 48px; display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; }
.paper .ph { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 2px solid #003a5d; }
.paper.fax .ph { border-color: #000; }
.paper .ph .logo { color: #00a3e0; }
.paper.fax .ph .logo { color: #000; }
.paper .pid { text-align: right; font-size: 12px; font-weight: 600; color: #003a5d; line-height: 1.5; }
.paper.fax .pid { color: #000; }
.paper .psum { display: flex; align-items: center; gap: 20px; padding: 12px 0; border-bottom: 1px solid #dde1e4; font-size: 12px; color: #003a5d; }
.paper.fax .psum { color: #000; border-color: #000; }
.paper .psum b { font-weight: 700; }
.paper .psum > :first-child { margin-right: -12px; }
.paper .pbox { display: inline-grid; place-items: center; min-width: 46px; height: 22px; padding: 0 6px; border-radius: 4px; font-weight: 700; margin: 0 4px; }
.paper .pvisit { margin: 20px 0 6px; font-size: 15px; font-weight: 700; color: #003a5d; }
.paper .pvisit .pwhere { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: #5f6063; }
.paper.fax .pvisit, .paper.fax .pvisit span { color: #000; }
.paper .pg-h { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 6px; border-bottom: 1px solid #dde1e4; font-size: 13px; font-weight: 700; color: #003a5d; }
.paper.fax .pg-h { color: #000; border-color: #000; }
.paper .pg-h .gi { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: #e5f6fc; color: #00a3e0; }
.paper.fax .pg-h .gi { background: #fff; color: #000; box-shadow: inset 0 0 0 1.5px #000; }
.paper .prow { display: grid; grid-template-columns: 170px 1fr 110px; gap: 16px; align-items: center; padding: 7px 0; }
.paper .prow + .prow { border-top: 1px solid #eef1f3; }
.paper.fax .prow + .prow { border-color: #fff; }
.paper .prow .n b { display: block; font-size: 12px; color: #003a5d; }
.paper.fax .prow .n b { color: #000; }
.paper .prow .n span { color: #6d6e71; font-size: 11px; }
.paper.fax .prow .n span { color: #000; }
.paper .pz { display: flex; gap: 4px; height: 22px; }
.paper .pz i { flex: 1; border-radius: 4px; background: #f0f2f4; font-style: normal; display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; font-weight: 700; font-size: 12px; position: relative; }
.paper .pz i.on.ok { background: #ddf3d8; color: #0f5307; box-shadow: inset 0 0 0 1.5px #65c74f; }
.paper .pz i.on.warn { background: #fff3d6; color: #6e4a00; box-shadow: inset 0 0 0 1.5px #ffca43; }
.paper .pz i.on.high { background: #fddbd9; color: #8a1c00; box-shadow: inset 0 0 0 1.5px #f65b51; }
.paper.fax .pz i { background: #fff; box-shadow: inset 0 0 0 1px #000; }
.paper.fax .pz i.on { background: #fff; color: #000; box-shadow: inset 0 0 0 2.5px #000; }
.paper .pz i small { font-size: 9px; font-weight: 600; margin-left: 2px; }
.paper .pcut { position: relative; height: 12px; margin-top: 2px; }
.paper .pcut span { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; color: #939598; }
.paper.fax .pcut span { color: #000; }
.paper .pst { font-size: 11px; line-height: 1.35; }
.paper .pst b { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.paper .pst b i { width: 7px; height: 7px; border-radius: 50%; }
.paper .pfl { flex: none; margin: 0 -2px 0 -2px; }
.paper .pz i.on.neu { background: #fff; color: #003a5d; box-shadow: inset 0 0 0 1.5px #003a5d; flex: none; width: calc((100% - 8px) / 3); }
.paper .pst b.neu { color: #003a5d; }
.paper .pst .pdt { display: block; color: #6d6e71; font-size: 10px; }
.paper .pnote { margin: 6px 0 14px; font-size: 11px; color: #000; }
.paper .pkey { display: inline-flex; align-items: center; gap: 6px; }
.paper .pst b.ok .pfl { color: #65c74f; }
.paper .pst b.warn .pfl { color: #e0a800; }
.paper .pst b.high .pfl { color: #f65b51; }
.paper.fax .pfl { color: #000 !important; }
.paper .pst b.ok { color: #0f5307; }
.paper .pst b.ok i { background: #65c74f; }
.paper .pst b.warn { color: #6e4a00; }
.paper .pst b.warn i { background: #ffca43; }
.paper .pst b.high { color: #8a1c00; }
.paper .pst b.high i { background: #f65b51; }
.paper.fax .pst b { color: #000 !important; }
.paper.fax .pst b i { display: none; }
.paper .pst span { color: #6d6e71; }
.paper.fax .pst span { color: #000; }
.paper .pfoot { margin-top: auto; display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid #dde1e4; font-size: 10px; color: #6d6e71; }
.paper.fax .pfoot { color: #000; border-color: #000; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.vbar .zs i b, .stat b, .hero .val b, .latest .lv b, .readings li b, .ranges .yl b, .chart text.pv, .paper .pz i, .paper .pbox, .codes .cbox {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vbar .zs i b { font-size: 15px; }
.vbar .zs i small, .stat b small, .paper .pz i small { font-family: var(--font-ui); letter-spacing: 0; }
.stat b { font-size: 22px; }
.hero .val b, .latest .lv b { letter-spacing: -0.06em; }
.auth.wel { --gi: 12px; display: block; background: var(--bg-surface-subtle); overflow: hidden; container: wel / size; }
.wel-bg { position: absolute; inset: 0; overflow: hidden; }
.wel-sym { position: absolute; color: var(--brand-tertiary); right: 0; top: 50%; translate: 0 -50%; width: min(100cqh, 100cqw - var(--gi)); aspect-ratio: 1; }
.wel-sym svg { width: 100%; height: 100%; display: block; }
.wel-glass { position: absolute; inset: var(--gi); border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); box-shadow: 4px 4px 70px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--border-glass); }
.wel .vscroll { z-index: 1; }
.wel-in { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "copy" "card" "foot"; gap: 24px; padding: 28px calc(var(--gutter) + 12px) 28px; }
.wel-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wel-copy { grid-area: copy; }
.wel-h { font-size: 35px; font-weight: 600; line-height: 1.07; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; }
.wel-h .accent { color: var(--brand-primary); }
.web.dark .wel-h .accent { color: var(--brand-tertiary); }
.wel-card { grid-area: card; width: 100%; background: var(--bg-surface); border-radius: 28px; padding: 24px 20px; box-shadow: 0 1px 2px rgba(0, 30, 50, .06), 0 24px 60px -24px rgba(0, 30, 50, .28); }
.web.dark .wel-card { box-shadow: 0 0 0 1px var(--border-subtle), 0 24px 60px -24px rgba(0, 0, 0, .6); }
.wel-card .authform { max-width: none; }
@container web (max-width: 599px) {
.wel-card { width: auto; margin: 0 -8px; padding: 28px 20px; align-self: start; }
.auth.wel { --gi: 8px; }
.wel-glass { border-radius: 24px; background: color-mix(in srgb, var(--bg-surface) 58%, transparent); -webkit-backdrop-filter: blur(48px); backdrop-filter: blur(48px); }
.wel .vscroll { inset: 8px; border-radius: 24px; }
.wel .wel-in { padding-left: var(--gutter); padding-right: var(--gutter); }
}
.web.touch { --sbw: 0px; }
.web.touch, .web.touch * { scrollbar-width: none; }
.web.touch ::-webkit-scrollbar { display: none; }
.web { --sb-thumb: rgb(0 0 0 / .3); --sb-thumb-hover: rgb(0 0 0 / .5); }
.web.dark { --sb-thumb: rgb(255 255 255 / .3); --sb-thumb-hover: rgb(255 255 255 / .5); }
@media (hover: hover) and (pointer: fine) {
@supports not selector(::-webkit-scrollbar) {
.web:not(.touch) :is(.legal .lg-body, .mini .box, .dlg .dbody, .dr-body, .appshell .lmain .vscroll, .wel .vscroll) { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}
}
:is(.legal .lg-body, .mini .box, .dlg .dbody, .dr-body, .appshell .lmain .vscroll, .wel .vscroll)::-webkit-scrollbar { width: 12px; }
:is(.legal .lg-body, .mini .box, .dlg .dbody, .dr-body, .appshell .lmain .vscroll, .wel .vscroll)::-webkit-scrollbar-button { display: none; }
:is(.legal .lg-body, .mini .box, .dlg .dbody, .dr-body, .appshell .lmain .vscroll, .wel .vscroll)::-webkit-scrollbar-track { background: transparent; }
.appshell .lmain .vscroll::-webkit-scrollbar-track, .wel .vscroll::-webkit-scrollbar-track { margin-block: 24px; }
:is(.legal .lg-body, .mini .box, .dlg .dbody, .dr-body, .appshell .lmain .vscroll, .wel .vscroll)::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 9999px; border: 3px solid transparent; background-clip: padding-box; }
:is(.legal .lg-body, .mini .box, .dlg .dbody, .dr-body, .appshell .lmain .vscroll, .wel .vscroll)::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
.legal .lg-body { margin-right: -16px; padding-right: 16px; }
@container web (min-width: 600px) {
.legal .lg-body { margin-right: -24px; padding-right: 24px; }
}
.wel-foot { grid-area: foot; display: flex; flex-direction: column; gap: 10px; align-self: end; }
.wel-foot .rowl { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.wel-foot .rowl a { font-weight: 500; color: var(--text-2); }
.wel .findloc { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 9999px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-subtle); color: var(--text) !important; font-size: 15px; font-weight: 600; }
.wel .findloc .ic { color: var(--text-action); }
:where(.web.hov) .wel .findloc:hover, :where(.web) .wel .findloc.st-hover { background: var(--hover); }
.wel .wel-top .findloc { display: none; }
@container web (min-width: 600px) {
.auth.wel { --gi: 16px; }
.wel-glass { border-radius: 40px; }
.wel-in { padding: 44px calc(var(--gutter) + 24px) 40px; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-rows: minmax(auto, 1fr) auto 4fr auto; grid-template-areas: "top top" "copy copy" ". card" "foot foot"; }
.wel .wel-top .findloc { display: inline-flex; }
.wel-h { font-size: 60px; }
.wel-card { padding: 32px; align-self: end; margin-bottom: 32px; }
.wel-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
}
@container web (min-width: 1024px) {
.auth.wel { --gi: 20px; }
.wel-glass { border-radius: 48px; }
.wel-in { max-width: 1200px; margin: 0 auto; }
.wel-in { grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto 1fr auto; grid-template-areas: "top top" "copy card" "foot card"; column-gap: 48px; row-gap: 32px; padding: 54px 60px 50px 74px; }
.wel-copy { align-self: center; }
.wel-h { font-size: clamp(48px, 5cqw, 72px); }
.wel-card { align-self: end; padding: 36px 36px 32px; border-radius: 36px; margin-bottom: 0; }
.wel-foot { align-self: end; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; }
}
@container wel (min-width: 1024px) and (min-height: 1000px) {
.wel-card { margin-bottom: 96px; }
}
.appshell { position: absolute; inset: 0; display: flex; background: var(--bg-page); }
.appshell { padding-inline: max(0px, calc((100% - 1600px) / 2)); }
.lrail { width: 288px; flex: none; display: flex; flex-direction: column; gap: 20px; padding: 20px 16px 16px 20px; overflow-y: auto; scrollbar-width: none; }
.lrail::-webkit-scrollbar { display: none; }
.lr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-left: 8px; }
.lr-logo { display: inline-flex; border-radius: 10px; }
.lr-logo:active { opacity: .64; }
.lr-col { color: var(--icon-2); }
:where(.web.hov) .lr-col:hover, :where(.web) .lr-col.st-hover { background: var(--tint); }
.rp-acct { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 8px; border-radius: 16px; text-align: left; transition: background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .rp-acct:hover, :where(.web) .rp-acct.st-hover, .rp-acct[aria-expanded="true"] { background: var(--tint); }
.rp-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface); color: var(--icon); flex: none; box-shadow: inset 0 0 0 1px var(--border-subtle); }
.rp-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rp-id .em { font-size: 16px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.1px; }
.rp-id .sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-acct .chev { color: var(--icon-2); transition: transform var(--dur-base) var(--ease-move); }
.rp-acct[aria-expanded="true"] .chev { transform: rotate(180deg); }
.rp-block { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px 4px; border-top: 1px solid var(--border-subtle); margin: 0 4px; }
.web.dark .rp-block { border-color: var(--bg-surface-strong); }
.rp-h { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.rp-edit { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--text-action); }
:where(.web.hov) .rp-edit:hover, :where(.web) .rp-edit.st-hover { background: var(--tint); }
.rp-n { font-size: 13px; color: var(--text-2); }
.rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 -16px; padding: 8px 16px; border-radius: 16px; text-align: left; width: calc(100% + 32px); transition: background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .rp-stats:hover, :where(.web) .rp-stats.st-hover { background: var(--tint); }
.rp-stats > span { display: flex; flex-direction: column; gap: 2px; }
.rp-stats .dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rp-stats .dd { margin: 0; font-family: var(--font-mono); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--text); }
.rp-stats .dd small { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 3px; letter-spacing: 0; }
.rp-ms { display: flex; flex-direction: column; gap: 4px; margin: 0 -16px; }
.rp-m { display: grid; grid-template-columns: 34px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 12px; text-align: left; transition: background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .rp-m:hover, :where(.web) .rp-m.st-hover { background: var(--tint); }
.rp-m .ab { font-size: 13px; font-weight: 700; color: var(--text); }
.rp-m > b { font-family: var(--font-mono); font-weight: 500; font-size: 16px; color: var(--text); letter-spacing: -0.02em; }
.rp-st { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rp-st i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--bg-normal); }
.rp-st.ok { color: var(--text-normal); }
.rp-st.warn { color: var(--text-borderline); }
.rp-st.high { color: var(--text-high); }
.rp-st.warn i { background: var(--bg-borderline); }
.rp-st.high i { background: var(--bg-high); }
.rp-care { display: flex; flex-direction: column; gap: 12px; }
.rp-care li { display: flex; gap: 12px; align-items: flex-start; }
.rp-care li .ic { color: var(--icon-2); margin-top: 2px; }
.rp-care li > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rp-care .l { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rp-care .v { font-size: 15px; font-weight: 500; color: var(--text); }
.rp-share { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding-bottom: 8px; }
.web .rp-share a { color: inherit; font-weight: 500; }
.web .dmeta a.sublink, .web .rp-share a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.web .dmeta a.sublink { color: inherit; font-weight: inherit; }
.rp-share .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-success); flex: none; }
.lr-nav { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--border-subtle); margin: 0 4px; }
.web.dark .lr-nav { border-color: var(--bg-surface-strong); }
.lr-i { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 14px; border-radius: 14px; font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.15px; text-align: left; width: 100%; transition: background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .lr-i:hover, :where(.web) .lr-i.st-hover { background: var(--tint); }
.lr-i.on { background: var(--selected); }
.lr-i .ic-w { position: relative; display: grid; place-items: center; color: var(--icon); flex: none; }
.lr-i .lb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-i .badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 9999px; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 500; background: var(--bg-high-subtle); color: var(--text-high); }
.lr-i .bdot { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg-high); box-shadow: 0 0 0 2px var(--bg-page); }
.lr-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; margin-left: 4px; margin-right: 4px; }
.lr-foot .lr-i { height: 44px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.lr-foot .lr-i .ic-w { color: var(--icon-2); }
.lr-foot .lr-i.out .ic-w { color: var(--text-error); }
.lrail.min { width: 84px; padding: 20px 12px 16px; align-items: center; }
.lrail.min .lr-top { flex-direction: column; padding-left: 0; gap: 12px; }
.lrail.min .rp-acct { width: auto; padding: 4px; justify-content: center; }
.lrail.min .rp-id, .lrail.min .rp-acct .chev, .lrail.min .lr-i .lb, .lrail.min .lr-i .badge { display: none; }
.lrail.min .lr-nav, .lrail.min .lr-foot { margin: 0; width: 100%; }
.lrail.min .lr-i { justify-content: center; padding: 0; }
.lmain { position: relative; flex: 1; min-width: 0; margin: 12px 12px 12px 0; background: var(--bg-surface); border-radius: 28px; overflow: hidden; container: web / inline-size; box-shadow: var(--lift); }
.web.dark .lmain { box-shadow: 0 0 0 1px var(--border-subtle); }
.lmain .page { padding-top: 40px; max-width: 1080px; }
.lmain .appfoot { max-width: 1080px; }
.lmain .card { background: transparent; box-shadow: inset 0 0 0 1px var(--border-subtle); }
.lmain .back { display: none; }
.lmain .rep-bar { background: var(--bg-surface); }
.lmain .rep-stage { background: var(--bg-page); border-radius: 20px; margin: 24px var(--gutter) 40px; }
.lmain .rep-bar .in { padding-top: 20px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.dash-head .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dash-head .pacts { display: flex; gap: 8px; }
.menu.from-rail { left: calc(20px + max(0px, (100cqw - 1600px) / 2)); right: auto; top: 150px; width: 268px; transform-origin: top left; }
.menu.from-rail.min { left: calc(88px + max(0px, (100cqw - 1600px) / 2)); top: 124px; }
.dr-hd { flex: none; display: flex; flex-direction: column; gap: 20px; padding: 24px 20px 12px 24px; background: var(--bg-surface); position: relative; z-index: 1; transition: box-shadow var(--dur-fast) var(--ease); }
.dr-hd.sc:not(.has-tabs) { box-shadow: 0 1px 0 var(--border-subtle); }
.dr-ttl { display: flex; align-items: center; gap: 16px; }
.dr-ttl .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dr-ttl .dr-x { align-self: flex-start; margin-top: -4px; }
.dr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: -12px; }
.dr-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 32px; }
.dr-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); }
.dr-foot.end { justify-content: flex-end; }
.dr-foot .rnav { justify-content: space-between; }
.dr-foot .rnav .nb { max-width: 42%; }
.dr-sec { display: flex; flex-direction: column; gap: 16px; }
.dr-body .hp { padding: 0; gap: 40px; }
.dr-body .hp section { gap: 20px; }
.dr-body .hrow { min-height: 60px; }
.hrow:first-child { margin-top: -10px; }
.dr-body .about { grid-template-columns: 1fr; gap: 32px; }
.dr-body .ranges { padding: 24px; }
.dr-body .latest { gap: 12px 16px; }
@container web (min-width: 768px) {
.dr-hd { padding: 40px 32px 16px 48px; gap: 28px; }
.dr-tabs { margin-bottom: -16px; margin-right: 16px; }
.dr-body { padding: 40px 48px 56px; gap: 40px; }
.dr-foot { padding: 20px 48px 28px; }
}
.rx-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: -16px; }
.rx-lede { font-size: 22px; line-height: 1.3; font-weight: 400; letter-spacing: -0.25px; color: var(--text); text-wrap: pretty; max-width: 40ch; }
.rx-lede.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rx-more { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 60ch; animation: errIn var(--dur-base) var(--ease); }
.rx-rm { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 16px; border-radius: 9999px; background: var(--tint); font-size: 14px; font-weight: 600; color: var(--text); transition: background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .rx-rm:hover, :where(.web) .rx-rm.st-hover { background: var(--tint-2); }
.rx-rm .ic { transition: transform var(--dur-base) var(--ease-move); }
.rx-rm[aria-expanded="true"] .ic { transform: rotate(180deg); }
.rx-sec { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.rx-h { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; color: var(--text); display: flex; align-items: baseline; gap: 10px; }
.rx-h .n { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--text-2); }
.rx-sec .latest .lv b { font-size: 48px; }
.rx-meta { font-size: 15px; color: var(--text-2); margin-top: -8px; }
.rx-sec .chart { margin-top: 8px; }
.rx-note { font-size: 14px; color: var(--text-2); }
.rx-chartnote { margin-top: -13px; }
.rx-list { display: flex; flex-direction: column; }
.rx-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px; align-items: center; gap: 16px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.rx-list li:last-child { border-bottom: 1px solid var(--border-subtle); }
.rx-list li .d { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); }
.rx-list li .tagl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-action); }
.rx-list li b { font-family: var(--font-mono); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--text); text-align: right; white-space: nowrap; }
.rx-list li b small { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 4px; letter-spacing: 0; }
.rx-list li > :last-child { justify-self: end; }
.rnav2 { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.rnav2 .pg { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rnav2 .nbtn { gap: 8px; max-width: 100%; min-width: 0; padding: 0 18px 0 14px; }
.rnav2 .nbtn:last-child { justify-self: end; padding: 0 14px 0 18px; }
.rnav2 .nbtn:first-child { justify-self: start; }
.rnav2 .nbtn .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rnav2 .nbtn[disabled] { visibility: hidden; }
@container web (max-width: 599px) {
.rx-lede { font-size: 19px; }
.rx-list li { grid-template-columns: minmax(0, 1fr) auto; }
.rx-list li > :last-child { grid-column: 1 / -1; justify-self: start; }
}
.chart { position: relative; }
.chart .pt { cursor: pointer; outline: none; }
.chart .pt:focus-visible circle:last-of-type, :where(.web) .chart .pt.st-focus circle:last-of-type { stroke: var(--border-action); stroke-width: 3; }
.chart text.pv { font-weight: 600; }
.rx-sec .chart { width: auto; margin: 16px -12px 0; }
@container web (min-width: 768px) {
.rx-sec .chart { margin: 20px -20px 0; }
.rx-sec .cnav { margin: 0 20px 10px; }
}
.rx-sec.rk-trend { padding-top: 35px; margin-bottom: -16px; }
.rx-sec.rk-trend .chart { margin-top: 0; }
.ctip { position: absolute; z-index: 3; transform: translate(-50%, -100%); width: 228px; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--bg-surface); box-shadow: var(--shadow-pop); pointer-events: none; animation: tipIn var(--dur-fast) var(--ease); }
.ctip.down { transform: translate(-50%, 0); }
.ctip.side.r { transform: translate(0, -50%); }
.ctip.side.l { transform: translate(-100%, -50%); }
.ctip .cs { display: flex; }
.cplot { position: relative; display: flex; }
.cscroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; }
.ctrack { position: relative; }
.csnap { position: absolute; top: 0; height: 1px; scroll-snap-align: start; pointer-events: none; }
.cscroll::-webkit-scrollbar { display: none; }
.cscroll > svg, .clab { display: block; overflow: visible; flex: none; }
.cscroll > svg text, .clab text { font-family: var(--font-ui); }
.cco { position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 2; }
.cco.tl { left: 0; top: 0; background: radial-gradient(circle at 100% 100%, transparent 19.5px, var(--bg-surface) 20px); }
.cco.tr { right: 0; top: 0; background: radial-gradient(circle at 0 100%, transparent 19.5px, var(--bg-surface) 20px); }
.cco.bl { left: 0; background: radial-gradient(circle at 100% 0, transparent 19.5px, var(--bg-surface) 20px); }
.cco.br { right: 0; background: radial-gradient(circle at 0 0, transparent 19.5px, var(--bg-surface) 20px); }
.cnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 12px 10px; }
.cnav-b { display: flex; gap: 6px; }
.cnav .icobtn { width: 36px; height: 36px; }
.cnav .icobtn[disabled] { opacity: .35; cursor: default; }
.ctip.cpanel { position: static; transform: none; width: auto; margin: 4px 0 0; border-radius: 20px; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cd cs" "cv cs" "cc cc" "ct ct"; align-items: center; column-gap: 12px; background: var(--bg-surface-subtle); box-shadow: none; pointer-events: auto; }
.web.dark .ctip.cpanel { background: var(--bg-page); }
.ctip.cpanel .cd { grid-area: cd; }
.ctip.cpanel .cv { grid-area: cv; }
.ctip.cpanel .cs { grid-area: cs; align-self: start; }
.ctip.cpanel .cc { grid-area: cc; }
.ctip.cpanel .ct { grid-area: ct; }
.ctip .cs .risk { flex: none; width: auto; font-size: 13px; padding: 3px 10px 3px 6px; }
@keyframes tipIn { from { opacity: 0; } }
.ctip .cd { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ctip .cv { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ctip .cv b { font-family: var(--font-mono); font-size: 24px; font-weight: 500; letter-spacing: -0.03em; color: var(--text); line-height: 1.1; }
.ctip .cv small { font-size: 13px; color: var(--text-2); margin-right: 4px; }
.ctip .cc { font-size: 14px; color: var(--text); }
.ctip .ct { font-size: 13px; color: var(--text-2); }
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), box-shadow var(--dur-lift) var(--ease), transform var(--dur-lift) var(--ease); }
.btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: var(--glim-edge);
  background: linear-gradient(105deg, transparent 38%, var(--glim) 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 130% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (prefers-reduced-motion: reduce) {
.btn::after { display: none; }
}
:where(.web.hov) .btn:hover:not([disabled])::after, :where(.web) .btn.st-hover:not([disabled])::after { background-position: -30% 0; transition: background-position var(--dur-glimmer) var(--ease-glimmer); }
.btn.fill { --glim: var(--glim-fill); }
.btn.plain::after, .btn.ghost::after { display: none; }
:where(.web.hov) .btn.fill:hover:not([disabled]), :where(.web) .btn.fill.st-hover:not([disabled]) { background: var(--btn-bg-hover); transform: translateY(-1px); box-shadow: var(--lift-fill-hover); }
.btn.fill .chip .ic { transition: transform var(--dur-fast) var(--ease); }
:where(.web.hov) .btn.fill:hover:not([disabled]) .chip.dir .ic, :where(.web) .btn.fill.st-hover:not([disabled]) .chip.dir .ic { transform: translateX(3px); }
:where(.web.hov) .btn.fill:hover:not([disabled]) .chip:not(.dir), :where(.web) .btn.fill.st-hover:not([disabled]) .chip:not(.dir) { box-shadow: inset 0 0 0 64px rgba(255,255,255,.08); }
.btn.outline { background: var(--bg-surface); box-shadow: var(--ring-soft), var(--lift); }
:where(.web.hov) .btn.outline:hover:not([disabled]), :where(.web) .btn.outline.st-hover:not([disabled]) { background: var(--bg-surface); transform: translateY(-1px); box-shadow: var(--ring-soft), var(--lift-hover); }
.web.dark .btn.outline { background: var(--bg-surface-strong); }
.web:where(.hov).dark .btn.outline:hover:not([disabled]), .web.dark .btn.outline.st-hover:not([disabled]) { background: var(--bg-surface-strong); }
:is(.btn.fill, .btn.outline, .btn.ghost, .btn.plain, .btn):active:not([disabled]) { transform: translateY(0) scale(.985); transition-duration: var(--dur-press); }
.opt, .fchip, .wel .findloc { box-shadow: var(--ring-soft), var(--lift); transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
:where(.web.hov) .opt:hover, :where(.web) .opt.st-hover, :where(.web.hov) .fchip:hover:not([disabled]):not([aria-pressed="true"]), :where(.web) .fchip.st-hover:not([disabled]):not([aria-pressed="true"]), :where(.web.hov) .wel .findloc:hover, :where(.web) .wel .findloc.st-hover { background: var(--bg-surface); transform: translateY(-1px); box-shadow: var(--ring-soft), var(--lift-hover); }
.opt.sel, .fchip[aria-pressed="true"] { box-shadow: var(--lift-selected); }
.web.dark .opt, .web.dark .fchip { background: var(--bg-surface-strong); }
.web.dark .opt.sel, .web.dark .fchip[aria-pressed="true"] { background: var(--selected); }
@container web (min-width: 600px) {
.acct { box-shadow: var(--ring-soft), var(--lift); transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), background-color var(--dur-fast) var(--ease); }
:where(.web.hov) .acct:hover, :where(.web) .acct.st-hover { background: var(--bg-surface); box-shadow: var(--ring-soft), var(--lift-hover); }
}
.inp { border-width: 1px; box-shadow: var(--field-rest); }
.inp:focus { border-color: var(--border-action); box-shadow: inset 0 0 0 1px var(--border-action); }
.inp.err, .inp.err:focus { border-color: var(--border-error); box-shadow: inset 0 0 0 1px var(--border-error); }
.grp-h { align-items: center; }
.hero { --rx: 8px; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 12px; margin: 0 calc(-1 * var(--rx)) 8px; width: calc(100% + 2 * var(--rx)); padding: 20px var(--rx) 20px 20px; }
.hero .hm { grid-column: 1; grid-row: 1; }
.hero .hs { grid-column: 1; grid-row: 2; }
.hero .ch { grid-column: 2; grid-row: 1; align-self: start; margin-top: 8px; color: var(--icon-3); }
@container web (min-width: 768px) {
.hero { --rx: 12px; grid-template-columns: minmax(0, 1fr) 200px 24px; column-gap: 32px; padding: 24px var(--rx) 24px 28px; }
.hero .hs { grid-column: 2; grid-row: 1; }
.hero .ch { grid-column: 3; align-self: center; margin-top: 0; }
}
@container web (min-width: 1024px) {
.hero { --rx: 16px; }
}
@container web (min-width: 600px) {
.wel .vscroll { inset: 16px; border-radius: 40px; }
.wel .wel-in { padding: 28px calc(var(--gutter) + 8px) 24px; }
}
@container web (min-width: 1024px) {
.wel .vscroll { inset: 20px; border-radius: 48px; }
.wel .wel-in { padding: 34px 40px 30px 54px; }
}
@container wel (min-width: 1000px) and (max-height: 820px) {
.wel .wel-in { padding-top: 26px; padding-bottom: 22px; row-gap: 24px; }
.wel .wel-card { padding-top: 30px; padding-bottom: 26px; }
}
.dr-body > .rx-intro:first-child { margin-top: -28px; }
@container web (min-width: 768px) {
.dr-body > .rx-intro:first-child { margin-top: -40px; }
}
.hp .pair2 { grid-template-columns: repeat(2, 120px); }
.hp .fld > .inp-wrap:has(.inp.num) { width: 120px; }
.hp .bp { grid-template-columns: 96px auto 96px; max-width: none; justify-content: start; }
.hp .fld-top { justify-content: flex-start; }
.lr-i .badge { background: var(--bg-brand); color: #ffffff; }
.lr-i .bdot { background: var(--bg-brand); }
.web.dark .lr-i .badge { background: var(--black-40); color: var(--text); }
.web.dark .lr-i.on .badge { background: var(--bg-brand); color: var(--text); }
.web.dark .lr-i .bdot { background: var(--text); }
.ffl { position: relative; display: flex; align-items: center; min-width: 0; }
.ffl > .inp, .ffl > .inp-wrap { flex: 1; min-width: 0; }
.ffl .inp { height: 60px; padding: 22px 16px 6px; box-shadow: none; }
.ffl .inp.num { padding-right: 12px; }
.ffl .inp::placeholder { color: transparent; }
.ffl-l { position: absolute; left: 17px; right: 16px; top: 50%; transform: translateY(-50%); font-size: 17px; line-height: 1.2; color: var(--text-3); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: 0 50%; transition: transform var(--dur-fast) var(--ease-move), color var(--dur-fast) var(--ease); }
.ffl:has(.inp:focus) .ffl-l, .ffl:has(.inp:not(:placeholder-shown)) .ffl-l, .ffl:has(.inp[readonly]) .ffl-l { transform: translateY(calc(-50% - 13.2px)) scale(.765); color: var(--text-2); }
:where(.web.hov) .ffl .inp:hover, :where(.web) .ffl .inp.st-hover { border-color: var(--icon-2); }
.ffl .inp:focus { border-color: var(--border-action); box-shadow: inset 0 0 0 1px var(--border-action); }
.ffl .inp.err, .ffl .inp.err:focus { border-color: var(--border-error); box-shadow: inset 0 0 0 1px var(--border-error); }
.ffl:has(.inp.err) .ffl-l { color: var(--text-error); }
.ffl .inp[readonly], :where(.web.hov) .ffl .inp[readonly]:hover, :where(.web) .ffl .inp[readonly].st-hover { border-color: var(--border-subtle); box-shadow: none; }
.ffl:has(.suffix) .ffl-l, .ffl:has(.lockic) .ffl-l, .ffl:has(.sfx-tip) .ffl-l { right: 76px; }
.ffl:has(.suffix) .inp { padding-right: 76px; }
.ffl:has(.lockic) .inp, .ffl:has(.sfx-tip) .inp { padding-right: 48px; }
.inp-wrap .sfx-tip { position: absolute; right: 12px; }
.inp-wrap .sfx-tip .ibub { left: auto; right: -6px; }
.inp-wrap .sfx-tip .ibub::before { left: auto; right: 14px; }
.fld-after { display: flex; justify-content: flex-end; margin-top: -2px; font-size: 15px; }
.dob .ffl .inp { padding-left: 14px; padding-right: 10px; }
.dob .ffl-l { left: 15px; right: 10px; }
.hp .pair2 { grid-template-columns: repeat(2, 132px); }
.hp .fld > .inp-wrap:has(.inp.num) { width: 132px; }
.hp .bp { grid-template-columns: 112px auto 112px; }
.hp .bp .sl { padding-bottom: 0; align-self: center; }
.rp-ms { gap: 6px; }
.rp-m.rp-mv { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px 8px; border-radius: 16px; }
.rp-mh { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rp-mv .risk { font-size: 13px; padding: 3px 10px 3px 6px; }
.lrail .vbar.sm .zs { height: 28px; }
.lrail .vbar .zs i b { font-size: 14px; }
.lrail .vbar .zc span { font-size: 11px; }
.web:not(.dark) .lrail .vbar .zs i:not(.on) { background: var(--black-8); }
.web.dark .lrail .vbar .zs i:not(.on) { background: var(--white-8); }
.vbar .zs i.on, .vbar .zs i.on > * { color: var(--on-normal) !important; }
.vbar.warn .zs i.on, .vbar.warn .zs i.on > * { color: var(--on-borderline) !important; }
.vbar.high .zs i.on, .vbar.high .zs i.on > * { color: var(--on-high) !important; }
.lr-i { --row-bg: var(--bg-page); }
:where(.web.hov) .lr-i:hover, :where(.web) .lr-i.st-hover { --row-bg: color-mix(in srgb, var(--bg-page) 95%, #000000); }
.web:where(.hov).dark .lr-i:hover, .web.dark .lr-i.st-hover { --row-bg: color-mix(in srgb, var(--bg-page) 93%, #ffffff); }
.lr-i.on, :where(.web.hov) .lr-i.on:hover, :where(.web) .lr-i.on.st-hover { --row-bg: var(--selected); }
.lr-i .bdot { box-shadow: 0 0 0 2px var(--row-bg); }
.fstack { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.lnk { color: var(--text-action); font-weight: 600; border-radius: 4px; }
.web .brandp .logo { color: #ffffff; }
.pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats dd { margin: 0; }
.rp-m .ab { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.rp-mh { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; }
.mbtn .mh { flex-wrap: wrap; row-gap: 6px; }
.mbtn .mh .ab { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; }
.web { --press: var(--black-8); -webkit-tap-highlight-color: transparent; }
.web.dark { --press: var(--white-8); }
:is(.rrow, .mbtn, .hero, .rp-m, .rp-stats, .rp-acct, .acct, .lr-i, .lr-col, .menu .mi, .fchip, .tab, .icobtn, .back, .showall, .opt, .findloc, .rnav .nb, .subnav button, .btn.outline, .btn.ghost, .btn.plain, .yn button, .unitseg button, .region button):active:not([disabled]), :where(.web) :is(.rrow, .mbtn, .hero, .rp-m, .rp-stats, .rp-acct, .acct, .lr-i, .lr-col, .menu .mi, .fchip, .tab, .icobtn, .back, .showall, .opt, .findloc, .rnav .nb, .subnav button, .btn.outline, .btn.ghost, .btn.plain, .yn button, .unitseg button, .region button).st-press:not([disabled]) { background-image: linear-gradient(var(--press), var(--press)); background-size: 100% 100%; }
.tab[disabled], .lr-i[disabled] { opacity: .4; cursor: default; }
.web.touch, .web.touch * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='15' fill='rgba(0,58,93,.16)' stroke='rgba(0,58,93,.5)' stroke-width='2'/%3E%3C/svg%3E") 20 20, auto !important; }
.ov.idle { z-index: 70; }
.idle .box { max-width: 440px; align-items: center; text-align: center; gap: 20px; padding: 32px 28px 20px; }
.idle-ring { position: relative; width: 132px; height: 132px; flex: none; }
.idle-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.idle-ring circle { fill: none; stroke-width: 6; }
.idle-ring .tr { stroke: var(--bg-zone); }
.idle-ring .fg { stroke: var(--border-action); stroke-linecap: round; }
.idle-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 32px; letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.idle-tx { display: flex; flex-direction: column; gap: 8px; }
.idle-acts { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }
.web .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (prefers-reduced-motion: reduce) {
.idle-ring .fg { transition: none; }
}
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--bg-brand-subtle); text-align: left; animation: errIn var(--dur-base) var(--ease); }
.notice .ni { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface); color: var(--icon); }
.notice .nt { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.notice .nt b { font-size: 16px; font-weight: 600; color: var(--text); }
.notice.del-pend { align-items: center; margin: 0 0 20px; background: var(--bg-high-subtle); }
.notice.del-pend .nt { flex: 1; min-width: 0; }
.notice.del-pend .na { flex: none; }
@container web (max-width: 599px) {
.notice.del-pend { flex-wrap: wrap; }
.notice.del-pend .na { width: 100%; }
}
.hage { --rx: 8px; display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 12px; row-gap: 20px; margin: 0 calc(-1 * var(--rx)) 8px; width: calc(100% + 2 * var(--rx)); padding: 20px var(--rx) 20px 20px; border-radius: 16px; background: var(--bg-surface-subtle); }
.web.dark .hage { background: var(--bg-page); }
.hage .hm { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hage .hs { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 12px; }
.hage .tt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hage .val { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hage .val b { font-family: var(--font-mono); font-size: 44px; font-weight: 500; letter-spacing: -0.06em; line-height: 1; color: var(--text); }
.hage .val span { font-size: 17px; color: var(--text-2); }
@container web (min-width: 768px) {
.hage { --rx: 12px; grid-template-columns: minmax(0, 1fr) 200px 24px; column-gap: 32px; padding: 24px var(--rx) 24px 28px; align-items: center; }
.hage .hs { grid-column: 2; grid-row: 1; }
}
@container web (min-width: 1024px) {
.hage { --rx: 16px; }
}
.agebar { display: flex; flex-direction: column; padding-top: 4px; }
.agebar .ab-tr { position: relative; height: 16px; border-radius: 8px; background: var(--bg-zone); }
.agebar .gap { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: var(--bg-normal); }
.agebar.warn .gap { background: var(--bg-borderline); }
.agebar.high .gap { background: var(--bg-high); }
.agebar .you { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--icon); }
.agebar .you em { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: 13px; font-weight: 600; line-height: 16px; color: var(--text); white-space: nowrap; }
.agebar .you em b { font-family: var(--font-mono); font-weight: 500; }
.hage .ttl { display: flex; align-items: center; gap: 6px; }
.agebar .zc span.end { transform: none; }
.agebar .zc span.end.r { transform: translateX(-100%); }
.agebar .zc span.yl { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); }
.agebar .zc span.yl b { font-family: var(--font-mono); font-weight: 500; }
.web a, .lnk { color: var(--text-strong); font-weight: 600; text-decoration: none; background-image: linear-gradient(var(--border), var(--border)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px; padding-bottom: 1px; transition: background-size var(--dur-slow) var(--ease); }
:where(.web.hov) a:hover, :where(.web.hov) .lnk:hover, :where(.web) a.st-hover, :where(.web) .lnk.st-hover { text-decoration: none; background-size: 100% 1.5px; }
.web a.btn { background-image: none; padding-bottom: 0; }
.web.dark a, .web.dark .lnk { color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) {
.web a, .lnk { transition: none; }
}
.auth-mark { display: block; width: 56px; height: 56px; color: var(--brand-primary); margin: 4px 0 4px; }
.auth-mark svg { width: 100%; height: 100%; display: block; }
.authform .auth-mark + .hd { margin-top: 4px; }
.web .hd:not(:has(p)) { margin-bottom: 4px; }
.passkey-wait .card { gap: 12px; padding: 36px 28px 24px; width: min(360px, calc(100% - 32px)); }
.pk-ring { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: 10px; }
.pk-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: rot 2.4s linear infinite; }
.pk-ring circle { fill: none; stroke-width: 4; }
.pk-ring .tr { stroke: var(--bg-zone); }
.pk-ring .arc { stroke: var(--border-action); stroke-linecap: round; stroke-dasharray: 84 256; }
.pk-ring .halo { position: absolute; inset: 14px; border-radius: 50%; background: var(--bg-brand-subtle); animation: pkBreath 2.4s ease-in-out infinite; }
.pk-ring .pk-ic { position: relative; color: var(--icon); }
@keyframes pkBreath { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.pk-ring > svg, .pk-ring .halo { animation: none; }
}
.agebar .hdisc { position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: -0.04em; background: var(--bg-normal); color: var(--on-normal); box-shadow: 0 0 0 3px var(--bg-surface-subtle); }
.web.dark .agebar .hdisc { box-shadow: 0 0 0 3px var(--bg-page); }
.agebar.warn .hdisc { background: var(--bg-borderline); color: var(--on-borderline); }
.agebar.high .hdisc { background: var(--bg-high); color: var(--on-high); }
.agebar .zc { position: relative; height: 16px; margin-top: 12px; }
.agebar .zc span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-3); white-space: nowrap; }
.hc { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 28px 28px 32px; margin: 0 0 12px; border-radius: 32px; background: var(--bg-surface-subtle); text-align: left; transition: background-color var(--dur-fast) var(--ease); }
.web.dark .hc { background: var(--bg-page); }
:where(.web.hov) .hc:hover, :where(.web) .hc.st-hover { background: var(--hover-on-subtle); }
.hc:active { background-image: linear-gradient(var(--press), var(--press)); }
.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.hc-ch { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--black-4); color: var(--icon); flex: none; transition: background-color var(--dur-fast) var(--ease); }
.web.dark .hc-ch { background: var(--white-8); }
:where(.web.hov) .hc:hover .hc-ch, :where(.web) .hc.st-hover .hc-ch { background: var(--black-8); }
:where(.web.hov).dark .hc:hover .hc-ch { background: var(--white-20); }
.hc-t { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; color: var(--text); }
.hc-v { display: flex; align-items: flex-end; gap: 16px; margin: 2px 0 10px; }
.hc-v b { font-family: var(--font-ui); font-size: 84px; font-weight: 400; line-height: .82; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; color: var(--text); flex: none; }
.hc-v span { font-size: 18px; line-height: 1.35; color: var(--text-2); max-width: 22ch; padding-bottom: 2px; }
.hc .zbar { padding-top: 6px; }
.hc .zbar .zs { height: 20px; }
.hc .zbar .zs i { border-radius: 6px; }
.hc .zbar .zs i:first-child { border-radius: 10px 6px 6px 10px; }
.hc .zbar .zs i:last-child { border-radius: 6px 10px 10px 6px; }
.hc .zbar .zs i b { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.hc .zbar .zc { display: none; }
.agebar.mini { padding-top: 6px; }
.agebar.mini .ab-tr { height: 20px; border-radius: 10px; }
.agebar.mini .gap { border-radius: 10px; }
.agebar .hpip { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--on-normal); }
.agebar.warn .hpip { background: var(--on-borderline); }
.agebar.high .hpip { background: var(--on-high); }
.agebar.mini .you { top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; }
.hcrow { container: hcrow / inline-size; display: block; margin: 0 -8px 12px; width: calc(100% + 16px); }
@container web (min-width: 768px) {
.hcrow { margin: 0 -12px 12px; width: calc(100% + 24px); }
}
@container web (min-width: 1024px) {
.hcrow { margin: 0 -16px 12px; width: calc(100% + 32px); }
}
.hcrow .hc:last-child { margin-bottom: 0; }
@container hcrow (min-width: 760px) {
.hcrow-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hcrow-in .hc { margin: 0; }
}
@container web (min-width: 1024px) {
.hc { padding: 32px 32px 36px; }
}
@container web (max-width: 599px) {
.hc { padding: 24px 22px 28px; border-radius: 28px; }
.hc-v b { font-size: 72px; }
.hc-v span { font-size: 15px; }
.hc-t { font-size: 20px; }
}
.rk-big { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.dots100.lg { grid-template-columns: repeat(10, 12px); gap: 7px; flex: none; }
.rk-tx { display: flex; flex-direction: column; gap: 10px; min-width: 220px; flex: 1; }
.rk-p { font-size: 17px; line-height: 1.45; color: var(--text); max-width: 46ch; }
.rk-adv { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 20px; background: var(--bg-brand-subtle); color: var(--text); font-size: 16px; line-height: 1.45; }
.rk-adv .ic { flex: none; color: var(--icon); margin-top: 1px; }
.rk-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 18px 16px 20px; border-radius: 20px; background: var(--bg-surface); box-shadow: var(--ring-soft), var(--lift); text-align: left; color: var(--icon); transition: box-shadow var(--dur-lift) var(--ease), transform var(--dur-lift) var(--ease); }
.web.dark .rk-link { background: var(--bg-surface-strong); }
:where(.web.hov) .rk-link:hover, :where(.web) .rk-link.st-hover { transform: translateY(-1px); box-shadow: var(--ring-soft), var(--lift-hover); }
.rk-link:active { background-image: linear-gradient(var(--press), var(--press)); transform: scale(.985); }
.rk-link > span { display: flex; flex-direction: column; gap: 2px; }
.rk-link b { font-size: 16px; font-weight: 600; color: var(--text); }
.rk-link > span > span { font-size: 14px; color: var(--text-2); }
.ha-bar { padding: 4px 0 6px; }
.rx-list .rfn { display: flex; flex-direction: column; gap: 2px; }
.rx-list .rfn small { font-size: 13px; color: var(--text-2); }
.rx-list.rf li b small, .rx-list.hal li b small { font-family: var(--font-ui); }
.wel-card .authform { align-items: stretch; text-align: left; }
.wel-card .auth-mark { margin: 4px 0 0; }
.wel-card .authform > .auth-mark, .wel-card .fstack > .auth-mark { align-self: flex-start; }
.wel-card .authform .hd { gap: 8px; }
.wel-card .authform > .stack { width: 100%; }
@property --busy-a {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.wel-card, .mini .box { position: relative; }
.wel-card.busy::before, .mini .box.busy::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--busy-a), transparent 0deg 200deg, var(--glim) 290deg, var(--brand-primary) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: busyRing 3.2s linear infinite; }
.wel-card.busy::after, .mini .box.busy::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, var(--white-50) 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 130% 0;
  animation: busySheen 1.6s var(--ease-move) infinite; }
.web.dark .wel-card.busy::after, .web.dark .mini .box.busy::after { background-image: linear-gradient(105deg, transparent 38%, var(--white-8) 50%, transparent 62%); }
@keyframes busyRing { to { --busy-a: 360deg; } }
@keyframes busySheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.wel-card.busy .authform > :not(.fstack), .wel-card.busy .fstack > :not(.btn), .mini .box.busy > :not(.acts) { opacity: .5; transition: opacity var(--dur-base) var(--ease); }
.wel-card.busy, .mini .box.busy { pointer-events: none; }
.wel-card.busy .btn.fill::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
.wel-card.busy::before, .mini .box.busy::before { animation: none; background: var(--brand-primary); }
.wel-card.busy::after, .mini .box.busy::after { display: none; }
}
.wel-card.busy::after, .mini .box.busy::after { display: none; }
.wel-card.busy .authform > :not(.fstack), .wel-card.busy .fstack > :not(.btn), .mini .box.busy > :not(.acts) { opacity: 1; }
.wel-card.busy .authform, .mini .box.busy > :not(.busy-ov) { filter: blur(8px); opacity: .55; transition: filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.busy-ov { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; border-radius: inherit; background: color-mix(in srgb, var(--bg-surface) 62%, transparent); animation: fadeIn var(--dur-base) var(--ease); }
.bspin { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--black-8); border-top-color: var(--text); animation: rot 1.6s cubic-bezier(.5, .15, .5, .85) infinite; }
.web.dark .bspin { border-color: var(--white-20); border-top-color: var(--text); }
.bmsg { font-size: 15px; font-weight: 600; letter-spacing: -0.1px; color: var(--text-strong); }
.web.dark .bmsg { color: var(--text); }
.busy-x { position: absolute; z-index: 5; left: 50%; top: calc(50% + 44px); transform: translateX(-50%); pointer-events: auto; height: 36px; padding: 0 16px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--black-4); }
.web.dark .busy-x { background: var(--white-8); }
:where(.web.hov) .busy-x:hover { background: var(--black-8); color: var(--text-strong); }
@media (prefers-reduced-motion: reduce) {
.bspin { animation-duration: 2.4s; }
.wel-card.busy .authform, .mini .box.busy > :not(.busy-ov) { transition: none; }
}
.busy-ov { gap: 20px; }
.bspin { width: 132px; height: 132px; border-width: 1px; border-color: var(--black-8); border-top-color: var(--text); }
.web.dark .bspin { border-width: 1px; border-color: var(--white-20); border-top-color: var(--text); }
.busy-x { top: calc(50% + 112px); }
.mini .box .bspin { width: 72px; height: 72px; }
.hp .hw2 { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-start; }
.hp .hw2 > .fld { flex: none; }
.hp .pair2 { grid-template-columns: repeat(2, 92px); }
.hp .fld > .inp-wrap:has(.inp.num) { width: 92px; }
.hp .ffl .inp.num { padding-left: 14px; padding-right: 10px; }
.hp .inp-wrap.ffl:has(.inp.num) .ffl-l { left: 15px; right: 10px; }
@container web (max-width: 599px) {
.hp .two { grid-template-columns: 1fr; }
}
.bmsg { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.4px; text-align: center; max-width: 85%; text-wrap: balance; }
.mini .box .bmsg { font-size: 20px; }
.busy-x { top: calc(50% + 120px); }
.wtoast, .web.dark .wtoast { color: #ffffff; box-shadow: var(--shadow-float); font-weight: 600; }
.wtoast.ok { background: var(--toast-ok); }
.wtoast.ok .ti { color: var(--toast-ok-ic); }
.wtoast.warn { background: var(--toast-warn); }
.wtoast.warn .ti { color: var(--toast-warn-ic); }
.wtoast.err { background: var(--toast-err); }
.wtoast.err .ti { color: var(--toast-err-ic); }
.wtoast.info { background: var(--toast-info); }
.wtoast.info .ti { color: var(--toast-info-ic); }
.wtoast .ti { background: var(--white-20); }
.web.dark .wtoast { box-shadow: var(--shadow-float); }
.wel-card { border-radius: var(--r-auth); }
.hp .hpg { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 36px; align-items: stretch; }
.hp-fig { position: relative; min-height: 0; color: var(--brand-primary); }
.web.dark .hp-fig { color: var(--brand-tertiary); }
.hp-fig svg { position: absolute; inset: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); display: block; overflow: visible; }
.hp-fig svg * { vector-effect: non-scaling-stroke; stroke-width: 3px; }
.hp-rows { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px; gap: 10px; align-items: center; }
.hp-row.full > * { grid-column: 1 / -1; }
.hp-glab { display: none; margin: 4px 0 -6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
@container web (max-width: 599px) {
.hp-glab { display: block; }
.hp-row .u-w { display: none; }
}
.hp-row.one > .inp-wrap { grid-column: 1 / 3; }
.hp-row .unitseg { justify-self: start; }
.hp-row .unit { color: var(--text-2); font-size: 15px; padding-left: 6px; }
.hp-row .ffl .inp.num { padding-left: 16px; padding-right: 12px; }
.hp-row .inp-wrap.ffl:has(.inp.num) .ffl-l { left: 17px; right: 10px; }
.hp section > .hint { margin: 0; }
@container web (max-width: 599px) {
.hp .hpg { grid-template-columns: minmax(0, 1fr); }
.hp-fig { display: none; }
}
@container web (max-width: 1023px) {
.vbar:not(.sm) .zs i small { display: none; }
}
.tg .tg-c { display: none; }
@container web (max-width: 1023px) {
.tg .tg-w { display: none; }
.tg .tg-c { display: inline; }
}
@container web (max-width: 767px) {
.web .rrow .st { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.web .rrow .st > .risk { grid-column: 1; grid-row: 1; justify-self: start; }
.web .rrow .st > .dt { grid-column: 2; grid-row: 1; }
.web .rrow .st > .tg { grid-column: 1 / -1; grid-row: 2; }
}
.dob-hint { margin-top: -4px; }
.web .dob { max-width: 300px; }
.web .opt.sel, .web .opt.sel:hover { background: var(--selected); box-shadow: var(--lift-selected); transform: none; }
.web .opt.sel { transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.faq details.srow { display: block; padding-top: 22px; padding-bottom: 22px; }
.faq-g { margin: 32px 0 -4px; color: var(--text-2); }
.faq-g:first-of-type { margin-top: 8px; }
.faq details.srow:first-child { padding-top: 30px; }
.faq details.srow:last-child { padding-bottom: 30px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq details.srow summary.l { padding-top: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--icon-2); transition: transform .2s; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { margin-top: 8px; color: var(--text); max-width: 62ch; }
.qbar { display: flex; flex-direction: column; gap: 6px; }
.qbar .zs { display: flex; align-items: center; gap: 4px; height: 36px; }
.qbar .zs i { flex: 1; position: relative; height: 16px; background: var(--bg-zone); border-radius: 4px; }
.qbar .zs i:first-child { border-radius: 8px 4px 4px 8px; }
.qbar .zs i:last-child { border-radius: 4px 8px 8px 4px; }
.qbar.ok .zs i.on { background: var(--bg-normal); }
.qbar.high .zs i.on { background: var(--bg-high); }
.qbar .zs i b { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; }
.qbar.ok .zs i b { background: var(--on-normal); }
.qbar.high .zs i b { background: var(--on-high); }
.qbar .qc { display: flex; gap: 4px; height: 16px; }
.qbar .qc span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-3); }
.qbar .qc span.cur { color: var(--text-2); }
.rrow.q .bar .noresult { display: none; }
.vbar.q .zs i b { font-family: var(--font-ui); font-size: 22px; font-weight: 700; line-height: 1; }
.rx-pos { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--bg-high-subtle); color: var(--text); font-size: 15px; line-height: 1.45; margin-top: 12px; }
.rx-pos .ic { color: var(--text-high); margin-top: 1px; }
.risk .cflag { flex: none; }
.tag .tflag { margin: -1px 4px -1px 0; vertical-align: -1px; }
.fsep { width: 1px; height: 24px; background: var(--border); align-self: center; flex: none; margin: 0 4px; }
.fchip svg.fl { flex: none; }
.fchip i.both { background: linear-gradient(90deg, var(--bg-borderline) 50%, var(--bg-high) 50%); }
.nrisk { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "tx ch" "dots dots"; gap: 16px 12px; padding: 20px 16px; margin: 0 -8px 8px; width: calc(100% + 16px); border-radius: 20px; background: var(--bg-surface-subtle); text-align: left; transition: background-color var(--dur-fast) var(--ease); }
.web.dark .nrisk { background: var(--bg-page); }
:where(.web.hov) .nrisk:hover { background: var(--hover-on-subtle); }
.nrisk .tx { grid-area: tx; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nrisk .t { font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.15px; }
.nrisk .big, .nr-latest .lv { display: flex; align-items: baseline; gap: 10px; }
.nrisk .big b, .nr-latest .lv b { font-family: var(--font-mono); font-size: 40px; font-weight: 500; letter-spacing: -0.04em; color: var(--text); line-height: 1; }
.web .lv.disp b { font-family: var(--font-ui); font-weight: 400; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; }
.nrisk .big b { font-family: var(--font-ui); font-weight: 400; letter-spacing: -0.035em; font-variant-numeric: tabular-nums lining-nums; }
.nrisk .big span, .nr-latest .lv span { font-size: 16px; color: var(--text-2); }
.nrisk .big span { text-wrap: balance; max-width: 34ch; font-size: 15px; line-height: 1.3; }
.nrisk .big { align-items: center; }
.nrisk .big b { font-size: 48px; line-height: 0.78; }
.nr-latest .lv b { font-size: 48px; }
.mline { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; }
.xsv { margin-left: 6px; }
.rx-meta .xsv, .nrisk .ln .xsv { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.nrisk .ln { font-size: 14px; color: var(--text-2); line-height: 1.45; max-width: 52ch; }
.nrisk .ndots { grid-area: dots; }
.nrisk .ch { grid-area: ch; align-self: start; color: var(--icon-3); }
.ndots { display: grid; grid-template-columns: repeat(10, 7px); gap: 5px; align-self: center; }
.ndots i { width: 7px; height: 7px; border-radius: 50%; background: var(--black-12); }
.web.dark .ndots i:not(.on) { background: var(--white-20); }
.ndots i.on { background: var(--text); }
@container web (min-width: 768px) {
.nrisk { grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 190px 24px; grid-template-areas: "tx tx dots ch"; align-items: center; gap: 24px; padding: 20px 12px; margin: 0 -12px 8px; width: calc(100% + 24px); }
.nrisk .ch { align-self: center; }
}
@container web (min-width: 1024px) {
.nrisk { grid-template-columns: minmax(180px, 1fr) minmax(0, 2.1fr) 200px 24px; padding: 20px 16px; margin: 0 -16px 8px; width: calc(100% + 32px); }
}
.nr-latest { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nr-latest .ndots { grid-template-columns: repeat(10, 9px); gap: 6px; }
.nr-latest .ndots i { width: 9px; height: 9px; }
.nr-list li { grid-template-columns: minmax(0, 1fr) auto; }
.rx-self { display: flex; gap: 6px; align-items: flex-start; }
.rx-self .ic { margin-top: 2px; }
small.sr { display: inline-flex; align-items: center; gap: 4px; }
.selfnote { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.3; color: var(--text-2); margin-top: 6px; text-align: left; }
.rp-mv .selfnote { margin-top: -1px; }
.rx-list .rfn .tagl { margin-left: 6px; }
.rx-more-b { margin: 8px -14px 0; }
.rx-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rx-list .rfn small .rx-del { font-size: 13px; font-weight: 600; color: var(--text-strong); padding: 2px 6px; margin: -2px 0 -2px 12px; border-radius: 9999px; transition: background-color var(--dur-fast) var(--ease); }
.web.dark .rx-list .rfn small .rx-del { color: var(--text-strong); }
:where(.web.hov) .rx-list .rfn small .rx-del:hover { background: var(--tint); }
.ntoast { position: absolute; left: 0; right: 0; margin: 0 auto; top: 14px; z-index: 61; width: min(520px, calc(100% - 32px)); display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 22px; background: var(--toast-note); color: #ffffff; box-shadow: var(--shadow-float); }
.web.dark .ntoast { box-shadow: var(--shadow-float); }
.ntoast .ti { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; align-self: flex-start; background: var(--white-20); color: var(--toast-note-ic); }
.ntoast .nx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.ntoast .nx b { font-size: 15px; font-weight: 600; }
.ntoast .nx span { color: rgba(255, 255, 255, .78); }
.ntoast .nok { flex: none; height: 40px; min-width: 64px; padding: 0 18px; border-radius: 9999px; background: var(--toast-note-act); color: #ffffff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border: 0; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
:where(.web.hov) .ntoast .nok:hover { background: var(--tooltip); }
.ntoast .nok:active { transform: scale(.97); }
.ntoast .nok:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.wtoast.below { top: 120px; }
@container web (max-width: 599px) {
.ntoast { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.ntoast .nok { grid-column: 2; justify-self: start; height: 36px; }
}
@keyframes tsIn { from { transform: translateY(calc(-100% - 24px)); opacity: 0; } }
@keyframes tsOut { to { transform: translateY(calc(-100% - 24px)); opacity: 0; } }
.wtoast, .ntoast { animation: tsIn var(--dur-toast-in) var(--ease) both; }
.wtoast.out, .ntoast.out { animation: tsOut var(--dur-toast-out) var(--ease-in) both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.wtoast, .ntoast, .wtoast.out, .ntoast.out { animation-name: fadeIn; }
.wtoast.out, .ntoast.out { animation-name: fadeOut; }
}
.btn.plain { color: var(--text-strong); font-weight: 600; }
.hp-fig svg { inset: 0; width: 100%; height: 100%; }
.hp-fig { color: var(--bg-brand-tint); }
.web.dark .hp-fig { color: var(--bg-brand); }
.figure .bfig { height: 48px; width: auto; }
.idemo { padding: 8px 20px 16px; }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; padding: 8px 0 4px; }
.icell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px 12px; min-height: 112px; border-radius: 16px; background: var(--bg-surface-subtle); border: 0; color: var(--text-strong); font: inherit; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.web.dark .icell { background: var(--white-8); }
:where(.web.hov) .icell:hover { background: var(--hover); }
.icell:active { background-image: linear-gradient(var(--press), var(--press)); }
.icell:focus-visible { outline: 2px solid var(--border-action); outline-offset: 2px; }
.icell b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--text); text-align: center; overflow-wrap: anywhere; }
.icell small { font-size: 11px; color: var(--text-2); }
.ifig { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 16px 0 4px; margin-top: 8px; border-top: 1px solid var(--border-subtle); }
.ifc { display: flex; align-items: center; gap: 10px; color: var(--brand-primary); }
.web.dark .ifc { color: var(--brand-tertiary); }
.ifc svg { width: 56px; height: 56px; }
.ifc span { display: flex; flex-direction: column; }
.ifc b { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--text); }
.idle .box { max-width: 480px; gap: 32px; padding: 48px 40px 40px; }
.idle-ring { width: 168px; height: 168px; }
.idle-ring circle { stroke-width: 1px; vector-effect: non-scaling-stroke; }
.idle-ring .tr { stroke: var(--black-8); }
.web.dark .idle-ring .tr { stroke: var(--white-20); }
.idle-ring .fg { stroke: var(--text); stroke-linecap: butt; }
.idle-ring b { font-size: 36px; font-weight: 400; letter-spacing: -0.03em; }
.idle-tx { gap: 12px; }
.idle-tx p { max-width: 30ch; margin: 0 auto; }
.idle-acts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 0; }
.idle-acts .btn { flex: 1 1 0; min-width: max-content; padding-left: 18px; padding-right: 18px; }
@container web (max-width: 599px) {
.idle .box { padding: 40px 24px 28px; gap: 28px; }
}
.idle-ring circle { stroke-width: 1.2; vector-effect: none; }
.idle-ring .fg { stroke: var(--brand-primary); stroke-linecap: round; transition: stroke-dashoffset var(--dur-base) linear; }
.bspin { border-width: 2px; border-top-color: var(--brand-primary); }
.web.dark .bspin { border-width: 2px; border-top-color: var(--brand-primary); }
.zs { cursor: default; }
.ztip { position: absolute; z-index: 80; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; background: var(--tooltip); color: #ffffff; border-radius: 12px; padding: 8px 12px 9px; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; box-shadow: var(--shadow-float); font-size: 13px; line-height: 1.35; animation: fadeIn var(--dur-fast) var(--ease); }
.ztip b { font-weight: 600; font-size: 13px; }
.ztip span { color: rgba(255, 255, 255, .78); font-family: var(--font-mono); font-size: 12px; }
.ztip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.web.dark .ztip { box-shadow: var(--shadow-float); }
.web a, .lnk, .web.dark a, .web.dark .lnk, .showall, .back, .rnav .nb { color: var(--text-link); }
.web .wel-foot .rowl a, .web .authfoot .rowl a, .web .appfoot a { color: var(--text-link); }
.dmeta { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); }
.dmeta li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dmeta .ic { color: var(--icon-2); flex: none; }
.dmeta .dm-lead { color: var(--text-3); margin-right: -6px; }
.hc-v span { text-wrap: balance; max-width: 24ch; }
.hcc-a .hc-v span, .hc:not(.hc-combo) > .hc-v span { max-width: 40ch; }
.hc > .zbar { margin-top: auto; }
.ha-bar .zbar .zc span:first-child { color: var(--text-2); }
.zbar .zc .zu { font-family: var(--font-ui); font-style: normal; font-weight: 600; }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9999px; font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; flex: none; }
.tag.ok { background: var(--on-normal); color: var(--bg-normal-subtle); }
.tag.warn { background: var(--on-borderline); color: var(--bg-borderline-subtle); }
.tag.high { background: var(--on-high); color: var(--bg-high-subtle); }
.web.dark .tag.ok { background: var(--text-normal); color: var(--on-normal); }
.web.dark .tag.warn { background: var(--text-borderline); color: var(--on-borderline); }
.web.dark .tag.high { background: var(--text-high); color: var(--on-high); }
.tag.none { background: var(--black-8); color: var(--text-2); }
.rp-mh { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.rp-mh .ab { flex: 1 1 auto; }
.btn.xs { height: 32px; padding: 0 12px 0 10px; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 9999px; justify-content: center; }
.btn.xs .lb { padding: 0; }
.pacts { gap: 8px; }
.rk-adv.ok { background: var(--bg-normal-subtle); color: var(--text-normal); }
.rk-adv.warn { background: var(--bg-borderline-subtle); color: var(--text-borderline); }
.rk-adv.high { background: var(--bg-high-subtle); color: var(--text-high); }
.rk-adv.ok .ic, .rk-adv.warn .ic, .rk-adv.high .ic { color: currentColor; }
.rk-adv p { font-weight: 500; }
.tag, .web.dark .tag { height: auto; padding: 0; border-radius: 0; background: none; letter-spacing: 0.08em; }
.tag.ok, .web.dark .tag.ok { background: none; color: var(--text-normal); }
.tag.warn, .web.dark .tag.warn { background: none; color: var(--text-borderline); }
.tag.high, .web.dark .tag.high { background: none; color: var(--text-high); }
.tag.none, .web.dark .tag.none { background: none; color: var(--text-2); }
.web a:active, .web .lnk:active { opacity: .64; transition-duration: 0s; }
.ibtn span { transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
:where(.web.hov) .ibtn:hover span, :where(.web) .ibtn.st-hover span { background: color-mix(in srgb, var(--bg-brand-tint) 70%, var(--brand-primary)); }
.ibtn:active span { transform: scale(.88); transition-duration: 0s; }
:where(.web.hov) .sw:hover, :where(.web) .sw.st-hover { box-shadow: 0 0 0 4px var(--black-4); }
.web.dark:where(.hov) .sw:hover, .web.dark .sw.st-hover { box-shadow: 0 0 0 4px var(--white-8); }
.sw:active::after { transform: scale(.9); transition-duration: var(--dur-press); }
.sw[aria-checked="true"]:active::after { transform: translateX(20px) scale(.9); }
@keyframes popOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes sheetOut { to { opacity: 0; transform: scale(.98); } }
.menu-ov.out { pointer-events: none; }
.menu-ov.out .menu { animation: popOut var(--dur-base-out) var(--ease-in) both; }
.ov.mini.out { pointer-events: none; }
.ov.mini.out .scrim { animation: fadeOut var(--dur-slow-out) var(--ease-in) both; }
.ov.mini.out .box { animation: sheetOut var(--dur-slow-out) var(--ease-in) both; }
.yn, .unitseg, .rep-seg { position: relative; isolation: isolate; --sp: 3px; --n: 2; --i: 0; --on: 0; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.unitseg { --sp: 2px; }
.yn { grid-template-columns: none; }
:is(.yn, .unitseg, .rep-seg):has(> button:nth-child(3)) { --n: 3; }
:is(.yn, .unitseg, .rep-seg):has(> button:nth-child(4)) { --n: 4; }
:is(.yn, .unitseg, .rep-seg):has(> button:nth-child(1)[aria-pressed="true"]) { --i: 0; --on: 1; }
:is(.yn, .unitseg, .rep-seg):has(> button:nth-child(2)[aria-pressed="true"]) { --i: 1; --on: 1; }
:is(.yn, .unitseg, .rep-seg):has(> button:nth-child(3)[aria-pressed="true"]) { --i: 2; --on: 1; }
:is(.yn, .unitseg, .rep-seg):has(> button:nth-child(4)[aria-pressed="true"]) { --i: 3; --on: 1; }
:is(.yn, .unitseg, .rep-seg)::before { content: ""; position: absolute; z-index: -1; top: var(--sp); bottom: var(--sp); left: var(--sp); width: calc((100% - 2 * var(--sp)) / var(--n)); border-radius: 9999px; background: var(--bg-surface); box-shadow: var(--lift); opacity: var(--on); transform: translateX(calc(100% * var(--i))); transition: transform var(--dur-base) var(--ease-move), opacity var(--dur-fast) var(--ease); }
:is(.yn, .unitseg, .rep-seg) > button { background: transparent; text-align: center; transition: color var(--dur-fast) var(--ease); }
:is(.yn, .unitseg, .rep-seg)::before { scale: calc(.85 + .15 * var(--on)); }
:is(.yn, .unitseg, .rep-seg).seg-in::before { transition: opacity var(--dur-base) var(--ease), scale var(--dur-base) var(--ease); }
:is(.yn, .unitseg, .rep-seg) > button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.zs > i { transition: filter var(--dur-fast) var(--ease); }
:where(.web.hov) .zs > i:hover { filter: brightness(.93); }
.web.dark:where(.hov) .zs > i:hover { filter: brightness(1.3); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.lnk { border-radius: 4px; }
.fstack { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.web .brandp .logo { color: #ffffff; }
.pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats dd { margin: 0; }
.hac { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.hac-t { position: relative; height: 20px; border-radius: 10px; background: var(--bg-zone); }
.hac-span { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--text-strong); }
.hac-you, .hac-ha { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.hac-you { background: var(--bg-surface); box-shadow: inset 0 0 0 2px var(--text-strong); }
.hac-ha { background: var(--text-strong); }
.hac-l { position: relative; height: 16px; }
.hac-l span { position: absolute; top: 0; font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text); white-space: nowrap; }
.hac-l span em { font-style: normal; font-family: var(--font-ui); font-weight: 400; color: var(--text-3); margin-right: 6px; }
.hac-l .end { transform: translateX(calc(-100% + 6px)); }
.hac-l .start { transform: translateX(-6px); }
.hac-l .mid { transform: translateX(-50%); }
.hc-combo .hc-top { margin-bottom: 4px; }
.hcc { display: flex; flex-direction: column; gap: 32px; }
.hcc-a, .hcc-b { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@container hcrow (min-width: 760px) {
.hcc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 56px; }
.hcc .hcs, .hcc .hac { margin-top: auto; }
}
.hcs { display: flex; flex-direction: column; gap: 8px; }
.hcs-l { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text); white-space: nowrap; }
.hcs-l .hdt { margin-left: 16px; font-family: var(--font-ui); font-weight: 400; color: var(--text-2); }
.hcs-l em { font-style: normal; font-family: var(--font-ui); font-weight: 400; color: var(--text-3); margin-right: 6px; }
@container hcrow (min-width: 760px) {
.hac, .hcs { position: relative; }
.hac-l, .hcs-l { position: absolute; left: 0; right: 0; top: calc(100% + 8px); }
}
@container hcrow (min-width: 760px) {
.hc-combo .hac, .hc-combo .hcs { margin-bottom: 16px; }
}
.hc.hc-combo { padding-bottom: 24px; }
@container hcrow (min-width: 760px) {
.hc.hc-combo { padding-top: 24px; }
}
@container hcrow (min-width: 760px) {
.hcs-l, .hac-l span { font-size: 14px; line-height: 18px; }
.hac-l { height: 18px; }
}
@container web (min-width: 1024px) {
.hc.hc-combo { padding-top: 28px; padding-bottom: 28px; }
}
@container web (max-width: 599px) {
.hc.hc-combo { padding-bottom: 20px; }
}