@font-face{font-family:Instrument Sans;src:url('/fonts/InstrumentSans-Regular.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:Instrument Sans;src:url('/fonts/InstrumentSans-Medium.ttf') format('truetype');font-display:swap;font-weight:500 800}
:root{font-family:Instrument Sans,Arial,sans-serif;color:#28231f;background:#f5eee2;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{min-height:100dvh}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible,.stage:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.page{position:relative;width:100%;height:100dvh;min-height:390px;overflow:hidden;background:var(--page-bg,#f5eee2);transition:background-color .55s ease}
.topbar,.bottom-bar{position:absolute;z-index:2;left:clamp(22px,3.5vw,54px);right:clamp(22px,3.5vw,54px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar{top:clamp(22px,3.5vw,42px)}
.topbar p,.bottom-bar p{margin:0}
.wordmark{font-size:clamp(24px,2.35vw,34px);line-height:1;font-weight:800;letter-spacing:-.075em;white-space:nowrap}
.wordmark span{font-weight:400}
.wordmark i{font-style:normal;color:#ed6e4e}
.topbar p,.top-link,.bottom-bar{font-size:13px;letter-spacing:-.01em}
.topbar p{margin-left:auto;margin-right:auto}
.top-link,.bottom-bar a{white-space:nowrap}
.top-link span,.bottom-bar a span{margin-left:5px}
.stage{position:absolute;inset:0;z-index:1;display:grid;place-items:center;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.stage:active{cursor:grabbing}
.stage:focus-visible{outline-offset:-8px}
canvas{display:block;width:100%;height:100%}
.centre-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:11px;text-align:center;pointer-events:none;transition:opacity .2s ease,transform .3s ease;font-size:12px;line-height:1.22;letter-spacing:.035em;color:#73685e}
.centre-note .asterisk{color:#e76647;font-size:28px;line-height:1;transition:transform .6s ease}
.stage.is-dragging .centre-note,.stage.is-popping .centre-note{opacity:0;transform:translate(-50%,-50%) scale(.75)}
.bottom-bar{bottom:clamp(23px,3.6vw,43px)}
.bottom-bar p{display:flex;align-items:center;gap:9px}
.hint-dot{width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%;display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.topbar p{display:none}.topbar,.bottom-bar{left:21px;right:21px}.topbar{top:24px}.bottom-bar{bottom:25px;align-items:flex-end}.bottom-bar p{max-width:150px;line-height:1.3}.bottom-bar a{font-size:12px}.centre-note{font-size:11px}}
@media(max-height:520px){.topbar{top:15px}.bottom-bar{bottom:15px}.centre-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.page,.centre-note,.centre-note .asterisk{transition:none}}