*{box-sizing:border-box}

:root{
	--sidebar-width:300px;
	--topbar-height:70px; /* reduced since theme toggle removed from top bar */
	--radius:10px;
	--font-scale:1; /* adjusted via html[data-font] */
	/* Dark theme (default) */
	--color-bg:#0f1115;
	--color-bg-alt:#161b22;
	--color-border:#1e2330;
	--color-text:#e6e6e6;
	--color-text-muted:#c9d1d9;
	--color-accent:#ffcc33;
	--color-accent-bg:rgba(255,204,51,.1);
	--color-heading:#ffffff;
	--color-link:#ffd35b;
	--color-blockquote-bg:#181d24;
	--color-table-header:#161d25;
	--color-panel-soft-bg:#18212b;
	--color-panel-soft-border:#233040;
	/* Admonition variant colors (dark) */
	--adm-note-color:#15803d; --adm-note-bg:rgba(21,128,61,.18); /* green */
	--adm-tip-color:#15803d; --adm-tip-bg:rgba(21,128,61,.18); /* align tip with note (green family) */
	--adm-important-color:#2563eb; --adm-important-bg:rgba(37,99,235,.18); /* blue for important */
	--adm-warning-color:#f59e0b; --adm-warning-bg:rgba(245,158,11,.22); /* yellow/orange */
	--adm-caution-color:#dc2626; --adm-caution-bg:rgba(220,38,38,.25); /* red */
}
[data-theme='light']{
	--color-bg:#f7f9fc;
	--color-bg-alt:#e9edf3;
	--color-border:#d0d7e2;
	--color-text:#1d2733;
	--color-text-muted:#374250;
	--color-accent:#c27d00;
	--color-accent-bg:rgba(255,196,0,.18);
	--color-heading:#17202b;
	--color-link:#b06500;
	--color-blockquote-bg:#eceff4;
	--color-table-header:#e4e9f0;
	--color-panel-soft-bg:#e3f2fd;
	--color-panel-soft-border:#c6d9eb;
	/* Admonition variant colors (light) */
	--adm-note-color:#15803d; --adm-note-bg:rgba(21,128,61,.12);
	--adm-tip-color:#15803d; --adm-tip-bg:rgba(21,128,61,.12);
	--adm-important-color:#1d4ed8; --adm-important-bg:rgba(29,78,216,.10);
	--adm-warning-color:#b45309; --adm-warning-bg:rgba(180,83,9,.16);
	--adm-caution-color:#b91c1c; --adm-caution-bg:rgba(185,28,28,.18);
}
body{margin:0;font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;transition:.25s background,.25s color;font-size:16px}
html{scroll-behavior:smooth}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:var(--color-bg-alt);color:var(--color-heading);padding:.6rem .9rem;border:2px solid var(--color-accent);border-radius:6px;z-index:999}
*:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.layout{display:flex;min-height:100vh}
/* Removed legacy sidebar styles */
.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;background:color-mix(in srgb,var(--color-bg) 90%,transparent);backdrop-filter:saturate(160%) blur(8px);padding:.9rem 1.5rem;border-bottom:1px solid var(--color-border);z-index:20;display:flex;align-items:center;gap:1rem}
/* Full-bleed hero banner */
.hero-wide{display:block;width:100%;max-width:none;margin:0;padding:0;--hero-bg:color-mix(in srgb,var(--color-bg-alt) 96%, transparent);background:var(--hero-bg)}

/* Narrow hero adjustments already handled below in max-width:640px block */
.hero-wide .hero-inner{width:100%;max-width:1180px;margin:0 auto;padding:.95rem clamp(.9rem,4vw,2.2rem);display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-wide .page-title{max-width:100%;margin:0 auto;text-align:center}
.page-title{font-size:1rem;font-weight:600;color:var(--color-heading);flex:1;text-align:center}
.hero-title{font-size:1.55rem;font-weight:700;letter-spacing:.5px;display:inline-flex;align-items:center;gap:.5rem;line-height:1.1}
.hero-text{background:linear-gradient(90deg,var(--color-accent),#ffef9c);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.emoji{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Android Emoji','EmojiOne Color','Twemoji Mozilla',system-ui,sans-serif;font-size:1.05em;line-height:1}
.hero-sub{font-size:.8rem;margin:.2rem 0 0;color:var(--color-text-muted);max-width:720px}
/* Mobile navigation */
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.3s opacity;z-index:1090}
.auto-nav nav ul{list-style:none;margin:0;padding:0}
.auto-nav li{margin:0}
.auto-nav a{display:block;padding:.4rem .55rem;margin:0 0 .15rem;border-radius:.4rem;font-size:.8rem;color:var(--color-text-muted);text-decoration:none;transition:.15s background,color}
.auto-nav a:hover{background:var(--color-bg);color:var(--color-heading)}
.auto-nav a.active{background:var(--color-accent-bg);color:var(--color-accent);font-weight:600}
.auto-nav li.lvl-3 a{padding-left:1.35rem;font-size:.74rem;opacity:.9}
/* Hide duplicate first H1 inside document (hero provides visual) */
.doc > h1:first-of-type{display:none}
/* Unified off-canvas nav for all breakpoints (uses body.nav-active only) */
.auto-nav{position:fixed;left:0;top:0;width:300px;max-width:85vw;height:100vh;padding:calc(var(--topbar-height) + 10px) 1rem 2rem;background:var(--color-bg-alt);border-right:1px solid var(--color-border);box-shadow:0 0 0 1px var(--color-border),0 14px 40px -10px rgba(0,0,0,.55);overflow-y:auto;transform:translateX(-110%);transition:.35s transform cubic-bezier(.4,.1,.2,1);z-index:1200}
body.nav-active .auto-nav{transform:translateX(0)}
.nav-backdrop{opacity:0;pointer-events:none;transition:.35s opacity}
body.nav-active .nav-backdrop{opacity:1;pointer-events:auto}
@media (min-width:1180px){
	/* Optionally dock nav on very wide screens */
	body.nav-active.dock-wide .auto-nav{transform:none;position:sticky}
}
/* Utility dock (floating controls) */
/* Utility dock island */
/* Collapsed island: expandable group wraps divider + back-to-top */
.utility-dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1500;display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;background:color-mix(in srgb,var(--color-bg-alt) 85%, transparent);backdrop-filter:saturate(150%) blur(10px);border:1px solid var(--color-border);border-radius:46px;box-shadow:0 4px 18px -4px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02);}
.utility-dock .util-btn{cursor:pointer;width:42px;height:42px;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);padding:0;font-size:.95rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.25s background,.25s color,.25s border-color,.25s transform,.25s box-shadow}
.utility-dock .util-btn:hover{background:var(--color-accent-bg);color:var(--color-accent);border-color:var(--color-accent-bg);box-shadow:0 2px 6px -2px rgba(0,0,0,.6)}
.utility-dock .util-btn:active{transform:scale(.9)}
/* Inline dock variant: no expansion mechanics */
.utility-dock .expander,.utility-dock .divider{display:none!important}
#backToTop{opacity:1!important;pointer-events:auto!important}
@keyframes btt-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,204,51,.0)}50%{box-shadow:0 0 0 6px rgba(255,204,51,.12)}}
#backToTop:focus-visible{animation:btt-pulse 1.4s ease-out 1}
/* Hide nav toggle on wide screens (desktop persistent nav) */
/* Keep menu button visible on all widths */
/* Compact adjustments small screens */
@media (max-width:520px){
	.utility-dock{gap:.45rem;padding:.45rem .6rem;bottom:14px}
	.utility-dock .util-btn{--btn-size:38px;font-size:.85rem}
		/* removed expanded variant */
	.utility-dock .divider{height:22px}
}
@media (max-width:640px){
	.hero-title{font-size:1.25rem}
}
.doc{padding:2rem 2.5rem;max-width:1000px;margin:0 auto}
/* Responsive tables: wrap wide tables on small screens */
.markdown-body table{display:table;width:100%;table-layout:auto}
@media (max-width:680px){
	.markdown-body table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-border);}
	.markdown-body p + table, .markdown-body h4 + table, .markdown-body h3 + table{margin-top:.8rem}
	/* Fallback: if GitHub Pages or parser fails and pipes render inline, force display block when row starts with pipe and contains pipe cells (progressive enhancement not bulletproof) */
	.markdown-body table{border-collapse:collapse}
	.markdown-body table th, .markdown-body table td{padding:.5rem .55rem}
	.markdown-body table thead{display:table-header-group}
	.markdown-body table tr{display:table-row}
	/* Ensure no side clipping on mobile */
	.hero-wide{left:0;right:0}
	body, .layout, .content{overflow-x:hidden}
}
/* Code blocks inside admonition/table cells should wrap instead of overflow */
.markdown-body pre code{white-space:pre-wrap;word-break:break-word}
.markdown-body code{word-break:break-word}
/* Base markdown font size now driven by root html font-size (JS adjusts) */
.markdown-body{--md-code-bg:var(--color-bg-alt);--md-border:var(--color-border);font-size:1rem;}
/* Root scale fallback (normal). JS modifies html font-size directly. */
html{font-size:17px}
.markdown-body p, .markdown-body ul, .markdown-body ol{line-height:1.6}
.markdown-body ul{padding-left:1.2rem}
.markdown-body ol{padding-left:1.25rem}
.markdown-body li+li{margin-top:.15rem}
.markdown-body pre{background:var(--md-code-bg);border:1px solid var(--md-border)}
.markdown-body code{background:var(--md-code-bg);border:1px solid var(--color-border);}
.markdown-body table{border:1px solid var(--md-border)}
.markdown-body table th,.markdown-body table td{border:1px solid var(--md-border)}
.markdown-body hr{border-top:1px solid var(--md-border)}

/* Admonitions */
/* Base admonition; border-left default overwritten by variants */
 .admonition{position:relative;border:1px solid var(--color-border);border-left:4px solid var(--color-accent);background:var(--color-bg-alt);padding:.85rem 1rem .9rem 1rem;margin:1.5rem 0;border-radius:6px;--adm-color:var(--color-accent);}
/* Variant colors now only affect left line + title; unified background for readability */
.admonition-tip{--adm-color:var(--adm-tip-color)}
.admonition-important{--adm-color:var(--adm-important-color)}
.admonition-warning{--adm-color:var(--adm-warning-color)}
.admonition-caution{--adm-color:var(--adm-caution-color)}
.admonition{border-left-color:var(--adm-color);}
.admonition-title{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .4rem;color:var(--adm-color)}
.markdown-body .admonition-title{font-size:.72em}
.markdown-body .admonition{font-size:1em}
.doc h1,.doc h2,.doc h3,.doc h4{scroll-margin-top:80px;font-weight:600;line-height:1.2}
.doc h1{font-size:calc(2rem * var(--font-scale));margin-top:0;color:var(--color-heading)}
.doc h2{font-size:calc(1.35rem * var(--font-scale));margin-top:2.2rem;border-top:1px solid var(--color-border);padding-top:1.2rem;color:var(--color-heading)}
.doc h3{font-size:calc(1.05rem * var(--font-scale));margin-top:1.6rem;color:var(--color-accent)}
.doc h4{font-size:calc(.85rem * var(--font-scale));margin-top:1.2rem;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted)}
.doc p{margin:1rem 0}
.doc code{background:var(--color-bg-alt);padding:.15rem .4rem;border-radius:4px;font-size:.78em;font-family:ui-monospace,Menlo,Monaco,"Cascadia Mono","Segoe UI Mono",Roboto Mono,monospace}
.doc pre{background:var(--color-bg-alt);padding:1rem 1.2rem;border-radius:8px;overflow:auto;font-size:.74em;line-height:1.4}
.doc table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.78em}
.doc th,.doc td{border:1px solid var(--color-border);padding:.55rem .6rem;text-align:left;vertical-align:top}
.doc th{background:var(--color-table-header);font-weight:600;color:var(--color-heading)}
.doc blockquote{margin:1.5rem 0;padding:.9rem 1rem .9rem 1rem;border-left:4px solid var(--color-accent);background:var(--color-blockquote-bg);border-radius:4px;font-size:calc(.8rem * var(--font-scale));color:var(--color-text-muted)}
.doc a{color:var(--color-link);text-decoration:none}
.doc a:hover{text-decoration:underline}
html{font-size:17px}
hr{border:0;border-top:1px solid var(--color-border);margin:2.5rem 0}
.markdown-body{--md-code-bg:var(--color-bg-alt);--md-border:var(--color-border);font-size:1rem;}
/* Font size changes now applied by adjusting root html font-size via JS; data-font kept for state only */
.panel{background:var(--color-bg-alt);border:1px solid var(--color-border);padding:15px;border-radius:8px;margin:1.1rem 0;word-spacing:0.1em;text-rendering:optimizeLegibility}
.panel--soft{background:var(--color-panel-soft-bg);border-color:var(--color-panel-soft-border)}
.panel--soft strong:first-child{margin-top:0}
.panel--ssh{position:relative;padding-top:1.1rem}
.doc h1{font-size:2rem;margin-top:0;color:var(--color-heading)}
.doc h2{font-size:1.35rem;margin-top:2.2rem;border-top:1px solid var(--color-border);padding-top:1.2rem;color:var(--color-heading)}
.doc h3{font-size:1.05rem;margin-top:1.6rem;color:var(--color-accent)}
.doc h4{font-size:.85rem;margin-top:1.2rem;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-muted)}
.panel--ssh:before{content:attr(data-os);position:absolute;top:-10px;left:12px;background:var(--color-bg);color:var(--color-text-muted);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .45rem;border:1px solid var(--color-border);border-radius:4px;font-weight:600}
.doc blockquote{margin:1.5rem 0;padding:.9rem 1rem .9rem 1rem;border-left:4px solid var(--color-accent);background:var(--color-blockquote-bg);border-radius:4px;font-size:.8rem;color:var(--color-text-muted)}
.panel table,&.panel-table{width:100%}
.utility-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1500;display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;background:color-mix(in srgb,var(--color-bg-alt) 85%, transparent);backdrop-filter:saturate(150%) blur(10px);border:1px solid var(--color-border);border-radius:46px;box-shadow:0 4px 18px -4px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02);will-change:transform;}
.panel ol,.panel ul{margin:0 0 0 1.1rem;padding:0}
.panel > strong:first-child{display:block;margin-bottom:.35rem}
.panel li{line-height:1.4;text-align:left;word-wrap:break-word;overflow-wrap:break-word}
.panel li strong{display:inline;white-space:nowrap}
/* Neutralize any legacy inline bgcolor attributes for theme consistency */
[bgcolor]{background:var(--color-bg-alt)!important;color:var(--color-text)!important}
@media (max-width:1080px){:root{--sidebar-width:250px}.doc{padding:1.5rem 1.75rem}.sidebar{padding:.9rem .75rem}}
	.utility-dock{bottom:calc(14px + env(safe-area-inset-bottom,0px));}
@media (max-width:820px){
  .layout{flex-direction:column}
}

/* Mobile menu toggle */
/* Removed legacy .menu-toggle-btn styles (menu handled via dock button) */

/* Scroll spy active anchor */
.nav a.spy-active{background:var(--color-accent-bg);color:var(--color-accent);font-weight:600}
.nav a.deep-anchor{padding:.25rem .6rem .25rem 1.1rem;position:relative}
.nav a.deep-anchor:before{content:'';position:absolute;left:.55rem;top:50%;width:4px;height:4px;background:var(--color-border);border-radius:50%;transform:translateY(-50%)}
.nav a.deep-anchor.spy-active:before{background:var(--color-accent)}

/* Back to top legacy (removed). Inline version inside .utility-dock inherits .util-btn */
.utility-dock #backToTop{position:static;bottom:auto;right:auto;opacity:1;pointer-events:auto;transition:.25s background,.25s color,.25s transform;}
.utility-dock #backToTop:hover{background:var(--color-accent-bg);color:var(--color-accent)}

/* Remove prior individual placements */

/* -------------------------------------------------- */
/* Mobile refinement overrides                        */
/* Center & enlarge hero banner, ensure nav fills vh  */
/* -------------------------------------------------- */
@media (max-width:640px){
	/* Stack topbar content vertically and center */
		.hero-wide.topbar{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0;background:var(--hero-bg);box-shadow:0 6px 22px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.02);}
		.hero-wide .hero-inner{padding:calc(env(safe-area-inset-top,0px) + .9rem) clamp(.95rem,7vw,2.4rem) 1.15rem}
		.hero-wide.topbar:after{content:"";display:block;width:100%;height:1px;margin:.35rem 0 0;background:linear-gradient(90deg,transparent,var(--color-border),transparent);}
	.page-title{width:100%;text-align:center}
	/* Allow intelligent wrapping but avoid emojis isolating themselves */
	.hero-title{font-size:clamp(1.65rem,7.2vw,2.05rem);line-height:1.12;flex-wrap:wrap;justify-content:center;text-align:center}
	.hero-title .emoji:last-of-type{display:none} /* hide trailing emoji to reduce awkward wrap */
	.hero-title .emoji{font-size:1.15em}
	.hero-sub{font-size:.85rem;text-align:center}
	/* Extra bottom padding so floating utility dock doesn't overlap early content */
	.doc{padding:1.3rem clamp(.85rem,5vw,1.15rem) calc(6.25rem + env(safe-area-inset-bottom,0px));max-width:100%;}
	/* Constrain wide content elements */
	.doc pre,
	.doc table,
	.doc .mermaid{margin-left:0;margin-right:0;}
	.doc .mermaid{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.25rem 0;text-align:center;}
	.doc .mermaid svg{width:100%!important;height:auto!important;display:block;margin:0 auto;}
	.utility-dock{position:fixed;left:50%!important;transform:translateX(-50%) translateY(0)!important;bottom:calc(14px + env(safe-area-inset-bottom,0px));}
}

/* Desktop / general mermaid centering insurance */
.doc .mermaid{display:block;text-align:center;margin:1.2rem auto;}
.doc .mermaid svg{display:block;margin:0 auto;height:auto!important;width:auto!important;max-width:100%;}

/* -------------------------------------------------- */
/* Responsive images                                  */
/* Ensure markdown images never overflow their container */
/* -------------------------------------------------- */
.doc img, .markdown-body img{max-width:100%;height:auto;display:block;margin:1.15rem auto;border-radius:6px;}
/* Provide a softer shadow for large illustrative screenshots */
.doc img[alt*="Dependencies"],
.doc img[alt*="Proton Folder"],
.markdown-body img[alt*="Dependencies"],
.markdown-body img[alt*="Proton Folder"]{box-shadow:0 4px 24px -6px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);}
/* Allow tiny badge/logo style images with explicit width attributes to sit inline */
.doc a img[width], .markdown-body a img[width]{display:inline-block;margin:.2rem .35rem .2rem 0;vertical-align:middle;border-radius:4px;}
/* If an image is the very first/last child in a block element, reduce top/bottom margin slightly */
.doc p > img:first-child:last-child{margin:0.85rem auto;}

/* Full height mobile nav (account for mobile browser chrome & safe areas) */
@media (max-width:820px){
	.auto-nav{height:100dvh;min-height:100vh;bottom:0;padding-bottom:calc(2.75rem + env(safe-area-inset-bottom,0px));}
}

/* Slight bump for really narrow devices */
@media (max-width:420px){
	.hero-title{font-size:clamp(1.7rem,8vw,2.15rem)}
}

/* Provide bottom padding for medium small screens too (utility dock space) */
@media (min-width:641px) and (max-width:900px){
	.doc{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}
}