/* Ink edges and bone light: the frame responds, the layout stays still. */
[data-focus-frame]{position:relative;--frame-tone:20 20 19;--frame-inset:-10px;--frame-x:50%;--frame-y:50%;--frame-corner:16px}
.focus-frame{position:absolute;inset:var(--frame-inset);pointer-events:none!important;z-index:4;border:1px solid rgb(var(--frame-tone) / .24);opacity:0;transform:scale(.992);transition:opacity .18s ease,transform .22s ease;background:radial-gradient(230px circle at var(--frame-x) var(--frame-y),rgb(255 253 246 / .17),transparent 75%);box-shadow:0 0 22px rgb(var(--frame-tone) / .04)}
.focus-frame::before{content:"";position:absolute;inset:-1px;border:1px solid rgb(var(--frame-tone) / .95);-webkit-mask-image:radial-gradient(200px circle at var(--frame-x) var(--frame-y),#000,transparent 78%);mask-image:radial-gradient(200px circle at var(--frame-x) var(--frame-y),#000,transparent 78%)}
.focus-frame::after{content:"";position:absolute;inset:-1px;opacity:.85;background:linear-gradient(currentColor,currentColor) left top/var(--frame-corner) 1px no-repeat,linear-gradient(currentColor,currentColor) left top/1px var(--frame-corner) no-repeat,linear-gradient(currentColor,currentColor) right top/var(--frame-corner) 1px no-repeat,linear-gradient(currentColor,currentColor) right top/1px var(--frame-corner) no-repeat,linear-gradient(currentColor,currentColor) left bottom/var(--frame-corner) 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1px var(--frame-corner) no-repeat,linear-gradient(currentColor,currentColor) right bottom/var(--frame-corner) 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1px var(--frame-corner) no-repeat;color:rgb(var(--frame-tone))}
[data-focus-frame].is-framed>.focus-frame,[data-focus-frame].is-pressed>.focus-frame,[data-focus-frame]:focus-visible>.focus-frame,[data-focus-frame]:has(:focus-visible)>.focus-frame{opacity:1;transform:none}
[data-focus-frame="cover"]{--frame-tone:238 233 223;--frame-inset:12px;--frame-corner:22px}
[data-focus-frame="cover"]>.focus-frame{background:radial-gradient(280px circle at var(--frame-x) var(--frame-y),rgb(255 253 246 / .07),transparent 75%);box-shadow:0 0 22px #eee9df12,inset 0 0 18px #eee9df09}
[data-focus-frame="product"]{--frame-inset:0px;--frame-corner:22px}
.menu-links a[data-focus-frame]{display:block;width:min(100%,470px);padding:14px 22px;--frame-inset:0px;--frame-tone:238 233 223;--frame-corner:13px;transition:background .18s ease,color .18s ease}
.menu-links a[data-focus-frame]:is(.is-framed,.is-pressed,:focus-visible){background:var(--ink);color:var(--bone);text-decoration:none}
.menu-links a[data-focus-frame]>.focus-frame{inset:5px;background:radial-gradient(140px circle at var(--frame-x) var(--frame-y),#eee9df14,transparent 80%)}
[data-focus-frame="control"]{--frame-inset:0px;--frame-corner:7px}
[data-focus-frame="control"]>.focus-frame{background:none;box-shadow:none}
.angle-controls button[data-focus-frame],.sheet-views button[data-focus-frame]{padding-left:13px;padding-right:13px;border-bottom-color:transparent}
[data-focus-frame="control"][aria-pressed="true"]>.focus-frame{opacity:.65;transform:none;border-color:rgb(var(--frame-tone) / .38)}
.angle-controls button[data-focus-frame]:is(:hover,[aria-pressed="true"]),.sheet-views button[data-focus-frame]:is(:hover,[aria-pressed="true"]){border-bottom-color:transparent}
[data-focus-frame]:focus-visible>.focus-frame,[data-focus-frame]:has(:focus-visible)>.focus-frame{border:2px solid rgb(var(--frame-tone));background:none}
@media(max-width:700px){
 [data-focus-frame="card"]{--frame-inset:-7px;--frame-corner:12px}
 [data-focus-frame="cover"]{--frame-inset:10px;--frame-corner:18px}
 .menu-links a[data-focus-frame]{font-size:clamp(20px,6vw,26px);padding:15px 18px}
 .angle-controls{gap:12px}
 .sheet-views{gap:3px;flex-wrap:wrap}
 .sheet-views button[data-focus-frame]{padding-left:10px;padding-right:10px}
}
@media(prefers-reduced-motion:reduce){
 .focus-frame,.menu-links a[data-focus-frame]{transition:none;transform:none}
 [data-focus-frame]>.focus-frame{background:none}
 .focus-frame::before{display:none}
}
@media(forced-colors:active){.focus-frame{border-color:Highlight;box-shadow:none;background:none}.focus-frame::before,.focus-frame::after{display:none}.menu-links a[data-focus-frame]:is(.is-framed,.is-pressed,:focus-visible){background:Highlight;color:HighlightText}}