/* Guts AI Status. Tokens, fonts and mark follow gutsai.id (v2.css). */
@font-face{font-family:Geist;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Geist-400.woff2) format("woff2")}
@font-face{font-family:Geist;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Geist-500.woff2) format("woff2")}
@font-face{font-family:Geist;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Geist-600.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/GeistMono-400.woff2) format("woff2")}

:root{
  --bg:#F5F6F4;--surface:#FFFFFF;--surface-2:#EEF1EE;
  --line:#14201F14;--line-strong:#14201F24;
  --text:#162022;--text-2:#56625F;--text-3:#626D6A;
  --accent:#187565;--accent-soft:#1875651A;--on-accent:#FFFFFF;
  --tint-2:#14201F0A;--tint-3:#14201F17;
  --card-shadow:#14201F17;
  /* status colors */
  --s0:#2E9E62;--s1:#D99A06;--s2:#E5701E;--s3:#D93A3F;--s4:#3B7DD8;--snone:#14201F1A;
  --s0-soft:#2EA36B17;--s1-soft:#E5A50A1C;--s2-soft:#F0782A1C;--s3-soft:#E5484D17;--s4-soft:#3B82F617;
  --s0-text:#21784A;--s1-text:#8A6100;--s2-text:#A84B0C;--s3-text:#B3262B;--s4-text:#2459A8;
  --font-sans:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-code:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0F1416;--surface:#151C1E;--surface-2:#1B2426;
  --line:#DCEBE80F;--line-strong:#DCEBE81F;
  --text:#E4EAE8;--text-2:#9BA7A5;--text-3:#86928F;
  --accent:#5FD9BF;--accent-soft:#5FD9BF1F;--on-accent:#0E1A19;
  --tint-2:#FFFFFF08;--tint-3:#FFFFFF14;
  --card-shadow:#00000059;
  --s0:#4CC38A;--s1:#F0B429;--s2:#F28A3E;--s3:#F2555A;--s4:#5B9BF0;--snone:#DCEBE81A;
  --s0-soft:#46C38A1F;--s1-soft:#F0B4291F;--s2-soft:#F28A3E1F;--s3-soft:#EE5A5E1F;--s4-soft:#5B9BF01F;
  --s0-text:#8FD1A5;--s1-text:#F5C85C;--s2-text:#F7A66B;--s3-text:#FF8A8A;--s4-text:#8DB8F5;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ic{width:18px;height:18px;display:block}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 32px}

/* header: same brand, nav and button language as gutsai.id */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.gmark{display:inline-block;width:28px;height:28px;flex-shrink:0;background:center/contain no-repeat;
  background-image:url(/brand/guts-mark-light.png);
  background-image:image-set(url(/brand/guts-mark-light.webp) type("image/webp"),url(/brand/guts-mark-light.png) type("image/png"))}
[data-theme=dark] .gmark{background-image:url(/brand/guts-mark-dark.png);
  background-image:image-set(url(/brand/guts-mark-dark.webp) type("image/webp"),url(/brand/guts-mark-dark.png) type("image/png"))}
.brand-word{font-size:19px;font-weight:600;letter-spacing:-.4px;line-height:24px}
.brand-tag{font-family:var(--font-code);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);padding:3px 8px;border-radius:6px;line-height:16px}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{font-size:15px;color:var(--text-2);transition:color .15s ease}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:8px;border:0;
  background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;transition:color .15s ease,background-color .15s ease}
.icon-btn:hover{color:var(--text);background:var(--tint-2)}
.icon-btn .ic{width:18px;height:18px}
.ic-moon{display:none}
[data-theme=dark] .ic-sun{display:none}
[data-theme=dark] .ic-moon{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;height:39px;padding:0 18px;border-radius:8px;font-size:15px;
  font-weight:600;line-height:19px;white-space:nowrap;transition:background-color .15s ease,transform .15s ease}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--text))}
.btn-primary:active{transform:translateY(1px)}

/* hero + banner */
.hero{padding:56px 0 24px}
.hero h1{font-size:44px;line-height:1.1;font-weight:600;letter-spacing:-1.4px}
.lede{margin-top:10px;font-size:17px;color:var(--text-2)}
.banner{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:14px;background:var(--surface);
  box-shadow:0 0 0 1px var(--line),0 1px 2px var(--card-shadow);position:relative;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--bc,var(--snone))}
.banner-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--bsoft,var(--tint-2));color:var(--bc,var(--text-3))}
.banner-ic .ic{width:22px;height:22px}
.banner-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.banner-text strong{font-size:21px;line-height:1.25;font-weight:600;letter-spacing:-.4px}
.banner-text span{font-size:14px;color:var(--text-2)}
.banner[data-level="0"]{--bc:var(--s0);--bsoft:var(--s0-soft)}
.banner[data-level="1"]{--bc:var(--s1);--bsoft:var(--s1-soft)}
.banner[data-level="2"]{--bc:var(--s2);--bsoft:var(--s2-soft)}
.banner[data-level="3"]{--bc:var(--s3);--bsoft:var(--s3-soft)}
.banner[data-level="4"]{--bc:var(--s4);--bsoft:var(--s4-soft)}
.stale{margin-top:12px;font-size:14px;color:var(--s1-text);background:var(--s1-soft);padding:10px 14px;border-radius:10px}
.stale a{text-decoration:underline}

/* blocks */
.block{margin-top:48px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.block-h{font-size:22px;line-height:1.3;font-weight:600;letter-spacing:-.4px;margin-bottom:14px}
.block-note{font-size:14px;color:var(--text-3)}
.card{background:var(--surface);border-radius:14px;box-shadow:0 0 0 1px var(--line),0 1px 2px var(--card-shadow)}

/* components */
.comp{padding:22px 24px}
.comp+.comp{border-top:1px solid var(--line)}
.comp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.comp-name{font-size:17px;font-weight:600;letter-spacing:-.2px}
.comp-desc{margin-top:2px;font-size:14px;color:var(--text-2)}
.comp-meta{margin-top:4px;font-family:var(--font-code);font-size:12px;color:var(--text-3)}
.comp-state{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--st);padding-top:2px}
.comp-state .dot{width:9px;height:9px;border-radius:50%;background:var(--sc)}
[data-l="0"]{--sc:var(--s0);--st:var(--s0-text)}
[data-l="1"]{--sc:var(--s1);--st:var(--s1-text)}
[data-l="2"]{--sc:var(--s2);--st:var(--s2-text)}
[data-l="3"]{--sc:var(--s3);--st:var(--s3-text)}
[data-l="4"]{--sc:var(--s4);--st:var(--s4-text)}
[data-l="none"]{--sc:var(--snone);--st:var(--text-3)}
.bars{display:flex;gap:2px;height:34px;margin-top:16px;padding:0;list-style:none}
.bars li{flex:1 1 0;min-width:0;border-radius:2px;background:var(--sc);transition:opacity .12s ease;cursor:default}
.bars:hover li{opacity:.55}
.bars li:hover,.bars li.on{opacity:1}
.bars-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:13px;color:var(--text-3)}
.bars-foot .pct{color:var(--text-2);font-weight:500}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 2px 0;padding:0;list-style:none;font-size:13px;color:var(--text-3)}
.legend li{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--sc)}

/* tooltip */
.tip{position:fixed;z-index:50;max-width:280px;padding:12px 14px;border-radius:10px;background:var(--surface);color:var(--text);
  box-shadow:0 0 0 1px var(--line-strong),0 10px 28px -6px var(--card-shadow);font-size:13px;line-height:1.45;pointer-events:none}
.tip b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.tip .row{display:flex;align-items:center;gap:7px;margin-top:3px}
.tip .row i{width:8px;height:8px;border-radius:50%;background:var(--sc);flex-shrink:0}
.tip .muted{color:var(--text-3)}

/* incidents */
.inc{padding:20px 24px;position:relative;overflow:hidden}
.inc+.inc{margin-top:12px}
.inc::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--sc)}
.inc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.inc h3{font-size:18px;font-weight:600;letter-spacing:-.3px;line-height:1.35}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;
  text-transform:capitalize;color:var(--st);background:color-mix(in srgb,var(--sc) 14%,transparent);white-space:nowrap}
.inc-meta{margin-top:6px;font-size:14px;color:var(--text-2)}
.upds{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.upds li{padding:12px 0 0;font-size:15px}
.upds li+li{margin-top:2px}
.upd-h{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--text-3)}
.upd-h strong{font-size:14px;color:var(--text);font-weight:600;text-transform:capitalize}
.upd-t{margin-top:2px;color:var(--text-2)}

/* past incidents */
.past{display:block}
.past+.past{border-top:1px solid var(--line)}
.past summary{list-style:none;cursor:pointer;padding:18px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.past summary::-webkit-details-marker{display:none}
.past summary:hover .past-title{color:var(--accent)}
.past-title{font-size:16px;font-weight:600;letter-spacing:-.2px;transition:color .15s ease}
.past-when{margin-top:3px;font-size:13px;color:var(--text-3)}
.past .upds{margin:0 24px 18px;border-top:1px solid var(--line)}
.empty{padding:22px 24px;font-size:15px;color:var(--text-2)}

/* method + footer */
.method p{font-size:15px;color:var(--text-2);max-width:72ch}
.method p+p{margin-top:10px}
.site-footer{margin-top:64px;border-top:1px solid var(--line);padding:28px 0 40px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand-sm .gmark{width:22px;height:22px}
.brand-sm .brand-word{font-size:16px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a,.copy{font-size:14px;color:var(--text-2)}
.foot nav a:hover{color:var(--text)}

@media (max-width:720px){
  .wrap{padding:0 16px}
  .nav{height:60px}
  .nav-links{display:none}
  .brand-word{font-size:17px}
  .btn{height:36px;padding:0 14px;font-size:14px}
  .icon-btn{width:36px;height:36px}
  .hero{padding:36px 0 18px}
  .hero h1{font-size:34px;letter-spacing:-1px}
  .lede{font-size:16px}
  .banner{padding:16px 16px 16px 18px;gap:12px}
  .banner-text strong{font-size:18px}
  .block{margin-top:40px}
  .comp,.inc{padding:18px 16px}
  .past summary{padding:16px}
  .past .upds{margin:0 16px 16px}
  .bars{height:30px;gap:2px}
  .comp-top{flex-direction:column;gap:6px}
}
@media (max-width:380px){
  .brand-tag{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}