/* Binod's palette. Accent fills and readable accent ink are separate on light surfaces. */
:root {
  --lime:#C6F432; --graphite:#17171C; --light:#F2F3EE;
  --bg:var(--light); --surface:#E9EBE3; --card:#FAFBF7;
  --text:var(--graphite); --muted:#62665B; --line:#D7DBCF;
  --accent-ink:#4C650C; --purple:var(--accent-ink); --cyan:var(--lime);
  --apple-blue:var(--accent-ink); --glass:rgba(242,243,238,.66);
  --glass-solid:var(--light); --glass-line:rgba(23,23,28,.12);
  --shadow:0 8px 28px #17171c08;
}
[data-theme=dark] {
  --bg:#131418; --surface:#1C1E23; --card:#1C1E23;
  --text:var(--light); --muted:#A9AEA1; --line:#353930;
  --accent-ink:var(--lime); --purple:var(--lime); --cyan:var(--lime);
  --apple-blue:var(--lime); --glass:rgba(28,30,35,.66);
  --glass-solid:#1C1E23; --glass-line:rgba(242,243,238,.13);
}
::selection{background:var(--lime);color:var(--graphite)}
.gradient,.hero h1 .gradient,.section-heading h2 .muted,.about-layout h2 .muted,.education-layout h2 .muted {
  background:none; -webkit-text-fill-color:currentColor; color:var(--text);
}
[data-theme=dark] .gradient,[data-theme=dark] .hero h1 .gradient,[data-theme=dark] .section-heading h2 .muted,[data-theme=dark] .about-layout h2 .muted,[data-theme=dark] .education-layout h2 .muted{color:var(--lime)}
.hero h1 .gradient{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:5px;text-underline-offset:9px}
[data-theme=dark] .hero h1 .gradient{text-decoration:none}
.heading-dot{color:var(--accent-ink)}
.button.primary,[data-theme=dark] .button.primary{background:var(--lime);color:var(--graphite);border:1px solid #17171c14;box-shadow:inset 0 1px 0 #ffffff80,0 5px 15px #17171c12}
.button:hover{box-shadow:0 8px 22px #17171c18}
.brand-mark{color:var(--graphite);background:var(--lime);border-color:#17171c12;box-shadow:inset 0 1px 0 #ffffff80}
.availability i,.label-top i{background:var(--accent-ink);box-shadow:0 0 0 4px #c6f43218}
.topbar,.topbar.scrolled,.dock{--nav-tint:rgba(242,243,238,.35);--nav-bottom:rgba(100,103,99,.24);background:linear-gradient(120deg,#ffffff30,transparent 42%,#ffffff09),var(--nav-tint);box-shadow:0 12px 38px #17171c19,0 2px 5px #17171c0a,inset 0 2px 2px #ffffffc9,inset 0 -1px 1px var(--nav-bottom),inset 1px 0 1px #ffffff80,inset -1px 0 1px #ffffff50}
[data-theme=dark] .topbar,[data-theme=dark] .topbar.scrolled,[data-theme=dark] .dock{--nav-tint:rgba(28,30,35,.44);--nav-bottom:rgba(242,243,238,.14);background:linear-gradient(120deg,#ffffff16,transparent 45%,#ffffff06),var(--nav-tint)}
.topbar:before,.dock:before{background:linear-gradient(165deg,#ffffff54,#ffffff0a 26%,transparent 46%,#ffffff0c 78%,#ffffff20)}
.topbar nav a:after{background:var(--accent-ink);box-shadow:0 0 10px #c6f43230}
.dock a[aria-current],.filter-chip[aria-pressed=true]{background:var(--lime);color:var(--graphite);border-color:#17171c18;box-shadow:inset 0 1px 0 #ffffff90,0 3px 9px #17171c12}
.art:before{background:radial-gradient(ellipse,#c6f43222,transparent 65%)}
.tile-back{background:linear-gradient(145deg,#c6f43288,#c6f43218);box-shadow:15px 25px 45px #17171c12}
.glass-tile.tile-front{background:linear-gradient(135deg,#f2f3eef5 0%,#f2f3eec9 48%,#e1edb4c4);color:var(--graphite);box-shadow:0 28px 55px #17171c20,inset 0 2px 2px #fff,inset -1px -1px 1px #ffffffaa}
[data-theme=dark] .glass-tile.tile-front{background:linear-gradient(135deg,#353a31ed,#1c1e23d9 55%,#343e22d9);color:var(--light);border-color:#f2f3ee44;box-shadow:0 28px 55px #0004,inset 0 2px 2px #ffffff30,inset -1px -1px 1px #ffffff20}
[data-theme=dark] .tile-front:after{border-color:#ffffff20;background:linear-gradient(125deg,#ffffff15,transparent 35% 70%,#c6f43208)}
.tile-word em,.tile-star,.spark{color:var(--accent-ink)}
.tile-bottom{color:var(--muted);border-color:var(--line)}
.glass-sphere{background:radial-gradient(circle at 30% 25%,#fff 0%,#eefbbd 18%,#c6f432 40%,#647d19 66%,#dce9ac 86%,#fff 100%);box-shadow:inset -10px -10px 18px #17171c1a,12px 25px 35px #17171c20}
.art-orbit{border-color:#7c91492b}
.stat-card,.services article,.education-item,.certification-list,.skills-panel,.timeline article{background:var(--card);box-shadow:0 8px 24px #17171c06,inset 0 1px 0 var(--glass-edge)}
.services article:hover{box-shadow:0 16px 35px #17171c12,inset 0 1px 0 var(--glass-edge)}
.contact-section{background:radial-gradient(ellipse at 95% 0%,#c6f43213,transparent 65%),var(--surface)}
.timeline:before{background:#c6f43225}.timeline:after{background:linear-gradient(#7c981e,var(--lime));box-shadow:0 0 15px #c6f43240}
.timeline-glow{background:var(--lime);box-shadow:0 0 16px 5px #c6f43250,0 0 40px 12px #c6f43218}
.timeline article.is-past:before{box-shadow:0 0 0 2px var(--accent-ink),0 0 20px #c6f43230}
.pointer-cursor{filter:drop-shadow(0 0 4px #c6f4322b)}.cursor-ripple{border-color:var(--accent-ink)}
.card-shine{background:radial-gradient(220px circle at var(--shine-x,50%) var(--shine-y,50%),#c6f43212,transparent)}
.project-open:hover .project-title>span{background:var(--lime);color:var(--graphite)}
.uploaded-cover{display:block;width:100%;height:100%;object-fit:cover}
#dialog-description{white-space:pre-line}
.work-gallery{display:grid;gap:16px;margin-top:25px}
.work-gallery:empty{display:none}
.work-gallery img{display:block;width:100%;height:auto;border-radius:16px}
.tool-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0;opacity:.85}
[data-theme=dark] .tool-logo{filter:none}
#skill-tags>span{display:inline-flex;align-items:center;gap:8px}
#toolkit{scroll-margin-top:120px}
#toolkit{padding:36px;gap:18px 40px}
#toolkit>h3{max-width:450px}
#toolkit .tool-shelf{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:26px 36px;margin-top:12px}
.tool-group h4{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tool-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:15px 8px;border:1px solid var(--glass-line);border-radius:18px;background:linear-gradient(145deg,#ffffff07,transparent),var(--bg);font-size:12px;text-align:center;transition:transform .3s,border-color .3s}
.tool-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--muted) 45%,transparent)}
.tool-well{display:grid;place-items:center;width:54px;height:48px}
.tool-wordmark{font-size:20px;font-weight:700;letter-spacing:-1px;color:var(--text)}
.brand-mark.sezan-mark{width:42px;height:48px;border:0;border-radius:0;background:none;box-shadow:none;flex-shrink:0;display:grid;place-items:center}
.sezan-mark img{display:block;width:36px;height:42px;object-fit:contain;filter:none;mix-blend-mode:normal}
[data-theme=dark] .sezan-mark img{filter:brightness(0) invert(1);mix-blend-mode:normal}
.topbar .brand{padding:4px;border-radius:12px}
.project-dialog .dialog-note:empty,.cover-disclaimer:empty{display:none}
.tool-card small{font-size:10px;color:var(--muted);margin-top:-5px}
.entry-disclosure{width:100%}
#education-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
#education-list .education-item,#education-list .certification-list{margin:0;padding:26px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
#education-list .education-item h3{font-size:21px;line-height:1.35;margin:10px 0 8px;letter-spacing:-.5px}
#education-list .education-item h4{color:var(--muted);font-size:13px;line-height:1.6;margin:0}
#education-list .education-item p:empty{display:none}
#education-list .certification-list h3{font-size:17px;margin:0 0 10px}
#education-list .certification-list ul{font-size:13px;line-height:1.9;margin:0;padding-left:17px}
@media(max-width:700px){#education-list{grid-template-columns:1fr}}
.entry-disclosure summary{list-style:none;cursor:pointer;border-radius:8px}
.entry-disclosure summary::-webkit-details-marker{display:none}
@media(pointer:fine) and (prefers-reduced-motion:no-preference){body.custom-cursor .entry-disclosure summary{cursor:none}}
.entry-disclosure summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:8px}
.entry-disclosure summary time{display:block;margin-bottom:12px}
.disclosure-cue{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;font-weight:500;color:var(--muted);margin-top:18px}
.disclosure-symbol{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);color:var(--accent-ink);font-size:20px;transition:transform .25s,background .25s}
.entry-disclosure summary:hover .disclosure-symbol{background:color-mix(in srgb,var(--lime) 10%,var(--card))}
.entry-disclosure summary:hover .disclosure-cue{color:var(--text)}
.disclosure-open{display:none}
.entry-disclosure[open] .disclosure-open{display:inline}
.entry-disclosure[open] .disclosure-closed{display:none}
.entry-disclosure[open] .disclosure-symbol{transform:rotate(45deg)}
.entry-disclosure .disclosure-body{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
@media(prefers-reduced-motion:no-preference){.entry-disclosure[open] .disclosure-body{animation:details-in .25s ease-out}@keyframes details-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}}
.tool-card .tool-logo{width:44px;height:44px;opacity:1}
.tool-card:has(img[src*="zoho"]) .tool-logo,.tool-card:has(img[src*="n8n"]) .tool-logo{width:52px}
.toolkit-more{grid-column:1/-1;justify-self:center;margin-top:5px}
#toolkit .learning-note{grid-column:1/-1;border-top:0;padding-top:0;font-size:12px}
@media(max-width:700px){#toolkit{padding:25px}#toolkit .tool-shelf{grid-template-columns:1fr;gap:25px}.tool-card{font-size:11px;min-height:110px}.toolkit-more{margin-top:24px}#toolkit .learning-note{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.tool-card:hover{transform:none}}
#skill-tags>span{transition:border-color .25s,background .25s}
#skill-tags>span:hover{border-color:color-mix(in srgb,var(--accent-ink) 35%,var(--line));background:color-mix(in srgb,var(--lime) 6%,var(--surface))}
@media(prefers-reduced-motion:no-preference){
  #skill-tags .tool-logo{animation:tool-float 4.8s ease-in-out infinite;animation-delay:var(--logo-delay,0s);animation-play-state:paused}
  .logos-visible #skill-tags .tool-logo{animation-play-state:running}
  @keyframes tool-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
}
.services article:last-child:nth-child(odd){grid-column:1/-1}
.portfolio-cover.automation{background:linear-gradient(135deg,#cbd4bf,#8c9c7b)}
.portfolio-cover.support{background:linear-gradient(135deg,#a8bbc1,#55676f)}
.automation .cover-poster,.support .cover-poster{background:#f2f3eeeb;color:#17171c}
.cover-tool-logo{position:absolute;width:90px;height:90px;object-fit:contain;right:25px;bottom:30px;opacity:.35}
/* Reserve solid lime for primary actions; secondary selection uses a quiet tint. */
.dock a[aria-current],.filter-chip[aria-pressed=true]{background:color-mix(in srgb,var(--lime) 12%,var(--glass-solid));color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent-ink) 24%,transparent);box-shadow:inset 0 1px 0 var(--glass-edge),0 2px 7px #17171c0a}
.brand-mark{background:var(--glass);color:var(--accent-ink);border-color:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge)}
[data-theme=dark] .section-heading h2 .muted,[data-theme=dark] .about-layout h2 .muted,[data-theme=dark] .education-layout h2 .muted,[data-theme=dark] .contact-section .gradient{color:var(--text)}
/* Illustrative covers remain varied by industry, with the old violet cover brought into the brand palette. */
.portfolio-cover.workspace{background:linear-gradient(135deg,#e4eacb,#a9bb74)}
.cover-poster{background:#f2f3eeeb;color:var(--graphite)}.cover-symbol{color:#7b9537}
.portfolio-cover.analytics{background:linear-gradient(135deg,#353b30,#131418)}
.analytics .cover-poster{background:#1c1e23;color:var(--light)}.analytics .cover-symbol{color:var(--lime)}
@supports not (backdrop-filter:blur(1px)){.topbar,.topbar.scrolled,.dock,[data-theme=dark] .topbar,[data-theme=dark] .topbar.scrolled,[data-theme=dark] .dock{background:var(--glass-solid)}}
@media(prefers-reduced-transparency:reduce){.topbar,.topbar.scrolled,.dock,[data-theme=dark] .topbar,[data-theme=dark] .topbar.scrolled,[data-theme=dark] .dock{background:var(--glass-solid)}}