.shape-page {
  --mx: 70%; --my: 30%; --bgx: 58%; --bgy: 42%; --card-opacity: 1;
  min-height: 100svh; background: #050811; color: #eef4ff;
}
.shape-page main { width: min(1180px, calc(100% - 24px)); margin: auto; padding: max(20px, env(safe-area-inset-top)) 0 32px; }
.motion-gate { position: sticky; top: max(6px, env(safe-area-inset-top)); z-index: 20; display: block; margin: 6px auto -34px; padding: 9px 14px; border: 1px solid rgba(164,201,255,.5); border-radius: 999px; color: #eef6ff; background: rgba(8,20,42,.9); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.motion-active .motion-gate { color: #bfffd7; border-color: rgba(90,235,145,.6); background: rgba(5,41,24,.92); }
.shape-page header { text-align: center; }
.shape-page header h1 { margin: 0; font-size: clamp(28px, 6vw, 50px); }
.shape-page header p { margin: 7px 0 0; color: #8492aa; }
.shape-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.shape-grid article { min-width: 0; }
.shape-grid h2 { margin: 0 0 7px; color: #8b9bb6; font-size: 10px; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.shape-grid h2 a { color: #a9cfff; text-underline-offset: 2px; }
.shape-card { width: 100%; transform: rotateX(var(--shape-rx, 0deg)) rotateY(var(--shape-ry, 0deg)); transition: transform 100ms ease-out; will-change: auto; }
.shape-page.zooming .shape-card { transition: none; }
.shape-card .card__shine, .shape-card .shape-glare, .shape-card .shape-core { will-change: auto; }
.shape-page:not(.motion-active) .shape-card { cursor: pointer; }
.shape-glare, .shape-core { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; filter: none; mix-blend-mode: screen; will-change: background-position; }
.shape-grain { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; }
.shape-glare { opacity: .24; }
.shape-core { opacity: .52; }
.shape-a .shape-glare { background-image: radial-gradient(farthest-corner circle at 50% 50%, rgba(255,255,255,.72) 8%, rgba(255,255,255,.34) 24%, rgba(205,229,244,.09) 52%, transparent 88%); background-size: 170% 170%; }
.shape-a .shape-core { background-image: radial-gradient(farthest-corner circle at 50% 50%, rgba(255,255,255,.72) 0%, rgba(222,244,255,.18) 18%, transparent 46%); background-size: 170% 170%; }
.shape-b .shape-glare { background-image: radial-gradient(ellipse 86% 48% at 50% 50%, rgba(235,248,255,.55), rgba(215,237,249,.14) 45%, transparent 82%); background-size: 170% 170%; }
.shape-b .shape-core { background-image: radial-gradient(ellipse 34% 17% at 50% 50%, white, rgba(226,245,255,.32) 38%, transparent 100%); background-size: 170% 170%; }
.shape-c .shape-glare { background-image: radial-gradient(ellipse 62% 42% at 50% 50%, rgba(237,249,255,.5), transparent 70%), radial-gradient(ellipse 45% 30% at 34% 68%, rgba(194,227,245,.22), transparent 75%); background-size: 170% 170%, 170% 170%; }
.shape-c .shape-core { background-image: radial-gradient(ellipse 24% 15% at 50% 50%, rgba(255,255,255,.95), transparent 76%), radial-gradient(ellipse 18% 12% at 39% 61%, rgba(221,242,252,.38), transparent 84%); background-size: 170% 170%, 170% 170%; }
.shape-d .shape-glare { background-image: linear-gradient(var(--glare-angle, 124deg), transparent 23%, rgba(206,233,247,.08) 37%, rgba(239,249,255,.42) 48%, rgba(212,238,250,.12) 59%, transparent 76%), radial-gradient(ellipse 54% 38% at 50% 50%, rgba(225,243,252,.25), transparent 74%); background-size: 180% 180%, 170% 170%; }
.shape-d .shape-core { background-image: linear-gradient(var(--glare-angle, 124deg), transparent 40%, rgba(232,247,255,.12) 46%, rgba(255,255,255,.88) 50%, rgba(229,246,255,.16) 54%, transparent 60%), radial-gradient(ellipse 20% 13% at 50% 50%, rgba(255,255,255,.68), transparent 82%); background-size: 180% 180%, 170% 170%; }
.shape-e .shape-glare { background-image: linear-gradient(var(--glare-angle, 124deg), transparent 20%, rgba(207,234,248,.08) 35%, rgba(239,249,255,.31) 48%, rgba(209,235,249,.1) 61%, transparent 79%), radial-gradient(ellipse 72% 48% at 50% 50%, rgba(230,246,255,.32), transparent 75%); background-size: 180% 180%, 170% 170%; }
.shape-e .shape-core { background-image: linear-gradient(var(--glare-angle, 124deg), transparent 43%, rgba(242,251,255,.3) 48%, rgba(255,255,255,.76) 50%, rgba(232,247,255,.2) 53%, transparent 58%), radial-gradient(ellipse 22% 14% at 50% 50%, rgba(255,255,255,.66), transparent 88%); background-size: 180% 180%, 170% 170%; }
.shape-f .shape-glare { background-image: linear-gradient(128deg, transparent 12%, rgba(225,242,252,.16) 42%, rgba(255,255,255,.26) 49%, rgba(215,238,250,.1) 58%, transparent 86%), radial-gradient(ellipse 110% 72% at 50% 50%, rgba(255,255,255,.36), rgba(225,242,252,.1) 42%, transparent 76%); background-size: 180% 180%, 170% 170%; }
.shape-f .shape-core { background-image: radial-gradient(ellipse 24% 14% at 50% 50%, rgba(255,255,255,.92), rgba(246,252,255,.68) 22%, rgba(220,242,253,.22) 52%, transparent 100%), url("./public/channels/foil-microtexture-384.png"); background-size: 170% 170%, cover; background-blend-mode: screen; }
.shape-g .shape-glare { opacity: .22; background-image: radial-gradient(ellipse 112% 78% at 50% 50%, rgba(250,253,255,.62) 0%, rgba(232,243,249,.32) 36%, rgba(207,227,238,.08) 67%, transparent 100%); background-size: 150% 150%; mix-blend-mode: screen; }
.shape-g .shape-core { opacity: .34; background-image: radial-gradient(ellipse 62% 43% at 50% 50%, rgba(255,255,255,.82) 0%, rgba(252,253,253,.48) 28%, rgba(244,249,251,.12) 65%, transparent 100%); background-size: 150% 150%; mix-blend-mode: normal; }
.shape-g .shape-grain {
  opacity: .3;
  background: url("./public/channels/paper-varnish-grain-384.png") center / 380px 380px repeat;
  mix-blend-mode: overlay;
}

.detail-page main { width: min(100%, 760px); padding-inline: 8px; }
.detail-page .detail-card-wrap { width: min(96vw, 720px); margin: 16px auto 0; }
.detail-page .shape-card { width: 100%; }
.detail-page .detail-note { margin: 8px auto 0; color: #8290a8; font-size: 11px; text-align: center; }
@media (max-width: 700px) {
  .shape-page main { width: calc(100% - 10px); padding: max(7px, env(safe-area-inset-top)) 0 max(7px, env(safe-area-inset-bottom)); }
  .motion-gate { margin-bottom: -29px; padding: 7px 11px; font-size: 10px; }
  .shape-page header h1 { font-size: 20px; line-height: 1; }
  .shape-page header p { margin-top: 4px; font-size: 9px; }
  .shape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 5px; margin-top: 9px; }
  .shape-grid h2 { margin-bottom: 3px; font-size: 6px; letter-spacing: .035em; }
  .shape-card { border-radius: 4px; box-shadow: 0 3px 9px rgba(0,0,0,.45), 0 0 0 1px rgba(164,201,255,.2); }
}