@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300..700&display=swap');
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.kb-stage :focus-visible{outline-color:var(--stage-ink)}
.kb-on-signal :focus-visible{outline-color:var(--on-signal)}
a{color:inherit}
.kb-pad{padding:var(--space-6)}
.kb-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.kb-col{display:flex;flex-direction:column;gap:var(--space-3)}
.kb-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:var(--space-2)}
.kb-label{font-size:13px;line-height:1.3;font-weight:500;color:var(--ink-muted)}
.kb-data{font-family:var(--font-sans);font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums}
/* logo */
.kb-logo{display:inline-block;color:var(--ink);font-family:var(--font-sans);font-weight:500;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.kb-stage .kb-logo{color:var(--stage-ink)}
.kb-on-signal .kb-logo{color:var(--on-signal)}
/* schematic */
.kb-schem{--kb-accent:var(--signal-line);--kb-bg:var(--ground);color:var(--ink);display:block}
.kb-schem svg{display:block;width:100%;height:auto}
.kb-stage .kb-schem{--kb-accent:var(--stage-ink);--kb-bg:var(--stage);color:var(--stage-ink)}
.kb-panel .kb-schem{--kb-bg:var(--panel-100)}
/* icon */
.kb-icon{display:inline-block;vertical-align:middle;flex:none}
/* buttons */
.kb-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:44px;padding:0 22px;border-radius:var(--radius-pill);border:0;font:500 16px/1 var(--font-sans);letter-spacing:-.005em;cursor:pointer;text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.kb-btn-sm{height:34px;padding:0 16px;font-size:14px}
.kb-btn-primary{background:var(--signal);color:var(--on-signal)}
.kb-btn-primary:hover{background:var(--signal-pressed)}
.kb-btn-primary:active{background:var(--signal-pressed)}
.kb-btn-secondary{background:var(--glass);color:var(--ink);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
.kb-btn-secondary:hover{background:var(--panel-200)}
.kb-btn-secondary:active{background:var(--panel-300)}
.kb-btn-inverse{background:var(--ink);color:var(--ground)}
.kb-btn-inverse:hover{background:var(--ink-muted)}
.kb-stage .kb-btn-secondary{background:var(--glass-stage);color:var(--stage-ink)}
.kb-stage .kb-btn-secondary:hover{background:var(--glass-stage);opacity:.85}
.kb-stage .kb-btn-inverse{background:var(--stage-ink);color:var(--stage)}
.kb-btn[disabled]{background:var(--panel-300);color:var(--ink-faint);-webkit-backdrop-filter:none;backdrop-filter:none;cursor:not-allowed}
.kb-arrow{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:500;text-decoration:none;color:inherit}
.kb-arrow .kb-icon{transition:transform .2s ease}
.kb-arrow:hover .kb-icon{transform:translateX(4px)}
/* header/footer */
.kb-header{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-8);height:64px;padding:0 var(--space-8);background:transparent}
.kb-header nav{display:flex;gap:var(--space-6);flex:1;justify-content:center}
.kb-header nav a{font-size:14px;color:var(--ink-muted);text-decoration:none}
.kb-header nav a:hover{color:var(--ink)}
@media(max-width:760px){.kb-header nav{display:none}.kb-header{justify-content:space-between;padding:0 var(--space-4)}}
.kb-footer{padding:var(--space-16) var(--space-8) var(--space-8);display:flex;flex-direction:column;gap:var(--space-12)}
.kb-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-8)}
.kb-footer-cols a{display:block;color:var(--ink-muted);font-size:14px;text-decoration:none;padding:3px 0}
.kb-footer-cols a:hover{color:var(--ink)}
.kb-footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);color:var(--ink-faint);font-size:14px}
/* hero: full-bleed, statement bottom-left */
.kb-hero{position:relative;min-height:720px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;background:var(--ground)}
.kb-hero-art{position:absolute;left:0;right:0;bottom:0}
.kb-hero-art .kb-schem{width:100%}
.kb-hero-c{position:relative;padding:var(--space-16) var(--space-8) 0;display:flex;flex-direction:column;gap:var(--space-4);max-width:900px}
.kb-hero h1{margin:0;font-size:clamp(52px,8.5vw,112px);line-height:.98;font-weight:500;letter-spacing:-.04em}
.kb-hero p{margin:0;font-size:20px;line-height:1.45;color:var(--ink-muted);max-width:var(--text-max)}
.kb-hero-a{margin-top:var(--space-2)}
/* full-screen feature panel */
.kb-feat{position:relative;min-height:680px;display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:var(--space-8);align-items:end;padding:var(--space-16) var(--space-8);overflow:hidden;background:var(--ground)}
.kb-feat.kb-stage{background:var(--stage)}
.kb-feat.alt{background:var(--panel-100)}
.kb-feat.alt .kb-schem{--kb-bg:var(--panel-100)}
.kb-feat h2{margin:0;font-size:clamp(44px,6vw,84px);line-height:1;font-weight:500;letter-spacing:-.035em}
.kb-feat p{margin:var(--space-3) 0 var(--space-6);font-size:20px;line-height:1.45;color:var(--ink-muted);max-width:32ch}
.kb-feat.kb-stage p{color:var(--stage-muted)}
.kb-feat .kb-schem{align-self:center}
@media(max-width:800px){.kb-feat{grid-template-columns:1fr}}
/* section */
.kb-section{padding:var(--space-24) var(--space-8);max-width:var(--container-max);margin:0 auto}
.kb-section-head{margin-bottom:var(--space-12);max-width:820px}
.kb-section-head h2{margin:0;font-size:clamp(38px,5.4vw,72px);line-height:1.02;letter-spacing:-.035em;font-weight:500}
/* monogram */
.kb-mono{display:inline-block;line-height:0;color:var(--ink)}
.kb-mono svg{display:block;width:100%;height:100%}
.kb-stage .kb-mono{color:var(--stage-ink)}
/* product card */
.kb-card{border-radius:var(--radius-panel);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);min-height:440px;text-decoration:none;color:inherit;overflow:hidden}
.kb-panel{background:var(--panel-100);color:var(--ink)}
.kb-stage{background:var(--stage);color:var(--stage-ink)}
.kb-stage .kb-label{color:var(--stage-muted)}
.kb-on-signal{background:var(--signal);color:var(--on-signal)}
.kb-on-signal .kb-label{color:var(--on-signal)}
.kb-card h3{margin:0;font-size:44px;line-height:1.08;letter-spacing:-.025em;font-weight:500}
.kb-card p{margin:0;color:var(--ink-muted);max-width:40ch}
.kb-stage.kb-card p{color:var(--stage-muted)}
.kb-card-art{flex:1;display:flex;align-items:center;justify-content:center;margin-top:auto}
.kb-doc .kb-schem{--kb-bg:var(--panel-200)}
.kb-card-art .kb-schem{width:100%;max-width:560px}
/* spec */
.kb-spec{width:100%;border-collapse:collapse}
.kb-spec th,.kb-spec td{padding:14px 0;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:baseline}
.kb-spec th{font-family:var(--font-sans);font-size:12px;font-weight:500;color:var(--ink-muted);width:40%}
.kb-spec td{font-family:var(--font-sans);font-size:14px;font-variant-numeric:tabular-nums}
.kb-spec tr:first-child th,.kb-spec tr:first-child td{border-top:1px solid var(--hairline)}
.kb-stage .kb-spec th{color:var(--stage-muted)}
.kb-stage .kb-spec th,.kb-stage .kb-spec td{border-color:var(--stage-hairline)}
/* news */
.kb-news{display:grid;grid-template-columns:120px 1fr auto;gap:var(--space-6);align-items:baseline;padding:var(--space-6) 0;border-top:1px solid var(--hairline);text-decoration:none;color:inherit}
.kb-news b{font-weight:500;font-size:26px;line-height:1.2;letter-spacing:-.015em}
@media(max-width:640px){.kb-news{grid-template-columns:1fr}}
/* field */
.kb-field{display:flex;flex-direction:column;gap:var(--space-2)}
.kb-field input{height:44px;padding:0 var(--space-3);background:var(--panel-300);border:1px solid var(--control-border);border-radius:var(--radius-control);color:var(--ink);font:400 16px var(--font-sans)}
.kb-field input::placeholder{color:var(--ink-faint)}
.kb-field small{color:var(--ink-muted);font-size:14px}
.kb-field.is-error input{border-color:var(--ink);border-width:2px}
.kb-field.is-error small{color:var(--ink)}
/* operator */
.kb-hud{font-family:var(--font-sans);color:var(--ink)}
.kb-status{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--font-sans);white-space:nowrap}
.kb-status>span:first-child{font-size:8px}
.kb-status-nominal{color:var(--ink-muted)}
.kb-status-standby{color:var(--ink-muted)}
.kb-status-offline{color:var(--ink-faint)}
.kb-status-caution{background:var(--signal);color:var(--on-signal);height:20px;padding:0 8px;border-radius:var(--radius-pill)}
.kb-status-critical{background:var(--ink);color:var(--ground);height:20px;padding:0 8px;border-radius:var(--radius-pill)}
.kb-tele{display:flex;flex-direction:column;gap:4px;min-width:0}
.kb-tele-v{font:300 30px/1.1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kb-tele-v small{font:400 13px var(--font-sans);color:var(--ink-faint);letter-spacing:0;margin-left:4px}
.kb-tele.is-caution .kb-tele-v{background:var(--signal);color:var(--on-signal);align-self:flex-start;padding:0 6px;margin-left:-6px;border-radius:6px}
.kb-tele.is-caution .kb-tele-v small{color:var(--on-signal)}
.kb-cpanel{background:var(--panel-200);border-radius:var(--radius-float);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.kb-cpanel-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:14px var(--space-4) 6px}
.kb-cpanel-b{padding:6px var(--space-4) var(--space-4);flex:1;min-height:0}
.kb-feed{position:relative;background:var(--panel-300);overflow:hidden;aspect-ratio:16/9;width:100%;border-radius:var(--radius-control)}
.kb-feed-tex{position:absolute;inset:0;width:100%;height:100%;color:var(--ink-faint)}
.kb-feed-ov{position:absolute;inset:var(--space-3);display:flex;flex-direction:column;justify-content:space-between;font:400 11px/1.3 var(--font-sans);pointer-events:none;color:var(--ink-muted)}
.kb-feed-ov>div{display:flex;justify-content:space-between;gap:var(--space-3)}
.kb-feed-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;color:var(--signal-line)}
.kb-fleet{list-style:none;margin:0 -8px;padding:0;display:flex;flex-direction:column;gap:2px}
.kb-fleet li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:9px 8px;border-radius:var(--radius-control);cursor:pointer}
.kb-fleet li:hover{background:var(--panel-200)}
.kb-fleet li.is-sel{background:var(--panel-300)}
.kb-fleet-a{display:flex;flex-direction:column;gap:5px;min-width:0}
.kb-fleet-a b{font:500 14px/1.2 var(--font-sans)}
.kb-fleet-b{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:400 12px/1 var(--font-sans);color:var(--ink-muted);font-variant-numeric:tabular-nums}
.kb-fleet-b i{display:block;width:44px;height:2px;background:var(--panel-300);border-radius:2px;overflow:hidden}
.kb-fleet li.is-sel .kb-fleet-b i{background:var(--control-border)}
.kb-fleet-b u{display:block;height:100%;background:var(--ink)}
.kb-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kb-tl li{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:baseline;font:400 14px/1.3 var(--font-sans);padding-bottom:14px;position:relative}
.kb-tl li:not(:last-child)::before{content:"";position:absolute;left:5px;top:12px;bottom:-4px;width:1px;background:var(--hairline)}
.kb-tl time{color:var(--ink-faint);font:400 12px var(--font-sans)}
.kb-tl i{width:7px;height:7px;margin-left:2px;border:1px solid var(--ink-faint);border-radius:50%;display:block;background:var(--panel-200);position:relative;align-self:center}
.kb-tl .is-done i{background:var(--ink-faint)}
.kb-tl .is-now i{background:var(--signal);border-color:var(--ink);width:9px;height:9px;margin-left:1px}
.kb-tl .is-done,.kb-tl .is-next{color:var(--ink-muted)}
.kb-map{display:block;width:100%;height:100%;background:var(--ground)}
.kb-alert{display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-4);border-radius:var(--radius-control);background:var(--signal);color:var(--on-signal);font:400 14px/1.35 var(--font-sans)}
.kb-alert b{font-weight:500}
.kb-alert span{flex:1}
.kb-alert-critical{background:var(--ink);color:var(--ground)}
.kb-alert-critical .kb-icon{color:var(--signal)}
.kb-hold{position:relative;appearance:none;height:44px;min-width:190px;padding:0 var(--space-6);overflow:hidden;background:var(--signal);border:0;border-radius:var(--radius-pill);color:var(--on-signal);font:500 14px/1 var(--font-sans);cursor:pointer;user-select:none;touch-action:none}
.kb-hold-fill{position:absolute;inset:0;background:var(--stage-ink);opacity:.22;transform-origin:left;transform:scaleX(0)}
.kb-hold.is-held .kb-hold-fill{transform:scaleX(1);transition:transform var(--kb-hold-ms,1500ms) linear}
.kb-hold-t{position:relative}
.kb-hold.is-done{background:var(--panel-300);color:var(--ink)}
.kb-hold.is-done .kb-hold-fill{display:none}
.kb-htape{height:44px;overflow:hidden;color:var(--ink-muted)}
.kb-htape svg{display:block;width:100%;height:100%}
.kb-hud .kb-btn{height:44px}
/* console layout */
.kb-console{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ground)}
.kb-console>.kb-map{position:absolute;inset:0}
.kb-float{position:absolute;display:flex;flex-direction:column;gap:var(--space-2)}
/* slide & doc */
.kb-slide{aspect-ratio:16/9;width:100%;padding:5.5% 6%;position:relative;overflow:hidden;display:flex;flex-direction:column;container-type:inline-size;border:1px solid var(--hairline)}
.kb-slide.bg-ground{background:var(--ground)}
.kb-slide.kb-stage,.kb-slide.kb-on-signal{border-color:transparent}
.kb-slide h2{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.02;font-size:7cqw}
.kb-slide p{margin:0;font-size:1.9cqw;line-height:1.4}
.kb-slide .kb-label{font-size:1.4cqw}
.kb-slide-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end}
.kb-doc{background:var(--panel-200);color:var(--ink);aspect-ratio:210/297;padding:7%;display:flex;flex-direction:column;gap:var(--space-4);container-type:inline-size;width:100%}
.kb-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);padding:var(--space-6) var(--space-8) var(--space-12);font-size:16px;background:var(--ground)}
.kb-steps b{display:block;font-weight:300;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:var(--space-1)}
@media(max-width:700px){.kb-steps{grid-template-columns:1fr}}