:root{color-scheme:light;font-family:Georgia,'Times New Roman',serif;color:#4c4b3d;background:#eee8dc}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{display:grid;grid-template-rows:auto 1fr auto;height:100svh;min-height:320px;background:radial-gradient(ellipse at 46% 40%,#f7f2e7 0%,#eee8dc 65%,#e6dfd2 100%)}header{text-align:center;padding:clamp(22px,5.5vh,58px) 18px 0;pointer-events:none;z-index:1}.eyebrow{font:10px/1.4 system-ui,sans-serif;letter-spacing:.24em;color:#868572;margin:0 0 17px}h1{font-weight:400;letter-spacing:-.045em;font-size:clamp(32px,4.3vw,52px);margin:0;line-height:1.1}.intro{font-size:14px;color:#8a8372;margin:15px 0 0;letter-spacing:.015em}main{position:relative;min-height:0}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:default;-webkit-tap-highlight-color:transparent}footer{text-align:center;padding:0 20px max(24px,env(safe-area-inset-bottom));position:relative}#mood{font-style:italic;color:#8a7d68;font-size:14px;margin:0 0 24px;min-height:18px}.instruction{display:flex;align-items:center;justify-content:center;gap:10px;color:#676b55}.gesture{font:23px Georgia;color:#8c967d}.instruction p{font:12px/1.5 system-ui,sans-serif;letter-spacing:.015em;margin:0}.keys{font:10px/1.6 system-ui,sans-serif;color:#969180;margin:11px 0 0}.keys span{padding:0 7px}.controls{position:absolute;right:28px;bottom:25px;display:flex;gap:8px}button{background:transparent;border:1px solid #bfbba9;border-radius:30px;padding:8px 15px;color:#73755f;font:11px system-ui;cursor:pointer}button:hover{background:#e4dfd0}button:focus-visible{outline:2px solid #777f64;outline-offset:4px}.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){header{padding-top:35px}.eyebrow{font-size:8px;margin-bottom:14px}.intro{font-size:12px;margin-top:12px}#mood{font-size:13px;margin-bottom:22px}.keys{font-size:9px}footer{padding-bottom:59px}.controls{right:auto;left:50%;transform:translateX(-50%);bottom:14px}button{padding:6px 15px;font-size:10px}.instruction p{font-size:11px}}@media(max-height:500px){header{padding-top:14px}.eyebrow,.intro,.keys{display:none}h1{font-size:27px}#mood{margin-bottom:8px;font-size:12px}footer{padding-bottom:13px}.controls{left:auto;right:20px;bottom:12px;transform:none}main{min-height:0}}
@media(min-width:900px) and (min-height:600px){
  header{padding-top:clamp(22px,3.4vh,36px)}
  .eyebrow{margin-bottom:12px}
  .intro{margin-top:11px}
  #mood{margin-bottom:16px}
  footer{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}

.object-control{position:absolute;top:50%;left:50%;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}