/* Existing copy, Lusion's large art stages and HAOQI's DOM/WebGL layering. */
.design-principles { padding:100px var(--gutter) 70px; }
.design-principles > h2 { font-size:clamp(58px,7.6vw,130px);line-height:1.03;letter-spacing:-.055em;max-width:12em;margin-bottom:75px; }
.principle-row { display:grid;grid-template-columns:1.25fr 1fr;gap:7vw;align-items:center;min-height:76svh;padding:40px 0; }
.principle-art { position:relative;height:64svh;min-height:420px;overflow:hidden;border-radius:8px; }
.principle-art img,.principle-art canvas { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.principle-art canvas { opacity:0; }
.principle-art.scene-ready canvas { opacity:1; }
.principle-art.scene-ready img { opacity:0; }
.principle-copy h3 { font-size:clamp(42px,4.1vw,72px);letter-spacing:-.045em;line-height:1.08;margin-bottom:24px; }
.principle-copy p { font-size:clamp(18px,1.65vw,28px);line-height:1.5;max-width:21em;color:var(--muted); }
.principle-copy a { display:inline-flex;min-height:44px;align-items:center;margin-top:26px;font-size:16px;border-bottom:1px solid currentColor; }
.principle-row:nth-of-type(2) .principle-art { grid-column:2;grid-row:1; }
.principle-row:nth-of-type(2) .principle-copy { grid-column:1;grid-row:1; }
@media(max-width:640px){.design-principles{padding-top:65px}.design-principles > h2{font-size:13vw;margin-bottom:35px}.principle-row{display:flex;flex-direction:column;align-items:stretch;gap:28px;min-height:0;padding:35px 0}.principle-art{height:90vw;min-height:300px}.principle-copy h3{font-size:11vw}.principle-copy p{font-size:19px}}
/* Monopo's orbit cue and large paired art/text stages, in Dintsen's palettes. */
.hero-explore.hero-orbit { position:relative;display:grid;place-items:center;width:114px;height:114px;gap:0;justify-self:end;color:var(--hero-ink); }
.hero-explore .hero-orbit-ring { width:114px;height:114px;max-width:none;overflow:visible;fill:currentColor;animation:orbit-turn 26s linear infinite;font-size:9.3px;letter-spacing:1.5px; }
.hero-orbit-center { position:absolute;inset:30px;display:grid;place-items:center;font-size:31px;line-height:1; }
.hero-orbit-center sup { position:absolute;top:4px;right:6px;font-size:11px; }
.hero-explore .hero-orbit-center svg { position:absolute;width:24px;height:24px;opacity:0;transform:translateY(-8px);transition:opacity 220ms,transform 220ms; }
.hero-orbit:hover .hero-orbit-center { font-size:0; }
.hero-orbit:hover .hero-orbit-center sup { opacity:0; }
.hero-orbit:hover .hero-orbit-center svg { opacity:1;transform:none; }
.hero-orbit:focus-visible { outline:2px solid currentColor;outline-offset:4px;border-radius:50%; }
@keyframes orbit-turn { to { transform:rotate(360deg); } }
.design-principles { position:relative;isolation:isolate; }
.principles-canvas { position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none; }
.principles-canvas[hidden] { display:none; }
.principle-copy,.design-principles > h2 { position:relative;z-index:2; }
.principle-art { background:var(--paper);border-radius:0; }
.principle-art img { object-fit:contain; }
.principle-art[data-context=ready] img { opacity:0; }
@media(max-width:640px){.hero-explore.hero-orbit{width:96px;height:96px;justify-self:end;margin-right:66px}.hero-explore .hero-orbit-ring{width:96px;height:96px}.hero-orbit-center{inset:22px}}
@media(prefers-reduced-motion:reduce){.hero-explore .hero-orbit-ring{animation:none}.hero-orbit-center svg{transition:none}}