/* SSH Guru. Palette and face from the product itself. The engine stays untouched; this is the page. */
:root {
  --sc-canvas: #ECEEEB;
  --sc-surface: #F7F8F6;
  --sc-ink: #0F1511;
  --sc-ink-soft: #33403A;
  --sc-accent: #0A7040;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sc-font-text: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  --sc-shadow-color: 150 18% 12%;
  --sc-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --mint: #D5EADC;
  --deep: #0B4F2E;
  --hair: #D5D9D6;
  --strip-h: 60px;
  --fade: 200ms;
}
html[data-line="dead"] {
  --sc-canvas: #0B110D;
  --sc-surface: #151C18;
  --sc-ink: #F4F6F4;
  --sc-ink-soft: #B7C2BB;
  --sc-accent: #6FD6A0;
  --sc-accent-ink: #0B110D;
  --hair: #33403A;
}
html { scroll-padding-top: 0; }
body { background: var(--sc-canvas); }
::selection { background: var(--mint); color: #0F1511; }
h1, h2, h3, p, ol, ul, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
main { position: relative; display: block; overflow-x: clip; }
.lift { position: relative; z-index: 2; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.h2 {
  font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.1rem); text-wrap: balance;
}

/* ------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: 0 30px; border-radius: 12px; white-space: nowrap;
  background: #0A7040; color: #fff; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.015em; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(11,79,46,.4), 0 10px 22px -8px rgba(11,79,46,.55);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: 3px solid #0F1511; outline-offset: 3px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #0B4F2E; } }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .95rem; border-radius: 10px; }

/* ------------------------------------------------ status strip */
.strip {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--strip-h);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); padding: 0 clamp(1rem, 3vw, 2.5rem);
  background: var(--sc-canvas); color: var(--sc-ink); border-bottom: 1px solid var(--hair);
  transition: background-color var(--fade) linear, color var(--fade) linear, border-color var(--fade) linear;
}
.mark { display: inline-flex; align-items: center; gap: .5em; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em; color: inherit; text-decoration: none; }
.mark__dot { width: 14px; height: 14px; border-radius: 50%; background: #0A7040; box-shadow: 0 0 0 3px var(--mint); }
html[data-line="dead"] .mark__dot { background: #56635B; box-shadow: 0 0 0 3px #1c2520; }
.linestat { display: inline-flex; align-items: center; gap: .45em; font-family: var(--sc-font-mono); font-size: .82rem; white-space: nowrap; color: var(--sc-ink-soft); }
.linestat b { font-weight: 500; color: var(--sc-ink); }
.linestat i { width: 8px; height: 8px; border-radius: 50%; background: #0A7040; }
html[data-line="dead"] .linestat i { background: transparent; box-shadow: inset 0 0 0 1.5px #B7C2BB; }
.strip__nav { display: flex; gap: clamp(.9rem, 1.8vw, 1.6rem); margin-left: auto; }
.strip__nav a { color: var(--sc-ink-soft); text-decoration: none; font-weight: 500; font-size: .98rem; padding: .5rem .1rem; }
.strip__nav a:hover { color: var(--sc-ink); text-decoration: underline; text-underline-offset: .25em; }
html[data-line="dead"] .strip .btn { background: #6FD6A0; color: #0B110D; }
html[data-line="dead"] .strip .btn:focus-visible { outline-color: #F4F6F4; }

/* ------------------------------------------------ the cable */
.cable { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.c-body { stroke: url(#cg-body); stroke-width: 6; stroke-linecap: round; }
.c-sh { stroke: url(#cg-sh); stroke-width: 7; stroke-linecap: round; transform: translate(4px, 7px); }
.c-hi { stroke: rgba(255,255,255,.16); stroke-width: 1.4; transform: translate(-1.2px, -1.2px); }
html[data-line="dead"] .c-body, html[data-line="dead"] .c-hi { opacity: .34; }
.pk { position: absolute; left: 0; top: 0; z-index: 1; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #3FE08F; pointer-events: none; display: none; }
.dyn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.d-body, .d-out { stroke: #18201B; stroke-width: 6; stroke-linecap: round; }
.d-sh { stroke: rgba(15,21,17,.2); stroke-width: 7; stroke-linecap: round; transform: translate(4px, 7px); }
.d-hi { stroke: rgba(255,255,255,.16); stroke-width: 1.4; transform: translate(-1.2px, -1.2px); }
.d-pulse { stroke: #3FE08F; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 96; animation: pulse-run 1.5s linear infinite; }
@keyframes pulse-run { to { stroke-dashoffset: -97; } }
html[data-line="dead"] .d-pulse { display: none; }

/* marks for the cable path */
.wp { position: absolute; width: 0; height: 0; left: var(--x); top: var(--y); pointer-events: none; }
@media (max-width: 860px) { .wp { left: var(--mx, var(--x)); top: var(--my, var(--y)); } }

/* ------------------------------------------------ hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: clip; background: #E4E8E5; }
.hero__plate { position: absolute; inset: -6% -2% -14%; z-index: 0; }
.hero__plate img { width: 100%; height: 100%; object-fit: cover; }
.hero__copy { position: absolute; z-index: 3; left: var(--sc-gutter); top: calc(var(--strip-h) + clamp(1.5rem, 8vh, 5.5rem)); width: min(47vw, 44rem); }
.hero h1 {
  font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -0.042em; line-height: .98;
  font-size: clamp(3rem, min(6vw, 12vh), 6.4rem); text-wrap: balance;
}
.hero__sub { margin-top: clamp(1rem, 3vh, 1.75rem); max-width: 31rem; font-size: clamp(1.1rem, .95rem + .55vw, 1.42rem); line-height: 1.42; letter-spacing: -0.012em; color: #24302A; }
.hero__act { margin-top: clamp(1.25rem, 3.6vh, 2.25rem); display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1.25rem; }
.hero__act span { font-family: var(--sc-font-mono); font-size: .86rem; color: #33403A; }
.hero__router { position: absolute; z-index: 2; left: 40vw; bottom: 4vh; width: min(30vw, 480px); height: auto; max-width: none; filter: drop-shadow(10px 18px 16px rgba(15,21,17,.34)); }
.hero__window { position: absolute; z-index: 2; right: clamp(4.5rem, 9vw, 11rem); top: calc(var(--strip-h) + clamp(1.25rem, 6vh, 4rem)); width: min(38vw, 590px); }
.hero__guru { position: absolute; z-index: 3; right: clamp(.75rem, 2.4vw, 3rem); bottom: clamp(.5rem, 4vh, 3rem); height: min(46vh, 440px); width: auto; max-width: none; filter: drop-shadow(3px 8px 7px rgba(15,21,17,.3)); }
.hero__near { position: absolute; z-index: 4; left: -17vw; bottom: -9vh; width: 50vw; height: auto; max-width: none; rotate: -13deg; filter: blur(8px); pointer-events: none; }

.win { background: var(--sc-surface); color: #0F1511; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(15,21,17,.1), 0 22px 44px -14px rgba(15,21,17,.42), 0 50px 80px -30px rgba(15,21,17,.3); }
.win__bar { display: flex; align-items: center; gap: .7rem; height: 46px; padding: 0 14px; background: #F4F6F4; border-bottom: 1px solid #DCE3DE; font-size: 1rem; color: #0F1511; }
.win__bar b { font-weight: 700; letter-spacing: -0.015em; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #D5D9D6; }
.pill { display: inline-flex; align-items: center; gap: .4em; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--mint); color: #0B4F2E; font-family: var(--sc-font-mono); font-size: .76rem; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: #0A7040; }
html[data-line="dead"] .pill { background: #DCE3DE; color: #33403A; }
html[data-line="dead"] .pill i { background: transparent; box-shadow: inset 0 0 0 1.5px #56635B; }
.win__body { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(220px, 34vh, 340px); }
.win__chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; background: #F7F8F6; }
.bub { padding: 9px 12px; border-radius: 12px; font-size: .94rem; line-height: 1.32; letter-spacing: -0.01em; }
.bub--me { background: #0F1511; color: #F4F6F4; margin-left: 12%; border-bottom-right-radius: 4px; }
.bub--guru { background: #fff; color: #0F1511; box-shadow: 0 0 0 1px #DCE3DE; border-bottom-left-radius: 4px; }
.bub-row { display: flex; align-items: flex-end; gap: 8px; }
.ava { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.win__term, .term { background: #111713; color: #DCE3DE; font-family: var(--sc-font-mono); font-size: .8rem; line-height: 1.55; padding: 14px; white-space: pre-wrap; overflow: hidden; }
.win__term { display: flex; flex-direction: column; justify-content: flex-end; display: block; align-self: stretch; padding-top: clamp(40px, 12vh, 140px); }
.pr { color: #6FD6A0; }
.cur { display: inline-block; width: .55em; height: 1em; vertical-align: -0.14em; background: #6FD6A0; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------ approve */
.approve { position: relative; background: var(--sc-canvas); padding: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(4.5rem, 10vh, 7rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.approve__lead p { max-width: 30rem; color: var(--sc-ink-soft); }
.approve__lead .note { display: flex; gap: .7em; font-family: var(--sc-font-mono); font-size: .84rem; line-height: 1.5; color: #24302A; padding-top: .5rem; }
.note__dot { flex: none; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: #0A7040; }
.sess { background: var(--sc-surface); color: #0F1511; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(15,21,17,.08), 0 26px 50px -18px rgba(15,21,17,.34); }
.sess__wait { margin-left: auto; font-family: var(--sc-font-mono); font-size: .76rem; color: #0A7040; }
.sess__wait[data-idle] { color: #56635B; }
.sess__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: clamp(460px, 66vh, 610px); }
.chat { display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; scrollbar-width: thin; }
.chat > :first-child { margin-top: auto; }
.term { overflow-y: auto; scrollbar-width: thin; }
.term .ok { color: #B7C2BB; }
.term::after { content: "deploy@web-01:~$ \25AE"; color: #6FD6A0; }
.card { flex: none; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px #DCE3DE, 0 6px 14px -8px rgba(15,21,17,.28); padding: 12px; font-size: .92rem; line-height: 1.38; }
.card__top { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tier { font-family: var(--sc-font-mono); font-size: .71rem; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: #FBEFD5; color: #5E4306; }
.tier--ro { background: var(--mint); color: #0B4F2E; }
.tier--hot { background: #F8DEDA; color: #7A1E12; }
.card__by { font-family: var(--sc-font-mono); font-size: .71rem; color: #56635B; }
.card code { display: block; padding: 8px 10px; border-radius: 8px; background: #111713; color: #F4F6F4; font-family: var(--sc-font-mono); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.card p { margin-top: 8px; color: #33403A; }
.card__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.cbtn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #B7C2BB; background: #fff; color: #0F1511; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background-color 140ms var(--sc-ease-out), transform 110ms var(--sc-ease-out); }
.cbtn:active { transform: translateY(1px); }
.cbtn:hover { background: #F4F6F4; }
.cbtn--go { background: #0A7040; border-color: #0A7040; color: #fff; }
.cbtn--go:hover { background: #0B4F2E; }
.cbtn[disabled] { background: #E4E8E5; border-color: #D5D9D6; color: #56635B; cursor: not-allowed; }
.cbtn:focus-visible, .hostin:focus-visible { outline: 3px solid #0F1511; outline-offset: 2px; border-radius: 10px; }
.card--done { opacity: .72; }
.card--done .card__btns, .card--done .hostlabel { display: none; }
.hostin { flex: 1 1 8rem; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #56635B; background: #fff; color: #0F1511; font-family: var(--sc-font-mono); font-size: 1rem; }
.hostlabel { display: block; margin-top: 8px; font-size: .86rem; color: #33403A; }
[data-seq].seq-off { display: none; }
[data-seq], .chat > * { animation: chat-in 240ms var(--sc-ease-out) both; }
@keyframes chat-in { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------ keys */
.g-dark { --sc-ink: #F4F6F4; --sc-ink-soft: #C4CFC8; --sc-accent: #6FD6A0; --sc-accent-ink: #0B110D; color: #F4F6F4; }
.keys { position: relative; background: #0F1511; padding: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(4.5rem, 11vh, 7rem); }
.keys__lead { max-width: 42rem; }
.keys__lead p { color: var(--sc-ink-soft); }
.route { margin-top: clamp(1.75rem, 4.5vh, 3rem); }
.route__label { font-family: var(--sc-font-mono); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-ink-soft); }
.them { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .6rem; font-size: 1rem; color: var(--sc-ink-soft); }
.them li { display: inline-flex; align-items: center; gap: .45em; }
.them__bad { padding: .3rem .7rem; border-radius: 10px; box-shadow: inset 0 0 0 1px #56635B; color: #F4F6F4; }
.them__bad em { display: inline-flex; align-items: center; gap: .3em; font-style: normal; font-family: var(--sc-font-mono); font-size: .8rem; color: #F2B8AE; margin-left: .3em; }
.route__note { margin-top: .5rem; font-size: .98rem; color: var(--sc-ink-soft); }
.route--us { margin-top: clamp(2.25rem, 6vh, 4rem); }
.nodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.node { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.node__ic { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #0F1511; box-shadow: inset 0 0 0 2px #CFE6D7; color: #F4F6F4; font-size: 1.25rem; }
.node__ic .ic { position: relative; }
.node--key .node__ic { background: #6FD6A0; color: #0B110D; box-shadow: none; }
.node b { font-size: clamp(1.1rem, .95rem + .6vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; margin-top: .2rem; }
.node__tag { display: inline-flex; align-items: center; gap: .35em; font-family: var(--sc-font-mono); font-size: .84rem; color: var(--sc-ink-soft); }
.node--key .node__tag { color: #6FD6A0; }
.cipher { min-height: 1.5em; color: #9FB3A7; overflow-wrap: anywhere; }
.keys__last { margin-top: clamp(2.25rem, 6vh, 4rem); font-size: clamp(1.45rem, 1rem + 2vw, 2.5rem); font-weight: 700; letter-spacing: -0.028em; line-height: 1.12; max-width: 44rem; }

/* ------------------------------------------------ behind */
.behind { position: relative; background: #F4F6F4; padding: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(7rem, 16vh, 10rem); }
.behind__top { max-width: 54rem; }
.behind__top p { margin-top: 1rem; max-width: 36rem; color: var(--sc-ink-soft); }
.behind__cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2.25rem, 6vh, 4rem); padding-right: clamp(0rem, 3vw, 3rem); }
.col__n { display: flex; align-items: flex-end; gap: .9rem; margin-bottom: 1rem; }
.col__n span { font-weight: 800; font-size: clamp(3.5rem, 2.5rem + 3.4vw, 6rem); line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.col__n small { font-family: var(--sc-font-mono); font-size: .84rem; line-height: 1.3; padding-bottom: .55rem; max-width: 12rem; color: var(--sc-ink-soft); }
.col--old .col__n span { color: #56635B; }
.col--new .col__n span { color: #0A7040; }
.steps li { position: relative; padding: .55rem 0; border-top: 1px solid var(--hair); }
.steps--old li { font-size: 1rem; line-height: 1.38; color: #33403A; }
.steps--old span { background: linear-gradient(#56635B, #56635B) 0 56% / calc(var(--s, 0) * 100%) 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.steps--new li { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.places { margin-top: 1.25rem; font-size: 1rem; line-height: 1.5; color: var(--sc-ink-soft); }
.places span { white-space: nowrap; }
.places b { color: var(--sc-ink); font-weight: 700; }

/* ------------------------------------------------ unplug: the peak */
#unplug { position: relative; background: #0B110D; }
#unplug [data-sc-stage] { z-index: 3; background: #DDE3E0; overflow: clip; }
.u-plate { position: absolute; inset: -4%; }
.u-plate img { width: 100%; height: 100%; object-fit: cover; }
.u-router { position: absolute; right: -3vw; top: 12vh; width: min(34vw, 540px); height: auto; max-width: none; filter: drop-shadow(10px 18px 16px rgba(15,21,17,.34)); }
.u-rig { position: absolute; inset: 0; }
.u-plug { position: absolute; width: var(--plug-w); height: auto; max-width: none; left: var(--plug-x); top: var(--port-y); margin-top: calc(var(--plug-w) * -0.1); filter: drop-shadow(3px 7px 5px rgba(15,21,17,.32)); user-select: none; -webkit-user-drag: none; }
.u-board { position: absolute; left: var(--board-x); top: var(--board-y); width: var(--board-w); rotate: 20deg; filter: drop-shadow(5px 12px 9px rgba(15,21,17,.34)); }
.u-board img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.u-led { position: absolute; left: 37.5%; top: 47%; width: 2.2%; aspect-ratio: 1; border-radius: 50%; background: #54F29E; box-shadow: 0 0 6px 2px rgba(84,242,158,.75); transition: opacity 80ms linear; }
html[data-line="dead"] .u-led { opacity: 0; }
.u-grab { position: absolute; left: calc(var(--plug-x) + var(--plug-w) * .3); top: calc(var(--port-y) - 40px); width: calc(var(--plug-w) * .72); height: 80px; cursor: grab; touch-action: pan-y; z-index: 6; }
.u-grab:active { cursor: grabbing; }
.u-stage {
  --plug-w: min(27vw, 400px);
  --port-y: 60vh;
  --board-w: min(25vw, 370px);
  --plug-x: 43vw;
  --board-x: calc(43vw + var(--plug-w) * .87);
  --board-y: calc(60vh - var(--board-w) * .39);
}
.u-night { position: absolute; inset: 0; background: #070C09; opacity: 0; transition: opacity 500ms var(--sc-ease-out); pointer-events: none; }
html[data-line="dead"] .u-night { opacity: .92; transition-duration: 70ms; }
.u-copy { position: absolute; z-index: 5; left: var(--sc-gutter); top: calc(var(--strip-h) + clamp(1.75rem, 9vh, 5.5rem)); width: min(36vw, 36rem); display: grid; color: #0F1511; }
.u-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 260ms var(--sc-ease-out), transform 320ms var(--sc-ease-out), visibility 0s linear 260ms; }
.u-panel.on { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out), visibility 0s; }
.u-panel p { margin-top: 1rem; max-width: 31rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.42; color: #24302A; }
.u-panel .h2 { font-size: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); }
.u-panel[data-phase="dead"] { color: #F4F6F4; }
.u-panel[data-phase="dead"] p { color: #C4CFC8; }
.u-panel[data-phase="dead"] .h2 { font-size: clamp(2.8rem, 1.5rem + 5vw, 6rem); }
.u-btn { grid-area: 2 / 1; justify-self: start; margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .55em; min-height: 52px; padding: 0 20px 0 16px; border-radius: 12px; border: 1.5px solid #0F1511; background: #F7F8F6; color: #0F1511; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.012em; cursor: pointer; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 110ms var(--sc-ease-out); }
.u-btn:active { transform: translateY(1px); }
.u-btn:hover { background: #fff; }
.u-btn:focus-visible { outline: 3px solid #0F1511; outline-offset: 3px; border-radius: 12px; }
html[data-line="dead"] .u-btn { background: #6FD6A0; border-color: #6FD6A0; color: #0B110D; }
html[data-line="dead"] .u-btn:focus-visible { outline-color: #F4F6F4; }

/* ------------------------------------------------ parts */
.parts { position: relative; background: var(--sc-canvas); padding: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(4rem, 9vh, 6rem); }
.parts__top { max-width: 44rem; }
.parts__top p { margin-top: 1rem; color: var(--sc-ink-soft); max-width: 36rem; }
.objs { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 5vh, 3.5rem); align-items: end; }
.obj__pic { height: clamp(150px, 30vh, 280px); display: flex; align-items: flex-end; margin-bottom: 1.1rem; }
.obj__pic img { max-height: 100%; width: auto; max-width: 100%; height: auto; filter: drop-shadow(5px 11px 9px rgba(15,21,17,.3)); }
.obj--switch .obj__pic img { rotate: 8deg; max-height: 92%; }
.obj h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.obj__spec { margin-top: .35rem; font-family: var(--sc-font-mono); font-size: .8rem; line-height: 1.4; color: var(--sc-ink-soft); }
.obj p:last-child { margin-top: .4rem; font-size: .98rem; line-height: 1.38; color: var(--sc-ink-soft); }

/* ------------------------------------------------ watch */
.watch { position: relative; background: #0B4F2E; padding: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(4.5rem, 10vh, 7rem); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.watch__copy p { color: #E4EFE8; max-width: 34rem; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; max-width: 32rem; }
.sc-stack > .checks { margin-top: 1.25rem; }
.checks li { display: flex; align-items: center; gap: .6em; padding: .55rem 0; border-top: 1px solid rgba(213,234,220,.28); font-weight: 500; font-size: 1.02rem; color: #fff; }
.watch__foot { font-family: var(--sc-font-mono); font-size: .86rem; line-height: 1.5; }
.watch__pic { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 600 / 770; max-height: 78vh; justify-self: end; width: 100%; max-width: 560px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.6); }
.watch__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tg { position: absolute; left: 39.2%; width: 30.200%; top: 13%; background: #F7F8F6; color: #0F1511; border-radius: 10px; padding: 8px 9px; font-size: clamp(.62rem, .86vw, .8rem); line-height: 1.28; box-shadow: 0 8px 18px -6px rgba(0,0,0,.6); container-type: inline-size; }
.tg__from { display: flex; align-items: center; gap: .35em; font-weight: 700; margin-bottom: .3em; }
.tg__from time { margin-left: auto; font-family: var(--sc-font-mono); font-weight: 400; color: #33403A; }
.tg__from .ic { color: #0A7040; }
.tg__btns { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .5em; }
.tg__btns span { padding: .2em .45em; border-radius: 5px; background: #E4E8E5; font-weight: 600; font-size: .92em; }

/* ------------------------------------------------ price */
.price { position: relative; background: var(--sc-canvas); padding: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(4rem, 9vh, 6rem); }
.plans { margin-top: clamp(1.75rem, 4vh, 3rem); border-bottom: 1px solid var(--hair); }
.plan { display: grid; grid-template-columns: minmax(6rem, 2fr) minmax(8rem, 3fr) minmax(0, 9fr); gap: 1.25rem; padding: 1.15rem 0; border-top: 1px solid var(--hair); align-items: baseline; }
.plan h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.plan__cost { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__cost small { font-size: .95rem; font-weight: 500; letter-spacing: -0.01em; color: var(--sc-ink-soft); }
.plan ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-size: 1rem; line-height: 1.4; color: #24302A; }
.plan li { position: relative; padding-left: .95em; }
.plan li::before { content: ""; position: absolute; left: 0; top: .55em; width: .38em; height: .38em; border-radius: 50%; background: #0A7040; }

/* ------------------------------------------------ close */
.close { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; background: #E4E8E5; display: flex; flex-direction: column; }
.close__plate { position: absolute; inset: 0; z-index: 0; }
.close__plate img { width: 100%; height: 100%; object-fit: cover; }
.close .dyn { z-index: 1; }
.close__in { position: relative; z-index: 2; flex: 1; padding: clamp(5.5rem, 14vh, 8.5rem) var(--sc-gutter) 1rem; }
.h1like { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -0.042em; line-height: .98; font-size: clamp(2.9rem, min(6.5vw, 12.6vh), 6.9rem); max-width: 13em; text-wrap: balance; }
.ticket { margin-top: clamp(1rem, 3.5vh, 2rem); max-width: 30rem; padding-left: 0; font-family: var(--sc-font-mono); font-size: .92rem; line-height: 1.5; color: #24302A; }
.ticket__h { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #33403A; margin-bottom: .2rem; }
.port { position: relative; display: flex; align-items: center; margin-top: clamp(1.5rem, 4.5vh, 2.75rem); --pw: min(30vw, 400px); }
.port__plug { position: relative; z-index: 1; flex: none; width: var(--pw); height: auto; max-width: none; margin-right: -1.5rem; transform: translateX(var(--c-off, -60px)); filter: drop-shadow(3px 7px 5px rgba(15,21,17,.32)); }
.btn--port { position: relative; z-index: 2; min-height: 76px; padding: 0 38px 0 40px; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); border-radius: 16px; }
.socket { position: absolute; left: 12px; top: 50%; width: 9px; height: 26px; margin-top: -13px; border-radius: 5px; background: #0B4F2E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: background-color 120ms linear; }
.close.in .socket { background: #54F29E; box-shadow: 0 0 8px rgba(84,242,158,.8); }
.close.in .btn--port { animation: bump 240ms var(--sc-ease-out); }
@keyframes bump { 35% { transform: translateX(3px) scale(1.012); } }
.close__small { margin-top: .9rem; font-family: var(--sc-font-mono); font-size: .86rem; color: #33403A; margin-left: calc(var(--sc-gutter) * 0); }
.close__guru { position: absolute; z-index: 2; right: clamp(1rem, 6vw, 7rem); bottom: clamp(3.75rem, 11vh, 7rem); height: min(50vh, 460px); width: auto; max-width: none; filter: drop-shadow(3px 8px 7px rgba(15,21,17,.3)); }
.foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: 1rem var(--sc-gutter) 1.25rem; font-size: .92rem; color: #24302A; }
.mark--foot { font-size: 1rem; color: #0F1511; }
.mark--foot .mark__dot { width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--mint); }

/* ------------------------------------------------ phone */
@media (max-width: 860px) {
  :root { --strip-h: 56px; }
  .strip__nav { display: none; }
  .strip .btn { margin-left: auto; }
  .linestat { font-size: .74rem; }
  .c-body { stroke-width: 4; }
  .c-sh { stroke-width: 4.5; transform: translate(2px, 4px); }
  .d-body, .d-out { stroke-width: 4; }
  .d-sh { stroke-width: 4.5; transform: translate(2px, 4px); }
  .hero__copy { width: auto; right: var(--sc-gutter); top: calc(var(--strip-h) + 1.5rem); }
  .hero h1 { font-size: clamp(2.75rem, 12.8vw, 4.6rem); }
  .hero__sub { font-size: 1.1rem; max-width: 34rem; padding-right: .25rem; }
  .hero__act span { font-size: .8rem; }
  .hero__window { right: auto; left: var(--sc-gutter); top: auto; bottom: 6.5vh; width: 64vw; }
  .win__body { grid-template-columns: 1fr; min-height: 0; }
  .win__chat { padding: 10px; }
  .bub { font-size: .8rem; padding: 7px 9px; }
  .ava { width: 24px; height: 24px; }
  .win__term { display: none; }
  .win__bar { height: 36px; font-size: .86rem; gap: .5rem; padding: 0 10px; }
  .dots { display: none; }
  .hero__router { left: auto; right: -14vw; bottom: 11vh; width: 74vw; }
  .hero__guru { right: 1vw; bottom: 1.5vh; height: 24vh; }

  .approve { display: block; padding-bottom: 3.5rem; }
  .sess { margin-top: 1.75rem; margin-right: 6px; }
  .sess__body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: auto; }
  .chat { height: 440px; padding: 12px; }
  .term { height: 150px; font-size: .74rem; padding: 10px 12px; }
  .sess__wait { font-size: .7rem; }
  .sess .dots { display: none; }

  .keys, .behind, .parts, .watch, .price { padding-left: calc(var(--sc-gutter) + 2px); padding-right: var(--sc-gutter); }
  .them { font-size: .92rem; gap: .35rem .6rem; }
  .them__bad em { margin-left: 0; }
  .nodes { grid-template-columns: 1fr; gap: 1.1rem; }
  .node { display: grid; grid-template-columns: 56px 1fr; column-gap: .9rem; align-items: center; }
  .node__ic { width: 52px; height: 52px; grid-row: 1 / span 2; font-size: 1.05rem; }
  .node b { margin-top: 0; align-self: end; }
  .node__tag { align-self: start; font-size: .78rem; }

  .behind { padding-bottom: 3.5rem; }
  .behind__cols { grid-template-columns: 1fr; padding-right: 0; }

  .u-copy { width: auto; right: var(--sc-gutter); top: calc(var(--strip-h) + 1.1rem); left: calc(var(--sc-gutter) + 2px); }
  .u-panel p { font-size: 1.02rem; margin-top: .6rem; }
  .u-panel .h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .u-panel[data-phase="dead"] .h2 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .u-btn { grid-area: auto; position: absolute; left: 0; top: min(calc(100svh - var(--strip-h) - 14rem), 34rem); margin: 0; }
  .u-stage {
    --plug-w: 56vw;
    --board-w: 50vw;
    --port-y: 52svh;
    --plug-x: -9vw;
    --board-x: calc(-9vw + var(--plug-w) * .88);
    --board-y: calc(52svh - var(--board-w) * .39);
  }
  .u-router { top: auto; right: -22vw; bottom: 12vh; width: 72vw; }

  .objs { grid-template-columns: 1fr; gap: 2rem; }
  .obj__pic { height: 170px; }
  .watch { display: block; }
  .watch__pic { margin-top: 2rem; max-height: none; max-width: none; }
  .watch__pic img { inset: auto; left: -38%; top: -10%; width: 176%; height: auto; max-width: none; object-fit: fill; }
  .tg { left: 16%; width: 66%; top: 16%; font-size: .84rem; padding: 10px 12px; }

  .plan { grid-template-columns: 1fr auto; gap: .4rem 1rem; }
  .plan ul { grid-column: 1 / -1; flex-direction: column; font-size: .98rem; }

  .close__in { padding: calc(var(--strip-h) + 2.5rem) var(--sc-gutter) .5rem; padding-left: calc(var(--sc-gutter) + 2px); }
  .h1like { font-size: clamp(2.6rem, 12vw, 4.4rem); }
  .ticket { font-size: .86rem; }
  .port { --pw: 36vw; margin-left: calc(var(--sc-gutter) * -1); }
  .btn--port { min-height: 68px; padding: 0 26px 0 34px; font-size: 1.28rem; }
  .close__small { font-size: .8rem; }
  .close__guru { height: 19vh; right: 3vw; bottom: 5.5rem; }
  .foot { font-size: .82rem; padding-bottom: 6rem; padding-right: 10rem; }
}
@media (max-width: 400px) {
  .linestat b { display: none; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .close__guru { height: 14vh; bottom: 4.5rem; }
}
@media (max-height: 700px) and (min-width: 861px) {
  .hero__guru { height: 40vh; }
}

/* ------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  [data-seq], .chat > * { animation: none; }
  .cur, .d-pulse { animation: none; }
  .u-panel, .u-panel.on { transform: none; transition-duration: 120ms; }
  .close.in .btn--port { animation: none; }
  .u-night { transition-duration: 120ms; }
}