:root {color-scheme: light dark; --paper: #fff; --ink: #202124; --muted: #5f6368; --line: #dadce0; --panel: #f8f9fa; --blue: #1a73e8;}
@media (prefers-color-scheme: dark) {:root {--paper: #17191d; --ink: #e8eaed; --muted: #bdc1c6; --line: #454950; --panel: #202328; --blue: #8ab4f8;}}
* {box-sizing: border-box;}
body {margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 Arial, sans-serif;}
header {padding: 20px 24px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line);}
a {color: var(--blue); text-decoration: none;}
main {max-width: 820px; padding: 36px 24px; margin: auto;}
h1 {font-size: clamp(36px, 6vw, 52px); line-height: 1.15; letter-spacing: -1.5px; margin: 0 0 16px; font-weight: 500;}
.intro {color: var(--muted); max-width: 540px; margin: 0 0 26px;}
.stage {position: relative; min-height: 280px; text-align: center; border-radius: 20px; background: var(--panel); padding: 12px 20px 20px;}
#character {width: 224px; height: 224px; margin: auto; cursor: default;}
#caption {margin: 2px auto; max-width: 420px; min-height: 48px;}
#menu-button {position: absolute; right: 12px; bottom: 12px; opacity: 0; pointer-events: none; width: 36px; height: 36px; padding: 0;}
.stage:hover #menu-button, .stage:focus-within #menu-button, .stage.menu-visible #menu-button {opacity: 1; pointer-events: auto;}
#menu {position: absolute; right: 12px; bottom: 54px; text-align: left; z-index: 2; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; width: min(260px, calc(100% - 24px)); max-height: min(440px, 60vh); overflow-y: auto; box-shadow: 0 8px 28px #0002;}
#menu label, #menu button {display: block; width: 100%; margin: 0 0 10px;}
button, select {font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 42px;}
button {cursor: pointer;}
button:focus-visible, select:focus-visible {outline: 2px solid var(--blue); outline-offset: 2px;}
label {display: grid; gap: 5px; font-size: 14px; color: var(--muted);}
.lab {margin-top: 30px;}
h2 {font-size: 19px; font-weight: 500; margin: 0 0 12px;}
.fields {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
#status, .foot {font-size: 14px; color: var(--muted);}
output {display: block; font: 12px/1.5 ui-monospace, monospace; color: var(--muted);}
#camera-view {width: 180px; max-width: 100%; border-radius: 8px; margin-top: 12px;}
@media (max-width: 480px) {header {padding: 16px;} main {padding: 24px 16px;} .stage {padding: 8px 12px 22px;} #character {width: 200px; height: 200px;} .fields {gap: 12px;} .intro {margin-bottom: 20px;}}
/* Fix-forward 10010908-3 (live check f7d523daf6): on a phone the menu opens as a sheet under the face, never over it. */
@media (max-width: 600px) {#menu {position: static; width: 100%; max-height: none; margin: 8px 0 0; box-shadow: none;} .stage:has(#menu:not([hidden])) {padding-bottom: 60px;}}