:root{
  color-scheme:light;
  --acc:#2A9D8F;--r-sm:6px;--r-md:12px;
  --ok-bg:#DCFCE7;--ok-c:#34D399;--ok-bdr:#A7F3D0;
  --vcf-bg:#48484A;--vcf-hover:#3A3A3C;--vcf-c:#fff;
  --search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")
}
html{scroll-behavior:smooth;overflow-y:scroll}
body{line-height:1.5}

/* Skip Link */
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);padding:12px 24px;background:var(--card);border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--shadow);font:500 .875rem/1 var(--font);color:var(--t1);z-index:100;transition:top .2s}
.skip-link:focus{top:0}

/* Scrollbars */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.18)}
::selection{background:rgba(59,130,246,.12);color:var(--t1)}

/* Container */
.wrap{
  max-width:720px;
  margin:0 auto;
  padding:20px 20px 120px;
  min-height:100vh;
  min-height:100dvh
}
@media(min-width:640px){.wrap{padding:32px 32px 120px}}

/* Pages */
.page{display:none}
.page.active{display:block}

.name-card{
  display:block;
  font-size:clamp(5rem,18vw,9rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--t1);
  margin:0 auto 24px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  -webkit-appearance:none;
  appearance:none
}

/* Section Title */
.stitle{
  font-size:clamp(1.5rem,4vw,2rem);
  font-weight:700;
  letter-spacing:-.03em;
  margin:clamp(24px,5vw,32px) 0 clamp(16px,3vw,20px);
  color:var(--t1);
  text-align:center
}
.stitle:first-child{margin-top:12px}
.stitle:focus,#main:focus{outline:none}

/* Shared card base */
.pcard,.pcontent,.links{background:var(--card);box-shadow:var(--shadow)}
.pcard,.links{border-radius:20px}
.pcard{margin-bottom:14px}

/* Links */
.links{
  max-width:400px;
  margin:0 auto 14px;
  overflow:hidden
}
.links a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  font-size:.9375rem;
  font-weight:500;
  color:var(--t2);
  text-decoration:none;
  transition:background .15s,color .15s;
  border-bottom:1px solid var(--bdr2)
}
.links a:last-child{border-bottom:none}
.links a:hover{background:var(--bg2);color:var(--t1)}
.links svg{width:18px;height:18px;flex-shrink:0;color:var(--t4);transition:opacity .15s}
.copy-row{display:flex;align-items:center;border-bottom:1px solid var(--bdr2);transition:background .15s}
.copy-row:hover{background:var(--bg2)}
.copy-row:hover a{color:var(--t1)}
.copy-row a{flex:1;min-width:0;border-bottom:none}
.copy-row a:hover{background:none}
.links>.copy-row:last-child{border-bottom:none}
.copy-btn{
  padding:8px 16px;
  margin-right:14px;
  border:1.5px solid var(--bdr);
  border-radius:var(--rr);
  background:none;
  font:500 .75rem/1 var(--font);
  color:var(--t3);
  cursor:pointer;
  flex-shrink:0;
  min-width:58px;
  text-align:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease
}
.copy-btn:hover{background:var(--bg2);color:var(--t2);border-color:var(--t4)}
.copy-btn.copied{background:var(--ok-bg);color:var(--ok-c);border-color:var(--ok-bdr);animation:pop .35s ease}
.copy-btn.copied svg{width:14px;height:14px;display:block;margin:0 auto}
.copy-btn.copied polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .35s ease .08s forwards}
.vcf-link{margin-bottom:14px}
.vcf-link a{font-weight:600;color:var(--vcf-c);background:var(--vcf-bg);justify-content:center}
.vcf-link a:hover{background:var(--vcf-hover);color:var(--vcf-c)}

/* Project Card */
.pcard{scroll-margin-top:60px}
.pcard{
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px;
  text-decoration:none;
  color:var(--t1);
  transition:box-shadow .15s,transform .1s
}
.pcard:hover{box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.pcard:active{transform:translateY(-1px) scale(.985)}
@media(hover:hover){.pcard:hover{will-change:transform}}
.pcard .pinf{flex:1;min-width:0}
.pcard .pt{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pd{font-size:.8125rem;color:var(--t3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard.featured .picon{background:#E6F5F2}
.picon{width:42px;height:42px;border-radius:var(--r);background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.picon svg{width:20px;height:20px;color:var(--t3)}
.pcard .arr{color:var(--t4);flex-shrink:0}
.pcard .arr svg{width:18px;height:18px}

/* Link / Post Sections */
.link-sec{margin-bottom:clamp(20px,4vw,28px)}
#ulist>.link-sec{margin:0;padding-top:clamp(20px,4vw,28px)}
#ulist>.link-sec:first-child{padding-top:0}
.link-sec h3{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--t3);
  margin-bottom:12px
}

.pcontent{
  padding:16px 20px;
  border-radius:18px;
  margin-bottom:12px;
  animation:fi .25s ease
}
.pcontent>:last-child{margin-bottom:0}
.pcontent h1{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.pcontent h2{font-size:1.125rem;font-weight:600;margin:20px 0 8px}
.pcontent h3{font-size:1rem;font-weight:600;margin:16px 0 4px}
.pcontent>h3:first-child{margin-top:0}
.pcontent h4{font-size:.9375rem;font-weight:600;margin:14px 0 4px}
.pcontent p{font-size:.875rem;color:var(--t2);line-height:1.7;margin-bottom:12px}
.pcontent a{color:var(--acc);text-decoration:none}
.pcontent a:hover{text-decoration:underline}
.pcontent code{
  font-size:.8125rem;
  background:var(--bg2);
  padding:2px 6px;
  border-radius:var(--r-sm);
  font-family:'SF Mono',Menlo,Monaco,'Courier New',monospace
}
.pcontent pre{
  background:var(--bg2);
  padding:16px;
  border-radius:var(--r-md);
  overflow-x:auto;
  margin-bottom:12px
}
.pcontent pre code{background:none;padding:0}
.pcontent ul,.pcontent ol{padding-left:20px;margin-bottom:12px}
.pcontent li{font-size:.875rem;color:var(--t2);line-height:1.7;margin-bottom:4px}
.pcontent strong{color:var(--t1);font-weight:600}
.pcontent em{font-style:normal;font-size:.75rem;font-weight:500;color:var(--t3);letter-spacing:.01em}
.pcontent del{color:var(--t4);text-decoration:line-through}
.pcontent mark{background:rgba(255,208,0,.25);padding:1px 4px;border-radius:3px}
.pcontent .task-list{list-style:none;padding-left:0}
.pcontent .task-item{display:flex;align-items:baseline;gap:8px}
.pcontent .task-item input{margin:0;flex-shrink:0;accent-color:var(--acc)}
.pcontent blockquote{
  border-left:3px solid var(--bdr);
  padding-left:16px;
  margin:12px 0;
  color:var(--t3)
}
.pcontent img{max-width:100%;height:auto;border-radius:14px;margin:16px 0;display:block;box-shadow:var(--shadow)}
.pcontent hr{border:none;border-top:1px solid var(--bdr2);margin:20px 0}
.pcontent table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:.875rem}
.pcontent th{text-align:left;font-weight:600;color:var(--t1);padding:10px 12px;border-bottom:2px solid var(--bdr)}
.pcontent td{color:var(--t2);padding:10px 12px;border-bottom:1px solid var(--bdr2)}
.pcontent tr:last-child td{border-bottom:none}

/* Search & Command Input (shared) */
.search,.cmd-input{display:block;width:100%;border-radius:var(--rr);background:var(--card) var(--search-icon) 16px center/18px no-repeat;font:400 1rem/1 var(--font);color:var(--t1);outline:none}

/* Search */
.search{padding:14px 20px 14px 44px;border:1.5px solid var(--bdr);transition:border-color .15s,box-shadow .15s}
.search:focus{border-color:var(--t4);box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.search::placeholder{color:var(--t4)}
.search-wrap{display:none;position:relative;margin-bottom:20px}
.search-x,.cmd-x{
  display:none;
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border:none;
  border-radius:50%;
  background:var(--bg2);
  color:var(--t3);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .15s,color .15s
}
.search-x:hover,.cmd-x:hover{background:var(--bdr);color:var(--t2)}
.search-x::before,.search-x::after,.cmd-x::before,.cmd-x::after{
  content:'';
  position:absolute;
  width:10px;
  height:1.5px;
  background:currentColor;
  border-radius:1px
}
.search-x::before,.cmd-x::before{transform:rotate(45deg)}
.search-x::after,.cmd-x::after{transform:rotate(-45deg)}
.cmd-x{z-index:1}

/* Empty State */
.empty{text-align:center;padding:48px 20px;color:var(--t3);font-size:.875rem;background:none;box-shadow:none}

/* Focus (with fallback for older Safari) */
:focus{outline:2px solid var(--acc);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* Print (only active page) */
@media print{
  nav{display:none}
  .page{display:none!important}
  .page.active{display:block!important}
  .search-wrap{display:none!important}
  .wrap{padding-bottom:0;max-width:100%}
  .pcard,.pcontent{break-inside:avoid}
}

/* Theme toggle icons */
.icon-sun,.icon-moon,.icon-sunset{display:none}
html:not([data-theme]) .icon-sun,html[data-theme="light"] .icon-sun{display:inline}
html[data-theme="sepia"] .icon-sunset{display:inline}
html[data-theme="dark"] .icon-moon{display:inline}

/* Sepia Mode */
html[data-theme="sepia"]{
  color-scheme:light;
  --acc:#A67B5B;
  --ok-bg:#E8E0CE;--ok-c:#2D7D46;--ok-bdr:#DDD4C0;
  --vcf-bg:#6B5744;--vcf-hover:#5B4636;--vcf-c:#F5EDDA;
  --search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AB9B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")
}
html[data-theme="sepia"] .pcard.featured .picon{background:#DDD4C0}
html[data-theme="sepia"] ::-webkit-scrollbar-thumb{background:rgba(91,70,54,.15)}
html[data-theme="sepia"] ::-webkit-scrollbar-thumb:hover{background:rgba(91,70,54,.25)}
html[data-theme="sepia"] ::selection{background:rgba(166,123,91,.2)}
html[data-theme="sepia"] .cmd-row-type{background:var(--bg)}

/* Dark Mode */
html[data-theme="dark"]{
  color-scheme:dark;
  --ok-bg:#1A3A2A;--ok-c:#34D399;--ok-bdr:#2D5A3E;
  --vcf-bg:#48484A;--vcf-hover:#58585A;
  --search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")
}
html[data-theme="dark"] .picon{background:#3A3A3C}
html[data-theme="dark"] .pcard.featured .picon{background:#2E3B38}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
html[data-theme="dark"] ::selection{background:rgba(100,181,246,.2)}
html[data-theme="dark"] .cmd-row-type{background:var(--bg)}

/* Overlays (shared) */
.cmd-overlay,.qr-overlay{position:fixed;inset:0;z-index:100;background:var(--overlay-bg);contain:layout style}
@supports(backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .cmd-overlay,.qr-overlay{backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);background:var(--overlay-bg-blur)}
}

/* Command Palette */
.cmd-overlay{opacity:0;pointer-events:none;transition:opacity .15s}
.cmd-overlay.open{opacity:1;pointer-events:auto}
.cmd-palette{
  position:absolute;
  top:min(20vh,160px);
  left:50%;
  transform:translateX(-50%) scale(.97);
  width:calc(100% - 40px);
  max-width:480px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .15s cubic-bezier(.175,.885,.32,1.275),opacity .15s;
  opacity:0;
  contain:layout style
}
.cmd-overlay.open .cmd-palette{transform:translateX(-50%) scale(1);opacity:1}
.cmd-input-wrap{position:relative}
.cmd-input{padding:14px 42px 14px 44px;border:none;box-shadow:var(--modal-shadow)}
.cmd-input::placeholder{color:var(--t4)}
.cmd-results{
  max-height:min(40vh,320px);overflow-y:auto;padding:6px 0;
  background:var(--card);
  border-radius:20px;
  box-shadow:var(--modal-shadow);
  scrollbar-width:none
}
.cmd-results::-webkit-scrollbar{display:none}
.cmd-results:empty{display:none}
.cmd-row{
  display:flex;align-items:center;
  width:100%;padding:9px 20px;
  border:none;background:none;
  font:400 .9375rem/1.3 var(--font);
  color:var(--t1);
  cursor:pointer;text-align:left;
  transition:background .1s
}
.cmd-row:hover,.cmd-row.cmd-active{background:var(--bg2)}
.cmd-row-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-row-type{
  flex-shrink:0;margin-left:12px;
  font-size:.6875rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3);
  padding:3px 8px;
  background:var(--bg);
  border-radius:var(--r-sm)
}
.cmd-empty{padding:24px 20px;text-align:center;color:var(--t3);font-size:.875rem}

/* QR Overlay */
.qr-overlay{display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.qr-overlay.open{opacity:1;visibility:visible}
.qr-card{
  position:relative;
  background:#fff;
  border-radius:20px;
  padding:24px;overflow:hidden;
  width:min(340px,80vmin);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--modal-shadow);
  transform:scale(.92);opacity:0;
  transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s
}
.qr-overlay.open .qr-card{transform:scale(1);opacity:1}
.qr-card img{width:100%;height:auto;display:block;image-rendering:crisp-edges;image-rendering:pixelated}
.qr-close{
  position:absolute;
  top:12px;right:12px;
  width:36px;height:36px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.06);
  color:var(--t2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  transition:background .15s
}
.qr-close:hover{background:rgba(0,0,0,.12)}
.qr-close:focus-visible{outline-offset:-3px}
.qr-close svg{width:18px;height:18px}

/* Keyboard focus ring for j/k navigation */
.kb-focus{outline:2px solid var(--acc);outline-offset:2px;border-radius:20px}

/* Screen Reader Only */
.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}

/* SWR fade on fresh data */
#plist,#llist,#ulist{transition:opacity .15s ease}

/* Skeleton Loading */
.skel{padding:24px;background:var(--card);border-radius:20px;box-shadow:var(--shadow);margin-bottom:14px;height:76px;animation:skel-pulse 1.5s ease-in-out infinite}
@keyframes skel-pulse{0%,100%{opacity:.6}50%{opacity:.3}}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  #plist,#llist,#ulist{transition:none}
}