*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:#19170f;color:#f2efe3;font:13px/1.5 Arial,sans-serif;display:flex;flex-direction:column}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ff5a35;outline-offset:-3px}.toolbar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#fcfbf8;color:#22221f;gap:8px}.toolbar button{border:0;background:none;color:inherit;padding:3px 4px;font-weight:700}.toolbar span{font-size:8px;letter-spacing:1px;color:#72716b}#scroller{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}#scroller::-webkit-scrollbar{display:none}#art{position:relative;aspect-ratio:780 / 1570;overflow:hidden;width:100%}#screen{display:block;width:100%;height:auto}#targets{position:absolute;inset:0}.target{position:absolute;border:0;background:transparent;color:transparent;border-radius:3px}.target:hover{background:#ffffff0b;box-shadow:inset 0 0 0 1px #ffffff33}.target:focus-visible{background:#ff5a3522}.target.checked{color:#b9d3b2;background:#272a21;font-size:22px;border-radius:50%;display:grid;place-items:center}#nav{position:relative;flex:none;aspect-ratio:780 / 118;background-size:100% auto;background-position:center bottom;display:flex}#nav button{flex:1;border:0;background:transparent;color:transparent}#feedback{position:absolute;bottom:72px;left:12px;right:12px;z-index:3;padding:13px 16px;background:#f2efe3;color:#22221f;box-shadow:0 6px 25px #0005;display:flex;gap:12px;align-items:center;justify-content:space-between}#feedback[hidden]{display:none}#feedback button{border:0;border-bottom:1px solid;background:transparent;padding:4px;color:inherit}dialog{width:calc(100% - 20px);max-width:480px;background:#fcfbf8;color:#22221f;border:0;border-radius:18px;padding:22px}dialog::backdrop{background:#000a}.sheet-top{display:flex;justify-content:space-between;align-items:center}h1{font-size:24px;letter-spacing:-1px;margin:0}.sheet-top button{min-width:44px;min-height:44px;border:0;background:none;font-size:28px}dialog p{color:#72716b;margin:8px 0 20px}.choices{display:flex;gap:10px}.choices button{width:33.333%;min-width:0;text-align:left;border:1px solid #ddd9cf;background:transparent;padding:8px;border-radius:10px;color:inherit}.choices img{width:100%;display:block;border-radius:5px;margin-bottom:10px}.choices strong,.choices small{display:block}.choices small{font-size:10px;color:#72716b}

/* Let captures and their percentage-based tap targets fill the demo frame. */
body{margin-inline:auto;position:relative}
html{background:#19170f}
.toolbar{min-height:44px;padding-block:0}
.toolbar button{min-height:44px;min-width:44px}
#hints{font-weight:400;border:1px solid #ddd9cf;border-radius:20px;padding:3px 10px;font-size:11px}
#hints[aria-pressed=true]{background:#eee9df}
/* Keep live guidance available to screen readers without taking app space. */
#guidance{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.show-taps .target[data-demo-action=true]{box-shadow:inset 0 0 0 1px #fffa;background:#ffffff08}
body.show-taps .target[data-demo-action=true]::after{content:'';position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:#ff5a35;box-shadow:0 0 0 2px #19170f}
.target:hover{box-shadow:inset 0 0 0 2px #fff9}
#scroller:focus{outline:none}
#nav button{min-height:44px}
#nav button:hover{background:#ffffff0d}
#feedback{bottom:68px;border-radius:8px;font-size:12px}
dialog{max-height:calc(100dvh - 24px);overflow:auto}
.choices button[aria-pressed=true]{border:2px solid #ff3b1f;padding:7px}
@media(prefers-reduced-motion:no-preference){.target{transition:background .15s,box-shadow .15s}}