body[data-direction='blueprint'] { --canvas:#f0f6ff; --panel:#f8fbff; --ink:#102b63; --muted:#516787; --blue:#1658ee; --blue-ink:#fff; --soft:#dce9ff; --line:#b8cff1; --accent:#97deff; color-scheme:light; }
body[data-direction='night-shift'] { --canvas:#07141f; --panel:#102635; --ink:#edfaff; --muted:#a3bbc9; --blue:#77edff; --blue-ink:#07141f; --soft:#16394a; --line:#345364; --accent:#ffd087; color-scheme:dark; }
body[data-direction='blueprint'] .dock-screen { background-image:linear-gradient(#1658ee0a 1px,transparent 1px),linear-gradient(90deg,#1658ee0a 1px,transparent 1px); background-size:48px 48px; }
body[data-direction='blueprint'] .dock-screen .dock-intro { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px; text-align:center; }
body[data-direction='blueprint'] .dock-screen .dock-intro h1 { font-size:clamp(38px,8.5cqw,110px); }
body[data-direction='blueprint'] .dock-screen .dock-intro .hero-support { margin:18px auto 0; }
body[data-direction='blueprint'] .dock-screen .dock-intro .hero-specs { margin:14px auto 0; }
body[data-direction='blueprint'] .hero-action { margin-top:20px; }
body[data-direction='blueprint'] .hero-art { position:relative; inset:auto; width:240px; height:30px; flex:none; opacity:1; }
body[data-direction='blueprint'] .hero-orbit { inset:50% 12px auto; height:1px; border:0; border-radius:0; background:var(--blue); box-shadow:none; transform:none; }
body[data-direction='blueprint'] .hero-orbit::before,
body[data-direction='blueprint'] .hero-orbit::after { content:''; position:absolute; top:-5px; width:11px; height:11px; border:2px solid var(--blue); background:var(--panel); }
body[data-direction='blueprint'] .hero-orbit::before { left:0; }
body[data-direction='blueprint'] .hero-orbit::after { right:0; }
body[data-direction='blueprint'] .hero-symbol { padding:0 10px; background:var(--panel); color:var(--blue); font-size:30px; transform:none; }
body[data-direction='blueprint'] .hero-dot { display:none; }
body[data-direction='night-shift'] .dock-screen { background:radial-gradient(ellipse at 80% 30%,#16485b,var(--panel) 70%); }
body[data-direction='night-shift'] .dock-screen .dock-intro { display:flex; flex-direction:column; justify-content:center; align-items:flex-end; text-align:right; padding-left:8%; }
body[data-direction='night-shift'] .hero-copy { position:relative; z-index:1; width:100%; }
body[data-direction='night-shift'] .dock-screen .dock-intro h1 { font-size:clamp(38px,7.4cqw,110px); font-weight:650; }
body[data-direction='night-shift'] .dock-screen .dock-intro .hero-support { margin:18px 0 0 auto; }
body[data-direction='night-shift'] .dock-screen .dock-intro .hero-specs { margin:14px 0 0 auto; }
body[data-direction='night-shift'] .hero-action { margin-top:20px; }
body[data-direction='night-shift'] .hero-art { position:absolute; left:0; right:auto; top:auto; bottom:7%; width:28%; height:90px; opacity:1; pointer-events:none; }
body[data-direction='night-shift'] .hero-orbit { inset:auto 0 18px; height:3px; background:var(--blue); box-shadow:0 3px 38px 8px #77edff26; border-radius:0; transform:none; }
body[data-direction='night-shift'] .hero-symbol { position:absolute; left:8%; bottom:27px; font-size:58px; color:var(--accent); transform:none; }
body[data-direction='night-shift'] .hero-dot { width:8px; height:8px; top:auto; right:10%; bottom:30px; background:var(--blue); box-shadow:0 0 20px var(--blue); }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .dock-navbar { border:0; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); background:color-mix(in srgb,var(--panel) 78%,transparent); backdrop-filter:blur(22px); border-radius:0; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .dock-navbar[data-phase='pill'] { border:1px solid color-mix(in srgb,var(--line) 70%,transparent); border-radius:999px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-nav { display:flex; flex-wrap:wrap; gap:12px 36px; padding-block:40px; border-bottom:1px solid var(--line); font-size:14px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-nav a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-section { padding-block:clamp(90px,11vw,180px); scroll-margin-top:100px; }
body[data-direction='blueprint'] :is(.bp-flow,.bp-setup),
body[data-direction='night-shift'] :is(.ns-counter,.ns-business) { display:block; padding-inline:0; }
body[data-direction='night-shift'] .ns-kitchen { grid-template-columns:minmax(0,1fr); gap:0; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-copy h2,
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-close h2 { font-size:clamp(46px,6.9vw,108px); line-height:.99; letter-spacing:-.06em; font-weight:600; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-copy h2 span,
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-close h2 span { color:var(--blue); }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-label { color:var(--blue); margin-bottom:24px; font-size:13px; letter-spacing:.04em; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-copy > p:not(.story-label),
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-close > p:not(.story-label),
body[data-direction='night-shift'] .story-close .wrap > p:not(.story-label) { max-width:470px; margin-top:24px; color:var(--muted); font-size:19px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-action { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-height:48px; margin-top:28px; padding:12px 22px; border:1px solid var(--blue); border-radius:999px; background:var(--blue); color:var(--blue-ink); text-decoration:none; font:inherit; font-size:15px; cursor:pointer; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-action:hover { filter:brightness(1.1); }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .extra-send { display:flex; flex-wrap:wrap; align-items:baseline; gap:16px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .extra-reset { min-height:44px; padding:10px 12px; border:0; background:transparent; text-decoration:underline; text-underline-offset:5px; font-size:14px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) button:disabled { opacity:.55; cursor:default; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .product-story h3 { font-size:26px; letter-spacing:-.035em; line-height:1.15; margin:0; font-weight:550; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .planned-note { font-size:14px; color:var(--muted); line-height:1.55; margin-top:28px; max-width:520px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) form label { display:grid; gap:9px; font-size:14px; margin-top:25px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) form select { width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); font:inherit; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) form output { display:block; min-height:3em; margin-top:24px; color:var(--muted); font-size:15px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) details { border-bottom:1px solid var(--line); }
body:is([data-direction='blueprint'],[data-direction='night-shift']) summary { padding:24px 24px 24px 0; font-size:21px; letter-spacing:-.02em; cursor:pointer; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) details p { max-width:560px; padding:0 20px 26px 0; color:var(--muted); font-size:17px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-close { padding-block:120px 160px; }
body:is([data-direction='blueprint'],[data-direction='night-shift']) .bp-setup-link,
body:is([data-direction='blueprint'],[data-direction='night-shift']) .ns-setup-link { display:inline-flex; min-height:44px; align-items:center; margin-left:25px; font-size:15px; }
body[data-direction='blueprint'] .bp-sale { display:grid; grid-template-columns:1fr .82fr; gap:10%; align-items:center; }
body[data-direction='blueprint'] .bp-ticket { padding:36px; background:#fff; border:1px solid var(--line); border-radius:4px; box-shadow:18px 18px 0 var(--soft); transform:rotate(2deg); }
body[data-direction='blueprint'] .bp-ticket-head { font-size:12px; padding-bottom:30px; border-bottom:1px dashed var(--line); letter-spacing:.08em; }
body[data-direction='blueprint'] .bp-ticket dl { display:grid; gap:18px; margin-top:28px; }
body[data-direction='blueprint'] .bp-ticket dl > div,
body[data-direction='blueprint'] .bp-spec-sheet dl > div { display:flex; justify-content:space-between; gap:18px; }
body[data-direction='blueprint'] .bp-order-controls { display:flex; gap:10px; margin-top:30px; }
body[data-direction='blueprint'] .bp-order-controls button { min-height:44px; border:1px solid var(--line); border-radius:6px; padding:8px 18px; background:transparent; }
body[data-direction='blueprint'] .bp-order-controls button[aria-pressed='true'] { color:#fff; background:var(--blue); border-color:var(--blue); }
body[data-direction='blueprint'] .bp-total { display:flex; flex-wrap:wrap; gap:14px; align-items:baseline; border-top:1px dashed var(--line); padding-top:24px; margin-top:28px; font-size:clamp(40px,4.4vw,68px); letter-spacing:-.05em; color:var(--blue); font-variant-numeric:tabular-nums; }
body[data-direction='blueprint'] .bp-total small { font-size:15px; color:var(--muted); letter-spacing:0; }
body[data-direction='blueprint'] .bp-caption { font-size:12px; color:var(--muted); margin-top:22px; }
body[data-direction='blueprint'] .bp-flow { background-color:var(--soft); background-image:linear-gradient(#1658ee0a 1px,transparent 1px),linear-gradient(90deg,#1658ee0a 1px,transparent 1px); background-size:36px 36px; }
body[data-direction='blueprint'] .bp-stations { list-style:none; padding:0; margin:72px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
body[data-direction='blueprint'] .bp-stations li { position:relative; border-top:2px solid var(--blue); padding:24px 22px 28px; background:var(--panel); }
body[data-direction='blueprint'] .bp-stations li:not(:last-child)::after { content:'→'; position:absolute; right:-25px; top:45%; color:var(--blue); font-size:28px; }
body[data-direction='blueprint'] .bp-station-number { color:var(--muted); font-size:12px; display:block; margin-bottom:24px; }
body[data-direction='blueprint'] .bp-stations strong { display:block; color:var(--blue); font-size:38px; letter-spacing:-.04em; margin-top:20px; }
body[data-direction='blueprint'] .bp-stations p { color:var(--muted); font-size:15px; margin-top:14px; }
body[data-direction='blueprint'] .bp-stations dl { margin-top:22px; font-size:15px; display:grid; gap:12px; }
body[data-direction='blueprint'] .bp-stations dl > div { display:flex; justify-content:space-between; gap:8px; }
body[data-direction='blueprint'] .bp-business { display:grid; grid-template-columns:1fr 1fr; gap:7%; align-items:center; }
body[data-direction='blueprint'] .bp-ledger { border:1px solid var(--line); background:#fff; }
body[data-direction='blueprint'] .bp-ledger-top { padding:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; background:var(--blue); color:#fff; font-size:12px; }
body[data-direction='blueprint'] .bp-ledger-top strong { font-size:32px; letter-spacing:-.03em; }
body[data-direction='blueprint'] .bp-workspace-list button { display:grid; grid-template-columns:25px 1fr 1.25fr 20px; gap:15px; align-items:center; width:100%; text-align:left; padding:22px; border:0; border-bottom:1px solid var(--line); background:transparent; }
body[data-direction='blueprint'] .bp-workspace-list button:hover { background:var(--soft); }
body[data-direction='blueprint'] .bp-workspace-list button span,
body[data-direction='blueprint'] .bp-workspace-list button small { font-size:12px; color:var(--muted); }
body[data-direction='blueprint'] .bp-setup { background:#e2edff; }
body[data-direction='blueprint'] .bp-setup-grid { margin-top:70px; display:grid; grid-template-columns:1fr 1fr; gap:10%; }
body[data-direction='blueprint'] .bp-spec-sheet { border-top:1px solid var(--blue); padding-top:26px; }
body[data-direction='blueprint'] .bp-spec-sheet dl { margin-top:32px; display:grid; gap:23px; font-size:16px; }
body[data-direction='blueprint'] .bp-spec-sheet dd { color:var(--blue); }
body[data-direction='blueprint'] .bp-setup-form { padding:36px; background:var(--panel); border:1px solid var(--line); }
body[data-direction='blueprint'] .bp-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:10%; }
body[data-direction='blueprint'] .bp-close { border-top:1px solid var(--line); }
body[data-direction='night-shift'] .ns-counter { background:radial-gradient(ellipse at 75% 50%,#164755,transparent 65%); }
body[data-direction='night-shift'] .ns-counter-grid { display:grid; grid-template-columns:1fr .85fr; gap:12%; align-items:center; }
body[data-direction='night-shift'] .ns-receipt { padding:42px; border:1px solid #77edff55; border-radius:28px; background:#0d2937; box-shadow:0 0 100px #77edff0d; }
body[data-direction='night-shift'] .ns-service-light { font-size:12px; letter-spacing:.1em; color:var(--blue); display:flex; align-items:center; gap:12px; }
body[data-direction='night-shift'] .ns-service-light i { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px #ffd08755; }
body[data-direction='night-shift'] .ns-receipt h3 { font-size:clamp(30px,3.5vw,54px); margin-top:34px; }
body[data-direction='night-shift'] .ns-receipt h3 span { color:var(--muted); }
body[data-direction='night-shift'] .ns-price-row { display:flex; gap:24px; margin-top:18px; color:var(--muted); font-size:14px; }
body[data-direction='night-shift'] .ns-order-controls { display:flex; gap:10px; margin-top:32px; }
body[data-direction='night-shift'] .ns-order-controls button { min-height:44px; border:1px solid var(--line); border-radius:999px; padding:8px 20px; background:transparent; }
body[data-direction='night-shift'] .ns-order-controls button[aria-pressed='true'] { background:var(--blue); color:var(--blue-ink); border-color:var(--blue); }
body[data-direction='night-shift'] .ns-total { font-size:clamp(50px,5.5vw,86px); color:var(--blue); letter-spacing:-.065em; line-height:1; margin-top:30px; font-variant-numeric:tabular-nums; }
body[data-direction='night-shift'] .ns-caption { font-size:12px; color:var(--muted); margin-top:24px; }
body[data-direction='night-shift'] .ns-pass { margin-top:70px; display:grid; grid-template-columns:1.35fr .65fr; gap:2px; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
body[data-direction='night-shift'] .ns-pass-ticket { background:var(--accent); color:#241b0d; padding:40px; }
body[data-direction='night-shift'] .ns-pass-ticket > div { display:flex; align-items:baseline; gap:24px; font-size:13px; }
body[data-direction='night-shift'] .ns-pass-ticket > div > span { font-size:60px; letter-spacing:-.06em; }
body[data-direction='night-shift'] .ns-pass-ticket h3 { font-size:clamp(28px,3.3vw,50px); margin-top:30px; }
body[data-direction='night-shift'] .ns-pass-ticket .ns-caption { color:#665438; }
body[data-direction='night-shift'] .ns-stock { padding:40px; background:var(--panel); }
body[data-direction='night-shift'] .ns-stock dl { display:grid; gap:24px; }
body[data-direction='night-shift'] .ns-stock dt { font-size:14px; color:var(--muted); }
body[data-direction='night-shift'] .ns-stock dd { font-size:28px; color:var(--blue); letter-spacing:-.025em; }
body[data-direction='night-shift'] .ns-business { background:linear-gradient(180deg,#0e2839,var(--canvas)); }
body[data-direction='night-shift'] .ns-day-view { margin-top:72px; display:grid; grid-template-columns:1fr 1.1fr; gap:9%; align-items:center; }
body[data-direction='night-shift'] .ns-day-amount p { color:var(--muted); font-size:14px; }
body[data-direction='night-shift'] .ns-day-amount strong { display:block; font-size:clamp(58px,8vw,124px); line-height:1.1; color:var(--blue); letter-spacing:-.075em; font-weight:500; font-variant-numeric:tabular-nums; }
body[data-direction='night-shift'] .ns-day-amount > span { color:var(--muted); font-size:16px; }
body[data-direction='night-shift'] .ns-workspace-rows button { display:grid; grid-template-columns:1fr 1.5fr 18px; gap:18px; align-items:center; text-align:left; width:100%; padding:30px 0; border:0; border-bottom:1px solid var(--line); background:transparent; }
body[data-direction='night-shift'] .ns-workspace-rows button:hover { color:var(--blue); }
body[data-direction='night-shift'] .ns-workspace-rows small { color:var(--muted); font-size:14px; }
body[data-direction='night-shift'] .ns-setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:12%; margin-top:70px; }
body[data-direction='night-shift'] .ns-specs dl { display:grid; gap:26px; }
body[data-direction='night-shift'] .ns-specs dl > div { display:flex; justify-content:space-between; gap:25px; padding-bottom:20px; border-bottom:1px solid var(--line); }
body[data-direction='night-shift'] .ns-specs dt { color:var(--muted); font-size:15px; }
body[data-direction='night-shift'] .ns-specs dd { color:var(--blue); font-size:19px; }
body[data-direction='night-shift'] .ns-setup-form { background:var(--panel); padding:36px; border-radius:18px; border:1px solid var(--line); }
body[data-direction='night-shift'] .ns-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:10%; }
body[data-direction='night-shift'] .ns-close { background:radial-gradient(ellipse at 20% 100%,#1d5665,transparent 70%); border-top:1px solid var(--line); }
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-visual,
    body[data-direction='blueprint'] .bp-stations,
    body[data-direction='night-shift'] .ns-day-view { animation:extra-direction-enter linear both; animation-timeline:view(); animation-range:entry 0% entry 85%; }
  }
}
@keyframes extra-direction-enter { from { opacity:.25; translate:0 60px; } to { opacity:1; translate:0 0; } }
@media (max-width:899px) {
  body[data-direction='blueprint'] .bp-sale,
  body[data-direction='blueprint'] .bp-business,
  body[data-direction='blueprint'] .bp-setup-grid,
  body[data-direction='blueprint'] .bp-faq,
  body[data-direction='night-shift'] .ns-counter-grid,
  body[data-direction='night-shift'] .ns-day-view,
  body[data-direction='night-shift'] .ns-setup-grid,
  body[data-direction='night-shift'] .ns-faq { grid-template-columns:1fr; gap:55px; }
  body[data-direction='blueprint'] .bp-stations { grid-template-columns:1fr; gap:24px; }
  body[data-direction='blueprint'] .bp-stations li:not(:last-child)::after { content:'↓'; right:22px; top:auto; bottom:-27px; z-index:1; }
  body[data-direction='night-shift'] .ns-pass { grid-template-columns:1fr; }
  body[data-direction='blueprint'] .bp-ticket { max-width:600px; transform:none; }
}
@media (max-width:599px) {
  body[data-direction='blueprint'] .dock-screen .dock-intro { gap:14px; }
  body[data-direction='blueprint'] .dock-screen .dock-intro h1 { font-size:clamp(36px,10.4cqw,62px); }
  body[data-direction='blueprint'] .hero-art { width:170px; height:24px; }
  body[data-direction='night-shift'] .dock-screen .dock-intro { padding-left:0; }
  body[data-direction='night-shift'] .dock-screen .dock-intro h1 { font-size:clamp(34px,9.7cqw,62px); }
  body[data-direction='night-shift'] .hero-art { display:none; }
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-section { padding-block:80px; }
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-copy h2,
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-close h2 { font-size:clamp(42px,11.7vw,68px); }
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-nav { gap:4px 22px; font-size:12px; }
  body[data-direction='blueprint'] .bp-ticket,
  body[data-direction='blueprint'] .bp-setup-form,
  body[data-direction='night-shift'] .ns-receipt,
  body[data-direction='night-shift'] .ns-pass-ticket,
  body[data-direction='night-shift'] .ns-stock,
  body[data-direction='night-shift'] .ns-setup-form { padding:26px; }
  body[data-direction='blueprint'] .bp-workspace-list button { grid-template-columns:22px 1fr 18px; gap:12px; }
  body[data-direction='blueprint'] .bp-workspace-list button small { display:none; }
  body[data-direction='night-shift'] .ns-workspace-rows button { grid-template-columns:1fr 18px; }
  body[data-direction='night-shift'] .ns-workspace-rows small { grid-row:2; grid-column:1; }
  body[data-direction='night-shift'] .ns-day-view { grid-template-columns:minmax(0,1fr); }
  body[data-direction='night-shift'] .ns-day-amount strong { font-size:clamp(42px,11vw,64px); }
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .story-close { padding-block:90px; }
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .bp-setup-link,
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .ns-setup-link { display:flex; margin:20px 0 0; }
  body[data-direction='blueprint'] .bp-spec-sheet dl > div,
  body[data-direction='night-shift'] .ns-specs dl > div { flex-wrap:wrap; gap:8px 20px; }
}
@media (max-height:700px) {
  body[data-direction='blueprint'] .dock-screen .dock-intro h1 { font-size:clamp(36px,7.5cqw,82px); }
  body[data-direction='blueprint'] .hero-art { display:none; }
  body[data-direction='night-shift'] .dock-screen .dock-intro h1 { font-size:clamp(34px,7cqw,82px); }
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .dock-screen .dock-intro .hero-support { margin-top:12px; }
  body:is([data-direction='blueprint'],[data-direction='night-shift']) .hero-action { margin-top:14px; }
}