:root{color-scheme:dark;font-family:system-ui,-apple-system,"PingFang TC",sans-serif;background:#21152f;color:#fff8e8}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 15% 20%,#65404c,transparent 65%),#21152f}header{min-height:68px;padding:18px max(20px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #ffe0a624;font-size:14px}a{color:#ffdb91;text-decoration:none}a:hover{text-decoration:underline}#badge{color:#d7c6dd;font-size:12px}main{max-width:1160px;margin:auto;padding:48px 28px}#welcome{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px}.art{position:relative;aspect-ratio:4/5;border-radius:32px;overflow:hidden;box-shadow:0 24px 70px #10091680;border:1px solid #ffe3ae44}.art img{width:100%;height:100%;object-fit:cover}.pill{position:absolute;left:22px;bottom:24px;font-weight:800;letter-spacing:.2em;font-size:14px;padding:10px 18px;border-radius:20px;background:#24152dbb;backdrop-filter:blur(10px)}.eyebrow{color:#ffdb91;font-size:16px;letter-spacing:.12em}h1{font-size:clamp(38px,4.8vw,62px);line-height:1.2;letter-spacing:-.04em;margin:18px 0 24px}p{line-height:1.85;color:#e6d8e9}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.chips span{border:1px solid #e9c79140;border-radius:99px;padding:8px 13px;font-size:13px;color:#ffe0a6}button{font:inherit;font-weight:800;background:linear-gradient(#ffeaa5,#ffbc56);color:#382116;border:0;border-radius:16px;padding:18px 36px;min-height:58px;width:100%;cursor:pointer;box-shadow:0 5px 0 #ae692e}button:hover{filter:brightness(1.07)}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:6px}.fine{font-size:12px;line-height:1.8;color:#c5b3cf;margin-top:22px}#playing{text-align:center}#frame{height:min(800px,calc(100dvh - 116px));aspect-ratio:9/16;margin:auto;border-radius:18px;overflow:hidden;background:#1c1425;box-shadow:0 18px 65px #08041180}iframe{width:100%;height:100%;border:0;display:block}#playhint{font-size:12px;margin:9px 0}body.active main{padding:12px 0 0}[hidden]{display:none!important}@media(max-width:700px){header{min-height:54px;padding:14px 14px;font-size:12px}#badge{display:none}main{padding:26px 22px}#welcome{grid-template-columns:1fr;gap:24px}.art{aspect-ratio:16/8;border-radius:22px}.art img{object-position:50% 30%}.pill{bottom:12px;left:14px;font-size:10px}.eyebrow{font-size:13px;margin:0}h1{font-size:37px;margin:12px 0 16px}h1 br{display:none}.intro>p{font-size:14px}.chips{margin:18px 0}.intro>.fine{font-size:11px}body.active main{padding:0}#frame{height:calc(100dvh - 54px);max-width:100vw;border-radius:0}#playhint{display:none}}

.demo-footer{text-align:center;font-size:11px;color:#af9dbc;padding:14px 20px}body.active .demo-footer{display:none}

.language-controls{display:flex;align-items:center;gap:12px}#language{max-width:155px;min-height:36px;border:1px solid #ffe0a655;border-radius:10px;padding:5px 8px;background:#302038;color:#ffdb91;font:inherit}#language:focus-visible{outline:3px solid #fff;outline-offset:3px}@media(max-width:700px){header{gap:8px}#language{max-width:110px;font-size:12px}header>a{max-width:100px;font-size:11px;overflow-wrap:anywhere}header{height:72px}#frame{height:calc(100dvh - 72px)}}

.demo-info{margin-top:64px;padding-top:32px;border-top:1px solid #ffe0a633;max-width:850px}.demo-info h2{font-size:24px;line-height:1.4;margin-top:28px}.demo-info nav{line-height:2.2;margin-top:28px}.demo-info p{overflow-wrap:anywhere}body.active .demo-info{display:none}