.mechanism-view {
  --subportal-accent: #d7190b;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 100svh;
  overflow-x: clip;
  background:
    linear-gradient(rgba(255,255,255,.009) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px),
    radial-gradient(circle at 70% 14%, color-mix(in srgb, var(--subportal-accent) 13%, transparent), transparent 28%),
    var(--color-bg);
  background-size: 5rem 5rem, 5rem 5rem, auto, auto;
  animation: subportal-arrive 420ms var(--ease-out) both;
}
.mechanism-view[hidden] { display: none; }
.mechanism-view[data-accent="blue"] { --subportal-accent:#28618c; }.mechanism-view[data-accent="cold-red"] { --subportal-accent:#b42d2d; }.mechanism-view[data-accent="magenta"] { --subportal-accent:#9d285c; }.mechanism-view[data-accent="silver"] { --subportal-accent:#8b9095; }.mechanism-view[data-accent="violet"] { --subportal-accent:#713c82; }.mechanism-view[data-accent="amber"] { --subportal-accent:#b36620; }.mechanism-view[data-accent="ember"] { --subportal-accent:#a63b20; }.mechanism-view[data-accent="teal"] { --subportal-accent:#25736d; }.mechanism-view[data-accent="azure"] { --subportal-accent:#2675a4; }.mechanism-view[data-accent="steel"] { --subportal-accent:#5d7180; }.mechanism-view[data-accent="midnight"] { --subportal-accent:#3e4f77; }

.mechanism-header,.mechanism-page,.mechanism-footer { width:min(calc(100% - clamp(2rem,8vw,8rem)),var(--content-max)); margin-inline:auto; }
.mechanism-header { display:flex; align-items:center; justify-content:space-between; min-height:7rem; border-bottom:1px solid var(--color-border); }
.mechanism-breadcrumb { display:flex; min-width:0; align-items:center; gap:.65rem; color:#555; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; }
.mechanism-breadcrumb button { padding:.45rem 0; background:transparent; color:var(--color-muted); cursor:pointer; font-size:inherit; letter-spacing:inherit; text-transform:inherit; transition:color var(--duration-fast); }
.mechanism-breadcrumb button:hover { color:var(--color-white); }
.mechanism-breadcrumb > span:last-child { color:var(--subportal-accent); }

.mechanism-hero { position:relative; min-height:min(61rem,calc(100svh - 7rem)); padding:clamp(4.5rem,9vh,8rem) 0 clamp(6rem,12vh,10rem); overflow:hidden; border-bottom:1px solid var(--color-border); }
.mechanism-back { padding:.65rem 0; border-bottom:1px solid var(--color-border); background:transparent; color:var(--color-muted); cursor:pointer; font-size:var(--font-xs); letter-spacing:.13em; text-transform:uppercase; transition:color var(--duration-fast),border-color var(--duration-fast); }
.mechanism-back:hover { color:var(--color-white); border-color:var(--subportal-accent); }
.mechanism-hero__context { position:relative; z-index:2; display:flex; gap:var(--space-2); margin-top:clamp(3rem,8vh,6rem); color:var(--color-muted); font-size:var(--font-xs); font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.mechanism-hero__number { position:relative; z-index:2; margin-top:var(--space-5); color:var(--subportal-accent); font-size:var(--font-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.mechanism-hero h2 { position:relative; z-index:2; margin-top:var(--space-2); color:var(--color-white); font-size:clamp(5rem,13vw,13rem); font-weight:500; letter-spacing:-.065em; line-height:.78; }
.mechanism-hero h3 { position:relative; z-index:2; max-width:21ch; margin-top:clamp(3rem,7vh,5rem); color:var(--color-text); font-size:clamp(1.8rem,3.5vw,3.6rem); font-weight:480; letter-spacing:var(--tracking-tight); line-height:1.04; }
.mechanism-hero__copy { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,7rem); max-width:70rem; margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--color-border); }
.mechanism-hero__copy p { color:var(--color-muted); font-size:var(--font-sm); line-height:1.75; }
.mechanism-hero__copy strong { color:var(--color-text); font-size:var(--font-sm); font-weight:500; line-height:1.75; }
.mechanism-hero__depth { position:absolute; top:10%; right:-8%; width:min(48vw,42rem); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--subportal-accent) 20%,transparent); border-radius:50%; opacity:.7; }
.mechanism-hero__depth::before,.mechanism-hero__depth::after { position:absolute; content:""; border:1px solid rgba(255,255,255,.045); border-radius:50%; }.mechanism-hero__depth::before { inset:13%; }.mechanism-hero__depth::after { inset:30%; border-color:color-mix(in srgb,var(--subportal-accent) 28%,transparent); box-shadow:0 0 90px color-mix(in srgb,var(--subportal-accent) 14%,transparent); }
.mechanism-hero__depth span { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--subportal-accent); box-shadow:0 0 20px var(--subportal-accent); }.mechanism-hero__depth span:first-child { top:16%; left:42%; }.mechanism-hero__depth span:last-child { right:17%; bottom:24%; opacity:.4; }

.mechanism-process,.mechanism-worlds { padding:clamp(6rem,11vw,10rem) 0; border-bottom:1px solid var(--color-border); }
.mechanism-section-heading { display:grid; grid-template-columns:1fr minmax(18rem,32rem); align-items:end; gap:var(--space-6); margin-bottom:var(--space-7); }
.mechanism-kicker { color:var(--subportal-accent); font-size:var(--font-xs); font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.mechanism-section-heading h3 { max-width:16ch; margin-top:var(--space-2); color:var(--color-white); font-size:clamp(2rem,4vw,4rem); font-weight:500; letter-spacing:var(--tracking-tight); line-height:1; }
.mechanism-section-heading > p { color:var(--color-muted); font-size:var(--font-sm); line-height:1.75; }

.mechanism-steps { display:grid; grid-template-columns:repeat(var(--step-count,4),minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.mechanism-step { position:relative; min-width:0; padding:2.2rem clamp(1rem,2.2vw,2rem) 2rem 0; border-top:1px solid var(--color-border); }
.mechanism-step:not(:last-child)::after { position:absolute; top:-4px; right:0; width:7px; height:7px; content:""; border-top:1px solid var(--subportal-accent); border-right:1px solid var(--subportal-accent); transform:rotate(45deg); }
.mechanism-step__number { color:var(--subportal-accent); font-size:.6rem; letter-spacing:.15em; }
.mechanism-step h4 { margin-top:clamp(2rem,5vw,4rem); color:var(--color-white); font-size:clamp(1.05rem,1.8vw,1.45rem); font-weight:600; letter-spacing:.06em; }
.mechanism-step p { max-width:19rem; margin-top:var(--space-3); color:var(--color-muted); font-size:var(--font-sm); line-height:1.65; }

.mechanism-origin { position:relative; padding:clamp(6rem,13vw,12rem) clamp(1.5rem,8vw,8rem); overflow:hidden; border-bottom:1px solid var(--color-border); text-align:center; }
.mechanism-origin::before { position:absolute; top:0; left:50%; width:1px; height:4rem; content:""; background:linear-gradient(to bottom,var(--subportal-accent),transparent); }
.mechanism-origin h3 { max-width:22ch; margin:var(--space-5) auto 0; color:var(--color-white); font-size:clamp(2rem,5vw,5rem); font-weight:500; letter-spacing:var(--tracking-tight); line-height:1; }
.mechanism-origin button { margin-top:var(--space-6); padding:.75rem 0; border-bottom:1px solid var(--color-border); background:transparent; color:var(--color-muted); cursor:pointer; font-size:var(--font-xs); letter-spacing:.12em; text-transform:uppercase; transition:color var(--duration-fast),border-color var(--duration-fast); }.mechanism-origin button:hover { color:var(--color-white); border-color:var(--subportal-accent); }

.mechanism-movie-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2.2vw,2rem); }
.mechanism-movie-grid .portal-movie-card__poster { border-color:color-mix(in srgb,var(--subportal-accent) 20%,var(--color-border)); }
.mechanism-movie-grid .portal-movie-card__mechanisms span:first-child { border-color:color-mix(in srgb,var(--subportal-accent) 62%,transparent); color:var(--color-text); }
.mechanism-footer { display:flex; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) 0 var(--space-7); color:#555; font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; }
.mechanism-footer button { padding:0; background:transparent; color:#666; cursor:pointer; font-size:inherit; letter-spacing:inherit; text-transform:inherit; }.mechanism-footer button:hover { color:var(--color-white); }

@keyframes subportal-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:1024px) { .mechanism-hero h2 { font-size:clamp(5rem,15vw,10rem); }.mechanism-movie-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:768px) { .mechanism-header { min-height:5.5rem; }.mechanism-breadcrumb { max-width:65%; overflow:hidden; white-space:nowrap; }.mechanism-breadcrumb > span:last-child { overflow:hidden; text-overflow:ellipsis; }.mechanism-hero { min-height:calc(100svh - 5.5rem); }.mechanism-hero__depth { right:-35%; width:90vw; }.mechanism-hero__copy,.mechanism-section-heading { grid-template-columns:1fr; }.mechanism-steps { grid-template-columns:1fr; }.mechanism-step { padding:1.5rem 0 2.5rem 2.5rem; border-top:0; border-left:1px solid var(--color-border); }.mechanism-step:not(:last-child)::after { top:auto; right:auto; bottom:0; left:-4px; transform:rotate(135deg); }.mechanism-step h4 { margin-top:var(--space-3); }.mechanism-movie-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { .mechanism-hero h2 { font-size:clamp(4rem,21vw,6rem); }.mechanism-hero h3 { font-size:clamp(1.7rem,8vw,2.5rem); }.mechanism-movie-grid { gap:1.4rem .8rem; }.mechanism-footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .mechanism-view { animation:none; } }