:root{
  --site-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --terminal-font:var(--site-font);
  --code-font:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --page-width:900px;
  --site-gutter:14px;
  --base-border:#cbd5e1;
}
html{box-sizing:border-box;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-width:0;min-height:100vh;display:flex;flex-direction:column;font-family:var(--site-font);font-size:14px;line-height:1.62;letter-spacing:-.01em;background:#f5f5f5;color:#1f2937}
button,input,select,textarea{font-family:inherit}
input,select,textarea{outline:none}
input:focus,input:focus-visible,select:focus,select:focus-visible,textarea:focus,textarea:focus-visible{outline:none;border-color:var(--theme-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-color) 22%,transparent)}
a{color:var(--theme-color);text-decoration-thickness:1px;text-underline-offset:.16em;overflow-wrap:anywhere}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--theme-color);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--theme-color) 25%,transparent)}
.site-header{border-bottom:1px solid var(--base-border)}
.site-header-inner,.site-main,.site-footer-inner{width:min(calc(100% - (var(--site-gutter) * 2)),var(--page-width));margin:0 auto;min-width:0}
.site-header-inner{min-height:60px;display:flex;align-items:center;gap:20px}
.brand{min-width:0;font-weight:700;text-decoration:none;font-size:1.02rem;color:var(--theme-color);letter-spacing:.02em;overflow-wrap:anywhere}
.site-nav{margin-left:auto;min-width:0}.site-nav-main{display:flex;align-items:center;gap:15px;min-width:0}.nav-link{color:inherit;text-decoration:none;font-size:.92rem}.nav-link.is-current{font-weight:700;color:var(--theme-color)}
.menu-toggle{display:none;margin-left:auto;width:38px;height:38px;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;cursor:pointer;padding:8px}.menu-toggle span:not(.sr-only){display:block;height:2px;background:currentColor;margin:4px 0;transform-origin:center;transition:transform .16s ease,opacity .16s ease}
.site-main{flex:1;padding:24px 0;min-width:0}.site-content::after{content:"";display:block;clear:both}.site-content{min-width:0;max-width:100%;padding:24px;background:#fff;border:1px solid #c9c9c9;overflow-wrap:anywhere;word-break:normal}
.site-footer{padding:17px 0;font-size:.8rem}.site-footer-inner{opacity:.78}.site-footer a{color:inherit}
h1,h2,h3,h4,h5,h6{line-height:1.25;color:var(--theme-color);margin:1.35em 0 .5em;overflow-wrap:anywhere}h1{font-size:clamp(1.5rem,4vw,2rem);margin-top:0}h2{font-size:1.25rem}h3{font-size:1.08rem}h4{font-size:1rem}
p,ul,ol,blockquote,pre,table{margin:0 0 1rem}p,li{overflow-wrap:anywhere}ul,ol{padding-left:1.4rem}
img{max-width:100%}img[style*="float:left"],img[style*="float: left"]{margin-right:16px;margin-bottom:12px}img[style*="float:right"],img[style*="float: right"]{margin-left:16px;margin-bottom:12px}video,iframe,svg{max-width:100%;height:auto}
blockquote{margin-left:0;padding:.35rem .85rem;border-left:3px solid var(--theme-color);background:rgba(127,127,127,.08)}
code{font-family:var(--code-font);font-size:.93em;background:rgba(127,127,127,.12);padding:.1em .28em;border-radius:2px;overflow-wrap:anywhere}
pre{max-width:100%;overflow:auto;white-space:pre}.code-block{position:relative;max-width:100%;overflow:auto;padding:.85rem;border:1px solid rgba(127,127,127,.3);background:#111827;color:#e5e7eb;border-radius:0}.code-block code{background:transparent;padding:0;color:inherit;overflow-wrap:normal}
.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;max-width:100%;border-collapse:collapse;font-size:.92rem}th,td{min-width:0;padding:.45rem .55rem;border:1px solid #c9c9c9;text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}th{background:rgba(127,127,127,.08)}
.meta,.entry-meta{font-size:.8rem;opacity:.7;margin:-.25rem 0 1rem}.tag-list{display:flex;flex-wrap:wrap;gap:5px;margin:.7rem 0 1rem}.tag{font-size:.72rem;border:1px solid currentColor;border-radius:999px;padding:.08rem .4rem}
.entry-list{display:grid;gap:7px;min-width:0}.entry-card{min-width:0;max-width:100%;padding:14px;border:1px solid #d1d5db;background:rgba(255,255,255,.6);overflow-wrap:anywhere}.entry-card h2{margin:0 0 .3rem;font-size:1.05rem}.entry-card p:last-child{margin-bottom:0}
.project-status{display:inline-block;margin:0 0 .85rem;padding:.1rem .42rem;border:1px solid var(--theme-color);color:var(--theme-color);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.toc{padding:.85rem;border:1px solid #d1d5db;margin:0 0 1.1rem}.toc strong{display:block;margin-bottom:.35rem}.toc ul{margin:0;padding-left:1.15rem}
.copy-code-button{position:absolute;top:6px;right:6px;border:1px solid #64748b;border-radius:0;background:#111827;color:#e5e7eb;padding:.2rem .42rem;font:inherit;font-size:.68rem;cursor:pointer}.download-link{display:inline-block;padding:.38rem .6rem;border:1px solid var(--theme-color);text-decoration:none;font-weight:700}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=file],select,textarea{max-width:100%;min-width:0;border:1px solid #9ca3af;border-radius:0;background:var(--contact-input-bg,#fff);color:inherit;padding:8px 9px;font:inherit;font-size:13px;line-height:1.4}
input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}input[type=checkbox],input[type=radio]{accent-color:var(--theme-color)}
button{max-width:100%;border:1px solid var(--theme-color);border-radius:0;background:var(--theme-color);color:#fff;padding:7px 10px;font:inherit;font-size:13px;line-height:1.35;cursor:pointer}button:hover{filter:brightness(.96)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Shared Blog / Portfolio archive: small date, title, 100-character preview. */
.log-index-list{list-style:none;margin:0;padding:0;border-top:1px solid #d1d5db}
.log-index-list .content-index-item{display:block;min-width:0;max-width:100%;padding:.72rem 0;border-bottom:1px solid #d1d5db;overflow:hidden}
.content-index-date{display:block;max-width:100%;font-size:.7rem;line-height:1.35;opacity:.62;margin:0 0 .1rem;overflow-wrap:anywhere}
.content-index-title{display:block;min-width:0;max-width:100%;font-size:.96rem;line-height:1.35;margin:0;overflow-wrap:anywhere;word-break:break-word}.content-index-title a{display:inline;font-weight:700;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.content-index-preview{display:block;max-width:100%;font-size:.78rem;line-height:1.45;opacity:.72;margin:.15rem 0 0;overflow-wrap:anywhere;word-break:break-word}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.1rem;padding-top:.85rem;border-top:1px solid #d1d5db}.pagination span{font-size:.78rem;opacity:.68}
.contact-form{display:grid;gap:11px;max-width:640px}.contact-form label{display:grid;gap:4px;font-weight:600}.contact-form input,.contact-form textarea{width:100%}.contact-form textarea{min-height:160px;resize:vertical}.contact-form button{justify-self:start;font-weight:700}.contact-form .contact-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-message{padding:.65rem .75rem;border:1px solid #d1d5db;margin:0 0 .85rem}.form-message.success{border-color:#15803d}.form-message.error{border-color:#b42318}

@media(max-width:720px){
  .site-content{padding:18px}.site-main{padding:18px 0}.content-index-date{font-size:.68rem}.pagination{align-items:flex-start}.menu-toggle{display:block}.site-nav{display:none;position:fixed;inset:0;z-index:1000;margin:0;padding:72px 0 24px;background:var(--mobile-menu-bg,#111827);color:var(--mobile-menu-text,#fff);overflow:auto}.site-nav.is-open{display:block}.site-nav-main{display:block;width:min(calc(100% - (var(--site-gutter) * 2)),var(--page-width));margin:0 auto}.nav-link{display:block;padding:13px 0;border-bottom:1px solid currentColor;font-size:1rem}.nav-link:last-child{border-bottom:0}body.menu-open{overflow:hidden}.menu-toggle{position:relative;z-index:1001}.menu-open .menu-toggle{color:var(--mobile-menu-text,#fff)}.menu-open .menu-toggle span:not(.sr-only):nth-child(1){transform:translateY(6px) rotate(45deg)}.menu-open .menu-toggle span:not(.sr-only):nth-child(2){opacity:0}.menu-open .menu-toggle span:not(.sr-only):nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media print{.site-header,.site-footer,.copy-code-button{display:none!important}.site-main,.site-header-inner,.site-footer-inner{width:100%;padding:0}.site-content{border:0;padding:0}a{color:#000;text-decoration:none}.code-block{white-space:pre-wrap}}


/* Theme appearance modes. Theme personality stays intact; this layer supplies readable light/dark surfaces. */
html[data-appearance="light"]{color-scheme:light;--mobile-menu-bg:#f5f5f5;--mobile-menu-text:#111827}
html[data-appearance="light"] body{background:#f5f5f5;color:#1f2937;background-image:none;text-shadow:none}
html[data-appearance="light"] .site-header{background:#f5f5f5;border-color:#cbd5e1}
html[data-appearance="light"] .site-content{background:#fff;border-color:#cbd5e1;box-shadow:none}
html[data-appearance="light"] .nav-link{color:#374151}
html[data-appearance="light"] .entry-card,html[data-appearance="light"] .toc{background:#fafafa;border-color:#d1d5db}
html[data-appearance="light"] .site-footer{color:#64748b}
html[data-appearance="light"] th{background:#f3f4f6}
html[data-appearance="light"] table th,html[data-appearance="light"] table td{border-color:#d1d5db}
html[data-appearance="light"] blockquote{background:#f8fafc}
html[data-appearance="light"] input[type=text],html[data-appearance="light"] input[type=email],html[data-appearance="light"] input[type=password],html[data-appearance="light"] input[type=url],html[data-appearance="light"] input[type=search],html[data-appearance="light"] input[type=number],html[data-appearance="light"] input[type=date],html[data-appearance="light"] input[type=time],html[data-appearance="light"] input[type=datetime-local],html[data-appearance="light"] input[type=file],html[data-appearance="light"] select,html[data-appearance="light"] textarea{background:#fff;color:#111827;border-color:#9ca3af}

html[data-appearance="dark"]{color-scheme:dark;--mobile-menu-bg:#080c12;--mobile-menu-text:#e5e7eb;--base-border:#334155;--contact-input-bg:#0b1220}
html[data-appearance="dark"] body{background:#0b0f14;color:#d7dee7;background-image:none}
html[data-appearance="dark"] .site-header{background:#080c12;border-color:#334155}
html[data-appearance="dark"] .site-content{background:#111827;border-color:#334155;box-shadow:none}
html[data-appearance="dark"] .nav-link{color:#d7dee7}
html[data-appearance="dark"] .entry-card,html[data-appearance="dark"] .toc{background:#0f172a;border-color:#334155}
html[data-appearance="dark"] .site-footer{color:#94a3b8}
html[data-appearance="dark"] h1,html[data-appearance="dark"] h2,html[data-appearance="dark"] h3,html[data-appearance="dark"] h4,html[data-appearance="dark"] h5,html[data-appearance="dark"] h6{color:var(--theme-color)}
html[data-appearance="dark"] th{background:#182235}
html[data-appearance="dark"] table th,html[data-appearance="dark"] table td{border-color:#334155}
html[data-appearance="dark"] blockquote{background:#172033}
html[data-appearance="dark"] input[type=text],html[data-appearance="dark"] input[type=email],html[data-appearance="dark"] input[type=password],html[data-appearance="dark"] input[type=url],html[data-appearance="dark"] input[type=search],html[data-appearance="dark"] input[type=number],html[data-appearance="dark"] input[type=date],html[data-appearance="dark"] input[type=time],html[data-appearance="dark"] input[type=datetime-local],html[data-appearance="dark"] input[type=file],html[data-appearance="dark"] select,html[data-appearance="dark"] textarea{background:#0b1220;color:#e5e7eb;border-color:#475569}
html[data-appearance="dark"] .form-message{border-color:#475569}

/* White Smoke is intentionally very pale; use dark ink for interactive text in Light mode. */
html[data-appearance="light"][data-accent="white-smoke"] a,html[data-appearance="light"][data-accent="white-smoke"] .brand,html[data-appearance="light"][data-accent="white-smoke"] .nav-link.is-current,html[data-appearance="light"][data-accent="white-smoke"] h1,html[data-appearance="light"][data-accent="white-smoke"] h2,html[data-appearance="light"][data-accent="white-smoke"] h3,html[data-appearance="light"][data-accent="white-smoke"] h4{color:#475569}
html[data-appearance="light"][data-accent="white-smoke"] button{background:#f5f5f5;color:#111827;border-color:#94a3b8}
html[data-appearance="light"][data-accent="white-smoke"] :focus-visible{outline-color:#64748b}
html[data-appearance="light"][data-accent="white-smoke"] .project-status,html[data-appearance="light"][data-accent="white-smoke"] .download-link{color:#475569;border-color:#94a3b8}

/* Readability pass: 14px normal text and high-contrast Light / Dark appearance. */
body,
.nav-link,
.site-content,
.site-content p,
.site-content li,
.site-content table,
.site-content input,
.site-content select,
.site-content textarea,
.site-content button,
.contact-form label,
.download-link{font-size:14px}

/* Deliberately secondary text can stay smaller, but never low-contrast. */
.meta,.entry-meta,.content-index-date,.site-footer,.pagination span,.tag,.project-status,.copy-code-button{font-size:12px}
.content-index-preview{font-size:13px;line-height:1.5}
.content-index-title{font-size:14px;line-height:1.4}

html[data-appearance="light"]{
  --readable-text:#111827;
  --readable-muted:#475569;
  --readable-border:#b8c2cf;
  --readable-surface:#ffffff;
  --readable-soft:#f8fafc;
}
html[data-appearance="light"] body{color:var(--readable-text)}
html[data-appearance="light"] .site-content{color:var(--readable-text);background:var(--readable-surface);border-color:var(--readable-border)}
html[data-appearance="light"] .nav-link{color:#1f2937}
html[data-appearance="light"] .site-footer,
html[data-appearance="light"] .meta,
html[data-appearance="light"] .entry-meta,
html[data-appearance="light"] .content-index-date,
html[data-appearance="light"] .content-index-preview,
html[data-appearance="light"] .pagination span{color:var(--readable-muted);opacity:1}
html[data-appearance="light"] .entry-card,
html[data-appearance="light"] .toc,
html[data-appearance="light"] blockquote{color:var(--readable-text);background:var(--readable-soft);border-color:var(--readable-border)}
html[data-appearance="light"] input[type=text],
html[data-appearance="light"] input[type=email],
html[data-appearance="light"] input[type=password],
html[data-appearance="light"] input[type=url],
html[data-appearance="light"] input[type=search],
html[data-appearance="light"] input[type=number],
html[data-appearance="light"] input[type=date],
html[data-appearance="light"] input[type=time],
html[data-appearance="light"] input[type=datetime-local],
html[data-appearance="light"] input[type=file],
html[data-appearance="light"] select,
html[data-appearance="light"] textarea{color:#111827;background:#fff;border-color:#7c8998}
html[data-appearance="light"] input::placeholder,
html[data-appearance="light"] textarea::placeholder{color:#64748b;opacity:1}

html[data-appearance="dark"]{
  --readable-text:#f1f5f9;
  --readable-muted:#cbd5e1;
  --readable-border:#475569;
  --readable-surface:#111827;
  --readable-soft:#172033;
}
html[data-appearance="dark"] body{color:var(--readable-text)}
html[data-appearance="dark"] .site-content{color:var(--readable-text);background:var(--readable-surface);border-color:var(--readable-border)}
html[data-appearance="dark"] .nav-link{color:#e5e7eb}
html[data-appearance="dark"] .site-footer,
html[data-appearance="dark"] .meta,
html[data-appearance="dark"] .entry-meta,
html[data-appearance="dark"] .content-index-date,
html[data-appearance="dark"] .content-index-preview,
html[data-appearance="dark"] .pagination span{color:var(--readable-muted);opacity:1}
html[data-appearance="dark"] .entry-card,
html[data-appearance="dark"] .toc,
html[data-appearance="dark"] blockquote{color:var(--readable-text);background:var(--readable-soft);border-color:var(--readable-border)}
html[data-appearance="dark"] input[type=text],
html[data-appearance="dark"] input[type=email],
html[data-appearance="dark"] input[type=password],
html[data-appearance="dark"] input[type=url],
html[data-appearance="dark"] input[type=search],
html[data-appearance="dark"] input[type=number],
html[data-appearance="dark"] input[type=date],
html[data-appearance="dark"] input[type=time],
html[data-appearance="dark"] input[type=datetime-local],
html[data-appearance="dark"] input[type=file],
html[data-appearance="dark"] select,
html[data-appearance="dark"] textarea{color:#f8fafc;background:#0b1220;border-color:#64748b}
html[data-appearance="dark"] input::placeholder,
html[data-appearance="dark"] textarea::placeholder{color:#94a3b8;opacity:1}
html[data-appearance="dark"] .code-block{color:#f8fafc;border-color:#475569}

.turnstile-wrap{max-width:100%;overflow-x:auto;margin:12px 0}

.section-introduction{margin:0 0 1.5rem}
.section-introduction>:first-child{margin-top:0}
.section-introduction>:last-child{margin-bottom:0}