/* Shared type + chart chrome for the portfolio and standalone chart pages.
   Fonts are bundled locally (SIL OFL; licences in assets/fonts). */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-wght.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --f-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Songti SC", "STSong", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  /* porcelain ground · blue-black ink · ultramarine identity */
  --paper: #FFFFFF;            /* near white, a trace of warmth */
  --plate: #F6F4EE;
  --ink: #141A33;
  --ink-2: rgba(20,26,51,.66);
  --ink-3: rgba(20,26,51,.46);
  --rule: rgba(20,26,51,.12);
  /* theme quartet, all from the side of the wheel opposite the paper */
  --pink: #E0458A;   --pink-t: #FBE2EC;
  --blue: #2E5BDF;   --blue-t: #E0E7FD;
  --violet: #6E46DC; --violet-t: #EAE3FC;
  --green: #1C9C6B;  --green-t: #D9F1E5;
  --accent: var(--blue); --accent-t: var(--blue-t);   /* each study sets its own */
  --data-blue: #2E44D6;
  --card: #FFFFFF;
  --card-shadow: 0 1px 0 rgba(20,26,51,.04), 0 24px 48px -32px rgba(20,26,51,.28);
  --teal: #0A9384; --magenta: #C9338A; --rose: #D9325F;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

.pc-canvas { position: absolute; left: 0; top: 0; display: block; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* tooltip: compact, glassy, numeric columns in mono */
.pc-tip {
  position: absolute; left: 0; top: 0; z-index: 30; min-width: 170px; max-width: 290px;
  padding: 11px 13px 10px; border-radius: 12px; pointer-events: none;
  color: var(--ink); background: rgba(251,250,246,.86);
  box-shadow: 0 0 0 1px rgba(20,26,51,.09), 0 18px 40px -18px rgba(20,26,51,.35);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  font: 12px/1.45 var(--f-sans); letter-spacing: -.005em;
  opacity: 0; transition: opacity .16s ease; will-change: transform;
}
.pc-tip.is-on { opacity: 1; }
.pc-tip i { display: block; margin-bottom: 4px; font: 500 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--ink-3); }
.pc-tip b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.pc-tip s { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; text-decoration: none; }
.pc-tip span { display: block; margin-top: 1px; color: var(--ink-2); font-size: 11.5px; }
.pc-tip dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); }
.pc-tip dt { display: flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.pc-tip dt s { width: 6px; height: 6px; }
.pc-tip dd { margin: 0; text-align: right; font: 500 11.5px/1.45 var(--f-mono); font-variant-numeric: tabular-nums; }
.pc-tip em { display: block; margin-top: 8px; font-style: normal; font-size: 10.5px; line-height: 1.4; color: var(--ink-3); }
.pc-tip { max-width: min(290px, calc(100% - 20px)); }
.pc-tip i, .pc-tip em { color: var(--ink-2); }
.pc-tip dt, .pc-tip dd { white-space: normal; overflow-wrap: anywhere; }
/* Round 16: informational type only; hit testing and tooltip behavior are unchanged. */
.pc-tip { min-width: 210px; max-width: min(340px, calc(100% - 20px)); font-size: 14px; line-height: 1.55; }
.pc-tip i { font-size: 11px; line-height: 1.45; }
.pc-tip b { font-size: 16px; line-height: 1.4; font-weight: 650; }
.pc-tip span { font-size: 13px; line-height: 1.5; }
.pc-tip dl { gap: 7px 16px; align-items: baseline; }
.pc-tip dt { font-size: 13px; line-height: 1.5; }
.pc-tip dd { font-size: 12px; line-height: 1.5; }
.pc-tip dd.is-metric { font: 650 23px/1.2 var(--f-sans); font-variant-numeric: tabular-nums; }
.pc-tip em { font-size: 12px; line-height: 1.55; }

/* study studios, generated from PC.STUDIO (core.js): white interface ink, accent, the jewel ground and its night ink */
[data-chart="nev"] { --ink: #1C0A14; --ink-2: rgba(28,10,20,0.66); --ink-3: rgba(28,10,20,0.46); --rule: rgba(28,10,20,0.1); --accent: #C8124C; --accent-t: #FBE1EA; --plate: #FFFFFF; --plate-bg: #FFFFFF; --ground: #640C35; --ground-deep: #1E0414; --ground-bg: radial-gradient(88% 88% at 62% 30%, rgba(194,27,76,0.55), rgba(194,27,76,0) 70%), radial-gradient(72% 72% at 10% 5%, rgba(255,122,61,0.22), rgba(255,122,61,0) 70%), radial-gradient(80% 80% at 95% 95%, rgba(75,18,112,0.5), rgba(75,18,112,0) 70%), linear-gradient(150deg, #1E0414, #4A0A2B 52%, #7A1040); --slab-bar: linear-gradient(90deg, #FFD86A 0.00% 20.00%, #FFA45A 20.00% 40.00%, #FF7E86 40.00% 60.00%, #F49BE8 60.00% 80.00%, #A9AEFF 80.00% 100.00%); --night: #FFF0F3; --night-2: rgba(255,240,243,0.72); --night-3: rgba(255,240,243,0.5); --night-rule: rgba(255,240,243,0.16); --slab: #1E0414; --on-slab: #FFF0F3; --on-slab-2: rgba(255,240,243,0.78); --on-slab-3: rgba(255,240,243,0.58); --on-slab-rule: rgba(255,240,243,0.22); --on-slab-t: rgba(255,240,243,0.16); --card: #FFFFFF; --card-line: rgba(28,10,20,0.08); --card-shadow: 0 1px 0 rgba(28,10,20,0.04), 0 22px 44px -32px rgba(28,10,20,0.28); --ok: #C8124C; --fail: #C8124C; --review: #C8124C; }
[data-chart="garment"] { --ink: #120D22; --ink-2: rgba(18,13,34,0.66); --ink-3: rgba(18,13,34,0.46); --rule: rgba(18,13,34,0.1); --accent: #5B2FD6; --accent-t: #ECE5FD; --plate: #FFFFFF; --plate-bg: #FFFFFF; --ground: #22124F; --ground-deep: #0A0720; --ground-bg: radial-gradient(80% 80% at 30% 30%, rgba(106,47,208,0.45), rgba(106,47,208,0) 70%), radial-gradient(80% 80% at 85% 75%, rgba(29,90,174,0.38), rgba(29,90,174,0) 70%), radial-gradient(56% 56% at 55% 10%, rgba(192,64,138,0.18), rgba(192,64,138,0) 70%), linear-gradient(150deg, #0A0720, #1A0F42 52%, #2C1468); --slab-bar: linear-gradient(90deg, #FF6F61 0.00% 20.00%, #FFA04D 20.00% 40.00%, #FFD24C 40.00% 60.00%, #B2E86B 60.00% 80.00%, #4FE3C1 80.00% 100.00%); --night: #F4F0FF; --night-2: rgba(244,240,255,0.72); --night-3: rgba(244,240,255,0.5); --night-rule: rgba(244,240,255,0.16); --slab: #0A0720; --on-slab: #F4F0FF; --on-slab-2: rgba(244,240,255,0.78); --on-slab-3: rgba(244,240,255,0.58); --on-slab-rule: rgba(244,240,255,0.22); --on-slab-t: rgba(244,240,255,0.16); --card: #FFFFFF; --card-line: rgba(18,13,34,0.08); --card-shadow: 0 1px 0 rgba(18,13,34,0.04), 0 22px 44px -32px rgba(18,13,34,0.28); --ok: #5B2FD6; --fail: #5B2FD6; --review: #5B2FD6; }
[data-chart="carbon"] { --ink: #08170F; --ink-2: rgba(8,23,15,0.66); --ink-3: rgba(8,23,15,0.46); --rule: rgba(8,23,15,0.1); --accent: #0B8A64; --accent-t: #DBF4EA; --plate: #FFFFFF; --plate-bg: #FFFFFF; --ground: #064536; --ground-deep: #02150F; --ground-bg: radial-gradient(88% 88% at 30% 40%, rgba(14,140,102,0.5), rgba(14,140,102,0) 70%), radial-gradient(72% 72% at 92% 35%, rgba(176,138,26,0.22), rgba(176,138,26,0) 70%), radial-gradient(80% 80% at 70% 100%, rgba(13,94,122,0.4), rgba(13,94,122,0) 70%), linear-gradient(150deg, #02150F, #053527 52%, #0A5A45); --slab-bar: linear-gradient(90deg, #6AD4FF 0.00% 20.00%, #7BF5CE 20.00% 40.00%, #B9F06A 40.00% 60.00%, #FFCB57 60.00% 80.00%, #FF8FB4 80.00% 100.00%); --night: #EDFFF8; --night-2: rgba(237,255,248,0.72); --night-3: rgba(237,255,248,0.5); --night-rule: rgba(237,255,248,0.16); --slab: #02150F; --on-slab: #EDFFF8; --on-slab-2: rgba(237,255,248,0.78); --on-slab-3: rgba(237,255,248,0.58); --on-slab-rule: rgba(237,255,248,0.22); --on-slab-t: rgba(237,255,248,0.16); --card: #FFFFFF; --card-line: rgba(8,23,15,0.08); --card-shadow: 0 1px 0 rgba(8,23,15,0.04), 0 22px 44px -32px rgba(8,23,15,0.28); --ok: #FFCB57; --fail: #FF8FB4; --review: #0B8A64; }
[data-chart="pks"] { --ink: #0A0F2A; --ink-2: rgba(10,15,42,0.66); --ink-3: rgba(10,15,42,0.46); --rule: rgba(10,15,42,0.1); --accent: #1F45D6; --accent-t: #E1E8FD; --plate: #FFFFFF; --plate-bg: #FFFFFF; --ground: #1236B4; --ground-deep: #05104A; --ground-bg: radial-gradient(88% 88% at 25% 20%, rgba(47,123,255,0.5), rgba(47,123,255,0) 70%), radial-gradient(88% 88% at 85% 85%, rgba(106,53,230,0.45), rgba(106,53,230,0) 70%), radial-gradient(48% 48% at 95% 15%, rgba(34,198,224,0.2), rgba(34,198,224,0) 70%), linear-gradient(150deg, #060F45, #0D2A8E 52%, #1A44C8); --slab-bar: linear-gradient(90deg, #5CF0D4 0.00% 16.67%, #7ED8FF 16.67% 33.33%, #B8C4FF 33.33% 50.00%, #E2AEFF 50.00% 66.67%, #FF9FD0 66.67% 83.33%, #FFC58A 83.33% 100.00%); --night: #F1F5FF; --night-2: rgba(241,245,255,0.72); --night-3: rgba(241,245,255,0.5); --night-rule: rgba(241,245,255,0.16); --slab: #05104A; --on-slab: #F1F5FF; --on-slab-2: rgba(241,245,255,0.78); --on-slab-3: rgba(241,245,255,0.58); --on-slab-rule: rgba(241,245,255,0.22); --on-slab-t: rgba(241,245,255,0.16); --card: #FFFFFF; --card-line: rgba(10,15,42,0.08); --card-shadow: 0 1px 0 rgba(10,15,42,0.04), 0 22px 44px -32px rgba(10,15,42,0.28); --ok: #5CF0D4; --fail: #FF9FD0; --review: #1F45D6; }
[data-chart="gate"] { --ink: #0B0E14; --ink-2: rgba(11,14,20,0.66); --ink-3: rgba(11,14,20,0.46); --rule: rgba(11,14,20,0.1); --accent: #0F9E6A; --accent-t: #DDF5EA; --plate: #FFFFFF; --plate-bg: #FFFFFF; --ground: #141A24; --ground-deep: #06080C; --ground-bg: radial-gradient(80% 80% at 72% 45%, rgba(31,90,74,0.45), rgba(31,90,74,0) 70%), radial-gradient(80% 80% at 20% 90%, rgba(59,42,96,0.4), rgba(59,42,96,0) 70%), radial-gradient(56% 56% at 90% 5%, rgba(107,42,51,0.25), rgba(107,42,51,0) 70%), linear-gradient(150deg, #06080C, #0E131B 52%, #1B2330); --slab-bar: linear-gradient(90deg, #5BF0A5 0.00% 20.00%, #7FB6FF 20.00% 40.00%, #FFC34A 40.00% 60.00%, #FF8B5E 60.00% 80.00%, #FF5D6E 80.00% 100.00%); --night: #EEF2F7; --night-2: rgba(238,242,247,0.72); --night-3: rgba(238,242,247,0.5); --night-rule: rgba(238,242,247,0.16); --slab: #06080C; --on-slab: #EEF2F7; --on-slab-2: rgba(238,242,247,0.78); --on-slab-3: rgba(238,242,247,0.58); --on-slab-rule: rgba(238,242,247,0.22); --on-slab-t: rgba(238,242,247,0.16); --card: #FFFFFF; --card-line: rgba(11,14,20,0.08); --card-shadow: 0 1px 0 rgba(11,14,20,0.04), 0 22px 44px -32px rgba(11,14,20,0.28); --ok: #5BF0A5; --fail: #FF5D6E; --review: #FFC34A; }