:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif; color: #443e43; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: linear-gradient(180deg, #eac0a5 0%, #dfb3b4 48%, #a48eab 100%); }
#garden { width: 100%; height: 100%; position: relative; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }
.caption { position: absolute; top: 32px; left: 34px; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.seal { display: grid; place-items: center; border: 1px solid #91463c; width: 39px; height: 45px; color: #91463c; border-radius: 3px; font: 25px "Hiragino Mincho ProN", "Yu Mincho", serif; }
h1 { font: 500 19px "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .12em; margin: 0; }
.caption p { margin: 7px 0 0; font-size: 11px; letter-spacing: .08em; opacity: .68; }
.controls { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; padding: 7px; gap: 3px; border: 1px solid #fff6; border-radius: 18px; background: #fff9; box-shadow: 0 7px 30px #57416012; backdrop-filter: blur(14px); white-space: nowrap; }
button { font: inherit; font-size: 11px; color: #504653; background: transparent; border: 0; border-radius: 12px; padding: 11px 14px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
button:hover { background: #fffa; }
button:focus-visible { outline: 2px solid #7c4850; outline-offset: 2px; }
button:disabled { opacity: .5; cursor: wait; }
button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.hint { position: absolute; right: 30px; bottom: 18px; font-size: 10px; color: #524659a3; pointer-events: none; }
.status { position: absolute; bottom: 102px; left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap; }
.status:empty { display: none; }
.error { position: absolute; inset: 0; background: #eed7d8dd; place-content: center; text-align: center; }
.error:not([hidden]) { display: grid; }
.error p { margin: 6px; }
.capture .caption, .capture .controls, .capture .hint, .capture .status { display: none; }
@media (max-width: 600px) { .caption { top: 22px; left: 22px; } h1 { font-size: 16px; } .seal { width: 33px; height: 38px; font-size: 22px; } .controls { bottom: 24px; padding: 5px; } button { padding: 12px; gap: 5px; } button span { display: none; } button svg { width: 19px; height: 19px; } .hint { left: 0; right: 0; text-align: center; bottom: 1px; font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }