:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: Arial, Helvetica, sans-serif; }
.interface { position: fixed; inset: 0; z-index: 20; padding: max(22px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom)); color: #fff; pointer-events: none; }
.identity { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.62); text-shadow: 0 1px 12px rgba(0,0,0,.32); }
.artist { font: italic 25px/1 Georgia, 'Times New Roman', serif; white-space: nowrap; }
.work { display: grid; gap: 3px; max-width: 58%; text-align: right; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; line-height: 1.25; }
.work span:last-child { opacity: .62; }
.reticle { position: absolute; left: 50%; top: 48%; width: 7px; height: 7px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 1px 8px rgba(0,0,0,.25); }
.instruction { position: absolute; left: 50%; top: 22%; width: min(80vw, 350px); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 13px 13px 13px 17px; border: 1px solid rgba(255,255,255,.48); border-radius: 18px; background: rgba(20,20,20,.30); box-shadow: 0 5px 24px rgba(0,0,0,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; transition: opacity .45s ease, transform .45s ease; }
.instruction p { flex: 1; margin: 0; font-size: 10px; line-height: 1.45; letter-spacing: .035em; }
.instruction button { width: 29px; height: 29px; flex: 0 0 29px; padding: 0 0 2px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(0,0,0,.08); color: #fff; font: 300 20px/1 Arial,sans-serif; }
.instruction.is-hiding { opacity: 0; transform: translate(-50%, -8px); pointer-events: none; }
.capture { position: absolute; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); width: 45px; height: 45px; padding: 0; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(0,0,0,.12); box-shadow: 0 2px 16px rgba(0,0,0,.18); backdrop-filter: blur(8px); pointer-events: auto; }
.capture::before { content: ''; position: absolute; left: 12px; top: 14px; width: 19px; height: 14px; border: 1.5px solid #fff; border-radius: 3px; }
.capture::after { content: ''; position: absolute; left: 18px; top: 17px; width: 7px; height: 7px; border: 1.5px solid #fff; border-radius: 50%; }
a-scene { position: fixed !important; inset: 0; }