/* Elevate demo kit v50: what every demo shares. The Mac window bar (close, minimise, full screen), the dock,
   persona cursors, the scroll sentence, the Kitchen components (after dqnamo.com/kitchen), the Libraries.dev
   effects (MIT, Jakub Antalik; ported to plain CSS/JS), toast, lightbox, before/after. Each demo themes these
   through custom properties: --k-ink, --k-paper, --k-accent, --k-accent-ink, --k-radius, --k-font, --k-mono. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
/* rotated tapes and off-screen sentence words never widen the page (clip keeps sticky and pins working) */
.mac-page{overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
:where(img){height:auto}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--k-accent,currentColor);outline-offset:3px}
.k-skip{position:absolute;left:-999px;top:8px;z-index:999;padding:10px 14px;background:#000;color:#fff}
.k-skip:focus{left:8px}
.k-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------------------------------------------------------------- Mac window bar + dock */
.mac{position:sticky;top:0;z-index:300;display:flex;align-items:center;gap:14px;height:38px;padding:0 14px;background:rgb(246 246 248/.86);color:#1d1d1f;
  font:500 12.5px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 rgb(0 0 0/.08)}
.in-frame .mac{display:none}
.mac-lights{display:flex;gap:8px}
.mac-btn{position:relative;width:13px;height:13px;padding:0;border:0;border-radius:50%;box-shadow:inset 0 0 0 .5px rgb(0 0 0/.2)}
.mac-btn::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;background-repeat:no-repeat;background-position:center;transition:opacity .12s}
.mac-lights:hover .mac-btn::after,.mac-btn:focus-visible::after{opacity:1}
.mac-close{background:#ff5f57}.mac-min{background:#febc2e}.mac-max{background:#28c840}
.mac-close::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.6 1.6l4.8 4.8M6.4 1.6L1.6 6.4' stroke='%234d0000' stroke-width='1.3'/%3E%3C/svg%3E");background-size:7px}
.mac-min::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.2 4h5.6' stroke='%23985700' stroke-width='1.4'/%3E%3C/svg%3E");background-size:8px}
.mac-max::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 1.4h4.6v4.6zM6 6.6H1.4V2z' fill='%23006500'/%3E%3C/svg%3E");background-size:7px}
.mac-title{flex:1;min-width:0;overflow:hidden;text-align:center;white-space:nowrap;text-overflow:ellipsis;color:#3a3a3c}
.mac-title b{font-weight:600}
.mac-title small{margin-left:8px;padding:2px 7px;border-radius:99px;background:rgb(0 0 0/.07);color:#6e6e73;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mac-cta{flex:none;padding:6px 11px;border-radius:7px;background:#1d1d1f;color:#fff;text-decoration:none;font-weight:600}
.mac-page{transform-origin:50% 100%;transition:transform .6s cubic-bezier(.32,.72,0,1),opacity .45s,filter .45s}
.is-min .mac-page{transform:translate3d(0,48vh,0) scale(.08);opacity:0;filter:blur(6px);pointer-events:none}
.is-min,.is-min body{overflow:hidden}
.is-closing .mac-page{transform:scale(.92);opacity:0}
.mac-dock{position:fixed;left:50%;bottom:18px;z-index:310;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:18px;background:rgb(255 255 255/.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 20px 50px -18px rgb(0 0 0/.45),inset 0 0 0 1px rgb(255 255 255/.5);
  color:#1d1d1f;font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;transform:translate(-50%,160%);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.is-min .mac-dock{transform:translate(-50%,0)}
.mac-dock button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;text-align:left}
.mac-dock i{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--k-accent,#111);color:var(--k-accent-ink,#fff);font:800 19px/1 var(--k-font,inherit);font-style:normal;box-shadow:0 6px 14px -6px rgb(0 0 0/.5)}
.mac-dock small{display:block;color:#6e6e73;font-weight:500}
.is-focus .mac{transform:translateY(-100%);opacity:0;pointer-events:none}
.is-focus .mac:hover{transform:none;opacity:1;pointer-events:auto}

/* ---------------------------------------------------------------- toast + lightbox */
.k-toast{position:fixed;left:50%;bottom:22px;z-index:400;width:min(92vw,440px);padding:14px 18px;border-radius:14px;background:#111;color:#fff;font:500 14px/1.45 var(--k-font,system-ui);box-shadow:0 22px 50px -20px rgb(0 0 0/.5);transform:translate(-50%,140%);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s}
.k-toast.on{transform:translate(-50%,0);opacity:1}
.k-lb{position:fixed;inset:0;z-index:420;display:grid;place-items:center;padding:4vmin;background:rgb(8 8 10/.88);opacity:0;pointer-events:none;transition:opacity .3s}
.k-lb.on{opacity:1;pointer-events:auto}
.k-lb img{max-height:84vh;width:auto;border-radius:10px;box-shadow:0 30px 80px rgb(0 0 0/.5)}
.k-lb p{margin:14px 0 0;color:#fff;font:500 14px/1.4 var(--k-font,system-ui);text-align:center}
.k-lb button{position:absolute;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:rgb(255 255 255/.12);color:#fff;font-size:22px}

/* ---------------------------------------------------------------- reveal */
.k-js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.k-js [data-reveal].in{opacity:1;transform:none}

/* ---------------------------------------------------------------- persona cursors (cogitable-style) */
.k-vc{position:absolute;inset:0;z-index:30;overflow:hidden;pointer-events:none}
.k-vc .vc-cursor{position:absolute;top:0;left:0;opacity:0;transition:transform var(--dur,1.4s) var(--ease,cubic-bezier(.45,0,.25,1)),opacity .5s}
.k-vc.on .vc-cursor{opacity:1}
.k-vc .vc-press{transform-origin:2px 2px}
.k-vc .vc-press.tap{animation:k-tap .32s ease-out}
.k-vc svg{width:20px;height:22px;fill:var(--c);stroke:#fcfcfc;stroke-width:1.5px;stroke-linejoin:round;filter:drop-shadow(0 1px 1.5px rgb(0 0 0/.18))}
.k-vc .vc-tag{position:absolute;top:20px;left:12px;padding:2px 7px;border-radius:2px;background:var(--c);color:var(--ink,#fcfcfc);font:500 12px/1.5 -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap}
.k-vc .vc-big .vc-press{scale:1.45}
.k-vc .vc-big .vc-tag{top:30px;left:16px}
.k-ring{position:absolute;top:0;left:0;border:2px solid #6741ca;border-radius:8px;opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1),width .35s,height .35s}
.k-ring.on{opacity:1}
.k-ring span{position:absolute;bottom:calc(100% + 6px);left:-2px;max-width:min(420px,80vw);overflow:hidden;padding:2px 7px;border-radius:2px;background:#6741ca;color:#fcfcfc;font:500 12px/1.5 -apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap;text-overflow:ellipsis}
.k-ring span i{margin-left:6px;font-style:normal;opacity:.86}
.is-tapped{animation:k-tapped .4s ease-out}
@keyframes k-tap{40%{transform:scale(.78)}}
@keyframes k-tapped{40%{transform:scale(.97)}}

/* ---------------------------------------------------------------- scroll sentence (GSAP) */
.k-sentence{position:relative;overflow:hidden}
.k-sentence-pin{display:flex;align-items:center;min-height:100svh;padding:0 5vw}
.k-sentence-line{margin:0;font-size:clamp(40px,7.4vw,124px);line-height:1;letter-spacing:-.035em;white-space:normal}
.k-sentence-line .w{display:inline-block;margin-right:.24em;will-change:transform}

/* ---------------------------------------------------------------- Kitchen: tactile button */
.k-tactile{--face:var(--k-accent,#111);--edge:color-mix(in srgb,var(--face) 62%,#000);--txt:var(--k-accent-ink,#fff);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border:0;border-radius:16px;
  background:var(--face);color:var(--txt);font-weight:800;text-decoration:none;letter-spacing:.01em;box-shadow:0 7px 0 var(--edge),0 16px 26px -10px rgb(0 0 0/.45),inset 0 1px 0 rgb(255 255 255/.35),inset 0 -2px 0 rgb(0 0 0/.12);
  transform:translateY(0);transition:transform .09s ease,box-shadow .09s ease;-webkit-tap-highlight-color:transparent;user-select:none}
.k-tactile::before{content:"";position:absolute;inset:4px 6px auto;height:40%;border-radius:12px 12px 40% 40%;background:linear-gradient(rgb(255 255 255/.28),rgb(255 255 255/0));pointer-events:none}
.k-tactile:hover{transform:translateY(-1px);box-shadow:0 8px 0 var(--edge),0 18px 28px -10px rgb(0 0 0/.45),inset 0 1px 0 rgb(255 255 255/.35),inset 0 -2px 0 rgb(0 0 0/.12)}
.k-tactile:active,.k-tactile.is-pressed{transform:translateY(6px);box-shadow:0 1px 0 var(--edge),0 6px 12px -8px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.2),inset 0 2px 6px rgb(0 0 0/.18)}

/* ---------------------------------------------------------------- Kitchen: hold to confirm */
.k-hold{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border:0;border-radius:var(--k-radius,14px);background:color-mix(in srgb,var(--k-accent,#111) 16%,var(--k-paper,#fff));color:var(--k-ink,#111);font-weight:800;user-select:none;-webkit-user-select:none;touch-action:none}
.k-hold::before{content:"";position:absolute;inset:0;background:var(--k-accent,#111);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .2s}
.k-hold.holding::before{transition:none}
.k-hold span{position:relative;z-index:1;transition:color .2s}
.k-hold.holding span,.k-hold.done span{color:var(--k-accent-ink,#fff)}
.k-hold.done::before{transform:scaleX(1)}
.k-undo{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:14px}
.k-undo button{border:0;background:none;padding:0;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.k-undo i{flex:1;height:3px;border-radius:2px;background:currentColor;opacity:.25;transform-origin:left;animation:k-undo 5s linear forwards}
@keyframes k-undo{to{transform:scaleX(0)}}

/* ---------------------------------------------------------------- Kitchen: dynamic button */
.k-dyn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:0;border-radius:99px;background:var(--k-ink,#111);color:var(--k-paper,#fff);font-weight:700;overflow:hidden;white-space:nowrap;transition:width .45s cubic-bezier(.22,1,.36,1),background .3s}
.k-dyn .lbl{display:inline-block;transition:opacity .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.k-dyn .lbl.out{opacity:0;transform:translateY(-60%)}
.k-dyn.ok{background:#1f8a4c}

/* ---------------------------------------------------------------- Kitchen: receipt printer */
.k-printer{position:relative;width:min(360px,100%);margin-inline:auto}
.k-printer-head{position:relative;z-index:2;height:58px;border-radius:14px;background:linear-gradient(#2b2b2e,#151517);box-shadow:inset 0 1px 0 rgb(255 255 255/.12),0 10px 24px -12px rgb(0 0 0/.6)}
.k-printer-head::after{content:"";position:absolute;left:18px;right:18px;bottom:12px;height:6px;border-radius:3px;background:#050506;box-shadow:inset 0 2px 3px rgb(0 0 0/.8)}
.k-printer-head b{position:absolute;left:18px;top:13px;color:#9a9aa1;font:700 10px/1 var(--k-mono,ui-monospace,monospace);letter-spacing:.14em}
.k-printer-head i{position:absolute;right:18px;top:12px;width:8px;height:8px;border-radius:50%;background:#3a3a3e}
.k-printer.printing .k-printer-head i{background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.k-paper-clip{position:relative;z-index:1;margin:-16px 26px 0;overflow:hidden}
.k-paper{padding:26px 18px 30px;background:#fffdf7;color:#141414;font:500 12.5px/1.75 var(--k-mono,ui-monospace,monospace);transform:translateY(-101%);transition:transform 1.6s steps(14,end);
  -webkit-mask:linear-gradient(#000 calc(100% - 10px),transparent 0),conic-gradient(from 135deg at 50% calc(100% - 10px),#000 90deg,transparent 0) 0 100%/14px 10px repeat-x;mask:linear-gradient(#000 calc(100% - 10px),transparent 0),conic-gradient(from 135deg at 50% calc(100% - 10px),#000 90deg,transparent 0) 0 100%/14px 10px repeat-x;box-shadow:0 10px 26px -14px rgb(0 0 0/.5)}
.k-printer.printed .k-paper{transform:none}
.k-paper h4{margin:0 0 10px;font-size:13px;letter-spacing:.12em;text-align:center}
.k-paper .row{display:flex;justify-content:space-between;gap:12px}
.k-paper .tot{margin-top:10px;padding-top:10px;border-top:1px dashed #9a9a9a;font-weight:800;font-size:15px}
.k-paper small{display:block;margin-top:12px;color:#666;text-align:center}

/* ---------------------------------------------------------------- Kitchen: ticket + stamp */
.k-ticket{--notch:14px;position:relative;display:grid;grid-template-columns:1fr auto;width:min(460px,100%);background:var(--k-ticket,#fff);color:#141414;border-radius:16px;
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - 118px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - 118px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--notch) at calc(100% - 118px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - 118px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  filter:drop-shadow(0 18px 24px rgb(0 0 0/.22));transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .4s cubic-bezier(.22,1,.36,1)}
.k-ticket>div{padding:20px 22px}
.k-ticket>div+div{width:118px;border-left:2px dashed rgb(0 0 0/.2);display:grid;place-items:center;text-align:center}
.k-ticket small{display:block;color:#6a6a6a;font:700 10px/1.4 var(--k-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase}
.k-ticket strong{display:block;margin:2px 0 10px;font-size:17px}
.k-ticket .code{font:800 22px/1 var(--k-mono,ui-monospace,monospace);letter-spacing:.06em;writing-mode:vertical-rl;transform:rotate(180deg)}
/* postage stamp: the perforated outline is an exact clip-path drawn by kit.js for each stamp's size */
.k-stamp{position:relative;display:block;padding:12px;border:0;background:#fff}
.k-stamp img{width:100%;aspect-ratio:4/5;object-fit:cover}
.k-stamp figcaption{display:flex;justify-content:space-between;gap:8px;padding:8px 2px 0;color:#141414;font:700 10.5px/1.3 var(--k-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase}

/* ---------------------------------------------------------------- Kitchen: scroll fade list */
.k-fade-list{max-height:260px;overflow:auto;margin:0;padding:6px 0;list-style:none;-webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);scrollbar-width:none;overscroll-behavior:contain}
.k-fade-list::-webkit-scrollbar{display:none}
.k-fade-list li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}

/* ---------------------------------------------------------------- Kitchen: selector (model-selector style) */
.k-select{display:grid;gap:8px}
.k-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid color-mix(in srgb,var(--k-ink,#111) 14%,transparent);border-radius:var(--k-radius,14px);background:transparent;text-align:left;transition:border-color .2s,background .2s,transform .2s}
.k-opt:hover{transform:translateY(-1px)}
.k-opt[aria-pressed="true"]{border-color:var(--k-accent,#111);background:color-mix(in srgb,var(--k-accent,#111) 9%,transparent)}
.k-opt .dot{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;opacity:.4}
.k-opt[aria-pressed="true"] .dot{opacity:1;background:radial-gradient(circle,var(--k-accent,#111) 45%,transparent 50%)}
.k-opt b{display:block}
.k-opt small{display:block;opacity:.7}
.k-bars{display:grid;gap:4px;width:110px}
.k-bars span{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:6px;font-size:10.5px;opacity:.85}
.k-bars span i{height:5px;border-radius:3px;background:linear-gradient(var(--k-accent,#111),var(--k-accent,#111)) 0/var(--w,40%) 100% no-repeat,color-mix(in srgb,currentColor 14%,transparent);transition:background-size .6s}

/* ---------------------------------------------------------------- Kitchen: playing cards fan */
.k-cards{position:relative;height:clamp(300px,42vw,420px);perspective:1200px;touch-action:pan-y}
.k-card{position:absolute;left:50%;bottom:0;width:clamp(150px,19vw,210px);aspect-ratio:5/7;margin-left:calc(clamp(150px,19vw,210px) / -2);padding:14px;border:0;border-radius:16px;background:#fff;color:#141414;text-align:left;
  box-shadow:0 1px 0 rgb(0 0 0/.06),0 22px 40px -22px rgb(0 0 0/.55);transform-origin:50% 140%;transform:rotate(calc(var(--a) * 1deg)) translateY(var(--lift,0));transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.k-card:hover,.k-card:focus-visible{--lift:-26px;z-index:5}
.k-card.played{--lift:-70px;z-index:6;box-shadow:0 0 0 3px var(--k-accent,#111),0 30px 60px -24px rgb(0 0 0/.6)}
.k-card .pip{display:flex;justify-content:space-between;font:800 13px/1 var(--k-mono,ui-monospace,monospace)}
.k-card h4{margin:auto 0 6px;font-size:19px;line-height:1.1}
.k-card p{margin:0;font-size:12.5px;line-height:1.4;opacity:.72}
.k-card .art{display:grid;place-items:center;height:42%;margin:10px 0;border-radius:10px;background:var(--k-card-art,color-mix(in srgb,var(--k-accent,#111) 14%,#fff));font-size:44px}
.k-card{display:flex;flex-direction:column}

/* ---------------------------------------------------------------- Kitchen: magnetic drop zone */
.k-drop{position:relative;display:grid;place-items:center;gap:6px;min-height:170px;padding:22px;border:2px dashed color-mix(in srgb,var(--k-ink,#111) 28%,transparent);border-radius:20px;text-align:center;cursor:pointer;
  transform:translate(var(--dx,0),var(--dy,0)) scale(var(--ds,1));transition:transform .35s cubic-bezier(.22,1.6,.36,1),border-color .2s,background .2s}
.k-drop.near{--ds:1.03;border-color:var(--k-accent,#111);background:color-mix(in srgb,var(--k-accent,#111) 8%,transparent)}
.k-drop input{position:absolute;width:1px;height:1px;opacity:0}
.k-drop img{width:110px;height:110px;object-fit:cover;border-radius:12px;box-shadow:0 12px 24px -12px rgb(0 0 0/.5);animation:k-land .5s cubic-bezier(.22,1.6,.36,1)}
@keyframes k-land{from{transform:translateY(-30px) scale(.6) rotate(-8deg);opacity:0}}

/* ---------------------------------------------------------------- Kitchen: cassette */
.k-cassette{display:grid;gap:12px;width:min(380px,100%);padding:16px;border-radius:18px;background:linear-gradient(#2d2c30,#1a191c);color:#f2efe8;box-shadow:0 22px 50px -24px rgb(0 0 0/.7),inset 0 1px 0 rgb(255 255 255/.08)}
.k-tape{position:relative;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-radius:10px;background:var(--k-tape,#e9e2d0);color:#2a2a2a}
.k-tape::before{content:attr(data-label);position:absolute;left:50%;top:6px;transform:translateX(-50%);font:700 10px/1 var(--k-mono,ui-monospace,monospace);letter-spacing:.14em}
.k-reel{width:52px;height:52px;border-radius:50%;background:repeating-conic-gradient(#2a2a2a 0 18deg,#4a4a4a 18deg 36deg);box-shadow:0 0 0 7px #f7f3e8,0 0 0 9px #2a2a2a}
.k-cassette.playing .k-reel{animation:k-spin 1.4s linear infinite}
.k-cassette-ctl{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--k-mono,ui-monospace,monospace)}
.k-cassette-ctl button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:#3a393d;color:#fff;box-shadow:0 3px 0 #111}
.k-cassette-ctl button:active{transform:translateY(2px);box-shadow:0 1px 0 #111}
.k-cassette-ctl span{margin-left:auto;opacity:.75}
.k-tracks{display:flex;flex-wrap:wrap;gap:6px}
.k-tracks button{padding:7px 10px;border:1px solid rgb(255 255 255/.18);border-radius:99px;background:transparent;color:#f2efe8;font-size:12px}
.k-tracks button[aria-pressed="true"]{background:#f2efe8;color:#1a191c}
@keyframes k-spin{to{transform:rotate(1turn)}}

/* ---------------------------------------------------------------- Kitchen: signature + logo trace loader */
.k-sign path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-loader{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:var(--k-paper,#fff);transition:opacity .45s,visibility .45s}
.k-loader.done{opacity:0;visibility:hidden}
.k-loader svg{width:min(140px,30vw);height:auto;overflow:visible}
.k-loader path{fill:transparent;stroke:var(--k-ink,#111);stroke-width:2;transition:fill .35s}
.k-loader.filled path{fill:var(--k-ink,#111)}
.in-frame .k-loader{display:none}

/* ---------------------------------------------------------------- Kitchen: iridescent foil */
.k-foil{--mx:50%;--my:50%;--sy:0;position:relative;display:inline-grid;place-items:center;overflow:hidden;isolation:isolate;padding:14px 18px;border-radius:14px;color:#1b1b1b;font-weight:800;text-align:center;
  background:linear-gradient(115deg,#d8d8de,#f4f4f6 40%,#cfd0d6 60%,#eeeef1);box-shadow:inset 0 0 0 1px rgb(255 255 255/.7),0 10px 22px -12px rgb(0 0 0/.4)}
.k-foil::before{content:"";position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from calc(var(--sy) * 1deg) at var(--mx) var(--my),#ff9aa2,#ffd79a,#c3ff9a,#9affe6,#9ab8ff,#e09aff,#ff9aa2);opacity:.85;mix-blend-mode:color-burn;filter:blur(6px)}
.k-foil::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,rgb(255 255 255/0) 0 6px,rgb(255 255 255/.35) 7px 8px);mix-blend-mode:overlay}

/* ---------------------------------------------------------------- Libraries.dev: border beam, metal, gooey, mosaic */
@property --k-beam{syntax:"<angle>";inherits:false;initial-value:0deg}
.k-beam{position:relative;isolation:isolate}
.k-beam::after{content:"";position:absolute;inset:-1px;z-index:2;padding:1.5px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--k-beam),transparent 0 72%,var(--k-beam-c,var(--k-accent,#fff)) 84%,#fff 88%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:k-beam 4.2s linear infinite}
@keyframes k-beam{to{--k-beam:360deg}}
.k-metal{--lx:50%;--ly:30%;background:radial-gradient(circle at var(--lx) var(--ly),rgb(255 255 255/.85),rgb(255 255 255/0) 38%),repeating-linear-gradient(90deg,rgb(255 255 255/.05) 0 1px,rgb(0 0 0/.05) 2px 3px),linear-gradient(160deg,#f2f2f3,#9fa1a6 38%,#e8e9eb 55%,#7d8086 80%,#cfd0d3);color:#17181a;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(0 0 0/.25),0 10px 24px -14px rgb(0 0 0/.6)}
.k-goo{filter:url(#k-goo)}
.k-mosaic{position:relative;overflow:hidden}
.k-mosaic canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;transition:opacity .6s}
.k-mosaic.done canvas{opacity:0}

/* ---------------------------------------------------------------- before/after */
.k-ba{position:relative;overflow:hidden;border-radius:var(--k-radius,16px);user-select:none}
.k-ba img{width:100%;height:100%;object-fit:cover}
.k-ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--cut,50%))}
.k-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.k-ba .bar{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgb(0 0 0/.4);pointer-events:none}
.k-ba .bar::after{content:"\2194";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#111;transform:translate(-50%,-50%);font-size:18px}

/* ---------------------------------------------------------------- demo footer note */
.k-fiction{padding:18px 5vw 90px;font-size:13px;line-height:1.5;opacity:.75;text-align:center}
.k-fiction a{font-weight:700}

@media (max-width:760px){
  .mac{gap:10px;padding:0 10px}
  .mac-title small,.mac-cta{display:none}
  .k-ticket{grid-template-columns:1fr}
  .k-ticket>div+div{width:auto;border-left:0;border-top:2px dashed rgb(0 0 0/.2)}
  .k-ticket .code{writing-mode:horizontal-tb;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .k-js [data-reveal]{opacity:1;transform:none;transition:none}
  .k-beam::after,.k-cassette.playing .k-reel{animation:none}
  .k-paper{transition:none}
  .mac-page,.mac-dock{transition:none}
  .k-vc{display:none}
}