/* ═══════════════════════════════════════════════════════════════════════ WONDAYS COMPONENT KIT · v2 DARK · 2026-08-20 The single source of truth. The catalogue and the app both link this file. PRINCIPLE: every component is copied from a real object. If you cannot name the object, the component does not belong in the kit. v2 — DARK IS THE DEFAULT. The machine is a dark instrument; what it prints stays paper. Light skin is one attribute: . THE DARK LAW (why this is not a colour swap): · On light, a raised part is proved by a SHADOW under it. · On dark, a shadow proves nothing — the ground is already dark. A raised part is proved by a 1px LIGHT RIM on its top edge. · Legends are EMBOSSED on light (white shadow below) and ENGRAVED on dark (black shadow below). Never the same. · Accents do not glow on light. On dark they carry bloom — that is the whole reason the panel reads at a glance. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ══ DARK (default) ═════════════════════════════════════════════════ */ /* body — warm charcoal, never pure black. Aluminium in shade. */ --bone:#2b2a27; --bone-hi:#3c3b36; --bone-lo:#1f1e1c; --ink:#121211; /* recessed housing — darker than the body */ --ink-2:#0f0f0e; /* flap card face */ /* accents — unchanged hues, they are the brand */ --amber:#f4640c; --amber-hi:#ff8a3d; --amber-lo:#c04606; --amber-deep:#7d2c05; --sun:#ffc21f; --sun-lo:#d99b00; --grass:#37b364; --grass-hi:#7fe0a0; --grass-lo:#1c6b39; /* lifted for dark */ --teal:#2a9a94; --paper:#f3eeda; /* the record. STAYS PAPER — it is lit, not dark */ --steel-hi:#d9d8d3; --steel:#8e8d87; --steel-lo:#4a4945; /* elevation — the whole dark/light difference lives in these six */ --rim:rgba(255,255,255,.10); /* top edge of a raised part */ --rim-strong:rgba(255,255,255,.20); /* top edge of a bright part */ --under:rgba(255,255,255,.045); /* reflected light beneath a part */ --cast:rgba(0,0,0,.62); /* cast shadow */ --cast-soft:rgba(0,0,0,.42); --recess:rgba(0,0,0,.8); /* inside a cut-out */ --sheen-top:rgba(255,255,255,.07); /* light sweeping the body top */ --sheen-bot:rgba(0,0,0,.32); --hairline:rgba(255,255,255,.09); /* panel divisions */ /* faces */ --key-hi:#26251f; --key-mid:#191816; --key-lo:#0e0e0c; /* standard key */ --key-fg:#b5b2a9; --grey-hi:#9b9a93; --grey-mid:#82817a; --grey-lo:#63625c; /* the PLAY key */ --grey-fg:#1a1a18; --knob-hi:#4c4b46; --knob-mid:#232320; --knob-lo:#131311; --pointer:#e8e7e2; /* legend */ --legend-fg:#8f8c84; --legend-fg-2:#66645e; --emboss:0 1px 0 rgba(0,0,0,.8); /* ENGRAVED on dark */ --lamp-off:#221f1c; /* ══ geometry ═══════════════════════════════════════════════════════ */ --r-0:0px; --sp-1:10px; --sp-2:20px; --sp-3:30px; --sp-4:60px; --travel:7px; /* how far the dome moves */ --travel-key:2px; /* how far a flat key moves */ /* ══ motion ═════════════════════════════════════════════════════════ */ --ease:cubic-bezier(.42,.05,.25,1); --spring:cubic-bezier(.34,1.7,.5,1); --t-press:120ms; --t-flap:560ms; --t-lamp:260ms; /* ══ type ═══════════════════════════════════════════════════════════ */ --legend:"Roboto Mono",ui-monospace,monospace; --display:"Playfair Display",Georgia,serif; --ui:Inter,-apple-system,sans-serif; } /* ══ LIGHT SKIN — the bone machine. One attribute flips everything. ═══ */ [data-skin="light"]{ --bone:#efe9db; --bone-hi:#f8f4e9; --bone-lo:#ded7c5; --ink:#1d1a16; --ink-2:#2b2822; --amber:#f4640c; --amber-hi:#ff9445; --amber-lo:#b8410a; --amber-deep:#8f3308; --sun:#ffc21f; --sun-lo:#e09b00; --grass:#2f9d55; --grass-hi:#8fd39a; --grass-lo:#1c6b39; --teal:#1f6f6b; --paper:#f3eeda; --steel-hi:#f0efeb; --steel:#b3b2ab; --steel-lo:#6d6c65; --rim:rgba(255,255,255,.95); --rim-strong:rgba(255,255,255,1); --under:rgba(255,255,255,.55); --cast:rgba(0,0,0,.40); --cast-soft:rgba(0,0,0,.22); --recess:rgba(0,0,0,.55); --sheen-top:rgba(255,255,255,.85); --sheen-bot:rgba(0,0,0,.14); --hairline:rgba(0,0,0,.14); --key-hi:#f4f3f0; --key-mid:#dcdbd6; --key-lo:#c6c5bf; --key-fg:#3d3c38; --grey-hi:#c9c8c2; --grey-mid:#b0afa9; --grey-lo:#94938d; --grey-fg:#26251f; --knob-hi:#4c4b46; --knob-mid:#232320; --knob-lo:#131311; --pointer:#e8e7e2; --legend-fg:#4b4a45; --legend-fg-2:#6a6254; --emboss:0 1px 0 rgba(255,255,255,.55); /* EMBOSSED on light */ --lamp-off:#cfc7b4; } /* ═══════════════════ SUBSTRATE ═══════════════════ */ /* K-01 ENAMEL PLATE — Braun ET66 housing / anodised instrument case */ .k-plate{position:relative;overflow:hidden; background:linear-gradient(168deg,var(--bone-hi),var(--bone) 42%,var(--bone-lo))} .k-plate::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 70% at 50% -10%,var(--sheen-top),transparent 55%), radial-gradient(120% 70% at 50% 110%,var(--sheen-bot),transparent 55%)} /* the case has an edge you can see */ .k-plate.is-cased{box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px rgba(0,0,0,.3),0 18px 40px var(--cast)} /* K-02 INK BEZEL — Solari departure-board housing, cut into the panel */ .k-bezel{background:var(--ink);padding:12px;display:flex;gap:6px; box-shadow:inset 0 4px 10px var(--recess),inset 0 -1px 0 var(--rim),0 1px 0 var(--under)} /* K-03 KNURL — camera focus ring, milled edge */ .k-knurl{height:14px;opacity:.5; background:repeating-linear-gradient(90deg,var(--rim) 0 1px,rgba(0,0,0,.35) 1px 3px)} /* K-04 SCREW — Phillips pan-head seated in the panel */ .k-screw{width:15px;height:15px;border-radius:50%;position:relative; background:radial-gradient(circle at 34% 28%,var(--steel-hi),var(--steel) 46%,var(--steel-lo) 88%); box-shadow:inset 0 1.5px 1px var(--rim-strong),inset 0 -1.5px 2px rgba(0,0,0,.6), 0 1px 0 var(--under),0 0 0 1px rgba(0,0,0,.35),0 0 4px 1px var(--cast-soft)} .k-screw::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px; background:linear-gradient(var(--steel-lo),var(--steel)); transform:translate(-50%,-50%) rotate(28deg);box-shadow:0 1px 0 var(--rim)} /* K-05 HAIRLINE — the panel division. A scored line, not a border. */ .k-line{height:1px;background:rgba(0,0,0,.42);box-shadow:0 1px 0 var(--under)} /* ═══════════════════ CONTROLS ═══════════════════ */ /* K-10 DOME — arcade button / emergency stop. THE primary action. One per screen. If there are two, one of them is wrong. */ .k-dome{width:152px;height:152px;border-radius:50%;cursor:pointer;position:relative;border:0;padding:0; background:radial-gradient(circle at 38% 28%,var(--amber-hi),var(--amber) 46%,var(--amber-lo) 88%); box-shadow: inset 0 4px 6px rgba(255,255,255,.45), inset 0 -10px 16px rgba(0,0,0,.38), 0 12px 24px var(--cast), 0 3px 0 var(--amber-deep), 0 0 0 8px var(--ink), 0 0 0 9px var(--rim), 0 0 34px rgba(244,100,12,.30); /* bloom — dark mode only */ transition:transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease)} [data-skin="light"] .k-dome{box-shadow: inset 0 4px 6px rgba(255,255,255,.5),inset 0 -10px 16px rgba(0,0,0,.34), 0 12px 20px var(--cast),0 3px 0 var(--amber-deep), 0 0 0 8px var(--ink),0 0 0 10px var(--rim)} .k-dome::after{content:"";position:absolute;left:22%;top:14%;width:44%;height:28%;border-radius:50%; background:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,0));filter:blur(2px)} .k-dome.is-down{transform:translateY(var(--travel)) scale(.97); box-shadow:inset 0 6px 12px rgba(0,0,0,.5),0 3px 6px var(--cast), 0 0 0 8px var(--ink),0 0 0 9px var(--rim)} .k-dome.is-done{background:radial-gradient(circle at 38% 28%,var(--grass-hi),var(--grass) 46%,var(--grass-lo) 88%); box-shadow:inset 0 4px 6px rgba(255,255,255,.45),inset 0 -10px 16px rgba(0,0,0,.38), 0 12px 24px var(--cast),0 3px 0 #14522b, 0 0 0 8px var(--ink),0 0 0 9px var(--rim),0 0 34px rgba(55,179,100,.28)} /* K-11 KEY — SP-404 / calculator key. Secondary actions. Dark: the key is DARKER than the body, lit by a 1px top rim. */ .k-key{position:relative;border:0;padding:15px 18px;cursor:pointer; font-family:var(--legend);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:11px; color:var(--key-fg); background:linear-gradient(var(--key-hi),var(--key-mid) 55%,var(--key-lo)); box-shadow:inset 0 1px 0 var(--rim-strong),inset 0 -2px 3px rgba(0,0,0,.5), 0 3px 5px var(--cast),0 1px 0 var(--under); transition:transform 90ms var(--ease),box-shadow 90ms var(--ease)} .k-key:active,.k-key.is-down{transform:translateY(var(--travel-key)); box-shadow:inset 0 2px 4px rgba(0,0,0,.55),0 1px 2px var(--cast-soft)} /* the grey key — a light control on a dark panel. The PLAY key. */ .k-key.is-grey{background:linear-gradient(var(--grey-hi),var(--grey-mid) 55%,var(--grey-lo)); color:var(--grey-fg); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.32), 0 3px 5px var(--cast),0 1px 0 var(--under)} /* the red key — RECORD. Irreversible things wear this. */ .k-key.is-amber{background:linear-gradient(var(--amber-hi),var(--amber) 55%,var(--amber-lo)); color:#fff3e6; box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 3px rgba(0,0,0,.35), 0 3px 6px var(--cast),0 0 16px rgba(244,100,12,.42)} .k-key.is-sun{background:linear-gradient(var(--sun),var(--sun-lo));color:#2a1c00; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.3), 0 3px 6px var(--cast),0 0 16px rgba(255,194,31,.34)} .k-key.is-square{width:58px;height:58px;padding:0;display:flex;align-items:center;justify-content:center;font-size:15px} /* the key's own tiny lamp, as on the reference panel */ .k-key .dot{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%)} /* K-12 SLAB — Teenage Engineering big key. The loud full-width action. */ .k-slab{width:100%;border:0;padding:17px;cursor:pointer;color:#241505; font-family:var(--legend);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase; background:linear-gradient(var(--sun),var(--sun-lo)); box-shadow:0 4px 0 #a97800,0 8px 18px var(--cast),0 0 26px rgba(255,194,31,.22); transition:transform 110ms var(--ease),box-shadow 110ms var(--ease)} .k-slab:active{transform:translateY(4px);box-shadow:0 0 0 #a97800,0 4px 8px var(--cast)} .k-slab.is-done{background:linear-gradient(var(--grass-hi),var(--grass));color:#062a14; box-shadow:0 4px 0 var(--grass-lo),0 8px 18px var(--cast)} .k-slab.is-quiet{background:linear-gradient(var(--key-hi),var(--key-lo));color:var(--key-fg); box-shadow:inset 0 1px 0 var(--rim),0 4px 0 rgba(0,0,0,.5),0 8px 16px var(--cast)} /* K-13 KNOB — OP-1 / hi-fi volume. Rotary selection. */ .k-knob{width:52px;height:52px;border-radius:50%;position:relative;cursor:grab; background:radial-gradient(circle at 40% 32%,var(--knob-hi),var(--knob-mid) 62%,var(--knob-lo)); box-shadow:inset 0 2px 2px rgba(255,255,255,.22),inset 0 -3px 5px rgba(0,0,0,.7), 0 4px 10px var(--cast),0 1px 0 var(--under)} .k-knob::after{content:"";position:absolute;left:50%;top:6px;width:2px;height:14px;background:var(--pointer); transform:translateX(-50%);box-shadow:0 0 4px rgba(255,255,255,.5)} /* the ivory knob — the single pale object on a dark panel. Volume, on the ref. */ .k-knob.is-ivory{background:radial-gradient(circle at 38% 30%,#fffdf6,#e8e4d6 58%,#b9b5a6); box-shadow:inset 0 2px 2px rgba(255,255,255,.9),inset 0 -4px 7px rgba(0,0,0,.28), 0 5px 12px var(--cast),0 1px 0 var(--under)} .k-knob.is-ivory::after{background:#3a3831;box-shadow:none} .k-knob.is-big{width:74px;height:74px} /* K-14 DEAD RESET — tally-counter reset arm. Modelled, deliberately inoperative. The doctrine as hardware: the counter cannot be zeroed. */ .k-dead{width:34px;height:34px;border-radius:50%;position:relative;cursor:not-allowed; background:radial-gradient(circle at 38% 32%,var(--steel-hi),var(--steel) 60%,var(--steel-lo)); box-shadow:inset 0 1px 1px var(--rim-strong),inset 0 -2px 3px rgba(0,0,0,.5),0 2px 5px var(--cast); opacity:.62;filter:saturate(.4)} .k-dead::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--steel-lo); transform:translate(-50%,-50%) rotate(38deg);box-shadow:0 1px 0 var(--rim)} /* K-15 FADER — mixer channel fader. Continuous, coarse, never precise. */ .k-fader{position:relative;width:26px;height:150px;display:flex;justify-content:center} .k-fader .slot{position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%); background:var(--ink);box-shadow:inset 0 0 3px var(--recess),0 1px 0 var(--under)} .k-fader .cap{position:absolute;left:50%;width:26px;height:15px;transform:translate(-50%,-50%);cursor:grab; background:linear-gradient(var(--grey-hi),var(--grey-lo)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.4),0 3px 6px var(--cast)} .k-fader .cap::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px; background:rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.35)} /* K-16 SELECTOR — the stacked two-state tab (SAMPLE / CHOP on the ref). Exactly one is lit. Use where a mode must be visible without being read. */ .k-sel{display:flex;flex-direction:column;gap:3px} .k-sel button{border:0;cursor:pointer;padding:7px 12px;text-align:center; font-family:var(--legend);font-weight:700;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase; background:linear-gradient(var(--key-hi),var(--key-lo));color:var(--legend-fg-2); box-shadow:inset 0 1px 0 var(--rim),0 2px 4px var(--cast-soft); transition:background 160ms var(--ease),color 160ms var(--ease),box-shadow 160ms var(--ease)} .k-sel button.is-on{background:linear-gradient(var(--amber-hi),var(--amber-lo));color:#fff3e6; box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 14px rgba(244,100,12,.45)} /* K-17 PILL — the outlined legend button (KEYS / FADER on the ref). A label you can press. The quietest control we have. */ .k-pill{border:1px solid var(--legend-fg-2);background:transparent;cursor:pointer;padding:6px 12px; font-family:var(--legend);font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--legend-fg);box-shadow:0 1px 0 var(--under); transition:color 150ms var(--ease),border-color 150ms var(--ease)} .k-pill:hover{color:var(--sun);border-color:var(--sun)} .k-pill.is-on{background:var(--legend-fg);color:var(--bone);border-color:var(--legend-fg)} /* ═══════════════════ READOUTS ═══════════════════ */ /* K-20 FLAP — Solari split-flap digit. Numbers that only go up. */ .k-flap{width:46px;height:70px;position:relative;overflow:hidden;background:var(--ink-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 3px 8px rgba(0,0,0,.6)} .k-flap .col{position:absolute;left:0;right:0;top:0;transition:transform var(--t-flap) var(--spring)} .k-flap .col>div{height:70px;display:flex;align-items:center;justify-content:center; font-family:var(--legend);font-weight:700;font-size:44px;color:#fdf7e8} .k-flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.8);z-index:3} .k-flap::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,0) 34%,rgba(0,0,0,.4) 52%,rgba(0,0,0,0) 70%)} /* K-21 LAMP — panel indicator bulb. Off is a dark well, not a grey circle. */ .k-lamp{width:14px;height:14px;border-radius:50%;background:var(--lamp-off); box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 1px 0 var(--under); transition:all var(--t-lamp) var(--spring)} .k-lamp.is-on{background:radial-gradient(circle at 38% 32%,#fff0b8,var(--sun) 45%,var(--sun-lo)); box-shadow:0 0 12px 2px rgba(255,194,31,.6),inset 0 0 2px rgba(255,255,255,.8)} .k-lamp.is-hit{background:radial-gradient(circle at 38% 32%,#ffd9a8,var(--amber) 48%,var(--amber-lo)); box-shadow:0 0 16px 3px rgba(244,100,12,.7),inset 0 0 2px rgba(255,255,255,.7);transform:scale(1.25)} .k-lamp.is-small{width:8px;height:8px} .k-lamp.is-small.is-on{box-shadow:0 0 9px 2px rgba(255,194,31,.55),inset 0 0 2px rgba(255,255,255,.7)} /* K-22 LADDER — VU-meter lamp row */ .k-ladder{display:flex;gap:6px} /* K-23 CHART — barograph paper. THE RECONCILIATION: the machine is dark metal; what it prints is paper. The record never goes dark. It is lit from inside the case. */ .k-chart{position:relative;background:var(--paper);overflow:hidden; background-image:linear-gradient(rgba(120,90,60,.16) 1px,transparent 1px), linear-gradient(90deg,rgba(120,90,60,.16) 1px,transparent 1px);background-size:100% 22px,26px 100%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 2px 8px rgba(120,90,60,.2),0 0 22px rgba(243,238,218,.14)} .k-chart::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 12%,transparent 88%,rgba(0,0,0,.2))} /* the phosphor variant — for live values only, never for the record */ .k-chart.is-screen{background:#0b1410;box-shadow:inset 0 0 26px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05); background-image:linear-gradient(rgba(80,255,170,.09) 1px,transparent 1px), linear-gradient(90deg,rgba(80,255,170,.09) 1px,transparent 1px)} /* K-24 SILKSCREEN — printed panel legend. ENGRAVED on dark. */ .k-legend{font-family:var(--legend);font-weight:500;text-transform:uppercase;letter-spacing:.16em; font-size:10px;color:var(--legend-fg);text-shadow:var(--emboss)} .k-legend.is-quiet{color:var(--legend-fg-2);letter-spacing:.18em} .k-legend.is-amber{color:var(--amber);text-shadow:0 0 12px rgba(244,100,12,.4)} .k-legend.is-sun{color:var(--sun);text-shadow:0 0 12px rgba(255,194,31,.35)} /* K-25 PLATE CHIP — serial-number badge riveted to the case */ .k-chip{background:var(--ink);color:var(--legend-fg);font-family:var(--legend);font-weight:500; font-size:9px;letter-spacing:.14em;padding:4px 8px;display:inline-block; box-shadow:inset 0 1px 2px rgba(0,0,0,.7),0 1px 0 var(--under)} /* K-26 WORDMARK — the maker's name, stamped into the case */ .k-mark{font-family:var(--legend);font-weight:700;font-size:11px;letter-spacing:.2em; color:var(--legend-fg);text-shadow:var(--emboss)} .k-mark i{color:var(--amber);font-style:normal} /* K-27 GRILLE — speaker perforation */ .k-grille{background-image:radial-gradient(circle,rgba(0,0,0,.72) 1px,transparent 1.3px);background-size:6px 6px; box-shadow:inset 0 1px 0 var(--under)} /* K-28 BELL — shop-counter bell, brass. Milestones only. */ .k-bell{width:34px;height:34px;border-radius:50%; background:radial-gradient(circle at 36% 30%,#ffe9a8,#d6a11f 60%,#8f6a10); box-shadow:inset 0 -2px 4px rgba(0,0,0,.45),0 3px 8px var(--cast),0 0 18px rgba(214,161,31,.3)} .k-bell.is-ringing{animation:k-bell 700ms var(--spring)} @keyframes k-bell{0%,100%{transform:rotate(0)}20%{transform:rotate(-22deg)}45%{transform:rotate(16deg)}70%{transform:rotate(-8deg)}} /* ═══════════════════ FEEDBACK ═══════════════════ */ /* K-30 PING — the ring that leaves a pressed control */ .k-ping{position:absolute;top:50%;left:50%;width:190px;height:190px;border-radius:50%; border:2px solid var(--amber);transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none} .k-ping.is-go{animation:k-ping 640ms var(--ease)} @keyframes k-ping{0%{transform:translate(-50%,-50%) scale(.62);opacity:.9} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}} /* K-31 RECOIL — the body absorbing a press. Sells it more than the button. */ .k-recoil{animation:k-recoil 320ms var(--spring)} @keyframes k-recoil{0%{transform:translateY(0)}28%{transform:translateY(3px)}100%{transform:translateY(0)}} @media (prefers-reduced-motion:reduce){ .k-dome,.k-key,.k-slab,.k-lamp,.k-flap .col,.k-sel button{transition-duration:.001ms!important} .k-ping.is-go,.k-recoil,.k-bell.is-ringing{animation:none!important} } /* ═══════════════════ THE RECORD ═══════════════════ The string. Real object: PUNCHED PAPER TAPE — player-piano roll, Jacquard card, teletype tape. Chosen because a punched hole is PERMANENT. You cannot un-punch it. The doctrine stops being a policy and becomes a property of the material. Blank tape carries no shame the way an empty grid square does. The tape runs through a lit gate: a hole is where the lamp shows through. Marked days are POINTS OF LIGHT. That is the pearl. */ /* K-40 GATE — the tape reader window. Lamp behind, case edge in front. */ .k-gate{position:relative;overflow:hidden;background:var(--ink); box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 6px 14px rgba(0,0,0,.7)} .k-gate::before,.k-gate::after{content:"";position:absolute;left:0;right:0;height:16px;z-index:4;pointer-events:none} .k-gate::before{top:0;background:linear-gradient(var(--ink),transparent)} .k-gate::after{bottom:0;background:linear-gradient(transparent,var(--ink))} /* K-41 TAPE — the strip itself. Cream stock in both skins: the machine is dark metal, what it prints is paper. */ .k-tape{position:relative;height:100%; background:linear-gradient(var(--paper),#e7e0c6); box-shadow:inset 0 10px 18px rgba(120,90,60,.22),inset 0 -10px 18px rgba(120,90,60,.22)} .k-tape::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3; background:repeating-linear-gradient(90deg,rgba(120,90,60,0) 0 38px,rgba(120,90,60,.055) 38px 40px)} /* K-42 PUNCH — the lit hole. THE PEARL. Marked days only. */ .k-punch{position:absolute;border-radius:50%;transform:translate(-50%,-50%);z-index:3; background:radial-gradient(circle,#fffdf2,#ffe9a8 60%,#ffc21f); box-shadow:0 0 9px 3px rgba(255,194,31,.75),inset 0 0 3px rgba(140,90,10,.5)} /* the second channel — "did you have to decide?" When this track falls silent, the habit has formed. Graduation is visible as a texture change. */ .k-punch.is-decide{background:radial-gradient(circle,#eafffb,#7fe6dd 60%,var(--teal)); box-shadow:0 0 7px 2px rgba(42,154,148,.6),inset 0 0 3px rgba(0,60,58,.5)} /* K-43 SPROCKET — the feed-hole row. The constant rhythm under the data. */ .k-punch.is-feed{background:radial-gradient(circle,#fff8e2,rgba(255,214,120,.9)); box-shadow:0 0 4px 1px rgba(255,194,31,.4)} /* K-44 STAMP — the certification mark printed on a chart recording. Ours says the record is finished because the habit won. */ .k-stamp{position:absolute;top:50%;transform:translate(-50%,-50%) rotate(-7deg);z-index:5; border:2px solid var(--grass-lo);color:var(--grass-lo);padding:6px 12px; font-family:var(--legend);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase; opacity:.82;box-shadow:0 0 0 3px rgba(243,238,218,.6)} .k-stamp.is-amber{border-color:var(--amber-lo);color:var(--amber-lo)} /* K-45 CHAD — the disc punched out of the tape. Real punches eject one. */ .k-chad{position:absolute;border-radius:50%;z-index:6;pointer-events:none; background:linear-gradient(#f6f0d8,#cfc5a2);box-shadow:0 1px 3px rgba(0,0,0,.6)} @keyframes k-chad{0%{transform:translate(-50%,-50%) scale(1);opacity:1} 100%{transform:translate(-50%,180px) scale(.7) rotate(220deg);opacity:0}} .k-chad.is-go{animation:k-chad 620ms cubic-bezier(.36,.06,.3,1) forwards} /* K-42 fresh punch — the hole arriving with a shear, not a fade */ @keyframes k-punched{0%{transform:translate(-50%,-50%) scale(.15);filter:brightness(2.4)} 55%{transform:translate(-50%,-50%) scale(1.32)}100%{transform:translate(-50%,-50%) scale(1)}} .k-punch.is-fresh{animation:k-punched 320ms var(--spring)} /* K-46 PLUNGER — the punch head straddling the tape. Presses through paper. */ .k-plunger{position:relative;width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer; background:radial-gradient(circle at 38% 28%,var(--amber-hi),var(--amber) 48%,var(--amber-lo) 90%); box-shadow:inset 0 2px 3px rgba(255,255,255,.45),inset 0 -5px 9px rgba(0,0,0,.4), 0 6px 12px var(--cast),0 2px 0 var(--amber-deep), 0 0 0 5px var(--ink),0 0 0 6px var(--rim),0 0 22px rgba(244,100,12,.35); transition:transform 90ms var(--ease),box-shadow 90ms var(--ease)} .k-plunger.is-down{transform:translateY(4px) scale(.96); box-shadow:inset 0 4px 9px rgba(0,0,0,.5),0 1px 3px var(--cast),0 0 0 5px var(--ink),0 0 0 6px var(--rim)} /* the mechanism refusing — out of reach, or not printed yet */ .k-plunger.is-locked{background:radial-gradient(circle at 38% 32%,var(--steel-hi),var(--steel) 60%,var(--steel-lo)); cursor:not-allowed;opacity:.55;filter:saturate(.25); box-shadow:inset 0 1px 1px var(--rim),inset 0 -3px 5px rgba(0,0,0,.5),0 3px 7px var(--cast),0 0 0 5px var(--ink)} .k-plunger.is-spent{background:radial-gradient(circle at 38% 28%,var(--grass-hi),var(--grass) 48%,var(--grass-lo) 90%); box-shadow:inset 0 2px 3px rgba(255,255,255,.4),inset 0 -5px 9px rgba(0,0,0,.4), 0 6px 12px var(--cast),0 2px 0 #14522b,0 0 0 5px var(--ink),0 0 0 6px var(--rim)} .k-plunger .arc{position:absolute;inset:-11px;transform:rotate(-90deg);pointer-events:none} .k-plunger .arc circle{fill:none;stroke:var(--sun);stroke-width:3; filter:drop-shadow(0 0 5px rgba(255,194,31,.85))} /* K-47 REGISTRATION — the frame brackets at the head. What is under the punch. */ .k-reg{position:absolute;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none} .k-reg i{position:absolute;width:11px;height:11px;border:2px solid rgba(255,255,255,.5)} .k-reg i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0} .k-reg i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0} .k-reg i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0} .k-reg i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0} /* paper grain — the tape is stock, not a flat fill */ .k-tape::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5; background-image:repeating-linear-gradient(93deg,rgba(140,110,70,.05) 0 1px,transparent 1px 3px), repeating-linear-gradient(3deg,rgba(140,110,70,.035) 0 1px,transparent 1px 4px)}