/* ============================================================================
   CastinAI · Designer OS — CONSOLIDATED SYSTEM v2
   One font (Inter) · one type scale · unified spacing + heights · 5 states ·
   stacked-card windows · premium mesh/orb backdrop · switchable accent ·
   agent visual language. No serif. No flat separator lines.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,450;14..32,500;14..32,550;14..32,600;14..32,650;14..32,700;14..32,800&display=swap');

:root{
  /* ----- ink / surface (neutral) ----- */
  --ink:#191a1d; --ink-2:#54565d; --ink-3:#86888f; --ink-4:#aeb0b6; --ink-5:#d4d5d8;
  --paper:#eae8e4; --white:#fcfcfb;
  --glass-win:rgba(252,251,250,0.66);      /* outer window frame */
  --glass-bar:rgba(255,255,255,0.5);        /* titlebar card */
  --glass-main:rgba(253,253,252,0.82);      /* content card */
  --glass-pill:rgba(252,251,250,0.62);      /* floating pills / locus */
  --hair:rgba(25,26,29,0.08); --hair-2:rgba(25,26,29,0.055);
  --shadow-win:0 1px 2px rgba(25,26,29,.05), 0 28px 64px rgba(25,26,29,.15);
  --shadow-sm:0 1px 2px rgba(25,26,29,.04), 0 8px 22px rgba(25,26,29,.08);
  --shadow-pop:0 1px 2px rgba(25,26,29,.05), 0 18px 44px rgba(25,26,29,.16);

  /* ----- AI-AGENT COLOR SET — harmonious; RESERVED for agent visuals only ----- */
  --agent-aura:#EC5A6E;   /* coral  — primary agent (Aura) */
  --agent-sky:#4C82EE;    /* blue   — second agent lane */
  --agent-sage:#23A06E;   /* green  — third agent lane */
  --accent:var(--agent-aura); --accent-ink:#ffffff;   /* the ACTIVE agent */
  --accent-soft:color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-glow:color-mix(in srgb, var(--accent) 42%, transparent);
  --signal:#1f9d57;                          /* success only */
  /* base OS chrome stays NEUTRAL — focus ring is ink, never the agent color */
  --focus:rgba(25,26,29,0.24);

  /* ----- type scale (ONE ladder, Inter) ----- */
  --t-2xs:11px; --t-xs:12.5px; --t-sm:13.5px; --t-base:15px; --t-md:17px;
  --t-lg:22px; --t-xl:30px; --t-2xl:42px;
  --w-reg:450; --w-med:550; --w-semi:650; --w-bold:740; --w-black:800;
  --font:'Inter',-apple-system,'SF Pro Display',system-ui,sans-serif;

  /* ----- spacing (4px grid) ----- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-12:48px;

  /* ----- heights (unified) ----- */
  --h-bar:46px;        /* titlebar / toolbar card */
  --h-control:36px;    /* buttons / inputs / segmented */
  --h-row:40px;        /* list / nav rows */
  --h-chip:28px;
  --h-sm:30px;

  /* ----- radii ----- */
  --r-win:24px; --r-card:18px; --r-md:13px; --r-sm:9px; --r-pill:999px;
  --win-gap:6px;       /* the gap between the two stacked cards */

  /* ----- motion ----- */
  --ease:cubic-bezier(0.22,1,0.36,1); --ease-soft:cubic-bezier(0.16,1,0.3,1);
  --t-fast:120ms; --t-base:200ms;
}
/* switch the ACTIVE AGENT (its color flows to every agent visual) */
[data-agent="sky"]{ --accent:var(--agent-sky); }
[data-agent="sage"]{ --accent:var(--agent-sage); }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--paper);overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'ss01','cv05','cv11';letter-spacing:-0.014em;font-size:var(--t-base)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ===== BACKDROP — a real photographic texture/wallpaper (not CSS gradient) ===== */
.backdrop{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#e7e5e1}
.backdrop .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* subtle parallax-ready scale so edges never show */ transform:scale(1.04)}
/* a gentle legibility veil so light frosted glass always reads over the image */
.backdrop .veil{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(245,244,241,.26) 0%, rgba(238,237,233,.40) 100%)}
.backdrop .grain{position:absolute;inset:0;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== MULTI-CARD WINDOW =====
   .win is a glass FRAME (padding --win-gap). Every region inside is its OWN
   fully-rounded card — titlebar, side panel, main panel, tool rail, inspector —
   separated only by the --win-gap. Space is the ONLY delimiter; never a divider
   line. The header owns the app name + panel-collapse + actions. */
.win{position:absolute;border-radius:var(--r-win);padding:var(--win-gap);
  background:var(--glass-win);backdrop-filter:blur(30px) saturate(135%) brightness(1.03);-webkit-backdrop-filter:blur(30px) saturate(135%) brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), var(--shadow-win);display:flex;flex-direction:column;gap:var(--win-gap)}
.win-bar{position:relative;flex:none;height:var(--h-bar);display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-2) 0 var(--s-4);
  border-radius:var(--r-card);background:var(--glass-bar);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
/* in-context search: an icon button swaps the header for a search field + close */
.win-search{position:absolute;inset:0;display:none;align-items:center;gap:10px;padding:0 8px 0 16px;border-radius:var(--r-card);background:var(--glass-bar);z-index:2}
.win.searching .win-search{display:flex}
.win.searching .win-bar>*:not(.win-search){visibility:hidden}
.win-search .mag{display:grid;place-items:center;color:var(--ink-3)}.win-search .mag svg{width:17px;height:17px}
.win-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-family:var(--font);font-size:14px;letter-spacing:-0.01em;color:var(--ink)}
.win-search input::placeholder{color:var(--ink-3)}
.win-search .x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;flex:none}
.win-search .x:hover{background:rgba(25,26,29,.06);color:var(--ink)}.win-search .x svg{width:16px;height:16px}
.win-body{flex:1;min-height:0;display:flex;gap:var(--win-gap)}
.panel{border-radius:var(--r-card);background:var(--glass-main);overflow:hidden;display:flex;flex-direction:column;min-height:0;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(25,26,29,.04)}
/* one consistent base width for EVERY side panel; lists get their own width by type.
   EVERY content region carries min-width:0 + clipped overflow so nothing ever bleeds. */
.panel.side{width:248px;flex:none;transition:width var(--t-base) var(--ease),opacity var(--t-fast),margin var(--t-base) var(--ease)}
.panel.list{width:288px;flex:none}
.panel.main{flex:1;min-width:0}
.panel.rail{width:52px;flex:none}
.win-body,.panel,.pane{min-width:0}
.panel-pad,.side-pad,.scroll{min-width:0;overflow-x:hidden}
.scroll,.panel-pad.scroll{overflow-y:auto}
.nav-item,.note,.task,.folder,.file{min-width:0}
.nav-item>span:not(.ct):not(.ic){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel.insp{width:202px;flex:none;transition:width var(--t-base) var(--ease),opacity var(--t-fast),margin var(--t-base) var(--ease)}
.win.collapsed .panel.side{width:0;opacity:0;margin-right:calc(var(--win-gap) * -1);pointer-events:none}
.win.collapsed .panel.insp{width:0;opacity:0;margin-left:calc(var(--win-gap) * -1);pointer-events:none}

/* header — ONE consistent control height (32) so Aura == Share == search button */
.win-title{font-size:var(--t-sm);font-weight:var(--w-semi);letter-spacing:-0.02em}
.win-sub{font-size:var(--t-xs);color:var(--ink-3);font-weight:var(--w-reg)}
.win-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.win-bar .btn,.win-bar .chip,.win-bar .input{height:32px}
.win-bar .chip{padding:0 12px}.win-bar .input{width:172px}
.head-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.head-ico:hover{background:rgba(25,26,29,.06);color:var(--ink)} .head-ico svg{width:17px;height:17px}
.ptoggle svg{transition:transform var(--t-base) var(--ease)} .win.collapsed .ptoggle svg{transform:scaleX(-1)}
.lights{display:flex;gap:8px;margin-right:4px}
.lights i{width:12px;height:12px;border-radius:50%;background:rgba(25,26,29,.14);cursor:pointer;display:grid;place-items:center;transition:background var(--t-fast)}
.lights i::before{font-size:9px;font-weight:700;line-height:1;color:rgba(25,26,29,.6);opacity:0;transition:opacity var(--t-fast)}
.lights i:nth-child(1)::before{content:"\00d7"}      /* × close */
.lights i:nth-child(2)::before{content:"\2013";margin-top:-1px} /* – minimize */
.lights i:nth-child(3)::before{content:"+"}          /* + maximize */
.win.focused .lights i{background:rgba(25,26,29,.18)}
.win:hover .lights i::before,.win.focused .lights i::before{opacity:1}
.lights i:hover{background:rgba(25,26,29,.3)}

/* panel internals — clean space + alignment, NO lines */
.panel-head{flex:none;height:46px;display:flex;align-items:center;gap:10px;padding:0 var(--s-4)}
.panel-head .h{font-size:var(--t-sm);font-weight:var(--w-semi)}
.panel-head .ra{margin-left:auto;display:flex;align-items:center;gap:4px}
.panel-pad{padding:var(--s-4) var(--s-5);min-height:0}
.side-pad{padding:var(--s-4) var(--s-3);display:flex;flex-direction:column;gap:3px;min-height:0}
.pane{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.scroll{overflow-y:auto}

/* ===== type utilities ===== */
.display{font-size:var(--t-xl);font-weight:var(--w-bold);letter-spacing:-0.035em;line-height:1.06}
.h1{font-size:var(--t-lg);font-weight:var(--w-bold);letter-spacing:-0.03em}
.h2{font-size:var(--t-md);font-weight:var(--w-semi);letter-spacing:-0.02em}
.eyebrow{font-size:var(--t-xs);font-weight:var(--w-semi);letter-spacing:-0.005em;color:var(--ink-3)}
.muted{color:var(--ink-3)}.tnum{font-variant-numeric:tabular-nums}

/* ===== COMPONENTS with 5 STATES ===== */
/* button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h-control);padding:0 var(--s-4);
  border-radius:var(--r-md);font-size:var(--t-sm);font-weight:var(--w-med);color:var(--ink);background:rgba(25,26,29,.05);
  border:0;cursor:pointer;user-select:none;transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}
.btn .ic{width:16px;height:16px}
.btn:hover{background:rgba(25,26,29,.085)}
.btn:active,.btn[data-pressed]{background:rgba(25,26,29,.13);transform:translateY(0.5px) scale(0.985)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--focus)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.primary{background:var(--ink);color:var(--white)}
.btn.primary:hover{background:#000}
.btn.primary:active,.btn.primary[data-pressed]{background:#000;transform:translateY(0.5px) scale(0.985)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.accent:hover{filter:brightness(1.06)}
.btn.accent:active{filter:brightness(.94);transform:translateY(0.5px) scale(0.985)}
.btn.ghost{background:transparent}.btn.ghost:hover{background:rgba(25,26,29,.05)}
.btn-icon{width:var(--h-control);height:var(--h-control);padding:0;border-radius:var(--r-sm)}

/* chip */
.chip{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h-chip);padding:0 11px;border-radius:var(--r-sm);
  font-size:var(--t-xs);font-weight:var(--w-med);color:var(--ink-2);background:rgba(25,26,29,.05);transition:background var(--t-fast)}
.chip:hover{background:rgba(25,26,29,.08)}

/* input */
.input{display:flex;align-items:center;gap:var(--s-2);height:var(--h-control);padding:0 var(--s-3);border-radius:var(--r-md);
  background:rgba(25,26,29,.045);font-size:var(--t-sm);color:var(--ink-3);transition:box-shadow var(--t-fast),background var(--t-fast)}
.input:hover{background:rgba(25,26,29,.06)}
.input:focus-within{background:var(--white);box-shadow:0 0 0 2px var(--focus)}
.input .ic{width:16px;height:16px;color:var(--ink-3)}

/* segmented */
.seg{display:inline-flex;padding:3px;border-radius:var(--r-md);background:rgba(25,26,29,.06);gap:2px}
.seg b{display:inline-flex;align-items:center;height:calc(var(--h-control) - 8px);padding:0 13px;border-radius:9px;font-size:var(--t-xs);font-weight:var(--w-med);color:var(--ink-2);cursor:pointer;transition:.15s}
.seg b:hover{color:var(--ink)}
.seg b.on{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm);font-weight:var(--w-semi)}

/* nav / list row */
.nav-h{font-size:var(--t-xs);font-weight:var(--w-semi);letter-spacing:-0.005em;color:var(--ink-4);padding:var(--s-4) 12px var(--s-2)}
.nav-item{display:flex;align-items:center;gap:11px;height:var(--h-row);padding:0 12px;border-radius:10px;font-size:var(--t-sm);font-weight:var(--w-med);color:var(--ink-2);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.nav-item .ic{width:17px;height:17px;color:var(--ink-3)}
.nav-item .ct{margin-left:auto;font-size:var(--t-2xs);color:var(--ink-4);font-variant-numeric:tabular-nums}
.nav-item:hover{background:rgba(25,26,29,.045)}
.nav-item.on{background:rgba(25,26,29,.07);color:var(--ink);font-weight:var(--w-semi)}
.nav-item.on .ic{color:var(--ink)}
.dot{width:7px;height:7px;border-radius:50%}.dot.sig{background:var(--signal)}.dot.acc{background:var(--accent)}

/* ===== AGENT VISUAL LANGUAGE (Aura) ===== */
/* the orb — premium mesh/blur, breathing; accent-tinted */
.aura-orb{position:relative;border-radius:50%;
  background:radial-gradient(38% 38% at 38% 32%, #ffffff, color-mix(in srgb,var(--accent) 70%, #fff) 52%, var(--accent));
  box-shadow:0 0 24px color-mix(in srgb,var(--accent) 45%, transparent), inset 0 1px 3px rgba(255,255,255,.7)}
.aura-orb::after{content:"";position:absolute;inset:-22%;border-radius:50%;border:1.5px solid var(--accent-line);
  animation:auraBreathe 3.4s var(--ease-soft) infinite}
@keyframes auraBreathe{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.12);opacity:.8}}
.aura-mark{width:24px;height:24px;border-radius:50%;background:radial-gradient(40% 40% at 40% 34%, #fff, color-mix(in srgb,var(--accent) 65%, #fff) 55%, var(--accent));box-shadow:inset 0 1px 2px rgba(255,255,255,.7),0 1px 3px color-mix(in srgb,var(--accent) 35%, transparent)}

/* the flying cursor + glow + state ring */
.aura-cursor{position:absolute;z-index:60;pointer-events:none;transition:left .7s var(--ease),top .7s var(--ease)}
/* Figma-style sleek filled arrow, tinted to the active agent */
.aura-cursor .arrow{filter:drop-shadow(0 3px 7px rgba(0,0,0,.30))}
.aura-cursor .arrow path{fill:var(--accent);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;paint-order:stroke}
.aura-cursor .halo{position:absolute;left:-18px;top:-18px;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb,var(--accent) 40%, transparent), transparent 70%);opacity:0;transition:opacity .3s}
.aura-cursor .ring{position:absolute;left:-16px;top:-16px;width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1.5px var(--accent);opacity:0}
.aura-cursor[data-state="acting"] .ring{opacity:.9;animation:cursorPing 1.4s var(--ease-soft) infinite}
.aura-cursor[data-state="thinking"] .halo{opacity:.9}
.aura-cursor[data-state="generating"] .halo{opacity:1}
@keyframes cursorPing{0%{transform:scale(.5);opacity:.85}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
/* the label that travels with the cursor — text feedback */
.aura-label{position:absolute;left:22px;top:14px;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:var(--r-pill);
  background:rgba(20,21,24,.86);backdrop-filter:blur(10px);color:#f4f4f3;font-size:var(--t-xs);font-weight:var(--w-med);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.aura-label .d{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px var(--accent)}

/* chain-of-thought ticker */
.aura-cot{display:flex;flex-direction:column;gap:7px}
.aura-cot .ln{display:flex;gap:9px;font-size:var(--t-xs);color:var(--ink-3);line-height:1.4}
.aura-cot .ln .b{color:var(--ink-4);font-variant-numeric:tabular-nums}
.aura-cot .ln.now{color:var(--ink)}
.aura-cot .ln.now .b{color:var(--accent)}

/* floating widget (Loom cam / agent stream) — also a stacked-mini card */
.widget{position:absolute;z-index:50;border-radius:var(--r-card);background:var(--glass-win);
  backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-pop);padding:var(--win-gap)}
.widget .grip{height:26px;display:flex;align-items:center;justify-content:center;cursor:grab}
.widget .grip i{width:34px;height:4px;border-radius:2px;background:rgba(25,26,29,.14)}
/* ---- Camera widget: webcam circle + curved REC ring + liquid-glass controls ---- */
.cam-widget{position:fixed;z-index:50;display:flex;flex-direction:column;align-items:center;gap:11px}
.cam{position:relative;width:172px;height:172px;border-radius:50%;cursor:grab}
.cam .disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 4px rgba(252,251,250,.9), var(--shadow-pop)}
.cam video,.cam .feed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam .ring{position:absolute;inset:-8px;transform:rotate(-90deg);pointer-events:none}
.cam .ring .trk{fill:none;stroke:rgba(252,251,250,.5);stroke-width:3}
.cam .ring .prg{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--accent-glow));
  stroke-dasharray:551;stroke-dashoffset:200;animation:recProg 16s linear infinite}
@keyframes recProg{from{stroke-dashoffset:551}to{stroke-dashoffset:0}}
.cam .rec{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;height:24px;padding:0 11px;border-radius:var(--r-pill);background:rgba(20,21,24,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.cam .rec .d{width:6px;height:6px;border-radius:50%;background:#ff453a;box-shadow:0 0 7px #ff453a;animation:recPulse 1.6s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.35}}
.cam-ctrl{display:flex;align-items:center;gap:8px;padding:7px;border-radius:var(--r-pill);
  background:var(--glass-pill);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--shadow-sm)}
.cam-ctrl button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:0;background:rgba(25,26,29,.05);color:var(--ink-2);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.cam-ctrl button:hover{background:rgba(25,26,29,.1);color:var(--ink)}
.cam-ctrl button.rec{background:var(--accent);color:#fff}.cam-ctrl button.rec:hover{filter:brightness(1.06)}
.cam-ctrl button.off{background:rgba(255,69,58,.14);color:#ff453a}
.cam-ctrl button svg{width:16px;height:16px}

/* locus / dock */
.locus{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:600px;height:56px;display:flex;align-items:center;gap:var(--s-3);padding:0 8px 0 var(--s-5);border-radius:18px;z-index:40;
  background:var(--glass-pill);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--shadow-sm)}
.locus .ph{flex:1;font-size:var(--t-base);color:var(--ink-3)}
.dock{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:20px;z-index:40;
  background:var(--glass-pill);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--shadow-sm)}
.dock .app{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--ink);background:var(--white);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 9px rgba(25,26,29,.1);transition:transform var(--t-base) var(--ease)}
.dock .app:hover{transform:translateY(-7px)}
.dock .app:active{transform:translateY(-3px) scale(.96)}
.dock .app svg{width:22px;height:22px}
.dock .app.dark{background:var(--ink);color:var(--white)}
.badge{position:fixed;left:26px;top:22px;z-index:70;font-size:var(--t-2xs);color:var(--ink-3);font-weight:var(--w-semi);letter-spacing:.04em}