:root{--grad:linear-gradient(135deg,#36c4af,#89cff0)}
/* Region selector: frame inside a frame */
:root{--ground:linear-gradient(180deg,#c9cbcd 0%,#e6e7e8 45%,#fafafa 100%);--topline:#a9acaf;--mut:#5d6368;--fg:#111315}
[data-theme=dark]{--ground:linear-gradient(180deg,#26292c 0%,#16181a 100%);--topline:#4a4f54;--mut:#a9b0b6;--fg:#eceff1}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
body.sel{font-family:'Open Sans',sans-serif;background:var(--ground);border-top:1px solid var(--topline);min-height:100vh;padding:30px 24px 40px;color:var(--fg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.frame{position:relative;width:100%;max-width:980px;height:640px;margin:0 auto;overflow:hidden;background:#dfe4e4}
.swirl{position:absolute;inset:0;background:url(/img/swirl.jpg) center/cover no-repeat}
.glow{position:absolute;pointer-events:none}
.glow.g1{background:radial-gradient(closest-side,rgba(54,196,175,.5),rgba(137,207,240,.16) 60%,rgba(137,207,240,0));animation:drift1 14s ease-in-out infinite}
.glow.g2{background:radial-gradient(closest-side,rgba(137,207,240,.38),rgba(137,207,240,0));animation:drift2 18s ease-in-out infinite}
@keyframes drift1{0%{transform:translate(-10%,0) scale(1)}50%{transform:translate(25%,12%) scale(1.25)}100%{transform:translate(-10%,0) scale(1)}}
@keyframes drift2{0%{transform:translate(30%,10%) scale(1.1)}50%{transform:translate(-5%,-8%) scale(.9)}100%{transform:translate(30%,10%) scale(1.1)}}
.sbar{position:absolute;left:0;right:0;top:0;height:120px;overflow:hidden;background:#000;color:#fff}
.sbar .g1{left:-5%;top:-120%;width:55%;height:260%}.sbar .g2{right:5%;top:-130%;width:45%;height:260%}
.slogo{position:absolute;left:32px;top:30px;display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2em;font-size:22px}
.slogo img{display:block;background:#fff}
.sright{position:absolute;right:32px;top:30px;display:flex;align-items:center;gap:20px}
.ww{font-size:21px}
.themebtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.25);color:#fff;font:600 12px 'Open Sans',sans-serif;cursor:pointer}
.themebtn:hover{background:#fff;color:#000}
.panel2{position:absolute;right:0;bottom:52px;width:506px;max-width:100%;overflow:hidden;background:#000;color:#fff;padding:20px}
.panel2:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#36c4af,#89cff0)}
.panel2 .g1{left:-10%;top:-60%;width:70%;height:200%}.panel2 .g2{right:-10%;top:-40%;width:60%;height:200%}
.cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;min-height:158px}
.cols h2{font-size:12px;font-weight:700;letter-spacing:.06em;padding-bottom:6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rl{display:block;padding:4px 0;font-size:13px;font-weight:600;color:#fff;line-height:1.5}
.rl:hover,.rl:focus-visible{text-decoration:underline;text-underline-offset:3px;color:#89cff0}
.rem{position:relative;display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;font-weight:600;color:#d9dee2}
.rem input{width:16px;height:16px;accent-color:#36c4af}
.copy{width:100%;max-width:980px;margin:14px auto 0;font-size:12px;color:var(--mut)}
.copy a:hover{text-decoration:underline}
@media(max-width:700px){.frame{height:auto;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end}.sbar{height:100px}.slogo{font-size:17px;left:16px;top:24px}.sright{right:16px;top:22px;gap:10px}.ww{display:none}.panel2{position:relative;bottom:auto;width:100%;margin-top:130px}.cols{grid-template-columns:1fr 1fr}}
