*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a0a;
  --surface:#111;
  --border:rgba(255,255,255,0.055);
  --text:#eeede8;
  --muted:rgba(238,237,232,0.44);
  --dim:rgba(238,237,232,0.22);
  --serif:'EB Garamond',Georgia,serif;
  --mono:'JetBrains Mono',monospace;
  --code-bg:#0d1117;
  --code-border:rgba(255,255,255,0.08);
  --easy:rgba(74,222,128,0.82);
  --medium:rgba(250,189,47,0.85);
  --hard:rgba(248,113,113,0.85);
}
[data-theme="light"]{
  --bg:#f5f4ef;
  --surface:#eceae2;
  --border:rgba(26,25,23,0.1);
  --text:#1a1917;
  --muted:rgba(26,25,23,0.56);
  --dim:rgba(26,25,23,0.32);
  --code-bg:#0d1117;
  --code-border:rgba(0,0,0,0.14);
  --easy:rgba(22,163,74,0.9);
  --medium:rgba(202,138,4,0.9);
  --hard:rgba(220,38,38,0.9);
}

html{height:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--mono);font-size:13px;font-weight:300;
  line-height:1.7;min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
  display:flex;flex-direction:column;
  overscroll-behavior:none;
}
button{background:none;border:none;cursor:pointer;font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:2px;height:2px}
::-webkit-scrollbar-thumb{background:var(--dim)}
::-webkit-scrollbar-track{background:transparent}

/* ── HEADER ── */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem 2rem;
}
.logo{
  font-family:var(--mono);font-size:11px;font-weight:300;
  letter-spacing:.12em;color:var(--muted);cursor:pointer;transition:color .2s;
}
.logo:hover{color:var(--text)}

/* ── HAMBURGER ── */
.ham{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:4px;cursor:pointer;width:26px;height:26px}
.ham span{display:block;width:18px;height:1px;background:var(--text);transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}
.ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── MENU ── */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:0 2.5rem;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.menu.open{transform:translateY(0)}
.menu-item{
  font-family:var(--serif);font-size:clamp(2.5rem,7vw,5rem);
  font-weight:400;line-height:1.15;color:var(--muted);
  cursor:pointer;transition:color .2s;padding:.3rem 0;
}
.menu-item:hover{color:var(--text)}
.menu-foot{
  position:absolute;bottom:2rem;left:2.5rem;right:2.5rem;
  display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:var(--dim);
}

/* ── MAIN ── */
main{
  max-width:820px;width:100%;margin:0 auto;flex:1;
  display:flex;flex-direction:column;
  padding-top:6rem;
}

/* ── HOME ── */
.home{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 2rem}
.home-name{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5rem);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin-bottom:1.5rem}
.home-name em{font-style:italic;color:var(--muted)}
.home-bio{font-size:12px;color:var(--muted);line-height:1.9;max-width:360px;margin-bottom:3rem}
.home-links{display:flex;flex-direction:column;gap:.1rem}
.home-link{
  display:flex;align-items:center;gap:1rem;font-size:11px;
  letter-spacing:.1em;color:var(--dim);cursor:pointer;
  padding:.35rem 0;transition:color .2s;width:fit-content;
}
.home-link:hover{color:var(--text)}
.home-link span{transition:transform .2s}
.home-link:hover span{transform:translateX(3px)}

/* ── PAGE HEADER ── */
.pg-head{
  padding:2rem 2rem 1.75rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.pg-title{font-family:var(--serif);font-size:2rem;font-weight:400;letter-spacing:-.01em}
.pg-count{font-size:10px;letter-spacing:.08em;color:var(--dim);white-space:nowrap}

/* ── SEARCH ── */
.search-row{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 2rem;border-bottom:1px solid var(--border);
}
.search-input{
  flex:1;background:transparent;border:none;color:var(--text);
  font-family:var(--mono);font-size:12px;font-weight:300;outline:none;letter-spacing:.02em;
}
.search-input::placeholder{color:var(--dim)}
.search-clear{font-size:10px;color:var(--dim);cursor:pointer;transition:color .2s;display:none;padding:2px}
.search-clear.vis{display:block}
.search-clear:hover{color:var(--text)}

/* ── PROBLEM LIST ── */
.plist{padding:0 2rem}
.prow{
  display:grid;grid-template-columns:2.8rem 1fr auto auto;
  align-items:center;gap:1.5rem;padding:.85rem 0;
  border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .2s;
}
.prow:last-child{border-bottom:none}
.prow:hover{opacity:.48}
.pnum{font-size:10px;color:var(--dim);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ptitle{font-size:12px;letter-spacing:.02em}
.diff{font-size:10px;letter-spacing:.06em}
.de{color:var(--easy)}
.dm{color:var(--medium)}
.dh{color:var(--hard)}
.prow-lc{
  font-size:10px;color:var(--dim);
  transition:color .2s;opacity:.6;
  flex-shrink:0;
}
.prow-lc:hover{color:var(--text);opacity:1}

/* ── DETAIL HEAD ── */
.det-head{padding:2rem 2rem 1.75rem;border-bottom:1px solid var(--border)}
.back{
  display:inline-flex;align-items:center;gap:.6rem;font-size:10px;
  letter-spacing:.1em;color:var(--dim);cursor:pointer;margin-bottom:1.75rem;transition:color .2s;
}
.back:hover{color:var(--text)}
.det-meta-row{
  display:flex;align-items:center;gap:1.25rem;
  margin-bottom:.5rem;font-size:10px;letter-spacing:.08em;color:var(--dim);
}
.det-meta-sep{opacity:.3}
.det-lc-link{
  margin-left:auto;font-size:10px;letter-spacing:.08em;
  color:var(--dim);transition:color .2s;
}
.det-lc-link:hover{color:var(--text)}
.det-title{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin-bottom:1rem}
.det-row{margin-bottom:.55rem}
.det-tags{display:flex;align-items:center;border-bottom:1px solid var(--border)}
.det-tags .tag{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:10px;letter-spacing:.1em;padding:.65rem .5rem;
  border-bottom:1px solid transparent;margin-bottom:-1px;
  color:var(--dim);cursor:pointer;background:none;
  transition:all .2s;white-space:nowrap;
}
.det-tags .tag:hover{color:var(--text);border-bottom-color:var(--muted)}

/* ── DESCRIPTION ── */
.det-desc{
  padding:0 2rem;
  border-bottom:1px solid var(--border);
  min-height:3.5rem;
  display:flex;flex-direction:column;justify-content:center;
  transition:padding .2s;
}
.det-desc.has-content{padding:1.25rem 2rem}
.dtoggle{
  font-size:10px;letter-spacing:.1em;color:var(--dim);cursor:pointer;
  display:flex;align-items:center;gap:.6rem;transition:color .2s;
}
.dtoggle:hover{color:var(--text)}
.darrow{transition:transform .25s;display:inline-block}
.darrow.c{transform:rotate(-90deg)}
.dcontent{font-size:12px;color:var(--muted);line-height:1.95;max-width:580px;margin-top:.75rem}
.dcontent.h{display:none}

/* ── LANGUAGE TABS ── */
.lang-tabs-wrap{
  padding:0 2rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:1rem;
}
.lang-tabs{display:flex;flex:1}
.ltab{
  flex:1;text-align:center;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem .5rem;color:var(--dim);cursor:pointer;
  background:none;border:none;white-space:nowrap;
  border-bottom:1px solid transparent;margin-bottom:-1px;transition:all .2s;
}
.ltab.on{color:var(--text);border-bottom-color:var(--text)}
.ltab:hover:not(.on){color:var(--muted)}

/* ── SOLUTION SUB-TABS ── */
.sol-sub{
  padding:0 2rem;border-bottom:1px solid var(--border);display:flex;
}
.ssb{
  flex:1;text-align:center;
  font-size:10px;letter-spacing:.08em;padding:.65rem .5rem;
  color:var(--dim);cursor:pointer;background:none;border:none;
  border-bottom:1px solid transparent;margin-bottom:-1px;
  transition:all .2s;white-space:nowrap;
}
.ssb.on{color:var(--text);border-bottom-color:var(--text)}
.ssb:hover:not(.on){color:var(--muted)}

/* ── SOLUTION VIEW ── */
.sol-view{padding:2rem}
.sol-meta{margin-bottom:1.5rem}
.sol-cx{
  display:flex;align-items:center;
  border-bottom:1px solid var(--border);
}
.sol-cx-item{
  flex:1;text-align:center;padding:.65rem .5rem;position:relative;
  border-bottom:1px solid transparent;margin-bottom:-1px;
}
.sol-cx-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transition:opacity .2s;
}
.sol-cx-val{color:var(--text);font-size:11px;transition:opacity .2s}
.sol-cx-item:hover .sol-cx-val{opacity:0}
.sol-cx-item:hover .sol-cx-label{opacity:1}
.snotes{
  font-size:11.5px;color:var(--muted);line-height:1.9;
  margin-bottom:1.25rem;padding:.75rem 0;
}

/* ── CODE BLOCK ── */
.cw{border:1px solid var(--code-border);background:var(--code-bg)}
.ch{
  display:flex;align-items:center;justify-content:space-between;
  padding:.45rem .875rem;border-bottom:1px solid var(--code-border);background:var(--code-bg);
}
.clang{font-size:9px;letter-spacing:.12em;color:rgba(238,237,232,.3);text-transform:uppercase}
.cpbtn{font-size:9px;letter-spacing:.1em;color:rgba(238,237,232,.3);cursor:pointer;transition:color .2s}
.cpbtn:hover{color:rgba(238,237,232,.75)}
.cw pre{margin:0;overflow-x:auto;background:var(--code-bg);overscroll-behavior:contain}
.cw pre code{
  font-family:var(--mono)!important;font-size:12px!important;
  line-height:1.75!important;padding:1.1rem!important;display:block;
}
.hljs{background:transparent!important}

/* ── WRITINGS LIST ── */
.wlist{padding:0 2rem}
.wrow{
  padding:1.75rem 0;
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:opacity .2s;
}
.wrow:last-child{border-bottom:none}
.wrow:hover{opacity:.5}
.wrow-top{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;margin-bottom:.45rem}
.wtitle{font-family:var(--serif);font-size:1.45rem;font-weight:400;letter-spacing:-.01em;line-height:1.2}
.wmeta{display:flex;align-items:center;gap:1rem;margin-bottom:.65rem}
.wdate{font-size:10px;color:var(--dim);letter-spacing:.06em;white-space:nowrap;flex-shrink:0}
.wread{font-size:9px;color:var(--dim);letter-spacing:.06em;opacity:.7}
.wexcerpt{font-size:12px;color:var(--muted);line-height:1.85;max-width:520px;margin-bottom:.65rem}
.wtags-row{display:flex;gap:.35rem;flex-wrap:wrap}
.wtag{font-size:9px;letter-spacing:.08em;color:var(--dim);padding:.1rem .4rem;border:1px solid var(--border)}
.wrow:hover .wtag{border-color:var(--dim)}

/* ── WRITING DETAIL ── */
.wr-head{padding:2rem 2rem 2.5rem;border-bottom:1px solid var(--border);max-width:680px;margin:0 auto;width:100%}
.wr-date{font-size:10px;color:var(--dim);letter-spacing:.1em;margin-bottom:.6rem}
.wr-title{
  font-family:var(--serif);font-size:clamp(1.9rem,4vw,3rem);
  font-weight:400;line-height:1.1;letter-spacing:-.01em;margin-bottom:1rem;
}
.wr-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.wr-body{
  padding:3rem 2rem 3rem;
  max-width:680px;margin:0 auto;
  font-size:15px;font-family:var(--serif);line-height:2.1;color:var(--muted);
}
.wr-body p{margin-bottom:1.5rem}
.wr-body h2{
  font-family:var(--serif);font-size:1.6rem;font-weight:400;
  color:var(--text);margin:2.5rem 0 .85rem;letter-spacing:-.01em;
}
.wr-body h3{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--dim);margin:2rem 0 .6rem;text-transform:uppercase;
}
.wr-body strong{color:var(--text);font-weight:400}
.wr-body em{font-style:italic}
.wr-body code{
  font-family:var(--mono);font-size:12px;color:var(--text);
  background:var(--surface);padding:.1rem .4rem;border:1px solid var(--border);
}
.wr-body pre{background:var(--code-bg);border:1px solid var(--code-border);margin:1.75rem 0;overflow-x:auto}
.wr-body pre code{background:none;border:none;padding:1.1rem;font-size:12px;line-height:1.75;display:block}
.wr-body a{color:var(--muted);border-bottom:1px solid var(--border)}
.wr-body a:hover{color:var(--text)}
.wr-body ul,.wr-body ol{padding-left:1.5rem;margin-bottom:1.5rem}
.wr-body li{margin-bottom:.4rem}
.wr-body blockquote{border-left:2px solid var(--border);padding-left:1.5rem;color:var(--dim);margin:1.75rem 0;font-style:italic}

/* ── CONTACT ── */
.contact-content{padding:2.5rem 2rem;max-width:560px;margin:0 auto;width:100%}
.contact-intro{font-size:13px;color:var(--muted);line-height:1.95;margin-bottom:3rem}
.contact-channels{display:flex;flex-direction:column;margin-bottom:3.5rem}
.contact-channel{
  display:flex;align-items:baseline;gap:2rem;
  padding:.9rem 0;border-bottom:1px solid var(--border);
  cursor:pointer;transition:opacity .2s;
}
.contact-channel:last-child{border-bottom:none}
.contact-channel:hover{opacity:.5}
.cc-label{font-size:10px;letter-spacing:.1em;color:var(--dim);width:80px;flex-shrink:0}
.cc-value{font-size:12px;color:var(--text);letter-spacing:.02em}
.cc-arrow{margin-left:auto;color:var(--dim);font-size:10px;transition:transform .2s}
.contact-channel:hover .cc-arrow{transform:translateX(3px)}
.contact-form-title{
  font-family:var(--serif);font-size:1.5rem;font-weight:400;
  letter-spacing:-.01em;margin-bottom:1.75rem;
}
.cf-field{margin-bottom:1.5rem}
.cf-label{display:block;font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-bottom:.5rem}
.cf-input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);
  color:var(--text);padding:.45rem 0;outline:none;
  font-family:var(--mono);font-size:12px;font-weight:300;transition:border-color .2s;
}
.cf-input:focus{border-bottom-color:var(--muted)}
.cf-ta{resize:none;min-height:120px;line-height:1.7}
.cf-btn{font-size:10px;letter-spacing:.12em;color:var(--dim);cursor:pointer;transition:color .2s;padding:0}
.cf-btn:hover{color:var(--text)}
.cf-note{display:none;margin-top:1.5rem;padding:1rem;border:1px solid var(--border);font-size:11px;color:var(--muted);line-height:1.8}
.cf-note.vis{display:block}
.cf-note a{border-bottom:1px solid var(--border)}

/* ── MAP PAGE ── */
.map-page-inner{padding:0 2rem 4rem}
.map-legend{
  display:flex;align-items:center;gap:2rem;
  padding:.75rem 0 1.5rem;font-size:9px;letter-spacing:.1em;color:var(--dim);
  border-bottom:1px solid var(--border);
}
.map-legend-item{display:flex;align-items:center;gap:.5rem}
.map-category{margin-top:.5rem}
.map-cat-header{
  display:flex;align-items:center;gap:1.25rem;
  padding:1.75rem 0 1rem;
}
.map-cat-line{flex:1;height:1px;background:var(--border)}
.map-cat-title{
  font-size:9px;letter-spacing:.2em;color:var(--dim);
  text-transform:uppercase;white-space:nowrap;
}
.map-nodes{display:flex;flex-direction:column}
.map-node{
  display:grid;grid-template-columns:1rem 2.5rem 1fr auto;
  align-items:center;gap:1.25rem;
  padding:.7rem 0;border-bottom:1px solid var(--border);
  transition:opacity .2s;
}
.map-node:last-child{border-bottom:none}
.map-node.linked{cursor:pointer}
.map-node.linked:hover{opacity:.45}
.map-node-dot{
  font-size:10px;color:var(--dim);text-align:center;
  line-height:1;transition:color .2s;
}
.map-node.advanced .map-node-dot{color:var(--text)}
.map-node-num{
  font-size:10px;color:var(--dim);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.map-node-title{font-size:12px;letter-spacing:.02em}
.map-node.advanced .map-node-title{color:var(--text)}
.map-node-arrow{
  font-size:10px;color:var(--dim);opacity:0;
  transition:opacity .2s,transform .2s;
}
.map-node.linked:hover .map-node-arrow{opacity:.6;transform:translateX(3px)}
.map-connector{
  text-align:center;font-size:10px;color:var(--dim);
  padding:.5rem 0;opacity:.4;letter-spacing:.04em;
}

/* ── FOOTER ── */
.site-footer{
  border-top:1px solid var(--border);
  padding:1.75rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;letter-spacing:.1em;color:var(--dim);
}
.footer-copy{transition:color .2s}
.footer-links{display:flex;align-items:center;gap:1.75rem}
.footer-link{cursor:pointer;transition:color .2s}
.footer-link:hover{color:var(--text)}
.theme-btn{font-size:14px;color:var(--dim);transition:color .2s;padding:0;line-height:1}
.theme-btn:hover{color:var(--text)}

/* ── EMPTY ── */
.empty{padding:4rem 2rem;color:var(--dim);font-size:11px;letter-spacing:.04em;text-align:center}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  main{padding-top:5rem}
  .pg-head,.det-head,.wr-head{padding-left:1.5rem;padding-right:1.5rem}
  .plist,.wlist,.search-row,.lang-tabs-wrap,.sol-sub,.sol-view,.det-desc,
  .wr-body,.contact-content,.site-footer,.home,.map-page-inner{padding-left:1.5rem;padding-right:1.5rem}
  .sol-view{padding:1.5rem}
}