:root{color-scheme:light;--ink:#302c24;--muted:#625b4d;--paper:#e8ddc9;--line:rgba(79,68,52,.3)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--paper)}
body{font-family:"Archivo Variable",Arial,sans-serif;color:var(--ink)}
#voyage{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;outline:none}
#voyage:focus-visible{outline:2px solid #594331;outline-offset:-5px}
.overlay{position:fixed;inset:0;pointer-events:none;z-index:2;padding:calc(26px + env(safe-area-inset-top)) calc(30px + env(safe-area-inset-right)) calc(27px + env(safe-area-inset-bottom)) calc(30px + env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:space-between}
.identity{display:flex;align-items:center;gap:9px;letter-spacing:.14em;font-weight:700;font-size:14px;line-height:1.2;width:max-content}
.identity-mark{width:16px;height:16px;border:1.6px solid #426e68;border-radius:50%;position:relative;transform:rotate(-23deg)}
.identity-mark:after{content:"";position:absolute;left:2px;right:2px;top:6px;border-top:1.5px solid #426e68;transform:rotate(-19deg)}
.identity-sub{font-size:11px;letter-spacing:.2em;font-weight:500;margin-left:5px;color:#5d6a60}
.lower-left{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));left:calc(30px + env(safe-area-inset-left));max-width:284px;padding:10px 13px 10px 11px;border-left:2px solid rgba(44,81,78,.72);background:linear-gradient(90deg,rgba(247,235,211,.89),rgba(247,235,211,.46))}
.caption{font-family:"Instrument Serif",Georgia,serif;font-size:21px;line-height:1.04;margin:0 0 9px}
.hint,.sample{font-size:12px;line-height:1.35;color:#473f34;margin:0}
.sample{margin-top:8px;font-size:11px;color:#554c3e}
.actions{position:absolute;right:calc(30px + env(safe-area-inset-right));bottom:calc(28px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;pointer-events:auto}
button{font:600 12px/1 "Archivo Variable",Arial,sans-serif;letter-spacing:.025em;border-radius:3px;min-height:44px;cursor:pointer;transition:background-color .2s,color .2s,transform .2s}
button:hover{transform:translateY(-2px)}
button:active{transform:translateY(0)}
button:focus-visible{outline:2px solid #284b49;outline-offset:3px}
.rock{background:#314f48;color:#f9f3e6;border:1px solid #314f48;padding:0 17px}
.rock:hover{background:#1e3934}
.motion{background:rgba(247,240,225,.72);border:1px solid var(--line);color:#433d32;padding:0 15px;min-width:64px}
.motion:hover{background:#f8f0df}
.hidden{display:none}
.fallback{position:fixed;inset:0;z-index:4;background:#e8ddc9;color:#302c24;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}
.fallback[hidden]{display:none}
.fallback strong{font-size:20px;letter-spacing:.15em}
.fallback p{max-width:300px;font-size:14px;line-height:1.5}
.no-webgl .overlay{display:none}
@media(max-width:650px){
  .overlay{padding:calc(20px + env(safe-area-inset-top)) calc(19px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(19px + env(safe-area-inset-left))}
  .identity{font-size:13px}.identity-sub{font-size:11px;letter-spacing:.15em}
  .lower-left{left:calc(19px + env(safe-area-inset-left));bottom:calc(88px + env(safe-area-inset-bottom));max-width:250px}
  .caption{font-size:20px}.hint{font-size:12px}.sample{font-size:11px}
  .actions{left:calc(19px + env(safe-area-inset-left));right:auto;bottom:calc(21px + env(safe-area-inset-bottom))}
  .rock{padding:0 15px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}}