:root{--bg:#fff;--fg:#0a0a0a;--mut:#666;--bd:#eaeaea;--card:#fafafa;--c1:210;--ring:#22c55e;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#000;--fg:#ededed;--mut:#a1a1a1;--bd:#2e2e2e;--card:#0a0a0a}}
:root[data-theme=dark]{--bg:#000;--fg:#ededed;--mut:#a1a1a1;--bd:#2e2e2e;--card:#0a0a0a}
*{box-sizing:border-box}html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg) radial-gradient(70% 45% at 50% -5%,rgba(34,197,94,.16),transparent 70%) no-repeat;color:var(--fg);font:16px/1.65 Geist,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.w{max-width:760px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--bd)}header .w{display:flex;justify-content:space-between;align-items:center;height:56px}
header b{font-weight:600;letter-spacing:-.02em}
button,input,select{font:inherit;color:inherit}
.btn{border:1px solid var(--bd);background:var(--bg);border-radius:6px;padding:8px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--fg)}.btn.p{background:linear-gradient(135deg,#16a34a,#22c55e);color:#04130a;border-color:#16a34a;font-weight:600}nav a{margin-right:16px;font-size:.9rem;color:var(--mut);text-decoration:none}nav a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
h1{font-size:clamp(2rem,6vw,3rem);letter-spacing:-.04em;line-height:1.1;margin:56px 0 12px;background:linear-gradient(180deg,var(--fg) 40%,#22c55e 190%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.4rem;letter-spacing:-.03em;margin:44px 0 8px}
p{color:var(--mut);margin:.5em 0}.lead{font-size:1.1rem}
.badge{display:inline-block;border:1px solid var(--bd);border-radius:99px;padding:2px 12px;font-size:.85rem;color:var(--mut)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin-top:32px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;color:var(--mut);white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--fg);border-color:var(--fg)}
.card{border:1px solid var(--bd);background:var(--card);border-radius:10px;padding:20px;margin-top:20px}
form{display:grid;gap:14px;grid-template-columns:1fr 1fr}.full{grid-column:1/-1}
label{display:grid;gap:4px;font-size:.9rem;font-weight:500}
input,select{border:1px solid var(--bd);background:var(--bg);border-radius:6px;padding:9px 11px;width:100%}
.err{color:#e5484d;font-size:.85rem;min-height:1.2em}
.cf{display:flex;flex-wrap:wrap;gap:6px;font:600 clamp(1.1rem,4.6vw,1.8rem)/1 ui-monospace,"Geist Mono",monospace;margin:6px 0 14px}
.seg{border-radius:6px;padding:8px 6px;background:hsl(var(--h) 80% 55%/.16);border:1px solid hsl(var(--h) 80% 50%/.5);letter-spacing:.06em}
.seg.bad{background:#e5484d33;border-color:#e5484d}
.leg{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:.92rem}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;background:hsl(var(--h) 80% 55%)}
.leg code{font-weight:600;margin-right:6px}
table{width:100%;border-collapse:collapse;font-size:.9rem}td,th{border-bottom:1px solid var(--bd);padding:6px 8px;text-align:left}
.sc{max-height:340px;overflow:auto;border:1px solid var(--bd);border-radius:8px}
details{border-bottom:1px solid var(--bd);padding:12px 0}summary{cursor:pointer;font-weight:500}
a{color:var(--fg)}footer{border-top:1px solid var(--bd);margin-top:64px;padding:28px 0;font-size:.88rem;color:var(--mut)}
[hidden]{display:none!important}
@media(max-width:560px){form{grid-template-columns:1fr}}
@media print{header,.tabs,form,footer,.noprint{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Mobile Menu Styles */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:25px;
  height:20px;
  cursor:pointer;
}
.hamburger span{
  display:block;
  height:3px;
  background:var(--fg);
  border-radius:2px;
  transition:all 0.3s ease;
}
/* Hamburger animation when menu is open */
.hamburger.active span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
  opacity:0;
}
.hamburger.active span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}
.nav-mobile{
  position:fixed;
  top:0;
  left:0;
  width:80%;
  max-width:300px;
  height:100vh;
  background:var(--bg);
  box-shadow:2px 0 5px rgba(0,0,0,0.1);
  transition:transform 0.3s ease;
  z-index:1000;
  padding-top:60px;
  transform:translateX(-100%);
}
.nav-mobile.active{
  transform:translateX(0);
}
/* Hide mobile nav on desktop screens as fallback */
@media(min-width:401px){
  .nav-mobile{
    display:none !important;
  }
}
.nav-mobile.active{
  left:0;
}
.nav-mobile a{
  display:block;
  padding:15px 20px;
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid var(--bd);
}
.nav-mobile a:hover{
  background:var(--card);
}
@media(max-width:400px){
.nav-desktop{
  display:none;
}
.hamburger{
  display:flex;
}
}
@media(max-width:320px){
.w{padding:0 10px}
h1{font-size:clamp(1.5rem,5vw,2rem)}
h2{font-size:1.2rem}
.lead{font-size:1rem}
}
@media(max-width:560px){
form{grid-template-columns:1fr}
}
.c2{display:grid;gap:10px}.guides a{display:block;padding:12px 0;border-bottom:1px solid var(--bd)}nav{display:flex;flex-wrap:wrap;gap:4px 0}