/* Shared satin controls; light variables come from the 3D scene. */
.object-controls{--light-x:20%;--light-y:12%;--rim-x:85%;--rim-y:25%;--shine:.5;--light-angle:-40deg;--shade-x:6px;--shade-y:9px;--top:.5;--left:.4;--right:.1;--bottom:.08;gap:8px;isolation:isolate;padding:0 2px 5px;max-width:100%}
.object-controls button{position:relative;isolation:isolate;overflow:hidden;width:48px;min-width:48px;height:48px;border-radius:12px;border:1px solid;border-top-color:rgba(224,242,245,var(--top));border-left-color:rgba(224,242,245,var(--left));border-right-color:rgba(224,242,245,var(--right));border-bottom-color:rgba(224,242,245,var(--bottom));color:#e3f0f3;font-size:18px;background:radial-gradient(ellipse 90% 100% at var(--light-x) var(--light-y),rgba(242,222,186,var(--shine)),transparent 68%),radial-gradient(ellipse at var(--rim-x) var(--rim-y),#59dbe930,transparent 80%),linear-gradient(var(--light-angle),#091f2b,#284b59);box-shadow:inset 0 1px 1px #efffff24,inset 0 -2px 3px #0006,0 2px 0 #102d3a,0 4px 0 #06131c,var(--shade-x) var(--shade-y) 14px #0009;text-shadow:0 1px 2px #000b;transition:transform .12s,color .12s;transform:translateY(-2px)}
.object-controls button:before{content:'';position:absolute;inset:3px;border:1px solid #d5f4ff10;border-radius:8px;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff6df25,transparent 63%);z-index:-1}.object-controls button:hover{color:#fff;border-top-color:rgba(240,250,255,var(--top));filter:brightness(1.12);transform:translateY(-3px)}.object-controls button:active{transform:translateY(2px);box-shadow:inset 0 2px 6px #0007,0 1px 0 #234452,1px 3px 6px #0007}.object-controls button:focus-visible{outline:2px solid #a6edf3;outline-offset:5px}.object-controls button:disabled{opacity:.45;filter:none;transform:none;cursor:default}.object-controls #object-lines{font-size:12px;width:auto;min-width:104px;padding:0 12px;margin:0;letter-spacing:0}.object-controls #object-lines[aria-pressed=true]{color:#c7faff;border-color:#91d9e7b3}
/* The stage width, rather than viewport width, determines when to wrap. */
.model-stage{container-type:inline-size}
.model-stage .object-controls{flex-wrap:wrap;justify-content:center}
@container (max-width:370px){.model-stage .object-controls #object-lines{flex-basis:100%;max-width:216px;margin:4px 0 0}.model-stage .object-controls button{width:44px;min-width:44px;height:48px}.model-stage .model-bottom{gap:10px}}
@media(prefers-reduced-motion:reduce){.object-controls button{transition:none}}
/* Reserve room below the canvas so raised controls do not cover the model. */
.model-editorial-card #architecture-object{height:calc(100% - 105px)}
@container (max-width:370px){.model-editorial-card #architecture-object{height:calc(100% - 160px)}}
@media(max-width:760px){.model-editorial-card .model-showcase.hero{height:440px;min-height:440px}}

/* Preserve the moving light while hovering instead of an older flat hover fill. */
.object-controls button:hover{background-image:radial-gradient(ellipse 90% 100% at var(--light-x) var(--light-y),rgba(242,222,186,var(--shine)),transparent 68%),radial-gradient(ellipse at var(--rim-x) var(--rim-y),#59dbe930,transparent 80%),linear-gradient(var(--light-angle),#091f2b,#284b59)}