@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500..700&family=Figtree:wght@400..700&family=Space+Mono:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0..1,0&display=block");

/* Kelas — mission control for students. Every value comes from tokens.css. Light comes from the top. */

body {
  margin: 0; color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  background-color: var(--void);
  background-image:
    radial-gradient(1px 1px at 12% 18%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 33% 72%, var(--star), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 26%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 76% 64%, var(--star), transparent 60%),
    radial-gradient(1px 1px at 91% 12%, var(--star), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 88%, var(--star), transparent 60%);
  background-size: 360px 280px;
}
.k-stage { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.k-stage--col { flex-direction: column; align-items: stretch; }

/* Icons — Material Symbols Rounded */
.k-icon { font-family: "Material Symbols Rounded"; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; width: 1em; height: 1em; display: inline-block; overflow: hidden; white-space: nowrap; user-select: none; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; flex: none; }
.k-icon.is-filled { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* Focus + hover, everywhere */
:is(.k-btn, .k-iconbtn, .k-chip, .k-check, .k-nav__item, .k-switch, .k-search):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  :is(.k-btn, .k-iconbtn, .k-chip--filter, .k-nav__item, .k-task):hover { background-image: linear-gradient(var(--hover-layer), var(--hover-layer)); }
  .k-btn--primary:hover { background-image: linear-gradient(180deg, var(--primary-hi), var(--primary)), linear-gradient(var(--hover-layer), var(--hover-layer)); filter: brightness(1.05); }
}

/* Button — physical keys with a lit top lip */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-md); font: 600 14px/20px var(--font-sans); letter-spacing: 0.1px; cursor: pointer; transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.k-btn .k-icon { font-size: 20px; margin-left: calc(var(--space-1) * -1); }
.k-btn--primary { background: linear-gradient(180deg, var(--primary-hi), var(--primary)); color: var(--on-primary); box-shadow: var(--bevel); }
.k-btn--secondary { background: var(--surface-raised); color: var(--ink); box-shadow: var(--bevel-neutral), inset 0 0 0 1px var(--outline-strong); }
.k-btn--ghost { background: transparent; color: var(--accent); padding: 0 var(--space-3); }
.k-btn--lg { min-height: 56px; padding: 0 var(--space-8); font-size: 16px; line-height: 24px; }
.k-btn--block { width: 100%; }
.k-btn:active, .k-btn.is-pressed { transform: translateY(2px); box-shadow: var(--well); }
.k-btn:disabled { background: var(--surface-sunken); color: var(--ink-disabled); box-shadow: var(--well); cursor: default; transform: none; }
.k-iconbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; position: relative; border: 0; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); box-shadow: var(--bevel-neutral); cursor: pointer; }
.k-iconbtn__dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--primary); box-shadow: 0 0 0 2px var(--surface-raised); }
.k-kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--bevel-neutral), inset 0 0 0 1px var(--outline-strong); color: var(--ink-muted); font: 600 12px/16px var(--font-sans); white-space: nowrap; }

/* Planet orbs — a lit sphere in a subject colour */
.k-orb { --orb: var(--subject-1); flex: none; width: 14px; height: 14px; border-radius: var(--radius-full); background: radial-gradient(circle at 32% 28%, var(--hull) 0%, var(--orb) 38%, var(--orb) 62%, var(--void) 135%); box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.35); }
.k-orb--lg { width: 44px; height: 44px; box-shadow: inset -6px -8px 12px rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.35); }
.k-p1 { --orb: var(--subject-1); } .k-p2 { --orb: var(--subject-2); } .k-p3 { --orb: var(--subject-3); } .k-p4 { --orb: var(--subject-4); } .k-p5 { --orb: var(--subject-5); }

/* Chips + badges */
.k-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: var(--well); color: var(--ink); font: 600 14px/20px var(--font-sans); white-space: nowrap; }
.k-chip--sm { height: 24px; padding: 0 var(--space-2); gap: var(--space-1); font: 500 12px/16px var(--font-sans); }
.k-chip--sm .k-orb { width: 10px; height: 10px; }
.k-chip--filter { background: var(--surface-raised); box-shadow: var(--bevel-neutral), inset 0 0 0 1px var(--outline-strong); cursor: pointer; }
.k-chip--filter[aria-pressed="true"] { background: var(--primary-container); color: var(--on-primary-container); box-shadow: var(--well); }
.k-chip .k-icon { font-size: 18px; }
.k-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 600 12px/16px var(--font-sans); letter-spacing: 0.2px; white-space: nowrap; }
.k-badge .k-icon { font-size: 16px; }
.k-badge--live { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-accent); border-radius: var(--radius-full); padding: 0 var(--space-3); }
.k-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--on-accent); }
.k-badge--due { background: var(--danger-container); color: var(--on-danger-container); }
.k-badge--quiet { background: var(--surface-sunken); color: var(--ink-muted); box-shadow: var(--well); }

/* Cards */
.k-card { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--depth-card); }
.k-class { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); }
.k-class__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.k-class__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.k-class__time { font: 700 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.k-class__name { margin: 0; font: 600 18px/24px var(--font-display); color: var(--ink); }
.k-class__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.k-class__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.k-class__meta .k-icon { font-size: 18px; }
.k-class.is-live { box-shadow: var(--depth-card), var(--glow-accent); }
.k-class.is-past { opacity: 0.55; }

/* Task row + 3D checkbox */
.k-list { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--depth-card); overflow: hidden; }
.k-task { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.k-task + .k-task { border-top: 1px solid var(--outline); }
.k-check { flex: none; width: 24px; height: 24px; margin-top: 2px; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--surface-sunken); box-shadow: var(--well), inset 0 0 0 1px var(--outline-strong); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.k-check .k-icon { font-size: 18px; visibility: hidden; }
.k-check[aria-checked="true"] { background: linear-gradient(180deg, var(--primary-hi), var(--primary)); box-shadow: var(--bevel); }
.k-check[aria-checked="true"] .k-icon { visibility: visible; }
.k-task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.k-task__title { font: 500 16px/24px var(--font-sans); color: var(--ink); }
.k-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.k-task.is-done .k-task__title { color: var(--ink-muted); text-decoration: line-through; }

/* Sidebar */
.k-side { width: 248px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6) var(--space-4); background: var(--surface); border-right: 1px solid var(--outline); }
.k-brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-6); font: 700 20px/24px var(--font-display); color: var(--ink); letter-spacing: -0.3px; }
.k-patch { width: 40px; height: 40px; flex: none; }
.k-patch .ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.k-patch .disc { fill: var(--surface-raised); stroke: var(--outline-strong); stroke-width: 1.5; }
.k-patch .planet { fill: var(--primary); }
.k-patch .moon { fill: var(--hull); }
.k-nav__item { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: 600 14px/20px var(--font-sans); text-align: left; cursor: pointer; width: 100%; }
.k-nav__item .k-kbd { margin-left: auto; height: 20px; }
.k-nav__item[aria-current="page"] { background: var(--primary-container); color: var(--on-primary-container); box-shadow: var(--bevel-neutral); }
.k-nav__item[aria-current="page"] .k-icon { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.k-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.k-meter { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--well); display: flex; flex-direction: column; gap: var(--space-2); }
.k-meter__label { display: flex; justify-content: space-between; font: 700 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.k-gauge { height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: var(--well), inset 0 0 0 1px var(--outline); overflow: hidden; }
.k-gauge > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, var(--hull), var(--accent) 40%); box-shadow: var(--glow-accent); }
.k-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); font: 600 14px/20px var(--font-sans); color: var(--ink); }
.k-user small { display: block; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.k-avatar { width: 36px; height: 36px; flex: none; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--primary-hi), var(--primary)); color: var(--on-primary); box-shadow: var(--bevel); font: 700 13px/16px var(--font-sans); }

/* Toggle switch */
.k-switch { flex: none; width: 44px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: var(--well), inset 0 0 0 1px var(--outline-strong); position: relative; cursor: pointer; }
.k-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--hull); box-shadow: var(--bevel-neutral); transition: transform 150ms ease-out; }
.k-switch[aria-checked="true"] { background: var(--accent); box-shadow: var(--well); }
.k-switch[aria-checked="true"]::after { transform: translateX(18px); }
.k-setting { display: flex; align-items: center; gap: var(--space-3); font: 500 14px/20px var(--font-sans); color: var(--ink); }
.k-setting > span { flex: 1; }
.k-setting small { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }

/* Notifications */
.k-toast { display: flex; align-items: flex-start; gap: var(--space-3); width: 380px; box-sizing: border-box; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--depth-float); }
.k-toast__icon { width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); box-shadow: var(--well); color: var(--accent); }
.k-toast__body { flex: 1; min-width: 0; }
.k-toast__kicker { font: 700 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.k-toast__title { font: 600 16px/22px var(--font-display); color: var(--ink); margin: 2px 0; }
.k-toast__text { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); margin: 0; }
.k-toast__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.k-toast__actions .k-btn { min-height: 36px; padding: 0 var(--space-4); }

/* OS notification mock (how the browser notification looks on Windows) */
.k-os { width: 364px; box-sizing: border-box; padding: var(--space-3) var(--space-4) var(--space-4); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--depth-float), inset 0 0 0 1px var(--outline); font: 400 13px/18px var(--font-sans); color: var(--ink); }
.k-os__head { display: flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); color: var(--ink-muted); margin-bottom: var(--space-3); }
.k-os__head .k-patch { width: 16px; height: 16px; }
.k-os__row { display: flex; gap: var(--space-3); }
.k-os__row b { display: block; font-weight: 600; margin-bottom: 2px; }

/* Launch window (Focus) */
.k-launch { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(ellipse at 50% 110%, var(--surface-raised) 0%, var(--surface-sunken) 70%); box-shadow: var(--well), inset 0 0 0 1px var(--outline); }
.k-rocket { display: block; width: 100%; height: auto; }
.k-rocket .star { fill: var(--star); }
.k-rocket .orbit { fill: none; stroke: var(--outline); stroke-width: 1.5; stroke-dasharray: 3 7; }
.k-rocket .hull { fill: url(#k-hull); }
.k-rocket .hull-solid { fill: var(--hull); }
.k-rocket .seam { fill: none; stroke: var(--hull-shade); stroke-width: 1.5; }
.k-rocket .paint { fill: url(#k-paint); }
.k-rocket .shade { fill: var(--hull-shade); }
.k-rocket .nozzle { fill: url(#k-nozzle); }
.k-rocket .screen { fill: var(--surface-sunken); stroke: var(--hull-shade); stroke-width: 2; }
.k-rocket .clock { fill: var(--accent); font: 700 30px/1 var(--font-mono); }
.k-rocket .tele { fill: var(--ink-muted); font: 700 9px/1 var(--font-mono); letter-spacing: 1.4px; }
.k-rocket .tele-on { fill: var(--accent); }
.k-rocket .track { fill: var(--outline); }
.k-rocket .fuel { fill: var(--accent); }
.k-rocket .glass { fill: url(#k-glass); }
.k-rocket .glint { fill: var(--hull); opacity: 0.85; }
.k-rocket .rim { fill: none; stroke: var(--hull-shade); stroke-width: 3; }
.k-rocket .flame-out { fill: var(--primary); }
.k-rocket .flame-in { fill: var(--flame); }
.k-rocket .boot { fill: var(--hull-shade); }
.k-rocket .light-a { fill: var(--accent); }
.k-rocket .light-p { fill: var(--primary); }
.k-rocket .planet { fill: url(#k-planet); }
.k-rocket .ring { fill: none; stroke: var(--hull-shade); stroke-width: 3; opacity: 0.6; }
.k-rocket .limb-edge { fill: none; stroke: var(--hull-shade); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.k-rocket .limb { fill: none; stroke: var(--hull); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.k-rocket .face { fill: var(--hull); }
.k-rocket .smile { fill: none; stroke: var(--hull); stroke-width: 1.8; stroke-linecap: round; }
.k-rocket .antenna { stroke: var(--hull-shade); stroke-width: 2.5; stroke-linecap: round; }
.k-rocket .s-hull-a { stop-color: var(--hull-shade); } .k-rocket .s-hull-b { stop-color: var(--hull); }
.k-rocket .s-paint-a { stop-color: var(--primary-hi); } .k-rocket .s-paint-b { stop-color: var(--primary); }
.k-rocket .s-glass-a { stop-color: var(--accent); } .k-rocket .s-glass-b { stop-color: var(--visor); }
.k-rocket .s-noz-a { stop-color: var(--hull-shade); } .k-rocket .s-noz-b { stop-color: var(--surface-sunken); }
.k-rocket .s-planet-a { stop-color: var(--subject-2); } .k-rocket .s-planet-b { stop-color: var(--void); }
.k-rocket .flame { transform-origin: 160px 404px; animation: k-flicker 140ms ease-in-out infinite alternate; }
.k-rocket .craft { animation: k-hover 3.2s ease-in-out infinite; }
.k-rocket .crew { transform-origin: 160px 112px; animation: k-sway 4s ease-in-out infinite; }
.k-rocket .wave { transform-origin: 140px 86px; animation: k-wave 1.6s ease-in-out infinite; }
.k-rocket.is-paused .flame, .k-rocket.is-break .flame { display: none; }
.k-rocket.is-paused .craft, .k-rocket.is-paused .crew, .k-rocket.is-paused .wave { animation-play-state: paused; }
.k-rocket.is-paused .clock { fill: var(--ink-muted); }
@keyframes k-flicker { from { transform: scaleY(0.88) scaleX(1.04); } to { transform: scaleY(1.08) scaleX(0.96); } }
@keyframes k-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes k-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes k-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-18deg); } }
@media (prefers-reduced-motion: reduce) { .k-rocket .flame, .k-rocket .craft, .k-rocket .crew, .k-rocket .wave { animation: none; } }

/* Session dots */
.k-dots { display: flex; gap: var(--space-2); }
.k-dot { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--surface-sunken); box-shadow: var(--well), inset 0 0 0 1px var(--outline-strong); }
.k-dot.is-done { background: linear-gradient(180deg, var(--primary-hi), var(--primary)); box-shadow: var(--bevel); }
.k-dot.is-now { background: var(--accent); box-shadow: var(--glow-accent); }

/* Desktop app frame + layout (laptop, 1280 × 800) */
.k-app { width: 1280px; height: 800px; margin: var(--space-6) auto; display: flex; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--depth-float), inset 0 0 0 1px var(--outline); }
.k-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.k-topbar { height: 76px; flex: none; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-8); }
.k-topbar__meta { flex: 1; min-width: 0; font: 700 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.k-topbar__title { flex: 1; min-width: 0; font: 600 18px/24px var(--font-display); color: var(--ink); }
.k-search { width: 320px; height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); box-shadow: var(--well); color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.k-search span:nth-child(2) { flex: 1; }
.k-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); padding: 0 var(--space-8) var(--space-8); }
.k-pane { min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.k-pane--raised { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--depth-card); padding: var(--space-6); }
.k-pane__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.k-pane__head h2 { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: -0.2px; color: var(--ink); }
.k-pane__head h3 { margin: 0; font: 600 18px/24px var(--font-display); color: var(--ink); }
.k-note { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.k-tele { font: 700 11px/16px var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.k-link { font: 600 14px/20px var(--font-sans); color: var(--accent); text-decoration: none; }
.k-timeline { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; }
.k-timeline__time { font: 700 11px/16px var(--font-mono); letter-spacing: 1.2px; color: var(--ink-muted); }
.k-timeline__free { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px dashed var(--outline-strong); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); display: flex; align-items: center; gap: var(--space-2); }
.k-pane--raised .k-list { background: transparent; box-shadow: none; border: 1px solid var(--outline); }
.k-app .k-toast { position: absolute; right: var(--space-8); bottom: var(--space-8); }
.k-divider { border: 0; border-top: 1px solid var(--outline); margin: var(--space-3) 0; }

/* Orbit clock (FocusRocket): a 3D Earth, a neon countdown ring, an astronaut riding a retro rocket along it.
   The svg carries both k-rocket (part fills above) and k-orbit (the scene below). */
.k-orbit { display: block; width: 100%; height: 100%; }
.k-orbit .ko-s-ocean { stop-color: var(--subject-2); }
.k-orbit .ko-s-deep { stop-color: var(--visor); }
.k-orbit .ko-s-night { stop-color: var(--visor); stop-opacity: 0.75; }
.k-orbit .ko-s-clear { stop-color: var(--visor); stop-opacity: 0; }
.k-orbit .ko-s-spec { stop-color: var(--hull); stop-opacity: 0.55; }
.k-orbit .ko-s-atmo { stop-color: var(--accent); stop-opacity: 0.5; }
.k-orbit .ko-atmo { fill: url(#ko-atmo); }
.k-orbit .ko-ocean { fill: url(#ko-ocean); }
.k-orbit .ko-night { fill: url(#ko-night); }
.k-orbit .ko-spec { fill: url(#ko-spec); }
.k-orbit .ko-rim { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.45; }
.k-orbit .land { fill: var(--subject-4); }
.k-orbit .cloud { fill: var(--hull); opacity: 0.85; }
.k-orbit .ko-spin { animation: ko-spin 48s linear infinite; }
.k-orbit .ko-ticks { fill: none; stroke: var(--outline-strong); stroke-width: 6; stroke-dasharray: 2 23.76; opacity: 0.7; }
.k-orbit .ko-track { fill: none; stroke: var(--outline); stroke-width: 12; }
.k-orbit .ko-ring { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 16px var(--accent)); transition: stroke-dasharray 300ms linear, stroke-dashoffset 300ms linear; }
.k-orbit .ko-pos { transition: transform 300ms linear; }
.k-orbit .ko-bob { animation: ko-bob 2.4s ease-in-out infinite; }
.k-orbit .ko-crew { transform-origin: -3px -22px; animation: ko-sway 3.2s ease-in-out infinite; }
.k-orbit .ko-wave { transform-origin: 4px -42px; animation: ko-wave 1.4s ease-in-out infinite; }
.k-orbit .flame.ko-flame { transform-origin: -46px 0px; animation: ko-flicker 120ms ease-in-out infinite alternate; }
.k-orbit .ko-twinkle { animation: ko-twinkle 3.4s ease-in-out infinite; }
.k-orbit .ko-pill { fill: var(--surface-sunken); stroke: var(--outline-strong); stroke-width: 1.5; }
.k-orbit .ko-label { fill: var(--ink-muted); font: 700 13px/1 var(--font-mono); letter-spacing: 2.4px; }
.k-orbit .ko-time { fill: var(--accent); font: 700 44px/1 var(--font-mono); }
.k-orbit.is-break .ko-ring { stroke: var(--flame); filter: drop-shadow(0 0 5px var(--flame)) drop-shadow(0 0 16px var(--flame)); }
.k-orbit.is-break .ko-time { fill: var(--flame); }
.k-orbit.is-paused .ko-ring { filter: none; opacity: 0.7; }
.k-orbit.is-paused .ko-time { fill: var(--ink-muted); }
.k-orbit.is-paused .ko-bob, .k-orbit.is-paused .ko-crew, .k-orbit.is-paused .ko-wave, .k-orbit.is-paused .ko-twinkle { animation-play-state: paused; }
@keyframes ko-spin { from { transform: translateX(0); } to { transform: translateX(-260px); } }
@keyframes ko-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ko-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ko-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(28deg); } }
@keyframes ko-flicker { from { transform: scaleX(0.85); } to { transform: scaleX(1.12); } }
@keyframes ko-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .k-orbit .ko-spin, .k-orbit .ko-bob, .k-orbit .ko-crew, .k-orbit .ko-wave, .k-orbit .flame.ko-flame, .k-orbit .ko-twinkle { animation: none; }
  .k-orbit .ko-pos, .k-orbit .ko-ring { transition: none; }
}