:root{color-scheme:light;--ink:#3f3040;--paper:#f9eff0;--muted:#75606e;--edge:#b68e9d55;--cover:#f3d9df;--link:#185e98}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 18% 0,#e9eff3,transparent 65%),repeating-linear-gradient(0deg,#bdcad5 0 1px,#c2ced8 1px 3px);font:18px/1.65 Georgia,'Times New Roman',serif}
body.spider{--ink:#253e35;--paper:#eff1e5;--muted:#5e7066;--edge:#8b9c7c66;--cover:#d7e2cb}
.demo-page{max-width:1180px;margin:26px auto 48px;border:1px solid #fff9;border-radius:12px;overflow:hidden;box-shadow:0 20px 64px #15273738,0 2px 7px #15273724;background:var(--paper)}
a{color:var(--link);text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:3px solid #287dcb;outline-offset:4px}
.skip{position:absolute;top:-100px;left:20px;z-index:4;padding:12px;background:white}
.skip:focus{top:12px}
.demo-cover{padding:24px 38px 30px;background:radial-gradient(ellipse at 80% 0,#fff8,transparent 60%),linear-gradient(var(--cover),var(--paper))}
.hierarchy-nav{display:flex;flex-wrap:wrap;gap:9px;width:fit-content;padding:8px 12px;border:1px solid #fff9;border-radius:8px;background:#ffffff70;box-shadow:0 2px 6px #4931380c;font:12px/1.5 Tahoma,Arial,sans-serif}
.demo-cover h1{font-size:clamp(48px,8vw,84px);font-weight:400;line-height:1.04;letter-spacing:-.04em;margin:36px 0 18px}
.demo-cover>p{max-width:740px;font-size:21px;line-height:1.55;margin:0}
.play-area{margin:0 26px 30px;border:1px solid #fff;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#fff9,#e4ebefaa);box-shadow:0 8px 28px #28353721,inset 0 1px #fff}
.demo-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;border-bottom:1px solid #ffffff9e;font:13px/1.5 Tahoma,Arial,sans-serif}
.demo-toolbar a{margin-left:auto}
.button,button{display:inline-flex;justify-content:center;align-items:center;gap:8px;font:700 14px/1.4 Tahoma,Arial,sans-serif;padding:11px 17px;border:1px solid #6084a2;border-radius:6px;background:linear-gradient(#f4fbff,#c7e1f3 48%,#b0d0e9 49%,#d0e8f9);color:#173f60;box-shadow:inset 0 1px #fff,0 2px 4px #0001;cursor:pointer;text-decoration:none}
button:hover,.button:hover{background:linear-gradient(#fff,#d4eafb 48%,#beddf6 49%,#e7f4ff)}
button:active{transform:translateY(1px)}
button[hidden]{display:none}
.demo-stage{position:relative;min-height:560px;height:min(78svh,760px);background:#e6d1d1;isolation:isolate}
.spider .demo-stage{background:#6c7e62}
.demo-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--cover)}
.demo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--cover)}
.start-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;background:#f7e5e782;backdrop-filter:blur(3px)}
.spider .start-panel{background:#1b30203d}
.start-panel>div{max-width:390px;text-align:center;padding:23px 26px;border:1px solid #ffffffe0;border-radius:12px;background:#ffffffec;box-shadow:0 8px 28px #20312126}
.start-panel p{font:14px/1.6 Tahoma,Arial,sans-serif;margin:15px 0 0}
.start-panel[hidden]{display:none}
.demo-stage:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0;min-height:0}
.demo-stage:fullscreen iframe{height:100%}
.demo-hint{margin:0;padding:10px 16px;font:12px/1.6 Tahoma,Arial,sans-serif;color:var(--muted);background:#ffffff60}
.demo-copy{padding:8px 38px 36px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.demo-copy h2{font-size:28px;line-height:1.2;font-weight:400;margin:0 0 16px}
.demo-copy p{margin:0 0 18px}
.controls{margin:0}
.controls>div{display:grid;grid-template-columns:100px 1fr;gap:10px;border-top:1px solid var(--edge);padding:10px 0;font:14px/1.6 Tahoma,Arial,sans-serif}
.controls dt{font-weight:700}
.controls dd{margin:0}
kbd{font:12px/1.3 Tahoma,Arial,sans-serif;background:#fff9;border:1px solid #aab8c4;border-radius:3px;padding:2px 5px;white-space:nowrap}
.demo-note{padding:0 38px 24px;color:var(--muted);font:13px/1.7 Tahoma,Arial,sans-serif}
.demo-note p{margin:0 0 10px}
@media(max-width:700px){.demo-page{margin:0;border:0;border-radius:0}
.demo-cover{padding:18px 22px 26px}
.demo-cover h1{margin-top:30px}
.demo-cover>p{font-size:19px}
.play-area{margin:0 10px 24px}
.demo-toolbar{gap:10px;padding:10px}
.demo-toolbar a{margin-left:0}
.demo-stage{min-height:420px;height:65svh}
.demo-copy{grid-template-columns:1fr;gap:25px;padding:6px 22px 24px}
.demo-note{padding:0 22px 24px}
.start-panel{padding:15px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}
}