/* The miniature uses one light source, above and to the left. */
.model { min-width: 0; }
.model-stage { position: relative; width: 100%; perspective: 1500px; aspect-ratio: 1; max-height: 560px; min-height: 330px; cursor: grab; touch-action: pan-y; user-select: none; }
.model-stage:active { cursor: grabbing; touch-action: none; }
.model-stage::before { content: ''; position: absolute; width: 78%; height: 9%; left: 11%; top: 82%; background: radial-gradient(ellipse, #493c282b, transparent 70%); }
.model-scene { position: absolute; left: 50%; top: 56%; width: 0; height: 0; transform-style: preserve-3d; }
.model-block { position: absolute; transform-style: preserve-3d; --color: #b07960; --light: #c9997e; --shade: #81543f; --dark: #674331; }
.model-face { position: absolute; display: grid; place-items: center; backface-visibility: hidden; background: var(--color); box-shadow: inset 0 0 0 1px #402a2426, inset 0 2px 0 #ffffff20; overflow: hidden; }
.model-face.left, .model-face.top { background: var(--light); }
.model-face.right, .model-face.back { background: var(--shade); }
.model-face.bottom { background: var(--dark); }
.stone, .post { --color: #d2c6ae; --light: #e4dac6; --shade: #afa088; --dark: #95846d; }
.post .front { background: linear-gradient(90deg, #b5a48b 0 3px, #e3d8c1 3px 7px, #cfc1a8 7px calc(100% - 7px), #b9a98e calc(100% - 7px) calc(100% - 3px), #e2d7c0 calc(100% - 3px)); }
.model-engraving { position: absolute; left: 50%; top: 50%; width: 195px; text-align: center; white-space: nowrap; transform: translate(-50%,-50%) rotate(-90deg); font: 18px/1.6 var(--serif); color: #4e4435; text-shadow: 0 1px #f9eed7; }
.model:lang(zh) .model-engraving { transform: translate(-50%,-50%); writing-mode: vertical-rl; width: auto; letter-spacing: .14em; }
.model:lang(hi) .model-engraving { letter-spacing: 0; }
.lintel { --color: #6e1d1b; --light: #943d34; --shade: #521512; --dark: #3e1513; transition: transform .65s ease-in-out; }
.lintel .front { color: #e2c77f; font: 23px/1 var(--serif); letter-spacing: .24em; text-indent: .24em; text-shadow: 0 -1px #33110c, 0 1px #a56042; box-shadow: inset 0 0 0 1px #421410, inset 0 0 0 5px #6e1d1b, inset 0 0 0 6px #a7823a88; }
.tone-1 { --color: #a96952; --light: #c38b70; --shade: #794b38; }
.tone-2 { --color: #b88066; --light: #cca086; --shade: #895d45; }
.falling { transform: var(--home); transition: transform .7s cubic-bezier(.4,0,.8,1); }
.is-out .falling { transform: var(--fall); transition-delay: calc(180ms + var(--delay)); }
.is-out .lintel { transform: translate3d(0,-250px,75px) rotateZ(-2deg) !important; }
.model-controls { display: flex; justify-content: center; margin-top: .5rem; }
.model-controls button { min-height: 48px; max-width: 100%; font: 1.05rem/1.5 var(--serif); padding: .55em 1.25em; border: 1.5px solid var(--oxblood); border-radius: 2px; background: transparent; color: var(--oxblood); cursor: pointer; }
.model-controls button:hover { background: var(--oxblood); color: var(--paper); }
.model-stage:focus-visible, .model-controls button:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; }
.model-caption-space { display: grid; margin-top: 1rem; font-style: italic; color: var(--ink-soft); }
.model-caption-space > * { grid-area: 1 / 1; margin: 0; }
.model-caption-measure { visibility: hidden; }
.model-hint { font-size: 1rem; color: var(--ink-soft); margin: .5rem 0 0; }
.model-fallback { display: block; aspect-ratio: 1; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .model-block { transition: none !important; } }