:root{
  --bg: oklch(0.07 0.000 0);
  --surface: oklch(0.15 0.012 150);
  --surface-2: oklch(0.19 0.014 150);
  --ink: oklch(0.96 0.004 150);
  --muted: oklch(0.60 0.006 150);
  --primary: oklch(0.62 0.145 150);
  --primary-ink: oklch(0.62 0.145 150 / 0.16);
  --accent: oklch(0.68 0.140 75);
  --accent-ink: oklch(0.68 0.140 75 / 0.16);
  --danger: oklch(0.60 0.18 25);
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --radius-icon: 26%;
  --radius-window: 16px;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ color-scheme: dark; }
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ font-family: var(--font-display); font-weight:500; text-wrap:balance; line-height:1.15; }
p{ text-wrap:pretty; }
button{ font-family:inherit; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---------- Compliance / document pages ---------- */
.doc-page{ min-height:100vh; display:flex; flex-direction:column; }
.doc-header{ border-bottom:1px solid oklch(1 0 0 / 0.08); }
.doc-nav{
  max-width:700px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-mono); font-size:13px; color: var(--muted);
}
.doc-nav a{ color: var(--muted); }
.doc-nav a:hover{ color: var(--primary); }
.doc-wrap{ max-width:700px; margin:0 auto; padding:48px 24px 96px; flex:1; }
.doc-kicker{ font-family: var(--font-mono); font-size:12.5px; color: var(--accent); letter-spacing:.02em; }
.doc-wrap h1{ font-size: clamp(28px, 5vw, 40px); margin-top:8px; }
.doc-updated{ color: var(--muted); font-size:13.5px; margin-top:10px; }
.doc-body{ margin-top:40px; }
.doc-body h2{ font-size:19px; margin-top:34px; margin-bottom:10px; color: var(--ink); }
.doc-body h2:first-child{ margin-top:0; }
.doc-body p{ margin-bottom:14px; color: oklch(0.82 0.006 150); }
.doc-body ul{ margin: 0 0 14px 20px; color: oklch(0.82 0.006 150); }
.doc-footer{
  border-top:1px solid oklch(1 0 0 / 0.08);
  text-align:center; font-size:12.5px; color: var(--muted);
  padding:24px; line-height:1.8;
}
.doc-footer a{ color: var(--muted); }

/* ---------- Desktop (homepage) ---------- */
.desktop{
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
.wallpaper{
  position:absolute; inset:0; z-index:0;
}
.wallpaper img{
  width:100%; height:100%; object-fit:cover; object-position: 50% 22%;
  filter: saturate(0.92) brightness(0.62);
}
.wallpaper::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, oklch(0.05 0 0 / 0.55) 0%, oklch(0.05 0 0 / 0.15) 22%, oklch(0.05 0 0 / 0.35) 68%, oklch(0.05 0 0 / 0.85) 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 40%, oklch(0.05 0 0 / 0.5) 100%);
}

.menubar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 18px;
  font-family: var(--font-mono); font-size:12.5px; color: oklch(0.95 0 0 / 0.85);
  background: oklch(0.06 0 0 / 0.35);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
}
.menubar-left{ display:flex; align-items:center; gap:18px; min-width:0; }
.menubar-brand{ font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.menubar-item{ opacity:.75; white-space:nowrap; }
.menubar-right{ display:flex; gap:14px; opacity:.85; white-space:nowrap; flex-shrink:0; }

@media (max-width:640px){
  .menubar-item{ display:none; }
}

.icons-layer{
  position:relative; z-index:1;
  height: calc(100% - 41px - 96px);
  padding: 5vh 5vw 2vh;
}
.icon{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:104px;
  background:none; border:none; cursor:pointer;
  padding:8px;
  border-radius:12px;
  transition: transform 140ms var(--ease-out-quart), background 140ms ease;
}
.icon:hover, .icon:focus-visible{ transform: translateY(-2px) scale(1.05); }
.icon:focus-visible{ outline: 2px solid var(--primary); outline-offset:2px; }
.icon.is-selected{ background: oklch(1 0 0 / 0.08); }
.icon-glyph{
  position:relative; overflow:hidden;
  width:64px; height:64px; border-radius: var(--radius-icon);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -8px oklch(0 0 0 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.15), inset 0 -6px 10px -4px oklch(0 0 0 / 0.35);
}
.icon-glyph::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.32) 0%, oklch(1 0 0 / 0.06) 32%, transparent 55%);
  pointer-events:none;
}
.icon-glyph svg{ position:relative; width:38px; height:38px; filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.25)); }
.icon.is-selected .icon-glyph, .icon:hover .icon-glyph{
  box-shadow: 0 12px 34px -6px oklch(0 0 0 / 0.65), inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 -6px 10px -4px oklch(0 0 0 / 0.35), 0 0 0 2px oklch(1 0 0 / 0.12);
}
.icon-glyph.tone-primary{ background: linear-gradient(160deg, oklch(0.72 0.15 150), oklch(0.46 0.13 150)); }
.icon-glyph.tone-accent{ background: linear-gradient(160deg, oklch(0.78 0.145 75), oklch(0.53 0.13 75)); }
.icon-glyph.tone-neutral{ background: linear-gradient(160deg, oklch(0.38 0.012 150), oklch(0.18 0.01 150)); }
.icon-label{
  font-family: var(--font-mono); font-size:12.5px; color: oklch(0.97 0 0);
  text-shadow: 0 1px 3px oklch(0 0 0 / 0.8);
  text-align:center; line-height:1.3;
}
.icon-label small{ display:block; color: oklch(0.85 0 0 / 0.75); font-size:11px; }

.pos-1{ top:6%; left:7%; } .pos-2{ top:6%; left:23%; }
.pos-3{ top:34%; left:6%; } .pos-4{ top:58%; left:8%; }
@media (max-width:640px){
  .icons-layer{ display:flex; flex-wrap:wrap; gap:22px 8px; height:auto; padding: 4vh 6vw; }
  .icon{ position:static; }
}

.dock{
  position:absolute; left:50%; bottom:16px; z-index:3;
  transform: translateX(-50%);
  display:flex; align-items:flex-end; gap:14px;
  padding: 10px 16px;
  background: oklch(0.1 0 0 / 0.45);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: 22px;
  box-shadow: 0 20px 50px -12px oklch(0 0 0 / 0.6);
}
.dock-item{
  position:relative; overflow:hidden;
  width:52px; height:52px; border-radius: var(--radius-icon); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform 160ms var(--ease-out-quart);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15), inset 0 -5px 8px -3px oklch(0 0 0 / 0.35), 0 8px 16px -8px oklch(0 0 0 / 0.5);
}
.dock-item::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, oklch(1 0 0 / 0.32) 0%, oklch(1 0 0 / 0.06) 32%, transparent 55%);
  pointer-events:none;
}
.dock-item:hover, .dock-item:focus-visible{ transform: translateY(-8px) scale(1.08); }
.dock-item:focus-visible{ outline: 2px solid var(--primary); outline-offset:3px; }
.dock-item svg{ position:relative; width:28px; height:28px; filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.25)); }
.dock-item.tone-primary{ background: linear-gradient(160deg, oklch(0.72 0.15 150), oklch(0.46 0.13 150)); }
.dock-item.tone-accent{ background: linear-gradient(160deg, oklch(0.78 0.145 75), oklch(0.53 0.13 75)); }
.dock-item.tone-neutral{ background: linear-gradient(160deg, oklch(0.38 0.012 150), oklch(0.18 0.01 150)); }
.dock-sep{ width:1px; align-self:stretch; background: oklch(1 0 0 / 0.14); margin: 4px 2px; }

/* Windows */
.window-backdrop{
  position:fixed; inset:0; z-index:10;
  background: oklch(0.03 0 0 / 0.55);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  opacity:0; pointer-events:none;
  transition: opacity 220ms var(--ease-out-quart);
}
.window-backdrop.is-open{ opacity:1; pointer-events:auto; }
.window{
  width:100%; max-width:460px; max-height:min(600px, 86vh);
  background: var(--surface);
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: var(--radius-window);
  box-shadow: 0 40px 80px -20px oklch(0 0 0 / 0.7);
  overflow:hidden;
  display:flex; flex-direction:column;
  transform: scale(0.92) translateY(10px);
  opacity:0;
  transition: transform 300ms var(--ease-out-expo), opacity 220ms var(--ease-out-quart);
}
.window-backdrop.is-open .window{ transform: scale(1) translateY(0); opacity:1; }
.window-titlebar{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.traffic-lights{ display:flex; gap:7px; }
.traffic-lights span{ width:11px; height:11px; border-radius:50%; display:block; }
.traffic-lights .r{ background:#ff5f57; } .traffic-lights .y{ background:#febc2e; } .traffic-lights .g{ background:#28c840; }
.window-title{ font-family: var(--font-mono); font-size:12.5px; color: var(--muted); margin:0 auto; }
.window-close{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:6px;
}
.window-close:hover{ background: oklch(1 0 0 / 0.08); color: var(--ink); }
.window-body{ padding:26px 24px; overflow-y:auto; }
.window-body h2{ font-size:22px; margin-bottom:12px; }
.window-body p{ color: oklch(0.85 0.006 150); margin-bottom:14px; }
.window-body .kicker{ font-family: var(--font-mono); font-size:11.5px; color: var(--accent); margin-bottom:10px; display:block; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 20px; border-radius:10px; border:none; cursor:pointer;
  font-weight:600; font-size:14.5px; transition: transform 140ms var(--ease-out-quart), filter 140ms ease;
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--primary); color: oklch(0.08 0 0); }
.btn-ghost{ background: oklch(1 0 0 / 0.08); color: var(--ink); }
.btn-block{ width:100%; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color: var(--muted); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:11px 12px; border-radius:9px;
  background: oklch(1 0 0 / 0.06); border:1px solid oklch(1 0 0 / 0.12);
  color: var(--ink); font-family: var(--font-body); font-size:14.5px;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--primary); outline-offset:1px; }
.field textarea{ resize:vertical; min-height:80px; }
.checkbox-field{ display:flex; gap:10px; align-items:flex-start; margin-bottom:18px; }
.checkbox-field input{ margin-top:3px; width:16px; height:16px; accent-color: var(--primary); flex-shrink:0; }
.checkbox-field label{ font-size:13px; color: oklch(0.85 0.006 150); line-height:1.5; }
.checkbox-field a{ color: var(--accent); }
.form-note{ font-size:12px; color: var(--muted); margin-top:14px; text-align:center; }
.form-error{ display:none; color: var(--danger); margin-top:8px; }
.form-error.is-visible{ display:block; }
.form-success{ display:none; text-align:center; padding: 12px 0 4px; }
.form-success.is-visible{ display:block; }
.form-success p{ color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  .icon, .icon-glyph, .dock-item, .window, .window-backdrop, .btn{ transition:none !important; }
  .icon:hover, .icon.is-selected{ transform:none; }
  .dock-item:hover{ transform:none; }
}