@font-face{font-family:PegBody;src:url('fonts/IBMPlexSansKR-Medium.woff')}@font-face{font-family:PegBold;src:url('fonts/IBMPlexSansKR-SemiBold.woff')}@font-face{font-family:PegDisplay;src:url('fonts/DoHyeon-Regular.ttf')}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#101715;color:#f5e8cb;font-family:PegBody,sans-serif}body{display:grid;place-items:center}main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}canvas{display:block;max-width:100%;max-height:calc(100dvh - 42px);width:auto;height:auto;outline:none;object-fit:contain;background:#101715}#gate{position:absolute;inset:0 0 42px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#172522}#gate[hidden]{display:none}h1{font-family:PegDisplay,sans-serif;font-weight:400;font-size:clamp(36px,8vw,72px);margin:0 0 20px;color:#f5e8cb}p{font-size:16px;line-height:1.7;max-width:560px}button{cursor:pointer;color:#f5e8cb;background:#983e30;border:2px solid #e1bb6a;border-radius:6px;font:inherit;padding:12px 32px}button:focus-visible{outline:3px solid #f5e8cb;outline-offset:4px}button:disabled{opacity:.55;cursor:wait}#start{font-size:20px;margin:12px}#hint{color:#b8b8a7;font-size:14px}progress{width:min(420px,80vw);height:12px;accent-color:#dfba67;margin:16px}footer{height:42px;flex-shrink:0;width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:0 16px;color:#b8b8a7;font-size:12px}footer button{font-size:12px;padding:3px 12px;background:transparent;border-color:#526258}main:fullscreen{background:#101715}main:fullscreen canvas{max-height:100dvh}main:fullscreen footer{display:none}@media(max-width:600px){footer span:nth-child(2){display:none}}