:root{color-scheme:light;--bg:#e9edf2;--ink:#18212e;--muted:#4a586b;--accent:#0056c9;--glass:rgba(246,249,253,.74);--lens:rgba(255,255,255,.61);--line:rgba(255,255,255,.9);--surface:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#111820;--ink:#f0f4fa;--muted:#b3c0d2;--accent:#9ac8ff;--glass:rgba(26,35,48,.8);--lens:rgba(146,165,191,.23);--line:rgba(255,255,255,.24);--surface:#202c3c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}main{width:min(100% - 40px,720px);margin:auto;padding-top:env(safe-area-inset-top);padding-bottom:calc(140px + env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 0 58px}header>span{font-size:10px;font-weight:650;letter-spacing:.09em}header button{background:var(--surface);border:1px solid #8090a450;border-radius:10px;padding:10px 12px;font-size:12px;color:var(--ink)}.eyebrow{color:var(--accent);font-size:14px;font-weight:600}h1{font-size:clamp(40px,7.5vw,68px);letter-spacing:-.06em;line-height:1.05;margin:18px 0 24px;font-weight:720}p{color:var(--muted);line-height:1.65;max-width:480px}.intro{font-size:17px}h2{font-size:28px;letter-spacing:-.04em;margin-top:48px}.art{height:360px;position:relative;overflow:hidden;margin:42px 0;background:#b5c7d6;border-radius:6px}.ribbon{position:absolute;width:130%;height:160px;top:60px;left:-20%;background:linear-gradient(130deg,#1e5680,#e2f2fb 52%,#689cbe);transform:rotate(-32deg);border-radius:50%;box-shadow:0 25px 45px #23415d45}.disc{position:absolute;width:230px;height:230px;border-radius:50%;right:-35px;bottom:-50px;background:linear-gradient(140deg,#dff1fb,#376a8c);box-shadow:inset 0 2px 3px #fff9}.art>span{position:absolute;bottom:20px;left:20px;font-size:12px;color:#1b3549}.sample{padding:50px 25px;margin-top:24px;background:#c6d8e7;color:#233d50;min-height:220px;line-height:2}.alternate{background:#5e7e99;color:white}.sample strong{font-size:clamp(23px,5vw,34px);letter-spacing:-.035em}footer{font-size:12px;color:var(--muted);padding-top:45px}section[hidden]{display:none}section{min-height:65vh}input[type=search]{display:block;width:100%;padding:18px;margin:12px 0 28px;border:1px solid #8192a5;border-radius:12px;background:var(--surface);color:var(--ink)}#results{padding:0;list-style:none}#results li{padding:22px 0;border-bottom:1px solid #8192a540}.setting{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid #8192a540}.setting small{display:block;color:var(--muted);margin-top:8px}.setting input{width:24px;height:24px;accent-color:var(--accent)}
.glass-nav{position:fixed;z-index:10;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;width:min(calc(100% - 32px),420px);transform:translateX(-50%);border-radius:40px;padding:6px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);box-shadow:0 12px 35px #0a1e3526,0 2px 6px #0a1e3514,inset 0 1px 1px #fff9,inset 0 -1px 1px #fff4;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none}
.glass-nav:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--light,35%) 0%,#fff7,transparent 60%);opacity:.7}.glass-tabs{position:relative;display:flex;height:62px}.glass-lens{position:absolute;left:0;top:0;height:100%;width:25%;border-radius:32px;background:var(--lens);border:1px solid var(--line);box-shadow:inset 0 1px 3px #fff9,inset 0 -2px 4px #7890a530,0 3px 9px #25374912;transform-origin:center;pointer-events:none;will-change:transform}.glass-lens:after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(155deg,#fff5,transparent 38%,transparent 70%,#fff3);pointer-events:none}.glass-tab{position:relative;flex:1;min-width:0;border:0;background:none;color:var(--ink);border-radius:32px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:6px 0;touch-action:none}.glass-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms ease}.glass-tab span{font-size:10px;font-weight:600}.glass-tab[aria-selected=true]{color:var(--accent)}.glass-tab[data-preview=true] svg{transform:translateY(-2px) scale(1.1)}.glass-nav[data-pressed=true] .glass-lens{box-shadow:inset 0 1px 3px #fffc,inset 0 -2px 5px #8099b344,0 5px 14px #25374920}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.glass-tab:focus-visible{outline-offset:-3px}
@supports not (backdrop-filter:blur(1px)){.glass-nav{background:var(--surface)}}
@media(prefers-reduced-transparency:reduce){.glass-nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
:root[data-reduced=true] *{transition:none!important}
@media(max-width:360px){header{gap:6px}header>span{font-size:9px}.glass-tab span{font-size:9px}.art{height:290px}}

/* === Refraksi Liquid Glass (glass-refract.js) === */
#lg-svg{position:absolute;width:0;height:0;overflow:hidden}
/* Chromium: refraksi langsung via backdrop-filter */
html.has-lg-refract .glass-nav{-webkit-backdrop-filter:url(#lg-nav-filter) blur(2px) saturate(1.5);backdrop-filter:url(#lg-nav-filter) blur(2px) saturate(1.5)}
/* Safari/Firefox: badan kaca disediakan salinan DOM di bawah nav */
html.has-lg-clone .glass-nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.lg-clone{position:fixed;left:0;top:0;z-index:9;overflow:hidden;pointer-events:none;border-radius:40px;will-change:transform}
.lg-clone-glass{position:absolute;inset:0;filter:url(#lg-nav-filter) blur(2px)}
.lg-clone-inner{position:absolute;left:0;top:0;will-change:transform}
.lg-clone-tint{position:absolute;inset:0;background:var(--glass);pointer-events:none}
@media(prefers-reduced-transparency:reduce){
html.has-lg-refract .glass-nav{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
html.has-lg-clone .lg-clone{display:none}
html.has-lg-clone .glass-nav{background:var(--surface)}
}