/* Hallmark · macrostructure: Workbench (custom) · tone: utilitarian-editorial · anchor hue: vermilion 36
 * theme: custom · paper oklch(97.2% .003 100) · accent oklch(55% .18 36) · Pretendard Variable only
 * axes: light / grotesk-sans / warm · values mirror DESIGN.md
 */
@font-face { font-family: 'Pretendard Ext'; src: url('/assets/fonts/pretendard-ext.11193de4bb.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+AC00-D7A3, U+3131-318E; }
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/pretendard-core.9539bbb604.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
:root {
  --paper: oklch(97.2% .003 100);
  --paper-2: oklch(94.6% .004 100);
  --paper-3: oklch(99.5% .002 100);
  --ink: oklch(21% .006 80);
  --ink-2: oklch(42% .008 80);
  --ink-3: oklch(52% .008 80);
  --line: oklch(88% .005 90);
  --line-2: oklch(80% .006 90);
  --accent: oklch(55% .18 36);
  --accent-hover: oklch(49% .17 36);
  --on-accent: oklch(99% .004 90);
  --accent-soft: oklch(94% .03 40);
  --accent-text: oklch(50% .17 36);
  --ok: oklch(50% .11 150);
  --ok-soft: oklch(94% .03 150);
  --warn-soft: oklch(95% .04 80);
  --shadow: 0 1px 2px oklch(40% .01 80 / .06), 0 12px 32px -12px oklch(40% .02 80 / .18);
  --shadow-lg: 0 2px 4px oklch(40% .01 80 / .06), 0 28px 60px -20px oklch(35% .02 80 / .28);
  --font: 'Pretendard', 'Pretendard Ext', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --t-display: clamp(38px, 6vw, 80px);
  --t-h1: clamp(32px, 4.4vw, 56px);
  --t-h2: clamp(26px, 3vw, 38px);
  --t-h3: 22px;
  --t-h4: 17px;
  --t-lead: clamp(17px, 1.5vw, 20px);
  --t-base: 16px;
  --t-sm: 14px;
  --t-xs: 12.5px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --sec: clamp(64px, 9vw, 128px);
  --gutter: 20px;
  --max: 1200px;
  --r-ctl: 10px;
  --r-box: 14px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-hero: 900ms;
  color-scheme: light dark;
}
@media (min-width: 760px) { :root { --gutter: 40px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(17% .004 80);
    --paper-2: oklch(21% .005 80);
    --paper-3: oklch(24% .005 80);
    --ink: oklch(94% .004 90);
    --ink-2: oklch(77% .006 90);
    --ink-3: oklch(66% .006 90);
    --line: oklch(31% .005 80);
    --line-2: oklch(40% .006 80);
    --accent: oklch(70% .16 40);
    --accent-hover: oklch(76% .14 42);
    --on-accent: oklch(17% .01 40);
    --accent-soft: oklch(30% .06 40);
    --accent-text: oklch(76% .14 42);
    --ok: oklch(74% .12 150);
    --ok-soft: oklch(30% .05 150);
    --warn-soft: oklch(32% .05 80);
    --shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 12px 32px -12px oklch(0% 0 0 / .5);
    --shadow-lg: 0 2px 4px oklch(0% 0 0 / .3), 0 28px 60px -20px oklch(0% 0 0 / .6);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-base); line-height: 1.7; font-weight: 450; word-break: keep-all; overflow-wrap: break-word; overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r-ctl); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.num, td.num { font-variant-numeric: tabular-nums; text-align: right; }
[hidden] { display: none !important; }
.display { font-size: clamp(36px, 4.7vw, 66px); font-weight: 760; letter-spacing: -.035em; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.display .ln { display: inline; }
@media (min-width: 1000px) { .display .ln { display: block; } }
.h1 { font-size: var(--t-h1); font-weight: 740; letter-spacing: -.03em; line-height: 1.15; }
.h2 { font-size: var(--t-h2); font-weight: 720; letter-spacing: -.025em; line-height: 1.22; }
.h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.35; }
.h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.45; }
.lead { font-size: var(--t-lead); color: var(--ink-2); max-width: 46ch; margin-top: var(--s-4); line-height: 1.65; }
.sec-lead { color: var(--ink-2); max-width: 52ch; margin-top: var(--s-3); }
.hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); }
.opt { font-size: var(--t-xs); color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.req { font-size: var(--t-xs); color: var(--accent-text); font-weight: 650; margin-left: 4px; }
.crumbs { font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-4); }
.crumbs a { color: var(--ink-2); }
.btn { --h: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h); padding: 0 20px; border-radius: var(--r-ctl); border: 1px solid transparent; font-size: 15.5px; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); user-select: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-sm { --h: 38px; padding: 0 14px; font-size: 14.5px; }
.btn-lg { --h: 54px; padding: 0 24px; font-size: 16.5px; }
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { opacity: .7; cursor: progress; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap; }
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur-1) var(--ease-out); }
.link-arrow:hover { color: var(--accent-text); }
.link-arrow:hover svg { transform: translateX(3px); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper-3); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1); }
.chip:hover { border-color: var(--ink-2); }
.chip[aria-pressed="true"], .chip[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-n { font-size: var(--t-xs); font-variant-numeric: tabular-nums; opacity: .7; }
.chips-sm .chip, .chip-sm { min-height: 36px; padding: 0 13px; font-size: 14px; }
.chip-radio { cursor: pointer; position: relative; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-radio:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 650; white-space: nowrap; border: 1px solid var(--line-2); color: var(--ink-2); }
.tag-client { border-color: var(--ink); color: var(--ink); }
.tag-own { background: var(--paper-2); border-color: var(--paper-2); }
.tag-demo { border-style: dashed; }
.tag-sim { border-color: var(--accent); color: var(--accent-text); margin-left: 10px; vertical-align: 2px; }
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--paper) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur-2); }
.top.is-scrolled { border-bottom-color: var(--line); }
.top-in { display: flex; align-items: center; gap: var(--s-5); height: 64px; }
.wm { font-size: 19px; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; margin-right: auto; }
.wm span { font-weight: 500; }
.wm b { font-weight: 780; }
.wm b::after { content: ''; display: inline-block; width: .32em; height: .32em; margin-left: .12em; background: var(--accent); border-radius: 2px; vertical-align: .05em; }
.nav { display: none; gap: var(--s-6); }
.nav a { font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 6px 0; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }
.top-cta { display: none; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r-ctl); margin-right: -10px; }
.sheet { border-top: 1px solid var(--line); background: var(--paper); }
.sheet-in { display: grid; padding-block: var(--s-3) var(--s-5); }
.sheet-in a { font-size: 19px; font-weight: 650; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.sheet-in a:last-child { border: 0; color: var(--accent-text); }
@media (min-width: 900px) {
  .nav, .top-cta { display: flex; }
  .menu-btn, .sheet { display: none !important; }
  .top-in { height: 72px; }
}
.hero { padding-block: clamp(32px, 6vw, 88px) clamp(72px, 8vw, 128px); }
.hero-in { display: grid; gap: var(--s-8); align-items: center; }
.hero-sub { font-size: var(--t-lead); color: var(--ink-2); max-width: 40ch; margin-top: var(--s-5); line-height: 1.65; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-art { position: relative; display: block; aspect-ratio: 16 / 12; min-width: 0; text-decoration: none; }
.ha { position: absolute; border-radius: var(--r-box); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); box-shadow: var(--shadow-lg); }
.ha img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ha-1 { left: 0; top: 4%; width: 84%; aspect-ratio: 16 / 10; z-index: 1; }
.ha-2 { right: 0; top: 0; width: 25%; aspect-ratio: 780 / 1688; z-index: 3; border-radius: 18px; }
.ha-3 { left: 8%; bottom: 0; width: 50%; aspect-ratio: 1160 / 740; z-index: 2; }
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s-7); }
  .hero { padding-top: clamp(48px, 6vw, 96px); }
}
@media (prefers-reduced-motion: no-preference) {
  .ha { animation: haIn var(--dur-hero) var(--ease-out) backwards; }
  .ha-1 { --from: translate(6%, 5%) scale(.95); }
  .ha-2 { --from: translate(-70%, 16%) rotate(-5deg); animation-delay: 140ms; }
  .ha-3 { --from: translate(16%, -22%) scale(.95); animation-delay: 260ms; }
  .hero-art .ha-2 { transition: transform var(--dur-2) var(--ease-out); }
  .hero-art:hover .ha-2 { transform: translateY(-6px); }
}
@keyframes haIn { from { transform: var(--from); opacity: 0; } }
.sec { padding-block: var(--sec); }
.sec + .sec { padding-top: 0; }
.sec-row { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.page-head { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.page-head .btn { margin-top: var(--s-6); }
.svc .sec-lead { margin-bottom: var(--s-6); }
.svc-grid { display: grid; gap: var(--s-4); }
.svc-list { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
.svc-list::-webkit-scrollbar { display: none; }
.svc-tab { flex: none; scroll-snap-align: start; text-align: left; border: 1px solid var(--line-2); background: var(--paper-3); border-radius: var(--r-pill); padding: 8px 16px; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.svc-name { font-weight: 700; font-size: 15px; white-space: nowrap; }
.svc-short { display: none; }
.svc-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.svc-stage { background: var(--paper-2); border-radius: var(--r-box); padding: var(--s-4); min-width: 0; }
.stage-title { font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); margin-bottom: var(--s-3); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-2); }
.stage-foot p { max-width: 52ch; }
.svc-common { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--ink-2); max-width: 72ch; }
.svc-common b { color: var(--ink); }
@media (min-width: 900px) {
  .svc-grid { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .svc-list { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; border-top: 1px solid var(--line); }
  .svc-tab { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 16px 0 16px 18px; position: relative; display: grid; gap: 2px; }
  .svc-tab::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: transparent; transition: background-color var(--dur-1); }
  .svc-tab[aria-selected="true"] { background: transparent; color: var(--ink); }
  .svc-tab[aria-selected="true"]::before { background: var(--accent); }
  .svc-tab:not([aria-selected="true"]) .svc-name { color: var(--ink-2); }
  .svc-tab:hover .svc-name { color: var(--ink); }
  .svc-name { font-size: 18px; }
  .svc-short { display: block; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; white-space: normal; }
  .svc-stage { padding: var(--s-6); min-height: 520px; }
}
.demo { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-box); padding: var(--s-4); min-width: 0; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-ctl); background: var(--paper-2); border: 1px solid var(--line); margin-bottom: var(--s-4); }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--paper-3); color: var(--ink); box-shadow: 0 1px 2px oklch(30% .01 80 / .12); }
.d-cap { font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); margin-bottom: var(--s-2); }
.field-inline { display: grid; gap: 4px; }
.field-inline label { font-size: var(--t-xs); font-weight: 650; color: var(--ink-3); }
.field-inline input, .field-inline select { min-height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper-3); font-size: 16px; }
.d-resp-stage { position: relative; background: var(--paper-2); border-radius: 10px; padding: var(--s-3); overflow: hidden; }
.mini-box { position: relative; height: 420px; }
.mini { position: absolute; top: 0; left: 50%; container-type: inline-size; width: calc(var(--w, 1) * 640px); transform: translateX(-50%) scale(var(--k, 1)); transform-origin: top center; background: oklch(26% .03 160); color: oklch(95% .02 90); border-radius: 8px; overflow: hidden; transition: width var(--dur-2) var(--ease-out); }
.mini.is-drag { transition: none; }
.mini-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 12px; }
.mini-top b { font-size: 13px; margin-right: auto; letter-spacing: -.02em; }
.mini-nav { display: flex; gap: 12px; opacity: .8; }
.mini-burger { display: none; width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; }
.mini-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: center; padding: 18px 14px 20px; }
.mini-h { font-size: 22px; font-weight: 760; line-height: 1.2; letter-spacing: -.03em; }
.mini-p { font-size: 12px; opacity: .75; margin: 8px 0 12px; }
.mini-btn { display: inline-block; font-size: 11.5px; font-weight: 700; background: oklch(78% .13 80); color: oklch(22% .03 160); padding: 6px 12px; border-radius: 999px; }
.mini-cup { aspect-ratio: 1; width: 100%; max-width: 190px; justify-self: center; border-radius: 50%; background: radial-gradient(circle at 50% 50%, oklch(36% .06 50) 0 32%, oklch(92% .02 80) 33% 44%, oklch(97% .01 90) 45% 62%, transparent 63%); }
.mini-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: oklch(36% .03 160); border-top: 1px solid oklch(36% .03 160); }
.mini-menu div { background: oklch(26% .03 160); padding: 10px 14px; display: grid; font-size: 12px; }
.mini-menu b { font-size: 13px; }
@container (max-width: 520px) {
  .mini-hero { grid-template-columns: 1fr 0.8fr; }
  .mini-h { font-size: 18px; }
}
@container (max-width: 380px) {
  .mini-nav { display: none; }
  .mini-burger { display: block; }
  .mini-hero { grid-template-columns: 1fr; text-align: left; }
  .mini-cup { width: 46%; margin: 4px auto 0; order: -1; }
  .mini-menu { grid-template-columns: 1fr; }
  .mini-menu div { grid-template-columns: 1fr auto; }
}
.d-resp-handle { position: absolute; top: 50%; right: 4px; width: 14px; height: 56px; margin-top: -28px; border-radius: 7px; background: var(--paper-3); border: 1px solid var(--line-2); cursor: ew-resize; touch-action: none; box-shadow: var(--shadow); }
.d-resp-handle::after { content: ''; position: absolute; inset: 18px 5px; border-inline: 1px solid var(--ink-3); }
.d-resp-w { font-size: var(--t-xs); color: var(--ink-3); text-align: center; margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.d-auto-drop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1.5px dashed var(--line-2); border-radius: 10px; transition: border-color var(--dur-1), background-color var(--dur-1); }
.d-auto-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.d-auto-pick { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; flex: 1 1 220px; }
.d-auto-pick svg { width: 26px; height: 26px; color: var(--accent-text); flex: none; }
.d-auto-pick b { display: block; font-size: 15px; }
.d-auto-pick span span { font-size: var(--t-sm); color: var(--ink-3); }
.d-auto [data-auto-input]:focus-visible + .d-auto-pick { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.d-auto-opts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-4); }
.d-auto-opts .field-inline:first-child { flex: 1 1 180px; }
.d-auto-empty { font-size: var(--t-sm); color: var(--ink-3); padding: var(--s-4) 0 var(--s-2); }
.d-auto-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.d-auto-table th { text-align: left; font-size: var(--t-xs); color: var(--ink-3); font-weight: 650; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.d-auto-table td { padding: 8px; vertical-align: middle; }
.d-auto-table tr + tr td { border-top: 1px solid var(--line); }
.d-auto-table img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.d-auto-table .new { font-weight: 650; word-break: break-all; }
.d-auto-table .save { color: var(--ok); font-weight: 650; }
.d-auto-table a { font-weight: 650; color: var(--accent-text); white-space: nowrap; }
.d-auto-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); font-size: var(--t-sm); margin-top: var(--s-3); color: var(--ink-2); }
.d-auto-sum b { color: var(--ink); }
@media (max-width: 560px) { .d-auto-table .hide-s { display: none; } }
.d-dash-bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.d-dash-search { flex: 1 1 200px; max-width: 280px; }
.d-dash-search input { width: 100%; }
.d-dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.d-dash-table th { text-align: left; font-size: var(--t-xs); color: var(--ink-3); font-weight: 650; padding: 8px; background: var(--paper-2); }
.d-dash-table th:first-child { border-radius: 8px 0 0 8px; }
.d-dash-table th:last-child { border-radius: 0 8px 8px 0; }
.d-dash-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.d-dash-table td.num { text-align: left; color: var(--ink-3); }
.d-dash-none { font-size: var(--t-sm); color: var(--ink-3); padding: var(--s-4) var(--s-2); }
.pill { border: 0; border-radius: var(--r-pill); padding: 4px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background-color var(--dur-1), color var(--dur-1); }
.pill-new { background: var(--accent-soft); color: var(--accent-text); }
.pill-doing { background: var(--warn-soft); color: var(--ink); }
.pill-done { background: var(--ok-soft); color: var(--ok); }
.pill:hover { filter: brightness(.97); }
@media (max-width: 560px) { .d-dash-table th:nth-child(1), .d-dash-table td:nth-child(1) { display: none; } }
.device { width: min(100%, 300px); margin-inline: auto; border-radius: 38px; padding: 9px; background: var(--ink); box-shadow: var(--shadow-lg); }
.device-screen { position: relative; border-radius: 30px; overflow: hidden; background: var(--paper-3); aspect-ratio: 9 / 18.5; display: flex; flex-direction: column; }
.app-views { position: relative; flex: 1; overflow: hidden; }
.app-view { position: absolute; inset: 0; padding: 34px 18px 16px; display: flex; flex-direction: column; gap: 10px; background: oklch(97% .01 120); color: oklch(24% .02 140); }
.app-view.is-enter { animation: appIn var(--dur-2) var(--ease-out); }
@keyframes appIn { from { transform: translateX(14%); opacity: 0; } }
@keyframes appInBack { from { transform: translateX(-14%); opacity: 0; } }
.app-view.is-back { animation-name: appInBack; }
.app-k { font-size: 12px; font-weight: 650; color: oklch(48% .04 140); }
.app-h { font-size: 22px; font-weight: 780; letter-spacing: -.03em; line-height: 1.2; margin-bottom: 6px; }
.app-card { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: oklch(100% 0 0); box-shadow: 0 1px 2px oklch(30% .02 140 / .08); font-size: 12.5px; }
.app-card b { font-size: 14px; }
.app-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-slot { border: 1px solid oklch(86% .02 140); background: oklch(100% 0 0); border-radius: 12px; padding: 10px 0; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: inherit; }
.app-slot[aria-pressed="true"] { background: oklch(48% .1 140); color: oklch(99% 0 0); border-color: transparent; }
.app-slot:disabled { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.app-btn { margin-top: auto; border: 0; border-radius: 14px; background: oklch(28% .03 140); color: oklch(98% 0 0); font-weight: 700; font-size: 14px; padding: 13px 0; text-align: center; }
.app-btn:disabled { opacity: .5; }
.app-meter { display: flex; align-items: baseline; gap: 6px; }
.app-meter b { font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: oklch(44% .1 140); }
.app-small { font-size: 12px; color: oklch(48% .03 140); }
.app-list { display: grid; gap: 6px; font-size: 12.5px; }
.app-list li { background: oklch(100% 0 0); border-radius: 10px; padding: 8px 12px; }
.app-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid oklch(90% .01 140); background: oklch(100% 0 0); padding: 6px 4px 12px; }
.app-tabs button { border: 0; background: none; display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 650; color: oklch(55% .02 140); padding: 4px 0; }
.app-tabs button[aria-pressed="true"] { color: oklch(30% .05 140); }
.app-tabs svg { width: 20px; height: 20px; }
.d-app { background: var(--paper-2); border-color: transparent; padding-block: var(--s-6); }
.d-chat { display: flex; flex-direction: column; gap: var(--s-3); background: oklch(88% .03 230 / .35); }
.chat-log { display: flex; flex-direction: column; gap: 8px; min-height: 260px; max-height: 320px; overflow-y: auto; padding: var(--s-2); overscroll-behavior: contain; }
.msg { max-width: 80%; padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; white-space: pre-line; }
.msg-bot { align-self: flex-start; background: var(--paper-3); border: 1px solid var(--line); border-top-left-radius: 4px; }
.msg-me { align-self: flex-end; background: oklch(88% .14 95); color: oklch(22% .02 90); border-top-right-radius: 4px; }
.msg.is-in { animation: msgIn var(--dur-2) var(--ease-out); }
@keyframes msgIn { from { transform: translateY(6px); opacity: 0; } }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-form { display: flex; gap: var(--s-2); }
.chat-form input { flex: 1; min-width: 0; min-height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); padding: 0 12px; background: var(--paper-3); font-size: 16px; }
.chat-form .btn { --h: 42px; padding: 0 12px; }
.ba { position: relative; border-radius: 10px; overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 10; user-select: none; }
.ba img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--paper-3); box-shadow: 0 0 0 1px oklch(20% 0 0 / .15); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--paper-3); box-shadow: var(--shadow); }
.ba-knob::before, .ba-knob::after { content: ''; position: absolute; top: 13px; border: 5px solid transparent; }
.ba-knob::before { left: 4px; border-right-color: var(--ink-2); }
.ba-knob::after { right: 4px; border-left-color: var(--ink-2); }
.ba-tag { position: absolute; top: 10px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: oklch(20% 0 0 / .65); color: oklch(98% 0 0); pointer-events: none; }
.ba-tag-l { left: 10px; } .ba-tag-r { right: 10px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-range:focus-visible ~ .ba-line .ba-knob, .ba:has(.ba-range:focus-visible) .ba-knob { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .ba { aspect-ratio: 780 / 1100; max-height: 520px; } }
.mo-lanes { display: grid; gap: var(--s-4); }
.mo-name { font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); }
.mo-track { position: relative; height: 46px; margin-top: 6px; background: var(--paper-2); border-radius: 10px; overflow: hidden; }
.mo-card { position: absolute; left: 6px; top: 6px; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); transform: translateX(0); }
.mo.is-play .mo-card { transform: translateX(var(--to, 200px)); transition: transform var(--mo-d, 600ms) var(--ease); }
.mo-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.mo-dur { font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mo-ctl input[type=range] { flex: 1 1 140px; accent-color: var(--accent); }
.need-chips { margin-top: var(--s-5); }
.need-box { margin-top: var(--s-5); border-top: 2px solid var(--ink); padding-top: var(--s-6); }
.need-panel { display: grid; gap: var(--s-6); }
.need-col .h4 { margin-bottom: var(--s-3); }
.need-works { display: grid; gap: var(--s-3); }
.need-works a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: center; text-decoration: none; }
.need-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.need-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.need-works b { display: block; font-size: 15px; margin-bottom: 4px; }
.need-works a:hover b { color: var(--accent-text); }
.need-go p { color: var(--ink-2); }
.need-price { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; margin: var(--s-4) 0; border-block: 1px solid var(--line); }
.need-price span { color: var(--ink-2); }
.need-price b { font-size: 18px; }
.need-go .btn { width: 100%; }
@media (min-width: 900px) { .need-panel { grid-template-columns: 1fr 1.1fr 1fr; gap: var(--s-7); } }
.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 22px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ticks-sm li { font-size: var(--t-sm); }
.wcard-link { display: grid; gap: var(--s-4); text-decoration: none; height: 100%; }
.wcard-media { border-radius: var(--r-box); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); aspect-ratio: 16 / 10; }
.wcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 600ms var(--ease-out); }
.wcard-tall img, .wcard-phone img { object-fit: contain; object-position: center; padding: 12px; }
.wcard-link:hover .wcard-media img { transform: scale(1.02); }
.wcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 6px; }
.wcard-title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; }
.wcard-link:hover .wcard-title { color: var(--accent-text); }
.wcard-sum { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.wgrid { display: grid; gap: var(--s-7) var(--s-5); margin-top: var(--s-6); }
@media (min-width: 700px) { .wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .wgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.empty { color: var(--ink-3); padding: var(--s-6) 0; }
.feat-grid { display: grid; gap: var(--s-7) var(--s-5); }
.feat-big a { display: grid; gap: var(--s-4); text-decoration: none; }
.feat-big .shot { aspect-ratio: 1280 / 696; }
.feat-big a:hover .h3 { color: var(--accent-text); }
.feat-text p:last-child { color: var(--ink-2); margin-top: 6px; max-width: 56ch; }
@media (min-width: 1000px) {
  .feat-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .feat-big { grid-row: span 2; }
}
.shot { border-radius: var(--r-box); overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.try-in { display: grid; gap: var(--s-6); }
.try-form { display: grid; gap: var(--s-5); max-width: 460px; }
.try-form .btn { justify-self: start; }
.try-head { order: 1; } .pv { order: 2; } .try-form { order: 3; }
.pv .device { width: min(100%, 270px); }
@media (min-width: 900px) {
  .try-in { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); grid-template-rows: auto 1fr; column-gap: var(--s-7); row-gap: var(--s-6); }
  .try-head { grid-column: 1; grid-row: 1; }
  .try-form { grid-column: 1; grid-row: 2; align-self: start; }
  .pv { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .pv .device { width: min(100%, 320px); }
}
.pv { --pv-bg: oklch(26% .03 160); --pv-ink: oklch(95% .02 90); --pv-acc: oklch(78% .13 80); --pv-sub: oklch(80% .02 100); }
.pv-screen { container-type: inline-size; background: var(--pv-bg); color: var(--pv-ink); transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out); }
.pv-top { display: flex; align-items: center; justify-content: space-between; padding: 10cqi 6.6cqi 2cqi; }
.pv-top b { font-size: 5.3cqi; font-weight: 780; letter-spacing: -.03em; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-burger { width: 6cqi; height: 3.6cqi; border-block: 2px solid currentColor; opacity: .8; }
.pv-art { height: 34cqi; margin: 1cqi 6.6cqi 0; display: grid; place-items: center; }
.pv-art svg { width: 100%; height: 100%; }
.pv-k { font-size: 4cqi; font-weight: 650; color: var(--pv-acc); padding: 4cqi 6.6cqi .6cqi; }
.pv-h { font-size: 8.2cqi; font-weight: 790; letter-spacing: -.035em; line-height: 1.2; padding: 0 6.6cqi; overflow-wrap: anywhere; }
.pv-rows { margin: 4.6cqi 6.6cqi 0; display: grid; font-size: 4.3cqi; }
.pv-rows li { display: flex; justify-content: space-between; gap: 8px; padding: 2.3cqi 0; border-top: 1px solid color-mix(in oklch, var(--pv-ink) 18%, transparent); }
.pv-rows span { color: var(--pv-sub); }
.pv-rows b { font-variant-numeric: tabular-nums; font-weight: 650; }
.pv-btn { display: block; margin: 4.6cqi 6.6cqi 0; text-align: center; padding: 3.6cqi 0; border-radius: 4cqi; background: var(--pv-acc); color: var(--pv-bg); font-weight: 750; font-size: 4.6cqi; }
.pv-bar { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 3.8cqi; font-weight: 650; padding: 3.3cqi 0 4.6cqi; border-top: 1px solid color-mix(in oklch, var(--pv-ink) 15%, transparent); color: var(--pv-sub); }
.pv-screen.is-swap > * { animation: pvIn 420ms var(--ease-out) both; }
.pv-screen.is-swap > :nth-child(2) { animation-delay: 40ms; }
.pv-screen.is-swap > :nth-child(3) { animation-delay: 80ms; }
.pv-screen.is-swap > :nth-child(4) { animation-delay: 110ms; }
.pv-screen.is-swap > :nth-child(5) { animation-delay: 140ms; }
.pv-screen.is-swap > :nth-child(6) { animation-delay: 170ms; }
@keyframes pvIn { from { opacity: 0; transform: translateY(8px); } }
.pv[data-industry="salon"] { --pv-bg: oklch(97% .006 60); --pv-ink: oklch(20% .01 40); --pv-acc: oklch(48% .14 25); --pv-sub: oklch(45% .01 40); }
.pv[data-industry="pilates"] { --pv-bg: oklch(95% .01 125); --pv-ink: oklch(24% .02 140); --pv-acc: oklch(55% .13 130); --pv-sub: oklch(44% .02 140); }
.pv[data-industry="academy"] { --pv-bg: oklch(27% .025 175); --pv-ink: oklch(96% .01 100); --pv-acc: oklch(74% .15 55); --pv-sub: oklch(80% .02 150); }
.pv[data-industry="clinic"] { --pv-bg: oklch(94% .02 75); --pv-ink: oklch(26% .03 50); --pv-acc: oklch(45% .07 50); --pv-sub: oklch(42% .03 50); }
.pv[data-industry="studio"] { --pv-bg: oklch(16% 0 0); --pv-ink: oklch(96% 0 0); --pv-acc: oklch(90% .02 85); --pv-sub: oklch(72% 0 0); }
.steps { display: grid; gap: var(--s-6); counter-reset: s; }
.steps li { display: grid; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.steps p { color: var(--ink-2); font-size: 15px; }
.step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); } }
.cta-band { padding-block: clamp(48px, 6vw, 80px) var(--sec); }
.cta-in { display: grid; gap: var(--s-6); justify-items: start; border-top: 2px solid var(--ink); padding-top: var(--s-7); }
.cta-band .wrap { display: block; }
.cta-say { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.4; max-width: 30ch; }
@media (min-width: 900px) { .cta-in { grid-template-columns: 1fr auto; align-items: end; } }
.foot { background: var(--paper-2); padding-block: var(--s-8) calc(var(--s-8) + 72px); margin-top: var(--s-4); }
@media (min-width: 900px) { .foot { padding-bottom: var(--s-8); } }
.foot-say { font-size: clamp(20px, 2.4vw, 28px); font-weight: 720; letter-spacing: -.02em; margin-bottom: var(--s-7); }
.foot-cols { display: grid; gap: var(--s-5); font-size: 15px; color: var(--ink-2); }
.foot-h { font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.foot-links { display: flex; flex-direction: column; gap: 4px; }
.foot-links a, .foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-small { margin-top: var(--s-7); font-size: var(--t-xs); color: var(--ink-3); }
@media (min-width: 760px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklch, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: transform var(--dur-2) var(--ease-out); }
.dock .btn { width: 100%; }
.dock.is-hidden { transform: translateY(110%); }
@media (min-width: 900px) { .dock { display: none; } }
.svc-rows { border-top: 2px solid var(--ink); }
.svc-row a { display: grid; gap: 6px; padding-block: var(--s-6); border-bottom: 1px solid var(--line); text-decoration: none; }
.svc-row-short { color: var(--ink-3); font-size: 15px; }
.svc-row-lead { color: var(--ink-2); max-width: 62ch; }
.svc-row .link-arrow { margin-top: var(--s-2); }
.svc-row a:hover .h3 { color: var(--accent-text); }
@media (min-width: 900px) { .svc-row a { grid-template-columns: 260px minmax(0, 1fr) auto; align-items: start; column-gap: var(--s-7); } .svc-row-short { grid-column: 1; } .svc-row-lead { grid-column: 2; grid-row: 1 / span 2; } .svc-row .link-arrow { grid-column: 3; grid-row: 1; margin: 0; } }
.prices { display: grid; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.prices > div { display: grid; gap: 2px; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.prices dt { font-weight: 650; }
.prices dd { display: grid; gap: 2px; }
.prices dd b { font-size: 19px; font-weight: 750; letter-spacing: -.01em; }
.prices dd span { font-size: var(--t-sm); color: var(--ink-3); }
@media (min-width: 700px) { .prices > div { grid-template-columns: 220px 1fr; } .prices dd { grid-template-columns: 150px 1fr; align-items: baseline; } }
.price-sec .prices { max-width: 900px; }
.svc-head .lead { max-width: 54ch; }
.svc-demo { padding-bottom: var(--sec); }
.svc-demo .demo { max-width: 920px; }
.groups { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.group .h4 { margin-bottom: var(--s-3); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }
.split { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); } }
.techs { display: grid; margin-top: var(--s-5); border-top: 1px solid var(--line); }
.techs > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.techs dt { font-weight: 650; font-size: 15px; }
.techs dd { color: var(--ink-2); font-size: 15px; }
.techs-wide > div { grid-template-columns: 120px minmax(0, 1fr); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); margin-top: var(--s-5); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font-weight: 650; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; transition: transform var(--dur-2) var(--ease-out); color: var(--ink-3); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding-bottom: var(--s-5); color: var(--ink-2); max-width: 68ch; }
.related { padding-bottom: var(--sec); }
.timeline { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.tl-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.tl-body > p { color: var(--ink-2); margin-top: var(--s-2); max-width: 60ch; }
.tl-dl { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.tl-dl dt { font-size: var(--t-xs); font-weight: 700; color: var(--accent-text); }
.tl-dl dd { font-size: 15px; }
@media (min-width: 900px) { .tl-step { grid-template-columns: 60px minmax(0, 1.2fr) minmax(0, 1fr); } .tl-body { display: contents; } .tl-body > h2, .tl-body > p { grid-column: 2; } .tl-dl { grid-column: 3; grid-row: 1 / span 2; margin: 0; } }
.rules { display: grid; gap: var(--s-3); margin-top: var(--s-5); max-width: 760px; }
.rules li { padding: var(--s-4) var(--s-5); background: var(--paper-2); border-radius: var(--r-box); color: var(--ink-2); }
.rules b { color: var(--ink); }
.trio { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.trio p { color: var(--ink-2); margin-top: var(--s-2); }
.trio > div { padding-top: var(--s-4); border-top: 2px solid var(--accent); }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }
.wd-head { padding-block: clamp(32px, 5vw, 72px) var(--s-6); max-width: 820px; }
.wd-media { margin-bottom: var(--s-8); }
.wd-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .28fr); gap: var(--s-4); align-items: end; }
.wd-pair .shot-phone { border-radius: 20px; }
.wd-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.wd-row .shot { flex: 1 1 320px; }
.wd-row .shot-tall { flex: 0 1 300px; }
.wd-row .shot-tall img { object-fit: contain; }
.wd-row figcaption, .wd-extra figcaption { font-size: var(--t-sm); color: var(--ink-3); padding: var(--s-2) var(--s-3); background: var(--paper-3); border-top: 1px solid var(--line); }
.wd-extra { margin-top: var(--s-4); }
.wd-body { display: grid; gap: var(--s-7); max-width: 760px; }
.wd-sec p { color: var(--ink-2); margin-top: var(--s-3); }
.wd-sec .ticks, .wd-sec .techs { margin-top: var(--s-4); }
.wd-video video { width: 100%; max-height: 640px; border-radius: var(--r-box); background: var(--ink); margin-top: var(--s-4); }
.wd-video figcaption { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-2); }
.wd-ask { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; max-width: 760px; margin-top: var(--s-8); padding: var(--s-5) var(--s-6); border-radius: var(--r-box); background: var(--paper-2); }
.wd-ask p { font-size: 19px; font-weight: 700; }
.wd + .related { padding-top: var(--sec); }
.work-index { padding-bottom: var(--s-4); }
.work-index .chips { margin-bottom: var(--s-2); }
.quote-wrap { display: grid; gap: var(--s-8); padding-bottom: var(--sec); }
@media (min-width: 1000px) { .quote-wrap { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } .qsteps { grid-column: 1 / -1; } }
.qsteps { display: flex; gap: var(--s-2); counter-reset: q; overflow-x: auto; scrollbar-width: none; }
.qsteps li { flex: 1 1 0; min-width: 64px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--ink-3); padding-top: 10px; border-top: 3px solid var(--line); white-space: nowrap; }
.qsteps span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; font-variant-numeric: tabular-nums; }
.qsteps li.is-done { color: var(--ink-2); border-top-color: var(--ink-2); }
.qsteps li[aria-current] { color: var(--ink); border-top-color: var(--accent); }
.qsteps li[aria-current] span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.quote { min-width: 0; }
.qstep { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-5); }
.qstep legend { padding: 0; margin-bottom: var(--s-5); }
.picks { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick-in { display: grid; gap: 2px; padding: var(--s-4) var(--s-4) var(--s-4) 50px; border: 1px solid var(--line-2); border-radius: var(--r-box); background: var(--paper-3); height: 100%; position: relative; transition: border-color var(--dur-1), background-color var(--dur-1); }
.pick-in::before { content: ''; position: absolute; left: 18px; top: 19px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); background: var(--paper-3); }
.pick-in b { font-size: 16px; }
.pick-in span { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.pick:hover .pick-in { border-color: var(--ink-3); }
.pick input:checked + .pick-in { border-color: var(--accent); background: var(--accent-soft); }
.pick input:checked + .pick-in::before { background: var(--accent); border-color: var(--accent); }
.pick input:checked + .pick-in::after { content: ''; position: absolute; left: 23px; top: 23px; width: 8px; height: 5px; border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent); transform: rotate(-45deg); }
.pick input:focus-visible + .pick-in { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: grid; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.field > label, .field > legend { font-weight: 650; font-size: 15px; padding: 0; }
fieldset.field > legend { margin-bottom: 8px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--paper-3); font-size: 16px; line-height: 1.5; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.field textarea { resize: vertical; min-height: 150px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }
.field [aria-invalid="true"] { border-color: var(--accent) !important; }
::placeholder { color: var(--ink-3); opacity: 1; }
.field input[type=file] { font-size: 14px; padding: 10px; border: 1px dashed var(--line-2); border-radius: var(--r-ctl); background: var(--paper-3); }
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filelist { display: grid; gap: 4px; font-size: var(--t-sm); }
.filelist li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 10px; background: var(--paper-2); border-radius: 8px; }
.filelist .bad { color: var(--accent-text); }
.err { color: var(--accent-text); font-size: var(--t-sm); font-weight: 600; }
.err-box { padding: var(--s-3) var(--s-4); border: 1px solid var(--accent); border-radius: var(--r-ctl); background: var(--accent-soft); }
.qnav { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.qnav .btn-solid { margin-left: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--paper-2); border-radius: var(--r-box); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.consent-text { font-size: var(--t-sm); color: var(--ink-2); padding-left: 30px; }
.qdone { padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-box); background: var(--paper-3); }
.qdone:focus { outline: none; }
.done-k { font-size: var(--t-h3); font-weight: 750; }
.done-no { font-size: 17px; }
.done-no b { font-size: 24px; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--accent-text); margin-left: 6px; }
.done-dl { display: grid; border-top: 1px solid var(--line); }
.done-dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.done-dl dt { color: var(--ink-3); }
.done-dl dd { white-space: pre-line; overflow-wrap: anywhere; }
.quote-side { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); background: var(--paper-2); border-radius: var(--r-box); }
.quote-side .h4 + p { margin-top: -4px; }
.quote-side .h4:not(:first-child) { margin-top: var(--s-4); }
.prose { max-width: 720px; padding-bottom: var(--sec); }
.prose h2 { margin-top: var(--s-7); }
.prose p { color: var(--ink-2); margin-top: var(--s-3); }
.nf { min-height: 50vh; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
:root {
  --stage: oklch(21% .024 165);
  --stage-2: oklch(25% .026 165);
  --stage-3: oklch(30% .026 165);
  --stage-ink: oklch(96% .008 100);
  --stage-ink-2: oklch(80% .014 130);
  --stage-line: oklch(40% .022 165);
  --glow: oklch(34% .04 165 / .55);
}
@media (prefers-color-scheme: dark) {
  :root { --stage: oklch(19% .022 165); --stage-2: oklch(23% .024 165); --stage-3: oklch(28% .024 165); }
}
.hero, .reel, .cta-band { background: var(--stage); color: var(--stage-ink); position: relative; }
[data-glow] { --gx: 70%; --gy: 30%; }
[data-glow]::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--gx) var(--gy), var(--glow), transparent 70%); opacity: .9; transition: opacity var(--dur-2); z-index: 0; }
.hero > *, .cta-band > * { position: relative; z-index: 1; }
.hero .btn-ghost, .cta-band .btn-ghost { border-color: var(--stage-line); color: var(--stage-ink); }
.hero .btn-ghost:hover { border-color: var(--stage-ink); }
.hero :focus-visible, .reel :focus-visible, .cta-band :focus-visible { outline-color: var(--accent); }
.top { background: color-mix(in oklch, var(--paper) 92%, transparent); }
.hero { padding: 0; overflow: hidden; }
.hero-in { position: static; display: grid; gap: 0; min-height: min(calc(100dvh - 64px), 900px); align-items: center; padding-block: clamp(28px, 5vw, 64px) 0; }
.hero-text { position: relative; z-index: 2; max-width: 620px; padding-bottom: var(--s-6); }
.display { color: var(--stage-ink); font-size: clamp(40px, 5.6vw, 84px); line-height: 1.08; letter-spacing: -.04em; }
.kw-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.kw { display: inline-block; color: var(--stage-ink); will-change: transform; }
.kw::after { content: ''; display: block; height: .07em; margin-top: .02em; background: var(--accent); border-radius: 2px; transform-origin: left; }
.display .ln { display: block; color: var(--stage-ink-2); }
.hero-sub { color: var(--stage-ink-2); max-width: 36ch; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-5); }
.kw-chip { border: 1px solid var(--stage-line); background: transparent; color: var(--stage-ink-2); border-radius: var(--r-pill); padding: 7px 13px; font-size: 14px; font-weight: 650; white-space: nowrap; transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.kw-chip:hover { color: var(--stage-ink); border-color: var(--stage-ink-2); }
.kw-chip[aria-pressed="true"] { background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); }
.hero-stage { position: relative; height: min(66vw, 460px); margin-inline: calc(var(--gutter) * -1); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ease-out); }
.hero.is-3d .stage-canvas { opacity: 1; }
.hero .hero-art { position: absolute; inset: 6% 8%; aspect-ratio: auto; transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
.hero.is-3d .hero-art { opacity: 0; transform: scale(.96); pointer-events: none; }
.hero .ha { border-color: var(--stage-line); box-shadow: 0 30px 60px -24px oklch(0% 0 0 / .6); }
@media (max-width: 999px) {
  .hero-in { display: flex; flex-direction: column; align-items: stretch; padding-bottom: var(--s-7); }
  .hero-text { display: contents; }
  .hero-text .display { order: 1; }
  .hero-stage { order: 2; height: min(86vw, 520px); }
  .hero-sub { order: 3; margin-top: 0; }
  .kw-chips { order: 4; }
  .hero-cta { order: 5; }
}
@media (min-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .hero-text { grid-row: 1; grid-column: 1; padding-block: var(--s-8); max-width: 560px; }
  .hero-stage { position: absolute; inset: 0; height: auto; margin: 0; z-index: 1; }
  .hero .hero-art { inset: 16% 6% 16% 8%; }
}
.hero-cta { margin-top: var(--s-6); }
.btn-solid { position: relative; overflow: hidden; isolation: isolate; --bx: 50%; --by: 50%; }
.btn-solid::before { content: ''; position: absolute; left: var(--bx); top: var(--by); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent-hover); transform: scale(0); transition: transform 450ms var(--ease-out); z-index: -1; }
.btn-solid:hover { background: var(--accent); }
.btn-solid:hover::before { transform: scale(30); }
.link-arrow { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 320ms var(--ease-out), color var(--dur-1); }
.link-arrow:hover { background-size: 100% 1px; }
@media (hover: none) { .btn-solid::before { display: none; } }
.svc-panel.is-enter { animation: panelIn 520ms var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
html.svc-pinned .svc { height: calc(100vh - 72px); display: flex; align-items: center; padding-block: 24px; }
html.svc-pinned .svc .wrap { width: 100%; }
html.svc-pinned .svc .sec-lead { margin-bottom: var(--s-5); }
html.svc-pinned .svc-common { display: none; }
html.svc-pinned .svc-stage { min-height: 0; height: min(600px, calc(100vh - 300px)); overflow: hidden; }
html.svc-pinned .svc-list { position: relative; }
html.svc-pinned .svc-list::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--svc-p, 0) * 100%); background: var(--accent); }
.svc-scroll-hint { display: none; }
html.svc-pinned .svc-scroll-hint { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-3); }
.need { background: var(--paper-2); }
.h-huge { font-size: clamp(40px, 7.4vw, 112px); font-weight: 780; letter-spacing: -.045em; line-height: 1.02; overflow-wrap: anywhere; }
.h-huge span { display: inline-block; }
.need .need-box { background: var(--paper); border-radius: var(--r-box); padding: var(--s-6); border-top: 0; }
@media (max-width: 700px) { .need .need-box { padding: var(--s-5); } }
.reel { padding: var(--sec) 0 0; }
.reel-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.reel .h2 { color: var(--stage-ink); }
.reel .link-arrow { color: var(--stage-ink); }
.reel-track { position: relative; }
.reel-slide { position: relative; height: 82vh; min-height: 480px; overflow: hidden; background: var(--stage-2); }
.reel-slide + .reel-slide { margin-top: 2px; }
.reel-pic { position: absolute; inset: 0; }
.reel-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform-origin: center top; }
.reel-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(14% .02 165 / .96) 0%, oklch(14% .02 165 / .82) 30%, oklch(14% .02 165 / .3) 55%, transparent 75%); pointer-events: none; }
.reel-cap { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); z-index: 2; color: var(--stage-ink); }
.reel-cap .wcard-meta { color: var(--stage-ink-2); }
.reel-title { font-size: clamp(30px, 4.6vw, 64px); font-weight: 760; letter-spacing: -.035em; line-height: 1.1; margin-top: 6px; }
.reel-sum { color: var(--stage-ink-2); max-width: 46ch; margin: var(--s-3) 0 var(--s-4); font-size: var(--t-lead); }
.tag-on-dark { border-color: var(--stage-ink-2); color: var(--stage-ink); background: transparent; }
.tag-on-dark.tag-own { background: var(--stage-3); border-color: var(--stage-3); }
html.reel-pinned .reel-track { height: calc(100vh - 72px); overflow: hidden; }
html.reel-pinned .reel-slide { position: absolute; inset: 0; height: 100%; min-height: 0; margin: 0; }
html.reel-pinned .reel { padding-bottom: 0; }
.steps-sec .steps li { border-top-color: var(--ink); }
.steps-sec .step-n { width: auto; height: auto; background: none; color: var(--accent-text); font-size: clamp(44px, 5vw, 72px); font-weight: 780; letter-spacing: -.04em; line-height: 1; border-radius: 0; place-items: start; }
.cta-band { padding-block: var(--sec); overflow: hidden; }
.cta-in { border-top: 0; padding-top: 0; }
.cta-say { font-size: clamp(30px, 4.4vw, 64px); font-weight: 760; letter-spacing: -.035em; line-height: 1.18; max-width: 22ch; color: var(--stage-ink); }
.cta-say span { display: inline-block; }
.foot { margin-top: 0; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 260ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vtIn 420ms var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(18px); } }
.top { view-transition-name: top; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  [data-glow]::before { display: none; }
  .btn-solid::before { display: none; }
}
.top { transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
.top.on-dark { background: color-mix(in oklch, var(--stage) 94%, transparent); color: var(--stage-ink); border-bottom-color: var(--stage-line); }
.top.on-dark .nav a { color: var(--stage-ink-2); }
.top.on-dark .nav a:hover, .top.on-dark .nav a[aria-current] { color: var(--stage-ink); }
.top.on-dark .menu-btn { color: var(--stage-ink); }
.top.on-dark .sheet { background: var(--stage); }
.top.on-dark .sheet-in a { border-color: var(--stage-line); }
.dock { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.dock .btn-ghost { background: var(--paper-3); }
.dock .btn svg { width: 18px; height: 18px; }
.call-line { margin-top: var(--s-4); font-weight: 650; color: var(--ink-2); }
.call-line a { color: var(--ink); font-size: 19px; margin-left: 6px; font-variant-numeric: tabular-nums; }