/* Layout concept: a dark "comp viewport" ground with content on a 1240px column.
   Wide variable display type for headings, mono for timecode-style labels,
   and keyframe diamonds as the recurring mark. Single dark theme by choice. */
:root {
  --bg: #010A13;
  --surface: #0A1428;
  --line: #463714;
  --gold2: #785A28;
  --field: #1E2328;
  --text: #F0E6D2;
  --muted: #A09B8C;
  --accent: #C8AA6E;
  --free: #0AC8B9;
  --on-accent: #16130B;
  --f-display: "Anybody", "Arial Black", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px;
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font: 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site { container: site / inline-size; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
#view { flex: 1; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.eyebrow { font: 500 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.ml { white-space: pre-line; }

/* Draft strip */
#strip p { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line); text-align: center; padding: 8px 16px; }

/* Nav */
#nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.nav { position: relative; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: inline-flex; align-items: baseline; gap: 1px; font: 800 21px/1 var(--f-mono); letter-spacing: -.02em; color: var(--text); transition: text-shadow .2s; }
.logo .br { color: var(--accent); font-weight: 400; }
.logo:hover { text-shadow: -1.5px 0 rgba(255, 70, 100, .75), 1.5px 0 rgba(70, 220, 255, .75); }
.links { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 4px; }
.links > li > a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: 15px; color: var(--muted); transition: color .15s, background .15s; }
.links > li > a:hover, .links > li > a[aria-current] { color: var(--text); }
.links > li > a[aria-current] { background: var(--surface); }
.links svg { width: 14px; height: 14px; }
/* Every top-bar link: a three-frame glitch (about 100 ms) on hover, then chromatic aberration while hovered.
   The logo uses the same layers, but its glitches are timed by EC.logoGlitch (see the end of this file). */
.gl { position: relative; display: inline-block; }
.gl::before, .gl::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.gl::before { color: #FF4664; }
.gl::after { color: #46DCFF; }
.drop .dl .gl { justify-self: start; }
:is(.links a, .nav .logo):is(:hover, :focus-visible) .gl { text-shadow: -1.5px 0 rgba(255, 70, 100, .75), 1.5px 0 rgba(70, 220, 255, .75); }
.links a:is(:hover, :focus-visible) .gl { animation: gl-jolt 100ms steps(1, end) 1; }
.links a:is(:hover, :focus-visible) .gl::before { animation: gl-red 100ms steps(1, end) 1; }
.links a:is(:hover, :focus-visible) .gl::after { animation: gl-cyan 100ms steps(1, end) 1; }
@keyframes gl-jolt { 0% { transform: translateX(1px) skewX(-10deg); } 33% { transform: translateX(-2px) skewX(7deg); } 66% { transform: translateX(1px) skewX(-3deg); } 100% { transform: none; } }
@keyframes gl-red { 0% { opacity: 1; transform: translate(-4px, -1px); clip-path: inset(0 0 55% 0); } 33% { opacity: 1; transform: translate(3px, 1px); clip-path: inset(60% 0 0 0); } 66% { opacity: 1; transform: translate(-2px, 0); clip-path: inset(28% 0 42% 0); } 100% { opacity: 0; } }
@keyframes gl-cyan { 0% { opacity: 1; transform: translate(4px, 1px); clip-path: inset(45% 0 18% 0); } 33% { opacity: 1; transform: translate(-3px, -1px); clip-path: inset(8% 0 68% 0); } 66% { opacity: 1; transform: translate(2px, 0); clip-path: inset(66% 0 6% 0); } 100% { opacity: 0; } }
.nav-soon { font: 600 9px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 3px 5px; border-radius: 4px; }
.has-drop { position: relative; }
.drop { position: absolute; top: calc(100% + 8px); left: -8px; min-width: 270px; display: grid; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .16s; }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; }
.drop a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.drop .dl { display: grid; flex: 1; font-weight: 600; line-height: 1.35; }
.drop small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.drop em { font: 500 12px var(--f-mono); color: var(--muted); font-style: normal; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); }
.dot.free { background: var(--free); }
.dot.premium { background: var(--accent); }
.burger { display: none; margin-left: auto; width: 42px; height: 42px; place-items: center; background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.burger svg { width: 18px; height: 18px; }
@container site (max-width: 780px) {
  .burger { display: inline-grid; }
  .links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
  .nav.open .links { display: flex; }
  .drop { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; border: 0; padding: 0 0 0 14px; }
  .drop::before { display: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 10px; font: 600 15px/1 var(--f-body); border: 1px solid transparent; cursor: pointer; transition: transform .15s, border-color .15s, filter .15s; }
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-free { background: var(--free); color: #08130E; }
.btn-ghost { background: color-mix(in srgb, var(--bg) 60%, transparent); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }

/* Sections */
.sec { padding-block: 72px; }
.s-hero { padding-block: 0; }
.s-head { padding-bottom: 24px; }
.s-grid, .s-body { padding-top: 24px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 28px; }
.sec-head h2 { font-family: var(--f-display); font-weight: 750; font-stretch: 112%; font-size: clamp(26px, 3.6cqi, 40px); line-height: 1.05; }
.sec-head .muted { max-width: 48ch; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); }
.more svg { width: 16px; height: 16px; }

/* Hero */
.hero { position: relative; min-height: clamp(600px, 86vh, 860px); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.hero-gl { position: absolute; inset: 0; z-index: 0; }
.hero-gl canvas { display: block; width: 100%; height: 100%; }
.hero-gl.nogl { background: radial-gradient(circle at 22% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 38%), radial-gradient(circle at 78% 70%, color-mix(in srgb, var(--free) 16%, transparent), transparent 40%); }
.hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(ellipse 50% 44% at 50% 50%, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 58%, transparent 100%),
  linear-gradient(to bottom, transparent 72%, var(--bg)); }
.hero-in { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 22px; padding-block: 96px; pointer-events: none; }
.hero-in .ctas, .hero-in a { pointer-events: auto; }
.hero-title { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: clamp(42px, 8.4cqi, 112px); line-height: .94; letter-spacing: -.015em; max-width: 12ch; animation: stretch 1.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes stretch { from { font-stretch: 62%; letter-spacing: .02em; } }
/* Signature under the title: right end lined up with the end of the title's last line (site.js sets --by-pad) */
.hero-head { display: grid; justify-items: center; gap: clamp(10px, 1.5cqi, 20px); }
.hero-by { justify-self: stretch; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding-right: var(--by-pad, 0px);
  font: 500 clamp(13px, 1.3cqi, 17px)/1.2 var(--f-mono); letter-spacing: .06em; color: var(--accent); animation: by-in .9s cubic-bezier(.2, .8, .2, 1) .85s both; }
.hero-by::before { content: ""; flex: none; width: clamp(28px, 4cqi, 64px); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
@keyframes by-in { from { opacity: 0; transform: translateX(12px); } }
.hero .lead { font-size: clamp(17px, 2cqi, 20px); max-width: 46ch; color: color-mix(in srgb, var(--text) 78%, var(--muted)); }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.hero-apps { font: 500 11px/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero-hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22px; display: flex; justify-content: flex-start; pointer-events: none; }
.hero-hint p { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-hint p::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.hero-tip { position: absolute; z-index: 3; pointer-events: none; transform: translate(16px, -50%); padding: 8px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); white-space: nowrap; font-size: 13px; line-height: 1.35; }
.hero-tip b { display: block; }
.hero-tip span { font: 500 11px var(--f-mono); color: var(--muted); }

/* Product grid and cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container site (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container site (max-width: 560px) { .grid, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .2s, border-color .2s; }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.card-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--bg); }
.card-thumb canvas, .card-thumb > img { display: block; width: 100%; height: 100%; }
.card-thumb > img, .pd-media > img { object-fit: cover; }
.tag { position: absolute; top: 10px; left: 10px; padding: 6px 8px; border-radius: 6px; font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(10, 11, 22, .72); backdrop-filter: blur(6px); }
.tag.free { color: var(--free); }
.tag.premium { color: var(--accent); }
.card-body { display: grid; align-content: start; gap: 6px; flex: 1; padding: 16px 16px 8px; }
.card-body h3 { font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: 19px; line-height: 1.15; }
.card-body p { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 16px; }
.ver { flex: none; font: 500 11px var(--f-mono); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.chip b { font: 600 10px/1 var(--f-mono); letter-spacing: .04em; }
.chip.craft b { color: var(--accent); }
.chip.more b { color: var(--muted); }
.chip img { width: 16px; height: 16px; object-fit: contain; }
.chips-full .chip { height: 32px; padding: 0 10px; }
.chips-full .chip span { font-size: 13.5px; }
.card.add { align-items: center; justify-content: center; gap: 8px; min-height: 290px; border-style: dashed; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.card.add .plus { font: 300 42px/1 var(--f-display); color: var(--accent); }
.empty { grid-column: 1 / -1; color: var(--muted); padding: 40px 0; }

/* Home: free / premium split */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@container site (max-width: 780px) { .split { grid-template-columns: minmax(0, 1fr); } }
.panel { --k: var(--accent); position: relative; display: grid; gap: 14px; min-width: 0; padding: 32px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s; }
.panel.free { --k: var(--free); }
.panel:hover { border-color: var(--k); }
.panel-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.kick { width: 100%; font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--k); }
.num { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: clamp(64px, 9cqi, 112px); line-height: .9; font-variant-numeric: tabular-nums; }
.unit { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: 22px; }
.panel p { color: var(--muted); max-width: 40ch; }
.track { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 2px; overflow: hidden; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.track i { position: relative; flex: none; width: 9px; height: 9px; background: var(--k); transform: rotate(45deg); }
.panel:hover .track i { animation: key .5s calc(var(--i) * 28ms) both; }
@keyframes key { 50% { transform: rotate(45deg) scale(1.7); } }
.go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--k); }
.go svg { width: 16px; height: 16px; }

/* Page headers and filters */
.page-head { display: grid; gap: 16px; padding-top: 16px; }
.page-title { font-family: var(--f-display); font-weight: 800; font-stretch: 118%; font-size: clamp(40px, 7cqi, 84px); line-height: .98; letter-spacing: -.01em; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 14px var(--f-body); cursor: pointer; }
.seg a[aria-current], .seg button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.seg em { font: 500 11px var(--f-mono); font-style: normal; color: var(--muted); }
.search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 360px; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.search:focus-within { border-color: var(--accent); }
.search svg { flex: none; width: 16px; height: 16px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 15px var(--f-body); }
.select { height: 46px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font: 14px var(--f-body); max-width: 100%; }
.note { max-width: 70ch; padding-left: 12px; border-left: 2px solid var(--accent); font: 500 12px/1.6 var(--f-mono); color: var(--muted); }

/* Product page */
.pd { padding-top: 32px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; font: 500 12px var(--f-mono); color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.pd-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pd-media { aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.pd-media canvas, .pd-media > img { display: block; width: 100%; height: 100%; }
.pd-info { display: grid; align-content: start; gap: 16px; min-width: 0; }
.pd-info .tag { position: static; width: fit-content; background: var(--surface); border: 1px solid var(--line); }
.pd-title { font-family: var(--f-display); font-weight: 800; font-stretch: 118%; font-size: clamp(36px, 5cqi, 60px); line-height: 1; }
.pd-buy { display: grid; justify-items: start; gap: 10px; padding-block: 18px; margin-block: 4px; border-block: 1px solid var(--line); }
.pd-note { font: 500 11px var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.mini { font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.meta div { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.meta dt { font: 500 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meta dd { margin: 4px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; margin-block: 56px; }
.pd-desc { margin-top: 12px; max-width: 60ch; font-size: 17px; color: color-mix(in srgb, var(--text) 85%, var(--muted)); }
.feat { list-style: none; display: grid; gap: 10px; margin: 12px 0 0; padding: 0; }
.feat li { display: flex; align-items: baseline; gap: 12px; }
.feat li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); transform: translateY(-1px) rotate(45deg); }
@container site (max-width: 860px) { .pd-top, .pd-body { grid-template-columns: minmax(0, 1fr); } .pd-body { gap: 32px; } }

/* Plugins */
.coming { display: grid; justify-items: center; gap: 18px; padding-block: 64px 32px; text-align: center; }
.coming .lead { margin-inline: auto; }
.coming-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; font: 300 clamp(80px, 14cqi, 160px)/1 var(--f-mono); color: var(--accent); }
.coming-mark i { width: 14px; height: 14px; background: var(--text); transform: rotate(45deg); animation: blink 1.4s infinite both; }
.coming-mark i:nth-of-type(2) { animation-delay: .2s; }
.coming-mark i:nth-of-type(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.status { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 8px; font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* Portfolio */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.work { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .2s, border-color .2s; }
.work:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.work-thumb { position: relative; background: var(--bg); }
.work.video .work-thumb { aspect-ratio: 16 / 9; }
.work.art .work-thumb { aspect-ratio: 4 / 5; }
.work-thumb canvas, .work-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(10, 11, 22, .6); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.play svg { width: 18px; height: 18px; margin-left: 2px; }
.work-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px 16px; }
.src { grid-column: 1 / -1; font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.work-meta h3 { font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: 18px; line-height: 1.2; }
.yr { align-self: center; font: 500 12px var(--f-mono); color: var(--muted); }
.clients { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.clients li { display: grid; place-items: center; min-height: 112px; padding: 16px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients span { font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: 17px; color: var(--muted); transition: color .2s; }
.clients li:hover span { color: var(--text); }
.clients img { max-width: 72%; max-height: 48px; object-fit: contain; filter: grayscale(1) brightness(1.7); opacity: .85; }
.clients .add-client button { width: 100%; height: 100%; min-height: 80px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--muted); cursor: pointer; font-weight: 600; }
@container site (max-width: 860px) { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* About */
.about { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.about-text { display: grid; gap: 20px; max-width: 62ch; font-size: 19px; line-height: 1.7; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
@container site (max-width: 780px) { .about { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.about-stat { grid-template-columns: minmax(0, 240px); margin-top: 6px; }
.about-stat dd { font: 600 30px/1.1 var(--f-mono); letter-spacing: .02em; color: var(--accent); }
/* The description decodes from JavaScript (fx-decode.js): each letter keeps its place, invisible until its turn; then
   a character of syntax-coloured code is drawn over it, a gold symbol flickers as the decoding front passes, and the
   letter itself shows. */
.dc { position: relative; }
.dc-h, .dc-c, .dc-g { color: transparent; }
.dc-c::after, .dc-g::after { content: attr(data-g); content: attr(data-g) / ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(var(--dc-y, .1em));
  font-family: var(--f-mono); font-size: .84em; font-weight: 500; font-stretch: 75%; letter-spacing: 0; line-height: normal; white-space: pre; pointer-events: none; }
.dc-c::after { color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
.dc-c[data-t="kw"]::after { color: var(--accent); }
.dc-c[data-t="ty"]::after { color: color-mix(in srgb, var(--accent) 35%, var(--text)); }
.dc-c[data-t="fn"]::after { color: color-mix(in srgb, var(--free) 65%, var(--text)); }
.dc-c[data-t="str"]::after { color: var(--free); }
.dc-c[data-t="num"]::after { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }
.dc-c[data-t="pu"]::after { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.dc-g::after { color: var(--accent); text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }

/* Footer */
#foot { border-top: 1px solid var(--line); margin-top: 40px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr); gap: 24px 40px; align-items: start; padding-block: 48px 36px; }
.foot-brand { display: grid; justify-items: start; gap: 12px; }
.foot-brand p { color: var(--muted); max-width: 34ch; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; }
.foot-links a { color: var(--muted); font-weight: 500; }
.foot-links a:hover { color: var(--text); }
.copy { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); font: 500 11px var(--f-mono); color: var(--muted); }
@container site (max-width: 780px) { .foot-in { grid-template-columns: minmax(0, 1fr); } .foot-links { justify-content: flex-start; } }

/* Toast */
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 3000; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font: 600 14px/1.4 var(--f-body); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Live demo on script pages */
.demo { margin-top: 56px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--surface) 55%, var(--bg)); scroll-margin-top: 96px; }
.demo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.demo-intro { display: grid; gap: 8px; max-width: 62ch; }
.demo-intro h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 115%; font-size: clamp(28px, 4cqi, 44px); line-height: 1; }
.demo-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-presets button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 600 13px var(--f-body); cursor: pointer; }
.demo-presets button:hover { border-color: var(--accent); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.demo-stage { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg); }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.demo-comp { margin-right: auto; font: 500 11px var(--f-mono); color: var(--muted); }
.demo-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.demo-seg button, .demo-pins { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 600 12px var(--f-body); cursor: pointer; }
.demo-seg button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.demo-pins { border: 1px solid var(--line); }
.demo-pins[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, var(--field)); border-color: var(--accent); color: var(--text); }
.demo-view { position: relative; aspect-ratio: 16 / 10; }
.demo-canvas { display: block; width: 100%; height: 100%; }
.demo-time { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); }
.demo-btn { width: 30px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); cursor: pointer; }
.demo-btn svg { width: 14px; height: 14px; }
.demo-tc { margin-left: 4px; font: 600 13px var(--f-mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.demo-fps { font: 500 11px var(--f-mono); color: var(--muted); }
.demo-graph { position: relative; height: 92px; border-top: 1px solid var(--line); }
.demo-graph-c { display: block; width: 100%; height: 100%; }
.demo-glabel { position: absolute; z-index: 1; left: 8px; top: 6px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--bg) 85%, transparent); font: 500 10px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.demo-fx { display: grid; gap: 6px; min-width: 0; padding: 4px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.fx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 500 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fx-head b { font: 600 14px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text); }
.fx-group { display: grid; gap: 2px; padding-top: 8px; }
.fx-gname { margin-bottom: 2px; font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 2px 10px; padding: 4px 0; }
.fx-row label { font-size: 13.5px; }
.fx-num { width: 100%; box-sizing: border-box; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: 600 12px var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.fx-range { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--accent); }
.fx-reset { margin-top: 8px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--muted); font: 600 13px var(--f-body); cursor: pointer; }
.fx-reset:hover { color: var(--text); border-color: var(--muted); }
.fx-empty { padding: 12px 0; color: var(--muted); }
.demo-tag { left: auto; right: 10px; color: var(--text); }
.try-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: 600 14px var(--f-body); cursor: pointer; }
.try-link svg { width: 16px; height: 16px; transform: rotate(90deg); }
@container site (max-width: 900px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-stage { position: sticky; top: calc(66px + env(safe-area-inset-top, 0px)); z-index: 2; }
  .demo-graph { height: 72px; }
}
body.editing .demo-stage { position: static; }
@container site (max-width: 560px) { .demo { padding: 16px; margin-inline: -8px; } }

/* Layer for the Plugins button effect */
#fxLayer { position: fixed; inset: 0; z-index: 2500; overflow: hidden; pointer-events: none; }
.links a[href="#scripts"]:active { transform: scale(.96); }

/* Plugins button effect */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.links a[href="#plugins"]:active { transform: scale(.96); }

/* Home button morph */
.morph { display: inline-grid; place-items: center; }
.morph > * { grid-area: 1 / 1; }
.morph-icon { width: 1.3em; height: 1.3em; fill: currentColor; opacity: 0; pointer-events: none; }
.morph.morphing { filter: url(#ecGoo); }

/* Portfolio button: a small press; the album morph is at the end of this file */
.links a[href="#portfolio"]:active { transform: scale(.96); }

/* Portfolio: real thumbnails, lengths, title tiles */
.work.art .work-thumb { aspect-ratio: 16 / 10; }
.work-thumb .dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 5px; background: rgba(10, 11, 22, .8); color: #fff; font: 600 11px var(--f-mono); font-variant-numeric: tabular-nums; }
.work-thumb.tile { box-sizing: border-box; display: grid; place-items: center; padding: 20px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 24%, var(--surface)), var(--surface) 62%); }
.work-thumb.tile span { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 20px; line-height: 1.1; text-align: center; text-wrap: balance; }

/* More on YouTube / ArtStation */
.more-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.more-link { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, transform .2s; }
.more-link:hover { border-color: var(--accent); transform: translateY(-2px); }
.ml-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ml-ico svg { width: 22px; height: 22px; }
.ml-txt { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ml-txt b { font-family: var(--f-display); font-weight: 750; font-stretch: 110%; font-size: 20px; }
.ml-txt small { color: var(--muted); font-size: 14px; }
.more-link > svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
@container site (max-width: 700px) { .more-links { grid-template-columns: minmax(0, 1fr); } }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 2800; display: grid; place-items: center; padding: calc(64px + env(safe-area-inset-top, 0px)) max(72px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(72px, env(safe-area-inset-left, 0px)); background: rgba(6, 7, 16, .92); backdrop-filter: blur(8px); }
.lb-fig { display: grid; gap: 14px; max-width: min(1400px, 100%); margin: 0; }
.lb-fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 190px); margin: 0 auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lb-video { position: relative; width: min(1280px, calc(100vw - 160px), calc((100vh - 190px) * 16 / 9)); aspect-ratio: 16 / 9; max-width: 100%; margin: 0 auto; background: #000 center / cover no-repeat; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb-video.is-blocked { display: grid; place-items: center; }
.lb-block { display: grid; justify-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 22px 26px; text-align: center; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--gold2); }
.lb-block p { margin: 0; color: var(--text); font-weight: 500; }
.lb-block .btn svg { width: 14px; height: 14px; }
.lb-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lb-cap { display: grid; gap: 2px; min-width: 0; }
.lb-cap b { font-family: var(--f-display); font-weight: 750; font-stretch: 108%; font-size: 18px; }
.lb-cap span { font: 500 12px var(--f-mono); color: var(--muted); }
.lb-btn { position: fixed; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(20, 22, 40, .75); color: #fff; cursor: pointer; }
.lb-btn svg { width: 18px; height: 18px; }
.lb-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: max(16px, env(safe-area-inset-left, 0px)); }
.lb-next { right: max(16px, env(safe-area-inset-right, 0px)); }
html.lb-open { overflow: hidden; }
@media (max-width: 640px) { .lb { padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); } .lb-video { width: calc(100vw - 24px); } .lb-prev, .lb-next { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: none; } }

/* Even grid: every thumbnail 16:9, reading left to right, newest first. The lightbox shows the full image. */
.works .work-thumb { aspect-ratio: 16 / 9 !important; }
.works .work-meta { flex: 1; align-content: start; }

/* =====================================================================
   Hextech skin: blue-black ground, cream type, gold linework frames with
   hard corners, gold corner brackets, fading gold dividers, diamond
   markers and a faint blue "magic" glow. Colours come from the tokens,
   so the editor's colour pickers still drive everything.
   ===================================================================== */
:root {
  --r: 0px;
  --gold-frame: linear-gradient(180deg, var(--gold2), var(--line) 42%, var(--line) 68%, var(--gold2));
  --gold-hot: linear-gradient(180deg, var(--accent), var(--gold2));
  --gold-rule: linear-gradient(90deg, transparent, var(--gold2) 16%, var(--accent) 50%, var(--gold2) 84%, transparent);
}
.site { background:
  radial-gradient(1100px 520px at 80% -8%, color-mix(in srgb, var(--free) 11%, transparent), transparent 62%),
  radial-gradient(900px 640px at -10% 38%, color-mix(in srgb, var(--free) 5%, transparent), transparent 60%),
  var(--bg); }

/* Gold-framed containers */
.card, .work, .panel, .more-link, .meta div, .pd-media, .demo, .demo-stage, .demo-fx, .drop, .hero-tip {
  border: 1px solid transparent; border-radius: 0;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-frame) border-box;
}
.demo-stage, .demo-fx { background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gold-frame) border-box; }
.card:hover, .work:hover, .panel:hover, .more-link:hover {
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-hot) border-box;
  box-shadow: 0 16px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent);
}
.card-thumb, .work-thumb { border-bottom: 1px solid var(--line); }

/* Gold corner brackets on the featured frames */
.panel::after, .demo::after, .pd-media::after, .more-link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; --c: var(--accent); --s: 14px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) left bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--s);
  background-repeat: no-repeat;
}
.pd-media, .more-link, .demo { position: relative; }

/* Fading gold dividers */
.nav { border-bottom: 1px solid transparent; border-image: var(--gold-rule) 1; background: color-mix(in srgb, var(--bg) 88%, transparent); }
#foot { border-top: 1px solid transparent; border-image: var(--gold-rule) 1; }
.copy { border-top-color: var(--line); }
.sec-head { padding-bottom: 14px; background: linear-gradient(90deg, var(--gold2), var(--line) 40%, transparent) left bottom / 100% 1px no-repeat; }
.page-head::after { content: ""; display: block; width: min(420px, 100%); height: 10px; margin-top: 6px; --d: var(--accent);
  background:
    linear-gradient(to bottom right, transparent 50%, var(--d) 50%) 0 0 / 5px 5px no-repeat,
    linear-gradient(to bottom left, transparent 50%, var(--d) 50%) 5px 0 / 5px 5px no-repeat,
    linear-gradient(to top right, transparent 50%, var(--d) 50%) 0 5px / 5px 5px no-repeat,
    linear-gradient(to top left, transparent 50%, var(--d) 50%) 5px 5px / 5px 5px no-repeat,
    linear-gradient(90deg, var(--gold2), var(--line) 45%, transparent) 17px center / calc(100% - 17px) 1px no-repeat; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: min(14px, 2.4cqi); }
.hero .eyebrow::before, .hero .eyebrow::after { content: ""; flex: none; width: min(56px, 7cqi); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.hero .eyebrow::after { transform: scaleX(-1); }
.hero-shade { background:
  radial-gradient(ellipse 36% 26% at 50% 58%, color-mix(in srgb, var(--free) 9%, transparent), transparent 72%),
  radial-gradient(ellipse 50% 44% at 50% 50%, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 58%, transparent 100%),
  linear-gradient(to bottom, transparent 72%, var(--bg)); }

/* Navigation */
.links > li > a { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 600; }
.links > li > a[aria-current] { position: relative; background: none; color: var(--text); }
/* Current-page marker: one diamond that glides along the gold line between links (fx-navmark.js) */
#nav .nav-mark { position: absolute; left: -5px; bottom: -5.5px; width: 8px; height: 8px; box-sizing: content-box; border: 1px solid var(--accent); background: var(--bg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); transform: rotate(45deg); pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; }
#nav .nav-mark.on { opacity: 1; }
.nav-soon { border-radius: 0; border-color: var(--gold2); }
.drop { top: calc(100% + 6px); box-shadow: 0 24px 50px rgba(0, 0, 0, .55); }   /* sits low enough to cover the page marker completely */
.drop a { border-radius: 0; }
.drop a:hover { background: var(--field); }
.drop .dl > span:first-child { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.burger { border-radius: 0; border-color: var(--gold2); }
@container site (max-width: 780px) { .links { border-bottom: 1px solid transparent; border-image: var(--gold-rule) 1; } #nav .nav-mark { display: none; } }

/* Buttons: gold-framed dark plates; free downloads glow Hextech blue */
.btn { border-radius: 0; text-transform: uppercase; letter-spacing: .09em; font-size: 13.5px; }
.btn-accent { color: var(--text); border: 2px solid transparent; background: linear-gradient(var(--field), var(--field)) padding-box, var(--gold-hot) border-box; }
.btn-accent:hover { filter: none; background: linear-gradient(color-mix(in srgb, var(--field) 82%, var(--accent)), var(--field)) padding-box, linear-gradient(180deg, var(--text), var(--accent)) border-box;
.btn-accent.btn-soon { cursor: default; min-width: 150px; justify-content: center; }
.btn-accent.btn-soon:hover { transform: none; background: linear-gradient(var(--field), var(--field)) padding-box, var(--gold-hot) border-box; }
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-free { color: color-mix(in srgb, var(--free) 30%, #FFFFFF); border: 2px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--free) 16%, var(--bg)), color-mix(in srgb, var(--free) 6%, var(--bg))) padding-box,
    linear-gradient(180deg, var(--free), color-mix(in srgb, var(--free) 35%, var(--bg))) border-box; }
.btn-free:hover { filter: none; box-shadow: 0 0 24px -6px color-mix(in srgb, var(--free) 80%, transparent); }
.btn-ghost { background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--gold2); }
.btn-ghost:hover { border-color: var(--accent); }
.try-link, .more, .go { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }

/* Fields, filters, tags and badges */
.search, .select, .seg { border-radius: 0; background: var(--field); border-color: var(--gold2); }
.search:focus-within, .select:focus { border-color: var(--accent); outline: none; }
.seg a, .seg button { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.seg a[aria-current], .seg button[aria-pressed="true"] { background: var(--bg); box-shadow: inset 0 -2px 0 var(--accent); color: var(--text); }
.tag { border-radius: 0; border: 1px solid currentColor; background: color-mix(in srgb, var(--bg) 82%, transparent); letter-spacing: .1em; }
.pd-info .tag { background: var(--bg); border-color: currentColor; }
.chip { border-radius: 0; background: var(--bg); border-color: var(--line); }
.chip:hover { border-color: var(--gold2); }
.ver, .yr { color: var(--muted); }
.work-thumb .dur { border-radius: 0; border: 1px solid var(--line); }
.play { border-color: var(--accent); background: color-mix(in srgb, var(--bg) 65%, transparent); color: var(--accent); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
.status { border-radius: 0; border-color: var(--gold2); }
.note { border-left-color: var(--accent); }
#strip p { background: var(--bg); border-bottom-color: var(--line); }

/* Home split: free in Hextech blue, premium in gold */
.panel { border-radius: 0; }
.panel.free { --k: var(--free); }
.track::before { background: var(--line); }

/* Script page and live demo */
.pd-media { border-radius: 0; }
.demo, .demo-stage, .demo-fx { border-radius: 0; }
.demo-bar, .demo-time, .demo-graph, .fx-head { border-color: var(--line); }
.demo-presets button, .demo-seg, .demo-seg button, .demo-pins, .demo-btn, .fx-num, .fx-reset { border-radius: 0; }
.demo-presets button { background: var(--field); border-color: var(--gold2); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.demo-presets button:hover { border-color: var(--accent); }
.demo-seg { background: var(--field); border-color: var(--gold2); }
.fx-num { background: var(--field); border-color: var(--gold2); }
.fx-reset { border-color: var(--gold2); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.demo-seg button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.demo-pins { background: var(--field); border-color: var(--gold2); }
.demo-pins:hover, .demo-btn:hover { border-color: var(--accent); }
.demo-btn { background: var(--field); border-color: var(--gold2); }

/* Portfolio extras, clients, lightbox, toast */
.ml-ico { border-radius: 0; border: 1px solid var(--gold2); background: var(--bg); transform: rotate(45deg) scale(.82); }
.ml-ico svg { transform: rotate(-45deg); }
.clients { border-color: var(--line); }
.clients li { border-color: var(--line); transition: background .2s; }
.clients li:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.lb-fig img, .lb-video { border-radius: 0; border: 1px solid var(--gold2); }
.lb-btn { border-color: var(--accent); background: var(--bg); color: var(--accent); }
.lb-btn:hover { box-shadow: 0 0 16px -2px color-mix(in srgb, var(--accent) 70%, transparent); }
.hero-tip { border-radius: 0; }
#toast { border-radius: 0; background: var(--field); color: var(--text); border: 1px solid var(--accent); }

/* =====================================================================
   Plugins page: blueprint background, drafting tools and the code window (fx-wip.js)
   ===================================================================== */
.s-soon { padding-block: 0; }
.wip { position: relative; isolation: isolate; overflow: hidden; padding-block: 64px 72px; min-height: calc(100svh - 66px); box-sizing: border-box; }
.wip .coming { position: relative; padding-bottom: 0; grid-template-columns: minmax(0, 1fr); }
.wip .coming::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -20px; bottom: -40px; width: min(860px, 100%); transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 78%, transparent), transparent); }

.bp { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: var(--free);
  background:
    linear-gradient(color-mix(in srgb, var(--free) 12%, transparent) 1px, transparent 1px) 50% 0 / 80px 80px,
    linear-gradient(90deg, color-mix(in srgb, var(--free) 12%, transparent) 1px, transparent 1px) 50% 0 / 80px 80px,
    linear-gradient(color-mix(in srgb, var(--free) 5%, transparent) 1px, transparent 1px) 50% 0 / 16px 16px,
    linear-gradient(90deg, color-mix(in srgb, var(--free) 5%, transparent) 1px, transparent 1px) 50% 0 / 16px 16px,
    radial-gradient(ellipse 75% 60% at 50% 35%, color-mix(in srgb, var(--free) 11%, var(--bg)), var(--bg) 78%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70px, #000 calc(100% - 110px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 70px, #000 calc(100% - 110px), transparent); }
.bp svg { position: absolute; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.bp text { fill: currentColor; stroke: none; font: 500 11px var(--f-mono); letter-spacing: .06em; }
.bp .g { stroke: var(--accent); }
.bp .gf { fill: var(--accent); stroke: none; }
.bp .f { fill: color-mix(in srgb, var(--free) 5%, transparent); }
.bp .bp-thin { stroke-width: .8; }
.bp .bp-faint { opacity: .45; }
.bp .bp-dash { stroke-dasharray: 3 7; opacity: .6; }
.bp .bp-center { stroke-dasharray: 26 6 4 6; opacity: .45; }

.bp-geo { left: 50%; top: calc(148px + clamp(80px, 14cqi, 160px)); width: min(900px, 115cqi); transform: translate(-50%, -50%); opacity: .7; }
.bp-ring { stroke-dasharray: 1 5; opacity: .55; transform-box: view-box; transform-origin: 500px 500px; animation: bp-spin 120s linear infinite; }
.bp-hex { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .8; animation: bp-draw 2.6s .3s cubic-bezier(.6, 0, .3, 1) forwards; }

.bp-tool { opacity: .5; }
.bp-square { left: 3%; top: 48px; width: clamp(120px, 16cqi, 240px); transform: rotate(-9deg); animation: bp-drift 13s ease-in-out infinite; }
.bp-compass { right: 4.5%; top: 64px; width: clamp(130px, 19cqi, 290px); }
.bp-protractor { left: 4%; bottom: 170px; width: clamp(160px, 22cqi, 340px); transform: rotate(6deg); }
.bp-ruler { left: -2%; bottom: 72px; width: clamp(240px, 34cqi, 520px); transform: rotate(-3deg); animation: bp-drift 17s ease-in-out infinite reverse; }
.bp-swing { transform-box: view-box; transform-origin: 74px 352px; animation: bp-swing 9s ease-in-out infinite; }
.bp-trace { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 9 351; animation: bp-trace 9s ease-in-out infinite; }
.bp-needle { transform-box: view-box; transform-origin: 180px 186px; animation: bp-sweep 14s ease-in-out infinite; }

.bp-title { position: absolute; right: 3%; bottom: 40px; display: grid; justify-items: end; gap: 22px; color: var(--free); }
.bp-tb { display: grid; grid-template-columns: auto auto; border: 1px solid color-mix(in srgb, var(--free) 45%, transparent); font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.bp-tb > * { padding: 7px 10px; border: solid color-mix(in srgb, var(--free) 30%, transparent); border-width: 0 0 1px 0; }
.bp-tb > .k { border-right-width: 1px; color: color-mix(in srgb, var(--free) 70%, var(--bg)); }
.bp-tb > :nth-last-child(-n + 2) { border-bottom-width: 0; }
.bp-tb > .v { color: var(--text); opacity: .85; }
.bp-stamp { margin-right: 26px; padding: 7px 14px; border: 2px solid var(--accent); outline: 1px solid var(--accent); outline-offset: 3px; color: var(--accent);
  font: 700 12px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; transform: rotate(-7deg); opacity: .6; }
body.editing .bp-title { pointer-events: auto; }

@keyframes bp-swing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(16deg); } }
@keyframes bp-trace { 0%, 100% { stroke-dashoffset: 18.5; } 50% { stroke-dashoffset: -11.5; } }
@keyframes bp-sweep { 0%, 100% { transform: rotate(-62deg); } 50% { transform: rotate(62deg); } }
@keyframes bp-drift { 0%, 100% { translate: 0 0; } 50% { translate: 8px -6px; } }
@keyframes bp-spin { to { transform: rotate(360deg); } }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }

@container site (max-width: 1279px) { .bp-title { display: none; } }   /* the title block needs room beside the code window */
@container site (max-width: 900px) {
  .bp-ruler { display: none; }
  .bp-protractor { bottom: auto; top: 46%; left: -6%; }
}
@container site (max-width: 600px) {
  .wip { padding-block: 40px 56px; }
  .bp-geo { top: calc(114px + clamp(80px, 14cqi, 160px)); }
  .wc-ver { display: none; }
  .bp-tool { opacity: .38; }
  .bp-square { left: -8%; top: 24px; }
  .bp-compass { right: -10%; top: 30px; }
  .bp-protractor { display: none; }
}

/* Code window */
.wip-code { position: relative; width: min(680px, 100%); min-width: 0; justify-self: center; margin-top: 22px; text-align: left; border: 1px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--bg) 93%, transparent), color-mix(in srgb, var(--bg) 93%, transparent)) padding-box, var(--gold-frame) border-box;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--free) 6%, transparent); }
.wip-code::after { content: ""; position: absolute; inset: -1px; pointer-events: none; --c: var(--accent); --s: 14px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) left bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--s);
  background-repeat: no-repeat; }
.wc-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--field) 70%, transparent);
  font: 500 11.5px/1.2 var(--f-mono); font-stretch: 87.5%; color: var(--text); }
.wc-dots { display: flex; gap: 7px; }
.wc-dots i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold2); }
.wc-dots i:nth-child(2) { background: var(--accent); }
.wc-dots i:nth-child(3) { background: var(--free); }
.wc-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-dirty { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--free); opacity: 0; transition: opacity .2s; }
.wip-code.typing .wc-dirty { opacity: 1; }
.wc-tag { margin-left: auto; flex: none; padding: 4px 8px; border: 1px solid var(--gold2); color: var(--accent); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; }
.wc-body { position: relative; height: calc(13 * 1.8 * 12.5px + 20px); overflow: hidden; padding-block: 10px; box-sizing: border-box; }
.wc-body::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(color-mix(in srgb, var(--bg) 93%, transparent), transparent); pointer-events: none; }
.wc-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 93%, transparent)); pointer-events: none; }
.wc-code { margin: 0; font: 400 12.5px/1.8 var(--f-mono); font-stretch: 87.5%; white-space: pre; color: color-mix(in srgb, var(--text) 80%, var(--muted)); transition: transform .3s ease, opacity .3s; }
.wip-code.swap .wc-code { opacity: 0; }
.wc-code .cl { display: block; padding-right: 16px; }
.wc-code .cl.cur { background: color-mix(in srgb, var(--free) 7%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--free) 55%, transparent); }
.wc-code .ln { display: inline-block; width: 46px; padding-right: 16px; box-sizing: border-box; text-align: right; color: color-mix(in srgb, var(--muted) 40%, transparent); user-select: none; }
.wc-code .cl.cur .ln { color: var(--muted); }
.t-kw { color: var(--accent); }
.t-ty { color: color-mix(in srgb, var(--accent) 35%, var(--text)); }
.t-fn { color: color-mix(in srgb, var(--free) 65%, var(--text)); }
.t-str { color: var(--free); }
.t-num { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }
.t-com { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.t-pp { color: color-mix(in srgb, var(--gold2) 45%, var(--accent)); }
.t-pu { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.t-typo { color: #FF6B7A; text-decoration: underline wavy #FF6B7A; text-underline-offset: 3px; }
.wc-caret { display: inline-block; width: 2px; height: 1.2em; margin-left: 1px; vertical-align: -.25em; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.wip-code.idle .wc-caret { animation: wc-blink 1s steps(1) infinite; }
@keyframes wc-blink { 50% { opacity: 0; } }
.wc-console { display: grid; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, transparent);
  font: 400 11.5px/1.3 var(--f-mono); font-stretch: 87.5%; color: var(--muted); }
.wc-prompt { color: var(--accent); }
.wc-cmd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.wc-row { display: flex; align-items: center; gap: 12px; min-height: 15px; }
.wc-prog { position: relative; flex: none; width: 150px; height: 7px; border: 1px solid var(--gold2); }
.wc-prog i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 0; max-width: calc(100% - 2px); background: linear-gradient(90deg, var(--gold2), var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); transition: width .15s; }
.wc-pct { flex: none; min-width: 3ch; color: var(--accent); font-variant-numeric: tabular-nums; }
.wc-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wip-code.built .wc-msg { color: var(--text); }
.wip-code.built .wc-msg::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; transform: rotate(45deg); background: var(--accent); vertical-align: 1px; }
.wc-status { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px; border-top: 1px solid var(--line); font: 500 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wc-live { color: var(--free); }
.wc-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--free); box-shadow: 0 0 8px var(--free); vertical-align: 1px; animation: blink 1.6s infinite; }
.wc-pos { margin-left: auto; font-variant-numeric: tabular-nums; }
@container site (max-width: 600px) {
  .wc-code { font-size: 11px; font-stretch: 75%; }
  .wc-body { height: calc(12 * 1.8 * 11px + 20px); }
  .wc-code .ln { width: 34px; padding-right: 10px; }
  .wc-prog { width: 90px; }
  .wc-pos { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bp *, .bp-tool, .wc-live::before { animation: none !important; }
  .bp-hex { stroke-dashoffset: 0; }
}

/* =====================================================================
   Scroll reveal on the Scripts and Portfolio pages (fx-reveal.js): panels boot up as they scroll in
   ===================================================================== */
.rv { position: relative; }
.rv.rv-off { opacity: 0; }
.rv-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.rv-shut { position: absolute; inset: 0; transform: scaleY(0); transform-origin: 50% 100%;
  background:
    linear-gradient(color-mix(in srgb, var(--free) 10%, transparent) 1px, transparent 1px) 0 0 / 100% var(--rv-grid, 32px),
    linear-gradient(90deg, color-mix(in srgb, var(--free) 10%, transparent) 1px, transparent 1px) 0 0 / var(--rv-grid, 32px) 100%,
    var(--surface); }
.rv-cell .rv-shut { background-color: var(--bg); }
.rv-off .rv-shut { transform: scaleY(1); }
.rv-scan { position: absolute; inset: 0; opacity: 0; }
.rv-scan::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--free) 14%, #FFFFFF 50%, var(--free) 86%, transparent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--free) 65%, transparent); }
.rv-scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 64px;
  background: linear-gradient(to top, color-mix(in srgb, var(--free) 16%, transparent), transparent); }
.rv-brk { position: absolute; inset: 6px; opacity: 0; --c: var(--accent); --s: 16px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) left bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--s);
  background-repeat: no-repeat; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); }

/* Portfolio order buttons */
.tools .seg svg { width: 14px; height: 14px; flex: none; }
.seg-order button[aria-pressed="true"][data-port-sort="random"] svg { color: var(--accent); }

/* Live demo: choice and checkbox settings (MotionKit) */
.fx-row-seg, .fx-row-check { grid-template-columns: minmax(0, 1fr); }
.fx-lbl { font-size: 13.5px; }
.fx-seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--gold2); background: var(--field); }
.fx-seg button { flex: 1; height: 28px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: 600 11.5px var(--f-body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.fx-seg button:hover { color: var(--text); }
.fx-seg button[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.fx-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.fx-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.fx-group { transition: opacity .2s; }
.fx-group.is-off { opacity: .4; }

/* "Live demo" is colour coded (Site > Colours > Live demo) and carries a pulsing dot */
:root { --live: #E84057; }
.live-dot { position: relative; display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 8px color-mix(in srgb, var(--live) 80%, transparent); animation: live-blink 1.6s ease-in-out infinite; }
.live-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--live); animation: live-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes live-ping { 0% { transform: scale(1); opacity: .9; } 75%, 100% { transform: scale(3); opacity: 0; } }
.tag.demo-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--live); border-color: var(--live); }
.live-kicker { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--live); }
.try-link { color: var(--live); }
.try-link .live-dot { margin-right: 2px; }
@media (prefers-reduced-motion: reduce) { .live-dot, .live-dot::after { animation: none; } .live-dot::after { display: none; } }

/* A script with a download per app (an EffectCraft port and the After Effects original), its video link and its credits */
.pd-dls { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.pd-dls .btn { width: 100%; box-sizing: border-box; height: auto; min-height: 54px; padding-block: 12px; line-height: 1.3; }
.dl-size { flex: none; margin-left: auto; padding-left: 14px; font: 500 11.5px var(--f-mono); letter-spacing: .04em; text-transform: none; white-space: nowrap; opacity: .7; }
.vid-link { color: var(--accent); }
.vid-link svg { transform: none; width: 13px; height: 13px; }
.vid-link svg:last-child { width: 14px; height: 14px; opacity: .75; }
.vid-link:hover span { text-decoration: underline; text-underline-offset: 4px; }
.meta.credits { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* The logo glitches on its own and on hover (site.js: EC.logoGlitch); --gi (strength) and --gd (direction) vary each one */
/* The "by CJXander" line under the home title does the same (EC.byGlitch), and takes the colour split while hovered. */
:is(.logo, .hero-by) .gl.gl-fire { text-shadow: calc(-1.5px * var(--gi, 1)) 0 rgba(255, 70, 100, .75), calc(1.5px * var(--gi, 1)) 0 rgba(70, 220, 255, .75); animation: glv-jolt 100ms steps(1, end) 1; }
:is(.logo, .hero-by) .gl.gl-fire::before { animation: glv-red 100ms steps(1, end) 1; }
:is(.logo, .hero-by) .gl.gl-fire::after { animation: glv-cyan 100ms steps(1, end) 1; }
.hero-by .gl { pointer-events: auto; }
.hero-by .gl:hover { text-shadow: -1.5px 0 rgba(255, 70, 100, .75), 1.5px 0 rgba(70, 220, 255, .75); }
@keyframes glv-jolt {
  0% { transform: translateX(calc(1px * var(--gd, 1) * var(--gi, 1))) skewX(calc(-10deg * var(--gd, 1) * var(--gi, 1))); }
  33% { transform: translateX(calc(-2px * var(--gd, 1) * var(--gi, 1))) skewX(calc(7deg * var(--gd, 1) * var(--gi, 1))); }
  66% { transform: translateX(calc(1px * var(--gd, 1) * var(--gi, 1))) skewX(calc(-3deg * var(--gd, 1) * var(--gi, 1))); }
  100% { transform: none; }
}
@keyframes glv-red {
  0% { opacity: 1; transform: translate(calc(-4px * var(--gd, 1) * var(--gi, 1)), -1px); clip-path: inset(0 0 55% 0); }
  33% { opacity: 1; transform: translate(calc(3px * var(--gd, 1) * var(--gi, 1)), 1px); clip-path: inset(60% 0 0 0); }
  66% { opacity: 1; transform: translate(calc(-2px * var(--gd, 1) * var(--gi, 1)), 0); clip-path: inset(28% 0 42% 0); }
  100% { opacity: 0; }
}
@keyframes glv-cyan {
  0% { opacity: 1; transform: translate(calc(4px * var(--gd, 1) * var(--gi, 1)), 1px); clip-path: inset(45% 0 18% 0); }
  33% { opacity: 1; transform: translate(calc(-3px * var(--gd, 1) * var(--gi, 1)), -1px); clip-path: inset(8% 0 68% 0); }
  66% { opacity: 1; transform: translate(calc(2px * var(--gd, 1) * var(--gi, 1)), 0); clip-path: inset(66% 0 6% 0); }
  100% { opacity: 0; }
}

/* Portfolio button: the word melts into a photo album that flips a couple of pages (fx-portfolio.js) */
.morph-album { width: 1.75em; overflow: visible; }
.morph-album .ab-page { stroke: var(--bg); stroke-width: 1.1; paint-order: stroke; stroke-linejoin: round; }
.morph-album .ab-hole { fill: var(--bg); }
.morph-album .ab-flip { opacity: 0; }

/* Scripts button: the word is erased, a random line of JavaScript types in, then it decodes back (fx-scripts.js) */
.st-ov { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; white-space: pre; pointer-events: none; }
.st-ov.st-code { font-family: var(--f-mono); font-size: 12px; font-weight: 500; font-stretch: 75%; letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--text); }
.st-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); animation: st-blink 1s steps(1, end) infinite; }
.st-ov.st-typing .st-caret { animation: none; }
@keyframes st-blink { 50% { opacity: 0; } }
.gl.st-on > :not(.st-ov) { visibility: hidden; }
.links a > svg { transition: opacity .2s; }
.links a.st-busy > svg { opacity: 0; }

/* CropKit live demo (demo-cropkit.js): the stage takes mask drags, the panel is the script's own */
.demo-crop .demo-presets button:disabled { opacity: .45; cursor: default; }
.ck-tip { font: 500 11px var(--f-mono); color: var(--muted); }
.ck-canvas { cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ck-track { position: relative; flex: 1; min-width: 90px; height: 26px; margin-left: 6px; border: 1px solid var(--line); background: var(--field); cursor: pointer; touch-action: none; }
.ck-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-layer { position: absolute; inset: 4px; display: flex; align-items: center; padding-left: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--free) 55%, transparent); background: color-mix(in srgb, var(--free) 18%, var(--field)); font: 600 10px var(--f-mono); letter-spacing: .04em; color: var(--text); pointer-events: none; }
.ck-head { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent); pointer-events: none; }
.ck-panel { align-content: start; }
.ck-tools { display: grid; gap: 8px; padding-top: 12px; }
.ck-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border: 1px solid var(--gold2); background: var(--field); color: var(--text); font: 600 13.5px var(--f-body); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ck-btn:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 14px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
.ck-btn:active:not(:disabled) { transform: translateY(1px); }
.ck-btn:disabled { opacity: .45; cursor: default; }
.ck-btn svg { width: 16px; height: 16px; flex: none; overflow: visible; }
.ck-btn-mask { margin-top: 8px; }
.ck-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 2px 2px; }
.ck-pad { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.ck-pad .fx-num { width: 56px; text-align: right; }
.ck-info { min-width: 0; margin: 8px 0 0; padding: 8px 12px 14px; border: 1px solid var(--line); }
.ck-info legend { padding: 0 6px; font: 600 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ck-info-body { display: grid; min-height: 218px; align-content: start; }
.ck-tool { font-weight: 600; font-size: 14px; }
.ck-sub { margin-top: 2px; font: 500 11px var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-diag { display: block; width: 100%; height: auto; margin: 10px 0 6px; overflow: visible; }
.ck-diag .ck-old { fill: none; stroke: color-mix(in srgb, var(--muted) 75%, transparent); }
.ck-diag .ck-kept { fill: color-mix(in srgb, var(--accent) 26%, transparent); stroke: var(--accent); }
.ck-diag text { font: 500 10.5px var(--f-mono); fill: var(--text); }
.ck-rows { display: grid; gap: 5px; }
.ck-rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.ck-rows span { font-size: 12px; color: var(--muted); }
.ck-rows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-msg { margin-top: 12px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ck-msg.is-warn { color: color-mix(in srgb, var(--live) 45%, var(--accent)); }
.ck-empty { display: grid; justify-items: center; gap: 12px; padding: 54px 0 14px; text-align: center; font-size: 13.5px; }
.ck-empty svg { width: 22px; height: 22px; color: color-mix(in srgb, var(--muted) 60%, transparent); }
.ck-scan { display: grid; justify-items: center; gap: 10px; padding-top: 30px; font-size: 13.5px; }
.ck-progress { width: 78%; height: 6px; border: 1px solid var(--line); background: var(--field); }
.ck-progress i { display: block; height: 100%; background: var(--accent); }
.ck-pct { font: 500 11px var(--f-mono); color: var(--muted); }
.ck-cancel { height: 28px; padding: 0 16px; border: 1px solid var(--gold2); background: var(--field); color: var(--text); font: 600 12px var(--f-body); cursor: pointer; }
.ck-help-btn { justify-self: start; width: 30px; height: 26px; margin-top: 8px; border: 1px solid var(--gold2); background: var(--field); color: var(--accent); font: 700 13px var(--f-body); cursor: pointer; }
.ck-help-btn[aria-expanded="true"] { border-color: var(--accent); }
.ck-help { display: grid; gap: 4px; padding-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ck-help[hidden] { display: none; }
.ck-help b { margin-top: 6px; font-size: 12px; color: var(--accent); }
@container site (max-width: 560px) { .ck-tip { display: none; } }

/* Demo panels that change with the scene (RigKit): groups for the other scene hide, settings that don't apply dim */
.fx-group[hidden] { display: none; }
.fx-row.is-off { opacity: .45; }

/* Live demo: dropdown settings and notes (ParallaxKit) */
.fx-row-sel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.fx-row-text { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fx-text { width: 100%; min-width: 0; box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid var(--gold2); border-radius: 0; background: var(--field); color: var(--text); font: 600 13px var(--f-mono); letter-spacing: .02em; }
.fx-text:hover { border-color: var(--accent); }
.fx-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fx-sel { width: 100%; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--gold2); border-radius: 0; background: var(--field); color: var(--text); font: 600 12.5px var(--f-body); cursor: pointer; }
.fx-sel:hover { border-color: var(--accent); }
.fx-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fx-note { margin: 0 0 4px; font: 500 11px/1.5 var(--f-mono); color: var(--muted); }
.pk-roll { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pk-canvas { touch-action: pan-y; user-select: none; -webkit-user-select: none; }

/* Background music: mute button and equalizer at the right end of the top bar (fx-music.js).
   The equalizer is as wide as the About label; the button gets the same colour-split glitch as the links. */
.music { display: flex; align-items: center; flex: none; margin-left: -20px; }   /* About's own padding is the gap */
.music[hidden] { display: none; }
.music::before { content: ""; flex: none; width: 1px; height: 20px; margin-right: 10px; background: linear-gradient(transparent, var(--gold2), transparent); }
.music-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 2px; border: 0; background: none; color: var(--muted); cursor: pointer; transition: color .15s; }
.music-btn:hover, .music-btn:focus-visible, .music[data-state="on"] .music-btn { color: var(--text); }
.mu-in { display: inline-flex; align-items: center; gap: 9px; }
.mu-ico { flex: none; width: 16px; height: 16px; overflow: visible; }
.mu-ico path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s; }
.mu-ico .mu-spk { fill: currentColor; fill-opacity: .2; }
.music .mu-x, .music:is([data-state="off"], [data-state="error"]) .mu-wave { opacity: 0; }
.music:is([data-state="off"], [data-state="error"]) .mu-x { opacity: 1; }
.music[data-state="wait"] .mu-wave { opacity: .5; }
.music[data-state="error"] .music-btn { color: color-mix(in srgb, var(--live) 55%, var(--muted)); }
.mu-eq { display: block; width: 48px; height: 14px; margin-top: -3px; }   /* bars stand on the text's baseline */
.music.no-eq .mu-eq { display: none; }
.music[data-state="on"] .mu-eq { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)); }
.music-btn:is(:hover, :focus-visible) .mu-in { filter: drop-shadow(-1.5px 0 rgba(255, 70, 100, .75)) drop-shadow(1.5px 0 rgba(70, 220, 255, .75)); animation: gl-jolt 100ms steps(1, end) 1; }
.music-btn:focus-visible { outline-offset: 0; }
@container site (max-width: 780px) {
  .music { order: 1; margin-left: auto; }
  .music::before { display: none; }
  .burger { order: 2; }
  .nav-in:has(> .music:not([hidden])) .burger { margin-left: -8px; }
}
@media (prefers-reduced-motion: reduce) { .music-btn:is(:hover, :focus-visible) .mu-in { animation: none; } }

/* Footer: copyright, privacy policy and cookie settings */
.foot-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.foot-legal .copy { grid-column: auto; padding: 0; border: 0; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.legal-links a, .link-btn { padding: 0; border: 0; background: none; font: 500 11px var(--f-mono); letter-spacing: .04em; color: var(--muted); cursor: pointer; }
.legal-links a:hover, .link-btn:hover { color: var(--text); }

/* Privacy policy page */
.legal-date { font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legal { display: grid; gap: 34px; counter-reset: legal; }
.legal-item { display: grid; gap: 10px; max-width: 74ch; }
.legal-item h2 { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: clamp(19px, 2.2cqi, 23px); line-height: 1.25; }
.legal-item h2::before { counter-increment: legal; content: counter(legal, decimal-leading-zero); flex: none; font: 500 11px var(--f-mono); letter-spacing: .08em; color: var(--accent); }
.legal-item p { padding-left: 32px; font-size: 17px; line-height: 1.7; color: color-mix(in srgb, var(--text) 84%, var(--muted)); }
.legal-actions { padding-left: 32px; }
@container site (max-width: 560px) { .legal-item p, .legal-actions { padding-left: 0; } }

/* Cookie notice (consent.js): a gold-framed plate in the bottom-left corner on first visit */
.consent { position: fixed; z-index: 2600; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(430px, calc(100vw - 40px)); box-sizing: border-box;
  display: grid; gap: 12px; padding: 18px 20px 20px; color: var(--text); font: 14.5px/1.55 var(--f-body);
  border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-frame) border-box; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.consent.in { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent::before, .consent::after { content: ""; position: absolute; width: 10px; height: 10px; border: 0 solid var(--accent); pointer-events: none; }
.consent::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.consent::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.consent-kick { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.consent-kick::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.consent-text { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.consent-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.consent-btns .btn { height: 40px; padding: 0 16px; font-size: 12px; }
@media (max-width: 560px) { .consent { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; } .consent-btns .btn { flex: 1; justify-content: center; } }

/* A portfolio video before the visitor allows YouTube: its cover, and a choice */
.lb-video.lb-gate { display: grid; place-items: center; }
.lb-video.lb-gate::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.lb-gate .lb-block { position: relative; max-width: min(460px, calc(100% - 32px)); }
.lb-gate-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lb-gate-btns .btn { height: 42px; padding: 0 18px; font-size: 12px; }
.lb-gate-btns .btn svg { width: 14px; height: 14px; }

/* =====================================================================
   Big and ultrawide screens (2560×1440, 3440×1440, 5120×1440...). Up to
   about 1920 px wide nothing here applies. Wider, the content column grows
   with the screen (about 1640 px at 2560, 2200 px at 3440, 2400 px at most),
   the script cards grow (still four to a row) and the portfolio adds columns,
   and the titles scale up. On script pages the live demo's settings column
   widens and its picture stays short enough to fit the screen with its
   timeline. hero.js spreads the floating clips across the extra width.
   ===================================================================== */
@container site (min-width: 1940px) {
  .wrap { max-width: clamp(1240px, 64cqi, 2400px); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(clamp(250px, 14cqi, 480px), 1fr)); }
  .works { grid-template-columns: repeat(auto-fill, minmax(clamp(290px, 11cqi, 400px), 1fr)); }
}
@container site (min-width: 2400px) {
  .hero-title { font-size: clamp(112px, 4.4cqi, 152px); }
  .hero .lead { font-size: 22px; }
  .page-title { font-size: clamp(84px, 3.3cqi, 116px); }
  .sec-head h2 { font-size: clamp(40px, 1.4cqi, 52px); }
  .pd-title { font-size: clamp(60px, 2.2cqi, 76px); }
  .clients { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .demo-grid { grid-template-columns: minmax(0, 1fr) clamp(360px, 15cqi, 560px); }
  .demo-view { width: min(100%, (100vh - 420px) * 1.6); margin-inline: auto; }   /* the live demo and its timeline fit on a short, wide screen */
}
@media (min-width: 1940px) {
  .site { background:
    radial-gradient(max(1100px, 40vw) max(520px, 19vw) at 80% -8%, color-mix(in srgb, var(--free) 11%, transparent), transparent 62%),
    radial-gradient(max(900px, 32vw) max(640px, 24vw) at -10% 38%, color-mix(in srgb, var(--free) 5%, transparent), transparent 60%),
    var(--bg); }
  .lb-fig { max-width: min(2000px, 100%); }
  .lb-video { width: min(1920px, calc(100vw - 160px), calc((100vh - 190px) * 16 / 9)); }
}

/* ---------- AFP Collection tour (tour-afp.js): the thumbnail's launcher as real tabs ---------- */
.tour { --afp-pink: #FF2E86; }
.tour-stage { position: relative; overflow: hidden; border: 1px solid transparent; background: linear-gradient(#040d1a, #040d1a) padding-box, var(--gold-frame) border-box; }
.tour-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: var(--text); font-family: var(--f-body); line-height: 1.3;
  background:
    radial-gradient(900px 640px at 1130px 470px, color-mix(in srgb, var(--free) 7.5%, transparent), transparent 70%),
    radial-gradient(700px 600px at 330px 560px, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
    linear-gradient(180deg, #071224 0%, #040d1a 55%, #020912 100%); }
.tour-canvas::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(120, 140, 170, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 140, 170, .055) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -8px -8px;
  -webkit-mask-image: radial-gradient(1200px 900px at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(1200px 900px at 50% 45%, #000 40%, transparent 100%); }
.tour-canvas.is-wide { width: 1600px; height: 1000px; }
.tour-canvas.is-tall { width: 600px; box-sizing: border-box; padding: 30px 20px 34px; display: flex; flex-direction: column; gap: 30px; }
.is-wide .tc-launch { position: absolute; left: 722px; top: 58px; width: 808px; }
.is-wide .tc-body { position: absolute; inset: 0; pointer-events: none; }
.is-wide .tc-body > * { pointer-events: auto; }
.is-wide .tc-pslot { position: absolute; left: 92px; top: 180px; width: 560px; height: 770px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.is-wide .tc-pslot > * { pointer-events: auto; }
.is-wide .tc-art { position: absolute; left: 722px; top: 214px; width: 808px; height: 560px; }
.is-wide .tc-card { position: absolute; left: 722px; top: 806px; width: 808px; height: 144px; }
.is-tall .tc-launch { position: relative; padding-inline: 4px; }
.is-tall .tc-body { display: flex; flex-direction: column; gap: 30px; }
.is-tall .tc-pslot { min-height: 770px; display: flex; flex-direction: column; justify-content: center; padding-inline: 10px; }
.is-tall .tc-art { width: 560px; height: 388px; }
.is-tall .tc-card { min-height: 144px; }
.is-tall .tc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-tall .tc-code { font-size: 12px; }
.is-tall .tc-tag { position: static; display: inline-block; margin-bottom: 12px; }
.tc-links { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; pointer-events: none; overflow: visible; }
.is-tall .tc-links { display: none; }
.tl-gold, .tl-teal { fill: none; stroke-width: 2.4; }
.tl-gold { stroke: var(--accent); opacity: .9; } .tl-teal { stroke: var(--free); opacity: .85; }
.tl-dot-gold { fill: var(--accent); } .tl-dot-teal { fill: var(--free); }

/* Hextech frames with corner brackets, as on the thumbnail */
.tc-frame { position: relative; box-sizing: border-box; border: 2px solid transparent;
  background: linear-gradient(#0B1529, #08111f) padding-box, linear-gradient(180deg, var(--accent), var(--gold2) 55%, color-mix(in srgb, var(--gold2) 75%, #000)) border-box;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4); }
.tc-panel::before, .tc-panel::after, .tc-art::before, .tc-art::after { content: ""; position: absolute; width: 26px; height: 26px; border: 0 solid var(--accent); pointer-events: none; }
.tc-panel::before { left: -10px; top: -10px; border-left-width: 3px; border-top-width: 3px; }
.tc-panel::after { right: -10px; bottom: -10px; border-right-width: 3px; border-bottom-width: 3px; }
.tc-art::before { right: -10px; top: -10px; border-right-width: 3px; border-top-width: 3px; }
.tc-art::after { left: -10px; bottom: -10px; border-left-width: 3px; border-bottom-width: 3px; }
.tc-in { animation: tc-in .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tc-in { from { opacity: 0; transform: translateY(12px); } }

/* The launcher tiles: the tabs */
.tc-cap { margin: 0 0 12px; font: 600 12px var(--f-mono); letter-spacing: .22em; color: var(--muted); }
.tc-cap b, .tc-ph h3 b { color: var(--afp-pink); }
.tc-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tc-tile { height: 82px; margin: 0; padding: 0; cursor: pointer; border: 1.5px solid var(--gold2); border-radius: 0; background: linear-gradient(#0d1a30, #0a1428); color: var(--accent);
  display: grid; justify-items: center; align-content: center; gap: 9px; transition: border-color .15s, box-shadow .2s, background .2s; }
.tc-tile svg { width: 32px; height: 32px; }
.tc-tile span { font: 600 10.5px var(--f-mono); letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.tc-tile:hover { border-color: var(--accent); box-shadow: 0 0 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.tc-tile:hover span { color: var(--text); }
.tc-tile.on { border: 2px solid var(--accent); color: var(--free); background: linear-gradient(color-mix(in srgb, var(--free) 14%, transparent), rgba(10, 20, 40, .9));
  box-shadow: 0 0 26px -6px color-mix(in srgb, var(--free) 55%, transparent), inset 0 0 20px -8px color-mix(in srgb, var(--free) 70%, transparent); }
.tc-tile.on span { color: var(--text); }
.tour :is(.tc-tile, .tc-gold, .tc-lbtn, .tc-presets button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* The scripts' panels */
.tc-panel { padding: 30px 32px; display: flex; flex-direction: column; }
.tc-ph { display: flex; align-items: center; gap: 14px; }
.tc-ph h3 { margin: 0; font: 650 31px/1 var(--f-body); letter-spacing: -.005em; color: var(--text); }
.tc-ph h3 b { font-weight: 800; }
.tc-v { font: 500 13px var(--f-mono); color: var(--muted); letter-spacing: .04em; margin-top: 6px; }
.tc-q { margin-left: auto; width: 38px; height: 38px; box-sizing: border-box; border: 1.5px solid var(--gold2); display: grid; place-items: center; font: 600 17px var(--f-body); color: var(--accent); }
.tc-rule { height: 1px; background: linear-gradient(90deg, var(--line), rgba(70, 55, 20, .25)); margin: 22px 0 18px; }
.tc-sel { margin: 0; font: 500 14px var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.tc-sel em { font-style: normal; color: var(--text); }
.tc-grp { position: relative; border: 1px solid #3a2f16; padding: 30px 18px 18px; margin-top: 30px; background: rgba(1, 10, 19, .35); }
.tc-gt { position: absolute; left: 14px; top: -9px; padding: 0 8px; background: #0A1427; font: 600 13px/18px var(--f-mono); letter-spacing: .16em; color: var(--afp-pink); }
.tc-row { display: flex; align-items: center; gap: 12px; font: 500 20px var(--f-body); }
.tc-opts { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.tc-dim { color: #5e5a50; }
.tc-end { justify-content: flex-end; margin-top: 16px; }
.tc-p { margin: 0 0 14px; font: 500 17px/1.45 var(--f-body); color: var(--text); }
.tc-mut { color: var(--muted); }
.tc-row + .tc-p { margin: 14px 0 0; }
.tc-ck, .tc-rd { width: 24px; height: 24px; flex: none; box-sizing: border-box; border: 1.5px solid var(--gold2); background: rgba(30, 35, 40, .7); display: inline-grid; place-items: center; }
.tc-ck.on { border-color: var(--accent); background: linear-gradient(#d9bd80, #b39256); }
.tc-ck.on::after { content: ""; width: 11px; height: 6px; border-left: 3px solid #14100a; border-bottom: 3px solid #14100a; transform: translateY(-2px) rotate(-45deg); }
.tc-rd { border-radius: 50%; }
.tc-rd.on { border-color: var(--accent); }
.tc-rd.on::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.tc-drvrow { display: flex; gap: 10px; }
.tc-drv { flex: 1; height: 58px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1.5px solid var(--free);
  background: linear-gradient(color-mix(in srgb, var(--free) 13%, transparent), color-mix(in srgb, var(--free) 4%, transparent));
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--free) 70%, transparent), inset 0 0 18px -10px color-mix(in srgb, var(--free) 80%, transparent);
  font: 600 20px var(--f-body); color: color-mix(in srgb, var(--free) 45%, #fff); }
.tc-drv svg { width: 22px; height: 22px; flex: none; }
.tc-drv small { margin-left: auto; font: 500 11px var(--f-mono); letter-spacing: .1em; color: var(--free); opacity: .8; }
.tc-ok { width: 58px; height: 58px; box-sizing: border-box; border: 1.5px solid var(--gold2); background: var(--field); display: grid; place-items: center; font: 650 15px var(--f-body); letter-spacing: .08em; color: var(--accent); }
.tc-vals { margin-top: 16px; display: flex; align-items: center; gap: 10px; font: 500 19px var(--f-body); }
.tc-vals b { font: 500 20px var(--f-mono); color: var(--accent); }
.tc-field { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; box-sizing: border-box; border: 1.5px solid var(--gold2); background: var(--field); font: 500 17px var(--f-mono); color: var(--text); }
.tc-field.sm { width: 76px; justify-content: flex-end; }
.tc-field.md { width: 150px; margin-left: 6px; }
.tc-field.wide { width: 100%; height: 50px; font-size: 19px; }
.tc-field.xs { height: 34px; justify-content: flex-end; font-size: 15px; color: var(--free); }
.tc-caret { display: inline-block; width: 2px; height: 22px; margin-left: 3px; background: var(--accent); animation: tc-blink 1s steps(1) infinite; }
@keyframes tc-blink { 50% { opacity: 0; } }
.tc-dd { display: flex; gap: 10px; align-items: center; }
.tc-dd + .tc-dd { margin-top: 12px; }
.tc-drop { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 116px; height: 40px; padding: 0 12px; box-sizing: border-box;
  border: 1.5px solid var(--gold2); background: var(--field); font: 600 14px var(--f-mono); letter-spacing: .04em; color: var(--free); }
.tc-drop.wide { flex: 1; }
.tc-drop svg { width: 14px; height: 14px; color: var(--accent); }
.tc-gold { margin: 32px 0 0; height: 62px; width: 100%; display: grid; place-items: center; cursor: pointer; border-radius: 0; font: 700 19px var(--f-body); letter-spacing: .32em; text-indent: .32em; color: #1a1408;
  background: linear-gradient(180deg, #e2c88e, var(--accent) 45%, #9a7a40); border: 2px solid #f0e0b4;
  box-shadow: 0 0 34px -10px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .18); transition: filter .15s, box-shadow .2s; }
.tc-gold:hover { filter: brightness(1.08); box-shadow: 0 0 40px -8px color-mix(in srgb, var(--accent) 95%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.tc-gold:active { transform: translateY(1px); }
.tc-gold.sm { margin: 0 0 0 auto; width: 96px; height: 40px; font-size: 14px; letter-spacing: .2em; text-indent: .2em; }
.tc-kill { display: flex; gap: 12px; margin-top: 14px; }
.tc-kill span { flex: 1; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--gold2); background: rgba(30, 35, 40, .55); font: 600 13.5px var(--f-body); letter-spacing: .2em; color: var(--accent); }
.tc-status { margin-top: 30px; display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 19px var(--f-body); color: var(--free); }
.tc-status i { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--free); display: grid; place-items: center; box-shadow: 0 0 16px color-mix(in srgb, var(--free) 60%, transparent); }
.tc-status i::after { content: ""; width: 11px; height: 6px; border-left: 3px solid #04201d; border-bottom: 3px solid #04201d; transform: translateY(-2px) rotate(-45deg); }
.tc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tc-tabs span { padding: 8px 12px; font: 600 13px var(--f-mono); color: var(--muted); }
.tc-tabs .on { color: var(--text); box-shadow: inset 0 -2px 0 var(--afp-pink); }
.tc-tbl { display: grid; gap: 7px; }
.tc-th, .tc-tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 112px 72px; gap: 10px; align-items: center; }
.tc-th span { font: 600 11px var(--f-mono); letter-spacing: .14em; color: var(--muted); }
.tc-th span:nth-child(n+3) { text-align: right; }
.tc-tr { font: 500 18px var(--f-body); }
.tc-tr > span:first-child { font: 500 14px var(--f-mono); color: var(--muted); }
.tc-lgrid { display: grid; gap: 10px; }
.tc-lbtn { height: 54px; width: 100%; margin: 0; cursor: pointer; text-align: left; padding: 0 18px; border: 1.5px solid var(--gold2); border-radius: 0; background: rgba(30, 35, 40, .55);
  font: 600 18px var(--f-body); letter-spacing: .02em; color: var(--text); transition: border-color .15s; }
.tc-lbtn:hover { border-color: var(--accent); }
.tc-lbtn.on { border-color: var(--free); color: color-mix(in srgb, var(--free) 45%, #fff);
  background: linear-gradient(color-mix(in srgb, var(--free) 14%, transparent), color-mix(in srgb, var(--free) 4%, transparent)); box-shadow: 0 0 22px -8px color-mix(in srgb, var(--free) 70%, transparent); }

/* The card under the drawing: what the script writes */
.tc-card { padding: 22px 26px; }
.tc-code { margin: 0; font: 500 15px/1.62 var(--f-mono); color: var(--muted); white-space: pre; overflow: hidden; }
.tc-code b { font-weight: 500; color: var(--accent); }
.tc-code u { text-decoration: none; color: #e9d9b0; }
.tc-code em { font-style: normal; color: var(--free); }
.tc-code s { text-decoration: none; color: var(--afp-pink); }
.tc-code i.c { font-style: normal; color: #5f6f86; }
.tc-tag { position: absolute; right: 18px; top: 16px; font: 600 11px var(--f-mono); letter-spacing: .16em; color: var(--accent); border: 1px solid var(--gold2); padding: 6px 10px; background: rgba(1, 10, 19, .6); }
.tc-fx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; margin-top: 26px; }
.tc-fx div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }
.tc-fx span { font: 500 13px var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-fx b { font: 600 18px var(--f-mono); color: var(--free); }
.tc-fx i { grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, var(--free) calc(var(--f) * 100%), rgba(160, 155, 140, .25) 0); }
.is-tall .tc-fx { gap: 12px 24px; }

/* The drawings */
.tc-art > svg { display: block; width: 100%; height: 100%; }
.tc-art text { font-family: var(--f-body); }
.a-band { fill: rgba(1, 10, 19, .55); }
.a-rule { stroke: var(--line); }
.a-tick { stroke: var(--gold2); stroke-width: 1.2; }
.a-vgrid { stroke: rgba(120, 140, 170, .06); }
.a-rl { font: 10.5px var(--f-mono); fill: #6f6a5e; }
.a-cap { font: 600 11px var(--f-mono); letter-spacing: 2.2px; fill: var(--muted); }
.a-alt { fill: rgba(255, 255, 255, .012); }
.a-row { stroke: rgba(70, 55, 20, .55); }
.a-base { stroke: rgba(160, 155, 140, .13); stroke-dasharray: 2 5; }
.a-name { font: 600 19px var(--f-body); fill: #d9d2c0; }
.a-strong { font-weight: 700; fill: var(--text); }
.a-sub { font: 10px var(--f-mono); letter-spacing: 1.4px; opacity: .85; }
.a-val { font: 600 15px var(--f-mono); fill: var(--free); }
.a-sm { font-size: 15px; }
.a-mono { font: 500 11.5px var(--f-mono); fill: var(--muted); }
.a-xs { font-size: 10px; letter-spacing: 1px; }
.a-dim { fill: #6f6a5e; }
.a-fgold { fill: var(--accent); } .a-fteal { fill: var(--free); } .a-fpink { fill: var(--afp-pink); } .a-fwhite { fill: var(--text); }
.a-dimgold { fill: color-mix(in srgb, var(--accent) 75%, var(--muted)); }
.a-ring { fill: none; stroke: var(--free); stroke-width: 2; }
.a-cascade { fill: none; stroke: color-mix(in srgb, var(--free) 50%, transparent); stroke-width: 1.6; stroke-dasharray: 5 6; }
.a-gold, .a-curve { fill: none; stroke: #E2C88E; stroke-width: 3.2; stroke-linecap: round; }
.a-glow-gold, .a-curve-glow { fill: none; stroke: var(--accent); stroke-width: 7; opacity: .16; }
.a-curve { stroke-width: 3.6; }
.a-curve-glow { stroke-width: 10; opacity: .14; }
.a-teal { fill: none; stroke: var(--free); stroke-width: 2.6; stroke-linecap: round; }
.a-glow-teal { fill: none; stroke: var(--free); stroke-width: 6; opacity: .1; }
.a-thick { stroke-width: 3.4; }
.a-dash { stroke-dasharray: 6 7; }
.a-key { fill: var(--accent); stroke: #0A1428; stroke-width: 1.5; }
.a-key-hi { fill: var(--text); }
.a-phl { stroke: var(--accent); stroke-width: 1.6; opacity: .85; }
.a-phf { fill: var(--accent); }
.a-dot { stroke: #0A1428; stroke-width: 2.5; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--free) 75%, transparent)); }
.a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: a-draw 1.1s cubic-bezier(.3, .7, .2, 1) .1s forwards; }
@keyframes a-draw { to { stroke-dashoffset: 0; } }
.a-fade { animation: a-fade .9s ease .5s both; }
@keyframes a-fade { from { opacity: 0; } }
.a-head { fill: #0b1629; stroke: var(--gold2); stroke-width: 2; }
.a-headline { fill: none; stroke: color-mix(in srgb, var(--gold2) 60%, transparent); stroke-width: 1.5; stroke-dasharray: 3 5; }
.a-hair { stroke: color-mix(in srgb, var(--free) 45%, transparent); stroke-width: 1; }
.a-stop-teal { stop-color: var(--free); }
.a-note { fill: #050f1e; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; }
.a-hairline { fill: none; stroke: var(--free); stroke-width: 2.2; stroke-linecap: round; }
.a-ghost { fill: none; stroke: var(--free); stroke-width: 2; }
.a-pin { fill: var(--free); stroke: #0A1428; stroke-width: 2.5; }
.a-root { fill: var(--accent); stroke: #0A1428; stroke-width: 2.5; }
.a-ctl-link { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 6; opacity: .7; }
.a-panel, .a-chip { fill: rgba(1, 10, 19, .6); stroke: var(--gold2); stroke-width: 1.5; }
.a-ctl { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.a-ctlx { stroke: var(--accent); stroke-width: 2; }
.a-track { stroke: rgba(160, 155, 140, .25); stroke-width: 3; }
.a-trackon { stroke: var(--free); stroke-width: 3; }
.a-knob, .a-end { fill: var(--text); stroke: #0A1428; stroke-width: 2.5; }
.a-grid { stroke: rgba(120, 140, 170, .09); }
.a-frame { fill: rgba(1, 10, 19, .35); stroke: var(--line); stroke-width: 1.5; }
.a-layer { stroke: color-mix(in srgb, var(--free) 35%, transparent); stroke-width: 1.2; stroke-dasharray: 3 5; }
.a-handle { fill: none; stroke: var(--afp-pink); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .85; }
.a-drag { cursor: ns-resize; outline: none; touch-action: none; }
.a-hit { fill: transparent; }
.a-pt { fill: var(--afp-pink); stroke: #fff; stroke-width: 2; transition: filter .15s; }
.a-drag:hover .a-pt, .a-drag:focus-visible .a-pt { filter: drop-shadow(0 0 7px var(--afp-pink)); stroke-width: 3; }
.a-fld { fill: var(--field); stroke: var(--gold2); stroke-width: 1.5; }
.a-region { fill: color-mix(in srgb, var(--accent) 5%, transparent); }
.a-loop { stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 1.5; stroke-dasharray: 2 4; }
.a-brace { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.a-w1, .a-w2 { fill: none; stroke-width: 1.8; stroke-dasharray: 4 5; opacity: .6; }
.a-w1 { stroke: var(--accent); } .a-w2 { stroke: var(--afp-pink); }
.a-legend { opacity: 1; stroke-width: 3; }
.a-same { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .7; }
.a-match { fill: none; stroke: var(--accent); stroke-width: 2; }
.a-stop-gold { stop-color: var(--accent); } .a-stop-pink { stop-color: var(--afp-pink); }
.a-selrow { fill: color-mix(in srgb, var(--free) 6%, transparent); }
.a-selbar, .a-lab-teal { fill: var(--free); } .a-lab-gold { fill: var(--accent); }
.a-old { fill: var(--muted); text-decoration: line-through; }
.a-new { font-size: 19px; }
.a-arrow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-dup { fill: color-mix(in srgb, var(--afp-pink) 10%, transparent); stroke: var(--afp-pink); stroke-width: 1.2; }
.tc-presets { position: absolute; right: 14px; top: 7px; display: flex; gap: 6px; }
.tc-presets button { height: 32px; margin: 0; padding: 0 12px; cursor: pointer; border: 1.5px solid var(--gold2); border-radius: 0; background: var(--field); font: 600 11.5px var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.tc-presets button:hover { border-color: var(--accent); color: var(--text); }
.tc-presets button[aria-pressed="true"] { border-color: var(--afp-pink); color: var(--text); box-shadow: inset 0 -2px 0 var(--afp-pink); }
.is-tall .tc-presets { top: 6px; right: 10px; gap: 4px; }
.is-tall .tc-presets button { height: 30px; padding: 0 8px; font-size: 10.5px; }

/* Under the stage: what the open script does, in words */
.tour-caps { margin-top: 18px; }
.tour-cap { margin: 0; max-width: 78ch; padding-left: 16px; border-left: 2px solid var(--accent); color: var(--text); font-size: 15.5px; line-height: 1.65; }
.tour-cap[hidden] { display: none; }
.tour-link { color: var(--accent); }
.tour-link > svg:first-child { transform: none; width: 15px; height: 15px; }
/* The script's picture leads to the tour */
.pd-tour { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; position: relative; }
.pd-tour img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-tour-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--gold2);
  background: color-mix(in srgb, var(--bg) 85%, transparent); font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); transition: border-color .15s, box-shadow .2s, color .15s; }
.pd-tour-hint svg { width: 12px; height: 12px; }
.pd-tour:hover .pd-tour-hint, .pd-tour:focus-visible .pd-tour-hint { border-color: var(--accent); box-shadow: 0 0 20px -6px color-mix(in srgb, var(--accent) 70%, transparent); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .tc-in, .a-fade { animation: none; }
  .a-draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .tc-caret { animation: none; }
}