.glass-mark{position:absolute;z-index:0;width:clamp(290px,34vw,570px);aspect-ratio:81/45;right:12%;top:27%;perspective:1000px;pointer-events:none}
.glass-mark-body{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transform:rotateX(6deg) rotateY(-12deg) rotateZ(-4deg)}
.glass-mark-body>span{position:absolute;inset:0;mask:url('assets/glass-mark-mask-hd.png') center/100% 100% no-repeat;-webkit-mask:url('assets/glass-mark-mask-hd.png') center/100% 100% no-repeat}
.glass-depth{transform:translate3d(6px,8px,-13px);background:linear-gradient(135deg,#d9f1ff55,#476e9622 35%,#d9f1ff88 60%,#779fb433);opacity:.75}
.glass-face{background:linear-gradient(135deg,#ffffff55 0%,#e7f6ff12 29%,#c9e7ff22 48%,#ffffff4a 72%,#afcde511);backdrop-filter:blur(3px) saturate(1.2);-webkit-backdrop-filter:blur(3px) saturate(1.2)}
.glass-mark-body>.glass-glint{mask-image:url('assets/glass-mark-edge-hd.png');-webkit-mask-image:url('assets/glass-mark-edge-hd.png');background:linear-gradient(120deg,#fff9,#d6f2ff33 35%,#fff 55%,#90d1ff66 75%,#fff9);transform:translateZ(1px);filter:drop-shadow(0 0 2px #c3e7ff)}
@media(min-width:681px) and (max-width:1000px){.glass-mark{width:31vw;right:11%;top:39%}}
@media(max-width:680px){.glass-mark{width:52%;right:11%;top:58%;max-width:260px}.glass-depth{transform:translate3d(3px,4px,-7px)}.glass-face{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}}
@media(prefers-reduced-motion:reduce){.glass-mark-body{will-change:auto;transform:rotateY(-8deg) rotateZ(-3deg)!important}}

.crystal-canvas{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(2px);pointer-events:none}.crystal-ready>.glass-face{opacity:0}.crystal-ready>.glass-glint{opacity:.5;transform:translateZ(3px)}.crystal-ready>.glass-depth{opacity:.8;transform:translate3d(8px,10px,-16px);background:linear-gradient(135deg,#b1eaffaa,#20466c55 28%,#fff9 48%,#84b6ec99 72%,#a9dfff33)}

.glass-mark{width:clamp(340px,43vw,700px);right:8%;top:26%;aspect-ratio:1057/547;pointer-events:auto;cursor:grab;touch-action:pan-y}.glass-mark.is-dragging{cursor:grabbing}.glass-mark:focus-visible{outline:1px solid #c6eaff88;outline-offset:8px;border-radius:12px}.glass-mark-body{pointer-events:none}@media(min-width:681px) and (max-width:1000px){.glass-mark{width:37vw;right:6%;top:40%}}@media(max-width:680px){.glass-mark{width:59%;max-width:280px;right:8%;top:62%}}

.glass-mark{z-index:2}

.glass-mark-body>.crystal-flare{inset:auto;mask:none;-webkit-mask:none;width:66px;height:66px;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle,#fff 0 2%,#f3fbffdd 3%,#b9dcff60 9%,#77aaff12 28%,transparent 60%);transform-origin:center}
.crystal-flare:before,.crystal-flare:after{content:'';position:absolute;left:50%;top:50%;width:100%;height:2px;transform:translate(-50%,-50%) rotate(-28deg);background:linear-gradient(90deg,transparent,#bddeff66 23%,#fff 49%,#fff 51%,#dfcfff66 77%,transparent);box-shadow:0 0 4px #b8ddff66}
.crystal-flare:after{width:70%;transform:translate(-50%,-50%) rotate(62deg)}
@media(max-width:680px){.glass-mark-body>.crystal-flare{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.glass-mark-body>.crystal-flare{display:none}}

.crystal-extrusion{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.crystal-extrusion i{position:absolute;inset:0;display:block;mask:url('assets/glass-mark-mask-hd.png') center/100% 100% no-repeat;-webkit-mask:url('assets/glass-mark-mask-hd.png') center/100% 100% no-repeat;transform:translateZ(calc(var(--slice)*-1.6px));background:linear-gradient(125deg,#e9faff26,#659ac418 25%,#ffffff52 49%,#92c9ef20 72%,#eafaff40);backface-visibility:visible}
.crystal-extrusion i:nth-child(6n){background:linear-gradient(145deg,#e6f8ff55,#8baffb12 28%,#e9ddff40 54%,#92d8ff1a)}
.crystal-extrusion i:last-child{background:linear-gradient(135deg,#d9f3ff80,#acc4e22b 40%,#fff8);mask-image:url('assets/glass-mark-edge-hd.png');-webkit-mask-image:url('assets/glass-mark-edge-hd.png')}
.crystal-ready>.glass-depth{transform:translateZ(-64px);opacity:.5}
@media(max-width:680px){.crystal-extrusion i{transform:translateZ(calc(var(--slice)*-.8px))}.crystal-ready>.glass-depth{transform:translateZ(-32px)}}
@media(prefers-reduced-motion:reduce){.crystal-extrusion i{background:#c6eaff10}}

.glass-mark{width:clamp(390px,51vw,820px);right:3%;top:24%}
.solid-canvas{position:absolute;left:0;top:-20%;width:100%;height:140%;pointer-events:none}
.solid-ready .crystal-extrusion,.solid-ready .glass-face,.solid-ready .glass-depth,.solid-ready .glass-glint,.solid-ready .crystal-canvas{display:none}
.solid-ready .glass-mark-body{z-index:1}
@media(min-width:681px) and (max-width:1000px){.glass-mark{width:43vw;right:2%;top:38%}}
@media(max-width:680px){.glass-mark{width:88%;max-width:380px;left:50%;right:auto;top:60%;transform:translateX(-50%)}.hero{min-height:max(870px,100svh)}}

.solid-ready .glass-mark-body>.crystal-flare{display:none}
.solid-flare{position:absolute;width:38px;height:38px;pointer-events:none;z-index:3;background:radial-gradient(circle,#fff 0 3%,#dcf3ff88 7%,transparent 45%);opacity:0}
.solid-flare:before,.solid-flare:after{content:'';position:absolute;left:50%;top:50%;height:1px;width:100%;transform:translate(-50%,-50%) rotate(-25deg);background:linear-gradient(90deg,transparent,#fff,transparent)}
.solid-flare:after{width:65%;transform:translate(-50%,-50%) rotate(65deg)}
@media(prefers-reduced-motion:reduce){.solid-flare{display:none}}
/* Brief optical stars, projected onto the rotating crystal corners. */
.solid-flare{width:76px;height:76px;background:radial-gradient(circle,#fff 0 2%,#fffbedee 3%,#bfe7ff88 7%,#779cfa25 17%,transparent 43%);filter:drop-shadow(0 0 3px #c1e6ff88)}
.solid-flare:before{height:2px;background:linear-gradient(90deg,transparent,#80caff55 20%,#fff 47%,#fff 53%,#ffdeaa55 80%,transparent)}
.solid-flare:after{height:1.5px;width:85%;background:linear-gradient(90deg,transparent,#fff 46%,#fff 54%,transparent)}
@media(max-width:680px){.solid-flare{width:54px;height:54px}}
/* Oversized hero study. Previous sizing saved in work/glass-hero-approved-size.css. */
@media(min-width:1001px){.glass-mark{width:clamp(961.74px,103.572vw,1716.336px);right:-36.572%;top:8%}}
@media(min-width:681px) and (max-width:1000px){.glass-mark{width:91.7352vw;right:-31.7352%;top:23%}}







/* Mobile uses the same oversized, right-cropped composition as desktop. */
@media(max-width:680px){.glass-mark{width:185%;max-width:none;left:6%;right:auto;top:51%;transform:none}}

/* Keep the non-WebGL fallback inexpensive on mobile, including initial loading. */
@media(max-width:680px){.glass-face{-webkit-backdrop-filter:none;backdrop-filter:none}.glass-depth,.glass-glint{display:none}.glass-mark-body{will-change:auto}.solid-flare{filter:none}}