body{width:100vw;height:100dvh;min-height:600px;background:#f8f8f8;overflow:hidden}
main{position:absolute;inset:0;height:auto;display:block;padding:0}
.intro{position:absolute;left:50%;top:81.2px;transform:translateX(-50%);width:max-content;text-align:center;z-index:2;pointer-events:none}
.intro p{font-size:18px;line-height:1.65;letter-spacing:-.025em;font-weight:400;margin:0;color:#343432}
.ink-stage{position:absolute;width:min(96vw,1000px);height:min(62vh,510px);left:50%;top:47%;transform:translate(-50%,-50%);touch-action:none}
.ink-stage canvas{width:100%;height:100%;display:block}
.actions{position:absolute;left:50%;bottom:94px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2}
.hint{margin:0;font-size:12px;white-space:nowrap}
.silver-button{font-family:inherit;max-width:none}.silver-label{font-size:16px}
.silver-material{animation:silver-drift 8s cubic-bezier(.77,0,.175,1) infinite}
.silver-sheen{position:absolute;top:-50%;bottom:-50%;left:-55%;width:34%;z-index:4;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8) 50%,transparent);transform:skewX(-30deg);pointer-events:none;opacity:0}
.silver-button.is-playing .silver-sheen{animation:silver-sweep .9s ease-in-out 1 both}
@keyframes silver-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(13%)}}
@keyframes silver-sweep{from{left:-55%;opacity:1}to{left:125%;opacity:1}}
.pause{font:12px Pretendard,sans-serif;border:1px solid transparent;background:transparent;color:#696966;min-width:44px;height:44px;border-radius:999px;padding:0 12px;touch-action:manipulation;cursor:pointer}
.pause{position:absolute;bottom:24px;right:24px;border-color:#ccc;font-size:16px;width:44px;padding:0;z-index:3}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid #121212;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.load-error{position:absolute;left:15%;right:15%;top:44%;text-align:center;font-size:15px;line-height:1.6}
@media(max-width:900px) and (min-height:950px){.intro{top:210px}.ink-stage{top:47%;height:52vh}.actions{bottom:165px}}
@media(max-width:620px){.pause{right:16px}.intro{top:81.2px}}
@media(prefers-reduced-motion:reduce){.silver-material,.silver-button.is-playing .silver-sheen{animation:none}.pause{opacity:.4}}
