/* Kinobi workstation v4: flat SVG materials and an illustrative eight-second screen cycle. */

.workstation{--shell:#e9e5dd;--side:#c9c2b6;--top:#faf7ef;--seam:#b9b1a4;--edge:#cec7ba;--lip:#fffdf7;--inset:#dcd6ca;--metal:#a49b8b;--etch:#70695d;--foot:#d8d1c4;--rubber:#57544b;--glass:#242824;--gasket:#494b43;--glass-edge:#131713;--screen-line:#8b9180;--screen-soft:#40483c;--orange:#ea580c;display:block;width:100%;height:auto}
@media(prefers-color-scheme:dark){.workstation{--shell:#4b4841;--side:#34322c;--top:#6b6458;--seam:#756d60;--edge:#595348;--lip:#9a8f7c;--inset:#3d3a33;--metal:#797060;--etch:#c2b7a3;--foot:#4e493f;--rubber:#25241e;--glass:#1c221d;--gasket:#121813;--glass-edge:#101610;--screen-line:#8c9783;--screen-soft:#364233;--orange:#fb923c}}
.workstation text{font-family:'Geist Mono',monospace;font-weight:400}

/* Eight-second illustrative work cycle. No geometry outside these classes animates. */
.workstation-v4 .work-line{stroke-dasharray:100;stroke-dashoffset:0;opacity:var(--line-alpha);animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:linear}
.workstation-v4 .work-line-1{animation-name:work-v4-line-one}
.workstation-v4 .work-line-2{animation-name:work-v4-line-two}
.workstation-v4 .work-line-3{animation-name:work-v4-line-three}
@keyframes work-v4-line-one{0%{stroke-dashoffset:100;opacity:var(--line-alpha)}6.25%,87.5%{stroke-dashoffset:0;opacity:var(--line-alpha)}95%{stroke-dashoffset:0;opacity:0}95.01%,100%{stroke-dashoffset:100;opacity:0}}
@keyframes work-v4-line-two{0%,6.25%{stroke-dashoffset:100;opacity:var(--line-alpha)}12.5%,87.5%{stroke-dashoffset:0;opacity:var(--line-alpha)}95%{stroke-dashoffset:0;opacity:0}95.01%,100%{stroke-dashoffset:100;opacity:0}}
@keyframes work-v4-line-three{0%,12.5%{stroke-dashoffset:100;opacity:var(--line-alpha)}18.75%,87.5%{stroke-dashoffset:0;opacity:var(--line-alpha)}95%{stroke-dashoffset:0;opacity:0}95.01%,100%{stroke-dashoffset:100;opacity:0}}
.workstation-v4 .work-cursor{animation:work-v4-cursor-cycle 8s steps(1,end) infinite}
@keyframes work-v4-cursor-cycle{0%{opacity:0}18.75%{opacity:1}21.875%{opacity:0}25%{opacity:1}28.125%,100%{opacity:0}}
.workstation-v4 .indicator-lens{animation:work-v4-indicator-cycle 8s ease-in-out infinite}
@keyframes work-v4-indicator-cycle{0%,18.75%{opacity:.72}23.5%{opacity:1}31.25%,100%{opacity:.72}}
.workstation-v4[data-paused="true"] .work-line,.workstation-v4[data-paused="true"] .work-cursor,.workstation-v4[data-paused="true"] .indicator-lens{animation-play-state:paused}
.workstation-v4[data-static="true"] .work-line{animation:none;stroke-dashoffset:0;opacity:var(--line-alpha)}
.workstation-v4[data-static="true"] .work-cursor{animation:none;opacity:0}
.workstation-v4[data-static="true"] .indicator-lens{animation:none;opacity:.72}
@media(prefers-reduced-motion:reduce){.workstation-v4 .work-line{animation:none;stroke-dashoffset:0;opacity:var(--line-alpha)}.workstation-v4 .work-cursor{animation:none;opacity:0}.workstation-v4 .indicator-lens{animation:none;opacity:.72}}

/* Standalone workstation and its capabilities. Keep the figure secondary to the hero. */
.computer-figure{width:100%;max-width:340px;margin:0 auto 16px}
.card .hd{padding:0 0 18px;gap:0;text-align:center}
.card .ttl{font-size:14px;font-weight:500}
.rows{padding:0}
.row{padding:10px 0;grid-template-columns:64px minmax(0,1fr)}
.row dt{font-size:11px}
.row .x{overflow-wrap:anywhere}
.card .row:last-child{border-bottom:1px solid var(--hair)}
.side{max-width:340px}
.status i{animation:none}
/* Fit the full desktop composition by spending less height on empty space and
   illustration size. Text stays at its normal reading size; content can grow. */
@media(min-width:981px){
  .computer-figure{width:clamp(160px,calc((100svh - 550px)*1.3333),340px);margin-bottom:8px}
  .card .hd{padding-bottom:12px}
  .row{padding:8px 0}
  .base{padding-top:20px}
}
@media(min-width:981px) and (max-width:1100px){
  :root{--column-gap:24px}
}
@media(min-width:981px) and (max-height:680px){
  .rail{padding-top:20px}
  .column{padding-top:20px;padding-bottom:16px}
  .computer-figure{margin-bottom:4px}
  .card .hd{padding-bottom:10px}
  .row{padding:6px 0}
  .base{padding-top:12px}
}
@media(max-width:980px){.side{margin:40px auto 0}.column{min-height:calc(100svh - 51px)}}