:root{color-scheme:light;--ink:#5d455f;--muted:#78657b;--paper:#f3eef7;--accent:#9571ad}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 15% 0%,#fcf6ec 0,transparent 55%),var(--paper);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;min-height:100svh}
main{width:min(1160px,calc(100% - 48px));margin:0 auto;padding:34px 0 24px}
header{text-align:center;padding:0 0 24px}
.brand{font-size:.875rem;letter-spacing:.16em;margin:0 0 20px;color:var(--muted)}
.brand span{margin-left:1em;padding-left:1em;border-left:1px solid #c9b8d1;letter-spacing:.08em}
h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:500;letter-spacing:.12em;line-height:1.5;margin:0 0 8px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
.subtitle{margin:0;font-size:1rem;letter-spacing:.08em;line-height:1.8}
.player-wrap{overflow:hidden;background:#f2edf5;box-shadow:0 14px 48px #5135661c;border-radius:12px;border:1px solid #ffffffa0}
video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#f2edf5}
.hint{text-align:center;font-size:.875rem;line-height:1.9;color:var(--muted);margin:20px 0 0}
.mobile{display:none}
footer{text-align:center;padding-top:22px;font-size:.9375rem;line-height:1.7}
footer p{margin:4px 0}
.note,.copyright{font-size:.8125rem;color:var(--muted)}
.copyright{margin-top:14px}
a{color:#754990;text-underline-offset:3px}
a:focus-visible,video:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.play-row{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.play-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 24px;border:1px solid #78548d;border-radius:999px;background:#78548d;color:#fff;font:inherit;font-size:1rem;cursor:pointer;line-height:1.5}
.play-button:hover{background:#654276}
.play-button:focus-visible{outline:3px solid #78548d;outline-offset:4px}
.play-button[hidden]{display:none}
.duration{font-size:.875rem;color:var(--muted);white-space:nowrap}
#error{padding:14px 18px;border:1px solid #aa8c97;border-radius:8px;line-height:1.8;text-align:center}
@media(max-width:600px){main{width:calc(100% - 24px);padding:28px 0 20px}.brand{margin-bottom:22px}header{padding-bottom:24px}h1{font-size:1.9rem;letter-spacing:.08em}.subtitle{font-size:.9rem;letter-spacing:.025em}.player-wrap{border-radius:7px}.mobile{display:block}.hint{margin-top:22px;font-size:.875rem;padding:0 8px}footer{padding-top:28px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}