/* Model pages: built on ../style.css tokens and components */
body.page {
  background:
    radial-gradient(1200px 700px at 75% -10%, rgba(212, 162, 76, .14), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(212, 162, 76, .06), transparent 60%),
    var(--bg);
}
.page #top { position: sticky; background: rgba(5, 4, 4, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.page .mode-btn { text-decoration: none; }
.p-main { padding-top: 22px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-hi); }
.crumbs b { color: var(--gold); font-weight: 500; }

.p-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-bottom: clamp(48px, 7vw, 96px); }
.p-stage { position: relative; aspect-ratio: 1; max-height: 78vh; width: 100%; border-radius: 26px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 30%, #241a0e, #070605 70%); touch-action: none; }
.p-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.p-stage canvas:active { cursor: grabbing; }
.p-info { display: grid; gap: 16px; align-content: center; }
.p-name { margin: 0; font: 800 clamp(44px, 6vw, 92px)/.95 var(--display); letter-spacing: -.04em;
  background: linear-gradient(100deg, var(--gold-lo), var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, var(--gold-lo));
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
.p-tag { margin: 0; font: 600 clamp(18px, 1.7vw, 24px)/1.3 var(--display); letter-spacing: -.01em; }
.p-about { margin: 0; color: #d0c6b4; font-size: 16px; max-width: 52ch; }
.p-controls { display: grid; gap: 8px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--glass); }
.p-info .cta-row { justify-content: flex-start; }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-bottom: 28px; }
.tile { background: rgba(8, 6, 4, .85); padding: 22px; display: grid; gap: 6px; }
.tile b { font: 600 clamp(18px, 1.6vw, 26px)/1.15 var(--display); color: var(--gold); letter-spacing: -.02em; }
.tile span { color: var(--muted); font-size: 13px; }
.spec { margin: 0; display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); border-top: 1px solid var(--line); }
.spec dt, .spec dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--muted); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-right: 16px; }
.spec dd { color: var(--ink); font-size: 15px; }

.parts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.parts-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); }
.parts-list .chip { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .2); }
.parts-list b { display: block; font: 600 15px var(--body); }
.parts-list small { color: var(--muted); font: 400 12px var(--mono); }
.split .cards { align-content: start; }
.card h3:first-child { margin-top: 0; }
.card a { color: var(--gold-hi); }
.sws { display: flex; }
.sws .sw { width: 30px; height: 30px; }
.sws .sw + .sw { margin-left: -10px; }
.sw-any { background: conic-gradient(#d4a24c, #c0392b, #8e44ad, #2980b9, #27ae60, #f1c40f, #d4a24c); }
.note { color: var(--muted); font-size: 13px; margin: 16px 0 0; }

.p-other { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; }
.p-other .idx, .p-other h2 { grid-column: 1; }
.p-pn { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 10px; }
.p-pn a { padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--gold-hi); font: 500 12px var(--mono); letter-spacing: .08em; white-space: nowrap; transition: .3s; }
.p-pn a:hover { border-color: var(--gold); background: rgba(212, 162, 76, .1); }
.o-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.o-card { display: grid; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); text-decoration: none; color: var(--ink); transition: border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.o-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.o-card small { font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.o-card b { font: 600 18px var(--display); letter-spacing: -.01em; }
.o-card span { color: var(--muted); font-size: 13px; }
.o-card.cur { border-color: var(--gold); background: rgba(212, 162, 76, .1); pointer-events: none; }

@media (max-width: 1080px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .p-hero { grid-template-columns: minmax(0, 1fr); }
  .p-stage { max-height: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec dt { border-bottom: 0; padding-bottom: 2px; }
  .spec dd { padding-top: 0; }
  .p-other { grid-template-columns: minmax(0, 1fr); }
  .p-pn { grid-column: 1; grid-row: auto; flex-wrap: wrap; }
}