/* Dept5 production pass. Reference: jhey's knockout video card, 10/09/2026. */
.skip:not(:focus){clip-path:inset(50%)}
.ko-section{padding:68px 0 76px;border-top:1px solid var(--rule)}
.ko-heading{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:30px}
.ko-heading .mono{color:var(--muted);margin-bottom:8px}
.ko-heading h2{font-size:clamp(40px,4.8vw,68px)}
.ko-heading>p{font-size:16px;color:var(--muted);max-width:430px;justify-self:end}
.ko-lab{position:relative;isolation:isolate;background:#2d2e30;border:1px solid rgba(255,255,255,.1);overflow:hidden;min-height:640px;color:#fff;--ko-rx:0deg;--ko-ry:0deg;--ko-rz:-5deg}
.ko-lab::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(#000,transparent 80%);pointer-events:none}
.ko-lab-header{position:absolute;left:28px;right:28px;top:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:5}
.ko-lab-header .mono{font-size:10px;color:#d5d5d5;letter-spacing:.12em}
.ko-indicator{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ko-indicator::before{content:"";width:6px;height:6px;border-radius:50%;background:#dbb876}
.ko-stage{position:relative;perspective:1500px;min-height:640px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:68px 24px 96px}
.ko-pass{position:relative;width:320px;height:500px;transform:rotateX(var(--ko-rx)) rotateY(var(--ko-ry)) rotateZ(var(--ko-rz));transform-style:preserve-3d;transition:transform 240ms cubic-bezier(.22,.7,.2,1);outline:none;cursor:pointer;--ko-cut:0px}
.ko-pass:focus-visible{outline:2px solid #ece4d2;outline-offset:15px;border-radius:16px}
.ko-pass::before{content:"";position:absolute;inset:24px 10px -12px;background:rgba(0,0,0,.44);filter:blur(18px);transform:translateZ(-15px);pointer-events:none}
.ko-layer{position:absolute;inset:0;border-radius:16px;transform-style:preserve-3d;transition:transform 620ms cubic-bezier(.22,.7,.2,1)}
.ko-video-layer{overflow:hidden;background:#080808;box-shadow:0 1px 0 rgba(255,255,255,.16) inset}
.ko-video-layer video,.ko-card-face video{border:0;position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:16px;filter:saturate(1.2) brightness(1.2);background:#080808;pointer-events:none}
.ko-card-face{position:absolute;inset:0;isolation:isolate;overflow:hidden;border-radius:16px;clip-path:polygon(0 var(--ko-cut),var(--ko-cut) 0,100% 0,100% 100%,0 100%);transition:clip-path 600ms cubic-bezier(.22,.7,.2,1);background:#000}
.ko-card-face video{z-index:0}
.ko-print{position:absolute;inset:0;background:#000;color:#fff;mix-blend-mode:multiply;display:block}
.ko-word{position:absolute;left:25px;right:25px;top:77px;font-family:var(--sans);font-weight:700;font-size:98px;line-height:1;letter-spacing:-.065em}
.ko-detail{position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;clip-path:polygon(0 var(--ko-cut),var(--ko-cut) 0,100% 0,100% 100%,0 100%);transition:clip-path 600ms cubic-bezier(.22,.7,.2,1)}
.ko-wireframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.67}
.ko-topline{position:absolute;top:48px;left:24px;right:24px;display:flex;justify-content:space-between;font:8px/1.4 var(--mono);letter-spacing:.095em;text-transform:uppercase}
.ko-id{position:absolute;left:24px;right:24px;top:236px}
.ko-name{font:700 24px/1.1 var(--sans);letter-spacing:-.035em}
.ko-role{display:flex;gap:7px;align-items:center;margin-top:9px;font:10px/1.2 var(--sans);color:#bcbcbc}
.ko-role b{background:white;color:black;font:700 7px/1.15 var(--sans);letter-spacing:.045em;padding:3px 6px;border-radius:12px}
.ko-seal{position:absolute;right:26px;top:237px;display:grid;place-items:center;width:45px;height:45px;border:1px solid #98917c;border-radius:50%;color:#c2b998;font:400 11px var(--mono);letter-spacing:-.05em;background:rgba(194,185,152,.06);box-shadow:0 0 0 4px rgba(194,185,152,.08),0 0 0 8px rgba(194,185,152,.025)}
.ko-specs{position:absolute;left:24px;right:24px;top:328px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.ko-specs dt{font:7px/1.6 var(--mono);letter-spacing:.12em;color:#8f8f8f;text-transform:uppercase}
.ko-specs dd{margin:2px 0 0;font:500 11px/1.3 var(--sans)}
.ko-barcode{position:absolute;left:16px;right:16px;top:401px;width:calc(100% - 32px);height:35px;object-fit:fill}
.ko-footline{position:absolute;left:24px;right:24px;top:448px;display:flex;justify-content:space-between;font:8px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.075em}
.ko-notch{position:absolute;width:16px;height:16px;border-radius:50%;background:#2d2e30;top:378px;z-index:5;pointer-events:none}
.ko-notch-left{left:-8px}.ko-notch-right{right:-8px}
.ko-slot{position:absolute;top:19px;left:50%;transform:translateX(-50%);width:66px;height:12px;border-radius:9px;background:#2d2e30;z-index:5;box-shadow:0 1px 0 rgba(255,255,255,.07) inset;pointer-events:none}
.ko-fold{position:absolute;left:0;top:0;width:82px;height:82px;clip-path:polygon(0 0,100% 0,0 100%);background:linear-gradient(135deg,#a6a6a6 0,#45464a 35%,#1b1c1e 68%);border-radius:16px 0 0 0;transform-origin:41px 41px;transform:translate(-5px,-5px) rotate(180deg);opacity:0;z-index:6;pointer-events:none;transition:opacity 300ms,transform 600ms cubic-bezier(.22,.7,.2,1),width 600ms,height 600ms}
.ko-lab[data-peeled="true"] .ko-pass{--ko-cut:172px}
.ko-lab[data-peeled="true"] .ko-fold{width:172px;height:172px;opacity:1;transform:translate(0,0) rotate(180deg);transform-origin:86px 86px}
.ko-hint{position:absolute;bottom:25px;left:20px;right:20px;text-align:center;color:#a5a5a5;font:10px/1.6 var(--mono);letter-spacing:.075em}
.ko-layer-label{position:absolute;left:calc(100% + 24px);top:50%;width:120px;opacity:0;color:#c9c9c9;font:10px/1.5 var(--mono);letter-spacing:.08em;transition:opacity 250ms;pointer-events:none;white-space:nowrap}
.ko-lab[data-exploded="true"] .ko-pass{transform:rotateX(48deg) rotateY(-16deg) rotateZ(-20deg);scale:.86}
.ko-lab[data-exploded="true"] .ko-video-layer{transform:translateZ(-75px) translateY(75px)}
.ko-lab[data-exploded="true"] .ko-face-layer{transform:translateZ(35px) translateY(-20px)}
.ko-lab[data-exploded="true"] .ko-detail-layer{transform:translateZ(160px) translateY(-100px)}
.ko-lab[data-exploded="true"] .ko-card-face{background:#000;clip-path:none}
.ko-lab[data-exploded="true"] .ko-card-face video{visibility:hidden}
.ko-lab[data-exploded="true"] .ko-detail{background:rgba(5,5,5,.56);border-color:rgba(255,255,255,.14);clip-path:none}
.ko-lab[data-exploded="true"] .ko-print{mix-blend-mode:normal}
.ko-lab[data-exploded="true"] .ko-fold{opacity:0}
.ko-lab[data-exploded="true"] .ko-layer-label{opacity:1;transition-delay:300ms}
.ko-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0 0;flex-wrap:wrap}
.ko-film-select{display:flex;align-items:center;gap:12px;font:11px var(--mono);color:var(--muted)}
.ko-film-select select{color:var(--paper);background:#151516;border:1px solid var(--rule);padding:11px 36px 11px 12px;border-radius:0;max-width:230px;min-width:0;font:13px var(--sans);cursor:pointer;color-scheme:dark}
.ko-actions{display:flex;gap:8px;flex-wrap:wrap}
.ko-actions button{border:1px solid var(--rule);background:transparent;color:var(--paper);font:12px var(--sans);padding:11px 16px;min-height:44px;cursor:pointer;transition:background 180ms,color 180ms,border-color 180ms}
.ko-actions button:hover{border-color:var(--paper);background:rgba(236,228,210,.08)}
.ko-actions button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.ko-actions button:focus-visible,.ko-film-select select:focus-visible{outline:2px solid #ce6d55;outline-offset:4px}
.ko-caption{display:flex;justify-content:space-between;gap:24px;margin-top:22px;font-size:13px;color:var(--muted)}
.ko-caption a{text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.ko-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){.ko-heading{grid-template-columns:1fr 1fr}.ko-pass{width:300px;height:469px;scale:.94}.ko-stage,.ko-lab{min-height:610px}.ko-word{font-size:92px;top:73px}.ko-topline{top:44px}.ko-id{top:221px}.ko-seal{top:222px}.ko-specs{top:306px}.ko-notch{top:354px}.ko-barcode{top:376px}.ko-footline{top:422px}.ko-layer-label{display:none}}
@media(max-width:620px){.ko-section{padding:42px 0}.ko-heading{grid-template-columns:1fr;gap:18px;margin-bottom:24px}.ko-heading h2{font-size:43px}.ko-heading>p{justify-self:start;font-size:15px;max-width:350px}.ko-lab-header{left:18px;right:18px;top:18px}.ko-lab-header .mono{font-size:8px}.ko-stage,.ko-lab{min-height:570px}.ko-stage{padding:62px 16px 62px}.ko-pass{width:300px;height:469px;scale:.89;--ko-rz:-4deg}.ko-hint{font-size:8px;bottom:18px}.ko-toolbar{gap:16px;padding-top:18px}.ko-film-select{width:100%;justify-content:space-between}.ko-film-select select{flex:1;max-width:230px}.ko-actions{width:100%;gap:7px}.ko-actions button{flex:1;padding:11px 8px;white-space:nowrap}.ko-caption{flex-direction:column;gap:12px;font-size:12px}.ko-caption a{align-self:start}.ko-lab[data-exploded="true"] .ko-pass{transform:rotateX(44deg) rotateY(-10deg) rotateZ(-16deg);scale:.64}.ko-lab[data-exploded="true"] .ko-video-layer{transform:translateZ(-70px) translateY(85px)}.ko-lab[data-exploded="true"] .ko-detail-layer{transform:translateZ(130px) translateY(-85px)}}
@media(max-width:360px){.ko-pass{scale:.8}.ko-actions button{font-size:11px}.ko-stage,.ko-lab{min-height:530px}.ko-lab[data-exploded="true"] .ko-pass{scale:.54}}
@media(prefers-reduced-motion:reduce){.ko-pass,.ko-layer,.ko-card-face,.ko-detail,.ko-fold,.ko-layer-label,.ko-actions button{transition:none}.ko-pass{transform:rotateZ(-4deg)}.ko-lab[data-exploded="true"] .ko-pass{transform:rotateX(40deg) rotateZ(-12deg)}}

/* The corner is reflected across its crease by one JS progress signal. */
.ko-pass{width:320px;height:500px;--ko-rz:-5deg;cursor:default}
.ko-pass,.ko-pass *{user-select:none;-webkit-user-select:none}
.ko-word{top:77px;font-size:98px}
.ko-topline{top:48px}.ko-id{top:236px}.ko-seal{top:237px}.ko-specs{top:328px}.ko-barcode{top:401px}.ko-footline{top:448px}
.ko-base-surface,.ko-card-face,.ko-detail{mask:url('pass-shape.svg') 0 0/100% 100% no-repeat;-webkit-mask:url('pass-shape.svg') 0 0/100% 100% no-repeat}
.ko-base-surface{position:absolute;inset:0;overflow:hidden;border-radius:16px;background:#30333b}
.ko-metal{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;display:block;background:#b9bdc7}
.ko-card-face,.ko-detail{transition:none}
.ko-video-layer{overflow:visible;background:none}
.ko-print{z-index:1}
.ko-fold,.ko-lab[data-peeled="true"] .ko-fold{position:absolute;inset:0;width:320px;height:500px;border-radius:0;clip-path:none;background:none;transform:none;transform-origin:center;opacity:1;z-index:6;overflow:visible;transition:none;pointer-events:none}
.ko-fold-shadow{fill:rgba(0,0,0,.46);filter:blur(5px);transform:translate(-2px,5px)}
.ko-fold-back{filter:drop-shadow(-1px 2px 1px rgba(0,0,0,.35))}
.ko-peel-handle{position:absolute;top:-5px;right:-5px;width:72px;height:72px;z-index:7;background:transparent;border:0;padding:0;cursor:grab;touch-action:none;border-radius:16px;outline:none;transition:none}
.ko-peel-handle:active{cursor:grabbing}.ko-peel-handle:focus-visible{outline:2px solid #ece4d2;outline-offset:4px}
.ko-corner-cue{position:absolute;top:15px;right:15px;color:#ff8a65;font:18px var(--sans);opacity:0;transition:opacity 180ms;filter:drop-shadow(0 1px 2px #000)}
.ko-peel-handle:hover .ko-corner-cue,.ko-peel-handle:focus-visible .ko-corner-cue{opacity:1}
.ko-lab[data-dragging="true"] .ko-pass{transition:none}
.ko-lab[data-exploded="true"] .ko-fold,.ko-lab[data-exploded="true"] .ko-peel-handle{opacity:0;visibility:hidden}
.ko-lab[data-exploded="true"] .ko-card-face .ko-metal{visibility:hidden}
.ko-lab[data-exploded="true"] .ko-card-face,.ko-lab[data-exploded="true"] .ko-detail{clip-path:none!important}
.ko-lab[data-exploded="true"] .ko-pass{transform:rotateX(calc(48deg + var(--ko-rx))) rotateY(calc(-16deg + var(--ko-ry))) rotateZ(-20deg)}
.ko-peel-control{display:flex;align-items:center;gap:16px;font:11px var(--mono);min-height:44px}
.ko-peel-control input{width:160px;accent-color:#d6c29b;height:24px;cursor:ew-resize}
.ko-peel-control input:focus-visible{outline:2px solid #ce6d55;outline-offset:5px}
@media(max-width:900px){.ko-pass{scale:.94}}
@media(max-width:620px){.ko-pass{scale:.83;--ko-rz:-4deg}.ko-stage,.ko-lab{min-height:570px}.ko-peel-control{justify-content:space-between;width:100%}.ko-peel-control input{width:180px}.ko-corner-cue{opacity:1}}
@media(max-width:620px){.ko-lab[data-exploded="true"] .ko-pass{scale:.58;transform:rotateX(calc(44deg + var(--ko-rx))) rotateY(calc(-10deg + var(--ko-ry))) rotateZ(-16deg)}}
@media(max-width:360px){.ko-pass{scale:.71}.ko-stage,.ko-lab{min-height:530px}.ko-peel-control input{width:145px}.ko-lab[data-exploded="true"] .ko-pass{scale:.44}}
@media(prefers-reduced-motion:reduce){.ko-corner-cue{transition:none}.ko-lab[data-exploded="true"] .ko-pass{transform:rotateX(40deg) rotateZ(-12deg)}}

/* One light field ties the foil, lamination, printed grid and seal together. */
.ko-lab{--ko-light-x:50%;--ko-light-y:50%;--ko-light-angle:135deg;--ko-sheen-x:50%;--ko-sheen-y:50%;--holo-a:#8befff;--holo-b:#bea2ff;--holo-c:#f7c994;background:radial-gradient(ellipse at 50% 42%,#252632 0,#15171e 45%,#0d0f15 100%);border-color:rgba(186,197,223,.18)}
.ko-lab[data-finish="titanium"]{--holo-a:#a9ebe0;--holo-b:#eeb3c9;--holo-c:#ffe1a0}
.ko-lab[data-finish="prism"]{--holo-a:#80bcff;--holo-b:#b58cff;--holo-c:#ffa5d5}
.ko-lab::before{background-image:linear-gradient(rgba(207,218,249,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(207,218,249,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000,transparent 76%)}
.ko-stage::before{content:"";position:absolute;left:50%;top:49%;width:660px;height:610px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at 28% 34%,var(--holo-b),transparent 56%),radial-gradient(ellipse at 74% 68%,var(--holo-a),transparent 52%);filter:blur(58px);opacity:.12;pointer-events:none}
.ko-pass::before{background:rgba(0,0,0,.78);filter:blur(22px);transform:translate3d(var(--ko-shadow-x,0px),16px,-24px)}
.ko-card-face{background:#050609}
.ko-card-face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,transparent 25%,rgba(181,235,255,.04) 37%,rgba(255,251,224,.2) 42%,rgba(225,218,255,.06) 45%,transparent 55%);background-size:220% 200%;background-position:var(--ko-sheen-x) var(--ko-sheen-y);mix-blend-mode:screen;opacity:.85}
.ko-card-face>.ko-metal:not(.ko-foil){filter:brightness(1.6) saturate(1.1)}
.ko-foil{z-index:2;mix-blend-mode:screen;opacity:.12}
.ko-wireframe{opacity:.2}
.ko-holo-map{position:absolute;inset:0;background:conic-gradient(from var(--ko-light-angle) at var(--ko-light-x) var(--ko-light-y),#65568a 0deg,var(--holo-a) 70deg,#788aaf 105deg,var(--holo-b) 165deg,var(--holo-c) 235deg,#b5cdf5 290deg,#65568a 360deg);mask:url('globe-print.png') center/cover no-repeat;-webkit-mask:url('globe-print.png') center/cover no-repeat;opacity:.5;mix-blend-mode:screen}
.ko-rim{position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(125deg,rgba(227,244,255,.68),rgba(187,152,255,.09) 30%,rgba(112,224,255,.34) 54%,rgba(246,199,147,.05) 72%,rgba(228,211,255,.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:.8;pointer-events:none}
.ko-detail{border:0;box-shadow:inset 0 0 28px rgba(116,132,180,.045)}
.ko-seal{width:54px;height:54px;right:24px;top:232px;overflow:hidden;isolation:isolate;background:#b4c2e3;border:1px solid rgba(227,244,255,.68);box-shadow:0 0 0 3px rgba(194,199,240,.075),0 1px 8px rgba(0,0,0,.45),inset 0 0 0 4px rgba(255,255,255,.15)}
.ko-seal::before{content:"";position:absolute;inset:-10%;background:conic-gradient(from var(--ko-light-angle),#fff2c3,#a2f0f5,#7176be,#e7caff,#ffdb97,#89d1ff,#dcc0ee,#fff2c3);transform:rotate(calc(var(--ko-ry) * -2));z-index:0}
.ko-seal::after{content:"";position:absolute;inset:3px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 1px,rgba(255,255,255,.45) 1px 1.7px,rgba(24,28,57,.24) 1.7px 2.4px,transparent 2.4px 3.2px);mix-blend-mode:overlay;z-index:1}
.ko-seal b{position:relative;z-index:2;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(23,26,53,.76);color:#e4f6ff;font:700 13px var(--mono);letter-spacing:-.08em;box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 1px rgba(255,255,255,.35)}
.ko-name{text-shadow:0 1px 6px rgba(0,0,0,.9)}
.ko-role,.ko-specs dd{color:#e4e4ed;text-shadow:0 1px 3px #090b11}
.ko-specs dt{color:#a1a6b5}.ko-barcode{opacity:.78}
.ko-fold-holo{mix-blend-mode:color;opacity:.35}
.ko-fold-shadow{fill:rgba(0,0,0,.58);filter:blur(5px)}
.ko-fold-back{filter:drop-shadow(-1px 3px 2px rgba(0,0,0,.55))}
.ko-lab[data-exploded="true"] .ko-card-face .ko-foil{visibility:visible;opacity:.16}
.ko-lab[data-exploded="true"] .ko-detail{background:rgba(13,17,29,.48);box-shadow:inset 0 0 24px rgba(166,181,243,.04),0 5px 22px rgba(0,0,0,.18)}
.ko-lab[data-exploded="true"] .ko-holo-map{opacity:.7}
.ko-layer-label{color:#d0d2e2}.ko-layer-label::before{content:"";display:inline-block;width:15px;height:1px;background:var(--holo-a);vertical-align:middle;margin-right:8px;opacity:.8}
.ko-lab-header .mono{color:#b8bfce}.ko-indicator::before{background:#b8edf2;box-shadow:0 0 10px rgba(166,236,255,.3)}
.ko-hint{color:#9099af}
@media(max-width:620px){.ko-stage::before{width:450px;height:540px;opacity:.1}.ko-seal{width:54px;height:54px;right:24px;top:232px}}

/* R6: independent studio reflections on opaque printed stock.
   All light positions are supplied by the smoothed pointer/tilt state. */
.ko-lab{
  --ko-key-x:35%;--ko-key-y:28%;--ko-fill-x:80%;--ko-fill-y:75%;
  --ko-graze-angle:112deg;--ko-graze-position:50%;--ko-rim-angle:135deg;
  --ko-glare-opacity:.18;--ko-seal-angle:135deg;
}

/* The opaque multiply mask continues to expose the animated foil only in type. */
.ko-card-face{background:#020305}
.ko-print{background:#000}
.ko-card-face .ko-foil{display:none!important}
.ko-card-face::before,.ko-card-face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-size:100% 100%;background-position:0 0;
  mix-blend-mode:screen;animation:none;transition:none;
}
/* A broad neutral key and a separate, dimmer cool fill describe flat varnish. */
.ko-card-face::before{
  z-index:2;
  background:
    radial-gradient(ellipse 72% 46% at var(--ko-key-x) var(--ko-key-y),
      rgba(237,243,255,.84) 0%,rgba(202,221,246,.39) 19%,rgba(128,155,191,.09) 49%,transparent 73%),
    radial-gradient(ellipse 56% 60% at var(--ko-fill-x) var(--ko-fill-y),
      rgba(99,169,196,.34) 0%,rgba(77,110,158,.12) 35%,transparent 70%);
  opacity:var(--ko-glare-opacity);
}
/* One grazing strip. Color lives at its edges instead of repeating over the face. */
.ko-card-face::after{
  z-index:3;
  background:linear-gradient(var(--ko-graze-angle),
    transparent calc(var(--ko-graze-position) - 19%),
    rgba(92,130,196,.018) calc(var(--ko-graze-position) - 10%),
    rgba(177,217,235,.055) calc(var(--ko-graze-position) - 4%),
    rgba(211,238,247,.15) calc(var(--ko-graze-position) - 1.3%),
    rgba(249,250,239,.33) var(--ko-graze-position),
    rgba(228,178,253,.11) calc(var(--ko-graze-position) + .6%),
    rgba(101,221,238,.075) calc(var(--ko-graze-position) + 1.4%),
    rgba(147,170,211,.026) calc(var(--ko-graze-position) + 6%),
    transparent calc(var(--ko-graze-position) + 15%));
  opacity:calc(.3 + var(--ko-glare-opacity));
}

/* Printed white ink remains quiet; metallic globe ink catches two smaller lights. */
.ko-wireframe{opacity:.14}
.ko-holo-map{
  background:
    radial-gradient(ellipse 29% 22% at var(--ko-key-x) var(--ko-key-y),
      #f8ffff 0%,#c3f5fa 13%,rgba(172,217,242,.38) 40%,transparent 75%),
    radial-gradient(ellipse 36% 29% at var(--ko-fill-x) var(--ko-fill-y),
      rgba(214,168,255,.72),rgba(115,170,212,.1) 50%,transparent 77%),
    conic-gradient(from var(--ko-light-angle) at var(--ko-light-x) var(--ko-light-y),
      #27343c 0deg,#6e9ea6 66deg,#404e62 110deg,#8f78a8 168deg,
      #978064 231deg,#52768e 293deg,#27343c 360deg);
  opacity:.58;mix-blend-mode:screen;
}

/* The perimeter has its own grazing angle and two narrow opposing highlights. */
.ko-rim{
  background:conic-gradient(from var(--ko-rim-angle) at 50% 50%,
    rgba(160,191,217,.06) 0deg,
    rgba(126,180,230,.18) 36deg,
    rgba(186,242,255,.72) 61deg,
    rgba(250,253,255,.96) 69deg,
    rgba(189,157,248,.48) 82deg,
    rgba(115,118,167,.05) 111deg,
    rgba(91,112,133,.05) 196deg,
    rgba(230,182,139,.62) 239deg,
    rgba(251,233,199,.84) 251deg,
    rgba(158,190,211,.22) 272deg,
    rgba(115,132,161,.06) 316deg,
    rgba(160,191,217,.06) 360deg);
  opacity:.94;
}

/* The seal is a second material: diffractive metal with a recessed dark stamp. */
.ko-seal{
  background:#676e8f;border-color:rgba(225,244,255,.75);
  box-shadow:0 0 0 2px rgba(176,184,222,.08),0 2px 7px rgba(0,0,0,.6),
    inset 0 0 0 3px rgba(237,250,255,.13);
}
.ko-seal::before{
  background:conic-gradient(from var(--ko-seal-angle),
    #273148 0deg,#68789d 23deg,#b6f7f4 48deg,#faffee 66deg,
    #dec480 85deg,#987da5 116deg,#343753 149deg,#7484c4 181deg,
    #bdc2ff 207deg,#f2d1df 226deg,#ffffe0 238deg,#8acedd 261deg,
    #4e6b97 289deg,#8e799d 328deg,#273148 360deg);
  transform:none;animation:none;transition:none;
}
.ko-seal::after{
  background:
    linear-gradient(var(--ko-seal-angle),transparent 32%,rgba(240,255,255,.05) 43%,
      rgba(255,255,243,.68) 48%,rgba(218,245,255,.09) 53%,transparent 65%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 1px,
      rgba(250,255,255,.55) 1px 1.55px,rgba(15,22,46,.4) 1.55px 2.2px,transparent 2.2px 3.1px);
  mix-blend-mode:soft-light;opacity:.94;
}
.ko-seal b{
  background:radial-gradient(ellipse at var(--ko-fill-x) var(--ko-fill-y),#344159,#111622 75%);
  border-color:rgba(223,241,255,.62);color:#e4f6ff;
  text-shadow:0 1px 1px #020509;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.72),0 1px rgba(235,249,255,.48);
}

/* White print receives only a restrained cool/neutral shift, preserving legibility. */
.ko-name{
  color:#f1f3f7;
  text-shadow:0 1px 5px rgba(0,0,0,.9),0 0 12px rgba(174,217,245,.035);
}
.ko-topline,.ko-footline{color:#dde3ed}
.ko-role,.ko-specs dd{color:#e4e8ef}
.ko-specs dt{color:#99a2b2}

/* Print film stays translucent when separated; the middle mask stays opaque. */
.ko-lab[data-exploded="true"] .ko-card-face{background:#020305}
.ko-lab[data-exploded="true"] .ko-print{background:#020305}
.ko-lab[data-exploded="true"] .ko-detail{
  background:rgba(8,12,19,.56);
  box-shadow:inset 0 0 28px rgba(170,196,224,.025),0 5px 22px rgba(0,0,0,.25);
}
.ko-lab[data-exploded="true"] .ko-holo-map{opacity:.69}
.ko-detail{background:transparent}

/* Leave room for the expanded mouse-tilt range at every layer depth. */
.ko-lab[data-exploded="true"] .ko-pass{scale:.74}
@media(max-width:620px){.ko-lab[data-exploded="true"] .ko-pass{scale:.54}}
@media(max-width:360px){.ko-lab[data-exploded="true"] .ko-pass{scale:.42}}

@media(prefers-reduced-motion:reduce){
  .ko-card-face::before,.ko-card-face::after,.ko-holo-map,.ko-rim,
  .ko-seal::before,.ko-seal::after{animation:none;transition:none}
}

/* Rich black stock: only a very faint, broad reflection entering from an edge. */
.ko-card-face::before{content:none;background:none;opacity:0}
.ko-card-face::after{
  background:linear-gradient(var(--ko-graze-angle,112deg),
    rgba(193,207,221,.075) 0%,
    rgba(142,158,179,.033) 24%,
    rgba(115,134,153,.008) 47%,
    transparent 67%);
  background-size:100% 100%;background-position:0 0;
  opacity:.35;mix-blend-mode:screen;
  animation:none;transition:none;
}

/* Reflective inks: light is clipped to each printed shape, never the black stock. */
.ko-lab{
  --ko-ink-position:50%;--ko-micro-position:54%;--ko-barcode-position:46%;
  --ko-ink-angle:112deg;
  --ko-print-spectrum:linear-gradient(var(--ko-ink-angle),
    #b7c9da 0%,#d3b1ed 15%,#95dce9 28%,#e2eedb 39%,
    #fff9df 45%,#ffffff 48%,#99c6dc 52%,#be9fe2 62%,
    #f1d5a6 78%,#c3e5e7 90%,#dbe3f0 100%);
}
.ko-lab[data-finish="titanium"]{
  --ko-print-spectrum:linear-gradient(var(--ko-ink-angle),#c9beb7,#e9cbb0 24%,#b5dfdb 38%,#fff7dc 46%,#fff 49%,#d5b1c5 56%,#e9c692 76%,#e1ded1);
}
.ko-lab[data-finish="prism"]{
  --ko-print-spectrum:linear-gradient(var(--ko-ink-angle),#bcc3ec,#bf9ee7 22%,#8ed9ee 37%,#efffff 46%,#fff 49%,#a29ae1 54%,#ebadd2 72%,#bedcf2);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .ko-name,.ko-role>span,.ko-topline>span,.ko-footline>span,.ko-specs dt,.ko-specs dd{
    background-image:var(--ko-print-spectrum);
    background-size:240% 100%;background-position:var(--ko-ink-position) 50%;
    background-repeat:no-repeat;background-clip:text;-webkit-background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  }
  .ko-role>span,.ko-topline>span,.ko-footline>span,.ko-specs dt,.ko-specs dd{
    background-image:linear-gradient(var(--ko-ink-angle),#d3deec,#d5baee 22%,#b2eff3 38%,#fff4db 46%,#fff 49%,#c9d8ef 56%,#edd6ad 76%,#dce9f4);
    background-position:var(--ko-micro-position) 50%;
  }
  .ko-topline>span:last-child,.ko-specs>div:nth-child(2) dd{
    background-position:calc(100% - var(--ko-micro-position)) 50%;
  }
  .ko-footline>span:last-child,.ko-specs>div:last-child dd{
    background-position:var(--ko-barcode-position) 50%;
  }
  .ko-specs dt{opacity:.9}
}
.ko-role b{
  background-image:var(--ko-print-spectrum);background-size:240% 100%;
  background-position:var(--ko-barcode-position) 50%;
  color:#10131a;border:1px solid rgba(235,249,255,.35);padding:2px 5px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
}
.ko-barcode{opacity:.22}
.ko-barcode-foil{
  position:absolute;left:16px;top:401px;width:calc(100% - 32px);height:35px;
  background-image:var(--ko-print-spectrum);background-size:220% 100%;
  background-position:var(--ko-barcode-position) 50%;
  mask:url('production-barcode.png') center/100% 100% no-repeat;
  -webkit-mask:url('production-barcode.png') center/100% 100% no-repeat;
  opacity:.95;pointer-events:none;
}
.ko-wireframe{opacity:.12}
.ko-holo-map{
  background-image:linear-gradient(var(--ko-ink-angle),
    #51667f 0%,#9d74cc 19%,#6bdbea 34%,#d4f4ef 43%,#fff8d9 47%,
    #829ab5 51%,#b386d8 61%,#dbb877 75%,#73b1c7 88%,#586881 100%);
  background-size:220% 100%;background-position:var(--ko-micro-position) 50%;
  opacity:.8;mix-blend-mode:screen;
}
.ko-lab[data-exploded="true"] .ko-holo-map{opacity:.9}
@media(forced-colors:active){
  .ko-name,.ko-role>span,.ko-topline>span,.ko-footline>span,.ko-specs dt,.ko-specs dd{
    color:CanvasText;-webkit-text-fill-color:CanvasText;background:none;
  }
}

/* The logo has its own optical coating, above the opaque knockout mask. */
.ko-lab{
  --ko-logo-sweep:50%;--ko-logo-edge:50%;--ko-logo-angle:115deg;
  --ko-logo-level:.13;--ko-logo-edge-level:.24;
  --ko-logo-hue:185;
}
.ko-word{
  /* Pad the paint box, preserving the original glyph origin at (25,77).
     Gradient backgrounds and masks must include the p's full descender. */
  left:15px;right:15px;top:69px;padding:8px 10px 24px;
}
.ko-logo-filter{position:absolute;width:0;height:0;pointer-events:none}
.ko-logo-fill,.ko-logo-edge,.ko-logo-relief{
  z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:none;font-synthesis:none;
}
.ko-logo-fill{
  background:
    linear-gradient(calc(175deg - var(--ko-logo-angle)),
      transparent calc(var(--ko-logo-edge) - 24%),
      rgba(177,130,255,.42) calc(var(--ko-logo-edge) - 17%),
      rgba(255,193,111,.8) calc(var(--ko-logo-edge) - 10%),
      rgba(255,255,241,.98) calc(var(--ko-logo-edge) - 8%),
      rgba(255,225,170,.64) calc(var(--ko-logo-edge) - 6%),
      transparent calc(var(--ko-logo-edge) + 3%)),
    linear-gradient(var(--ko-logo-angle),
      transparent calc(var(--ko-logo-sweep) - 34%),
      rgba(87,111,221,.48) calc(var(--ko-logo-sweep) - 25%),
      rgba(47,137,193,.92) calc(var(--ko-logo-sweep) - 14%),
      rgba(88,222,245,.95) calc(var(--ko-logo-sweep) - 5%),
      rgba(242,255,255,1) calc(var(--ko-logo-sweep) - 1.5%),
      rgba(255,255,255,1) var(--ko-logo-sweep),
      rgba(201,241,255,.95) calc(var(--ko-logo-sweep) + 2.5%),
      rgba(144,107,231,.9) calc(var(--ko-logo-sweep) + 10%),
      rgba(210,153,236,.58) calc(var(--ko-logo-sweep) + 22%),
      transparent calc(var(--ko-logo-sweep) + 36%)),
    radial-gradient(ellipse 80% 180% at var(--ko-fill-x) var(--ko-fill-y),
      rgba(244,209,154,.76),rgba(188,169,246,.38) 24%,transparent 61%);
  background-clip:text;-webkit-background-clip:text;
  opacity:var(--ko-logo-level);
}
.ko-logo-edge{
  color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:0;
  mask-image:linear-gradient(calc(180deg - var(--ko-logo-angle)),
    transparent calc(var(--ko-logo-edge) - 23%),
    rgba(0,0,0,.3) calc(var(--ko-logo-edge) - 12%),
    #000 calc(var(--ko-logo-edge) - 4%),#000 calc(var(--ko-logo-edge) + 4%),
    rgba(0,0,0,.2) calc(var(--ko-logo-edge) + 16%),
    transparent calc(var(--ko-logo-edge) + 28%)),
    linear-gradient(var(--ko-logo-angle),
    transparent calc(var(--ko-logo-sweep) - 4%),
    #000 var(--ko-logo-sweep),#000 calc(var(--ko-logo-sweep) + 4%),
    transparent calc(var(--ko-logo-sweep) + 12%));
  opacity:var(--ko-logo-edge-level);
  /* Alpha-derived contours have no seams from overlapping font paths. */
  filter:url(#ko-logo-contour);
}
.ko-logo-rim-color{flood-color:hsl(var(--ko-logo-hue) 100% 83%)}
.ko-logo-relief{
  z-index:3;color:#fff;-webkit-text-fill-color:#fff;
  filter:url(#ko-logo-emboss);opacity:.78;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .ko-logo-fill{display:none}
}
@media(forced-colors:active){.ko-logo-fill,.ko-logo-edge,.ko-logo-relief{display:none}}