:root {
  --ink:#20252b; --muted:#59646f; --ground:#fff; --rail:#f2f5f5;
  --line:#dce4e7; --blue:#126476; --wash:#e7f3f3;
  --ease:cubic-bezier(.2,.7,.2,1);
}
* { letter-spacing:0!important; }
body { background:linear-gradient(145deg,#e3f1ee 0,#f3edf1 22%,#f4f7f8 38%,#fff 65%) fixed; }
.workspace { background:white; }
.sidebar {
  background:#f1f5f4; border-right-color:#d3e0df;
  box-shadow:inset -1px 0 #ffffffb8,10px 0 32px #234b4610;
  overflow-y:auto;
}
.topbar { background:#f9fcfc; box-shadow:0 3px 18px #263e4710,inset 0 1px white; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .sidebar { background:linear-gradient(145deg,#ffffff96,#eef7f380 55%,#f8f0f380); }
  .topbar { background:#ffffffb8; }
  .sidebar,.topbar { -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3); }
  .mobile-navigation nav { background:#ffffffed; -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
}
.brand-symbol { background:transparent; width:48px; height:48px; border-radius:0; }
.brand-symbol img { display:block; width:100%; height:100%; object-fit:contain; }
.brand { font-size:24px; line-height:1.15; }
.brand-sub { font-size:inherit; margin:0; font-weight:700; }
h1,.material-header h1 { font-size:36px; }
.hero-title,.library-heading h1 { font-size:44px; }
.hero-title span { color:var(--blue); }
.nav-link,.save-button,.icon-button,.copy,.button {
  position:relative; isolation:isolate;
  transition:color 100ms,background-color 100ms,box-shadow 180ms var(--ease),transform 180ms var(--ease);
}
.nav-link::before,.save-button::before,.icon-button::before,.copy::before,.button::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(112deg,transparent calc(var(--glint,50% ) - 22%),#ffffffb8 var(--glint,50%),transparent calc(var(--glint,50%) + 22%));
  opacity:0; transition:opacity 180ms var(--ease);
}
.nav-link:hover::before,.save-button:hover::before,.icon-button:hover::before,.copy:hover::before,.button:hover::before { opacity:1; }
.nav-link:hover { color:var(--blue); background:#ffffff70; box-shadow:inset 0 1px white,0 2px 8px #214a4510; }
.nav-link.active,.nav-link[aria-current] {
  color:var(--blue); background:linear-gradient(135deg,#fff,#eff7f6);
  box-shadow:inset 0 1px white,inset 3px 0 #20858b,0 3px 12px #174a4920;
  border-radius:8px;
}
.global-search { background:#ffffff8c; border:1px solid #d2e0e0; border-radius:8px; padding-left:10px; transition:box-shadow 180ms var(--ease); }
.global-search:focus-within { box-shadow:0 0 0 3px #168b811b; border-color:#418d90; }
.topbar::after {
  content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,#16847b,#126476 65%,#ad5969);
  transform:scaleX(var(--reading-progress,0)); transform-origin:left; pointer-events:none;
}
.feature { background:transparent; border-radius:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px 0; }
.feature h2 { font-size:28px; }
.feature p,.feature .eyebrow { color:var(--muted); }
.feature-steps { border-left:2px solid #93b9b0; padding-left:24px; }
.feature-steps li { border-color:var(--line); }
.step-number,.path-number { color:#337e71; }
.button { background:var(--blue); border-radius:8px; }
.button:hover { background:#145565; }
.save-button,.copy,.icon-button,.button.secondary {
  background-color:#faffff; border-color:#bdcfd1;
  box-shadow:inset 0 1px white,0 2px 6px #264c4610;
}
.save-button.saved,.save-button[aria-pressed="true"] { background:#e4f3ec; color:#226848; border-color:#a9cbb9; }
.icon-button:active,.save-button:active,.copy:active,.button:active { transform:scale(.96); transition-duration:100ms; }
.path-row,.material-row { transition:background-color 140ms,box-shadow 180ms var(--ease); }
.path-row:hover,.material-row:hover { background:#f5faf9; box-shadow:inset 3px 0 #78afa4; }
.row-arrow { transition:transform 180ms var(--ease),opacity 180ms; }
.path-row:hover .row-arrow,.material-row:hover .row-arrow { transform:translate(3px,-3px); opacity:1; }
.path-row > span:last-child { flex-shrink:0; }
.badge { background:#edf3f1; color:#43665c; }
.code-box { border-radius:8px; border-color:#ccdcd9; background:#f5f9f8; }
.code-top { background:#eff5f4; border-color:#ccdcd9; }
.toast { border:1px solid #ffffff50; border-radius:8px; background:#203b36f2; box-shadow:0 8px 32px #183d3928; transform:translate(-50%,12px); transition:opacity 180ms,transform 240ms var(--ease); }
.toast.show { transform:translate(-50%,0); }
@media (max-width:800px) {
  .top-note { display:none; }
  h1,.material-header h1,.hero-title,.library-heading h1 { font-size:30px; }
  .brand { font-size:19px; }
  .sidebar { background:#edf5f2f5; }
  .global-search { padding-right:8px; }
}
@media (prefers-reduced-transparency:reduce) {
  .sidebar { background:#f1f5f4; }
  .topbar,.mobile-navigation nav { background:white; }
  .sidebar,.topbar,.mobile-navigation nav { -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .row-arrow,.icon-button:active,.save-button:active,.copy:active,.button:active { transform:none; }
  .nav-link::before,.save-button::before,.icon-button::before,.copy::before,.button::before { display:none; }
}