/* ============================================================
   CSS CARGO — design system
   Direction: Cargo Manifest (Brutalist Editorial x Swiss)
   Tokens first. No images. No emoji. Prefix: cg-
   ============================================================ */

:root {
  /* palette */
  --bg: #E9E7E0;          /* コンクリート床 */
  --bg2: #DEDBD2;         /* 床の影 */
  --ink: #1B1A17;         /* 倉庫の影 */
  --muted: #5A5650;       /* 銘板グレー */
  --paper: #F7F6F2;       /* 伝票紙 */
  --line: #1B1A17;        /* 罫線はインクで引く */
  --line-soft: #C9C5BA;
  --accent: #E8590C;      /* セーフティオレンジ */
  --accent-ink: #B84508;
  --kraft: #C89B6C;       /* クラフト紙 */
  --steel: #3A5A78;       /* スチールラック */
  --hazard: #F2B707;      /* ハザードイエロー */

  /* type */
  --f-body: 'M PLUS 1', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --f-display: 'Archivo Black', 'M PLUS 1', sans-serif;
  --f-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* scale 1.333 */
  --fs-0: 13px;
  --fs-1: 16px;
  --fs-2: 21px;
  --fs-3: 28px;

  --rad: 3px;             /* 貨物は角ばっている */
  --gap: 16px;
  --maxw: 1180px;
  --shadow: 4px 4px 0 rgba(27,26,23,.9);
  --shadow-soft: 0 10px 30px rgba(27,26,23,.12);
}
[data-theme="dark"] {
  --bg: #14130F;          /* 消灯後の倉庫 */
  --bg2: #1D1B16;
  --ink: #EDEBE4;
  --muted: #9B968C;
  --paper: #201E19;
  --line: #EDEBE4;
  --line-soft: #3B382F;
  --accent: #F0641A;
  --accent-ink: #FF7A33;
  --kraft: #A87F52;
  --steel: #7FA3C4;
  --shadow: 4px 4px 0 rgba(0,0,0,.7);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-1);
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--hazard); color: #1B1A17; }
:focus-visible { outline: 3px solid var(--steel); outline-offset: 2px; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.3; margin: 0; }

.cg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 18px; font-weight: 700;
}
.cg-skip:focus { left: 0; }

/* ---------------- header ---------------- */
.cg-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
}
.cg-header-in {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 20px;
}
.cg-hazard {
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--ink) 14px 28px);
}
.cg-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cg-logo-mark {
  width: 26px; height: 26px; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 8px 1fr; gap: 3px;
}
.cg-logo-mark i { background: var(--accent); }
.cg-logo-mark i:first-child { grid-column: 1 / -1; background: var(--ink); }
.cg-logo-mark i:last-child { background: var(--hazard); }
.cg-logo b {
  font-family: var(--f-display); font-size: 17px; letter-spacing: .02em; font-weight: 400;
}
.cg-logo b span { color: var(--accent); }

.cg-headsearch {
  position: relative; flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  border: 2px solid var(--line); background: var(--paper);
  padding: 7px 12px; border-radius: var(--rad);
}
.cg-headsearch svg { flex: none; opacity: .6; }
.cg-gsearch {
  border: none; background: none; font-family: inherit; font-size: 14px;
  color: var(--ink); width: 100%; padding: 0;
}
.cg-gsearch:focus { outline: none; }
.cg-kbd {
  flex: none; font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  color: var(--muted); border: 1.5px solid var(--line-soft); border-bottom-width: 3px;
  border-radius: 4px; padding: 1px 7px; line-height: 1.5;
}
@media (max-width: 900px) { .cg-kbd { display: none; } }
.cg-gsearch-pop {
  position: absolute; top: calc(100% + 6px); left: -2px; right: -2px; z-index: 60;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--rad);
  box-shadow: var(--shadow); max-height: 340px; overflow: auto;
}
.cg-gsearch-pop a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; text-decoration: none; font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.cg-gsearch-pop a:last-child { border-bottom: none; }
.cg-gsearch-pop a:hover, .cg-gsearch-pop a:focus { background: var(--bg2); }
.cg-gsearch-pop .sku { font-family: var(--f-mono); font-size: 11px; color: var(--accent); flex: none; }
.cg-gsearch-pop .cat { margin-left: auto; font-size: 11px; color: var(--muted); flex: none; }
.cg-gsearch-pop .none { padding: 12px 14px; font-size: 13px; color: var(--muted); }

.cg-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.cg-nav a {
  text-decoration: none; font-size: 14px; font-weight: 700;
  border-bottom: 2px solid transparent;
}
.cg-nav a:hover { border-bottom-color: var(--accent); }
.cg-theme {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--rad);
}
.cg-theme:hover { background: var(--bg2); }
.cg-theme .i-sun { display: none; }
[data-theme="dark"] .cg-theme .i-sun { display: block; }
[data-theme="dark"] .cg-theme .i-moon { display: none; }

/* ---------------- hero ---------------- */
.cg-hero {
  max-width: var(--maxw); margin: 0 auto; padding: 84px 24px 48px;
  position: relative;
}
.cg-hero-kick {
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; color: var(--accent); margin: 0 0 18px;
}
/* ターミナル風の点滅カーソル */
.cg-hero-kick::after {
  content: ""; display: inline-block; width: 8px; height: 13px;
  margin-left: 8px; vertical-align: -2px; background: var(--accent);
  animation: cg-cursor-blink 1.1s steps(2, jump-none) infinite;
}
@keyframes cg-cursor-blink { 50% { opacity: 0; } }
.cg-hero h1 {
  font-size: clamp(40px, 7.2vw, 88px); font-weight: 900;
  line-height: 1.14; letter-spacing: -.01em; max-width: 900px;
}
.cg-hero h1 em {
  font-style: normal; color: var(--accent);
  text-decoration: underline; text-decoration-thickness: 6px;
  text-underline-offset: 10px; text-decoration-color: var(--hazard);
}
.cg-hero-lead {
  font-size: 17px; color: var(--muted); max-width: 34em;
  margin: 28px 0 36px; font-weight: 500;
}
.cg-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.cg-btn-main {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 900; font-size: 16px; padding: 16px 30px;
  border: 2px solid var(--ink); border-radius: var(--rad);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.cg-btn-main:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(27,26,23,.9); }
.cg-btn-main:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(27,26,23,.9); }
.cg-btn-main.inv { background: var(--paper); color: var(--ink); }
.cg-btn-sub {
  display: inline-flex; align-items: center;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 16px; padding: 16px 26px;
  border: 2px solid var(--line); border-radius: var(--rad);
}
.cg-btn-sub:hover { background: var(--bg2); }

.cg-stats {
  display: flex; gap: 0; flex-wrap: wrap; margin: 56px 0 0;
  border: 2px solid var(--line); background: var(--paper);
}
.cg-stats div {
  flex: 1; min-width: 140px; padding: 20px 24px;
  border-right: 2px solid var(--line);
}
.cg-stats div:last-child { border-right: none; }
.cg-stats dt {
  font-family: var(--f-mono); font-size: 36px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.cg-stats dd { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }

/* ---------------- conveyor belt marquee ---------------- */
.cg-belt {
  overflow: hidden; background: var(--ink); padding: 14px 0;
  border-top: 2px solid var(--line); border-bottom: 2px solid var(--line);
}
.cg-belt-in { display: flex; width: max-content; animation: cg-belt-run 26s linear infinite; }
.cg-belt-row {
  display: flex; gap: 34px; padding-right: 34px; align-items: center;
  font-family: var(--f-display); font-size: 17px; color: var(--bg);
  white-space: nowrap; letter-spacing: .04em;
}
.cg-belt-row i { font-family: var(--f-mono); font-style: normal; font-weight: 700; }
@keyframes cg-belt-run { to { transform: translateX(-50%); } }
.cg-belt:hover .cg-belt-in { animation-play-state: paused; }

/* ---------------- sections ---------------- */
.cg-sec { max-width: var(--maxw); margin: 0 auto; padding: 84px 24px 20px; }
.cg-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 30px;
}
.cg-kick {
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; color: var(--accent); margin: 0 0 10px;
}
.cg-sec h2 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 900; letter-spacing: -.01em; }
.cg-sec-note { font-size: 14px; color: var(--muted); max-width: 300px; margin: 0; font-weight: 500; }

/* ---------------- filter ---------------- */
.cg-filterbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.cg-filter-wrap {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 380px;
  border: 2px solid var(--line); background: var(--paper);
  padding: 9px 12px; border-radius: var(--rad);
}
.cg-filter-wrap svg { opacity: .6; flex: none; }
.cg-filter { border: none; background: none; font-family: inherit; font-size: 14px; color: var(--ink); width: 100%; }
.cg-filter:focus { outline: none; }
.cg-favonly {
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: 13px;
  padding: 9px 14px; border-radius: var(--rad);
}
.cg-favonly.on { background: var(--hazard); color: #1B1A17; }
.cg-empty { font-size: 14px; color: var(--muted); font-weight: 700; padding: 8px 0; }

/* ---------------- bento crates ---------------- */
.cg-bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px; gap: var(--gap); grid-auto-flow: dense;
}
.cg-crate {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 18px; text-decoration: none; overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--rad);
  box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 8px var(--crate);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s;
}
.cg-crate:hover {
  transform: translate(-3px, -3px);
  box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 8px var(--crate), 6px 6px 0 rgba(27,26,23,.85);
}
.cg-crate.big { grid-column: span 2; grid-row: span 2; }
.cg-crate.wide { grid-column: span 2; }
.cg-crate-top {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 8px 0;
}
.cg-sku { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); }
.cg-crate-top .cg-sku { color: var(--crate); }
.cg-count {
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  background: var(--crate); color: #fff; padding: 2px 8px; border-radius: var(--rad);
  transition: opacity .15s;
}
/* ホバー時: 在庫数バッジが「OPEN >」に切り替わる */
.cg-crate::after {
  content: "OPEN >"; position: absolute; top: 24px; right: 24px;
  font-family: var(--f-pixel, var(--f-mono)); font-size: 8px; letter-spacing: .1em;
  color: #fff; background: var(--crate); border: 2px solid var(--ink);
  padding: 4px 8px; opacity: 0; transform: translateX(6px);
  transition: opacity .16s steps(2), transform .16s steps(2);
}
.cg-crate:hover .cg-count { opacity: 0; }
.cg-crate:hover::after { opacity: 1; transform: none; }
.cg-crate-demo {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 40px; margin: 0 8px; overflow: hidden;
}
.cg-crate-label { margin: 0 8px 8px; }
.cg-crate-label b { display: block; font-size: 19px; font-weight: 900; line-height: 1.4; }
.cg-crate.big .cg-crate-label b { font-size: 26px; }
.cg-crate-label span {
  display: block; font-size: 11.5px; color: var(--muted); font-weight: 500;
  line-height: 1.6; margin-top: 2px;
}

/* --- crate mini demos (pure CSS, one per category) --- */
[data-demo="button"]::before {
  content: "SHIP IT"; font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff; padding: 12px 26px;
  border: 2px solid var(--ink); border-radius: var(--rad);
  box-shadow: 4px 4px 0 var(--ink);
  animation: cg-demo-press 2.6s ease-in-out infinite;
}
@keyframes cg-demo-press {
  0%, 42%, 100% { transform: translate(0, 0); box-shadow: 4px 4px 0 var(--ink); }
  50%, 58% { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
}
[data-demo="heading"]::before {
  content: "見出し"; font-size: 19px; font-weight: 900; color: var(--ink);
  padding: 0 4px 6px;
  background: linear-gradient(transparent 62%, var(--hazard) 62%) no-repeat left / 0% 100%;
  animation: cg-demo-marker 3s ease-in-out infinite;
}
@keyframes cg-demo-marker {
  0%, 12% { background-size: 0% 100%; }
  45%, 85% { background-size: 100% 100%; }
  100% { background-size: 0% 100%; }
}
[data-demo="gradient"] { border-radius: var(--rad); }
[data-demo="gradient"]::before {
  content: ""; width: 84%; height: 74%; border-radius: var(--rad);
  background: linear-gradient(120deg, #E8590C, #B03A5B, #3A5A78, #F2B707, #E8590C);
  background-size: 320% 320%;
  animation: cg-demo-grad 3.5s linear infinite;
  border: 2px solid var(--ink);
}
@keyframes cg-demo-grad { to { background-position: 320% 50%; } }
[data-demo="card"]::before {
  content: ""; width: 130px; height: 62px; border-radius: var(--rad);
  background: var(--bg); border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--crate);
  animation: cg-demo-cardfloat 3.2s ease-in-out infinite;
}
@keyframes cg-demo-cardfloat {
  50% { transform: translateY(-7px) rotate(-1.5deg); box-shadow: 8px 11px 0 var(--crate); }
}
[data-demo="loader"]::before {
  content: ""; width: 32px; height: 32px; border-radius: 50%;
  border: 4px solid var(--line-soft); border-top-color: var(--accent);
  animation: cg-demo-spin .9s linear infinite;
}
@keyframes cg-demo-spin { to { transform: rotate(360deg); } }
[data-demo="background"]::before {
  content: ""; width: 90%; height: 74%; border-radius: var(--rad);
  border: 2px solid var(--ink);
  background-image: radial-gradient(var(--muted) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  animation: cg-demo-dotdrift 2.2s linear infinite;
}
@keyframes cg-demo-dotdrift { to { background-position: 12px 12px; } }
[data-demo="text-effect"]::before {
  content: "Aa あ"; font-size: 30px; font-weight: 900;
  background: linear-gradient(90deg, var(--accent), var(--hazard), var(--steel), var(--accent));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cg-demo-shim 3.2s linear infinite;
}
@keyframes cg-demo-shim { to { background-position: 220% center; } }
[data-demo="form"] { gap: 12px; }
[data-demo="form"]::before {
  content: ""; width: 46px; height: 26px; border-radius: 20px;
  background: var(--crate); border: 2px solid var(--ink); position: relative;
}
[data-demo="form"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  /* track total width 50px (46 + border 2x2), knob 20px: rest 4px, on 26px */
  margin-left: -58px;
  animation: cg-demo-tog 3.4s ease-in-out infinite;
}
@keyframes cg-demo-tog { 0%, 40% { transform: translateX(0); } 55%, 90% { transform: translateX(22px); } 100% { transform: translateX(0); } }
[data-demo="speech-bubble"]::before {
  content: "Hello!"; font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  background: var(--bg); color: var(--ink); border: 2px solid var(--ink);
  padding: 8px 16px; border-radius: 10px;
  box-shadow: 3px 3px 0 var(--crate);
  transform-origin: bottom left;
  animation: cg-demo-bubblepop 3s cubic-bezier(.3, 1.5, .5, 1) infinite;
}
@keyframes cg-demo-bubblepop {
  0% { transform: scale(0); opacity: 0; }
  14%, 82% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0); opacity: 0; }
}
[data-demo="hover"]::before {
  content: "HOVER"; font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  color: var(--ink); border: 2px solid var(--ink); padding: 10px 22px;
  border-radius: var(--rad); background: var(--bg);
  box-shadow: inset 0 0 0 0 var(--hazard);
  animation: cg-demo-fill 3s ease-in-out infinite;
}
@keyframes cg-demo-fill {
  0%, 25% { box-shadow: inset 0 0 0 0 var(--hazard); transform: translateY(0); }
  50%, 80% { box-shadow: inset 110px 0 0 0 var(--hazard); transform: translateY(-3px); }
  100% { box-shadow: inset 0 0 0 0 var(--hazard); transform: translateY(0); }
}
[data-demo="badge"] { gap: 8px; }
[data-demo="badge"]::before {
  content: "NEW"; font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; color: #fff; background: var(--crate);
  padding: 4px 12px; border-radius: 20px; border: 2px solid var(--ink);
  animation: cg-demo-badgehop 1.4s cubic-bezier(.3, 1.4, .5, 1) infinite;
}
@keyframes cg-demo-badgehop {
  0%, 45%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-6px) rotate(-4deg); }
}
[data-demo="badge"]::after {
  content: "3"; width: 22px; height: 22px; display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  color: var(--ink); background: var(--hazard); border: 2px solid var(--ink); border-radius: 50%;
  animation: cg-demo-pop 2.8s ease-in-out infinite;
}
@keyframes cg-demo-pop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.3); } }
[data-demo="list"] { flex-direction: column; gap: 7px; align-items: flex-start; }
[data-demo="list"]::before, [data-demo="list"]::after {
  font-size: 12px; font-weight: 700; color: var(--ink);
  border-left: 4px solid var(--crate); padding-left: 10px; line-height: 1.5;
  opacity: 0;
  animation: cg-demo-listin 4s ease-in-out infinite;
}
[data-demo="list"]::before { content: "01 コピーする"; }
[data-demo="list"]::after { content: "02 貼って完成"; animation-delay: .45s; }
@keyframes cg-demo-listin {
  0% { opacity: 0; transform: translateX(-14px); }
  12%, 82% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; }
}
[data-demo="divider"] { flex-direction: column; gap: 10px; }
[data-demo="divider"]::before {
  content: ""; width: 80%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ink), transparent);
  animation: cg-demo-linegrow 2.8s cubic-bezier(.4, 0, .2, 1) infinite;
}
[data-demo="divider"]::after {
  content: ""; width: 80%; height: 10px;
  background: repeating-linear-gradient(-45deg, var(--crate) 0 8px, transparent 8px 16px);
  animation: cg-demo-hazardrun 1.2s linear infinite;
}
@keyframes cg-demo-linegrow {
  0% { transform: scaleX(0); }
  40%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes cg-demo-hazardrun { to { background-position: 23px 0; } }
[data-demo="alert"]::before {
  content: "! 締切は本日23:59"; font-size: 12px; font-weight: 700;
  color: var(--crate); border: 2px dashed var(--crate);
  padding: 9px 16px; border-radius: 8px;
  animation: cg-demo-blink 2.4s ease-in-out infinite;
}
@keyframes cg-demo-blink { 50% { opacity: .55; } }
[data-demo="table"]::before {
  content: ""; width: 84%; height: 64px; border-radius: 6px;
  border: 2px solid var(--ink); overflow: hidden;
  background:
    linear-gradient(var(--crate) 0 16px, transparent 16px),
    repeating-linear-gradient(#fff 0 16px, #E3F0EE 16px 32px);
  animation: cg-demo-tablescroll 2.4s linear infinite;
}
@keyframes cg-demo-tablescroll {
  to { background-position: 0 0, 0 -32px; }
}
[data-demo="hero"] {
  position: relative; border-radius: 8px; margin: 0 8px; overflow: hidden;
  background: #0E1220;
}
[data-demo="hero"]::before, [data-demo="hero"]::after {
  content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%;
  filter: blur(30px); opacity: .75;
}
[data-demo="hero"]::before {
  background: var(--crate); top: -50px; left: -20px;
  animation: cg-demo-heroa 6s ease-in-out infinite alternate;
}
[data-demo="hero"]::after {
  background: #E8590C; bottom: -60px; right: -20px;
  animation: cg-demo-heroa 8s ease-in-out infinite alternate-reverse;
}
@keyframes cg-demo-heroa { to { transform: translate(28px, 16px) scale(1.2); } }
[data-demo="interaction"] { position: relative; }
[data-demo="interaction"]::before {
  content: "CLICK!"; font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  color: #1B1A17; background: var(--crate); padding: 12px 26px;
  border: 2px solid var(--ink); border-radius: var(--rad);
  box-shadow: 4px 4px 0 var(--ink);
}
[data-demo="interaction"]::after {
  content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--crate);
  animation: cg-demo-ripple 1.8s ease-out infinite;
}
@keyframes cg-demo-ripple {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
[data-demo="liquid"] { position: relative; }
[data-demo="liquid"]::before, [data-demo="liquid"]::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; background: var(--crate);
  filter: blur(1px);
}
[data-demo="liquid"]::before { animation: cg-demo-liquid-a 2.2s ease-in-out infinite; }
[data-demo="liquid"]::after { animation: cg-demo-liquid-b 2.2s ease-in-out infinite; }
@keyframes cg-demo-liquid-a {
  0%, 100% { transform: translateX(0) scale(1, 1); }
  50% { transform: translateX(-30px) scale(1.15, .85); }
}
@keyframes cg-demo-liquid-b {
  0%, 100% { transform: translateX(0) scale(1, 1); }
  50% { transform: translateX(30px) scale(1.15, .85); }
}
[data-demo="telop"]::before {
  content: "ポンッ!";
  font-size: 30px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 5px var(--crate);
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 rgba(27, 26, 23, .35);
  animation: cg-demo-telop 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite;
}
@keyframes cg-demo-telop {
  0% { transform: scale(0); opacity: 0; }
  12% { transform: scale(1.25); opacity: 1; }
  18%, 84% { transform: scale(1); }
  94%, 100% { transform: scale(0); opacity: 0; }
}
[data-demo="icon"]::before {
  content: ""; width: 34px; height: 34px; background: var(--crate);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: cg-demo-iconstar 2.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-demo-iconstar {
  0%, 100% { transform: rotate(0) scale(1); }
  45%, 60% { transform: rotate(144deg) scale(1.25); }
}
[data-demo="feedback"]::before {
  content: ""; width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--crate);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
  mask: radial-gradient(circle, transparent 60%, #000 62%);
  animation: cg-demo-fb-ring 2.6s ease infinite;
}
[data-demo="feedback"]::after {
  content: ""; position: absolute; width: 20px; height: 11px;
  border: solid var(--crate); border-width: 0 0 4px 4px;
  transform: rotate(-45deg) translateY(-2px);
  clip-path: inset(0 0 0 0);
  animation: cg-demo-fb-tick 2.6s ease infinite;
}
@keyframes cg-demo-fb-ring {
  0% { transform: scale(.4); opacity: 0; }
  25%, 92% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes cg-demo-fb-tick {
  0%, 30% { clip-path: inset(0 100% 0 0); }
  50%, 92% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
[data-demo="glass-shadow"] { background: linear-gradient(135deg, var(--crate), #37475C); border-radius: 6px; margin: 0 8px; }
[data-demo="glass-shadow"]::before {
  content: "Glass"; font-size: 13px; font-weight: 700; color: #fff;
  padding: 10px 22px; border-radius: 10px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  animation: cg-demo-glasssway 3.6s ease-in-out infinite;
}
@keyframes cg-demo-glasssway {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

/* ---------------- how ---------------- */
.cg-how {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  counter-reset: how;
}
.cg-how li {
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--rad);
  padding: 28px; position: relative;
  transition: transform .15s, box-shadow .15s;
}
.cg-how li:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.cg-how-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cg-how-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; color: var(--accent);
  background: var(--bg); border: 2px solid var(--line);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .5), inset -2px -2px 0 rgba(0, 0, 0, .1);
}
[data-theme="dark"] .cg-how-ic { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .08), inset -2px -2px 0 rgba(0, 0, 0, .4); }
.cg-how-no {
  font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  color: var(--accent); letter-spacing: .18em; display: block;
}
/* 工程をつなぐコンベア矢印(デスクトップのみ) */
@media (min-width: 901px) {
  .cg-how li:not(:last-child)::after {
    content: ">"; position: absolute; right: -25px; top: 50%;
    transform: translateY(-50%); z-index: 2;
    font-family: var(--f-pixel, var(--f-mono)); font-size: 14px; color: var(--accent);
    animation: cg-how-nudge 1.2s steps(2, jump-none) infinite;
  }
}
@keyframes cg-how-nudge { 50% { transform: translateY(-50%) translateX(4px); } }
.cg-how b { font-size: 21px; font-weight: 900; display: block; margin-bottom: 8px; }
.cg-how p { margin: 0; font-size: 14px; color: var(--muted); font-weight: 500; }

/* ---------------- SEO / FAQ ---------------- */
.cg-seo { max-width: 860px; }
.cg-seo h1 { font-size: clamp(28px, 4.4vw, 40px); font-weight: 900; margin-bottom: 20px; }
.cg-seo h2 { font-size: 24px; font-weight: 900; margin: 44px 0 14px; }
.cg-seo p, .cg-seo li { font-size: 15px; color: var(--muted); font-weight: 500; }
.cg-seo strong { color: var(--ink); }
.cg-faq details {
  border: 2px solid var(--line); border-radius: var(--rad);
  background: var(--paper); margin-bottom: 10px;
}
.cg-faq summary {
  cursor: pointer; font-weight: 900; font-size: 15px; padding: 16px 18px;
  list-style: none; position: relative; padding-right: 44px;
}
.cg-faq summary::-webkit-details-marker { display: none; }
.cg-faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 18px; color: var(--accent);
}
.cg-faq details[open] summary::after { content: "−"; }
.cg-faq summary:hover { background: var(--bg2); }
.cg-faq details[open] { box-shadow: inset 4px 0 0 var(--accent); }
.cg-faq details div { padding: 0 18px 16px; font-size: 14px; color: var(--muted); font-weight: 500; }
.cg-faq details[open] div { animation: cg-faq-in .25s ease; }
@keyframes cg-faq-in { from { opacity: 0; transform: translateY(-5px); } }

/* ---------------- CTA band ---------------- */
.cg-cta-band {
  background: var(--ink); color: var(--bg);
  border: 2px solid var(--line); border-radius: var(--rad);
  padding: 60px 36px; text-align: center; position: relative; overflow: hidden;
  margin-bottom: 60px;
}
.cg-cta-band::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 10px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, transparent 14px 28px);
  animation: cg-cta-hazard 1.4s linear infinite;
}
@keyframes cg-cta-hazard { to { background-position: 39.6px 0; } }
.cg-cta-kick {
  font-family: var(--f-pixel, var(--f-mono)); font-size: 10px; letter-spacing: .28em;
  color: var(--hazard); margin: 0 0 18px;
  animation: cg-cursor-blink 1.4s steps(2, jump-none) infinite;
}
/* バンド内のピクセル十字きらめき */
.cg-cta-band::after {
  content: ""; position: absolute; top: 42px; left: 12%;
  width: 6px; height: 6px; background: var(--hazard);
  box-shadow:
    0 -6px 0 var(--hazard), 0 6px 0 var(--hazard), -6px 0 0 var(--hazard), 6px 0 0 var(--hazard),
    560px 90px 0 var(--accent), 560px 84px 0 var(--accent), 560px 96px 0 var(--accent), 554px 90px 0 var(--accent), 566px 90px 0 var(--accent);
  animation: cg-px-twinkle 1.8s steps(2, jump-none) infinite;
}
@media (max-width: 900px) { .cg-cta-band::after { display: none; } }
.cg-cta-band h2 { font-size: clamp(28px, 4.4vw, 42px); font-weight: 900; margin-bottom: 14px; }
.cg-cta-band p { font-size: 15px; opacity: .85; margin: 0 0 28px; font-weight: 500; }

/* ---------------- category page head ---------------- */
.cg-pagehead {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 8px;
  position: relative;
}
/* カテゴリ色のハザードストリップで棚を区切る */
.cg-pagehead::after {
  content: ""; display: block; height: 8px; margin-top: 6px;
  background: repeating-linear-gradient(-45deg, var(--crate, var(--accent)) 0 14px, transparent 14px 28px);
  opacity: .85;
}
.cg-crumb { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 26px; display: flex; gap: 10px; }
.cg-crumb a { text-decoration: none; border-bottom: 2px solid var(--line-soft); }
.cg-crumb a:hover { border-bottom-color: var(--accent); }
.cg-pagehead h1 {
  font-size: clamp(34px, 5.6vw, 62px); font-weight: 900; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.cg-count-big {
  font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  background: var(--crate, var(--accent)); color: #fff;
  padding: 6px 12px; border-radius: var(--rad); letter-spacing: .06em;
}
.cg-pagehead-lead { font-size: 15px; color: var(--muted); max-width: 40em; margin: 16px 0 30px; font-weight: 500; }

/* ---------------- part cards (signature: cargo label) ---------------- */
.cg-partgrid-wrap { padding-top: 40px; }
.cg-partgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.cg-part {
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--rad);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s;
}
.cg-part:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.cg-part-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 2px solid var(--line);
}
.cg-barcode {
  flex: 1; height: 16px; opacity: .85;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 14px, transparent 14px 17px);
}
.cg-fav {
  cursor: pointer; border: 2px solid var(--line); background: var(--paper);
  color: var(--muted); width: 30px; height: 30px; border-radius: var(--rad);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .12s;
}
.cg-fav:hover { transform: scale(1.1); color: var(--ink); }
.cg-fav.on { background: var(--hazard); color: #1B1A17; border-color: var(--ink); }
.cg-fav.on svg { fill: currentColor; }
/* stage keeps fixed light colors: copied parts are authored for light bg,
   so the demo area works as an "inspection light" independent of theme */
.cg-stage {
  min-height: 150px; display: flex; align-items: center; justify-content: center;
  padding: 30px 22px; background: #E9E7E0; color: #1B1A17;
  background-image: radial-gradient(#C9C5BA 1px, transparent 1px);
  background-size: 16px 16px;
  border-bottom: 2px solid var(--line);
  overflow: hidden;
}
.cg-part-body { padding: 14px 14px 0; }
.cg-part-title { font-size: 16px; font-weight: 900; display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cg-part-title span { font-family: var(--f-mono); font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: .06em; }
.cg-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cg-tab {
  cursor: pointer; border: 2px solid var(--line-soft); background: none; color: var(--muted);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--rad);
}
.cg-tab.on { border-color: var(--line); background: var(--ink); color: var(--bg); }
.cg-copy {
  cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--ink); background: var(--accent); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 900;
  padding: 5px 14px; border-radius: var(--rad);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, background .2s;
}
.cg-copy:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.cg-copy:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.cg-copy.done { background: var(--steel); }
.cg-code {
  display: none; margin: 0; background: #1B1A17; color: #EDEBE4;
  border-radius: var(--rad); padding: 14px; overflow: auto;
  font-family: var(--f-mono); font-size: 12px; line-height: 1.7;
  max-height: 240px;
}
[data-theme="dark"] .cg-code { background: #000; color: #EDEBE4; }
.cg-code.on { display: block; }
.cg-part-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; margin-top: 12px;
  border-top: 2px dashed var(--line-soft);
}
.cg-wt { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.cg-stamp {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--accent); border: 2px solid var(--accent);
  padding: 3px 10px; border-radius: var(--rad);
  transform: rotate(-2deg); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.cg-stamp.oss { color: var(--steel); border-color: var(--steel); }
.cg-stamps { display: inline-flex; gap: 8px; align-items: center; }
.cg-stamp.js { color: #A07800; border-color: #D4A017; background: rgba(212, 160, 23, .12); transform: rotate(2deg); }

/* ---------------- prev / next ---------------- */
.cg-prevnext {
  max-width: var(--maxw); margin: 40px auto 0; padding: 0 24px 70px;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
}
.cg-prevnext a {
  text-decoration: none; border: 2px solid var(--line); background: var(--paper);
  border-radius: var(--rad); padding: 20px 22px;
  transition: transform .15s, box-shadow .15s;
}
.cg-prevnext a:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.cg-prevnext a:hover b { text-decoration: underline; text-decoration-color: var(--hazard); text-decoration-thickness: 4px; text-underline-offset: 5px; }
.cg-prevnext a.nx { text-align: right; }
.cg-prevnext span { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .12em; margin-bottom: 6px; }
.cg-prevnext b { font-size: 19px; font-weight: 900; }

/* ---------------- license table ---------------- */
.cg-table-wrap { overflow-x: auto; }
.cg-lictable {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  border: 2px solid var(--line); background: var(--paper);
}
.cg-lictable th, .cg-lictable td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.cg-lictable th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; background: var(--ink); color: var(--bg); }
.cg-lictable a { display: inline-flex; align-items: center; gap: 4px; }

/* ---------------- footer ---------------- */
.cg-footer { border-top: 2px solid var(--line); background: var(--bg2); margin-top: 40px; }
.cg-footer-in { max-width: var(--maxw); margin: 0 auto; padding: 44px 24px 30px; }
.cg-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.cg-footer-note { font-size: 13px; color: var(--muted); font-weight: 500; margin: 0; }
.cg-footer-links {
  list-style: none; margin: 0 0 26px; padding: 22px 0;
  border-top: 2px solid var(--line-soft); border-bottom: 2px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 18px;
}
.cg-footer-links a { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--muted); }
.cg-footer-links a:hover { color: var(--accent); }
.cg-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cg-copyright { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.cg-footer-meta { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.cg-footer-meta a { font-size: 13px; font-weight: 700; }

/* ---------------- back to top ---------------- */
.cg-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 54px; height: 54px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--ink); color: #FBF6EC; border: 2px solid var(--line);
  font-family: var(--f-pixel, var(--f-mono)); font-size: 7px; letter-spacing: .12em;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .2s steps(3), transform .2s steps(3);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .15), inset -2px -2px 0 rgba(0, 0, 0, .4), 4px 4px 0 rgba(27, 26, 23, .35);
}
.cg-top.show { opacity: 1; transform: none; pointer-events: auto; }
.cg-top:hover { color: var(--hazard); }
.cg-top:active { box-shadow: inset -2px -2px 0 rgba(255, 255, 255, .12), inset 2px 2px 0 rgba(0, 0, 0, .45); }

/* ---------------- reveal (IntersectionObserver) ---------------- */
.cg-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }
.cg-reveal.in { opacity: 1; transform: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .cg-bento { grid-template-columns: repeat(2, 1fr); }
  .cg-crate.big { grid-row: span 1; }
  .cg-how { grid-template-columns: 1fr; }
  .cg-headsearch { max-width: none; }
  .cg-stats div { min-width: 40%; border-bottom: 2px solid var(--line); }
}
@media (max-width: 560px) {
  .cg-header-in { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .cg-headsearch { order: 3; flex-basis: 100%; }
  .cg-nav { margin-left: auto; gap: 12px; }
  .cg-nav a { display: none; }
  .cg-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cg-crate { min-height: 170px; }
  .cg-crate.big, .cg-crate.wide { grid-column: auto; grid-row: auto; }
  .cg-hero { padding-top: 52px; }
  .cg-partgrid { grid-template-columns: 1fr; }
  .cg-prevnext { grid-template-columns: 1fr; }
  .cg-sec { padding-top: 60px; }
}

/* ============================================================
   PIXEL ARCADE SKIN — game-style layer on top of Cargo Manifest.
   Colors unchanged; shapes, type and bevels go 8-bit.
   Remove this whole section (and the two pixel fonts) to revert.
   ============================================================ */
:root {
  --rad: 0px;
  --f-pixel: 'Press Start 2P', 'DotGothic16', monospace;
  --shadow: 5px 5px 0 rgba(27, 26, 23, .9);
}

/* pixel type: JP display -> DotGothic16, EN labels -> Press Start 2P */
h1, h2, h3,
.cg-crate-label b, .cg-part-title, .cg-how b, .cg-prevnext b,
.cg-faq summary, .cg-hero-lead, .cg-count-big {
  font-family: 'DotGothic16', 'M PLUS 1', sans-serif;
  font-weight: 400;
}
.cg-hero h1 { letter-spacing: 0; }
.cg-kick, .cg-hero-kick { font-family: var(--f-pixel); font-size: 10px; letter-spacing: .18em; }
.cg-sku, .cg-wt, .cg-stamp { font-family: var(--f-pixel); font-size: 8.5px; }
.cg-count, .cg-count-big { letter-spacing: .04em; }
.cg-logo b { font-family: var(--f-pixel); font-size: 12px; font-weight: 400; }
.cg-theme { font-family: var(--f-pixel); font-size: 8px; }
.cg-stats dt { font-family: var(--f-pixel); font-size: 22px; padding-top: 6px; }
.cg-belt-row { font-family: var(--f-pixel); font-size: 12px; }

/* chunky bevel buttons (SHIP IT style) */
.cg-btn-main, .cg-copy, .cg-random {
  box-shadow:
    inset 3px 3px 0 rgba(255, 255, 255, .3),
    inset -3px -3px 0 rgba(0, 0, 0, .28),
    4px 4px 0 var(--ink);
}
.cg-btn-main:hover { box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .3), inset -3px -3px 0 rgba(0, 0, 0, .28), 6px 6px 0 var(--ink); }
.cg-btn-main:active, .cg-copy:active {
  box-shadow: inset -3px -3px 0 rgba(255, 255, 255, .2), inset 3px 3px 0 rgba(0, 0, 0, .3), 0 0 0 var(--ink);
}
.cg-btn-sub, .cg-favonly, .cg-theme, .cg-fav {
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .5), inset -2px -2px 0 rgba(0, 0, 0, .12);
}

/* double-frame game windows */
.cg-part, .cg-how li, .cg-stats, .cg-cta-band, .cg-feat-card {
  outline: 2px solid var(--line);
  outline-offset: 3px;
}
.cg-part { margin: 5px; }
.cg-stats, .cg-how li { margin: 5px; }
.cg-cta-band { outline-offset: 4px; margin: 5px; }
.cg-crate {
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 6px var(--crate), inset 0 0 0 10px var(--bg), inset 0 0 0 12px color-mix(in srgb, var(--crate) 45%, transparent);
}
.cg-crate:hover {
  box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 6px var(--crate), inset 0 0 0 10px var(--bg), inset 0 0 0 12px color-mix(in srgb, var(--crate) 45%, transparent), 6px 6px 0 rgba(27, 26, 23, .85);
}

/* stepped (choppy) motion for retro feel */
.cg-belt-in { animation-timing-function: steps(90); }
.cg-reveal { transition-timing-function: steps(5), steps(5); }

/* pixel sparkles in hero (plus-shaped, blink) */
.cg-hero::before, .cg-hero::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  z-index: -1;
}
.cg-hero::before {
  top: 90px;
  right: 90px;
  background: var(--accent);
  box-shadow:
    0 -7px 0 var(--accent), 0 7px 0 var(--accent), -7px 0 0 var(--accent), 7px 0 0 var(--accent),
    -120px 150px 0 var(--hazard), -120px 143px 0 var(--hazard), -120px 157px 0 var(--hazard), -127px 150px 0 var(--hazard), -113px 150px 0 var(--hazard);
  animation: cg-px-twinkle 1.6s steps(2, jump-none) infinite;
}
.cg-hero::after {
  top: 260px;
  right: 220px;
  background: var(--steel);
  box-shadow: 0 -7px 0 var(--steel), 0 7px 0 var(--steel), -7px 0 0 var(--steel), 7px 0 0 var(--steel);
  animation: cg-px-twinkle 2.2s steps(2, jump-none) infinite .8s;
}
@keyframes cg-px-twinkle {
  50% { opacity: .25; transform: scale(.8); }
}

/* pixel dash edge on footer (cheap linear gradient, not conic) */
.cg-footer {
  border-top: none;
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px),
    linear-gradient(var(--bg2), var(--bg2));
  background-size: 100% 6px, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  padding-top: 6px;
}
.cg-header { border-bottom-width: 3px; }

@media (max-width: 560px) {
  .cg-hero::before, .cg-hero::after { display: none; }
}

/* ---------------- game console sidebar ---------------- */
.cg-console { display: none; }
@media (min-width: 1440px) {
  body { padding-left: 252px; }
  .cg-console {
    display: block;
    position: fixed;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 222px;
    z-index: 60;
  }
  .cg-console-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px 16px;
    box-sizing: border-box;
    background: var(--ink);
    border-radius: 12px 12px 26px 26px;
    box-shadow:
      inset 2px 2px 0 rgba(255, 255, 255, .12),
      inset -3px -3px 0 rgba(0, 0, 0, .45),
      6px 6px 0 rgba(27, 26, 23, .35);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .cg-console-shell::-webkit-scrollbar { display: none; }

  .cg-console-screen {
    padding: 14px 10px;
    text-align: center;
    border: 2px solid rgba(251, 246, 236, .75);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
  }
  .cg-console-screen b {
    display: block;
    font-family: var(--f-pixel);
    font-size: 12px;
    font-weight: 400;
    color: #FBF6EC;
    margin-bottom: 8px;
  }
  .cg-console-screen span {
    display: block;
    font-family: var(--f-pixel);
    font-size: 6.5px;
    letter-spacing: .12em;
    color: #9B968C;
  }

  .cg-console-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px;
  }
  .cg-console-nav a {
    font-family: var(--f-pixel);
    font-size: 8.5px;
    letter-spacing: .08em;
    color: #C9C5BA;
    text-decoration: none;
    padding: 9px 10px 9px 24px;
    position: relative;
    border-radius: 4px;
  }
  .cg-console-nav a:hover { color: #FBF6EC; background: rgba(255, 255, 255, .08); }
  .cg-console-nav a.on { color: var(--hazard); }
  .cg-console-nav a.on::before {
    content: ">";
    position: absolute;
    left: 8px;
    animation: cg-console-cursor 1s steps(2, jump-none) infinite;
  }
  @keyframes cg-console-cursor { 50% { opacity: 0; } }

  .cg-console-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 2px solid rgba(251, 246, 236, .55);
    border-radius: 6px;
    background: rgba(255, 255, 255, .05);
  }
  .cg-console-stats > b {
    font-family: var(--f-pixel);
    font-size: 8px;
    letter-spacing: .3em;
    color: #9B968C;
  }
  .cg-console-stats > div {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--accent);
  }
  .cg-console-stats svg { flex: none; }
  .cg-console-stats em {
    display: block;
    font-family: var(--f-pixel);
    font-size: 11px;
    font-style: normal;
    color: #FBF6EC;
    margin-bottom: 3px;
  }
  .cg-console-stats span span,
  .cg-console-stats > div span {
    font-family: var(--f-pixel);
    font-size: 6.5px;
    letter-spacing: .1em;
    color: #9B968C;
  }

  .cg-console-pad {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 0;
  }
  .cg-console-pad .dpad {
    position: relative;
    width: 78px;
    height: 78px;
  }
  .cg-console-pad .dpad i {
    position: absolute;
    background: #33312B;
    border-radius: 5px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .12), inset -2px -2px 0 rgba(0, 0, 0, .5);
  }
  .cg-console-pad .dpad i:first-child { left: 0; right: 0; top: 26px; height: 26px; }
  .cg-console-pad .dpad i:last-of-type { top: 0; bottom: 0; left: 26px; width: 26px; }
  .cg-console-pad .dpad b {
    position: absolute;
    left: 33px;
    top: 33px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1B1A17;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .6);
  }
  .cg-console-pad .btns { display: flex; gap: 12px; }
  .cg-console-pad .btns i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .35), inset -3px -3px 0 rgba(0, 0, 0, .35);
  }
  .cg-console-pad .btns .a { background: var(--accent); transform: translateY(10px); }
  .cg-console-pad .btns .b { background: var(--hazard); }

  .cg-console-speaker {
    align-self: flex-end;
    width: 58px;
    height: 34px;
    margin: 4px 8px 0 0;
    background: repeating-linear-gradient(
      115deg,
      rgba(251, 246, 236, .4) 0 4px,
      transparent 4px 11px
    );
    border-radius: 4px;
  }
}
@media (min-width: 1440px) and (max-height: 720px) {
  .cg-console-pad, .cg-console-speaker { display: none; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01s !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------------- PRO ---------------- */
.cg-nav-pro {
  color: #B8860B;
  font-weight: 800;
  letter-spacing: .06em;
}
.cg-stamp.pro {
  background: #B8860B;
  color: #fff;
  border-color: #B8860B;
}
.cg-part-pro { border-color: #B8860B; }
.cg-stage-hero {
  /* ヒーローは全幅セクション: flex中央寄せだと内容幅に縮むのでブロックで敷き詰める。
     zoomで「デスクトップ幅を55%に縮小したビューポート」として丸ごと見せる */
  display: block;
  padding: 0;
  overflow: hidden;
  zoom: .55;
  pointer-events: none;
}
/* LP一式は1ページ分あるので、プレビューは下端フェードで途中まで見せる */
#pro-landing-suite .cg-stage-hero {
  max-height: 980px;
  -webkit-mask-image: linear-gradient(#000 88%, transparent);
  mask-image: linear-gradient(#000 88%, transparent);
}
.cg-code-zone {
  position: relative;
  min-height: 230px;
}
.cg-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  background:
    repeating-linear-gradient(-45deg, rgba(184, 134, 11, .06) 0 14px, transparent 14px 28px),
    #F4F1E8;
  border: 2px dashed #B8860B;
  border-radius: 8px;
  color: #1B1A17;
}
.cg-lock svg { color: #B8860B; width: 22px; height: 22px; }
.cg-lock b { font-size: 14px; letter-spacing: .04em; }
.cg-lock p { margin: 0; font-size: 12px; line-height: 1.8; max-width: 30em; color: #55524a; }
.cg-lock-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 22px;
  background: #1B1A17;
  color: #E9E7E0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.cg-lock-cta:hover { background: #B8860B; color: #fff; }
/* PRO棚のグループ見出し */
.cg-pro-shelf { margin-bottom: 46px; }
.cg-pro-shelfhead {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: clamp(19px, 2.6vw, 25px); font-weight: 900;
}
.cg-pro-shelfhead span {
  font-family: var(--f-pixel, var(--f-mono)); font-size: 10px; letter-spacing: .1em;
  color: #B8860B; border: 2px solid #B8860B; padding: 3px 9px; transform: rotate(-2deg);
}
.cg-pro-shelfhead em {
  font-style: normal; font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  color: var(--muted);
}
.cg-pro-shelfnote { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); font-weight: 500; max-width: 46em; }
.cg-pro-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 860px) { .cg-pro-grid { grid-template-columns: 1fr; } }
.cg-pro-card {
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 10px;
  padding: 26px 26px 24px;
  box-shadow: 6px 6px 0 rgba(27, 26, 23, .12);
}
.cg-pro-card.alt { background: #F4F1E8; }
.cg-pro-card h2 { margin: 0 0 16px; font-size: 18px; letter-spacing: .03em; }
.cg-pro-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.cg-pro-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.75; }
.cg-pro-list svg { flex: none; margin-top: 4px; color: #B8860B; }
.cg-pro-note { font-size: 12px; color: #55524a; margin: 0 0 16px; }
.cg-pro-buy {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 34px;
  background: #E8590C;
  color: #fff;
  border: 2px solid #1B1A17;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 4px 4px 0 #1B1A17;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cg-pro-buy:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1B1A17; }
.cg-pro-buy span { font-size: 11px; font-weight: 400; opacity: .9; }
.cg-pro-buy.off { background: #a5a29a; cursor: not-allowed; box-shadow: none; }
.cg-pro-legal { margin: 14px 0 0; font-size: 11.5px; color: #55524a; }
.cg-pro-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cg-pro-table th, .cg-pro-table td { padding: 9px 10px; border-bottom: 1px solid rgba(27, 26, 23, .18); text-align: center; }
.cg-pro-table td:first-child { text-align: left; }
.cg-pro-table svg { color: #B8860B; }
.cg-pro-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 2px solid #2e7d32;
  border-radius: 8px;
  background: #edf7ee;
  font-size: 13px;
}
.cg-pro-status svg { color: #2e7d32; }
.cg-pro-status span { color: #55524a; font-size: 12px; }
.cg-pro-faq dt { font-weight: 800; margin-top: 18px; }
.cg-pro-faq dd { margin: 6px 0 0; line-height: 1.9; color: #3d3a33; }
.cg-pro-welcome-status { font-size: 15px; font-weight: 700; }
.cg-legal-table th { white-space: nowrap; text-align: left; vertical-align: top; }
.cg-partgrid-pro .cg-part-pro { grid-column: 1 / -1; }
html[data-theme="dark"] .cg-lock { background: repeating-linear-gradient(-45deg, rgba(184, 134, 11, .12) 0 14px, transparent 14px 28px), #26241f; color: #E9E7E0; }
html[data-theme="dark"] .cg-lock p { color: #b5b0a4; }
html[data-theme="dark"] .cg-pro-card { background: #211f1b; color: #E9E7E0; box-shadow: 6px 6px 0 rgba(0, 0, 0, .4); }
html[data-theme="dark"] .cg-pro-card.alt { background: #26241f; }
html[data-theme="dark"] .cg-pro-note, html[data-theme="dark"] .cg-pro-legal, html[data-theme="dark"] .cg-pro-faq dd { color: #b5b0a4; }
html[data-theme="dark"] .cg-pro-status { background: #1d2b1e; }

/* ============================================================
   CSS CARGO PRO — premium live manifest
   Scoped to .cg-pro-page. The public warehouse skin is unchanged.
   ============================================================ */
.cg-pro-page{--pro-ink:#0C0A09;--pro-night:#11100E;--pro-night-2:#181612;--pro-stone:#FAFAF9;--pro-paper:#F1EFE9;--pro-gold:#CA8A04;--pro-gold-bright:#F2B707;--pro-orange:#E8590C;--pro-green:#2F855A;--pro-red:#B42318;--pro-line:rgba(12,10,9,.18);--pro-ease:cubic-bezier(.22,1,.36,1);overflow:clip;background:var(--pro-stone);color:var(--pro-ink)}
.cg-pro-page button,.cg-pro-page a{-webkit-tap-highlight-color:transparent}.cg-pro-page button{font:inherit}.cg-pro-page em{color:var(--pro-gold);font-style:normal}
.cg-pro-section{max-width:1240px;margin:0 auto;padding:clamp(88px,11vw,160px) 28px}.cg-pro-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,430px);gap:18px 56px;margin-bottom:56px}.cg-pro-section-head>p:first-child{grid-column:1/-1;margin:0;font:700 11px/1 var(--f-mono);letter-spacing:.15em;color:#625D53}.cg-pro-section-head>p:first-child span,.cg-pro-journey-kicker span,.cg-pro-manifest-card>div>p:first-child span{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border:1px solid currentColor;border-radius:50%}.cg-pro-section-head h2{font:400 clamp(34px,5.2vw,72px)/1.04 var(--f-display);letter-spacing:-.035em;text-wrap:balance}.cg-pro-section-head>p:last-child{align-self:end;margin:0;color:#625D53;font-size:15px;line-height:1.9}

/* Hero — one dominant material interaction, one ambient field. */
.cg-pro-hero{position:relative;min-height:max(720px,calc(100svh - 74px));overflow:hidden;isolation:isolate;background:var(--pro-night);color:#F7F4EA}.cg-pro-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 68% 38%,rgba(202,138,4,.17),transparent 26%),radial-gradient(circle at 10% 95%,rgba(232,89,12,.1),transparent 32%),linear-gradient(145deg,#171510 0%,#0C0A09 66%)}
.cg-pro-hero-grid,.cg-pro-final-grid{position:absolute;inset:0;z-index:-1;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 92%);mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.cg-pro-hero-orb{position:absolute;z-index:-1;width:420px;aspect-ratio:1;border-radius:50%;filter:blur(2px);opacity:.38;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(202,138,4,.2) 22%,rgba(232,89,12,.06) 52%,transparent 68%);pointer-events:none}.cg-pro-hero-orb.a{top:-220px;right:12%}.cg-pro-hero-orb.b{bottom:-290px;left:-130px;transform:scale(1.25)}
.cg-pro-hero-inner{position:relative;width:min(1320px,100%);min-height:inherit;margin:0 auto;padding:32px 36px 76px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(430px,.9fr);grid-template-rows:auto 1fr;gap:22px 70px;align-items:center}.cg-pro-crumb{grid-column:1/-1;display:flex;align-items:center;gap:10px;font:700 10px/1 var(--f-mono);letter-spacing:.14em;color:#A8A092}.cg-pro-crumb a{text-decoration:none}.cg-pro-crumb a:hover{color:#fff}.cg-pro-crumb b{color:var(--pro-gold-bright)}
.cg-pro-eyebrow{margin:0 0 24px;font:700 10px/1.4 var(--f-mono);letter-spacing:.16em;color:#A8A092}.cg-pro-eyebrow span{display:inline-block;margin-right:10px;padding:7px 9px;border:1px solid rgba(242,183,7,.65);color:var(--pro-gold-bright)}.cg-pro-hero-copy h1{margin:0;font:400 clamp(50px,7vw,98px)/.93 var(--f-display);letter-spacing:-.055em;text-wrap:balance}.cg-pro-hero-copy h1 span{display:block;margin-bottom:11px;font:700 15px/1.2 var(--f-body);letter-spacing:.08em;color:#C9C2B3}.cg-pro-hero-copy h1 em{color:transparent;-webkit-text-stroke:1.5px var(--pro-gold-bright);text-shadow:0 0 35px rgba(242,183,7,.18)}
.cg-pro-hero-lead{max-width:680px;margin:28px 0 0;color:#C9C2B3;font-size:clamp(14px,1.35vw,17px);line-height:1.95}.cg-pro-hero-facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px;padding:14px 0;border-block:1px solid rgba(255,255,255,.13)}.cg-pro-hero-facts span{display:flex;align-items:baseline;gap:8px;font:700 9px/1 var(--f-mono);letter-spacing:.1em;color:#938B7D}.cg-pro-hero-facts b{color:#F7F4EA;font-size:17px}.cg-pro-hero-actions{display:flex;align-items:center;gap:18px;margin-top:28px}.cg-pro-hero-note{margin:16px 0 0;color:#8D8578;font-size:11px}.cg-pro-ghost-link{display:inline-flex;align-items:center;gap:9px;min-height:46px;color:#E8E2D7;font-size:13px;font-weight:700;text-decoration:none}.cg-pro-ghost-link svg{transition:transform .18s var(--pro-ease)}.cg-pro-ghost-link:hover svg{transform:translateX(4px)}
.cg-pro-gel-buy{--mx:50%;--my:18%;position:relative;isolation:isolate;min-width:250px;min-height:66px;padding:11px 18px 11px 22px;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;overflow:hidden;color:#241701;text-decoration:none;border:1px solid rgba(255,255,255,.78);border-radius:22px;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.96) 0 5%,rgba(255,244,185,.55) 20%,transparent 42%),linear-gradient(150deg,#FFF7C7 0%,#F2B707 35%,#CA8A04 72%,#8B5D03 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.92),inset 0 -8px 18px rgba(91,48,0,.23),0 12px 34px rgba(202,138,4,.22),0 4px 0 #704700;transition:transform 140ms var(--pro-ease),box-shadow 140ms var(--pro-ease),filter 180ms ease;cursor:pointer}.cg-pro-gel-buy::before{content:"";position:absolute;inset:4px 7px auto;height:43%;z-index:-1;border-radius:16px 16px 48% 48%;background:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.05));filter:blur(.4px)}.cg-pro-gel-buy::after{content:"";position:absolute;inset:auto 13% 7px;height:10px;z-index:-1;border-radius:50%;background:rgba(91,48,0,.25);filter:blur(7px)}
.cg-pro-gel-buy:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:inset 0 2px 1px rgba(255,255,255,.96),inset 0 -8px 18px rgba(91,48,0,.2),0 17px 38px rgba(202,138,4,.25),0 5px 0 #704700}.cg-pro-gel-buy:active{transform:translateY(3px) scaleY(.96);box-shadow:inset 0 2px 6px rgba(255,255,255,.65),inset 0 -4px 13px rgba(91,48,0,.22),0 5px 14px rgba(202,138,4,.16),0 1px 0 #704700}.cg-pro-gel-buy:focus-visible{outline:3px solid #fff;outline-offset:4px}.cg-pro-gel-buy.is-off{filter:grayscale(.8);cursor:not-allowed}.cg-pro-gel-shine{position:absolute;top:-40%;left:-22%;width:25%;height:180%;transform:rotate(19deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);pointer-events:none}.cg-pro-gel-copy{display:flex;flex-direction:column;gap:2px}.cg-pro-gel-copy b{font-size:15px;line-height:1.2}.cg-pro-gel-copy small{font-size:9px;font-weight:700;opacity:.68}.cg-pro-gel-buy>svg{flex:none}
.cg-pro-live{align-self:center;width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:28px 7px 28px 7px;background:rgba(255,255,255,.045);box-shadow:0 35px 100px rgba(0,0,0,.38);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:perspective(1000px) rotateY(-2.5deg)}.cg-pro-live-rail,.cg-pro-live-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;font:700 8px/1 var(--f-mono);letter-spacing:.12em;color:#9C9486}.cg-pro-live-rail{border-bottom:1px solid rgba(255,255,255,.12)}.cg-pro-live-rail b{color:var(--pro-gold-bright)}.cg-pro-live-footer{border-top:1px solid rgba(255,255,255,.12)}
.cg-pro-live-stage{--lx:54%;--ly:30%;position:relative;min-height:430px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at var(--lx) var(--ly),rgba(242,183,7,.18),transparent 25%),linear-gradient(135deg,#17140E,#0B0A08)}.cg-pro-live-stage::before{content:"";position:absolute;inset:0;opacity:.28;background:repeating-linear-gradient(90deg,transparent 0 49px,rgba(255,255,255,.06) 50px),repeating-linear-gradient(0deg,transparent 0 49px,rgba(255,255,255,.06) 50px)}.cg-pro-live-ring{position:absolute;width:310px;aspect-ratio:1;border:1px solid rgba(242,183,7,.22);border-radius:50%;box-shadow:0 0 0 48px rgba(242,183,7,.025),0 0 0 96px rgba(242,183,7,.018)}
.cg-pro-live-crate{position:absolute;top:54px;width:190px;height:96px;padding:13px;display:grid;align-content:center;border:1px solid rgba(255,255,255,.2);background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.015));transform:translateY(-8px) rotate(-2deg)}.cg-pro-live-crate::before{content:"";position:absolute;inset:-9px 26px auto;height:18px;background:rgba(200,155,108,.52);transform:rotate(1deg)}.cg-pro-live-crate span,.cg-pro-live-crate i{font:700 7px/1.4 var(--f-mono);letter-spacing:.12em;color:#958E82}.cg-pro-live-crate b{font:400 33px/1 var(--f-display);color:#E9E3D6}.cg-pro-live-crate i{font-style:normal}
.cg-pro-demo-gel{--press:0;--gx:50%;--gy:20%;position:relative;z-index:2;min-width:280px;min-height:78px;margin-top:130px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;border:1px solid rgba(255,255,255,.82);border-radius:27px;color:#2B1B01;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.98) 0 4%,rgba(255,245,190,.62) 17%,transparent 42%),linear-gradient(145deg,#FFF1A8,#F2B707 42%,#B67603 100%);box-shadow:inset 0 3px 2px rgba(255,255,255,.94),inset 0 -12px 20px rgba(78,43,0,.28),0 calc(15px - 9px * var(--press)) 27px rgba(0,0,0,.48),0 calc(5px - 4px * var(--press)) 0 #714600;transform:translateY(calc(4px * var(--press))) scaleY(calc(1 - .04 * var(--press)));transform-origin:center bottom;transition:transform 110ms var(--pro-ease),box-shadow 110ms var(--pro-ease);cursor:pointer}.cg-pro-demo-gel::before{content:"";position:absolute;inset:4px 9px auto;height:38%;border-radius:20px 20px 50% 50%;background:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.04))}.cg-pro-demo-gel:hover{filter:saturate(1.08)}.cg-pro-demo-gel:active,.cg-pro-demo-gel.is-pressed{--press:1}.cg-pro-demo-gel:focus-visible{outline:3px solid #fff;outline-offset:5px}.cg-pro-demo-gel-label{position:relative;z-index:2;font:700 11px/1 var(--f-mono);letter-spacing:.1em}.cg-pro-demo-gel svg{position:relative;z-index:2;width:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.cg-pro-live-status{position:absolute;bottom:22px;margin:0;font:700 8px/1 var(--f-mono);letter-spacing:.08em;color:#8F887C}
.cg-pro-scroll-cue{position:absolute;bottom:24px;left:36px;display:flex;align-items:center;gap:12px;color:#91897C;font:700 8px/1 var(--f-mono);letter-spacing:.12em;text-decoration:none}.cg-pro-scroll-cue i{width:1px;height:34px;overflow:hidden;background:rgba(255,255,255,.18)}.cg-pro-scroll-cue i::before{content:"";display:block;width:100%;height:45%;background:var(--pro-gold-bright);animation:cg-pro-cue 1.8s var(--pro-ease) infinite}@keyframes cg-pro-cue{0%{transform:translateY(-120%)}55%,100%{transform:translateY(240%)}}

/* Free / PRO live comparison. */
.cg-pro-compare{padding-top:clamp(100px,12vw,170px)}.cg-pro-compare-lab{display:grid;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);align-items:stretch}.cg-pro-compare-card{min-width:0;overflow:hidden;border:1px solid var(--pro-line);background:#F0EEE8}.cg-pro-compare-card.is-free{border-radius:5px 24px 5px 5px}.cg-pro-compare-card.is-pro{border-color:rgba(202,138,4,.65);border-radius:24px 5px 5px 5px;background:var(--pro-night);color:#F7F4EA;box-shadow:0 28px 80px rgba(12,10,9,.16)}
.cg-pro-compare-card header{min-height:88px;padding:18px 22px;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid currentColor}.cg-pro-compare-card header span{font:700 8px/1 var(--f-mono);letter-spacing:.14em;opacity:.58}.cg-pro-compare-card header b{margin-top:9px;font-size:18px}.cg-pro-compare-stage{min-height:270px;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 60%)}
.cg-pro-free-button{min-height:48px;padding:0 24px;border:1px solid rgba(12,10,9,.25);border-radius:12px;background:rgba(255,255,255,.42);box-shadow:0 8px 22px rgba(12,10,9,.08);color:#413D35;cursor:pointer;transition:background .18s ease}.cg-pro-free-button:hover{background:rgba(255,255,255,.72)}.cg-pro-free-button:focus-visible{outline:3px solid var(--pro-gold);outline-offset:3px}
.cg-pro-compare-gel{position:relative;min-width:210px;min-height:60px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:11px;overflow:hidden;border:1px solid rgba(255,255,255,.76);border-radius:20px;color:#281A02;background:linear-gradient(145deg,#FFF2A8,#F2B707 45%,#A96C02);box-shadow:inset 0 2px 1px #fff,inset 0 -8px 14px rgba(74,40,0,.25),0 10px 22px rgba(0,0,0,.38),0 4px 0 #684200;cursor:pointer;transition:transform .12s var(--pro-ease),box-shadow .12s var(--pro-ease)}.cg-pro-compare-gel::before{content:"";position:absolute;inset:3px 7px auto;height:40%;border-radius:15px 15px 50% 50%;background:linear-gradient(rgba(255,255,255,.74),transparent)}.cg-pro-compare-gel:active{transform:translateY(3px) scaleY(.96);box-shadow:inset 0 2px 5px rgba(255,255,255,.64),inset 0 -4px 10px rgba(74,40,0,.2),0 3px 10px rgba(0,0,0,.28),0 1px 0 #684200}.cg-pro-compare-gel:focus-visible{outline:3px solid #fff;outline-offset:4px}.cg-pro-compare-gel.is-loading{color:transparent;pointer-events:none}.cg-pro-compare-gel.is-loading .cg-pro-state-icon{width:17px;height:17px;border:2px solid rgba(40,26,2,.28);border-top-color:#281A02;border-radius:50%;animation:cg-pro-spin .7s linear infinite}.cg-pro-compare-gel.is-success{background:linear-gradient(145deg,#D7F6DE,#64C27B 48%,#257543);color:#082A13}.cg-pro-compare-gel.is-success .cg-pro-state-icon::before{content:"✓";font-weight:900}
.cg-pro-compare-card ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid currentColor}.cg-pro-compare-card li{min-height:76px;padding:13px;display:flex;flex-direction:column;justify-content:center;gap:5px;border-right:1px solid currentColor;font-size:11px}.cg-pro-compare-card li:last-child{border-right:0}.cg-pro-compare-card li span{font:700 16px/1 var(--f-mono);color:var(--pro-gold)}.cg-pro-compare-mark{display:grid;place-items:center}.cg-pro-compare-mark span{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--pro-line);border-radius:50%;font:700 10px/1 var(--f-mono)}.cg-pro-proof-strip{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}.cg-pro-proof-strip span{padding:6px 9px;border:1px solid var(--pro-line);font:700 8px/1 var(--f-mono);letter-spacing:.09em;color:#615C53}

/* Scroll story: scroll maps to chapter and local progress; no scroll locking. */
.cg-pro-journey{--journey-p:0;--scene-p:0;position:relative;height:285vh;min-height:1900px;background:var(--pro-night);color:#F7F4EA}.cg-pro-journey-sticky{position:sticky;top:72px;width:min(1320px,100%);height:calc(100svh - 72px);min-height:650px;margin:0 auto;padding:46px 36px;display:grid;grid-template-columns:minmax(300px,.72fr) minmax(480px,1.28fr);gap:54px;align-items:center;overflow:hidden}.cg-pro-journey-copy h2{margin:18px 0 34px;font:400 clamp(38px,5vw,68px)/1.02 var(--f-display);letter-spacing:-.04em}.cg-pro-journey-kicker{margin:0;font:700 9px/1 var(--f-mono);letter-spacing:.13em;color:#A29A8D}
.cg-pro-journey-steps{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.15)}.cg-pro-journey-steps li{border-bottom:1px solid rgba(255,255,255,.15);opacity:.38;transition:opacity .35s ease}.cg-pro-journey-steps li.is-active{opacity:1}.cg-pro-journey-steps button{width:100%;min-height:72px;padding:12px 0;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;text-align:left;border:0;background:none;color:inherit;cursor:pointer}.cg-pro-journey-steps button:focus-visible{outline:3px solid var(--pro-gold-bright);outline-offset:3px}.cg-pro-journey-steps span{grid-row:1/3;font:700 10px/1.5 var(--f-mono);color:var(--pro-gold-bright)}.cg-pro-journey-steps b{font-size:14px}.cg-pro-journey-steps small{margin-top:4px;color:#A29A8D;font-size:10px}.cg-pro-journey-progress{width:100%;height:2px;margin-top:24px;background:rgba(255,255,255,.16)}.cg-pro-journey-progress i{display:block;width:calc(var(--journey-p) * 100%);height:100%;background:var(--pro-gold-bright)}.cg-pro-journey-status{margin:12px 0 0;font:700 8px/1 var(--f-mono);letter-spacing:.1em;color:#8D8578}.cg-pro-journey-status span{color:#fff}
.cg-pro-journey-visual{position:relative;min-height:570px;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:5px 32px 5px 32px;background:radial-gradient(circle at 50% 44%,rgba(202,138,4,.16),transparent 34%),#0B0A08;box-shadow:0 35px 100px rgba(0,0,0,.42)}.cg-pro-journey-visual::before{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:42px 42px}.cg-pro-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .45s ease,transform .6s var(--pro-ease)}.cg-pro-scene.is-active{opacity:1;transform:scale(1)}.cg-pro-scene-caption{position:absolute;inset:auto 18px 16px;margin:0;display:flex;justify-content:space-between;gap:10px;font:700 7px/1 var(--f-mono);letter-spacing:.09em;color:#716A5F}
.cg-pro-cargo-box{position:relative;width:min(420px,72%);height:270px;perspective:900px}.cg-pro-cargo-body,.cg-pro-cargo-lid{position:absolute;left:10%;width:80%;border:2px solid #1A1307;background:linear-gradient(120deg,#C99B68,#A97643);box-shadow:inset 0 0 0 9px rgba(86,51,20,.16),0 28px 50px rgba(0,0,0,.38)}.cg-pro-cargo-body{bottom:20px;height:180px;padding:34px;display:grid;align-content:center}.cg-pro-cargo-body b{font:400 65px/1 var(--f-display);color:#1B150D}.cg-pro-cargo-body span,.cg-pro-cargo-body i{font:700 8px/1.6 var(--f-mono);letter-spacing:.1em;color:#332313}.cg-pro-cargo-body i{font-style:normal}.cg-pro-cargo-lid{top:27px;height:58px;transform-origin:50% 100%;transform:translateY(calc(-54px * var(--scene-p))) rotateX(calc(-72deg * var(--scene-p)))}.cg-pro-cargo-tape{position:absolute;z-index:4;top:41px;left:30%;width:40%;padding:5px;text-align:center;background:#E8D4AF;color:#4B321A;font:700 7px/1 var(--f-mono);transform:translateY(calc(-65px * var(--scene-p))) rotate(calc(-4deg * var(--scene-p)))}
.cg-pro-cargo-card{position:absolute;left:50%;bottom:70px;width:150px;height:86px;padding:14px;display:flex;justify-content:space-between;border:1px solid rgba(255,255,255,.3);border-radius:3px 15px 3px 3px;background:#F7F4EA;color:#17130D;box-shadow:0 14px 32px rgba(0,0,0,.3);opacity:calc(var(--scene-p) * 2)}.cg-pro-cargo-card b{font:400 15px/1 var(--f-display)}.cg-pro-cargo-card span{font:700 9px/1 var(--f-mono);color:var(--pro-gold)}.cg-pro-cargo-card.c1{transform:translate(calc(-50% - 150px * var(--scene-p)),calc(-112px * var(--scene-p))) rotate(calc(-8deg * var(--scene-p)))}.cg-pro-cargo-card.c2{transform:translate(-50%,calc(-170px * var(--scene-p)))}.cg-pro-cargo-card.c3{transform:translate(calc(-50% + 150px * var(--scene-p)),calc(-112px * var(--scene-p))) rotate(calc(8deg * var(--scene-p)))}
.cg-pro-panorama{position:relative;width:78%;height:390px;perspective:1100px}.cg-pro-depth-layer{position:absolute;inset:14%;padding:25px;border:1px solid rgba(255,255,255,.28);border-radius:26px 6px 26px 6px;background:rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px rgba(255,255,255,.28),0 20px 60px rgba(0,0,0,.28);transform-style:preserve-3d}.cg-pro-depth-layer.back{transform:translate3d(calc(-70px * var(--scene-p)),calc(-48px * var(--scene-p)),calc(-130px * var(--scene-p))) rotate(-3deg);color:#6F695F}.cg-pro-depth-layer.mid{display:flex;flex-direction:column;justify-content:flex-end;transform:translate3d(0,calc(-10px * var(--scene-p)),0);background:linear-gradient(145deg,rgba(242,183,7,.16),rgba(255,255,255,.04))}.cg-pro-depth-layer.mid b{font:400 66px/1 var(--f-display);color:#F7F4EA}.cg-pro-depth-layer.mid span,.cg-pro-depth-layer.back span,.cg-pro-depth-layer.front span{font:700 8px/1 var(--f-mono);letter-spacing:.12em}.cg-pro-depth-layer.front{transform:translate3d(calc(78px * var(--scene-p)),calc(50px * var(--scene-p)),calc(160px * var(--scene-p))) rotate(3deg)}.cg-pro-depth-layer.front i{display:block;width:64%;height:7px;margin-top:19px;border-radius:9px;background:rgba(255,255,255,.18)}.cg-pro-depth-layer.front i:nth-of-type(2){width:82%}.cg-pro-depth-layer.front i:nth-of-type(3){width:45%;background:var(--pro-gold-bright)}
.cg-pro-manifest{position:relative;width:85%;height:380px}.cg-pro-manifest p{position:absolute;left:0;top:14px;margin:0;font:700 12px/1 var(--f-mono);color:#8D8578}.cg-pro-manifest p b{display:block;margin-top:7px;font:400 52px/1 var(--f-display);color:#F7F4EA}.cg-pro-manifest p.end{left:auto;right:0;top:80px;text-align:right}.cg-pro-manifest p.end b{color:var(--pro-gold-bright)}.cg-pro-manifest svg{position:absolute;inset:58px 0 auto;width:100%;fill:none;overflow:visible}.cg-pro-manifest path{stroke:var(--pro-gold-bright);stroke-width:2.5;stroke-dasharray:780;stroke-dashoffset:calc(780 * (1 - var(--scene-p)))}.cg-pro-manifest circle{fill:#F7F4EA;opacity:var(--scene-p)}.cg-pro-manifest>div{position:absolute;inset:auto 0 0;padding:15px;display:flex;align-items:center;gap:15px;border-block:1px solid rgba(255,255,255,.18);font:700 7px/1 var(--f-mono);letter-spacing:.08em;color:#8D8578}.cg-pro-manifest strong{margin-left:auto;padding:8px 10px;border:2px solid var(--pro-gold-bright);color:var(--pro-gold-bright);transform:rotate(-3deg) scale(calc(.75 + .25 * var(--scene-p)));opacity:var(--scene-p)}

/* Gel control laboratory. */
.cg-pro-controls{max-width:none;padding-inline:max(28px,calc((100vw - 1184px)/2));background:var(--pro-paper)}.cg-pro-control-lab{--gel-alpha:.72;--gx:50%;--gy:22%;overflow:hidden;border:1px solid rgba(12,10,9,.22);border-radius:8px 38px 8px 8px;background:radial-gradient(circle at var(--gx) var(--gy),rgba(242,183,7,calc(var(--gel-alpha) * .18)),transparent 24%),#16130E;color:#F7F4EA;box-shadow:0 32px 90px rgba(12,10,9,.16)}.cg-pro-control-toolbar,.cg-pro-control-lab>footer{min-height:50px;padding:10px 16px;display:flex;align-items:center;gap:18px;border-bottom:1px solid rgba(255,255,255,.12);font:700 8px/1 var(--f-mono);letter-spacing:.1em;color:#8F887C}.cg-pro-control-toolbar label{margin-left:auto;display:flex;align-items:center;gap:10px}.cg-pro-control-toolbar input{width:130px;accent-color:var(--pro-gold-bright)}.cg-pro-control-value{width:35px;color:var(--pro-gold-bright)}
.cg-pro-control-grid{display:grid;grid-template-columns:repeat(5,1fr)}.cg-pro-control-grid article{min-height:180px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.035),transparent 35%)}.cg-pro-control-grid article:nth-child(5n){border-right:0}.cg-pro-control-grid article>span{align-self:flex-start;font:700 7px/1 var(--f-mono);letter-spacing:.1em;color:#817A6E}
.cg-pro-mini-gel{position:relative;isolation:isolate;min-width:128px;min-height:52px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;border:1px solid rgba(255,255,255,.76);border-radius:18px;color:#2A1B02;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,calc(var(--gel-alpha) * .9)) 0 5%,transparent 37%),linear-gradient(145deg,#FFF1A8,#F2B707 43%,#A96C02);box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 -8px 13px rgba(73,40,0,.25),0 9px 18px rgba(0,0,0,.34),0 3px 0 #674000;font-size:12px;font-weight:800;cursor:pointer;transition:transform .11s var(--pro-ease),box-shadow .11s var(--pro-ease)}.cg-pro-mini-gel::before{content:"";position:absolute;inset:3px 6px auto;z-index:-1;height:38%;border-radius:13px 13px 50% 50%;background:linear-gradient(rgba(255,255,255,.66),transparent)}.cg-pro-mini-gel:active{transform:translateY(3px) scaleY(.95);box-shadow:inset 0 2px 5px rgba(255,255,255,.6),inset 0 -4px 9px rgba(73,40,0,.2),0 3px 8px rgba(0,0,0,.3),0 1px 0 #674000}.cg-pro-mini-gel:focus-visible,.cg-pro-gel-toggle:focus-visible,.cg-pro-gel-segment button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.cg-pro-mini-gel.dark{color:#F4EBD9;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.32),transparent 32%),linear-gradient(145deg,#4A4338,#17130E 70%);box-shadow:inset 0 2px 1px rgba(255,255,255,.38),inset 0 -7px 13px #000,0 9px 18px rgba(0,0,0,.4),0 3px 0 #000}.cg-pro-mini-gel.clear{color:#F7F4EA;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.42),transparent 35%),rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 2px 1px rgba(255,255,255,.44),inset 0 -7px 12px rgba(0,0,0,.18),0 9px 18px rgba(0,0,0,.32),0 3px 0 rgba(255,255,255,.17)}.cg-pro-mini-gel.pearl{background:radial-gradient(circle at var(--gx) var(--gy),#fff,transparent 28%),linear-gradient(145deg,#FFFDF7,#D9D3C7 72%);color:#2F2B24;box-shadow:inset 0 2px 1px #fff,inset 0 -8px 14px #B9B1A1,0 9px 18px rgba(0,0,0,.3),0 3px 0 #8F887B}.cg-pro-mini-gel.icon{min-width:52px;width:52px;padding:0;border-radius:50%}
.cg-pro-mini-gel.success{color:#0B2D16;background:linear-gradient(145deg,#E0F7E5,#5EC878 50%,#257543);box-shadow:inset 0 2px 1px #fff,inset 0 -7px 12px rgba(5,61,27,.3),0 9px 18px rgba(0,0,0,.32),0 3px 0 #174C2A}.cg-pro-mini-gel.error{color:#3D0905;background:linear-gradient(145deg,#FFDCD7,#F87B6D 50%,#B42318);box-shadow:inset 0 2px 1px #fff,inset 0 -7px 12px rgba(80,7,3,.28),0 9px 18px rgba(0,0,0,.32),0 3px 0 #76160F}.cg-pro-mini-gel.error b{display:grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:50%}.cg-pro-mini-gel.loading i{display:none;width:15px;height:15px;border:2px solid rgba(42,27,2,.22);border-top-color:currentColor;border-radius:50%}.cg-pro-mini-gel.loading.is-loading i{display:block;animation:cg-pro-spin .7s linear infinite}.cg-pro-mini-gel.loading.is-loading b{font-size:0}.cg-pro-mini-gel.loading.is-loading b::after{content:"Loading";font-size:12px}@keyframes cg-pro-spin{to{transform:rotate(1turn)}}
.cg-pro-gel-toggle{min-width:132px;min-height:52px;padding:6px 13px 6px 8px;display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.62);border-radius:18px;background:linear-gradient(145deg,#4A4338,#17130E);color:#F7F4EA;box-shadow:inset 0 2px 1px rgba(255,255,255,.28),inset 0 -6px 12px #000,0 8px 16px rgba(0,0,0,.35);cursor:pointer}.cg-pro-gel-toggle i{position:relative;width:45px;height:34px;border-radius:14px;background:rgba(255,255,255,.12);box-shadow:inset 0 3px 7px rgba(0,0,0,.45)}.cg-pro-gel-toggle i::before{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:11px;background:linear-gradient(145deg,#FFF2A8,#F2B707 55%,#A96C02);box-shadow:inset 0 2px 1px #fff,0 4px 8px rgba(0,0,0,.4);transform:translateX(11px);transition:transform .22s var(--pro-ease)}.cg-pro-gel-toggle[aria-checked="false"] i::before{transform:translateX(0);filter:grayscale(1)}.cg-pro-gel-toggle b{font-size:10px}
.cg-pro-gel-segment{--seg:0;position:relative;padding:4px;display:grid;grid-template-columns:repeat(3,35px);border:1px solid rgba(255,255,255,.4);border-radius:16px;background:#211D16;box-shadow:inset 0 3px 8px #000,0 7px 14px rgba(0,0,0,.3)}.cg-pro-gel-segment button{position:relative;z-index:2;min-height:38px;border:0;background:none;color:#8D8578;font:700 9px/1 var(--f-mono);cursor:pointer}.cg-pro-gel-segment button[aria-pressed="true"]{color:#281A02}.cg-pro-gel-segment i{position:absolute;z-index:1;top:4px;left:4px;width:35px;height:38px;border-radius:12px;background:linear-gradient(145deg,#FFF2A8,#F2B707 55%,#A96C02);box-shadow:inset 0 2px 1px #fff,0 4px 8px rgba(0,0,0,.38);transform:translateX(calc(var(--seg) * 35px));transition:transform .25s var(--pro-ease)}.cg-pro-control-lab>footer{justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);border-bottom:0}

/* Practical kit. */
.cg-pro-practical-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:54px;align-items:center}.cg-pro-practical-preview{position:relative;overflow:hidden;border:1px solid var(--pro-line);border-radius:7px 34px 7px 7px;background:#D9D5CB;box-shadow:0 26px 75px rgba(12,10,9,.15)}.cg-pro-browser-bar{height:42px;padding:0 14px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--pro-line);background:#F0EEE8}.cg-pro-browser-bar i{width:7px;height:7px;border-radius:50%;background:#918B80}.cg-pro-browser-bar span{margin-left:10px;padding:5px 13px;border-radius:4px;background:#E1DED6;font:700 7px/1 var(--f-mono);color:#777168}
.cg-pro-mini-page{min-height:510px;padding:30px;background:#FCFBF8;color:#17130E}.cg-pro-mini-page nav{display:flex;align-items:center;gap:14px}.cg-pro-mini-page nav b{margin-right:auto;font:400 14px/1 var(--f-display)}.cg-pro-mini-page nav span{width:38px;height:5px;border-radius:6px;background:#C9C5BC}.cg-pro-mini-page button{min-height:32px;border:0;border-radius:9px;background:#17130E;color:#fff;font-size:8px}.cg-pro-mini-page nav button{padding:0 13px}.cg-pro-mini-page header{max-width:480px;margin:70px auto 55px;text-align:center}.cg-pro-mini-page header small{font:700 7px/1 var(--f-mono);letter-spacing:.12em;color:var(--pro-gold)}.cg-pro-mini-page header h3{margin:13px 0 18px;font:400 clamp(35px,5vw,58px)/.96 var(--f-display);letter-spacing:-.04em}.cg-pro-mini-page header p{width:70%;height:6px;margin:8px auto;border-radius:6px;background:#D3D0C8}.cg-pro-mini-page header p+p{width:50%}.cg-pro-mini-page header button{margin-top:20px;padding:0 20px}.cg-pro-mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #D8D4CB}.cg-pro-mini-metrics b{padding:20px;text-align:center;font:400 28px/1 var(--f-display);border-right:1px solid #D8D4CB}.cg-pro-mini-metrics b:last-child{border-right:0}.cg-pro-mini-metrics small{font:700 8px/1 var(--f-mono);color:var(--pro-gold)}.cg-pro-mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.cg-pro-mini-cards i{height:85px;border:1px solid #DDD9D0;border-radius:5px 18px 5px 5px;background:linear-gradient(145deg,#F6F4EF,#E7E3DA)}.cg-pro-preview-stamp{position:absolute;right:18px;bottom:18px;padding:7px 9px;border:2px solid var(--pro-gold);color:var(--pro-gold);font:700 8px/1 var(--f-mono);transform:rotate(-3deg)}
.cg-pro-practical-list>p{margin:0 0 20px;font:700 9px/1 var(--f-mono);letter-spacing:.12em;color:#6B655C}.cg-pro-practical-list ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--pro-line)}.cg-pro-practical-list li{padding:18px 0;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;border-bottom:1px solid var(--pro-line)}.cg-pro-practical-list li span{grid-row:1/3;font:700 10px/1.6 var(--f-mono);color:var(--pro-gold)}.cg-pro-practical-list li b{font-size:15px}.cg-pro-practical-list li small{margin-top:4px;color:#716B61}.cg-pro-practical-list>a{margin-top:24px;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;text-decoration:none}.cg-pro-practical-list>a:hover svg{transform:translateX(4px)}.cg-pro-practical-list svg{transition:transform .18s var(--pro-ease)}

/* Manifest, inventory and final conversion. */
.cg-pro-manifest-section{max-width:none;padding-inline:max(28px,calc((100vw - 1184px)/2));background:#DEDAD0}.cg-pro-manifest-card{padding:clamp(30px,5vw,68px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:70px;border:1px solid var(--pro-line);background:#F5F3EE;box-shadow:12px 12px 0 rgba(12,10,9,.09)}.cg-pro-manifest-card>div>p:first-child{margin:0 0 22px;font:700 9px/1 var(--f-mono);letter-spacing:.12em;color:#716B61}.cg-pro-manifest-card h2{font:400 clamp(33px,4.4vw,58px)/1.04 var(--f-display);letter-spacing:-.035em}.cg-pro-manifest-card>div>p:last-child{max-width:550px;margin:24px 0 0;color:#625D53;font-size:14px}.cg-pro-manifest-card dl{margin:0;border-top:1px solid var(--pro-line)}.cg-pro-manifest-card dl div{padding:14px 0;display:grid;grid-template-columns:100px 1fr;gap:20px;border-bottom:1px solid var(--pro-line)}.cg-pro-manifest-card dt{font:700 9px/1.5 var(--f-mono);color:var(--pro-gold)}.cg-pro-manifest-card dd{margin:0;font-size:13px;font-weight:700}
.cg-pro-inventory{max-width:1320px}.cg-pro-status{margin:0 0 25px}.cg-pro-shelves{display:grid;gap:14px}.cg-pro-shelf{margin:0;border:1px solid var(--pro-line);background:#F3F1EB;content-visibility:auto;contain-intrinsic-size:160px 1600px}.cg-pro-shelf-summary{min-height:92px;padding:18px 20px;display:grid;grid-template-columns:86px 1fr auto 26px;align-items:center;gap:18px;cursor:pointer;list-style:none}.cg-pro-shelf-summary::-webkit-details-marker{display:none}.cg-pro-shelf-summary:focus-visible{outline:3px solid var(--pro-gold);outline-offset:3px}.cg-pro-shelf-code{font:700 10px/1 var(--f-mono);color:var(--pro-gold)}.cg-pro-shelf-summary>span:nth-child(2){display:flex;flex-direction:column;gap:5px}.cg-pro-shelf-summary b{font-size:17px}.cg-pro-shelf-summary small{color:#69635A;font-size:11px;line-height:1.5}.cg-pro-shelf-summary em{font:700 10px/1 var(--f-mono);color:#6B655C}.cg-pro-shelf-summary i{position:relative;width:22px;height:22px}.cg-pro-shelf-summary i::before,.cg-pro-shelf-summary i::after{content:"";position:absolute;left:5px;top:10px;width:12px;height:1px;background:currentColor;transition:transform .2s var(--pro-ease)}.cg-pro-shelf-summary i::after{transform:rotate(90deg)}.cg-pro-shelf[open] .cg-pro-shelf-summary i::after{transform:rotate(0)}.cg-pro-shelf-parts{padding:24px;border-top:1px solid var(--pro-line)}.cg-pro-shelf .cg-part{content-visibility:auto;contain-intrinsic-size:900px}
.cg-pro-faq-section{max-width:900px}.cg-pro-faq{border-top:1px solid var(--pro-line)}.cg-pro-faq details{border-bottom:1px solid var(--pro-line)}.cg-pro-faq summary{position:relative;min-height:74px;padding:22px 48px 22px 0;display:flex;align-items:center;font-size:15px;font-weight:800;cursor:pointer;list-style:none}.cg-pro-faq summary::-webkit-details-marker{display:none}.cg-pro-faq summary:focus-visible{outline:3px solid var(--pro-gold);outline-offset:3px}.cg-pro-faq summary i{position:absolute;right:5px;width:26px;height:26px;border:1px solid var(--pro-line);border-radius:50%}.cg-pro-faq summary i::before,.cg-pro-faq summary i::after{content:"";position:absolute;left:7px;top:12px;width:10px;height:1px;background:currentColor;transition:transform .2s var(--pro-ease)}.cg-pro-faq summary i::after{transform:rotate(90deg)}.cg-pro-faq details[open] summary i::after{transform:rotate(0)}.cg-pro-faq details p{margin:0;padding:0 48px 24px 0;color:#625D53;font-size:14px;line-height:1.9}
.cg-pro-final{position:relative;isolation:isolate;overflow:hidden;padding:clamp(90px,12vw,170px) 28px;background:var(--pro-night);color:#F7F4EA;text-align:center}.cg-pro-final::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 45%,rgba(202,138,4,.2),transparent 30%)}.cg-pro-final-inner{max-width:900px;margin:0 auto}.cg-pro-final-inner>p:first-of-type{margin:0;font:700 9px/1 var(--f-mono);letter-spacing:.15em;color:var(--pro-gold-bright)}.cg-pro-final h2{margin:24px 0;font:400 clamp(44px,7vw,88px)/.96 var(--f-display);letter-spacing:-.05em}.cg-pro-final h2 em{color:transparent;-webkit-text-stroke:1.4px var(--pro-gold-bright)}.cg-pro-final-inner>p:nth-of-type(2){color:#A9A194}.cg-pro-final-buy{margin-top:24px;text-align:left}.cg-pro-final-trust{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:11px 20px;color:#A9A194;font-size:11px}.cg-pro-final-trust span{display:inline-flex;align-items:center;gap:5px}.cg-pro-final-trust svg{color:var(--pro-gold-bright)}.cg-pro-final .cg-pro-legal{color:#756E63}.cg-pro-final .cg-pro-legal a{color:#BDB5A7}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.cg-pro-live{background:#181612}.cg-pro-depth-layer,.cg-pro-mini-gel.clear{background:#302C25}.cg-pro-depth-layer{backdrop-filter:none}}
@media (hover:none),(pointer:coarse){.cg-pro-gel-buy:hover{transform:none}.cg-pro-live{transform:none}.cg-pro-demo-gel,.cg-pro-mini-gel{min-height:56px}}
@media (max-width:1050px){.cg-pro-hero-inner{grid-template-columns:1fr 420px;gap:42px}.cg-pro-hero-copy h1{font-size:clamp(48px,7vw,78px)}.cg-pro-live-stage{min-height:390px}.cg-pro-control-grid{grid-template-columns:repeat(3,1fr)}.cg-pro-control-grid article:nth-child(5n){border-right:1px solid rgba(255,255,255,.1)}.cg-pro-control-grid article:nth-child(3n){border-right:0}.cg-pro-journey-sticky{grid-template-columns:minmax(280px,.75fr) minmax(420px,1.25fr);gap:32px}}
@media (max-width:820px){.cg-pro-section{padding:84px 20px}.cg-pro-section-head{grid-template-columns:1fr;gap:18px;margin-bottom:38px}.cg-pro-section-head>p:first-child{grid-column:auto}.cg-pro-section-head>p:last-child{max-width:620px}.cg-pro-hero{min-height:auto}.cg-pro-hero-inner{padding:26px 20px 58px;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:38px}.cg-pro-crumb{grid-column:auto}.cg-pro-hero-copy h1{font-size:clamp(48px,13vw,76px)}.cg-pro-hero-actions{align-items:flex-start;flex-direction:column}.cg-pro-live{max-width:620px;margin:0 auto;transform:none}.cg-pro-live-stage{min-height:390px}.cg-pro-scroll-cue{display:none}.cg-pro-compare-lab{grid-template-columns:1fr;gap:15px}.cg-pro-compare-mark{height:38px}.cg-pro-compare-card.is-free,.cg-pro-compare-card.is-pro{border-radius:5px 22px 5px 5px}.cg-pro-journey{height:auto;min-height:0;padding:84px 20px}.cg-pro-journey-sticky{position:static;height:auto;min-height:0;padding:0;grid-template-columns:1fr;overflow:visible}.cg-pro-journey-copy h2{font-size:clamp(38px,10vw,58px)}.cg-pro-journey-progress,.cg-pro-journey-status{display:none}.cg-pro-journey-visual{min-height:0;display:grid;gap:1px;background:#2A261E}.cg-pro-scene{position:relative;inset:auto;min-height:470px;opacity:1;transform:none;background:radial-gradient(circle at 50% 44%,rgba(202,138,4,.14),transparent 35%),#0B0A08}.cg-pro-scene-caption{position:relative;inset:auto;padding:14px 16px;background:#0B0A08}.cg-pro-cargo-card.c1{transform:translate(-130%,-95px) rotate(-6deg)}.cg-pro-cargo-card.c2{transform:translate(-50%,-145px)}.cg-pro-cargo-card.c3{transform:translate(30%,-95px) rotate(6deg)}.cg-pro-cargo-lid{transform:translateY(-50px) rotateX(-70deg)}.cg-pro-cargo-tape{transform:translateY(-60px) rotate(-3deg)}.cg-pro-cargo-card{opacity:1}.cg-pro-depth-layer.back{transform:translate3d(-50px,-38px,-100px) rotate(-3deg)}.cg-pro-depth-layer.front{transform:translate3d(58px,38px,120px) rotate(3deg)}.cg-pro-manifest path{stroke-dashoffset:0}.cg-pro-manifest circle,.cg-pro-manifest strong{opacity:1}.cg-pro-manifest strong{transform:rotate(-3deg)}.cg-pro-practical-grid,.cg-pro-manifest-card{grid-template-columns:1fr}.cg-pro-manifest-card{gap:42px}.cg-pro-shelf-summary{grid-template-columns:65px 1fr auto 22px}.cg-pro-shelf-summary small{display:none}}
@media (max-width:600px){.cg-pro-hero-inner{padding-inline:16px}.cg-pro-eyebrow{font-size:8px}.cg-pro-eyebrow span{display:block;width:max-content;margin:0 0 9px}.cg-pro-hero-lead{font-size:14px}.cg-pro-hero-facts{gap:11px 18px}.cg-pro-hero-facts span{font-size:7px}.cg-pro-gel-buy{width:100%;min-width:0}.cg-pro-live-stage{min-height:350px}.cg-pro-demo-gel{min-width:min(260px,78vw);min-height:68px}.cg-pro-live-footer span:nth-child(2){display:none}.cg-pro-control-grid{grid-template-columns:1fr 1fr}.cg-pro-control-grid article,.cg-pro-control-grid article:nth-child(3n),.cg-pro-control-grid article:nth-child(5n){min-height:155px;border-right:1px solid rgba(255,255,255,.1)}.cg-pro-control-grid article:nth-child(2n){border-right:0}.cg-pro-control-toolbar{align-items:flex-start;flex-wrap:wrap}.cg-pro-control-toolbar label{width:100%;margin-left:0}.cg-pro-control-toolbar input{flex:1}.cg-pro-control-lab>footer{justify-content:flex-start;flex-wrap:wrap}.cg-pro-mini-page{min-height:440px;padding:20px}.cg-pro-mini-page header{margin:48px auto 40px}.cg-pro-mini-metrics b{padding:15px 8px}.cg-pro-manifest-card{padding:26px 20px}.cg-pro-manifest-card dl div{grid-template-columns:82px 1fr}.cg-pro-shelf-summary{min-height:80px;padding:14px;grid-template-columns:1fr auto 22px;gap:10px}.cg-pro-shelf-code{display:none}.cg-pro-shelf-summary b{font-size:14px}.cg-pro-shelf-parts{padding:12px}.cg-pro-scene{min-height:390px}.cg-pro-cargo-box{width:92%;transform:scale(.82)}.cg-pro-panorama{width:92%;height:330px}.cg-pro-manifest{width:90%;height:340px}.cg-pro-manifest p b{font-size:36px}.cg-pro-manifest p.end{top:70px}.cg-pro-manifest>div{gap:7px}.cg-pro-manifest>div span:nth-child(2){display:none}.cg-pro-scene-caption{flex-wrap:wrap}.cg-pro-final-trust{display:grid;grid-template-columns:1fr 1fr;text-align:left}}
@media (max-width:390px){.cg-pro-control-grid{grid-template-columns:1fr}.cg-pro-control-grid article,.cg-pro-control-grid article:nth-child(2n){border-right:0}.cg-pro-compare-card ul{grid-template-columns:1fr}.cg-pro-compare-card li{min-height:55px;border-right:0;border-bottom:1px solid currentColor}.cg-pro-compare-card li:last-child{border-bottom:0}}
@media (prefers-reduced-motion:reduce){.cg-pro-page *,.cg-pro-page *::before,.cg-pro-page *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.cg-pro-hero-orb{display:none}.cg-pro-gel-buy:hover,.cg-pro-gel-buy:active,.cg-pro-demo-gel:active,.cg-pro-mini-gel:active{transform:none}.cg-pro-journey{height:auto;min-height:0;padding:84px 20px}.cg-pro-journey-sticky{position:static;height:auto;min-height:0;padding:0;grid-template-columns:1fr}.cg-pro-journey-progress,.cg-pro-journey-status{display:none}.cg-pro-journey-visual{min-height:0;display:grid;gap:1px}.cg-pro-scene{position:relative;min-height:470px;opacity:1;transform:none;background:#0B0A08}.cg-pro-scene-caption{position:relative;inset:auto;padding:14px}.cg-pro-cargo-lid{transform:translateY(-50px) rotateX(-70deg)}.cg-pro-cargo-tape{transform:translateY(-60px)}.cg-pro-cargo-card{opacity:1}.cg-pro-cargo-card.c1{transform:translate(-130%,-95px)}.cg-pro-cargo-card.c2{transform:translate(-50%,-145px)}.cg-pro-cargo-card.c3{transform:translate(30%,-95px)}.cg-pro-depth-layer.back{transform:translate3d(-50px,-38px,-100px)}.cg-pro-depth-layer.front{transform:translate3d(58px,38px,120px)}.cg-pro-manifest path{stroke-dashoffset:0}.cg-pro-manifest circle,.cg-pro-manifest strong{opacity:1}.cg-pro-manifest strong{transform:rotate(-3deg)}}
.cg-pro-scroll-cue i::before{animation-play-state:paused}.cg-pro-hero.is-visible .cg-pro-scroll-cue i::before{animation-play-state:running}
@media(max-width:960px){.cg-pro-hero-inner{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:38px}.cg-pro-crumb{grid-column:auto}.cg-pro-live{max-width:660px;margin:0 auto;transform:none}.cg-pro-hero-copy h1{max-width:760px;font-size:clamp(54px,10vw,82px)}.cg-pro-scroll-cue{display:none}}
@media(max-width:900px){.cg-pro-control-grid{grid-template-columns:repeat(2,1fr)}.cg-pro-control-grid article,.cg-pro-control-grid article:nth-child(3n),.cg-pro-control-grid article:nth-child(5n){border-right:1px solid rgba(255,255,255,.1)}.cg-pro-control-grid article:nth-child(2n){border-right:0}}
.cg-headsearch:focus-within{outline:3px solid var(--steel);outline-offset:2px}
.cg-pro-gel-segment button{min-height:44px}.cg-pro-gel-segment i{height:44px}
@media(max-width:390px){.cg-pro-control-grid{grid-template-columns:1fr}.cg-pro-control-grid article,.cg-pro-control-grid article:nth-child(2n),.cg-pro-control-grid article:nth-child(3n),.cg-pro-control-grid article:nth-child(5n){border-right:0}}
@media(max-height:650px) and (max-width:1000px){.cg-pro-journey{height:auto;min-height:0;padding:64px 20px}.cg-pro-journey-sticky{position:static;height:auto;min-height:0;padding:0;grid-template-columns:1fr;overflow:visible}.cg-pro-journey-progress,.cg-pro-journey-status{display:none}.cg-pro-journey-visual{min-height:0;display:grid;gap:1px}.cg-pro-scene{position:relative;inset:auto;min-height:430px;opacity:1;transform:none;background:radial-gradient(circle at 50% 44%,rgba(202,138,4,.14),transparent 35%),#0B0A08}.cg-pro-scene-caption{position:relative;inset:auto;padding:14px 16px;background:#0B0A08}.cg-pro-cargo-card{opacity:1}.cg-pro-cargo-lid{transform:translateY(-50px) rotateX(-70deg)}.cg-pro-cargo-tape{transform:translateY(-60px) rotate(-3deg)}.cg-pro-cargo-card.c1{transform:translate(-130%,-95px) rotate(-6deg)}.cg-pro-cargo-card.c2{transform:translate(-50%,-145px)}.cg-pro-cargo-card.c3{transform:translate(30%,-95px) rotate(6deg)}.cg-pro-depth-layer.back{transform:translate3d(-50px,-38px,-100px) rotate(-3deg)}.cg-pro-depth-layer.front{transform:translate3d(58px,38px,120px) rotate(3deg)}.cg-pro-manifest path{stroke-dashoffset:0}.cg-pro-manifest circle,.cg-pro-manifest strong{opacity:1}.cg-pro-manifest strong{transform:rotate(-3deg)}}

/* ============================================================
   HERO DEMO — 「えらぶ→コピー→積む」8秒の自動実演(純CSS人形芝居)
   タイムラインは全要素8秒共通。%で振り付けを同期する。
   ============================================================ */
.cg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 44px;
  align-items: center;
}
.cg-hero-grid h1 { font-size: clamp(38px, 4.8vw, 66px); }
.cg-hero-kick { font-size: 12.5px; letter-spacing: .1em; }

.cg-hd {
  border: 2px solid var(--line);
  outline: 2px solid var(--line);
  outline-offset: 3px;
  background: var(--paper);
  box-shadow: 6px 6px 0 rgba(27, 26, 23, .35);
}
.cg-hd-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--ink);
  color: #FBF6EC;
}
.cg-hd-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #5A5650; }
.cg-hd-bar > i:nth-child(1) { background: var(--accent); }
.cg-hd-bar > i:nth-child(2) { background: var(--hazard); }
.cg-hd-bar b { font-family: var(--f-pixel, var(--f-mono)); font-size: 8px; letter-spacing: .14em; margin: 0 auto 0 4px; }
.cg-hd-bar .st {
  font-family: var(--f-pixel, var(--f-mono));
  font-size: 7.5px;
  letter-spacing: .06em;
  color: #9B968C;
  border: 1.5px solid #4a463e;
  padding: 4px 7px;
}
.cg-hd-bar .s1 { animation: cg-hd-st1 8s steps(1, jump-none) infinite; }
.cg-hd-bar .s2 { animation: cg-hd-st2 8s steps(1, jump-none) infinite; }
.cg-hd-bar .s3 { animation: cg-hd-st3 8s steps(1, jump-none) infinite; }
@keyframes cg-hd-st1 { 0%, 23% { color: #1B1A17; background: #F2B707; border-color: #F2B707; } 24%, 100% { color: #9B968C; background: none; border-color: #4a463e; } }
@keyframes cg-hd-st2 { 0%, 23% { color: #9B968C; } 24%, 45% { color: #1B1A17; background: #F2B707; border-color: #F2B707; } 46%, 100% { color: #9B968C; } }
@keyframes cg-hd-st3 { 0%, 45% { color: #9B968C; } 46%, 93% { color: #1B1A17; background: #F2B707; border-color: #F2B707; } 94%, 100% { color: #9B968C; } }

.cg-hd-stage {
  position: relative;
  height: 302px;
  overflow: hidden;
  background: #E9E7E0;
  background-image: radial-gradient(#C9C5BA 1px, transparent 1px);
  background-size: 16px 16px;
  animation: cg-hd-fade 8s ease infinite;
}
@keyframes cg-hd-fade { 0% { opacity: 0; } 3%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* --- 左: パーツカード(実物が動いている) --- */
.cg-hd-card {
  position: absolute;
  left: 18px;
  top: 30px;
  width: 190px;
  background: var(--paper);
  border: 2px solid #1B1A17;
  box-shadow: 3px 3px 0 rgba(27, 26, 23, .25);
}
.cg-hd-card .hd { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 2px solid #1B1A17; }
.cg-hd-card .hd span { font-family: var(--f-pixel, var(--f-mono)); font-size: 7px; color: #5A5650; }
.cg-hd-card .hd i {
  flex: 1; height: 10px; opacity: .8;
  background: repeating-linear-gradient(90deg, #1B1A17 0 2px, transparent 2px 5px, #1B1A17 5px 6px, transparent 6px 10px);
}
.cg-hd-card .dm { display: flex; align-items: center; justify-content: center; height: 84px; border-bottom: 2px solid #1B1A17; }
.cg-hd .jb {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  border: 2px solid #1B1A17;
  font-family: var(--f-pixel, var(--f-mono));
  font-size: 8.5px;
  letter-spacing: .1em;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .25), 3px 3px 0 #1B1A17;
  animation: cg-hd-jb 2.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-hd-jb {
  0%, 55%, 100% { transform: translate(0, 0) scale(1, 1); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .25), 3px 3px 0 #1B1A17; }
  63% { transform: translate(2px, 2px) scale(1.04, .9); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .3), inset -2px -2px 0 rgba(0, 0, 0, .25), 0 0 0 #1B1A17; }
  74% { transform: translate(0, 0) scale(.98, 1.05); }
  84% { transform: translate(0, 0) scale(1.01, .99); }
}
.cg-hd-card .ft { position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 9px; }
.cg-hd-card .ft em {
  font-style: normal; font-family: var(--f-mono); font-size: 9px; font-weight: 700;
  background: #1B1A17; color: #E9E7E0; padding: 2px 7px;
}
.cg-hd-card .cp {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  font-size: 10.5px; font-weight: 900; color: #fff;
  background: var(--accent);
  border: 2px solid #1B1A17;
  padding: 3px 10px;
  box-shadow: 2px 2px 0 #1B1A17;
  animation: cg-hd-cp 8s ease infinite;
}
@keyframes cg-hd-cp {
  0%, 19% { transform: translate(0, 0); background: var(--accent); box-shadow: 2px 2px 0 #1B1A17; }
  20%, 23% { transform: translate(2px, 2px); background: var(--steel); box-shadow: 0 0 0 #1B1A17; }
  24%, 100% { transform: translate(0, 0); background: var(--accent); box-shadow: 2px 2px 0 #1B1A17; }
}
.cg-hd-card .toast {
  position: absolute;
  right: 4px;
  top: -30px;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  background: var(--steel);
  border: 2px solid #1B1A17;
  padding: 3px 9px;
  box-shadow: 2px 2px 0 rgba(27, 26, 23, .3);
  opacity: 0;
  animation: cg-hd-toast 8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-hd-toast {
  0%, 23% { opacity: 0; transform: translateY(6px) scale(.8); }
  26%, 40% { opacity: 1; transform: translateY(0) scale(1); }
  45%, 100% { opacity: 0; transform: translateY(-4px) scale(.9); }
}

/* --- 右: あなたのサイト(ミニブラウザ) --- */
.cg-hd-site {
  position: absolute;
  right: 16px;
  top: 40px;
  width: 176px;
  background: #fff;
  border: 2px solid #1B1A17;
  box-shadow: 3px 3px 0 rgba(27, 26, 23, .25);
}
.cg-hd-site .tb { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-bottom: 2px solid #1B1A17; background: var(--bg2); }
.cg-hd-site .tb i { width: 7px; height: 7px; border-radius: 50%; background: #C9C5BA; }
.cg-hd-site .tb span { font-family: var(--f-mono); font-size: 8.5px; font-weight: 700; color: #5A5650; margin-left: 2px; }
.cg-hd-site .tb .ok {
  margin-left: auto; font-size: 9px; font-weight: 900; color: #fff;
  background: #3AA76D; border: 1.5px solid #1B1A17; border-radius: 50%;
  width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  animation: cg-hd-ok 8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-hd-ok {
  0%, 69% { opacity: 0; transform: scale(0); }
  73%, 94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}
.cg-hd-site .slot { display: flex; align-items: center; justify-content: center; height: 96px; }
.cg-hd .jb.fin { transform: scale(0); animation: cg-hd-fin 8s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes cg-hd-fin {
  0%, 62% { transform: scale(0); }
  68% { transform: scale(1.18); }
  71% { transform: scale(1); }
  77% { transform: scale(1.05, .86) translateY(2px); }
  81% { transform: scale(.97, 1.06); }
  85%, 94% { transform: scale(1); }
  100% { transform: scale(1); opacity: 0; }
}

/* --- 下: ベルトコンベア --- */
.cg-hd-belt {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  height: 22px;
  border: 2px solid #1B1A17;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 12px, #1B1A17 12px 24px);
  animation: cg-hd-belt 8s linear infinite;
}
@keyframes cg-hd-belt {
  0%, 46% { background-position: 0 0; }
  64% { background-position: 68px 0; }
  100% { background-position: 68px 0; }
}

/* --- 貨物箱(コードを受け取り、搬送される) --- */
.cg-hd-crate {
  position: absolute;
  left: 64px;
  bottom: 38px;
  width: 54px;
  height: 46px;
  background: var(--kraft);
  border: 2px solid #1B1A17;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cg-hd-crate 8s cubic-bezier(.45, .05, .55, .95) infinite;
}
.cg-hd-crate b { font-family: var(--f-pixel, var(--f-mono)); font-size: 8px; color: #1B1A17; }
.cg-hd-crate .lid {
  position: absolute;
  left: -4px;
  top: -10px;
  width: 58px;
  height: 10px;
  background: var(--kraft);
  border: 2px solid #1B1A17;
  transform-origin: left bottom;
  transform: rotate(-72deg);
  animation: cg-hd-lid 8s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes cg-hd-lid {
  0%, 37% { transform: rotate(-72deg); }
  43%, 100% { transform: rotate(0deg); }
}
@keyframes cg-hd-crate {
  0%, 46% { transform: translateX(0); opacity: 1; }
  64% { transform: translateX(180px); opacity: 1; }
  67% { transform: translateX(180px) scale(1.06, .92); }
  72%, 100% { transform: translateX(180px) scale(.7); opacity: 0; }
}

/* --- 飛ぶコード片 --- */
.cg-hd-chip {
  position: absolute;
  left: 146px;
  top: 166px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: #E9E7E0;
  background: #1B1A17;
  padding: 3px 8px;
  opacity: 0;
  animation: cg-hd-chip 8s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes cg-hd-chip {
  0%, 23% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0); }
  26% { opacity: 1; transform: translate(-8px, -30px) scale(1) rotate(-8deg); }
  32% { transform: translate(-42px, 6px) scale(1) rotate(4deg); opacity: 1; }
  38%, 100% { transform: translate(-58px, 46px) scale(.3) rotate(0); opacity: 0; }
}

/* --- ピクセルカーソル --- */
.cg-hd-cursor {
  position: absolute;
  left: 150px;
  top: 172px;
  width: 17px;
  height: 24px;
  background: #1B1A17;
  clip-path: polygon(0 0, 100% 62%, 58% 66%, 76% 96%, 62% 100%, 46% 72%, 0 86%);
  filter: drop-shadow(1.5px 1.5px 0 #fff);
  opacity: 0;
  animation: cg-hd-cursor 8s cubic-bezier(.5, 0, .3, 1) infinite;
}
@keyframes cg-hd-cursor {
  0%, 5% { transform: translate(230px, 108px); opacity: 0; }
  9% { opacity: 1; }
  17%, 19% { transform: translate(2px, 2px); opacity: 1; }
  21% { transform: translate(2px, 2px) scale(.8); }
  23% { transform: translate(2px, 2px) scale(1); }
  30% { transform: translate(66px, 74px); opacity: 1; }
  36%, 100% { transform: translate(150px, 104px); opacity: 0; }
}

/* --- 完了スパークル(サイト側) --- */
.cg-hd-spark {
  position: absolute;
  right: 90px;
  top: 96px;
  width: 6px;
  height: 6px;
  background: var(--hazard);
  box-shadow: 0 -6px 0 var(--hazard), 0 6px 0 var(--hazard), -6px 0 0 var(--hazard), 6px 0 0 var(--hazard), -30px 26px 0 var(--accent), 34px 30px 0 var(--steel);
  opacity: 0;
  animation: cg-hd-spark 8s ease infinite;
}
@keyframes cg-hd-spark {
  0%, 70% { opacity: 0; transform: scale(.3); }
  74%, 82% { opacity: 1; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1.35); }
}

/* --- フォールバック --- */
@media (max-width: 1080px) {
  .cg-hero-grid { grid-template-columns: 1fr; }
  .cg-hd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-hd * { animation: none !important; }
  /* 静止画として「完成形」を見せる: 両側にボタン・チェック済み・道具類は隠す */
  .cg-hd .jb.fin { transform: scale(1); }
  .cg-hd-site .tb .ok { opacity: 1; transform: scale(1); }
  .cg-hd-bar .s1, .cg-hd-bar .s2, .cg-hd-bar .s3 { color: #1B1A17; background: #F2B707; border-color: #F2B707; }
  .cg-hd-cursor, .cg-hd-chip, .cg-hd-crate, .cg-hd-spark { display: none; }
}