:root{color-scheme:dark;--navy:#081d28;--ink:#e9e2ce;--gold:#d7b77b;--muted:#a8b5b3;--line:#d7b77b30;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--navy);color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:radial-gradient(ellipse at 90% 10%,#1b4a4b66,transparent 50%),var(--navy)}button,input,select{font:inherit}button,a,label,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}button:focus-visible,select:focus-visible,.button:focus-visible{outline:3px solid #f2dca8;outline-offset:4px}
.tracking-choice{pointer-events:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 9px;max-width:430px}.tracking-choice button{border:1px solid #d7b77b99;border-radius:99px;padding:10px 15px;min-height:40px;background:#081d28dd;color:#efd8aa;font-size:12px;font-weight:700}.tracking-choice button[aria-pressed="true"]{background:#dfc18b;color:#102d39}.tracking-choice small{color:#fff;font-size:10px;background:#081d28b3;border-radius:99px;padding:6px 9px}
#home{max-width:560px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom))}.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:.14em}.brand-mark{font-size:33px;color:var(--gold);line-height:1}.brand small{display:block;color:var(--muted);font-size:8px;font-weight:500;letter-spacing:.2em;margin-top:5px}.test-badge{margin-left:auto;border:1px solid var(--line);border-radius:99px;color:var(--gold);font-size:8px;padding:6px 8px;letter-spacing:.1em;white-space:nowrap}.intro{margin:32px 0 24px}.eyebrow{font-size:10px;letter-spacing:.24em;color:var(--gold);font-weight:600;margin:0 0 12px}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,9vw,52px);font-weight:400;line-height:1.05;letter-spacing:-.04em;margin:0 0 16px}.lead{font-size:15px;line-height:1.55;color:#b8c6c2;margin:0}.card{border:1px solid var(--line);border-radius:18px;background:#0b2632;overflow:hidden}.empty-preview{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:radial-gradient(ellipse at 50% 100%,#1b555c99,transparent 75%),#0b2734;border-bottom:1px solid var(--line)}.empty-preview svg{width:50px;stroke:var(--gold);stroke-width:1.5;fill:none}.empty-preview svg path{fill:var(--gold);stroke:none}.empty-preview span{font-family:Georgia,serif;font-size:21px}.empty-preview small{font-size:11px;color:var(--muted)}#clip{display:none;width:100%;max-height:37vh;min-height:130px;background:#000;object-fit:contain}#clip.chosen{display:block}.video-actions{padding:17px}.button{border:0;display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:49px;border-radius:11px;font-size:14px;font-weight:700;letter-spacing:.01em;text-align:center;padding:14px 20px;cursor:pointer}.primary{background:linear-gradient(135deg,#eed8a3,#c5a265);color:#102d39;box-shadow:0 6px 20px #0002}.small-note{font-size:11px;line-height:1.55;color:var(--muted);margin:10px 0 0}.centered{text-align:center}#videoFile{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}#videoFile:focus-visible+.small-note{outline:2px solid var(--gold)}.target-card{display:flex;gap:16px;align-items:center;padding:13px;margin:14px 0 19px}.target-card img{border-radius:8px;border:1px solid #c5a26566;width:76px;height:76px;object-fit:contain;background:#000}.target-copy{flex:1}.target-copy label{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.target-copy select{border:0;background:transparent;color:var(--ink);font-size:18px;font-family:Georgia,serif;padding:2px 22px 2px 0;max-width:100%}.target-copy p{font-size:10px;color:var(--muted);margin:6px 0 0}.start-button{width:100%;font-size:15px;min-height:53px}.error{border:1px solid #ffb1a766;border-radius:10px;background:#3d1d27;color:#ffccc1;font-size:13px;padding:13px;line-height:1.5}footer{text-align:center;font-size:9px;color:#829895;margin:25px 0 4px;line-height:1.5}
body.camera-active{height:100dvh;overflow:hidden;background:transparent}#arMount{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden}#arMount>video{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:0!important;background:#000}#arMount a-scene{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;z-index:1!important}#arMount canvas{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;background:transparent!important;z-index:1!important}body.camera-active #clip{position:fixed!important;left:-10000px!important;top:0!important;width:1px!important;height:1px!important;min-height:0!important;opacity:.01!important;pointer-events:none!important;display:block!important}#cameraUi{position:fixed;inset:0;z-index:5;pointer-events:none;color:#fff}.camera-top{position:absolute;top:0;left:0;right:0;display:flex;gap:12px;align-items:center;background:#081d28c9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;pointer-events:auto}.camera-top p{flex:1;font-size:13px;font-weight:650;margin:0;text-align:center}.round-button{width:39px;height:39px;flex-shrink:0;border:1px solid #d7b77b66;border-radius:50%;background:#081d2880;color:var(--gold);font-size:22px;line-height:1}.opening{position:absolute;inset:0;background:#081d28e8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.opening p{font-size:18px;margin:0}.opening small{color:var(--muted);font-size:12px}.spinner{width:32px;height:32px;border:2px solid #d7b77b33;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.scan-guide{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(65vw,300px);aspect-ratio:1}.scan-guide span{position:absolute;inset:0;border:1px solid #e2c68a99;border-radius:18px;box-shadow:0 0 0 500px #0002}.scan-guide p{position:absolute;left:-20px;right:-20px;bottom:-47px;font-size:13px;text-align:center;text-shadow:0 1px 6px #000;background:#081d28b3;border-radius:99px;padding:9px}.camera-bottom{position:absolute;bottom:0;left:0;right:0;padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px))}.camera-bottom p{text-align:center;font-size:11px;line-height:1.4;text-shadow:0 1px 5px #000;margin:0 0 12px}.control-bar{display:flex;align-items:center;justify-content:center;gap:7px;padding:6px;border-radius:99px;background:#081d28b3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:auto;max-width:430px;margin:0 auto}.control-bar button{flex:1;min-width:0;border:1px solid #d7b77b80;background:#0c2b3cdd;color:#fff;border-radius:99px;font-weight:700;font-size:12px;min-height:42px;padding:10px 8px}.debug-panel{position:absolute;top:calc(75px + env(safe-area-inset-top,0px));right:10px;width:min(310px,calc(100vw - 20px));max-height:calc(100dvh - 190px);overflow:auto;border:1px solid #d7b77b80;border-radius:15px;background:#081d28ed;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:15px;pointer-events:auto}.debug-heading{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:14px}.debug-heading button{font-size:25px;border:0;background:none;color:var(--ink);line-height:1;padding:3px 6px}.debug-panel label{display:block;font-size:12px;margin:15px 0}.debug-panel select{display:block;width:100%;background:#102f3e;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px;margin-top:7px;font-size:12px}.debug-panel input{width:100%;accent-color:var(--gold);display:block;margin-top:10px}.debug-panel output{float:right;color:var(--gold)}.secondary-button{border:1px solid #d7b77b66;background:transparent;color:var(--ink);border-radius:8px;padding:9px 12px;width:100%;font-size:12px}.debug-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:10px;line-height:1.55;color:#b7cac9;margin:15px 0;padding:10px;border-radius:8px;background:#0003}@media(min-width:700px){#home{padding-top:30px}.intro{margin-top:42px}}@media(max-width:360px){#home{padding-left:17px;padding-right:17px}.test-badge{font-size:7px;padding:5px}.brand{font-size:13px}.intro{margin-top:26px}}

/* ---- Honu video coaster (v3 test) additions ---- */
.target-copy .label{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.target-copy strong{font-family:Georgia,serif;font-size:20px;font-weight:400}
.loading-card{padding:15px 17px;margin:0 0 16px}.progress{height:6px;border-radius:99px;background:#d7b77b22;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#c5a265,#eed8a3);transition:width .25s}.loading-card p{font-size:12px;color:var(--muted);margin:10px 0 0}.loading-card.done .progress span{width:100%!important}
.start-button{font-size:18px;min-height:60px;border-radius:14px;letter-spacing:.02em}.start-button.ready{animation:glow 2.4s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 0 0 6px #d7b77b33,0 6px 20px #0003}}
.button.small{min-height:42px;padding:10px 16px;font-size:13px}.link-button{border:0;background:none;color:var(--gold);font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:10px 6px;min-height:40px}
.recovery{border:1px solid #ffb1a766;border-radius:12px;background:#3d1d27;color:#ffccc1;font-size:13px;padding:14px;line-height:1.5;margin:14px 0}.recovery p{margin:0 0 10px}.recovery-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.watch-card{margin:6px 0 14px;padding:12px}.clip-holder{border:2px solid var(--gold);border-radius:12px;background:var(--navy);padding:8px;display:flex;justify-content:center}.clip-holder #clip{display:block;width:min(100%,calc(min(62vh,560px) * 9 / 16));height:auto;max-height:none;min-height:0;aspect-ratio:720/1280;object-fit:contain;background:#000;border-radius:6px}.watch-actions{text-align:center}
.test-details{margin:18px 0 0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12px;color:var(--muted)}.test-details summary{cursor:pointer;color:var(--gold);font-weight:600}.field{display:block;font-size:12px;margin:12px 0 6px}.test-details select{display:block;width:100%;background:#102f3e;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px;margin-top:6px;font-size:12px}.diag-file{margin-top:14px;border-top:1px dashed var(--line);padding-top:6px}.diag-file input{font-size:11px;max-width:100%;margin:4px 0 8px}
.report{white-space:pre-wrap;overflow-wrap:anywhere;font-size:10px;line-height:1.5;color:#b7cac9;margin:12px 0;padding:10px;border-radius:8px;background:#0003;max-height:260px;overflow:auto}
.stages{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.stages li{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:11px;color:var(--ink)}.stages li b{display:block;font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:600}.stages li.ok{border-color:#7fc8a0aa}.stages li.bad{border-color:#ff9c8caa;color:#ffccc1}.stages li.wait{border-color:#d7b77b88}
.status-wrap{flex:1;min-width:0}.status-wrap p{margin:0;text-align:center}.stage-line{font-size:10px!important;font-weight:500!important;color:#c9d6d3;margin-top:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opening .link-button{pointer-events:auto;margin-top:8px;font-size:14px}
.small-watch{flex:.8!important;font-size:11px!important;opacity:.9}
.copy-fallback{position:fixed;left:10px;right:10px;bottom:10px;height:40vh;z-index:20;font-size:10px;background:#081d28;color:#e9e2ce;border:1px solid var(--gold);border-radius:10px;padding:8px}
.clip-holder #plainClip{display:block;width:min(100%,calc(min(62vh,560px) * 9 / 16));height:auto;aspect-ratio:720/1280;object-fit:contain;background:#000;border-radius:6px}

/* ---- v3-stick: plain, unbranded "Tap for sound" hint (shown only if the browser refuses sound at target-found) ---- */
.sound-hint{position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top,0px));transform:translateX(-50%);pointer-events:auto;border:0;border-radius:6px;background:#000000a6;color:#fff;font:500 12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:7px 11px;min-height:32px}

/* ===== v3.1 opening screen: copied from the live Honu View in 3D page =====================================
   Source: https://honu-ar.netlify.app/ (reference/live/honu-ar-index.html, <style> lines 13 and 17-23), fetched read-only
   2026-10-20. Rules are verbatim except the selector #startBtn -> #startCamera (this page's existing button id). */
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#000; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
#blackScreen { position:fixed; inset:0; background:#000; z-index:2; pointer-events:none; }
#prompt { position:fixed; top:0; left:0; right:0; padding:12px 14px; font:700 15px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#fff; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:9999; display:none; text-align:center; }
@supports (padding-top: env(safe-area-inset-top)) { #prompt { padding-top:calc(12px + env(safe-area-inset-top)); } }
#startCamera { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:22px 34px; border-radius:999px; font:900 20px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#000; background:rgba(255,255,255,.95); z-index:9999; border:0; box-shadow:0 12px 34px rgba(0,0,0,.4); }
#startHint { position:fixed; top:calc(50% + 64px); left:50%; transform:translateX(-50%); max-width:320px; padding:10px 12px; border-radius:14px; font:700 13px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:rgba(255,255,255,.92); background:rgba(0,0,0,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); text-align:center; z-index:9999; }
#hint { position:fixed; bottom:64px; left:12px; right:12px; padding:10px 12px; border-radius:12px; font:650 12px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#fff; background:rgba(0,0,0,.58); z-index:9999; display:none; text-align:center; }
#backLink { position:fixed; bottom:14px; left:14px; padding:10px 12px; border-radius:999px; font:800 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:rgba(255,255,255,.92); background:rgba(0,0,0,.55); text-decoration:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:9999; border:1px solid rgba(255,255,255,.12); }
/* ===== end of copied rules. v3.1 own rules below (not on the live page) ===================================== */
/* The live page has no box-sizing reset; this page's older stylesheet sets *{box-sizing:border-box}. Restore the browser
   default on the copied elements so their boxes are identical to the live page. */
#blackScreen, #prompt, #startHint, #hint, #backLink { box-sizing:content-box; }  /* not the button: buttons are border-box by browser default on both pages */
/* Fail states: plain text on the black screen with tap-to-retry, in the start-hint position (no card). */
.recovery { position:fixed; top:calc(50% + 64px); left:50%; transform:translateX(-50%); width:min(320px, calc(100vw - 28px)); margin:0; padding:0; border:0; border-radius:0; background:none; color:#fff; font:650 13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; text-align:center; z-index:9999; }
.recovery p { margin:0 0 10px; }
.recovery-actions { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.recovery .link-button { background:none; border:0; padding:6px 2px; color:#fff; font-family:inherit; font-size:13px; font-weight:700; line-height:1.2; text-decoration:underline; }
/* Watch video (fail fallback): full screen on black. */
.watch-card { position:fixed; inset:0; z-index:10000; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:14px; margin:0; border:0; border-radius:0; }
.watch-card[hidden] { display:none; }
.watch-card .clip-holder { width:min(100%, 420px); }
.watch-card video { width:100%; max-height:80dvh; background:#000; }
.watch-card .link-button { color:#fff; background:none; border:0; text-decoration:underline; font-family:inherit; }
/* The earlier test screen and the camera test chrome appear only with ?debug=1. */
body:not(.debug) #home { display:none; }
html:has(body.debug), body.debug { overflow:auto; height:auto; }
body.debug #home { position:relative; z-index:3; }
body:not(.debug) .camera-top, body:not(.debug) #opening, body:not(.debug) #scanGuide, body:not(.debug) .camera-bottom, body:not(.debug) #debugPanel { display:none !important; }
/* ?debug=1: the old test chrome has its own Back / status bar; keep the copied overlays from covering its buttons. */
body.debug #backLink { display:none; }
body.debug #prompt { pointer-events:none; }

/* ===== v3.2: "Watch video" = mirror of #backLink (same values as live line 23 / rule above; right instead of left) ===== */
#watchVideo { position:fixed; bottom:14px; right:14px; left:auto; margin:0; padding:10px 12px; border-radius:999px; font:800 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:rgba(255,255,255,.92); background:rgba(0,0,0,.55); text-decoration:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:9999; border:1px solid rgba(255,255,255,.12); box-sizing:content-box; -webkit-appearance:none; appearance:none; cursor:pointer; }
body.debug #watchVideo { display:none !important; }
/* Watch opened from camera mode: the video fills the screen (contain, on black); "Close video" sits where Watch video was. */
body.ar-watch .watch-card { padding:0; }
body.ar-watch .watch-card .clip-holder { width:100%; height:100%; border:0; border-radius:0; padding:0; background:#000; }
body.ar-watch .watch-card video { width:100%; height:100%; max-height:none; object-fit:contain; }
/* v3.3: compact and at the TOP-right in watch mode, clear of the burned-in subtitles (Derek's v3.2 iPhone screenshot). */
body.ar-watch .watch-actions { position:fixed; top:calc(env(safe-area-inset-top) + 10px); right:calc(env(safe-area-inset-right) + 12px); bottom:auto; margin:0; z-index:10001; }
body.ar-watch #closeWatch { margin:0; min-height:0; padding:6px 10px; border-radius:999px; font:800 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:rgba(255,255,255,.92); background:rgba(0,0,0,.55); text-decoration:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.12); box-sizing:content-box; }
body.camera-active.ar-watch #clip { position:static!important; left:auto!important; top:auto!important; width:100%!important; height:100%!important; opacity:1!important; pointer-events:auto!important; aspect-ratio:auto; object-fit:contain; border-radius:0; }