/* MIRA COMMAND CENTER — clean-room static reference.
   Every coordinate below is measured from tools/ui_optimizer/reference/master.png
   (1536x1024). Tokens from palette.json / MIRA_DESIGN_CONSTITUTION.md. */
:root {
  --bg-primary: #020814;
  --bg-secondary: #03111F;
  --bg-tertiary: #061624;
  --cyan-main: #00D9FF;
  --blue-main: #1FAEFF;
  --cyan-soft: #5DB7FF;
  --white-glow: #EAFBFF;
  --green-status: #36F1B1;
  --amber-warning: #FFBF4D;
  --red-alert: #FF5B72;
  --text-primary: #F4FAFF;
  --text-secondary: #8FAFC5;
  --text-muted: #59758B;

  --title: #86bfe8;          /* panel titles */
  --label: #c3d8e8;          /* body labels */
  --edge: rgba(110, 160, 195, .7);
  --edge-hi: rgba(120, 200, 255, .75);
  --panel: linear-gradient(180deg, rgba(8, 24, 40, .9), rgba(3, 12, 22, .9));

  --f-ui: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-hud: "Rajdhani", "Avenir Next Condensed", "Noto Sans JP", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #01060d; overflow: hidden; }
body { font-family: var(--f-ui); color: var(--label); -webkit-font-smoothing: antialiased; }
ul { list-style: none; }
svg { overflow: visible; }

.stage {
  position: relative; width: 1536px; height: 1024px; overflow: hidden;
  transform-origin: 0 0;
  background:
    radial-gradient(900px 520px at 770px 330px, rgba(6, 34, 66, .3), transparent 70%),
    radial-gradient(420px 300px at 120px 640px, rgba(10, 40, 70, .25), transparent 70%),
    linear-gradient(180deg, #00070f 0%, #000812 60%, #00060e 100%);
}
.stage > * { position: absolute; }
.scene, .frame { left: 0; top: 0; width: 1536px; height: 1024px; pointer-events: none; }

/* ---------------- shared panel chrome ---------------- */
.panel {
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(140, 200, 255, .08), inset 0 0 18px rgba(20, 110, 200, .08), 0 0 8px rgba(20, 120, 255, .12);
}
.panel::before { /* brighter corner accents like the MASTER HUD frames */
  content: ""; position: absolute; inset: -1px; border-radius: 8px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--edge-hi), transparent) top left / 40px 1px no-repeat,
    linear-gradient(180deg, var(--edge-hi), transparent) top left / 1px 30px no-repeat,
    linear-gradient(270deg, var(--edge-hi), transparent) bottom right / 40px 1px no-repeat,
    linear-gradient(0deg, var(--edge-hi), transparent) bottom right / 1px 30px no-repeat;
}
.panel h3 {
  position: absolute; font: 700 17.5px/1 var(--f-hud); letter-spacing: .02em; color: var(--title);
  text-shadow: 0 0 6px rgba(60, 170, 255, .35);
}
.panel h3::after { /* title underline */
  content: ""; position: absolute; left: -2px; right: -2px; top: 26px; height: 2px;
  background: linear-gradient(90deg, rgba(50, 120, 190, .55), rgba(60, 130, 200, .45) 60%, rgba(60, 130, 200, .1));
  box-shadow: 0 0 6px 1px rgba(40, 120, 210, .45); filter: blur(.4px);
}
.chev { position: absolute; right: -4px; top: -7px; color: rgba(110, 150, 185, .3); font: 700 28px/1 var(--f-hud); }
.count {
  position: absolute; right: 0; top: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: #0d2a45; color: #9fd0f5; font: 600 14px/22px var(--f-hud); text-align: center;
}
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3cf0a8; box-shadow: 0 0 6px #2ef0a0; }

/* ---------------- header ---------------- */
.brand { left: 0; top: 0; width: 480px; height: 100px; }
.logo { position: absolute; left: 62.5px; top: 30px; }
.brand-sub { position: absolute; left: 224px; top: 39px; word-spacing: 5px; letter-spacing: .005em; font: 400 19.5px/1 var(--f-ui); letter-spacing: .02em; color: #9ccbee; text-shadow: 0 0 8px rgba(60, 160, 255, .35); }
.brand-tag { position: absolute; left: 105px; top: 70px; font: 500 13px/1 var(--f-ui); color: #97b7ce; }

.pill {
  top: 18px; height: 54px; display: flex; align-items: center; gap: 13px; padding-left: 14px;
  border: 1px solid rgba(80, 135, 180, .6); border-radius: 9px;
  background: linear-gradient(180deg, rgba(10, 30, 50, .85), rgba(4, 14, 26, .85));
  box-shadow: inset 0 0 10px rgba(30, 120, 220, .12);
}
.pill .ic { width: 27px; height: 27px; fill: none; stroke: #b8dcf5; stroke-width: 1.4; flex: none; margin-left: -1px; margin-right: -1px; }
.pill .ic-fill { fill: #7cc4ff; stroke: #7cc4ff; }
.pill .ic-env { fill: #a9dcff; stroke: #0a2036; }
.pill div { padding-top: 3px; }
.pill b { display: block; font: 600 14px/1.1 var(--f-hud); color: #a8cde8; letter-spacing: .02em; }
.pill b .dot { width: 6px; height: 6px; margin-left: 8px; vertical-align: 2px; }
.pill em { display: block; margin-top: 3px; font: 600 14px/1.1 var(--f-hud); font-style: normal; color: #6fe6b4; letter-spacing: .02em; }

.clock { left: 1339px; top: 18px; }
.clock .date { font: 500 13px/1 var(--f-ui); color: #dbe9f5; }
.clock .time { margin-top: 7px; margin-left: 1px; font: 400 35.5px/1 var(--f-ui); color: #cfe6f8; letter-spacing: .02em; text-shadow: 0 0 10px rgba(80, 170, 255, .5); }
.avatar {
  left: 1469px; top: 26px; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(140, 180, 215, .55); background: #051528; display: grid; place-items: center;
}
.avatar svg { width: 30px; height: 30px; fill: #8fb8e0; margin-top: 2px; }

/* ---------------- left nav ---------------- */
.nav a {
  position: absolute; left: 16px; width: 201px; height: 48px; display: flex; align-items: center;
  padding-left: 19px; gap: 17px; font: 500 15.2px/1 var(--f-ui); color: #a6bfd4; text-decoration: none;
}
.nav a svg { width: 27px; height: 27px; fill: none; stroke: #8fb8da; stroke-width: 1.8; margin-left: -1px; }
.nav a.on {
  color: #a8dcff; font-weight: 500; border: 1.5px solid rgba(96, 200, 245, .9); border-radius: 7px 3px 7px 3px;
  background: linear-gradient(90deg, rgba(14, 70, 115, .9), rgba(6, 36, 62, .8) 70%, rgba(8, 44, 74, .85));
  box-shadow: 0 0 12px rgba(40, 150, 255, .5), inset 0 0 14px rgba(60, 170, 255, .25);
}
.nav a.on svg { stroke: #9fe4ff; stroke-width: 2.1; filter: drop-shadow(0 0 3px rgba(80, 190, 255, .8)); }
.badge {
  position: absolute; left: 166px; width: 24px; height: 24px; border-radius: 50%; background: #e4586a;
  color: #4a0612; font: 600 14px/24px var(--f-ui); text-align: center; box-shadow: 0 0 6px rgba(255, 80, 100, .5);
}

.projects { left: 15px; top: 668px; width: 212px; height: 334px; }
.projects h3 { left: 19px; top: 16px; width: 175px; font-size: 16px; }
.projects h3 .count { right: 0; top: -3px; }
.projects ul { position: absolute; left: 6px; top: 50px; width: 192px; }
.projects li {
  height: 36.5px; display: flex; align-items: center; gap: 10px; padding-left: 13px;
  font: 400 14.5px/1 var(--f-ui); color: #b9cfe0;
}
.projects li svg { width: 20px; height: 20px; fill: rgba(143, 189, 227, .18); stroke: #9cc8ea; stroke-width: 1.9; }
.projects li.on {
  color: #e8f5ff; border: 1px solid rgba(86, 189, 235, .75); border-radius: 4px; border-right: 2px solid #6fd4ff;
  background: linear-gradient(90deg, rgba(14, 70, 115, .85), rgba(8, 40, 70, .6) 70%, rgba(20, 90, 150, .8));
  box-shadow: 0 0 8px rgba(40, 150, 255, .35), 3px 0 8px -2px rgba(100, 210, 255, .6);
}
.projects li.on svg { stroke: #0a2a48; fill: #8fd0ff; width: 22px; height: 22px; stroke-width: 1.4; }

/* ---------------- today's overview ---------------- */
.overview { left: 251px; top: 120px; width: 251px; height: 378px; }
.overview h3 { left: 17px; top: 11px; width: 216px; }
.overview ul { position: absolute; left: 7px; top: 36px; width: 235px; }
.overview li {
  height: 48.5px; display: flex; align-items: center; padding-left: 12px; position: relative;
  border-bottom: 1px solid rgba(90, 130, 160, .24);
}
.overview li:last-child { border-bottom: 0; }
.overview li svg { width: 28px; height: 28px; fill: none; stroke-width: 2; margin-right: 13px; margin-left: -1px; }
.overview li span { font: 500 15px/1 var(--f-ui); color: #c9dae8; }
.overview li b { position: absolute; right: 12px; font: 400 28px/1 var(--f-ui); color: #eaf5ff; }
.c-white svg { stroke: #b9dcf5; }
.c-red svg { stroke: #ff6a7a; } .c-red span, .c-red b { color: #ff7384 !important; }
.c-blue svg { stroke: #52b8ff; } .c-blue b { color: #7ccaff !important; }
.c-green svg { stroke: #4ee0b0; } .c-green b { color: #7ccaff !important; }
.c-amber svg { stroke: #f5b95a; } .c-amber b { color: #ffc768 !important; }
.c-blue2 svg { stroke: #69b8ef; } .c-blue2 b { color: #8fd0ff !important; }
.c-teal svg { stroke: #52d6c0; } .c-teal b { color: #ffcf6e !important; }

/* ---------------- core label ---------------- */
.core-label { left: 706.3px; top: 311.7px; width: 125.6px; text-align: center; }
.core-label svg { display: block; }
.core-label div { margin-top: 9px; margin-left: -2px; font: 600 11.6px/1 var(--f-ui); letter-spacing: .035em; color: #a9c9de; white-space: nowrap; text-shadow: 0 0 6px rgba(60, 170, 255, .6); }

/* ---------------- active project ---------------- */
.active-project { left: 1008px; top: 120px; width: 257px; height: 148px; }
.active-project h3 { left: 15px; top: 12px; width: 226px; }
.bld { position: absolute; left: 12px; top: 44px; width: 44px; height: 52px; fill: none; stroke: #4fa8ee; color: #3f9cf0; stroke-width: 1.3; filter: drop-shadow(0 0 4px rgba(60, 160, 255, .5)); }
.ap-name { position: absolute; left: 72px; top: 44px; font: 400 25px/1 var(--f-ui); color: #eef6fd; letter-spacing: .02em; word-spacing: 0; }
.ap-cat { position: absolute; left: 72px; top: 89px; font: 600 12.5px/1 var(--f-hud); color: #9cc0dd; letter-spacing: .075em; }
.ap-cat i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 3px solid #8fc4ea; margin-right: 8px; vertical-align: -1px; }
.ap-item { position: absolute; left: 72px; top: 113px; font: 500 14px/1 var(--f-ui); color: #eaf3fb; }

/* ---------------- recent activity ---------------- */
.recent { left: 979px; top: 286px; width: 286px; height: 210px; }
.recent h3 { left: 17px; top: 13px; width: 250px; }
.recent ul { position: absolute; left: 14px; top: 44px; width: 256px; }
.recent li { height: 29px; display: flex; align-items: center; position: relative; }
.recent .ri { width: 17px; height: 17px; margin-right: 10px; fill: rgba(100, 170, 235, .55); stroke: #9cd0f6; stroke-width: 1.9; }
.recent li span { font-feature-settings: "palt"; font: 400 13.2px/1 var(--f-ui); color: #d4e3ef; }
.recent time { position: absolute; right: 2px; font: 400 12px/1 var(--f-ui); color: #7f9bb2; }

/* ---------------- metric cards ---------------- */
.metric {
  top: 516px; height: 87px; border: 1px solid rgba(110, 165, 200, .75); border-radius: 7px;
  background: linear-gradient(180deg, rgba(10, 30, 50, .9), rgba(4, 16, 30, .9));
  box-shadow: inset 0 0 14px rgba(30, 120, 220, .12), 0 0 8px rgba(20, 120, 255, .15);
}
.metric .mi {
  position: absolute; left: 12px; top: 16px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 22, 38, .95), rgba(3, 10, 20, .95)); border: 1px solid rgba(70, 110, 140, .4);
  display: grid; place-items: center;
}
.metric .mi svg { width: 34px; height: 34px; fill: #7cc4ff; stroke: #06182a; stroke-width: 1.3; }
.metric .mi svg.ol { fill: none; stroke: #6cc2ff; stroke-width: 1.8; color: #6cc2ff; }
.metric .ml { position: absolute; left: 77px; top: 13px; font: 600 14px/1 var(--f-ui); color: #e6f1fa; }
.metric .mv { position: absolute; left: 77px; top: 37px; font: 400 36px/1 var(--f-ui); color: #eef7ff; }
.metric .mv small { font-size: 15px; margin-left: 12px; font-weight: 500; }
.metric .bars { position: absolute; right: 14px; bottom: 11px; height: 32px; display: flex; align-items: flex-end; gap: 3px; }
.metric .bars i { width: 5.5px; background: #3f5f80; }
.metric .bars { gap: 3px; }
.metric .x { position: absolute; right: 12px; top: 8px; font-size: 14px; color: rgba(120, 160, 190, .3); }
.metric.red { border-color: rgba(230, 100, 120, .7); background: linear-gradient(180deg, rgba(40, 12, 22, .75), rgba(14, 8, 18, .9)); box-shadow: inset 0 0 14px rgba(255, 60, 90, .12), 0 0 8px rgba(255, 60, 90, .15); }
.metric.red .mi svg { fill: #ff6b7c; }
.metric.red .ml, .metric.red .mv { color: #ff7a8a; }
.metric.red .bars i { background: #4f4250; }
.metric.red .mv small { color: #e8d0d6; }

/* ---------------- workspace ---------------- */
.workspace { left: 247px; top: 619px; width: 1019px; height: 389px; }
.tabs { position: absolute; left: 0; top: 13px; width: 100%; height: 34px; border-bottom: 1px solid rgba(80, 120, 150, .25); }
.tabs span { position: absolute; top: 0; height: 34px; font: 600 14px/34px var(--f-hud); letter-spacing: .03em; color: #7faed4; text-align: center; min-width: 60px; padding: 0 6px; }
.tabs span.on {
  color: #d6ecff; border: 1px solid rgba(80, 130, 170, .28); border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, rgba(20, 50, 80, .5), rgba(8, 24, 40, .2));
}
.tabs span.on::after { content: ""; position: absolute; left: 9px; right: 7px; bottom: -1px; height: 2px; background: #5fb8ff; box-shadow: 0 0 8px #3fa8ff; }

.u-bubble {
  position: absolute; left: 611px; top: 59px; width: 291px; height: 41px; border-radius: 12px;
  background: linear-gradient(180deg, #0b3252, #072843); border: 1px solid rgba(90, 150, 200, .35);
  display: flex; align-items: center; gap: 16px; padding-left: 12px; font: 400 14px/1 var(--f-ui); color: #dcebf7;
}
.u-bubble svg { width: 20px; height: 20px; fill: #9fc6e6; }
.u-time { position: absolute; left: 913px; top: 66px; font: 400 12px/1 var(--f-ui); color: #6f8aa0; }
.u-avatar { position: absolute; left: 967px; top: 63px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20, 40, 60, .6); display: grid; place-items: center; }
.u-avatar svg { width: 22px; height: 22px; fill: #3c5670; }

.m-avatar {
  position: absolute; left: 25px; top: 109px; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #04204c 0 38%, #0c4fae 62%, #3fb6ff 80%, #e6fcff 87%, #3aa8ff 93%, #0b3f8a 100%);
  box-shadow: 0 0 14px rgba(60, 170, 255, .9), 0 0 30px rgba(40, 130, 255, .35); display: grid; place-items: center;
}
.m-avatar svg { position: absolute; left: 0; top: 0; }
.m-avatar span { position: relative; font: 700 11px/1 var(--f-hud); letter-spacing: .06em; color: #d8f4ff; text-shadow: 0 0 6px #5fc8ff; }
.m-avatar { background: none !important; }
.m-name { position: absolute; left: 36px; top: 180px; font: 500 14px/1 var(--f-ui); color: #d7e8f5; }
.m-bubble {
  position: absolute; left: 101px; top: 111px; width: 685px; height: 198px; border-radius: 8px;
  border: 1px solid rgba(80, 125, 160, .35); background: rgba(8, 26, 43, .75);
}
.m-bubble p { position: absolute; left: 11px; top: 8px; font: 500 14.5px/1 var(--f-ui); color: #eaf3fb; }
.m-bubble table {
  position: absolute; left: 10px; top: 34px; width: 662px; border-collapse: collapse;
  border: 1px solid rgba(80, 125, 160, .35); border-radius: 5px; background: rgba(2, 18, 34, .6);
}
.m-bubble th, .m-bubble td { font-feature-settings: "palt"; height: 26.3px; padding: 0 10px; font: 400 13.4px/1 var(--f-ui); color: #cfe0ee; text-align: left; border-bottom: 1px solid rgba(80, 125, 160, .22); white-space: nowrap; }
.m-bubble th { width: 113px; color: #a9c2d6; border-right: 1px solid rgba(80, 125, 160, .3); font-weight: 400; }
.m-time { position: absolute; left: 797px; top: 280px; font: 400 12px/1 var(--f-ui); color: #6f8aa0; }

.input {
  position: absolute; left: 18px; top: 327px; width: 920px; height: 44px; border-radius: 8px;
  border: 1px solid rgba(60, 100, 130, .45); background: rgba(3, 12, 24, .8);
  font: 400 13.8px/44px var(--f-ui); color: #5d7890; padding-left: 17px;
}
.input svg { position: absolute; top: 9px; width: 26px; height: 26px; fill: none; stroke: #d6e8f6; stroke-width: 1.7; }
.input .mic { left: 830px; } .input .clip { left: 878px; }
.send {
  position: absolute; left: 948px; top: 327px; width: 54px; height: 44px; border-radius: 8px;
  background: linear-gradient(180deg, #4b93ff, #3a78e8); box-shadow: 0 0 12px rgba(60, 130, 255, .55); display: grid; place-items: center;
}
.send svg { width: 26px; height: 26px; fill: #f2f8ff; stroke: #f2f8ff; stroke-width: 1; stroke-linejoin: round; }

/* ---------------- right sidebar ---------------- */
.sys { left: 1281px; top: 118px; width: 243px; height: 306px; }
.sys h3 { left: 16px; top: 12px; width: 212px; }
.sys ul { position: absolute; left: 14px; top: 37px; width: 220px; }
.sys li { height: 45.2px; display: flex; align-items: center; position: relative; }
.sys li svg { width: 26px; height: 26px; margin-right: 13px; fill: none; stroke: #8fc8f2; stroke-width: 1.5; }
.sys li svg.f { fill: none; stroke: none; color: #a9d4f7; width: 28px; height: 28px; filter: drop-shadow(0 0 3px rgba(80, 170, 255, .45)); }
.pill .ic.f { stroke: none; fill: none; color: #bfe0f7; width: 27px; height: 27px; }
.pill .ic.bell { color: #5fb4ff; }
.sys ul { height: 259px; overflow: hidden; }
.sys b { display: block; font: 400 14px/1.2 var(--f-ui); color: #c8dbeb; }
.sys em { display: block; margin-top: 2px; font: 500 13px/1.25 var(--f-ui); font-style: normal; color: #45dc8e; letter-spacing: .01em; }
.sys .dot, .agents .dot { position: absolute; right: 10px; width: 9px; height: 9px; background: #45f0a4; box-shadow: 0 0 4px #2ef0a0, 0 0 10px rgba(46, 240, 160, .55); }

.agents { left: 1281px; top: 440px; width: 243px; height: 328px; }
.agents h3 { left: 16px; top: 12px; width: 212px; }
.agents h3 .count { right: -2px; top: -3px; }
.agents ul { position: absolute; left: 13px; top: 37px; width: 222px; }
.agents li { height: 47px; display: flex; align-items: center; position: relative; }
.agents .ai { width: 34px; height: 34px; border-radius: 50%; margin-right: 10px; display: grid; place-items: center; background: radial-gradient(circle, rgba(14, 38, 60, .9), rgba(8, 22, 38, .9)); }
.agents .ai svg { width: 24px; height: 24px; stroke-width: 1.5; fill-opacity: .1; opacity: .85; }
.agents .ai { box-shadow: inset 0 0 0 1px rgba(90, 150, 200, .18); }
.agents .ai.g svg { stroke: #5fd6b0; fill: #5fd6b0; } .agents .ai.y svg { stroke: #e0b562; fill: #e0b562; } .agents .ai.c svg { stroke: #7cc2f2; fill: #7cc2f2; }
.agents b { display: block; font: 500 14px/1.2 var(--f-ui); color: #a8d8ff; }
.agents em { display: block; letter-spacing: .04em; font: 400 12.5px/1.4 var(--f-ui); font-style: normal; color: #8ea7ba; }

.network { left: 1281px; top: 783px; width: 243px; height: 224px; }
.network h3 { left: 16px; top: 10px; width: 212px; font-size: 14.5px; font-weight: 600; }
.network h3::after { display: none; }
.network .map { position: absolute; left: 3px; top: 24px; width: 238px; height: 90px; }
.network ul { position: absolute; left: 20px; top: 110px; width: 200px; }
.network li { height: 17.8px; display: flex; align-items: center; position: relative; font: 400 12px/1 var(--f-ui); color: #b3c7d7; }
.network li time { position: absolute; right: 0; color: #a9bccb; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.network li.now time { color: #e8f2fa; font-weight: 600; }
.fl { width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; background: #888; }
.fl.jp { background: radial-gradient(circle, #e04 0 30%, #fff 34%); }
.fl.mx { background: linear-gradient(90deg, #1a8a4a 33%, #fff 33% 66%, #d33 66%); }
.fl.us { background: linear-gradient(180deg, #3a4a9a 45%, #d34 45% 60%, #fff 60% 75%, #d34 75%); }
.fl.cn { background: #e03a3a; }
.fl.sg { background: linear-gradient(180deg, #e33 50%, #eee 50%); }
.fl.de { background: linear-gradient(180deg, #222 33%, #d22 33% 66%, #fc3 66%); }

/* SVG HUD frames (injected) replace CSS borders */
.panel.framed, .metric.framed, .pill.framed { border-color: transparent; background: none; box-shadow: 0 0 10px rgba(20, 120, 255, .10); }
.panel.framed::before { display: none; }
.hud { position: absolute; left: -1px; top: -1px; overflow: visible; pointer-events: none; }
.m-bubble .tail { position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; transform: rotate(45deg); background: rgba(8, 26, 43, .95); border-left: 1px solid rgba(80, 125, 160, .45); border-bottom: 1px solid rgba(80, 125, 160, .45); }
.workspace .divider { position: absolute; left: 12px; right: 12px; top: 316px; height: 1px; background: linear-gradient(90deg, transparent, rgba(80, 125, 160, .3) 10%, rgba(80, 125, 160, .3) 90%, transparent); }
.m-bubble td.crumb { word-spacing: 1.5px; }
.pill.framed { background: none; box-shadow: none; }
.pill > div, .pill > svg.ic { position: relative; z-index: 1; }
.nav a svg.thick { stroke-width: 2.3; }
.projects h3::after { right: 20px; }
.projects li.on { height: 38px; margin-bottom: -1.5px; }