html:has(.marble-run) { scrollbar-gutter:auto; }
html:has(.marble-run), body:has(.marble-run) { margin:0; padding:0; background:#f7f6f2; color-scheme:light; }
.marble-run { display:grid; grid-template-rows:minmax(300px,1fr) auto; height:100svh; min-height:480px; color:#232621; background:#f7f6f2; font-family:Inter,system-ui,sans-serif; }
.marble-run * { box-sizing:border-box; }
.mr-stage { position:relative; width:100%; border-bottom:1px solid #d9d9cf; overflow:hidden; }
.mr-stage canvas { display:block; width:100%; height:100%; min-height:0; }
.mr-details { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:28px 36px 25px; }
.mr-heading { min-width:0; }
.mr-heading a { color:#6b7066; font-size:10px; letter-spacing:1.6px; text-decoration:none; }
.mr-heading h1 { margin:0 0 6px; font-size:clamp(25px,3vw,42px); letter-spacing:-1.8px; font-weight:500; line-height:1.15; }
.mr-heading h1 span { color:#cf5d35; }
.mr-heading p { margin:0; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:#74786d; }
.mr-controls { display:flex; align-items:center; flex-shrink:0; }
.mr-buttons { display:flex; gap:8px; flex-shrink:0; }
.mr-buttons button { border:1px solid #d4d6cb; border-radius:6px; padding:11px 17px; background:transparent; font:inherit; font-size:12px; cursor:pointer; min-width:85px; }
.mr-buttons button:first-child { background:#272b24; color:#fff; border-color:#272b24; }
.mr-buttons button:hover { box-shadow:0 2px 5px #272b2420; }
.mr-buttons span { margin-left:10px; }
.marble-run :focus-visible { outline:2px solid #b35634; outline-offset:5px; }
.marble-run .mr-fullscreen:focus { outline:none; }
.mr-footer { padding:21px 36px 30px; color:#777c6f; font-size:11px; line-height:1.8; }
.mr-footer p { margin:0; }
@media (max-width:1000px) {
  .mr-details { padding:24px 20px 22px; }
  .mr-footer { padding:20px; }
}

.mr-fullscreen { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #d4d6cb; border-radius:6px; color:#69745c; background:#f7f6f2e6; cursor:pointer; transition:opacity .2s ease; }
.mr-fullscreen[hidden], .mr-contract { display:none; }
.mr-fullscreen:hover { color:#232621; background:#e8e9e0; }
.mr-stage:fullscreen { width:100vw; height:100vh; border:0; background:#f7f6f2; }
.mr-stage:fullscreen canvas { height:100%; min-height:0; max-height:none; }
.mr-stage:fullscreen .mr-expand { display:none; }
.mr-stage:fullscreen .mr-contract { display:block; }
.mr-stage:fullscreen .mr-fullscreen.mr-idle { opacity:0; pointer-events:none; }
.mr-stage:fullscreen .mr-fullscreen:focus-visible { opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion:reduce) { .mr-fullscreen { transition:none; } }

@media (max-width:700px) {
  .mr-details { flex-direction:column; align-items:stretch; gap:22px; }
}