:root{
  --bg:#f6f4ef;
  --bg-2:#ffffff;
  --ink:#141311;
  --ink-2:#4a4640;
  --ink-3:#8a847a;
  --rule:#e7e2d6;
  --accent:#ff5722;
  --accent-2:#2d5bff;
  --accent-3:#0fbf6a;
  --sticker:#ffe25e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size:15px; line-height:1.5;
}
#projects,#work,#writing,#contact{scroll-margin-top:90px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(20,19,17,0.08) 1px, transparent 0);
  background-size:22px 22px;
}
a{color:inherit; text-decoration:none;}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-size:12px; letter-spacing:0.02em;}
.serif{font-family:"Fraunces", Georgia, serif; font-variation-settings:"opsz" 100;}

/* Magnetic cursor */
.cursor-dot{position:fixed; width:8px; height:8px; border-radius:50%; background:var(--ink); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:difference;}

/* Layout */
.page{max-width:1120px; margin:0 auto; padding:32px 32px 100px;}
nav.top{display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--bg-2); border:1px solid var(--rule); border-radius:999px; box-shadow:0 2px 0 var(--rule); margin-bottom:28px; position:sticky; top:16px; z-index:30;}
nav.top .brand{font-weight:600; letter-spacing:-0.01em; display:flex; align-items:center; gap:10px;}
nav.top .brand .av{width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); display:grid; place-items:center; color:#fff; font-weight:600; font-size:12px; font-family:"JetBrains Mono",monospace;}
nav.top .links{display:flex; gap:6px;}
nav.top .links a{padding:8px 14px; border-radius:999px; font-size:13px; color:var(--ink-2); transition:background 0.15s, color 0.15s;}
nav.top .links a:hover{background:var(--bg); color:var(--ink);}
nav.top .cv{background:var(--ink); color:var(--bg-2); padding:8px 14px; border-radius:999px; font-size:13px; display:flex; align-items:center; gap:6px;}
nav.top .cv:hover{background:var(--accent);}

/* Bento */
.grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:16px;}
.tile{background:var(--bg-2); border:1px solid var(--rule); border-radius:20px; padding:22px; position:relative; box-shadow:0 1px 0 var(--rule), 0 3px 0 -1px var(--rule); transition:transform 0.25s cubic-bezier(.2,.8,.3,1), box-shadow 0.25s;}
.tile:hover{transform:translateY(-2px); box-shadow:0 6px 0 -1px var(--rule), 0 14px 30px rgba(0,0,0,0.06);}
.tile .lbl{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.tile .lbl .d{width:6px; height:6px; border-radius:50%; background:var(--accent-3);}

/* Hero tile */
.hero{grid-column:span 6; padding:36px 32px; overflow:hidden;}
.hero h1{font-family:"Fraunces",serif; font-weight:400; font-variation-settings:"opsz" 140; font-size:84px; line-height:0.98; letter-spacing:-0.03em; margin:10px 0 0;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero .sub{font-size:19px; color:var(--ink-2); margin-top:18px; max-width:540px; line-height:1.45;}
.hero .chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.chip{padding:6px 12px; border-radius:999px; border:1px solid var(--rule); font-size:12px; background:var(--bg); display:inline-flex; align-items:center; gap:6px;}
.chip .d{width:6px; height:6px; border-radius:50%;}
.sticker{position:absolute; right:36px; top:36px; width:130px; height:130px; background:var(--sticker); border-radius:50%; display:grid; place-items:center; color:var(--ink); transform:rotate(-8deg); animation:spin 14s linear infinite; box-shadow:0 6px 0 rgba(20,19,17,0.06);}
.sticker svg{position:absolute; inset:0; width:100%; height:100%;}
.sticker .core{font-family:"Fraunces",serif; font-style:italic; font-size:22px;}
@keyframes spin{to{transform:rotate(352deg)}}

/* Now tile */
.now{grid-column:span 3;}
.now .line{display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--rule); font-size:14px;}
.now .line:last-child{border:0;}
.now .line .ic{width:18px; text-align:center; color:var(--ink-3);}
.now .line b{font-weight:600;}
.now .line small{color:var(--ink-3);}

/* Stack tile */
.stack{grid-column:span 3;}
.stack .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.stack .tag{padding:5px 10px; border-radius:8px; background:var(--bg); border:1px solid var(--rule); font-family:"JetBrains Mono",monospace; font-size:12px; transition:all 0.15s; cursor:pointer;}
.stack .tag:hover{background:var(--ink); color:var(--bg-2); border-color:var(--ink); transform:rotate(-2deg);}
.stack .tag.solid{background:var(--ink); color:var(--bg-2); border-color:var(--ink);}
.stack .tag.accent{background:var(--accent); color:#fff; border-color:var(--accent);}

/* Projects tile */
.projects{grid-column:span 6; padding:0;}
.projects .head{display:flex; justify-content:space-between; align-items:center; padding:22px 26px 8px;}
.projects .head h2{font-family:"Fraunces",serif; font-size:26px; font-weight:400; margin:0; letter-spacing:-0.01em;}
.projects .head h2 em{font-style:italic; color:var(--accent);}
.projects .filter{display:flex; gap:4px; font-size:12px;}
.projects .filter button{border:1px solid var(--rule); background:var(--bg); padding:6px 10px; border-radius:999px; font-family:inherit; cursor:pointer; transition:all 0.15s;}
.projects .filter button.on{background:var(--ink); color:var(--bg-2); border-color:var(--ink);}

.projects-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:0;}
.pj{padding:22px 26px; border-top:1px solid var(--rule); border-right:1px solid var(--rule); cursor:pointer; transition:background 0.2s; position:relative;}
.pj:nth-child(3n){border-right:0;}
.pj:hover{background:var(--bg);}
.pj .tag-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.pj .year{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3);}
.pj .dot{width:8px; height:8px; border-radius:50%;}
.pj h3{font-family:"Fraunces",serif; font-weight:400; font-size:26px; margin:0; letter-spacing:-0.01em;}
.pj p{color:var(--ink-2); font-size:14px; margin:6px 0 0;}
.pj .tags{display:flex; gap:6px; margin-top:12px; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3);}
.pj .arrow{position:absolute; right:22px; bottom:22px; width:32px; height:32px; border-radius:50%; background:var(--bg); border:1px solid var(--rule); display:grid; place-items:center; transition:all 0.25s;}
.pj:hover .arrow{background:var(--accent); color:#fff; border-color:var(--accent); transform:rotate(-45deg);}

/* Education */
.edu{grid-column:span 4;}
.edu .row{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:10px 0; border-bottom:1px dashed var(--rule); font-size:14px;}
.edu .row:last-child{border:0;}
.edu .row .d{width:8px; height:8px; border-radius:50%; background:var(--accent-2);}
.edu .row.ongoing .d{background:var(--accent);}
.edu .row .name b{font-weight:600;}
.edu .row .g{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3);}

/* CV card */
.cv-tile{grid-column:span 2; background:var(--ink); color:var(--bg); padding:22px; border-radius:20px; display:flex; flex-direction:column; justify-content:space-between; min-height:160px; cursor:pointer; transition:transform 0.2s; position:relative; overflow:hidden;}
.cv-tile:hover{transform:rotate(-1deg) translateY(-2px);}
.cv-tile .lbl{color:rgba(255,255,255,0.55);}
.cv-tile h3{font-family:"Fraunces",serif; font-weight:400; font-size:28px; line-height:1.05; margin:10px 0 0; letter-spacing:-0.01em;}
.cv-tile h3 em{font-style:italic; color:var(--accent);}
.cv-tile .pill{align-self:flex-start; background:var(--bg); color:var(--ink); padding:6px 12px; border-radius:999px; font-size:12px; font-weight:500; margin-top:14px;}
.cv-tile::after{content:"↓"; position:absolute; right:18px; top:18px; color:rgba(255,255,255,0.4); font-size:22px;}

/* Experience */
.xp{grid-column:span 6;}
.xp h2{font-family:"Fraunces",serif; font-size:24px; font-weight:400; margin:0 0 14px;}
.xp .row{display:grid; grid-template-columns:140px 1fr auto; gap:18px; padding:14px 0; border-top:1px solid var(--rule); align-items:baseline;}
.xp .row:last-child{padding-bottom:0;}
.xp .d{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-3);}
.xp .role b{font-weight:600; font-size:16px;}
.xp .role small{display:block; color:var(--ink-2); font-size:13px; margin-top:2px;}

/* Writing */
.writing{grid-column:span 4;}
.writing h2{font-family:"Fraunces",serif; font-size:22px; font-weight:400; margin:0 0 10px;}
.writing .post{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--rule); font-size:14px; cursor:pointer; transition:padding-left 0.2s;}
.writing .post:hover{padding-left:8px;}
.writing .post:hover .t{color:var(--accent);}
.writing .t{transition:color 0.15s;}
.writing .dt{color:var(--ink-3); font-family:"JetBrains Mono",monospace; font-size:11px;}
.writing .empty{margin:14px 0 0; color:var(--ink-3); font-style:italic; font-size:14px;}

/* Contact */
.contact{grid-column:span 6; display:flex; flex-direction:row; gap:10px; flex-wrap:wrap;}
.contact a{flex:1 1 200px; display:flex; justify-content:space-between; padding:10px 14px; border-radius:12px; background:var(--bg); border:1px solid var(--rule); font-size:13px; transition:all 0.15s; align-items:center;}
.contact a:hover{background:var(--ink); color:var(--bg-2); border-color:var(--ink); transform:translateX(3px);}
.contact a .k{font-family:"JetBrains Mono",monospace; color:var(--ink-3); font-size:11px;}
.contact a:hover .k{color:rgba(255,255,255,0.5);}

/* Guestbook tile */
.guest{grid-column:span 6; display:flex; align-items:center; justify-content:space-between; padding:26px 32px;}
.guest .q{font-family:"Fraunces",serif; font-size:28px; font-weight:400; max-width:640px; line-height:1.2; letter-spacing:-0.01em;}
.guest .q em{font-style:italic; color:var(--accent);}
.guest .b{background:var(--ink); color:var(--bg-2); padding:14px 22px; border-radius:999px; font:inherit; font-weight:500; border:0; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:8px;}
.guest .b:hover{background:var(--accent); transform:rotate(-2deg);}

/* Post-view dialog */
dialog.post-view{border:1px solid var(--rule); border-radius:20px; background:var(--bg-2); color:var(--ink); padding:0; max-width:680px; width:92%; max-height:85vh; box-shadow:0 20px 60px rgba(0,0,0,0.18); overflow:hidden; position:relative;}
dialog.post-view::backdrop{background:rgba(20,19,17,0.4); backdrop-filter:blur(2px);}
dialog.post-view .close{position:sticky; float:right; top:14px; right:14px; margin:14px 14px 0 0; width:30px; height:30px; border-radius:50%; background:var(--bg); border:1px solid var(--rule); color:var(--ink); cursor:pointer; font-size:16px; display:grid; place-items:center; padding:0; transition:all 0.15s; z-index:1;}
dialog.post-view .close:hover{background:var(--ink); color:var(--bg-2); border-color:var(--ink);}
.post-body{padding:36px 44px 44px; max-height:85vh; overflow-y:auto; line-height:1.65; scrollbar-width:thin; scrollbar-color:var(--rule) transparent;}
.post-body::-webkit-scrollbar{width:8px;}
.post-body::-webkit-scrollbar-track{background:transparent;}
.post-body::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px;}
.post-body::-webkit-scrollbar-thumb:hover{background:var(--ink-3);}
.post-body h1{font-family:"Fraunces",serif; font-weight:400; font-size:40px; letter-spacing:-0.02em; line-height:1.1; margin:0 0 18px;}
.post-body h2{font-family:"Fraunces",serif; font-weight:400; font-size:24px; letter-spacing:-0.01em; margin:32px 0 10px;}
.post-body h3{font-family:"Fraunces",serif; font-weight:600; font-size:18px; margin:24px 0 8px;}
.post-body p{margin:0 0 14px; color:var(--ink-2);}
.post-body a{color:var(--accent); border-bottom:1px solid currentColor;}
.post-body a:hover{color:var(--ink);}
.post-body strong{color:var(--ink); font-weight:600;}
.post-body em{font-style:italic;}
.post-body ul, .post-body ol{margin:0 0 14px; padding-left:22px; color:var(--ink-2);}
.post-body li{margin:4px 0;}
.post-body code{font-family:"JetBrains Mono",monospace; font-size:0.88em; background:var(--bg); border:1px solid var(--rule); border-radius:4px; padding:1px 5px;}
.post-body pre{background:var(--ink); color:var(--bg-2); padding:16px 18px; border-radius:12px; overflow-x:auto; margin:0 0 16px; font-size:13px; line-height:1.5;}
.post-body pre code{background:transparent; border:0; padding:0; color:inherit; font-size:inherit;}
.post-body pre code.hljs{background:transparent; padding:0;}
.post-body blockquote{border-left:3px solid var(--accent); margin:0 0 14px; padding:4px 0 4px 16px; color:var(--ink-2); font-style:italic;}
.post-body img{max-width:100%; border-radius:12px; border:1px solid var(--rule); display:block; margin:14px auto;}
.post-body figure{margin:14px 0;}
.post-body figcaption{color:var(--ink-3); font-size:13px; text-align:center; margin-top:6px;}
.post-body .katex-display{margin:14px 0; overflow-x:auto; overflow-y:hidden;}
.post-body .meta{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:24px;}
.post-body .err{color:var(--accent); font-family:"JetBrains Mono",monospace; font-size:13px;}

/* Say-hi dialog */
dialog.say-hi{border:1px solid var(--rule); border-radius:20px; background:var(--bg-2); color:var(--ink); padding:0; max-width:460px; width:92%; box-shadow:0 20px 60px rgba(0,0,0,0.18);}
dialog.say-hi::backdrop{background:rgba(20,19,17,0.4); backdrop-filter:blur(2px);}
dialog.say-hi form{padding:28px; display:flex; flex-direction:column; gap:14px; position:relative;}
dialog.say-hi .lbl{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:8px;}
dialog.say-hi .lbl .d{width:6px; height:6px; border-radius:50%; background:var(--accent-3);}
dialog.say-hi h3{font-family:"Fraunces",serif; font-weight:400; font-size:28px; letter-spacing:-0.01em; margin:0;}
dialog.say-hi h3 em{font-style:italic; color:var(--accent);}
dialog.say-hi .sub{color:var(--ink-2); margin:0 0 6px; font-size:14px;}
dialog.say-hi label{display:flex; flex-direction:column; gap:6px;}
dialog.say-hi label > span{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3);}
dialog.say-hi input, dialog.say-hi textarea{font:inherit; color:inherit; background:var(--bg); border:1px solid var(--rule); border-radius:12px; padding:10px 14px; outline:none; transition:border-color 0.15s;}
dialog.say-hi textarea{resize:vertical; min-height:88px;}
dialog.say-hi input:focus, dialog.say-hi textarea:focus{border-color:var(--accent);}
dialog.say-hi .send{margin-top:6px; align-self:flex-start; background:var(--ink); color:var(--bg-2); border:0; font:inherit; font-weight:500; padding:12px 22px; border-radius:999px; cursor:pointer; transition:all 0.2s;}
dialog.say-hi .send:hover{background:var(--accent); transform:rotate(-2deg);}
dialog.say-hi .send:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
dialog.say-hi .close{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; background:var(--bg); border:1px solid var(--rule); color:var(--ink); cursor:pointer; font-size:16px; display:grid; place-items:center; padding:0; transition:all 0.15s;}
dialog.say-hi .close:hover{background:var(--ink); color:var(--bg-2); border-color:var(--ink);}
dialog.say-hi .status{margin:0; font-size:13px; min-height:1.2em;}
dialog.say-hi .status.ok{color:var(--accent-3);}
dialog.say-hi .status.err{color:var(--accent);}
dialog.say-hi .status.sending{color:var(--ink-3);}

/* Footer */
footer{margin-top:32px; padding:24px 12px; display:flex; justify-content:space-between; color:var(--ink-3); font-family:"JetBrains Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em;}

@media (max-width: 900px){
  .hero{grid-column:span 6} .now,.stack{grid-column:span 3}
  .projects,.xp,.guest{grid-column:span 6}
  .edu,.writing{grid-column:span 6}
  .cv-tile{grid-column:span 6}
  .projects-list{grid-template-columns:1fr}
  .pj{border-right:0;}
  .hero h1{font-size:56px}
  .sticker{width:90px; height:90px;}
}

/* Touch devices — kill magnetic cursor and hover-only effects */
@media (hover: none), (pointer: coarse){
  .cursor-dot{display:none;}
  .tile:hover{transform:none; box-shadow:0 1px 0 var(--rule), 0 3px 0 -1px var(--rule);}
  .pj:hover{background:transparent;}
  .pj:hover .arrow{background:var(--bg); color:inherit; border-color:var(--rule); transform:none;}
  .writing .post:hover{padding-left:0;}
  .writing .post:hover .t{color:inherit;}
  .contact a:hover{background:var(--bg); color:inherit; border-color:var(--rule); transform:none;}
  .contact a:hover .k{color:var(--ink-3);}
  .stack .tag:hover{background:var(--bg); color:inherit; border-color:var(--rule); transform:none;}
  .guest .b:hover, dialog.say-hi .send:hover{transform:none;}
}

@media (max-width: 640px){
  .page{padding:16px 14px 72px;}
  body{background-size:18px 18px;}

  nav.top{padding:8px 10px 8px 14px; margin-bottom:18px; top:10px; gap:8px;}
  nav.top .links{display:none;}
  nav.top .brand{font-size:14px;}
  nav.top .cv{font-size:12px; padding:7px 12px;}

  .grid{gap:12px;}
  .tile{padding:18px; border-radius:16px;}

  .hero{padding:24px 22px;}
  .hero h1{font-size:38px; line-height:1.05;}
  .hero .sub{font-size:15px; margin-top:14px;}
  .hero .chips{margin-top:16px;}
  .sticker{width:64px; height:64px; right:16px; top:16px;}
  .sticker .core{font-size:14px;}

  .now, .stack{grid-column:span 6;}

  .projects .head{flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px 6px;}
  .projects .head h2{font-size:22px;}
  .projects .filter{flex-wrap:wrap;}
  .pj{padding:18px 20px;}
  .pj h3{font-size:22px;}
  .pj .arrow{right:16px; bottom:16px; width:28px; height:28px;}

  .edu .row{grid-template-columns:auto 1fr; row-gap:2px; column-gap:10px; padding:10px 0;}
  .edu .row .g{grid-column:1 / -1; padding-left:22px;}

  .cv-tile{padding:18px; min-height:140px;}
  .cv-tile h3{font-size:24px;}

  .xp h2{font-size:20px;}
  .xp .row{grid-template-columns:1fr; gap:4px; padding:14px 0 12px;}
  .xp .d{order:-1;}

  .writing h2{font-size:20px;}

  .guest{flex-direction:column; align-items:flex-start; gap:16px; padding:22px;}
  .guest .q{font-size:22px;}

  .contact{gap:8px;}
  .contact a{flex:1 1 100%; padding:12px 14px;}

  dialog.post-view{width:96%; max-height:92vh; border-radius:16px;}
  .post-body{padding:24px 22px 32px; max-height:92vh;}
  .post-body h1{font-size:30px;}
  .post-body h2{font-size:22px; margin:24px 0 8px;}
  .post-body h3{font-size:17px;}
  dialog.post-view .close{margin:10px 10px 0 0;}

  dialog.say-hi{width:96%; border-radius:16px;}
  dialog.say-hi form{padding:22px;}
  dialog.say-hi h3{font-size:24px;}

  footer{flex-direction:column; gap:6px; padding:18px 6px;}
}