:root {
  --bg:      #faf9f6;        /* warm cream */
  --bg2:     #ffffff;        /* card white */
  --text:    #0c0c0c;
  --muted:   #888;
  --dim:     #d5d0c8;
  --accent:  #a3e635;        /* lime — primary */
  --accent2: #84cc16;
  --ar:      163, 230, 53;
  --cyan:    #0891b2;        /* teal — secondary (readable on light) */
  --cr:      8, 145, 178;
  --border:  #0c0c0c;        /* dark border (neobrutalism) */
  --shadow:  #0c0c0c;        /* dark shadow */
  --mono:    'JetBrains Mono', monospace;
  --sans:    'Inter', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
ul{list-style:none;}
a{color:inherit;text-decoration:none;}
button{cursor:none;}

/* ── SCROLL PROGRESS ── */
#progress{
  position:fixed;top:0;left:0;
  height:3px;width:0%;
  background:var(--accent);
  z-index:9999;
  box-shadow:0 0 8px var(--accent);
  transition:width .08s linear;
}

/* ── CUSTOM CURSOR ── */
#cursor-dot{
  position:fixed;pointer-events:none;z-index:9998;
  width:8px;height:8px;
  background:var(--accent);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:transform .1s, width .2s, height .2s, background .2s;
}
#cursor-ring{
  position:fixed;pointer-events:none;z-index:9997;
  width:36px;height:36px;
  border:1.5px solid rgba(var(--ar),.6);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:transform .12s ease, width .25s, height .25s, border-color .25s;
}
body.cursor-hover #cursor-dot{
  width:12px;height:12px;
  background:var(--bg);
  box-shadow:0 0 0 2px var(--accent);
}
body.cursor-hover #cursor-ring{
  width:52px;height:52px;
  border-color:var(--accent);
}

/* ── COMMAND PALETTE ── */
#cmd-overlay{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:15vh;
  transition:opacity .2s;
}
#cmd-overlay.hidden{display:none;}
#cmd-box{
  width:100%;max-width:560px;
  background:var(--bg2);
  border:2px solid var(--border);
  box-shadow:6px 6px 0 var(--shadow);
  border-radius:0;
  overflow:hidden;
}
#cmd-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--dim);
}
#cmd-icon{
  font-size:18px;color:var(--accent);
  font-family:var(--mono);
  flex-shrink:0;
}
#cmd-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--sans);font-size:15px;
}
#cmd-input::placeholder{color:var(--muted);}
#cmd-esc{
  font-family:var(--mono);font-size:10px;
  color:var(--muted);border:1px solid var(--dim);
  padding:2px 6px;border-radius:3px;flex-shrink:0;
}
#cmd-list{max-height:320px;overflow-y:auto;}
#cmd-list li{
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;
  font-size:14px;color:var(--text);
  cursor:none;transition:background .1s;
}
#cmd-list li:hover,#cmd-list li.active{background:rgba(var(--ar),.1);}
#cmd-list li .cmd-icon{color:var(--accent);font-family:var(--mono);font-size:12px;width:20px;}
#cmd-list li .cmd-label{flex:1;}
#cmd-list li .cmd-hint{font-size:11px;color:var(--muted);font-family:var(--mono);}
#cmd-footer{
  padding:10px 20px;
  border-top:1px solid var(--dim);
  display:flex;gap:20px;
}
#cmd-footer span{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;}
kbd{
  background:var(--dim);border:1px solid #bbb;
  border-radius:3px;padding:1px 5px;
  font-family:var(--mono);font-size:10px;color:var(--text);
}

/* ── NAV ── */
.nav{
  position:fixed;
  top:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:100%;
  z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;
  border:1.5px solid transparent;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:
    top .45s cubic-bezier(.16,1,.3,1),
    max-width .45s cubic-bezier(.16,1,.3,1),
    padding .45s cubic-bezier(.16,1,.3,1),
    border-radius .45s cubic-bezier(.16,1,.3,1),
    background .3s,
    box-shadow .3s,
    border-color .3s;
}
.nav.floating{
  top:14px;
  max-width:620px;
  padding:10px 14px 10px 24px;
  border-radius:100px;
  background:rgba(250,249,246,.92);
  backdrop-filter:blur(20px);
  border-color:rgba(0,0,0,.1);
  box-shadow:0 4px 32px rgba(0,0,0,.07), 3px 3px 0 var(--shadow);
}
.nav.floating .nav-center{ gap:18px; }
.nav.floating .nav-logo{ font-size:16px; }
.nav-logo{
  font-family:var(--mono);font-weight:800;font-size:18px;letter-spacing:.05em;
  transition:font-size .3s;
}
.nav-logo span{color:var(--accent);}
.nav-center{display:flex;gap:28px;transition:gap .3s;}
.nav-center a{font-size:13px;color:var(--muted);transition:color .2s;letter-spacing:.05em;}
.nav-center a:hover{color:var(--text);}
.cmd-trigger{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:1px solid var(--dim);
  color:var(--muted);font-family:var(--sans);font-size:12px;
  padding:6px 12px;
  transition:border-color .2s, color .2s;
}
.cmd-trigger:hover{border-color:var(--border);color:var(--text);}
.cmd-trigger kbd{
  background:var(--dim);font-size:10px;
  padding:1px 5px;border:1px solid #bbb;
}

/* ── HERO ── */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:120px 40px 80px;
  max-width:1100px;margin:0 auto;
  overflow:hidden;
}
.hero-inner{position:relative;z-index:1;}

.hero-label{
  font-family:var(--mono);font-size:12px;
  color:var(--cyan);letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:28px;opacity:.9;
}

.hero-name{
  font-size:clamp(60px,9vw,110px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:.95;
  margin-bottom:32px;
  overflow:hidden;
}
.name-word{display:block;}

/* Kinetic: each char wraps */
.char{
  display:inline-block;
  opacity:0;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.char.visible{opacity:1;transform:translateY(0);}
.char-space{display:inline-block;width:.25em;}

.hero-desc{
  font-size:16px;color:#666;
  line-height:1.8;margin-bottom:44px;max-width:500px;
}

.hero-stats{
  display:flex;align-items:center;gap:0;margin-bottom:48px;
}
.stat{
  display:flex;flex-direction:column;
  align-items:flex-start;padding:0 32px;
}
.stat:first-child{padding-left:0;}
.stat-n{
  font-family:var(--mono);font-size:36px;font-weight:800;
  color:var(--accent);line-height:1;
  text-shadow: 2px 2px 0 rgba(var(--ar),.25);
}
.stat-l{
  font-size:11px;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;margin-top:4px;
}
.stat-sep{width:1px;height:50px;background:var(--dim);}

.hero-scroll-hint{
  font-family:var(--mono);font-size:11px;
  color:var(--muted);letter-spacing:.1em;
  animation:scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}

/* Hero big BG text */
.hero-bg-text{
  position:absolute;
  right:-60px;top:50%;transform:translateY(-50%);
  font-size:clamp(120px,18vw,220px);
  font-weight:900;
  color:rgba(0,0,0,.025);
  letter-spacing:-.06em;
  pointer-events:none;user-select:none;
  white-space:nowrap;
  z-index:0;
}

/* ── SECTION ── */
.section{padding:100px 0;}
.section-rel{position:relative;overflow:hidden;}
.section-bg-num{
  position:absolute;
  right:-30px;top:50%;
  transform:translateY(-50%);
  font-size:clamp(180px,24vw,300px);
  font-weight:900;
  color:rgba(0,0,0,.04);
  letter-spacing:-.06em;
  pointer-events:none;user-select:none;
  line-height:1;z-index:0;
  font-family:var(--sans);
}
.container{max-width:1100px;margin:0 auto;padding:0 40px;}

.section-label{
  display:flex;align-items:center;gap:16px;
  margin-bottom:56px;
}
.label-num{
  font-family:var(--mono);font-size:12px;
  color:var(--cyan);letter-spacing:.1em;
}
.label-text{
  font-size:clamp(28px,4vw,40px);font-weight:800;
  letter-spacing:-.02em;
}
.section-label::after{
  content:'';flex:1;height:2px;
  background:linear-gradient(90deg,var(--dim),transparent);
  max-width:400px;
}

/* ── NEOBRUTALISM CARDS ── */
.career-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

/* ── FEATURED CARD ── */
.brut-card.featured{
  grid-column: 1 / -1;
  border-color: var(--border);
  box-shadow: 8px 8px 0 var(--accent);
  position: relative;
}
.brut-card.featured::before{
  content: '★ 대표 프로젝트';
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: #0c0c0c;
  background: var(--accent);
  padding: 3px 10px;
  z-index: 2;
}
.brut-card.featured:hover{
  box-shadow: 12px 12px 0 var(--accent);
}

@media (min-width: 769px) {
  .brut-card.featured .brut-body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    align-items: start;
  }
  .brut-card.featured .brut-head  { grid-column: 1; }
  .brut-card.featured .brut-tags  { grid-column: 1; }
  .brut-card.featured .brut-stats { grid-column: 1; }
  .brut-card.featured .brut-list  { grid-column: 1; }
  .brut-card.featured .arch-wrap{
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    align-self: center;
  }
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .brut-card.featured .arch-diagram{ max-height: 500px !important; }
  .brut-card.featured .arch-hint  { display: none; }
}

.brut-card{
  background:var(--bg2);
  border:2px solid var(--border);
  box-shadow:5px 5px 0 var(--shadow);
  border-radius:0;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  opacity:0;
}
.brut-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--accent);
}
.brut-card.reveal-left{transform:translateX(-60px);}
.brut-card.reveal-right{transform:translateX(60px);}
.brut-card.visible{
  opacity:1;
  transform:translate(0,0)!important;
  transition:transform .65s cubic-bezier(.16,1,.3,1),
             opacity .5s ease,
             box-shadow .2s ease;
}
.brut-card.visible:hover{transform:translate(-3px,-3px)!important;}

.brut-year{
  font-family:var(--mono);
  font-size:80px;font-weight:900;
  color:rgba(0,0,0,.06);
  line-height:1;padding:16px 24px 0;
  letter-spacing:-.04em;user-select:none;
  transition:color .3s;
}
.brut-card:hover .brut-year{color:rgba(var(--ar),.18);}

.brut-body{padding:8px 24px 28px;}

.brut-head{
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px;
  margin-bottom:16px;flex-wrap:wrap;
}
.brut-title{font-size:16px;font-weight:700;margin-bottom:3px;line-height:1.3;}
.brut-sub{font-size:12px;color:var(--muted);}
.brut-period{
  font-family:var(--mono);font-size:11px;
  color:var(--cyan);text-align:right;
  white-space:nowrap;flex-shrink:0;opacity:.9;
}

.brut-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
.btag{
  background:rgba(var(--ar),.1);
  color:var(--text);
  border:1px solid rgba(var(--ar),.4);
  font-family:var(--mono);font-size:10px;
  padding:2px 8px;letter-spacing:.04em;
  border-radius:0;
  transition:background .2s;
}
.btag:hover{background:rgba(var(--ar),.22);}

.brut-list{display:flex;flex-direction:column;gap:5px;}
.brut-list li{
  font-size:13px;color:#555;
  padding-left:16px;position:relative;line-height:1.5;
}
.brut-list li::before{
  content:'→';position:absolute;left:0;
  color:var(--accent);font-size:11px;top:2px;
}

/* ── SKILLS ── */
.skills-wrap{display:flex;flex-direction:column;gap:20px;}
.skill-group{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.sg-label{
  font-family:var(--mono);font-size:10px;
  color:var(--muted);letter-spacing:.12em;
  text-transform:uppercase;
  width:52px;flex-shrink:0;
}
.stag{
  font-family:var(--mono);font-size:12px;
  padding:5px 12px;
  border:1px solid var(--dim);
  color:#666;
  transition:all .2s;
}
.stag:hover{
  border-color:var(--border);color:var(--text);
  box-shadow:3px 3px 0 var(--accent);
  transform:translate(-1px,-1px);
}
.stag.main{
  color:var(--text);border-color:#888;
  font-size:13px;padding:6px 14px;
  font-weight:600;
}
.stag.hi{
  color:var(--cyan);
  border-color:rgba(var(--cr),.4);
}
.stag.dim{opacity:.4;}

/* ── FOOTER ── */
.footer{border-top:2px solid var(--border);padding:32px 0;}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;
}
.footer-name{font-family:var(--mono);font-size:13px;color:var(--muted);}
.footer-gh{
  font-family:var(--mono);font-size:13px;
  color:var(--text);
  border:1px solid var(--border);
  padding:6px 14px;
  transition:all .2s;
}
.footer-gh:hover{
  background:var(--accent);
  box-shadow:3px 3px 0 var(--shadow);
  transform:translate(-1px,-1px);
}

/* ── ABOUT ── */
.about-quote-big {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: 36px;
  margin-bottom: 56px;
  max-width: 820px;
  position: relative;
  z-index: 1;
}
.about-quote-big::before {
  content: '"';
  position: absolute;
  left: -10px;
  top: -50px;
  font-size: clamp(100px, 16vw, 200px);
  color: rgba(var(--ar),.08);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  font-family: var(--sans);
}

/* 터미널 — light 카드 속 dark screen 패널 (의도적 대비) */
.about-terminal {
  background: #0e0e0e;
  border: 2px solid var(--border);
  box-shadow: 5px 5px 0 var(--shadow);
  padding: 24px 28px;
  max-width: 640px;
  position: relative;
  z-index: 1;
}
.about-terminal::before {
  content: '● ● ●';
  display: block;
  font-size: 10px;
  color: #444;
  letter-spacing: 4px;
  margin-bottom: 16px;
}
.terminal-line {
  display: flex;
  gap: 14px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}
.t-prompt { color: var(--cyan); flex-shrink: 0; }
.t-text   { color: #aaa; }
.t-cursor {
  color: var(--accent);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%,100%{opacity:1;} 50%{opacity:0;}
}

/* ── CONTACT ── */
.contact-statement {
  display: flex;
  flex-direction: column;
  line-height: .88;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.cs-line {
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text);
}
.cs-outline {
  -webkit-text-stroke: 2px var(--border);
  color: transparent;
}
.contact-desc {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 40px;
  font-style: italic;
}
.contact-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.clink {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 32px;
  min-width: 200px;
  border: 2px solid var(--border);
  box-shadow: 5px 5px 0 var(--shadow);
  background: var(--bg2);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.clink:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--accent);
  background: rgba(var(--ar),.06);
}
.clink-label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
}
.clink-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.clink-arr {
  position: absolute;
  top: 18px;
  right: 20px;
  color: var(--accent);
  font-size: 18px;
  opacity: .6;
  transition: opacity .2s;
}
.clink:hover .clink-arr { opacity: 1; }

/* ── ARCHITECTURE DIAGRAM ── */
.arch-wrap {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--dim);
}
.arch-hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .14em;
  margin-bottom: 10px;
  transition: color .2s;
  opacity: .6;
}
.arch-btn { display: none; }
.arch-diagram {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
}
/* SVG는 다크 패널 — 의도적 대비 */
.arch-diagram svg {
  width: 100%; height: auto; display: block;
  border: 1.5px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
}

/* PC: 카드 hover 시 다이어그램 펼치기 */
@media (hover: hover) and (pointer: fine) {
  .brut-card:hover .arch-hint { color: var(--text); opacity: 1; }
  .brut-card:hover .arch-diagram { max-height: 600px; }
}

/* 모바일/터치: 버튼 클릭으로 토글 */
@media (hover: none) and (pointer: coarse) {
  .arch-hint { display: none; }
  .arch-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 1px solid var(--dim);
    color: var(--text);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    padding: 8px 14px;
    margin-bottom: 10px;
    transition: background .2s, border-color .2s;
  }
  .arch-btn:hover { background: rgba(var(--ar),.08); border-color: var(--border); }
  .arch-arrow { display: inline-block; transition: transform .3s; }
  .arch-btn[aria-expanded="true"] .arch-arrow { transform: rotate(180deg); }
  .arch-diagram.open { max-height: 600px; overflow-x: auto; }
  .arch-diagram.open svg { min-width: 600px; }
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .career-grid{grid-template-columns:1fr;}
  .hero{padding:100px 20px 60px;}
  .container{padding:0 20px;}
  .nav{padding:16px 20px;}
  .hero-stats{gap:0;}
  .stat{padding:0 16px;}
  .contact-links{flex-direction:column;}
  .clink{min-width:auto;}
  .cs-line{font-size:clamp(44px,12vw,80px);}
  .about-quote-big{font-size:clamp(22px,5vw,36px);padding-left:20px;}
}

/* ── NAV RIGHT WRAPPER ── */
.nav-right{display:flex;align-items:center;gap:8px;}

/* ── PDF TRIGGER ── */
.pdf-trigger{
  display:flex;align-items:center;gap:6px;
  background:transparent;
  border:1px solid var(--dim);
  color:var(--muted);
  font-family:var(--mono);font-size:11px;
  padding:6px 12px;letter-spacing:.06em;
  transition:border-color .2s,color .2s,background .2s;
}
.pdf-trigger:hover{border-color:var(--border);color:var(--text);background:var(--accent);}

/* ── NAV SCROLL SPY ── */
.nav-center a.active{color:var(--text);position:relative;font-weight:600;}
.nav-center a.active::after{
  content:'';
  position:absolute;bottom:-4px;left:0;right:0;
  height:2px;background:var(--accent);
}

/* ── IMPACT CHIPS ── */
.brut-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.bstat{
  font-family:var(--mono);font-size:10px;font-weight:700;
  background:var(--text);color:var(--bg);
  padding:3px 9px;letter-spacing:.04em;
  white-space:nowrap;
}

/* ── PRINT / PDF ── */
@media print{
  /* 라이트 테마 — 인터랙션 요소만 제거, 컬러는 그대로 출력 */
  #cursor-dot,#cursor-ring,#progress,
  .nav,#cmd-overlay,.hero-scroll-hint,
  .hero-bg-text,.section-bg-num,
  .arch-hint,.arch-btn,.pdf-trigger,.footer{display:none!important;}

  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body{background:#faf9f6!important;cursor:default!important;}

  .hero{min-height:auto;padding:40px 0 32px;}
  .char{opacity:1!important;transform:none!important;}

  .section{padding:32px 0!important;}

  /* 카드: 그림자만 제거, 테두리·컬러 브랜드 유지 */
  .brut-card{
    break-inside:avoid;
    box-shadow:none!important;
    border:1.5px solid #0c0c0c!important;
    opacity:1!important;
    transform:none!important;
    margin-bottom:16px;
  }
  .brut-card.featured{ box-shadow:none!important; }

  /* 아키텍처 다이어그램 자동 펼침 */
  .arch-diagram{max-height:none!important;overflow:visible!important;}
  .arch-diagram svg{box-shadow:none!important;}

  .about-terminal{box-shadow:none!important;}
  .clink{box-shadow:none!important;}
  .stag{opacity:1!important;}

  /* 그리드 → 1열 */
  .career-grid{grid-template-columns:1fr!important;}
  .brut-card.featured .brut-body{display:block!important;}
  #theme-sw{display:none!important;}
}

/* ── THEME SWITCHER (임시) ── */
#theme-sw{
  position:fixed;
  bottom:28px;right:28px;
  z-index:7000;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.tsw-label{
  font-family:var(--mono);font-size:8px;
  letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;
}
.tsw-panel{
  display:flex;align-items:center;gap:6px;
  background:var(--bg2);
  border:1.5px solid var(--border);
  box-shadow:3px 3px 0 var(--shadow);
  padding:8px 12px;
}
.tsw-dot{
  width:22px;height:22px;
  background:var(--c,#ccc);
  border:2px solid transparent;
  border-radius:50%;
  transition:transform .15s, border-color .15s, box-shadow .15s;
  position:relative;
}
.tsw-dot::after{
  content:attr(data-name);
  position:absolute;
  bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);font-size:8px;
  letter-spacing:.08em;
  color:var(--text);
  background:var(--bg2);
  border:1px solid var(--dim);
  padding:2px 6px;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .15s;
}
.tsw-dot:hover::after{ opacity:1; }
.tsw-dot:hover{ transform:scale(1.2); }
.tsw-dot.active{
  border-color:var(--border);
  box-shadow:2px 2px 0 var(--border);
  transform:scale(1.1);
}
@media(max-width:768px){
  #theme-sw{bottom:16px;right:16px;}
}