*/
.k-tube { display: flex; align-items: center; gap: 12px; }
.k-tube__bar {
position: relative; box-sizing: border-box; flex: none; width: 200px; max-width: 60%; height: 16px;
border: 2.6px solid var(--ink); border-radius: 8px; background: var(--lcd-bezel); overflow: hidden;
}
.k-tube__bar::before {
content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; right: 1px; border-radius: 5px;
background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) 3px 1.5px / calc(100% - 8px) 1.6px no-repeat, var(--k-tube-c, var(--void-4));
clip-path: inset(0 calc(100% - var(--k-fill, 0%)) 0 0 round 5px);
transition: clip-path var(--t-chip-dip) var(--ease-ooze);
}
.k-tube__bar::after { content: ""; position: absolute; left: 4px; top: 2px; width: 40%; height: 1.6px; border-radius: 1px; background: rgba(255, 255, 255, .15); }
.k-tube__word { font: 600 14px/1 var(--f-body); color: var(--text-dim); }
.k-tube[data-level="1"] { --k-tube-c: var(--danger); --k-fill: var(--k-tube-fill, 12%); }
.k-tube[data-level="2"] { --k-tube-c: var(--warn); --k-fill: 66%; }
.k-tube[data-level="3"] { --k-tube-c: var(--goo-5); --k-fill: 100%; }
.k-tube[data-level="1"] .k-tube__word { color: var(--danger); }
.k-tube[data-level="2"] .k-tube__word { color: var(--warn); }
.k-tube[data-level="3"] .k-tube__word { color: var(--goo-3); }
/* 5.10 Live pill, ink pill (UIKIT 9, 26) --------------------------------------------------------- */
.k-pill {
box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px;
height: 30px; padding: 0 12px 0 11px;
border: var(--ink-small) solid var(--ink); border-radius: 999px; background: var(--pill);
color: var(--text-hi); font: 600 var(--fs-live-pill)/1 var(--f-body); white-space: nowrap; vertical-align: middle;
-webkit-font-smoothing: antialiased; box-shadow: 0 var(--lip-pill) 0 var(--ink);
}
.k-pill--quiet { color: var(--text-dim); padding: 0 14px; }
.k-pill--ink { height: 32px; gap: 6px; padding: 0 15px 0 10px; font-size: 14px; }
.k-pill > svg { flex: none; width: 22px; height: 22px; }
.k-pill--ink > svg, .k-pill--ink > .k-ico { color: var(--goo-3); } /* the membrane pill's icon is a goo-3 line (UIKIT 26), as the GPU paints it */
.k-pill__dot {
box-sizing: border-box; display: inline-block; flex: none; width: 10.8px; height: 10.8px;
border: 1.6px solid var(--ink); border-radius: 50%;
background: radial-gradient(circle at 32% 30%, #fff 0 1.5px, transparent 1.9px), var(--goo-5);
box-shadow: 0 0 6px 1px var(--k-glow);
animation: k-blink var(--t-live-blink) steps(1, end) infinite;
}
.k-pill__dot.is-still, .k-pill.is-still .k-pill__dot { animation: none; }
.is-hot .k-pill__dot, :hover > .k-pill .k-pill__dot, :hover > .k-card__window .k-pill__dot { animation-duration: var(--t-live-blink-hover); }
@media (pointer: coarse) { .k-pill { height: 32px; } }
/* 5.11 Sticker (UIKIT 10):
Beta ----------------------
The box is the baked sticker's face incl. its ink (the GPU draws that art at its natural size): a 28 px
face (the shape source's h) + 2.5 px ink each side = 33, radius 7 + 2.5; the die-cut line 3.5 px inside the face. */
.k-sticker {
--k-rot: 3deg; --k-peel: var(--k-img-peel-pink);
position: relative; box-sizing: border-box; display: inline-flex; align-items: center; flex: none;
height: 33px; padding: 1px 11px 0;
border: var(--ink-small) solid var(--ink); border-radius: calc(var(--r-sticker) + var(--ink-small)); background: var(--pink);
color: var(--text-ink); font: 800 var(--fs-sticker)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
box-shadow: 0 var(--lip-sticker) 0 var(--ink);
transform: rotate(var(--k-rot));
}
.k-sticker::before { content: ""; position: absolute; inset: 2.7px; border: 1.6px solid rgba(255, 255, 255, .55); border-radius: 5.3px; pointer-events: none; }
.k-sticker::after { content: ""; position: absolute; right: 0; top: 0; width: 11px; height: 11px; background: var(--k-peel) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.k-sticker--new, .k-sticker--featured { background: var(--goo-5); --k-peel: var(--k-img-peel-goo); }
.k-sticker--hot { background: var(--tang); --k-peel: var(--k-img-peel-tang); }
.k-sticker--soon { background: var(--sky); --k-peel: var(--k-img-peel-sky); }
.k-sticker--jump { background: var(--cream); --k-peel: var(--k-img-peel-cream); }
.k-sticker--beta { background: var(--pink); --k-peel: var(--k-img-peel-pink); }
@media (hover: hover) {
.k-card:hover .k-sticker, .k-hublink:hover .k-sticker { animation: k-wiggle var(--t-sticker-wiggle) var(--ease-glide); }
}
/* 5.12 Play pill (UIKIT 11): aria-hidden, inside a card/portal link; pops on hover/focus --------------
It has no GPU twin: the GPU paints its own pill (paintPlayPill) with a 46 / 42 / 34 px face and the ink
OUTSIDE it, so this box is face + 2 x 3 px ink (52 / 48 / 40) and its insides follow the same layout
(glyph 21 px, label 47 px from the outer edge, text + 64 wide) for both painters to look the same. */
.k-play {
--k-h: 52px;
position: relative; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px;
height: var(--k-h); padding: 0 14px 0 18px;
border: var(--ink-component) solid var(--ink); border-radius: 999px; background-color: var(--goo-5);
color: var(--text-ink); font: 800 var(--fs-display-pill)/1 var(--f-display); white-space: nowrap; pointer-events: none;
box-shadow: var(--k-sh-in), 0 6px 0 var(--ink);
}
.k-play::before { content: ""; flex: none; width: 16px; height: 18px; background: var(--k-img-play) center / contain no-repeat; }
.k-play::after {
content: ""; position: absolute; left: calc(70% - 10.6px); top: calc(100% + 9px);
width: 21.2px; height: 11.6px; background: var(--k-img-drip-pill) 0 0 / 100% 100% no-repeat;
}
.k-play--s { --k-h: 48px; font-size: 16px; }
.k-play--xs { --k-h: 40px; font-size: 16px; }
.k-card .k-play, .k-hublink .k-play {
position: absolute; left: 50%; top: 50%; opacity: 0;
transform: translate(-50%, -50%) scale(calc(1 - .35 * var(--k-motion)));
transition: opacity 150ms linear, transform var(--t-play-pill-pop) var(--k-ease-pop);
}
.k-card:focus-visible .k-play, .k-hublink:focus-visible .k-play, .k-card.is-awake .k-play, .k-hublink.is-awake .k-play {
opacity: 1; transform: translate(-50%, -50%) scale(1);
}
@media (hover: hover) {
.k-card:hover .k-play, .k-hublink:hover .k-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.k-card:hover .k-play, .k-card:focus-visible .k-play { box-shadow: var(--k-sh-in), 0 6px 0 var(--ink), 0 0 18px 3px var(--k-glow); }
@media (hover: none) {
.k-hublink .k-play { position: static; opacity: 1; transform: none; }
}
/* 5.13 Jump back in pill (UIKIT 12):
Jump back inKnight */
.k-jump { --k-h: 60px; --k-lip-rest: 6px; gap: 12px; justify-content: flex-start; padding: 0 22px 0 14px; }
.k-jump__text { display: grid; gap: 3px; min-width: 0; text-align: left; }
.k-jump__kicker { font: 600 13px/1.1 var(--f-body); color: var(--on-cream-dim); }
.k-jump__title { overflow: hidden; text-overflow: ellipsis; font: 800 19px/1.05 var(--f-display); color: var(--text-ink); }
@media (max-width: 759.98px) { .k-jump { --k-h: 56px; } }
/* 5.14 Rotation (UIKIT 13): "1 / 4" + goo bulbs + pause. Paused / stopped / reduced: .is-paused ------ */
.k-rot { display: inline-flex; align-items: center; gap: 4px; --k-rot-interval: var(--t-hero-rotation-auto); }
.k-rot__count { margin-right: 18px; font: 600 14px/1 var(--f-body); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.k-rot__pause { margin-left: 16px; }
.k-bulb {
position: relative; box-sizing: border-box; display: inline-grid; place-items: center; flex: none;
width: var(--target-fine); height: var(--target-fine); margin: 0; padding: 0;
border: 0; border-radius: 50%; background: none; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent;
}
.k-bulb::before {
--k-sh-ring: var(--k-none); --k-sh-still: var(--k-none);
content: ""; box-sizing: border-box; width: 20px; height: 20px;
border: 3px solid var(--ink); border-radius: 50%; background: var(--plum);
box-shadow: inset 2px 2px 0 -.5px var(--plum-rim), var(--k-sh-ring), var(--k-sh-still), 0 3px 0 var(--ink);
}
.k-bulb::after {
content: ""; position: absolute; left: calc(50% - 7px); top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%;
background: linear-gradient(var(--goo-3) 0 2px, var(--goo-5) 2px) 0 100% / 100% 0% no-repeat;
pointer-events: none;
}
.k-bulb[aria-current="true"]::before { background: var(--goo-9); box-shadow: var(--k-sh-ring), var(--k-sh-still), 0 3px 0 var(--ink); }
.k-bulb[aria-current="true"]::after { animation: k-bulb-fill var(--k-rot-interval) linear forwards; }
.k-rot.is-paused .k-bulb[aria-current="true"]::after { animation: none; background-size: 100% 100%; background-image: radial-gradient(circle at 30% 30%, #fff 0 1.9px, transparent 2.3px), linear-gradient(var(--goo-5), var(--goo-5)); }
.k-rot.is-paused .k-bulb[aria-current="true"]::before { --k-sh-still: 0 0 0 1px var(--void-2), 0 0 0 3.4px var(--goo-3); }
.k-bulb:focus { outline: none; }
.k-bulb:focus-visible::before { --k-sh-ring: 0 1.5px 0 5.5px var(--focus-inner), 0 1.5px 0 9.5px var(--focus-outer); }
/* 5.15 Label plate (UIKIT 14): GPU text on a GPU plate; this is its CSS theme -------------------- */
.k-plate {
box-sizing: border-box; display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
max-width: 230px; padding: 11px 17px 13px;
border: var(--ink-small) solid var(--ink); border-radius: var(--r-tile); background: var(--pill);
box-shadow: 0 var(--lip-tile) 0 var(--ink); text-align: center; -webkit-font-smoothing: antialiased;
}
.k-plate__title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 196px;
font: 800 var(--fs-display-xs)/1.05 var(--f-display); color: var(--text-hi);
}
.k-plate__count { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-plate-count)/1 var(--f-body); color: var(--text-dim); }
.k-plate__count--live { color: var(--text-hi); }
.k-plate__count .k-pill__dot { width: 9.2px; height: 9.2px; border-width: 1.4px; }
.k-hublink:hover .k-plate__title, .k-hublink:focus-visible .k-plate__title, .is-awake .k-plate__title { color: var(--goo-3); }
/* 5.16 Box art frame (UIKIT 15 / ART.md §9):
*/
.k-boxart {
--k-rot: -4deg; --k-frame: 5px;
--k-glob: var(--k-art-glob-card, none); --k-glob-w: var(--k-art-glob-card-w, 0px); --k-glob-h: var(--k-art-glob-card-h, 0px);
--k-glob-x: var(--k-art-glob-card-x, 0px); --k-glob-y: var(--k-art-glob-card-y, 0px);
position: relative; box-sizing: border-box; display: block; flex: none; width: 104px; height: 156px;
border: var(--k-frame) solid var(--cream); border-radius: var(--r-box-art); background: var(--cream);
box-shadow: 0 0 0 3px var(--ink), 0 var(--lip-box-art) 0 3px var(--ink);
transform: rotate(var(--k-rot));
}
.k-boxart > img, .k-boxart > .k-media {
display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: cover;
border-radius: var(--r-box-art-inner); background: var(--void-3); box-shadow: 0 0 0 1.6px rgba(7, 3, 13, .7);
}
.k-boxart::after {
content: ""; position: absolute; inset: 0; border-radius: var(--r-box-art-inner); pointer-events: none;
background: linear-gradient(112deg, transparent 50%, rgba(255, 255, 255, .07) 50% 68%, transparent 68%);
}
.k-boxart::before {
content: ""; position: absolute; z-index: 1; pointer-events: none;
left: calc(-1 * var(--k-glob-x) - var(--k-frame)); top: calc(-1 * var(--k-glob-y) - var(--k-frame));
width: var(--k-glob-w); height: var(--k-glob-h);
background: var(--k-glob) 0 0 / 100% 100% no-repeat;
}
.k-boxart--hero { width: 150px; height: 225px; --k-rot: -9deg; --k-frame: 6px;
--k-glob: var(--k-art-glob-hero, none); --k-glob-w: var(--k-art-glob-hero-w, 0px); --k-glob-h: var(--k-art-glob-hero-h, 0px); --k-glob-x: var(--k-art-glob-hero-x, 0px); --k-glob-y: var(--k-art-glob-hero-y, 0px); }
.k-boxart--compact { width: 84px; height: 126px; --k-frame: 4px;
--k-glob: var(--k-art-glob-compact, none); --k-glob-w: var(--k-art-glob-compact-w, 0px); --k-glob-h: var(--k-art-glob-compact-h, 0px); --k-glob-x: var(--k-art-glob-compact-x, 0px); --k-glob-y: var(--k-art-glob-compact-y, 0px); }
.k-boxart--phone { width: 76px; height: 114px; --k-frame: 4px; --k-rot: -8deg;
--k-glob: var(--k-art-glob-phone, none); --k-glob-w: var(--k-art-glob-phone-w, 0px); --k-glob-h: var(--k-art-glob-phone-h, 0px); --k-glob-x: var(--k-art-glob-phone-x, 0px); --k-glob-y: var(--k-art-glob-phone-y, 0px); }
.k-boxart--jump, .k-boxart--thumb {
width: 32px; height: 48px; --k-frame: 3px; --k-rot: -6deg; border-radius: 6px;
box-shadow: 0 0 0 2.4px var(--ink), 0 2px 0 2.4px var(--ink);
}
.k-boxart--thumb { width: 30px; height: 45px; --k-rot: -5deg; }
.k-boxart--jump > img, .k-boxart--thumb > img { border-radius: 3px; }
.k-boxart--jump::before, .k-boxart--thumb::before, .k-boxart--noglob::before { display: none; }
.k-boxart--flat { --k-rot: 0deg; }
/* 5.17 Card (UIKIT 16, DESIGN §15.3): the whole card is a GPU body in gpu-paint mode; this is its CSS
theme.
47 plays todayBeta
Play
Knight
...fantasy RPG · online */
.k-card {
--k-lip: var(--lip-card); --k-dy: 0px; --k-sh-ring: var(--k-none); --k-art-w: 104px; --k-art-up: 58px;
position: relative; box-sizing: border-box; display: grid; grid-template-columns: var(--k-art-w) minmax(0, 1fr);
column-gap: 20px; align-content: start;
padding: 12px 18px 22px 22px;
border: var(--ink-component) solid var(--ink); border-radius: var(--r-card); background: var(--void-2);
color: var(--text); text-decoration: none; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
box-shadow: inset 0 0 0 1.5px var(--void-2), inset 0 0 0 3.5px var(--rim-line), var(--k-sh-ring),
0 max(0px, calc(var(--k-lip) - 6px)) 0 var(--slab-lip), 0 var(--k-lip) 0 var(--ink), var(--shadow-float);
transform: translateY(calc(var(--k-dy) * var(--k-free, 1))); /* Reduce motion: the lift stays, without the spring */
transition: transform var(--t-hover-out) var(--ease-glide), box-shadow var(--t-focus-ring-in) linear;
}
.k-card::after { content: ""; position: absolute; left: -3px; right: -3px; top: 100%; height: calc(3px + max(0px, -1 * var(--k-dy))); }
.k-card__window {
--k-rim-c: var(--dormant-5);
grid-column: 1 / -1; justify-self: stretch; position: relative; isolation: isolate; display: block; aspect-ratio: 16 / 9;
margin: 0 -6px 0 -10px; border-radius: var(--r-window); background: #0A0616;
box-shadow: 0 0 0 calc(3px * var(--k-no-art, 1)) var(--ink), 0 0 0 calc(11px * var(--k-no-art, 1)) var(--k-rim-c), 0 0 0 calc(14px * var(--k-no-art, 1)) var(--ink);
}
/* the goo rim: the baked 9-slice (art.json → css/card-rim-*.webp), drawn over the window's edge */
.k-card__window::after {
content: ""; position: absolute; z-index: 2; pointer-events: none; box-sizing: border-box;
inset: var(--k-art-rim-inset, 0px);
border: solid transparent; border-width: var(--k-art-rim-width, 0px);
border-image-source: var(--k-rim-img, var(--k-art-rim-dormant, none));
border-image-slice: var(--k-art-rim-slice, 0); border-image-width: var(--k-art-rim-width, 0px); border-image-repeat: stretch;
}
.k-card__media, .k-card__window > img:not(.k-card__critter), .k-card__window > video {
position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
border-radius: var(--r-window); background: #0A0616;
}
.k-card__window > .k-pill { position: absolute; z-index: 3; left: 12px; top: 12px; }
.k-card__window > .k-sticker { position: absolute; z-index: 3; right: 10px; top: 10px; }
.k-card__window > .k-play { z-index: 3; }
.k-card > .k-boxart { grid-column: 1; grid-row: 2; margin-top: calc(-1 * var(--k-art-up)); }
.k-card__body { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; padding-top: 22px; }
.k-card__title {
--k-lip: var(--tl-display-m);
margin: 0; font: 800 var(--fs-display-m)/var(--lh-display-m) var(--f-display); color: var(--text-hi);
overflow-wrap: anywhere;
-webkit-text-stroke: max(1.2px, .07em) var(--ink); paint-order: stroke fill;
text-shadow: 0 var(--k-lip) 0 var(--ink), .5px var(--k-lip) 0 var(--ink), -.5px var(--k-lip) 0 var(--ink);
transition: color var(--t-hover-in) linear;
}
.k-card__title--long { font-size: var(--fs-display-m-long); }
.k-card__desc {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
margin: 10px 0 0; font: 400 var(--fs-body-s)/var(--lh-body-s) var(--f-body); color: var(--text);
}
.k-card__meta { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 500 var(--fs-meta)/var(--lh-meta) var(--f-body); color: var(--text-dim); }
.k-card__meta > svg { flex: none; width: 16px; height: 16px; }
@media (hover: hover) {
.k-card:hover { --k-dy: -8px; --k-lip: var(--lip-card-hover); transition: transform var(--t-hover-in) var(--k-ease-pop), box-shadow var(--t-focus-ring-in) linear; }
}
.k-card:hover .k-card__window, .k-card:focus-visible .k-card__window, .k-card.is-awake .k-card__window {
--k-rim-c: var(--goo-5); --k-rim-img: var(--k-art-rim-awake, none);
}
.k-card:hover .k-card__title, .k-card:focus-visible .k-card__title, .k-card.is-awake .k-card__title { color: var(--goo-3); }
.k-card:active { --k-lip: 3px; }
.k-card:focus { outline: 2px solid transparent; outline-offset: 2px;
--k-sh-ring: 0 calc(var(--k-lip) / 2) 0 calc(var(--focus-inner-w) + var(--k-lip) / 2) var(--focus-inner),
0 calc(var(--k-lip) / 2) 0 calc(var(--focus-inner-w) + var(--focus-outer-w) + var(--k-lip) / 2) var(--focus-outer); }
.k-card:focus:not(:focus-visible) { --k-sh-ring: var(--k-none); }
/* SOON (not a link) and closed membranes */
.k-card--soon { cursor: default; }
.k-card--soon:hover { --k-dy: 0px; --k-lip: var(--lip-card); }
.k-card--soon:hover .k-card__window { --k-rim-c: var(--dormant-5); --k-rim-img: var(--k-art-rim-dormant, none); }
.k-card--soon:hover .k-card__title { color: var(--text-hi); }
.k-card--soon .k-card__media, .k-card__window--closed > img:not(.k-card__critter), .k-card__window--closed > video { opacity: .3; }
.k-card--soon .k-card__window::before, .k-card__window--closed::before {
content: ""; position: absolute; z-index: 1; inset: 0; border-radius: var(--r-window); pointer-events: none;
background:
radial-gradient(4px 4px at 22% 64%, transparent 2.6px, rgba(166, 255, 107, .35) 3px, transparent 4px),
radial-gradient(6px 6px at 74% 34%, transparent 4.4px, rgba(166, 255, 107, .3) 5px, transparent 6px),
radial-gradient(3.5px 3.5px at 58% 76%, transparent 2.2px, rgba(166, 255, 107, .4) 2.7px, transparent 3.5px),
var(--k-img-gloss) 0 0 / 100% 100% no-repeat,
radial-gradient(ellipse at 50% 42%, rgba(23, 74, 32, .74), rgba(11, 42, 18, .88) 60%, rgba(4, 18, 10, .95));
}
.k-card__window > .k-pill--ink { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); }
/* the filler card: a closed portal with sleeping Munch, aria-hidden */
.k-card--filler { background: var(--void-1); grid-template-columns: 1fr; text-align: center; cursor: default; box-shadow: inset 0 0 0 1.5px var(--void-1), inset 0 0 0 3.5px var(--rim-line), 0 max(0px, calc(var(--k-lip) - 6px)) 0 var(--slab-lip), 0 var(--k-lip) 0 var(--ink), var(--shadow-float); }
.k-card--filler:hover { --k-dy: 0px; --k-lip: var(--lip-card); }
.k-card--filler .k-card__window { margin: 0 -6px 0 -10px; }
.k-card--filler .k-card__window::before {
content: ""; position: absolute; z-index: 1; inset: 0; border-radius: var(--r-window);
background: radial-gradient(4px 4px at 20% 58%, transparent 2.6px, rgba(166, 255, 107, .35) 3px, transparent 4px),
radial-gradient(5px 5px at 78% 64%, transparent 3.6px, rgba(166, 255, 107, .3) 4.1px, transparent 5px),
var(--k-img-gloss) 0 0 / 100% 100% no-repeat,
radial-gradient(ellipse at 50% 42%, rgba(23, 74, 32, .74), rgba(11, 42, 18, .88) 60%, rgba(4, 18, 10, .95));
}
.k-card--filler .k-card__critter, .k-card__critter { position: absolute; z-index: 1; left: 50%; bottom: 4%; width: 26%; height: auto; transform: translateX(-50%); pointer-events: none; }
.k-card--filler .k-card__body { grid-column: 1; grid-row: 2; align-items: center; padding: 30px 0 6px; }
.k-card--filler .k-card__title { font-size: var(--fs-display-state); --k-lip: 3px; }
.k-card--filler:hover .k-card__title { color: var(--text-hi); }
.k-card--filler .k-card__desc { color: var(--text-dim); text-align: center; }
@media (max-width: 759.98px) {
.k-card { --k-art-w: 84px; --k-art-up: 44px; padding: 10px 16px 18px 16px; column-gap: 16px; }
.k-card__window, .k-card--filler .k-card__window { margin: 0 -6px 0 -6px; }
.k-card > .k-boxart { width: 84px; height: 126px; --k-frame: 4px;
--k-glob: var(--k-art-glob-compact, none); --k-glob-w: var(--k-art-glob-compact-w, 0px); --k-glob-h: var(--k-art-glob-compact-h, 0px); --k-glob-x: var(--k-art-glob-compact-x, 0px); --k-glob-y: var(--k-art-glob-compact-y, 0px); }
.k-card__title--long { font-size: var(--fs-display-m-long); }
}
/* 5.18 Portals in the CSS theme: hub links (UIKIT 17), small portals, avatar portals (UIKIT 22) --------- */
.k-hublink { position: relative; display: block; border-radius: 50%; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.k-hublink:focus { outline: none; }
.k-hublink:focus-visible { outline: var(--focus-outer-w) solid var(--focus-outer); outline-offset: var(--focus-inner-w); box-shadow: 0 0 0 var(--focus-inner-w) var(--focus-inner); }
.k-portal {
--k-rim: 8px;
position: relative; box-sizing: content-box; display: block; aspect-ratio: 1.44;
border: var(--k-rim) solid transparent; border-bottom-width: calc(var(--k-rim) * 1.5); border-radius: 50%;
background: linear-gradient(#0A0616, #0A0616) padding-box,
linear-gradient(180deg, var(--dormant-3), var(--dormant-5) 45%, var(--dormant-7)) border-box;
box-shadow: 0 0 0 3px var(--ink);
}
.k-portal > img, .k-portal > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--ink); }
.k-portal--awake, a:hover > .k-portal, a:focus-visible > .k-portal {
background: linear-gradient(#0A0616, #0A0616) padding-box, linear-gradient(180deg, var(--goo-3), var(--goo-5) 45%, var(--goo-7)) border-box;
}
.k-avatar { --k-rim: 6px; --k-av: 64px; width: var(--k-av); aspect-ratio: 1; background: linear-gradient(#0A2610, #0A2610) padding-box, linear-gradient(180deg, var(--dormant-3), var(--dormant-5) 45%, var(--dormant-7)) border-box; }
/* with the baked avatar (
) the image carries the rim: art.json meta
diameter 92, image 115.5 x 125.5 CSS px, portal centre at (58, 55.5) */
.k-avatar--art { --k-rim: 0px; background: none; box-shadow: none; overflow: visible; }
.k-avatar > img { position: absolute; left: calc(50% - var(--k-av) * .6304); top: calc(50% - var(--k-av) * .6033); width: calc(var(--k-av) * 1.2554); height: auto; border-radius: 0; box-shadow: none; object-fit: contain; }
button.k-avatar { margin: 0; padding: 0; cursor: pointer; appearance: none; font: inherit; color: inherit; }
.k-avatar[aria-checked="true"] { --k-rim: 9px; background: linear-gradient(#0A2610, #0A2610) padding-box, linear-gradient(var(--goo-5), var(--goo-5)) border-box; }
.k-avatar--art[aria-checked="true"] { --k-rim: 0px; background: none; box-shadow: 0 0 0 5px var(--ink), 0 0 0 11px var(--goo-5), 0 0 0 14px var(--ink); }
.k-avatar[aria-checked="true"]::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 26px; height: 26px; background: var(--k-img-check) center / contain no-repeat; }
.k-avatar:focus { outline: none; }
.k-avatar:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--focus-inner), 0 0 0 11px var(--focus-outer); }
.k-avatar--art:focus-visible { box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px var(--focus-inner), 0 0 0 13px var(--focus-outer); }
.k-avatar--art[aria-checked="true"]:focus-visible { box-shadow: 0 0 0 5px var(--ink), 0 0 0 11px var(--goo-5), 0 0 0 14px var(--ink), 0 0 0 18px var(--focus-inner), 0 0 0 22px var(--focus-outer); }
.k-art { display: block; max-width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-select: none; }
.k-avatars { display: flex; flex-wrap: wrap; gap: 26px; }
/* 5.19 Hop pad, dock, scrim, search sheet (UIKIT 18, 32): always CSS bodies -------------------------- */
.k-pad {
--k-sh-edge: var(--k-none);
position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
min-height: 76px; padding: 0 44px;
border: var(--ink-component) solid var(--ink); border-radius: 38px;
background: linear-gradient(rgba(70, 51, 122, .8), rgba(70, 51, 122, .8)) 23px 3px / calc(100% - 46px) 5px no-repeat, var(--gadget-face);
color: var(--text-hi); -webkit-font-smoothing: antialiased;
box-shadow: var(--k-sh-edge), 0 max(0px, calc(var(--lip-gadget) - 6px)) 0 var(--gadget-lip), 0 var(--lip-gadget) 0 var(--ink), 0 18px 28px rgba(0, 0, 0, .45);
}
.k-pad::before, .k-pad::after, .k-screw {
content: ""; position: absolute; top: calc(50% - 6.5px); width: 13px; height: 13px; box-sizing: border-box;
border: 2.5px solid var(--ink); border-radius: 50%;
background: linear-gradient(-33deg, transparent 42%, var(--ink) 42% 58%, transparent 58%), var(--screw);
}
.k-pad::before { left: 16px; }
.k-pad::after { right: 16px; }
.k-screw { position: relative; top: auto; display: inline-block; flex: none; }
.k-pad--noscrews::before, .k-pad--noscrews::after { display: none; }
.k-pad__div { flex: none; align-self: stretch; width: 5px; margin: 16px 2px 18px;
background: linear-gradient(90deg, var(--gadget-lip) 0 3px, rgba(70, 51, 122, .7) 3px 4.5px, transparent 4.5px); border-radius: 3px; }
.k-pad__caption { font: 600 15px/1.2 var(--f-body); color: var(--text-hi); }
.k-dock {
position: fixed; z-index: var(--z-catalog-toolbar);
left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px)); right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 6px));
pointer-events: none;
}
.k-dock__body {
--k-sh-edge: var(--k-none);
box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 14px 0 12px;
border: var(--ink-component) solid var(--ink); border-radius: var(--r-dock);
background: linear-gradient(rgba(70, 51, 122, .8), rgba(70, 51, 122, .8)) 17px 2px / calc(100% - 34px) 4px no-repeat, var(--gadget-face);
color: var(--text-hi); pointer-events: auto;
box-shadow: var(--k-sh-edge), 0 6px 0 var(--ink), 0 10px 28px rgba(0, 0, 0, .55);
transition: opacity var(--t-dock-hide) linear;
}
/* .is-hidden is the CSS way to hide the dock: it slides out (180 ms) while html has no gpu-ready (no WebGPU, the boot
frame, device loss: no frame loop drives the kit spring then). With gpu-ready drive .k-dock__body with the kit spring:
CSS never transitions its transform then (the GPU's drips would lag behind it). Under Reduce motion .is-hidden is a
120 ms fade in every mode. */
html:not(.gpu-ready) .k-dock__body { transition: transform var(--t-dock-hide) var(--ease-glide), opacity var(--t-dock-hide) linear; }
.k-dock.is-hidden .k-dock__body { transform: translateY(calc((100% + 30px) * var(--k-motion))); opacity: var(--k-motion); }
.k-scrim { background: var(--k-scrim); pointer-events: auto; }
.k-sheet {
--k-sh-edge: var(--k-none);
position: fixed; z-index: var(--z-sheet); left: 0; right: 0; top: 0; box-sizing: border-box;
padding: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) max(16px, calc(env(safe-area-inset-right, 0px) + 8px)) 18px max(16px, calc(env(safe-area-inset-left, 0px) + 8px));
border: var(--ink-component) solid var(--ink); border-top: 0; border-radius: 0 0 var(--r-sheet) var(--r-sheet);
background: var(--gadget-face); color: var(--text-hi);
box-shadow: var(--k-sh-edge), 0 2px 0 var(--gadget-lip), 0 8px 0 var(--ink), 0 18px 28px rgba(0, 0, 0, .45);
animation: k-sheet-in var(--t-sheet) var(--ease-glide) both;
}
.k-sheet__row { display: flex; align-items: center; gap: 12px; }
.k-sheet__row > .k-lcd { flex: 1 1 auto; }
.k-sheet__readout { margin: 12px 4px 0; font: 600 14px/1.2 var(--f-body); color: var(--text-dim); }
/* 5.20 Toasts (UIKIT 23):
of
------ */
.k-toasts {
position: fixed; z-index: var(--z-toast); left: 50%; transform: translateX(-50%);
bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
display: flex; flex-direction: column; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px);
pointer-events: none;
}
.k-toast {
--k-sh-edge: var(--k-none);
box-sizing: border-box; display: flex; align-items: center; gap: 14px; min-height: 56px; width: max-content; max-width: min(560px, calc(100vw - 32px));
padding: 6px 6px 6px 7px; pointer-events: auto;
border: var(--ink-component) solid var(--ink); border-radius: var(--r-toast); background: var(--toast);
color: var(--text-hi); font: 600 16px/1.25 var(--f-body); -webkit-font-smoothing: antialiased;
box-shadow: inset 0 0 0 1.5px var(--void-2), inset 0 0 0 3.5px var(--rim-line), var(--k-sh-edge), 0 var(--lip-toast) 0 var(--ink), var(--shadow-toast);
animation: k-toast-in var(--t-toast-in) var(--k-ease-pop) both;
}
.k-toast.is-leaving { animation: k-toast-out var(--t-toast-out) var(--ease-slurp) both; }
.k-toast__well {
--k-h: 38px;
position: relative; box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px;
border: 2.6px solid var(--ink); border-radius: 13px; background-color: var(--sky); color: var(--ink);
}
.k-toast__well > svg { width: 24px; height: 24px; }
/* the well colour comes from the well modifier or from the toast root (.k-toast--ok | --error | --info | --offline) */
.k-toast__well--ok, .k-toast--ok .k-toast__well { background-color: var(--goo-5); box-shadow: var(--k-sh-in); }
.k-toast__well--ok::after, .k-toast--ok .k-toast__well::after { content: ""; position: absolute; left: calc(71% - 9.4px); top: calc(100% - 13.4px); width: 18.8px; height: 25.8px; background: var(--k-img-drip-well) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.k-toast__well--error, .k-toast--error .k-toast__well { background-color: var(--danger); }
.k-toast__well--info, .k-toast--info .k-toast__well, .k-toast--offline .k-toast__well { background-color: var(--sky); }
.k-toast__msg { flex: 1 1 auto; min-width: 0; margin: 0 6px 0 0; }
.k-toast__close, .k-banner__close {
display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0; padding: 0;
border: 0; border-radius: 12px; background: var(--k-img-close) center / 20px 20px no-repeat; color: var(--text-dim);
cursor: pointer; appearance: none;
}
.k-toast__close:has(> svg), .k-banner__close:has(> svg) { background: none; }
.k-toast__close > svg, .k-banner__close > svg { width: 20px; height: 20px; }
.k-toast__close:hover, .k-banner__close:hover { color: var(--text-hi); }
.k-toast__close:focus-visible, .k-banner__close:focus-visible { outline: none; box-shadow: var(--k-ring); }
/* phones (the dock's query in toolbar.css, so landscape phones too): toasts start at the top below the header,
never on the dock (DESIGN §15.11) */
@media (max-width: 759.98px), (pointer: coarse) and (max-height: 499.98px) {
.k-toasts { bottom: auto; top: max(var(--k-toast-top), calc(env(safe-area-inset-top, 0px) + 8px)); }
}
/* 5.21 Tooltip (UIKIT 24):
. Placement is JS; .k-tip--up = arrow on top.
CSS-only reveal: wrap the control and its tip in .k-tipped. Never on touch. */
.k-tip {
--k-sh-edge: var(--k-none);
position: absolute; z-index: var(--z-skip-link); box-sizing: border-box; width: max-content; max-width: 260px;
padding: 7px 12px 8px;
border: 2.4px solid var(--ink); border-radius: var(--r-tooltip); background: var(--cream);
color: var(--text-ink); font: 600 14px/1.25 var(--f-body); text-align: center;
box-shadow: var(--k-sh-edge), 0 3px 0 var(--ink); pointer-events: auto;
}
.k-tip::before {
content: ""; position: absolute; left: calc(50% - 6.5px); bottom: -8px; width: 13px; height: 13px; box-sizing: border-box;
background: var(--cream); border: solid var(--ink); border-width: 0 2.4px 2.4px 0; border-bottom-right-radius: 3px;
transform: rotate(45deg); box-shadow: 2px 2px 0 var(--ink);
}
.k-tip--up::before { bottom: auto; top: -8px; transform: rotate(-135deg); box-shadow: none; }
.k-tip--none::before { display: none; }
.k-tip__sub { display: block; font: 500 13px/1.3 var(--f-body); color: var(--on-cream-dim); }
.k-tip strong { font-weight: 700; }
.k-tipped { position: relative; }
.k-tipped > .k-tip { left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); opacity: 0; visibility: hidden;
transition: opacity var(--t-tooltip-in) linear, visibility 0s linear var(--t-tooltip-in); }
.k-tipped > .k-tip--up { bottom: auto; top: calc(100% + 16px); }
@media (hover: hover) {
.k-tipped:hover > .k-tip { opacity: 1; visibility: visible; transition-delay: var(--t-tooltip-delay), var(--t-tooltip-delay); }
}
.k-tipped:focus-within > .k-tip { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.k-tipped.is-dismissed > .k-tip { opacity: 0; visibility: hidden; transition: none; }
@media (hover: none) { .k-tip { display: none; } }
/* 5.22 Bird bubble (UIKIT 25): drawn by the bird canvas; this is the CSS equivalent (aria-hidden) ---- */
.k-bubble {
position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
min-height: 42px; padding: 0 16px 2px;
border: var(--ink-component) solid var(--ink); border-radius: 999px; background: var(--cream);
color: var(--text-ink); font: 600 var(--fs-bird-voice)/1.1 var(--f-display); white-space: nowrap;
box-shadow: 0 4px 0 var(--ink);
}
.k-bubble::after { content: ""; position: absolute; left: 18.5px; top: calc(100% - 3px); width: 31px; height: 28px; background: var(--k-img-tail) 0 0 / 100% 100% no-repeat; }
.k-bubble--br::after { left: auto; right: 18.5px; transform: scaleX(-1); }
.k-bubble--notail::after { display: none; }
.k-bubble--shout { background: none; border: 0; box-shadow: none; padding: 0 22px; min-height: 50px; }
.k-bubble--shout::after { display: none; }
.k-bubble--shout::before { content: ""; position: absolute; inset: -12px -14px; z-index: -1; background: var(--k-img-shout) 0 0 / 100% 100% no-repeat; }
.k-bubble--shout { isolation: isolate; }
/* 5.23 Loader (UIKIT 27): always CSS (it keeps moving while the game's init blocks the main thread) ---
Opening portal...
*/
.k-loader { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.k-loader__art { position: relative; display: block; width: 112px; height: 132px;
background: var(--k-art-loader, none) calc(56px - var(--k-art-loader-x, 0px)) calc(95px - var(--k-art-loader-y, 0px)) / var(--k-art-loader-w, 0px) var(--k-art-loader-h, 0px) no-repeat; }
/* CSS stand-in without the baked art: a goo ring around a goo-9 hole */
.k-loader__art::before {
content: ""; position: absolute; left: 16px; top: 73px; box-sizing: content-box; width: 68px; height: 32px;
border: 6px solid transparent; border-bottom-width: 9px; border-radius: 50%; opacity: var(--k-no-art, 1);
background: linear-gradient(var(--goo-9), var(--goo-9)) padding-box, linear-gradient(180deg, var(--goo-3), var(--goo-5) 45%, var(--goo-7)) border-box;
box-shadow: 0 0 0 2.6px var(--ink), inset 0 0 0 2.6px var(--ink), inset 0 6px 8px rgba(0, 0, 0, .35);
}
.k-loader__drop {
--k-x: 0px; --k-y: 0px;
position: absolute; left: calc(56px - var(--k-art-drop-x, 7.5px) + var(--k-x)); top: calc(var(--k-y) - var(--k-art-drop-y, 11.5px));
width: var(--k-art-drop-w, 15px); height: var(--k-art-drop-h, 19px);
background: var(--k-art-drop, radial-gradient(circle at 50% 62%, var(--goo-5) 0 5px, var(--ink) 5.2px 6.6px, transparent 7px)) 0 0 / 100% 100% no-repeat;
animation: k-drop-fall 900ms var(--ease-drip) infinite;
}
.k-loader__drop:nth-child(1) { --k-x: -14px; --k-y: 55px; }
.k-loader__drop:nth-child(2) { --k-x: 4px; --k-y: 33px; animation-delay: -300ms; }
.k-loader__drop:nth-child(3) { --k-x: 18px; --k-y: 9px; animation-delay: -600ms; }
.k-loader__label { font: 800 var(--fs-display-state)/var(--lh-display-state) var(--f-display); color: var(--text-hi);
--k-lip: var(--tl-display-state); -webkit-text-stroke: max(1.2px, .07em) var(--ink); paint-order: stroke fill;
text-shadow: 0 var(--k-lip) 0 var(--ink), .5px var(--k-lip) 0 var(--ink), -.5px var(--k-lip) 0 var(--ink); }
/* 5.24 Skip link (UIKIT 31):
Skip to games -- */
.k-skip {
position: fixed !important; z-index: var(--z-skip-link);
left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px)); top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px));
}
.k-skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; min-width: 0; padding: 0; overflow: hidden; border-width: 0; box-shadow: none; white-space: nowrap; }
/* 5.25 Game bar + goo tab (UIKIT 19): GPU in gpu-paint mode; the CSS theme on device loss / no WebGPU -- */
.k-bar {
position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 14px;
height: var(--bar-h); padding: 0 20px; background: var(--bar); box-shadow: inset 0 3px 0 var(--bar-strip);
color: var(--text-hi); -webkit-font-smoothing: antialiased;
}
.k-bar::after {
content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 6px); height: calc(var(--goo-gutter) + 8px); pointer-events: none;
background: var(--k-img-band) 0 0 / 1440px 22px repeat-x, linear-gradient(var(--void-0), var(--void-0)) 0 6px / 100% var(--goo-gutter) no-repeat;
}
@media (max-width: 759.98px) { .k-bar::after { background-image: var(--k-img-band-m), linear-gradient(var(--void-0), var(--void-0)); background-size: 390px 22px, 100% var(--goo-gutter); } }
.k-bar__title { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap;
font: 800 var(--fs-display-s)/1.1 var(--f-display); color: var(--text-hi); --k-lip: 2.5px;
-webkit-text-stroke: 2.4px var(--ink); paint-order: stroke fill; text-shadow: 0 var(--k-lip) 0 var(--ink); padding-bottom: 3px; }
.k-bar__meta { font: 500 13px/1.2 var(--f-body); color: var(--text-dim); white-space: nowrap; }
.k-tab {
position: relative; box-sizing: border-box; display: block; width: 96px; height: 24px; margin: 0; padding: 0;
border: 0; border-radius: 0 0 48px 48px / 0 0 24px 24px;
background: var(--k-img-tab) 50% 0 / 102px 27px no-repeat; cursor: pointer; appearance: none;
}
.k-tab:focus { outline: none; }
.k-tab:focus-visible { box-shadow: var(--k-ring); }
.k-tab--side {
width: 44px; height: 44px; border: var(--ink-component) solid var(--ink); border-radius: 50%;
background: var(--goo-5); box-shadow: inset 0 4px 0 var(--k-lit-c), inset 0 -6px 0 var(--k-shade-c), 0 4px 0 var(--ink);
}
/* 5.26 Dashboard: bar chart, table, LCD map frame, region list (UIKIT 28, 29) -------------------------- */
.k-chart { display: grid; gap: 12px; }
.k-bars { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; }
.k-bars__label { font: 600 14px/1 var(--f-body); color: var(--text); text-align: right; white-space: nowrap; }
.k-bars__row { display: contents; }
.k-bars__track {
position: relative; height: 40px;
background: repeating-linear-gradient(90deg, var(--void-4) 0 1px, transparent 1px calc(100% / var(--k-ticks, 5)));
background-size: calc(100% - 1px) 100%;
}
.k-bars__bar {
position: absolute; left: 0; top: 12px; height: 16px; width: calc(var(--v, 0) / var(--max, 1) * 100%); min-width: 2px;
background: var(--goo-data); border-radius: 0 4px 4px 0; cursor: default;
}
.k-bars__bar:hover, .k-bars__bar.is-hover { background: var(--goo-data-hover); }
.k-bars__value { position: absolute; top: 13px; left: calc(var(--v, 0) / var(--max, 1) * 100% + 10px); font: 600 14px/1 var(--f-body); color: var(--text-hi); white-space: nowrap; }
.k-bars__axis { display: flex; justify-content: space-between; grid-column: 2; margin-top: 6px; font: 500 var(--fs-chart-tick)/1 var(--f-body); color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* SVG charts: class the marks */
.k-svgbar { fill: var(--goo-data); }
.k-svgbar:hover, .k-svgbar.is-hover { fill: var(--goo-data-hover); }
.k-svggrid { stroke: var(--void-4); stroke-width: 1px; shape-rendering: crispEdges; }
.k-svgtick { fill: var(--text-dim); font: 500 var(--fs-chart-tick) var(--f-body); }
.k-svglabel { fill: var(--text); font: 600 14px var(--f-body); }
.k-svgvalue { fill: var(--text-hi); font: 600 14px var(--f-body); }
.k-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 500 15px/1.3 var(--f-body); color: var(--text); }
.k-table caption { padding: 0 0 12px; text-align: left; font: 800 var(--fs-display-xs)/1.1 var(--f-display); color: var(--text-hi); caption-side: top; }
.k-table thead th {
padding: 12px 10px; background: var(--void-3); color: var(--text-dim); font: 700 13px/1.2 var(--f-body); text-align: left;
border-top: 2.4px solid var(--ink); border-bottom: 2.4px solid var(--ink);
}
.k-table thead th:first-child { padding-left: 16px; border-left: 2.4px solid var(--ink); border-radius: 12px 0 0 12px; }
.k-table thead th:last-child { padding-right: 16px; border-right: 2.4px solid var(--ink); border-radius: 0 12px 12px 0; }
.k-table tbody th, .k-table tbody td { height: 44px; padding: 0 10px; border-bottom: 1px solid var(--void-4); text-align: left; }
.k-table tbody th { padding-left: 16px; color: var(--text-hi); font-weight: 600; }
.k-table tbody td:last-child { padding-right: 16px; }
.k-table .k-num, .k-table td.k-num, .k-table th.k-num { text-align: right; font-variant-numeric: tabular-nums; }
.k-table a:not(.k-key) { color: var(--text-hi); font-weight: 600; text-decoration: none; text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: 4px; }
.k-table a:not(.k-key):hover { color: var(--goo-3); text-decoration: underline; }
.k-table a:not(.k-key):focus-visible { outline: none; text-decoration: underline; box-shadow: var(--k-ring); }
.k-lcdmap {
position: relative; box-sizing: border-box; display: block; overflow: hidden; padding: 12px;
border: 2.5px solid var(--ink); border-radius: 14px;
background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)) 8px 4px / 45% 3.5px no-repeat,
linear-gradient(180deg, var(--lcd-top), var(--lcd) 55%, var(--lcd-bottom));
color: var(--goo-3);
box-shadow: 0 0 0 4px var(--void-3), 0 0 0 6.5px var(--ink);
}
.k-lcdmap svg { display: block; width: 100%; height: auto; }
.k-lcdmap__land { fill: var(--lcd-land); stroke: var(--goo-8); stroke-width: 1.6px; }
.k-lcdmap__grid { stroke: var(--lcd-grid); stroke-width: 1px; fill: none; }
.k-lcdmap__path { fill: none; stroke: var(--goo-7); stroke-width: 1.6px; stroke-dasharray: 4 5; opacity: .8; animation: k-flow 1.2s linear infinite; }
.k-lcdmap__blip { fill: var(--goo-3); stroke: var(--lcd); stroke-width: 2px; }
.k-lcdmap__halo { fill: none; stroke: var(--goo-3); stroke-width: 1.4px; opacity: .45; }
.k-lcdmap__server { fill: var(--cream); stroke: var(--ink); stroke-width: 2px; }
.k-lcdmap__caption { margin: 8px 4px 0; font: 500 var(--floor-info)/1.3 var(--f-body); color: var(--goo-3); opacity: .85; } /* 12, 13 coarse (the floor) */
.k-regions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.k-regions > li { box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px;
border: 2.4px solid var(--ink); border-radius: 12px; background: var(--void-3); box-shadow: 0 3px 0 var(--ink);
font: 600 14px/1.2 var(--f-body); color: var(--text); }
.k-regions > li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--goo-3); }
.k-regions .k-num { margin-left: auto; font-size: 15px; color: var(--text-hi); }
/* 5.27 No-WebGPU banner (UIKIT 30):
----------------------------- */
.k-banner {
position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 14px; min-height: 48px;
padding: 6px max(16px, calc(env(safe-area-inset-right, 0px) + 8px)) 9px max(16px, calc(env(safe-area-inset-left, 0px) + 8px));
background: var(--void-1); box-shadow: inset 0 -3px 0 var(--ink);
color: var(--text-hi); font: 600 16px/1.3 var(--f-body); -webkit-font-smoothing: antialiased;
}
.k-banner__well { box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px;
border: 2.4px solid var(--ink); border-radius: 9px; background: var(--sky); color: var(--ink); }
.k-banner__well > svg { width: 20px; height: 20px; }
.k-banner__msg { margin: 0; flex: 0 1 auto; }
.k-banner__why { flex: 1 1 auto; min-width: 0; font: 500 13px/1.3 var(--f-body); color: var(--text-dim); }
/* optional wrapper: .k-banner__text holds the message and "Why?" as one run of text (an open "Why?" drops below) */
.k-banner__text { flex: 1 1 auto; min-width: 0; }
.k-banner__text > .k-banner__msg { display: inline; }
.k-banner__text > .k-banner__why { display: inline-block; margin-left: 10px; vertical-align: baseline; }
.k-banner__text > .k-banner__why[open] { display: block; margin-left: 0; }
.k-banner__why > summary { display: inline-flex; align-items: center; min-height: var(--target-fine); cursor: pointer; color: var(--link); font: 600 14px/1 var(--f-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 4px; list-style: none; }
.k-banner__why > summary::-webkit-details-marker { display: none; }
.k-banner__why > summary:focus-visible { outline: none; box-shadow: var(--k-ring); }
.k-banner__why pre, .k-banner__why p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 13px/1.4 var(--f-body); color: var(--text-dim); }
.k-banner__close { margin-left: auto; }
/* 5.28 Document (privacy page, DESIGN §15.8): ------------- */
.k-doc { box-sizing: border-box; width: 100%; max-width: 768px; margin: 0 auto; padding: 60px 48px 56px; }
.k-doc__title { margin: 30px 0 18px; font: 800 var(--fs-display-page)/var(--lh-display-page) var(--f-display); color: var(--cream);
--k-lip: var(--tl-display-page); -webkit-text-stroke: max(1.2px, .07em) var(--ink); paint-order: stroke fill;
text-shadow: 0 var(--k-lip) 0 var(--ink), .5px var(--k-lip) 0 var(--ink), -.5px var(--k-lip) 0 var(--ink), 0 calc(var(--k-lip) * .5) 0 var(--ink); }
.k-doc .k-doc__lede { margin: 0 0 40px; font: 500 19px/1.58 var(--f-body); color: var(--text-hi); } /* beats .k-doc p */
.k-doc h2 { display: flex; align-items: center; gap: 12px; margin: 44px 0 12px; font: 700 var(--fs-display-sub)/var(--lh-display-sub) var(--f-display); color: var(--text-hi); }
.k-doc h2 > svg { flex: none; width: 28px; height: 28px; }
.k-doc p, .k-doc li { font: 400 var(--fs-body-doc)/var(--lh-body-doc) var(--f-body); color: var(--text); }
.k-doc p { margin: 0 0 16px; }
.k-doc a:not(.k-key):not(.k-jump) { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 4px; }
.k-doc a:not(.k-key):not(.k-jump):hover { color: var(--goo-1); }
.k-doc a:not(.k-key):not(.k-jump):focus-visible { outline: none; box-shadow: var(--k-ring); }
@media (max-width: 759.98px) {
.k-doc { padding: 52px 20px 40px; }
.k-doc__title { margin-top: 24px; }
.k-doc .k-doc__lede { font-size: 17px; }
}
/* 5.29 Overlay helpers: the hop overlay and error panel (DESIGN §11.16) --------------------------- */
.k-overlay { box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); color: var(--text-hi); font-family: var(--f-body); }
.k-inkpanel {
box-sizing: border-box; display: grid; justify-items: center; gap: 12px; max-width: 460px; padding: 28px 28px 30px;
border: var(--ink-component) solid var(--ink); border-radius: var(--r-card); background: var(--pill);
color: var(--text-hi); text-align: center; box-shadow: 0 var(--lip-panel) 0 var(--ink);
}
/* ------------------------------------------------------------------------------------------------
6. Coarse pointers: every target at least 44 x 44 (DESIGN §14), UI type at its coarse size
------------------------------------------------------------------------------------------------ */
@media (pointer: coarse) {
.k-key:where(:not(.k-jump)) { --k-h: 44px; }
.k-key--s { --k-h: 44px; }
.k-key--m { --k-h: 52px; }
.k-key--l { --k-h: 56px; }
.k-key--xl { --k-h: 60px; }
.k-key--round { --k-h: 54px; }
.k-key--round.k-key--dock { --k-h: 52px; }
.k-chip { --k-h: 44px; padding: 0 12px; }
.k-chips { gap: 8px; }
.k-bulb { width: var(--target-coarse); height: var(--target-coarse); }
.k-rot { gap: 0; }
.k-lcd__clear::after { inset: -13px; } /* 18 + 2 x 13 = 44 */
.k-toast__close, .k-banner__close { width: var(--target-coarse); height: var(--target-coarse); }
.k-link--block, .k-banner__why > summary { min-height: var(--target-coarse); }
.k-seg__tab::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--target-coarse); transform: translateY(-50%); }
.k-bars__track { height: var(--target-coarse); }
.k-bars__bar { top: 14px; }
.k-bars__value { top: 15px; }
}
/* ------------------------------------------------------------------------------------------------
6b. Baked wobble bodies (generated from site/art/art.json; the assets slot bakes them from the one
shape source). Each is a 9-slice border image drawn over the CSS body above, which stays underneath
as the fallback while the image loads. Hover swaps 3 boil frames at 8 fps (lip + 2), press shows the
lip-2 frame; the face (the border box) never moves in the image, the CSS transform moves it. The state
frames are warmed up through the hit strip only after load (html.mono-ready), never during first paint.
------------------------------------------------------------------------------------------------ */
/* @generated artrules:begin — node design/kitcss-tokens.mjs, from site/art/art.json. Do not edit by hand. */
.k-key, .k-jump { --k-bi: var(--k-art-key-cream); --k-bh1: var(--k-art-key-cream-h1); --k-bh2: var(--k-art-key-cream-h2); --k-bh3: var(--k-art-key-cream-h3); --k-bp: var(--k-art-key-cream-p); }
.k-key--cream { --k-bi: var(--k-art-key-cream); --k-bh1: var(--k-art-key-cream-h1); --k-bh2: var(--k-art-key-cream-h2); --k-bh3: var(--k-art-key-cream-h3); --k-bp: var(--k-art-key-cream-p); }
.k-key--pink { --k-bi: var(--k-art-key-pink); --k-bh1: var(--k-art-key-pink-h1); --k-bh2: var(--k-art-key-pink-h2); --k-bh3: var(--k-art-key-pink-h3); --k-bp: var(--k-art-key-pink-p); }
.k-key--plum { --k-bi: var(--k-art-key-plum); --k-bh1: var(--k-art-key-plum-h1); --k-bh2: var(--k-art-key-plum-h2); --k-bh3: var(--k-art-key-plum-h3); --k-bp: var(--k-art-key-plum-p); }
.k-key--danger { --k-bi: var(--k-art-key-danger); --k-bh1: var(--k-art-key-danger-h1); --k-bh2: var(--k-art-key-danger-h2); --k-bh3: var(--k-art-key-danger-h3); --k-bp: var(--k-art-key-danger-p); }
.k-key--goo, .k-key[aria-pressed="true"]:not(.k-key--nogoo) { --k-bi: var(--k-art-key-goo); --k-bh1: var(--k-art-key-goo-h1); --k-bh2: var(--k-art-key-goo-h2); --k-bh3: var(--k-art-key-goo-h3); --k-bp: var(--k-art-key-goo-p); }
.k-key:disabled, .k-key[aria-disabled="true"] { --k-bi: var(--k-art-key-disabled); --k-bh1: var(--k-art-key-disabled); --k-bh2: var(--k-art-key-disabled); --k-bh3: var(--k-art-key-disabled); --k-bp: var(--k-art-key-disabled); }
.k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter), .k-jump { border-width: 0; border-image: var(--k-bi) 58 72 68 72 fill / 29px 36px 34px 36px / 3px 3px 8px 3px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
@media (hover: hover) { .k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter):hover, .k-jump:hover { border-image: var(--k-bh1) 58 72 72 72 fill / 29px 36px 36px 36px / 3px 3px 10px 3px; animation: k-boil calc(var(--t-boil-interval) * 3) steps(1, end) infinite; } }
.k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter):active, .k-jump:active { border-image: var(--k-bp) 58 72 62 72 fill / 29px 36px 31px 36px / 3px 3px 5px 3px; animation: none; }
.k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter):disabled, .k-jump:disabled, .k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter)[aria-disabled="true"], .k-jump[aria-disabled="true"] { border-image: var(--k-bi) 58 72 68 72 fill / 29px 36px 34px 36px / 3px 3px 8px 3px; animation: none; }
.k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter):not(.k-key--goo)::before, .k-jump::before { display: none; } /* the bake has the gloss band */
html:is(.mono-ready, :not(.portal-active):not(.dashboard-active)) .k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter):not([aria-busy="true"])::after, html:is(.mono-ready, :not(.portal-active):not(.dashboard-active)) .k-jump::after { background: var(--k-bp) -9999px 0 / 1px 1px no-repeat; }
@media (hover: hover) { html:is(.mono-ready, :not(.portal-active):not(.dashboard-active)) .k-key:not(.k-key--icon):not(.k-key--s):not(.k-key--round):not(.k-key--tang):not(.k-key--sky):not(.k-key--butter):not([aria-busy="true"])::after, html:is(.mono-ready, :not(.portal-active):not(.dashboard-active)) .k-jump::after { background: var(--k-bh1) -9999px 0 / 1px 1px no-repeat, var(--k-bh2) -9999px 0 / 1px 1px no-repeat, var(--k-bh3) -9999px 0 / 1px 1px no-repeat, var(--k-bp) -9999px 0 / 1px 1px no-repeat; } }
.k-chip { --k-bi: var(--k-art-chip-plum); --k-bh1: var(--k-art-chip-plum-h1); --k-bh2: var(--k-art-chip-plum-h2); --k-bh3: var(--k-art-chip-plum-h3); --k-bp: var(--k-art-chip-plum-p); border-width: 0; border-image: var(--k-bi) 50 64 60 64 fill / 25px 32px 30px 32px / 3.5px 3.5px 8.5px 3.5px; --k-sh-edge: inset 0 0 0 2.6px var(--ink); }
.k-chip[aria-pressed="true"], .k-chip.is-active { --k-bi: var(--k-art-chip-goo); --k-bh1: var(--k-art-chip-goo-h1); --k-bh2: var(--k-art-chip-goo-h2); --k-bh3: var(--k-art-chip-goo-h3); --k-bp: var(--k-art-chip-goo-p); }
@media (hover: hover) { .k-chip:hover { border-image: var(--k-bh1) 50 64 64 64 fill / 25px 32px 32px 32px / 3.5px 3.5px 10.5px 3.5px; animation: k-boil calc(var(--t-boil-interval) * 3) steps(1, end) infinite; } }
.k-chip:active { border-image: var(--k-bp) 50 64 54 64 fill / 25px 32px 27px 32px / 3.5px 3.5px 5.5px 3.5px; animation: none; }
html:is(.mono-ready, :not(.portal-active):not(.dashboard-active)) .k-chip::after { background: var(--k-bp) -9999px 0 / 1px 1px no-repeat; }
@media (hover: hover) { html:is(.mono-ready, :not(.portal-active):not(.dashboard-active)) .k-chip::after { background: var(--k-bh1) -9999px 0 / 1px 1px no-repeat, var(--k-bh2) -9999px 0 / 1px 1px no-repeat, var(--k-bh3) -9999px 0 / 1px 1px no-repeat, var(--k-bp) -9999px 0 / 1px 1px no-repeat; } }
.k-panel { border-width: 0; border-image: var(--k-art-body-panel) 76 76 92 76 fill / 38px 38px 46px 38px / 3px 3px 11px 3px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-tile { border-width: 0; border-image: var(--k-art-body-tile) 56 56 64 56 fill / 28px 28px 32px 28px / 3.5px 3.5px 7.5px 3.5px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-toast { border-width: 0; border-image: var(--k-art-body-toast) 66 64 78 64 fill / 33px 32px 39px 32px / 3px 3px 9px 3px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-field__box { border-width: 0; border-image: var(--k-art-body-field) 62 52 62 52 fill / 31px 26px 31px 26px / 3.5px 3.5px 3.5px 3.5px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-pad { border-width: 0; border-image: var(--k-art-body-pad) 86 100 104 100 fill / 43px 50px 52px 50px / 2.5px 2.5px 11.5px 2.5px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-dock__body { border-width: 0; border-image: var(--k-art-body-dock) 74 84 86 84 fill / 37px 42px 43px 42px / 3px 3px 9px 3px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-sheet { border-width: 0; border-image: var(--k-art-body-sheet) 20 80 96 80 fill / 10px 40px 48px 40px / 0px 3px 11px 3px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-tip { border-width: 0; border-image: var(--k-art-body-tooltip) 40 46 46 46 fill / 20px 23px 23px 23px / 3px 3px 6px 3px; --k-sh-edge: inset 0 0 0 3px var(--ink); }
.k-pad { background-image: none; } .k-pad::before, .k-pad::after { display: none; } /* the bake has the strip and the screws */
.k-sheet { --k-sh-edge: inset 3px 0 0 0 var(--ink), inset -3px 0 0 0 var(--ink), inset 0 -3px 0 0 var(--ink); }
.k-field--error .k-field__box { outline: 3px solid var(--danger); outline-offset: -6px; } /* the ring can't be an inset shadow under the fill */
@supports selector(:has(a)) { .k-field__box:has(.k-field__input[aria-invalid="true"]) { outline: 3px solid var(--danger); outline-offset: -6px; } }
.k-tip { --k-sh-edge: inset 0 0 0 2.4px var(--ink); }
/* @generated artrules:end */
@keyframes k-boil { 0%, 100% { border-image-source: var(--k-bh1); } 33.33% { border-image-source: var(--k-bh2); } 66.67% { border-image-source: var(--k-bh3); } }
/* ------------------------------------------------------------------------------------------------
7. The gpu-paint switch (UIKIT §0, DESIGN §16.1 R1/R4/R6, §16.3 step 4).
html.gpu-paint: the GPU is painting. An element joins the switch only when its painter marks it:
data-gpu the GPU paints this element's body, its text (.k-display/.k-gputext) and everything
inside it: all of its paint goes transparent (the box, text, rings, media, pseudos);
data-gpu="body" only its own box paint goes transparent (its text and children stay CSS).
Twins stay where they are and stay interactive: no display:none or visibility:hidden on a control,
no kit motion (the GPU paints lift and sink; the hit box never moves). Joining fades the CSS paint
out over 120 ms; removing html.gpu-paint (device loss) brings the CSS theme back in the same task.
------------------------------------------------------------------------------------------------ */
html.gpu-paint [data-gpu] { --k-motion: 0 !important; --k-free: 0 !important; }
html.gpu-paint [data-gpu]:not([data-gpu="body"]),
html.gpu-paint [data-gpu]:not([data-gpu="body"]) * {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke-color: transparent !important;
text-shadow: none !important;
text-decoration-color: transparent !important;
caret-color: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-color: transparent !important;
border-image-source: none !important;
box-shadow: none !important;
outline-color: transparent !important;
fill: transparent !important;
stroke: transparent !important;
animation-play-state: paused !important;
transition: color .12s linear, background-color .12s linear, border-color .12s linear, box-shadow .12s linear,
text-shadow .12s linear, fill .12s linear, stroke .12s linear, opacity .12s linear !important;
}
html.gpu-paint [data-gpu]:not([data-gpu="body"])::before,
html.gpu-paint [data-gpu]:not([data-gpu="body"])::after,
html.gpu-paint [data-gpu]:not([data-gpu="body"]) *::before,
html.gpu-paint [data-gpu]:not([data-gpu="body"]) *::after { opacity: 0 !important; transition: opacity .12s linear !important; }
html.gpu-paint [data-gpu]:not([data-gpu="body"]) :is(img, video, canvas, picture, .k-media),
html.gpu-paint :is(img, video, canvas, picture)[data-gpu] { opacity: 0 !important; transition: opacity .12s linear !important; }
html.gpu-paint [data-gpu="body"] {
background-color: transparent !important;
background-image: none !important;
border-color: transparent !important;
border-image-source: none !important;
box-shadow: none !important;
outline-color: transparent !important;
transition: background-color .12s linear, border-color .12s linear, box-shadow .12s linear !important;
}
html.gpu-paint [data-gpu="body"]::before, html.gpu-paint [data-gpu="body"]::after { opacity: 0 !important; transition: opacity .12s linear !important; }
/* GPU accents around CSS bodies (data-paint, KIT-API §8): while the GPU paints a goo key's E2 halo (data-paint="glow"), the
CSS stand-in glow steps aside, so the halo is not doubled; the body itself stays CSS. */
html.gpu-paint [data-paint="glow"] { --k-sh-glow: var(--k-none) !important; }
/* ------------------------------------------------------------------------------------------------
8. Reduced motion (DESIGN §10, UIKIT §34): the OS setting unless html[data-motion="full"], or
html[data-motion="reduce"]. Every CSS animation stops on its end/base frame, transitions are
instant, no smooth scroll. [data-k-fade] opts an element out (it must animate opacity only), and
the kit's own reduced-motion fades and slides (toasts, sheet, dock, Play pill, switch knob; UIKIT §34) are
re-enabled below.
------------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html:not([data-motion="full"]) *:not([data-k-fade]), html:not([data-motion="full"]) *:not([data-k-fade])::before, html:not([data-motion="full"]) *:not([data-k-fade])::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html:not([data-motion="full"]) .k-toast { animation: k-fade-in 150ms linear both !important; }
html:not([data-motion="full"]) .k-toast.is-leaving { animation: k-fade-out 150ms linear both !important; }
html:not([data-motion="full"]) .k-sheet { animation: k-fade-in 120ms linear both !important; }
html:not([data-motion="full"]) .k-dock__body { transition: opacity 120ms linear !important; }
html:not([data-motion="full"]) .k-switch__track::after { transition: transform 120ms linear !important; }
html:not([data-motion="full"]) .k-card .k-play, html:not([data-motion="full"]) .k-hublink .k-play { transition: opacity 150ms linear !important; }
html:not([data-motion="full"]) .k-rot .k-bulb[aria-current="true"]::after { background-size: 100% 100%; background-image: radial-gradient(circle at 30% 30%, #fff 0 1.9px, transparent 2.3px), linear-gradient(var(--goo-5), var(--goo-5)); }
html:not([data-motion="full"]) .k-rot .k-bulb[aria-current="true"]::before { --k-sh-still: 0 0 0 1px var(--void-2), 0 0 0 3.4px var(--goo-3); }
}
html[data-motion="reduce"] *:not([data-k-fade]), html[data-motion="reduce"] *:not([data-k-fade])::before, html[data-motion="reduce"] *:not([data-k-fade])::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html[data-motion="reduce"] .k-toast { animation: k-fade-in 150ms linear both !important; }
html[data-motion="reduce"] .k-toast.is-leaving { animation: k-fade-out 150ms linear both !important; }
html[data-motion="reduce"] .k-sheet { animation: k-fade-in 120ms linear both !important; }
html[data-motion="reduce"] .k-dock__body { transition: opacity 120ms linear !important; }
html[data-motion="reduce"] .k-switch__track::after { transition: transform 120ms linear !important; }
html[data-motion="reduce"] .k-card .k-play, html[data-motion="reduce"] .k-hublink .k-play { transition: opacity 150ms linear !important; }
html[data-motion="reduce"] .k-rot .k-bulb[aria-current="true"]::after { background-size: 100% 100%; background-image: radial-gradient(circle at 30% 30%, #fff 0 1.9px, transparent 2.3px), linear-gradient(var(--goo-5), var(--goo-5)); }
html[data-motion="reduce"] .k-rot .k-bulb[aria-current="true"]::before { --k-sh-still: 0 0 0 1px var(--void-2), 0 0 0 3.4px var(--goo-3); }
@keyframes k-blink { 0% { opacity: 1; } 50% { opacity: .4; } }
@keyframes k-wiggle { 0%, 100% { transform: rotate(var(--k-rot)); } 30% { transform: rotate(calc(var(--k-rot) + 2deg)); } 70% { transform: rotate(calc(var(--k-rot) - 2deg)); } }
@keyframes k-fade-in { from { opacity: 0; } }
@keyframes k-fade-out { to { opacity: 0; } }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes k-toast-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes k-sheet-in { from { transform: translateY(-100%); } }
@keyframes k-bulb-fill { from { background-size: 100% 0%; } to { background-size: 100% 100%; } }
@keyframes k-drop-fall {
0% { opacity: 0; transform: translateY(-22px) scale(.7); }
18% { opacity: 1; }
84% { opacity: 1; transform: translateY(calc(90px - var(--k-y))) scale(1, 1.08); }
100% { opacity: 0; transform: translateY(calc(97px - var(--k-y))) scale(1.3, .55); }
}
@keyframes k-flow { to { stroke-dashoffset: -18; } }
/* ------------------------------------------------------------------------------------------------
9. Forced colors (DESIGN §14, §15.9): the renderer never starts. System colours only, decoration
off (drips, slop, glob, glare, peel, LEDs, live dots, the play pill), content images stay, words
stay, focus = 3 px Highlight outline, selected = Highlight fill.
------------------------------------------------------------------------------------------------ */
@media (forced-colors: active) {
.k-key, .k-jump, .k-chip, .k-seg, .k-seg__tab, .k-lcd, .k-field__box, .k-pill, .k-sticker, .k-plate, .k-slab, .k-panel,
.k-tile, .k-row, .k-card, .k-toast, .k-tip, .k-bubble, .k-pad, .k-dock__body, .k-sheet, .k-alert, .k-inkpanel, .k-count, .k-tab {
border-color: CanvasText; background-image: none; -webkit-text-stroke: 0; text-shadow: none; transform: none;
}
.k-key, .k-jump, .k-chip, .k-seg__tab, .k-lcd__clear, .k-toast__close, .k-banner__close, .k-field__eye, .k-tab { color: ButtonText; background-color: ButtonFace; border-color: ButtonText; }
.k-key:disabled, .k-key[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
.k-chip[aria-pressed="true"], .k-chip.is-active, .k-seg__tab[aria-selected="true"], .k-key[aria-pressed="true"], .k-key[aria-checked="true"] {
forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
}
.k-chip[aria-pressed="true"] .k-count, .k-chip.is-active .k-count { forced-color-adjust: none; background: HighlightText; color: Highlight; border-color: HighlightText; }
.k-switch__track { forced-color-adjust: none; background: Canvas; border-color: ButtonText; }
.k-switch__track::after { forced-color-adjust: none; background: ButtonText; border-color: ButtonText; box-shadow: none; }
.k-switch[aria-checked="true"] .k-switch__track, .k-switch__input:checked + .k-switch__track { background: Highlight; border-color: Highlight; }
.k-switch[aria-checked="true"] .k-switch__track::after, .k-switch__input:checked + .k-switch__track::after { background: HighlightText; border-color: HighlightText; }
.k-tab { border: 2px solid ButtonText; }
.k-tube__bar { border-color: CanvasText; }
.k-tube__bar::before { forced-color-adjust: none; background: Highlight; }
.k-link, .k-doc a:not(.k-key):not(.k-jump), .k-table a:not(.k-key) { color: LinkText; }
.k-key::before, .k-jump::before, .k-chip::before, .k-panel--slop::before, .k-boxart::before, .k-boxart::after, .k-sticker::before,
.k-sticker::after, .k-led, .k-pill__dot, .k-play, .k-card__window::before, .k-card__window::after, .k-bar::after,
.k-bubble::after, .k-bubble--shout::before, .k-toast__well--ok::after, .k-toast--ok .k-toast__well::after, .k-pad::before, .k-pad::after, .k-screw,
.k-loader__drop, .k-art, .k-card__critter, .k-bulb::after, .k-lcd__kbd, .k-card__window::after { display: none !important; }
.k-card__window { border-color: CanvasText; border-width: 2px; background: Canvas; }
.k-bulb::before { forced-color-adjust: none; background: Canvas; border-color: ButtonText; box-shadow: none; }
.k-bulb[aria-current="true"]::before { background: Highlight; border-color: Highlight; }
.k-loader__art { height: 24px; background: none; }
.k-loader__art::before { top: 0; left: 28px; width: 40px; height: 12px; border: 2px solid CanvasText; background: Canvas; box-shadow: none; opacity: 1; }
.k-bubble--shout { border: 2px solid CanvasText; }
svg { forced-color-adjust: auto; }
.k-ico, .k-key > svg, .k-lcd__icon, .k-field__icon, .k-toast__well > svg, .k-banner__well > svg, .k-pill > svg { color: CanvasText; fill: currentColor; stroke: currentColor; }
.k-key:focus-visible, .k-jump:focus-visible, .k-chip:focus-visible, .k-seg__tab:focus-visible, .k-card:focus-visible, .k-hublink:focus-visible,
.k-switch:focus-visible .k-switch__track, .k-bulb:focus-visible::before, .k-avatar:focus-visible, .k-tab:focus-visible,
.k-lcd:focus-within, .k-field__box:focus-within, .k-target:focus-visible, .k-link:focus-visible, .k-table a:focus-visible,
.k-doc a:focus-visible, .k-toast__close:focus-visible, .k-banner__close:focus-visible, .k-lcd__clear:focus-visible,
.k-field__eye:focus-visible, .k-banner__why > summary:focus-visible, :where(:focus-visible:not(iframe)) {
outline: 3px solid Highlight !important; outline-offset: 2px !important;
}
.k-key, .k-jump, .k-chip, .k-panel, .k-tile, .k-toast, .k-field__box, .k-pad, .k-dock__body, .k-sheet, .k-tip {
border-image: none !important; border-style: solid !important; border-width: 2px !important; animation: none !important;
}
/* the container carries the ring: no second outline on the inner control */
.k-lcd__input:focus-visible, .k-field__input:focus-visible, .k-switch:focus-visible { outline: none !important; }
.k-lcd__input::placeholder, .k-field__input::placeholder { color: GrayText; }
.k-lcd__input, .k-lcd__readout, .k-lcd__kbd { color: CanvasText; text-shadow: none; }
/* CSS-painted display type: no ink stroke (it would be forced to a solid system colour) */
[class*="k-t-display"], .k-display, .k-card__title, .k-doc__title, .k-loader__label, .k-bar__title, .k-jump__title, .k-row__title { -webkit-text-stroke: 0 !important; }
.k-portal, .k-row__portal { border-width: 2px !important; border-color: CanvasText; background: Canvas; box-shadow: none; }
.k-ico-play, .k-play::before { forced-color-adjust: none; background: ButtonText; -webkit-mask: var(--k-img-play) center / contain no-repeat; mask: var(--k-img-play) center / contain no-repeat; }
}
/* prefers-contrast: more: ink lines on dark fills become 3 px text-hi (DESIGN §14) */
@media (prefers-contrast: more) {
.k-slab, .k-panel, .k-tile, .k-row, .k-card, .k-toast, .k-pill, .k-plate, .k-pad, .k-dock__body, .k-sheet, .k-seg, .k-lcd,
.k-alert, .k-inkpanel, .k-key--plum, .k-chip, .k-count, .k-card__window { border-color: var(--text-hi); }
.k-slab, .k-panel, .k-card, .k-toast, .k-pad, .k-dock__body, .k-sheet, .k-seg, .k-key--plum, .k-chip { border-width: 3px; }
.k-field__msg, .k-card__meta, .k-rot__count, .k-tile__label { color: var(--text); }
/* dark baked bodies draw their own ink: give the high-contrast line back to CSS */
.k-panel, .k-tile, .k-toast, .k-pad, .k-dock__body, .k-sheet, .k-chip:not([aria-pressed="true"]):not(.is-active), .k-key--plum:not([aria-pressed="true"]) {
border-image: none !important; border-style: solid !important; border-width: 3px !important; --k-sh-edge: var(--k-none) !important;
}
.k-sheet { border-top-width: 0 !important; }
}