kakaotalk-chat-analyzer 0.11.1 → 0.12.0

package/dist/src/report-charts.d.ts

@@ -47,4 +47,4 @@ export interface ChartPayload {
 export declare function serializeChartPayload(data: ReportData): string;
 export declare function buildChartPayload(data: ReportData): ChartPayload;
 export declare function renderChartDeck(data: ReportData): string;
-export declare const CHARTS_INIT_SCRIPT = "\n    (function () {\n      function run() {\n      var dataEl = document.getElementById(\"kca-chart-data\");\n      if (!dataEl) return;\n      if (typeof echarts === \"undefined\") return;\n      var data;\n      try { data = JSON.parse(dataEl.textContent || \"{}\"); } catch (e) { return; }\n\n      var dark = document.documentElement.getAttribute(\"data-theme\") === \"dark\" ||\n        (!document.documentElement.getAttribute(\"data-theme\") &&\n          window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches);\n      var text = dark ? \"#e9eef5\" : \"#141a1f\";\n      var muted = dark ? \"#8b98a8\" : \"#5c6670\";\n      var accent = dark ? \"#3ee8c5\" : \"#0f6b5c\";\n      var accent2 = dark ? \"#818cf8\" : \"#4f46e5\";\n\n      function baseOpt() {\n        return {\n          textStyle: { color: text, fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\" },\n          tooltip: { trigger: \"axis\", backgroundColor: dark ? \"#1c2128\" : \"#fff\", borderColor: \"transparent\" },\n        };\n      }\n\n      var charts = [];\n      function resizeAll() {\n        charts.forEach(function (c) {\n          try { c.resize(); } catch (e) {}\n        });\n      }\n      function layout(el) {\n        var w = (el && el.clientWidth) || 400;\n        if (w < 380) {\n          return { w: w, left: 28, right: 8, top: 14, bottom: 44, fs: 9, rot: 40, leftCat: 56, bottomRot: 42 };\n        }\n        if (w < 640) {\n          return { w: w, left: 40, right: 10, top: 18, bottom: 34, fs: 10, rot: 26, leftCat: 72, bottomRot: 32 };\n        }\n        return { w: w, left: 48, right: 14, top: 22, bottom: 28, fs: 11, rot: 0, leftCat: 96, bottomRot: 28 };\n      }\n      function init(id, opt) {\n        var el = document.getElementById(id);\n        if (!el) return null;\n        try {\n          var chart = echarts.init(el, null, { renderer: \"canvas\" });\n          chart.setOption(opt);\n          charts.push(chart);\n          if (typeof ResizeObserver !== \"undefined\") {\n            var ro = new ResizeObserver(function () {\n              requestAnimationFrame(function () {\n                try { chart.resize(); } catch (e) {}\n              });\n            });\n            ro.observe(el);\n          }\n          return chart;\n        } catch (err) {\n          console.error(\"[kca-chart]\", id, err);\n          el.setAttribute(\"data-chart-failed\", \"1\");\n          el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC0C8\uB85C\uACE0\uCE68\uD558\uAC70\uB098 \uB124\uD2B8\uC6CC\uD06C(CDN)\uB97C \uD655\uC778\uD574 \uC8FC\uC138\uC694.</p>';\n          return null;\n        }\n      }\n      var mqWide = window.matchMedia && window.matchMedia(\"(min-width: 900px)\");\n      if (mqWide && mqWide.addEventListener) {\n        mqWide.addEventListener(\"change\", function () { setTimeout(resizeAll, 80); });\n      } else if (mqWide && mqWide.addListener) {\n        mqWide.addListener(function () { setTimeout(resizeAll, 80); });\n      }\n      var themeObs = new MutationObserver(function () { setTimeout(resizeAll, 60); });\n      themeObs.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-theme\"] });\n\n      if (data.hourly && document.getElementById(\"chart-hours\")) {\n        var hoursEl = document.getElementById(\"chart-hours\");\n        var hg = layout(hoursEl);\n        init(\"chart-hours\", Object.assign(baseOpt(), {\n          grid: { left: hg.left, right: hg.right, top: hg.top, bottom: hg.bottom },\n          xAxis: { type: \"category\", data: data.hourly.map(function (_, h) { return h + \"\uC2DC\"; }), axisLabel: { color: muted, fontSize: hg.fs, rotate: hg.rot } },\n          yAxis: { type: \"value\", axisLabel: { color: muted }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n          series: [{\n            type: \"bar\",\n            data: data.hourly,\n            itemStyle: {\n              borderRadius: [4, 4, 0, 0],\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n                { offset: 0, color: accent },\n                { offset: 1, color: accent2 },\n              ]),\n            },\n          }],\n        }));\n      }\n\n      if (data.weekdays && document.getElementById(\"chart-weekday\")) {\n        var wdEl = document.getElementById(\"chart-weekday\");\n        var wg = layout(wdEl);\n        init(\"chart-weekday\", Object.assign(baseOpt(), {\n          grid: { left: wg.leftCat, right: wg.right, top: wg.top, bottom: wg.bottom },\n          xAxis: { type: \"value\", axisLabel: { color: muted, fontSize: wg.fs } },\n          yAxis: { type: \"category\", data: data.weekdays.map(function (w) { return w.label; }), axisLabel: { color: muted, fontSize: wg.fs } },\n          series: [{ type: \"bar\", data: data.weekdays.map(function (w) { return w.count; }), itemStyle: { color: accent, borderRadius: [0, 6, 6, 0] } }],\n        }));\n      }\n\n      if (data.monthly && document.getElementById(\"chart-monthly\")) {\n        var moEl = document.getElementById(\"chart-monthly\");\n        var mg = layout(moEl);\n        init(\"chart-monthly\", Object.assign(baseOpt(), {\n          grid: { left: mg.left, right: mg.right, top: mg.top, bottom: mg.bottom },\n          xAxis: { type: \"category\", data: data.monthly.map(function (m) { return m.label; }), axisLabel: { color: muted, fontSize: mg.fs, rotate: mg.bottomRot } },\n          yAxis: { type: \"value\", axisLabel: { color: muted, fontSize: mg.fs }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n          series: [{ type: \"line\", smooth: true, data: data.monthly.map(function (m) { return m.count; }), areaStyle: { opacity: 0.12 }, lineStyle: { width: 2, color: accent2 }, itemStyle: { color: accent2 } }],\n        }));\n      }\n\n      if (data.daily && document.getElementById(\"chart-daily-heat\")) {\n        var heatEl = document.getElementById(\"chart-daily-heat\");\n        var dg = layout(heatEl);\n        var cellH = dg.w < 380 ? 9 : dg.w < 640 ? 11 : 14;\n        var heat = data.daily.map(function (d) { return [d.date, d.count]; });\n        init(\"chart-daily-heat\", Object.assign(baseOpt(), {\n          tooltip: { position: \"top\" },\n          visualMap: { min: 0, max: Math.max.apply(null, data.daily.map(function (d) { return d.count; })), calculable: true, orient: \"horizontal\", left: \"center\", bottom: 0, textStyle: { color: muted, fontSize: dg.fs }, itemWidth: dg.w < 380 ? 10 : 14, itemHeight: dg.w < 380 ? 60 : 80, inRange: { color: dark ? [\"#161b22\", \"#0e4429\", \"#006d32\", \"#26a641\", \"#39d353\"] : [\"#ebedf0\", \"#9be9a8\", \"#40c463\", \"#30a14e\", \"#216e39\"] } },\n          calendar: { top: dg.w < 380 ? 28 : 36, left: dg.left, right: dg.right, cellSize: [\"auto\", cellH], range: data.daily.length ? [data.daily[0].date, data.daily[data.daily.length - 1].date] : undefined, itemStyle: { borderWidth: 0.5, borderColor: dark ? \"#30363d\" : \"#fff\" }, dayLabel: { color: muted, fontSize: dg.fs }, monthLabel: { color: muted, fontSize: dg.fs } },\n          series: [{ type: \"heatmap\", coordinateSystem: \"calendar\", data: heat }],\n        }));\n      }\n\n      if (data.keywords && document.getElementById(\"chart-kw-bar\")) {\n        var kwEl = document.getElementById(\"chart-kw-bar\");\n        var kg = layout(kwEl);\n        var topBar = data.keywords.slice(0, kg.w < 380 ? 24 : 80);\n        init(\"chart-kw-bar\", Object.assign(baseOpt(), {\n          grid: { left: kg.leftCat, right: kg.right, top: kg.top, bottom: kg.bottom },\n          xAxis: { type: \"value\", axisLabel: { color: muted, fontSize: kg.fs } },\n          yAxis: { type: \"category\", data: topBar.map(function (k) { return k.label; }).reverse(), axisLabel: { color: text, fontSize: kg.fs } },\n          series: [{ type: \"bar\", data: topBar.map(function (k) { return k.count; }).reverse(), itemStyle: { color: accent2, borderRadius: [0, 4, 4, 0] } }],\n        }));\n      }\n\n      if (data.keywords && document.getElementById(\"chart-kw-cloud\")) {\n        var cloudEl = document.getElementById(\"chart-kw-cloud\");\n        var cg = layout(cloudEl);\n        var cloud = data.keywords.slice(0, 100).map(function (k) {\n          return { name: k.label, value: k.count };\n        });\n        var sizeLo = cg.w < 380 ? 10 : 12;\n        var sizeHi = cg.w < 380 ? 34 : cg.w < 640 ? 46 : 56;\n        init(\"chart-kw-cloud\", {\n          textStyle: baseOpt().textStyle,\n          tooltip: { show: true },\n          series: [{\n            type: \"wordCloud\",\n            shape: \"circle\",\n            gridSize: cg.w < 380 ? 8 : 6,\n            sizeRange: [sizeLo, sizeHi],\n            rotationRange: [-45, 45],\n            textStyle: {\n              fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\",\n              color: function () {\n                var palette = dark ? [\"#3ee8c5\", \"#818cf8\", \"#fbbf24\", \"#fb923c\", \"#f472b6\"] : [\"#0f6b5c\", \"#4f46e5\", \"#b8860b\", \"#c45c2a\", \"#be185d\"];\n                return palette[Math.floor(Math.random() * palette.length)];\n              },\n            },\n            data: cloud,\n          }],\n        });\n      }\n\n      if (data.participants && document.getElementById(\"chart-participants\")) {\n        var pieEl = document.getElementById(\"chart-participants\");\n        var pg = layout(pieEl);\n        var p = data.participants.slice(0, pg.w < 380 ? 8 : 16);\n        var pieR = pg.w < 380 ? [\"46%\", \"72%\"] : [\"42%\", \"70%\"];\n        init(\"chart-participants\", Object.assign(baseOpt(), {\n          tooltip: { trigger: \"item\" },\n          series: [{\n            type: \"pie\",\n            radius: pieR,\n            data: p.map(function (x) { return { name: x.alias, value: x.messages }; }),\n            label: { color: text, fontSize: pg.fs },\n            itemStyle: { borderRadius: 4, borderColor: dark ? \"#0d1117\" : \"#fff\", borderWidth: 2 },\n          }],\n        }));\n      }\n\n      if (data.topics && data.topics.length && document.getElementById(\"chart-topics\")) {\n        var topEl = document.getElementById(\"chart-topics\");\n        var tg = layout(topEl);\n        var topics = data.topics.slice(0, 8);\n        init(\"chart-topics\", Object.assign(baseOpt(), {\n          grid: { left: Math.max(tg.leftCat, tg.w < 380 ? 72 : 96), right: tg.right, top: tg.top, bottom: tg.bottom },\n          xAxis: { type: \"value\", axisLabel: { color: muted, fontSize: tg.fs, formatter: \"{value}%\" } },\n          yAxis: {\n            type: \"category\",\n            data: topics.map(function (t) { return t.title; }).reverse(),\n            axisLabel: { color: text, fontSize: tg.fs },\n          },\n          series: [{\n            type: \"bar\",\n            data: topics.map(function (t) { return t.messagePercent; }).reverse(),\n            itemStyle: {\n              borderRadius: [0, 6, 6, 0],\n              color: function (p) { return p.dataIndex % 2 === 0 ? accent : accent2; },\n            },\n          }],\n        }));\n      }\n\n      if (data.domains && document.getElementById(\"chart-domains\")) {\n        init(\"chart-domains\", Object.assign(baseOpt(), {\n          tooltip: { trigger: \"item\" },\n          series: [{\n            type: \"treemap\",\n            data: data.domains.map(function (d) { return { name: d.label, value: d.count }; }),\n            label: { color: text, fontSize: 11 },\n            itemStyle: { borderColor: dark ? \"#0d1117\" : \"#fff\", gapWidth: 2 },\n          }],\n        }));\n      }\n      requestAnimationFrame(resizeAll);\n      setTimeout(resizeAll, 150);\n      window.addEventListener(\"resize\", resizeAll);\n      window.addEventListener(\"load\", resizeAll);\n      }\n      if (typeof echarts !== \"undefined\") {\n        run();\n      } else {\n        window.addEventListener(\"load\", function () {\n          var tries = 0;\n          (function wait() {\n            if (typeof echarts !== \"undefined\") { run(); return; }\n            if (++tries > 120) {\n              document.querySelectorAll(\".chart-box\").forEach(function (el) {\n                if (!el.querySelector(\"canvas\")) {\n                  el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">ECharts CDN\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.</p>';\n                }\n              });\n              return;\n            }\n            setTimeout(wait, 50);\n          })();\n        });\n      }\n    })();\n";
+export declare const CHARTS_INIT_SCRIPT = "\n    (function () {\n      function run() {\n      var dataEl = document.getElementById(\"kca-chart-data\");\n      if (!dataEl) return;\n      if (typeof echarts === \"undefined\") return;\n      var data;\n      try { data = JSON.parse(dataEl.textContent || \"{}\"); } catch (e) { return; }\n\n      var dark = document.documentElement.getAttribute(\"data-theme\") === \"dark\" ||\n        (!document.documentElement.getAttribute(\"data-theme\") &&\n          window.matchMedia && window.matchMedia(\"(prefers-color-scheme: dark)\").matches);\n      var text = dark ? \"#e9eef5\" : \"#141a1f\";\n      var muted = dark ? \"#8b98a8\" : \"#5c6670\";\n      var accent = dark ? \"#3ee8c5\" : \"#0f6b5c\";\n      var accent2 = dark ? \"#818cf8\" : \"#4f46e5\";\n\n      function baseOpt() {\n        return {\n          textStyle: { color: text, fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\" },\n          tooltip: { trigger: \"axis\", backgroundColor: dark ? \"#1c2128\" : \"#fff\", borderColor: \"transparent\" },\n        };\n      }\n\n      var charts = [];\n      function resizeAll() {\n        charts.forEach(function (c) {\n          try { c.resize(); } catch (e) {}\n        });\n      }\n      function layout(el) {\n        var w = (el && el.clientWidth) || 400;\n        if (w < 380) {\n          return { w: w, left: 28, right: 8, top: 14, bottom: 44, fs: 9, rot: 40, leftCat: 56, bottomRot: 42 };\n        }\n        if (w < 640) {\n          return { w: w, left: 40, right: 10, top: 18, bottom: 34, fs: 10, rot: 26, leftCat: 72, bottomRot: 32 };\n        }\n        return { w: w, left: 48, right: 14, top: 22, bottom: 28, fs: 11, rot: 0, leftCat: 96, bottomRot: 28 };\n      }\n      function init(id, opt) {\n        var el = document.getElementById(id);\n        if (!el) return null;\n        try {\n          var chart = echarts.init(el, null, { renderer: \"canvas\" });\n          chart.setOption(opt);\n          charts.push(chart);\n          if (typeof ResizeObserver !== \"undefined\") {\n            var ro = new ResizeObserver(function () {\n              requestAnimationFrame(function () {\n                try { chart.resize(); } catch (e) {}\n              });\n            });\n            ro.observe(el);\n          }\n          return chart;\n        } catch (err) {\n          console.error(\"[kca-chart]\", id, err);\n          el.setAttribute(\"data-chart-failed\", \"1\");\n          el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">\uCC28\uD2B8\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694. \uC0C8\uB85C\uACE0\uCE68\uD558\uAC70\uB098 \uB124\uD2B8\uC6CC\uD06C(CDN)\uB97C \uD655\uC778\uD574 \uC8FC\uC138\uC694.</p>';\n          return null;\n        }\n      }\n      var mqWide = window.matchMedia && window.matchMedia(\"(min-width: 900px)\");\n      if (mqWide && mqWide.addEventListener) {\n        mqWide.addEventListener(\"change\", function () { setTimeout(resizeAll, 80); });\n      } else if (mqWide && mqWide.addListener) {\n        mqWide.addListener(function () { setTimeout(resizeAll, 80); });\n      }\n      var themeObs = new MutationObserver(function () { setTimeout(resizeAll, 60); });\n      themeObs.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-theme\"] });\n\n      if (data.hourly && document.getElementById(\"chart-hours\")) {\n        var hoursEl = document.getElementById(\"chart-hours\");\n        var hg = layout(hoursEl);\n        init(\"chart-hours\", Object.assign(baseOpt(), {\n          grid: { left: hg.left, right: hg.right, top: hg.top, bottom: hg.bottom },\n          xAxis: { type: \"category\", data: data.hourly.map(function (_, h) { return h + \"\uC2DC\"; }), axisLabel: { color: muted, fontSize: hg.fs, rotate: hg.rot } },\n          yAxis: { type: \"value\", axisLabel: { color: muted }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n          series: [{\n            type: \"bar\",\n            data: data.hourly,\n            itemStyle: {\n              borderRadius: [4, 4, 0, 0],\n              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n                { offset: 0, color: accent },\n                { offset: 1, color: accent2 },\n              ]),\n            },\n          }],\n        }));\n      }\n\n      if (data.weekdays && document.getElementById(\"chart-weekday\")) {\n        var wdEl = document.getElementById(\"chart-weekday\");\n        var wg = layout(wdEl);\n        init(\"chart-weekday\", Object.assign(baseOpt(), {\n          grid: { left: wg.leftCat, right: wg.right, top: wg.top, bottom: wg.bottom },\n          xAxis: { type: \"value\", axisLabel: { color: muted, fontSize: wg.fs } },\n          yAxis: { type: \"category\", data: data.weekdays.map(function (w) { return w.label; }), axisLabel: { color: muted, fontSize: wg.fs } },\n          series: [{ type: \"bar\", data: data.weekdays.map(function (w) { return w.count; }), itemStyle: { color: accent, borderRadius: [0, 6, 6, 0] } }],\n        }));\n      }\n\n      if (data.monthly && document.getElementById(\"chart-monthly\")) {\n        var moEl = document.getElementById(\"chart-monthly\");\n        var mg = layout(moEl);\n        init(\"chart-monthly\", Object.assign(baseOpt(), {\n          grid: { left: mg.left, right: mg.right, top: mg.top, bottom: mg.bottom },\n          xAxis: { type: \"category\", data: data.monthly.map(function (m) { return m.label; }), axisLabel: { color: muted, fontSize: mg.fs, rotate: mg.bottomRot } },\n          yAxis: { type: \"value\", axisLabel: { color: muted, fontSize: mg.fs }, splitLine: { lineStyle: { color: dark ? \"rgba(255,255,255,0.06)\" : \"rgba(0,0,0,0.06)\" } } },\n          series: [{ type: \"line\", smooth: true, data: data.monthly.map(function (m) { return m.count; }), areaStyle: { opacity: 0.12 }, lineStyle: { width: 2, color: accent2 }, itemStyle: { color: accent2 } }],\n        }));\n      }\n\n      if (data.daily && document.getElementById(\"chart-daily-heat\")) {\n        var heatEl = document.getElementById(\"chart-daily-heat\");\n        var dg = layout(heatEl);\n        var cellH = dg.w < 380 ? 9 : dg.w < 640 ? 11 : 14;\n        var heat = data.daily.map(function (d) { return [d.date, d.count]; });\n        init(\"chart-daily-heat\", Object.assign(baseOpt(), {\n          tooltip: { position: \"top\" },\n          visualMap: { min: 0, max: Math.max.apply(null, data.daily.map(function (d) { return d.count; })), calculable: true, orient: \"horizontal\", left: \"center\", bottom: 0, textStyle: { color: muted, fontSize: dg.fs }, itemWidth: dg.w < 380 ? 10 : 14, itemHeight: dg.w < 380 ? 60 : 80, inRange: { color: dark ? [\"#161b22\", \"#0e4429\", \"#006d32\", \"#26a641\", \"#39d353\"] : [\"#ebedf0\", \"#9be9a8\", \"#40c463\", \"#30a14e\", \"#216e39\"] } },\n          calendar: { top: dg.w < 380 ? 28 : 36, left: dg.left, right: dg.right, cellSize: [\"auto\", cellH], range: data.daily.length ? [data.daily[0].date, data.daily[data.daily.length - 1].date] : undefined, itemStyle: { borderWidth: 0.5, borderColor: dark ? \"#30363d\" : \"#fff\" }, dayLabel: { color: muted, fontSize: dg.fs }, monthLabel: { color: muted, fontSize: dg.fs } },\n          series: [{ type: \"heatmap\", coordinateSystem: \"calendar\", data: heat }],\n        }));\n      }\n\n      if (data.keywords && document.getElementById(\"chart-kw-bar\")) {\n        var kwEl = document.getElementById(\"chart-kw-bar\");\n        var kg = layout(kwEl);\n        var topBar = data.keywords.slice(0, kg.w < 380 ? 24 : 80);\n        init(\"chart-kw-bar\", Object.assign(baseOpt(), {\n          grid: { left: kg.leftCat, right: kg.right, top: kg.top, bottom: kg.bottom },\n          xAxis: { type: \"value\", axisLabel: { color: muted, fontSize: kg.fs } },\n          yAxis: { type: \"category\", data: topBar.map(function (k) { return k.label; }).reverse(), axisLabel: { color: text, fontSize: kg.fs } },\n          series: [{ type: \"bar\", data: topBar.map(function (k) { return k.count; }).reverse(), itemStyle: { color: accent2, borderRadius: [0, 4, 4, 0] } }],\n        }));\n      }\n\n      if (data.keywords && document.getElementById(\"chart-kw-cloud\")) {\n        var cloudEl = document.getElementById(\"chart-kw-cloud\");\n        var cg = layout(cloudEl);\n        var cloud = data.keywords.slice(0, 100).map(function (k) {\n          return { name: k.label, value: k.count };\n        });\n        var sizeLo = cg.w < 380 ? 10 : 12;\n        var sizeHi = cg.w < 380 ? 34 : cg.w < 640 ? 46 : 56;\n        init(\"chart-kw-cloud\", {\n          textStyle: baseOpt().textStyle,\n          tooltip: { show: true },\n          series: [{\n            type: \"wordCloud\",\n            shape: \"circle\",\n            gridSize: cg.w < 380 ? 8 : 6,\n            sizeRange: [sizeLo, sizeHi],\n            rotationRange: [-45, 45],\n            textStyle: {\n              fontFamily: \"Pretendard, Apple SD Gothic Neo, sans-serif\",\n              color: function () {\n                var palette = dark ? [\"#3ee8c5\", \"#818cf8\", \"#fbbf24\", \"#fb923c\", \"#f472b6\"] : [\"#0f6b5c\", \"#4f46e5\", \"#b8860b\", \"#c45c2a\", \"#be185d\"];\n                return palette[Math.floor(Math.random() * palette.length)];\n              },\n            },\n            data: cloud,\n          }],\n        });\n      }\n\n      if (data.participants && document.getElementById(\"chart-participants\")) {\n        var pieEl = document.getElementById(\"chart-participants\");\n        var pg = layout(pieEl);\n        var p = data.participants.slice(0, pg.w < 380 ? 8 : 16);\n        var pieR = pg.w < 380 ? [\"46%\", \"72%\"] : [\"42%\", \"70%\"];\n        init(\"chart-participants\", Object.assign(baseOpt(), {\n          tooltip: { trigger: \"item\" },\n          series: [{\n            type: \"pie\",\n            radius: pieR,\n            data: p.map(function (x) { return { name: x.alias, value: x.messages }; }),\n            label: { color: text, fontSize: pg.fs },\n            itemStyle: { borderRadius: 4, borderColor: dark ? \"#0d1117\" : \"#fff\", borderWidth: 2 },\n          }],\n        }));\n      }\n\n      if (data.topics && data.topics.length && document.getElementById(\"chart-topics\")) {\n        var topEl = document.getElementById(\"chart-topics\");\n        var tg = layout(topEl);\n        var topics = data.topics.slice(0, 8);\n        init(\"chart-topics\", Object.assign(baseOpt(), {\n          grid: { left: Math.max(tg.leftCat, tg.w < 380 ? 72 : 96), right: tg.right, top: tg.top, bottom: tg.bottom },\n          xAxis: { type: \"value\", axisLabel: { color: muted, fontSize: tg.fs, formatter: \"{value}%\" } },\n          yAxis: {\n            type: \"category\",\n            data: topics.map(function (t) { return t.title; }).reverse(),\n            axisLabel: { color: text, fontSize: tg.fs },\n          },\n          series: [{\n            type: \"bar\",\n            data: topics.map(function (t) { return t.messagePercent; }).reverse(),\n            itemStyle: {\n              borderRadius: [0, 6, 6, 0],\n              color: function (p) { return p.dataIndex % 2 === 0 ? accent : accent2; },\n            },\n          }],\n        }));\n      }\n\n      if (data.domains && document.getElementById(\"chart-domains\")) {\n        init(\"chart-domains\", Object.assign(baseOpt(), {\n          tooltip: { trigger: \"item\" },\n          series: [{\n            type: \"treemap\",\n            data: data.domains.map(function (d) { return { name: d.label, value: d.count }; }),\n            label: { color: text, fontSize: 11 },\n            itemStyle: { borderColor: dark ? \"#0d1117\" : \"#fff\", gapWidth: 2 },\n          }],\n        }));\n      }\n      requestAnimationFrame(resizeAll);\n      setTimeout(resizeAll, 150);\n      window.addEventListener(\"resize\", resizeAll);\n      window.addEventListener(\"load\", resizeAll);\n      }\n      function whenVisible() {\n        var anchor = document.getElementById(\"s-viz\") || document.querySelector(\".chart-box\");\n        if (!anchor || typeof IntersectionObserver === \"undefined\") {\n          run();\n          return;\n        }\n        var started = false;\n        var io = new IntersectionObserver(function (entries) {\n          if (started) return;\n          if (entries.some(function (e) { return e.isIntersecting; })) {\n            started = true;\n            io.disconnect();\n            run();\n          }\n        }, { rootMargin: \"280px 0px\", threshold: 0.01 });\n        io.observe(anchor);\n        setTimeout(function () {\n          if (started) return;\n          var r = anchor.getBoundingClientRect();\n          if (r.top < window.innerHeight + 320) {\n            started = true;\n            io.disconnect();\n            run();\n          }\n        }, 200);\n      }\n      function bootCharts() {\n        if (typeof echarts === \"undefined\") return false;\n        whenVisible();\n        return true;\n      }\n      if (!bootCharts()) {\n        window.addEventListener(\"load\", function () {\n          var tries = 0;\n          (function wait() {\n            if (bootCharts()) return;\n            if (++tries > 120) {\n              document.querySelectorAll(\".chart-box\").forEach(function (el) {\n                if (!el.querySelector(\"canvas\")) {\n                  el.innerHTML = '<p style=\"margin:0;padding:12px;font-size:12px;color:var(--muted);text-align:center\">ECharts CDN\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4.</p>';\n                }\n              });\n              return;\n            }\n            setTimeout(wait, 50);\n          })();\n        });\n      }\n    })();\n";

package/dist/src/report-charts.js

@@ -331,13 +331,42 @@ export const CHARTS_INIT_SCRIPT = `
       window.addEventListener("resize", resizeAll);
       window.addEventListener("load", resizeAll);
       }
-      if (typeof echarts !== "undefined") {
-        run();
-      } else {
+      function whenVisible() {
+        var anchor = document.getElementById("s-viz") || document.querySelector(".chart-box");
+        if (!anchor || typeof IntersectionObserver === "undefined") {
+          run();
+          return;
+        }
+        var started = false;
+        var io = new IntersectionObserver(function (entries) {
+          if (started) return;
+          if (entries.some(function (e) { return e.isIntersecting; })) {
+            started = true;
+            io.disconnect();
+            run();
+          }
+        }, { rootMargin: "280px 0px", threshold: 0.01 });
+        io.observe(anchor);
+        setTimeout(function () {
+          if (started) return;
+          var r = anchor.getBoundingClientRect();
+          if (r.top < window.innerHeight + 320) {
+            started = true;
+            io.disconnect();
+            run();
+          }
+        }, 200);
+      }
+      function bootCharts() {
+        if (typeof echarts === "undefined") return false;
+        whenVisible();
+        return true;
+      }
+      if (!bootCharts()) {
         window.addEventListener("load", function () {
           var tries = 0;
           (function wait() {
-            if (typeof echarts !== "undefined") { run(); return; }
+            if (bootCharts()) return;
             if (++tries > 120) {
               document.querySelectorAll(".chart-box").forEach(function (el) {
                 if (!el.querySelector("canvas")) {

package/dist/src/report-charts.js.map

@@ -1 +1 @@
-{"version":3,"file":"report-charts.js","sourceRoot":"","sources":["../../src/report-charts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,kEAAkE;AAClE,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AAEjC,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG;;;CAG7B,CAAC;AAkBF,MAAM,UAAU,qBAAqB,CAAC,IAAgB;IACpD,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC3C,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;SACxB,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;SAC7B,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAgB;IAChD,OAAO;QACL,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QACrE,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;QAClC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,QAAQ,EAAE,CAAC,CAAC,QAAQ;YACpB,YAAY,EAAE,CAAC,CAAC,YAAY;SAC7B,CAAC,CAAC;QACH,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa;aACpC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;aACvB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;aACpC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAClD,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7C,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM;QAC3C,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,cAAc,EAAE,CAAC,CAAC,cAAc;YAChC,IAAI,EAAE,CAAC,CAAC,IAAI;SACb,CAAC,CAAC;KACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAgB;IAC9C,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;IAChC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IACtC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACvF,MAAM,UAAU,GACd,UAAU,GAAG,CAAC;QACZ,CAAC,CAAC;;;;eAIO;QACT,CAAC,CAAC,EAAE,CAAC;IAET,OAAO;;yEAEgE,YAAY,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BtE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;mEACkB,YAAY,CAAC,EAAE,CAAC;;QAE3E,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;+BAIV,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;;;;;;;;MAQ/D,UAAU;;IAEZ,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kEAAkE,EAAE,CAAC;AAChG,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAyC;IACnE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK;SACf,GAAG,CACF,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CACV,+BAA+B,CAAC,GAAG,CAAC,YAAY,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CACrI;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,6JAA6J,IAAI,wBAAwB,CAAC;AACnM,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqPjC,CAAC"}
+{"version":3,"file":"report-charts.js","sourceRoot":"","sources":["../../src/report-charts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAE5D,kEAAkE;AAClE,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC;AAEjC,wDAAwD;AACxD,MAAM,CAAC,MAAM,cAAc,GAAG;;;CAG7B,CAAC;AAkBF,MAAM,UAAU,qBAAqB,CAAC,IAAgB;IACpD,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC3C,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;SACxB,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC;SAC7B,OAAO,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAAgB;IAChD,OAAO;QACL,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QACrE,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;QAClC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,QAAQ,EAAE,CAAC,CAAC,QAAQ;YACpB,YAAY,EAAE,CAAC,CAAC,YAAY;SAC7B,CAAC,CAAC;QACH,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa;aACpC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;aACvB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;aACpC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAClD,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7C,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM;QAC3C,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,cAAc,EAAE,CAAC,CAAC,cAAc;YAChC,IAAI,EAAE,CAAC,CAAC,IAAI;SACb,CAAC,CAAC;KACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAgB;IAC9C,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;IAChC,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;IACtC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACvF,MAAM,UAAU,GACd,UAAU,GAAG,CAAC;QACZ,CAAC,CAAC;;;;eAIO;QACT,CAAC,CAAC,EAAE,CAAC;IAET,OAAO;;yEAEgE,YAAY,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BtE,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;mEACkB,YAAY,CAAC,EAAE,CAAC;;QAE3E,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;+BAIV,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;;;;;;;;MAQ/D,UAAU;;IAEZ,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kEAAkE,EAAE,CAAC;AAChG,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAyC;IACnE,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK;SACf,GAAG,CACF,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CACV,+BAA+B,CAAC,GAAG,CAAC,YAAY,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CACrI;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,6JAA6J,IAAI,wBAAwB,CAAC;AACnM,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkRjC,CAAC"}

package/dist/src/report-styles.d.ts

@@ -1,2 +1,2 @@
 /** Generated by scripts/bundle-report-css.mjs — do not edit by hand */
-export declare const REPORT_STYLES = "/* open-props \u2014 https://open-props.style/ (MIT) */\n:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-2:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-3:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-4:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-5:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}\n\n/* 00-kca-tokens.css */\n/* kca \uC2DC\uB9E8\uD2F1 \uD1A0\uD070 \u2014 Open Props(\uADF8\uB77C\uB370\uC774\uC158\u00B7radius\u00B7shadow) + \uBA85\uC2DC \uD314\uB808\uD2B8(\uB300\uBE44) */\n:root {\n  color-scheme: light dark;\n  --bg: #f4f1ea;\n  --bg2: #e8e2d6;\n  --ink: #141a1f;\n  --muted: #5c6670;\n  --line: #d4cdc2;\n  --panel: #fffcf7;\n  --panel-solid: #fffcf7;\n  --accent: #0f6b5c;\n  --accent2: #5b4fc7;\n  --warm: #c45c2a;\n  --gold: #b8860b;\n  --shadow: var(--shadow-4, 0 18px 50px rgba(20, 26, 31, 0.08));\n  --bar-bg: #e5dfd4;\n  --glow: color-mix(in oklab, var(--teal-5, #0f6b5c) 18%, transparent);\n  --glass: rgba(255, 252, 247, 0.82);\n  --glass-border: rgba(20, 26, 31, 0.1);\n  --accent-grad: var(--gradient-21, linear-gradient(125deg, var(--accent), var(--accent2)));\n  --radius-card: var(--radius-3, 14px);\n  --radius-pill: var(--radius-round, 999px);\n  --kca-font-sans: \"Pretendard Variable\", Pretendard, \"Apple SD Gothic Neo\", \"Malgun Gothic\", var(--font-sans, system-ui, sans-serif);\n  --ease-out: var(--ease-out-3, cubic-bezier(0.22, 1, 0.36, 1));\n  font-family: var(--kca-font-sans);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme=\"light\"]) {\n    --bg: #070a0e;\n    --bg2: #0e1218;\n    --ink: #e9eef5;\n    --muted: #8b98a8;\n    --line: rgba(255, 255, 255, 0.12);\n    --panel: #161b22;\n    --panel-solid: #161b22;\n    --accent: #3ee8c5;\n    --accent2: #a78bfa;\n    --warm: #ff9f43;\n    --gold: #fbbf24;\n    --shadow: var(--shadow-4, 0 28px 90px rgba(0, 0, 0, 0.55));\n    --bar-bg: rgba(255, 255, 255, 0.08);\n    --glow: color-mix(in oklab, var(--teal-4, #3ee8c5) 20%, transparent);\n    --glass: rgba(22, 27, 34, 0.88);\n    --glass-border: rgba(255, 255, 255, 0.1);\n    --accent-grad: var(--gradient-27, linear-gradient(125deg, var(--accent), var(--accent2)));\n  }\n}\n\n:root[data-theme=\"dark\"] {\n  --bg: #070a0e;\n  --bg2: #0e1218;\n  --ink: #e9eef5;\n  --muted: #8b98a8;\n  --line: rgba(255, 255, 255, 0.12);\n  --panel: #161b22;\n  --panel-solid: #161b22;\n  --accent: #3ee8c5;\n  --accent2: #a78bfa;\n  --warm: #ff9f43;\n  --gold: #fbbf24;\n  --shadow: 0 28px 90px rgba(0, 0, 0, 0.55);\n  --bar-bg: rgba(255, 255, 255, 0.08);\n  --glow: color-mix(in oklab, #3ee8c5 20%, transparent);\n  --glass: rgba(22, 27, 34, 0.88);\n  --glass-border: rgba(255, 255, 255, 0.1);\n  --accent-grad: linear-gradient(125deg, var(--accent), var(--accent2));\n}\n\n:root[data-theme=\"light\"] {\n  --bg: #f4f1ea;\n  --bg2: #e8e2d6;\n  --ink: #141a1f;\n  --muted: #5c6670;\n  --line: #d4cdc2;\n  --panel: #fffcf7;\n  --panel-solid: #fffcf7;\n  --accent: #0f6b5c;\n  --accent2: #5b4fc7;\n  --warm: #c45c2a;\n  --gold: #b8860b;\n  --shadow: 0 18px 50px rgba(20, 26, 31, 0.08);\n  --bar-bg: #e5dfd4;\n  --glow: color-mix(in oklab, #0f6b5c 18%, transparent);\n  --glass: rgba(255, 252, 247, 0.82);\n  --glass-border: rgba(20, 26, 31, 0.1);\n  --accent-grad: linear-gradient(125deg, var(--accent), var(--accent2));\n}\n\n\n/* 01-kca-base.css */\n/* kca \uB9AC\uC14B\u00B7\uD0C0\uC774\uD3EC\u00B7\uBAA8\uC158 */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  overflow-x: clip;\n  max-width: 100%;\n}\n\nbody {\n  margin: 0;\n  overflow-x: clip;\n  max-width: 100%;\n  background:\n    radial-gradient(1200px 600px at 8% -12%, var(--glow), transparent 58%),\n    radial-gradient(900px 480px at 96% 0%, color-mix(in oklab, var(--accent2) 14%, transparent), transparent 48%),\n    linear-gradient(180deg, var(--bg), var(--bg2));\n  color: var(--ink);\n  font-family: var(--kca-font-sans);\n  font-size: var(--font-size-1);\n  line-height: var(--font-lineheight-3);\n  transition:\n    background 0.28s var(--ease-out),\n    color 0.2s var(--ease-out);\n}\n\n.skip-link {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.skip-link:focus {\n  position: fixed;\n  left: var(--size-3);\n  top: var(--size-3);\n  width: auto;\n  height: auto;\n  margin: 0;\n  clip: auto;\n  z-index: 10000;\n  padding: var(--size-2) var(--size-3);\n  border-radius: var(--radius-2);\n  background: var(--accent);\n  color: var(--gray-0);\n  font-weight: var(--font-weight-8);\n  font-size: var(--font-size-0);\n  box-shadow: var(--shadow-3);\n}\n\nmain {\n  margin: 0 auto;\n  overflow-x: clip;\n  max-width: 100%;\n}\n\nh1 {\n  margin: 0;\n  font-size: clamp(var(--font-size-5), 4.2vw, var(--font-size-8));\n  line-height: var(--font-lineheight-00);\n  letter-spacing: var(--font-letterspacing-0);\n  font-weight: var(--font-weight-8);\n}\n\nh2 {\n  margin: 0 0 var(--size-2);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-weight-7);\n  letter-spacing: var(--font-letterspacing-0);\n}\n\na {\n  color: var(--accent);\n}\n\n@keyframes kca-fade-up {\n  from {\n    opacity: 0;\n    transform: translateY(var(--size-3));\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes kca-ring-in {\n  from {\n    transform: scale(0.92);\n    opacity: 0.75;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n.anim-enter {\n  animation: kca-fade-up 0.52s var(--ease-out) forwards;\n  opacity: 0;\n  animation-delay: var(--enter-delay, 0s);\n}\n\n.rh-wrap.anim-ring {\n  animation: kca-ring-in 0.65s var(--ease-out) forwards;\n}\n\n.anim-enter:target {\n  opacity: 1 !important;\n  transform: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n  .anim-enter,\n  .rh-wrap.anim-ring {\n    animation: none !important;\n    opacity: 1 !important;\n    transform: none !important;\n  }\n}\n\n\n/* 02-kca-components.css */\n    .card {\n      background: var(--panel);\n      border: 1px solid var(--line);\n      border-radius: var(--radius-card);\n      padding: 18px 20px;\n      box-shadow: var(--shadow);\n      transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.2s ease;\n    }\n    .card:hover {\n      border-color: var(--accent);\n      box-shadow: 0 22px 56px rgba(20, 26, 31, 0.11);\n      transform: translateY(-2px);\n    }\n    :root[data-theme=\"dark\"] .card:hover {\n      box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);\n    }\n    .fact-hero-strip {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 10px;\n      margin: 0 0 14px;\n    }\n    @media (max-width: 560px) { .fact-hero-strip { grid-template-columns: 1fr; } }\n    .fact-hero-cell {\n      padding: 12px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: linear-gradient(145deg, rgba(15, 107, 92, 0.08), transparent);\n    }\n    .fact-hero-cell b {\n      display: block;\n      font-size: 11px;\n      font-weight: 750;\n      color: var(--muted);\n      margin-bottom: 4px;\n      letter-spacing: 0.02em;\n    }\n    .fact-hero-cell span {\n      font-size: clamp(22px, 4vw, 28px);\n      font-weight: 900;\n      letter-spacing: -0.03em;\n      font-variant-numeric: tabular-nums;\n      color: var(--ink);\n    }\n    .glossary {\n      margin-top: 18px;\n      padding: 14px 16px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      font-size: 13px;\n      line-height: 1.55;\n      color: var(--muted);\n    }\n    .glossary > summary {\n      cursor: pointer;\n      font-weight: 800;\n      color: var(--ink);\n      list-style: none;\n    }\n    .glossary > summary::-webkit-details-marker { display: none; }\n    .glossary dl { margin: 12px 0 0; display: grid; gap: 10px; }\n    .glossary dt { font-weight: 750; color: var(--ink); font-size: 12px; }\n    .glossary dd { margin: 2px 0 0; padding: 0; font-size: 12px; }\n    .chart-stack { display: flex; flex-direction: column; gap: 14px; }\n\n.toolbar {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 10px;\n      margin-bottom: 18px;\n      padding: 10px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      box-shadow: var(--shadow);\n    }\n.toolbar-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 4px; }\n    .theme-btn {\n      font: inherit;\n      font-size: 12px;\n      font-weight: 650;\n      padding: 7px 12px;\n      border-radius: 999px;\n      border: 1px solid var(--line);\n      background: transparent;\n      color: var(--ink);\n      cursor: pointer;\n    }\n    .theme-btn:hover { border-color: var(--accent); color: var(--accent); }\n    .hero { display: grid; gap: 20px; grid-template-columns: 1.35fr 1fr; align-items: stretch; padding-bottom: 28px; }\n    h1 { margin: 0; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }\n    .room-title {\n      margin: 10px 0 0;\n      font-size: clamp(18px, 2.8vw, 26px);\n      line-height: 1.25;\n      font-weight: 750;\n      letter-spacing: -0.02em;\n      color: var(--accent);\n      word-break: break-word;\n    }\n    .sub { margin: 12px 0 0; color: var(--muted); line-height: 1.65; font-size: 15px; max-width: 52ch; }\n    .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }\n    .badge { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }\n    .side-card { display: flex; flex-direction: column; gap: 10px; justify-content: center; }\n    .side-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }\n    .side-card strong { color: var(--ink); }\n    h2 { margin: 0 0 12px; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }\n    .grid { display: grid; gap: 14px; }\n    .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n    .three { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n    .highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }\n    .highlights li { padding: 12px 14px; border-radius: 10px; background: linear-gradient(120deg, rgba(15,107,92,0.08), rgba(196,92,42,0.06)); border: 1px solid rgba(15,107,92,0.15); font-size: 14px; line-height: 1.55; }\n    .highlights strong { color: var(--accent); font-weight: 750; }\n    .bars { display: grid; gap: 8px; }\n    .bar-row { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 2.2fr) 52px; gap: 10px; align-items: center; min-height: 22px; }\n    .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }\n    .bar-track { height: 9px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; }\n    .bar-fill {\n      display: block;\n      height: 100%;\n      min-width: 2px;\n      background: linear-gradient(90deg, var(--accent), #1a9d87);\n      border-radius: inherit;\n    }\n    .bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }\n    .chart-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }\n    .chart-hint strong { color: var(--ink); font-weight: 700; }\n    .calendar {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));\n      gap: 5px;\n      width: 100%;\n      box-sizing: border-box;\n    }\n    .day {\n      border-radius: 8px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 2px;\n      min-width: 0;\n      aspect-ratio: 1;\n      padding: 4px 2px;\n      font-weight: 650;\n      border: 1px solid var(--line);\n    }\n    .day-k { font-size: 9px; line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; }\n    .day-n { font-size: 11px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }\n    .day-burst { box-shadow: inset 0 0 0 2px #e85d04; position: relative; }\n    .pace-ribbon {\n      display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;\n      margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;\n      background: linear-gradient(120deg, rgba(232,93,4,0.1), rgba(15,107,92,0.08));\n      border: 1px solid rgba(232,93,4,0.22);\n    }\n    .pace-ribbon strong { font-size: 15px; font-weight: 800; }\n    .pace-ribbon span { font-size: 13px; color: var(--muted); line-height: 1.45; }\n    .arc-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }\n    .arc-chip {\n      flex: 1 1 140px; min-width: 120px; padding: 10px 12px; border-radius: 10px;\n      background: var(--panel); border: 1px solid var(--line);\n    }\n    .arc-chip b { display: block; font-size: 18px; font-weight: 850; color: var(--accent); }\n    .arc-chip small { font-size: 11px; color: var(--muted); }\n    .pulse-mini { margin-top: 12px; }\n    .pulse-mini h4 { margin: 0 0 6px; font-size: 12px; font-weight: 750; color: var(--muted); }\n    .pulse-row { display: flex; align-items: flex-end; gap: 3px; height: 52px; overflow-x: auto; padding-bottom: 4px; }\n    .pulse-bar {\n      flex: 0 0 10px; min-height: 4px; border-radius: 3px 3px 1px 1px;\n      background: linear-gradient(180deg, #ea580c 55%, #0f6b5c 100%);\n      opacity: 0.85;\n    }\n    .hours-wrap { display: flex; flex-direction: column; gap: 8px; }\n    .hours-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n    @media (max-width: 560px) { .hours-split { grid-template-columns: 1fr; } }\n    .hours-half { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n    .hours-band {\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: 0.04em;\n      padding: 4px 8px;\n      border-radius: 6px;\n      text-align: center;\n    }\n    .hours-band-am { color: #0c4a6e; background: rgba(8, 145, 178, 0.14); }\n    .hours-band-pm { color: #9a3412; background: rgba(234, 88, 12, 0.14); }\n    :root[data-theme=\"dark\"] .hours-band-am { color: #7dd3fc; background: rgba(8, 145, 178, 0.22); }\n    :root[data-theme=\"dark\"] .hours-band-pm { color: #fdba74; background: rgba(234, 88, 12, 0.2); }\n    .hours-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; height: 120px; }\n    .hour {\n      min-width: 0;\n      width: 100%;\n      align-self: end;\n      border-radius: 4px 4px 0 0;\n    }\n    .hour-am { background: linear-gradient(180deg, #22d3ee, #0891b2); }\n    .hour-pm { background: linear-gradient(180deg, #fb923c, #ea580c); }\n    .hours-labels {\n      display: grid;\n      grid-template-columns: repeat(12, minmax(0, 1fr));\n      gap: 2px;\n      font-size: 9px;\n      line-height: 1.15;\n      color: var(--muted);\n      text-align: center;\n      font-variant-numeric: tabular-nums;\n    }\n    .hours-labels span { min-width: 0; }\n    .table { width: 100%; border-collapse: collapse; font-size: 13px; }\n    .table-rank { width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; table-layout: fixed; }\n    .table-rank thead th {\n      color: var(--muted);\n      font-weight: 700;\n      font-size: 11px;\n      padding: 10px 8px;\n      background: var(--bar-bg);\n      border-bottom: 2px solid var(--line);\n    }\n    .table-rank tbody tr { border-bottom: 1px solid var(--line); }\n    .table-rank tbody tr:last-child { border-bottom: none; }\n    .table-rank tbody tr:nth-child(even) { background: rgba(15, 107, 92, 0.04); }\n    :root[data-theme=\"dark\"] .table-rank tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }\n    .table-rank td { padding: 10px 8px; }\n    .table-rank td:first-child { font-weight: 700; color: var(--ink); }\n    .table th, .table td { text-align: left; border-bottom: 1px solid var(--line); padding: 9px 6px; }\n    .table th { color: var(--muted); font-weight: 650; font-size: 11px; text-transform: none; }\n    .table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n    .kw-note {\n      margin: 0 0 10px;\n      padding: 10px 12px;\n      border-radius: 8px;\n      border: 1px solid var(--line);\n      background: rgba(15, 107, 92, 0.06);\n      font-size: 12px;\n      line-height: 1.55;\n      color: var(--muted);\n    }\n    .topic-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      gap: 12px;\n      margin-top: 12px;\n    }\n    .topic-card {\n      border: 1px solid var(--line);\n      border-radius: 12px;\n      padding: 12px 14px;\n      background: var(--bar-bg);\n    }\n    .topic-card header {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 10px;\n      font-size: 14px;\n    }\n    .topic-badge {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      padding: 2px 7px;\n      border-radius: 999px;\n    }\n    .topic-badge.theme { background: rgba(15, 107, 92, 0.15); color: var(--accent); }\n    .topic-badge.period { background: rgba(196, 92, 42, 0.15); color: var(--warm); }\n    .topic-pct { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }\n    .topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n    .topic-chip {\n      font-size: 12px;\n      padding: 4px 9px;\n      border-radius: 999px;\n      border: 1px solid var(--line);\n      background: rgba(255, 255, 255, 0.5);\n      color: var(--ink);\n    }\n    :root[data-theme=\"dark\"] .topic-chip { background: rgba(255, 255, 255, 0.06); }\n    .self-serve {\n      margin-top: 14px;\n      border: 1px dashed rgba(15, 107, 92, 0.38);\n      border-radius: 12px;\n      padding: 16px 18px;\n      background: linear-gradient(135deg, rgba(15, 107, 92, 0.06), rgba(196, 92, 42, 0.04));\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--muted);\n    }\n    .self-serve h2 { margin: 0 0 10px; font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.02em; }\n    .self-serve p { margin: 0 0 8px; }\n    .self-serve ol { margin: 0 0 10px; padding-left: 1.25rem; }\n    .self-serve li { margin: 4px 0; }\n    .self-serve code { font-size: 11.5px; background: var(--bar-bg); padding: 1px 5px; border-radius: 4px; color: var(--ink); }\n    .self-serve .cmd {\n      margin: 10px 0 12px;\n      padding: 11px 13px;\n      border-radius: 8px;\n      background: var(--bar-bg);\n      border: 1px solid var(--line);\n      font-family: ui-monospace, \"Cascadia Code\", \"Consolas\", monospace;\n      font-size: 12px;\n      line-height: 1.45;\n      color: var(--ink);\n      white-space: pre-wrap;\n      overflow-wrap: anywhere;\n      word-break: break-word;\n      max-width: 100%;\n    }\n    .self-serve .links { margin: 10px 0 0; font-size: 12px; }\n    .self-serve .links a { font-weight: 650; }\n    .insight-hero { position: relative; overflow: hidden; }\n    .insight-hero::before {\n      content: \"\";\n      position: absolute;\n      inset: -40% 40% auto -20%;\n      height: 120%;\n      background: radial-gradient(closest-side, var(--glow), transparent 70%);\n      pointer-events: none;\n    }\n    .insight-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }\n    .insight-lede { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 62ch; }\n    .insight-grid {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 10px;\n      margin-top: 18px;\n      position: relative;\n      z-index: 1;\n    }\n    @media (min-width: 1080px) {\n      .insight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n    }\n    @media (max-width: 720px) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n    .ins-metric {\n      padding: 12px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: linear-gradient(145deg, rgba(255,255,255,0.04), transparent);\n    }\n    .ins-m-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }\n    .ins-m-val { font-size: 22px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }\n    .ins-m-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }\n    .insight-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; position: relative; z-index: 1; }\n    @media (max-width: 900px) { .insight-split { grid-template-columns: 1fr; } }\n    .insight-sub { margin: 0 0 6px; font-size: 14px; font-weight: 750; color: var(--ink); }\n    .daypart-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }\n    .dp-seg { min-width: 2px; height: 100%; transition: opacity 0.2s; }\n    .dp-seg:hover { opacity: 0.85; }\n    .daypart-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; color: var(--muted); }\n    .daypart-legend li { display: flex; align-items: center; gap: 6px; }\n    .daypart-legend i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }\n    .rh-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }\n    .rh-ring {\n      width: 108px;\n      height: 108px;\n      border-radius: 50%;\n      background: conic-gradient(from -90deg, var(--accent) calc(var(--p) * 1%), var(--bar-bg) 0);\n      display: grid;\n      place-items: center;\n      box-shadow: 0 0 0 1px var(--line) inset;\n    }\n    .rh-ring span {\n      width: 74px;\n      height: 74px;\n      border-radius: 50%;\n      background: var(--panel);\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\n      border: 1px solid var(--line);\n    }\n    .rh-cap {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n      font-size: 11px;\n      color: var(--muted);\n      font-weight: 700;\n    }\n    .rh-cap span { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -0.04em; }\n    .rh-cap small { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 1px; }\n    .sc-plot {\n      position: relative;\n      width: 100%;\n      max-width: 100%;\n      margin-top: 4px;\n      padding: 32px 8px 36px 8px;\n      border-radius: 14px;\n      border: 1px solid var(--line);\n      background-color: var(--panel);\n      background-image:\n        linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),\n        linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);\n      background-size: 25% 25%;\n      overflow: hidden;\n    }\n    @media (min-width: 560px) {\n      .sc-plot {\n        aspect-ratio: 5 / 4;\n        min-height: 240px;\n        max-height: 380px;\n        padding: 28px 12px 40px 12px;\n      }\n    }\n    .sc-grid-label {\n      position: absolute;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--muted);\n      letter-spacing: 0.02em;\n      pointer-events: none;\n      line-height: 1.2;\n    }\n    .sc-lbl-top { left: 50%; top: 6px; transform: translateX(-50%); }\n    .sc-lbl-bottom { left: 50%; bottom: 8px; transform: translateX(-50%); }\n    .sc-lbl-left { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }\n    .sc-lbl-right { right: 6px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }\n    .sc-quadrant {\n      position: absolute;\n      font-size: 9px;\n      font-weight: 650;\n      color: color-mix(in srgb, var(--muted) 75%, transparent);\n      pointer-events: none;\n    }\n    .sc-q-tl { left: 12%; top: 14%; }\n    .sc-q-tr { right: 10%; top: 14%; }\n    .sc-q-bl { left: 12%; bottom: 18%; }\n    .sc-q-br { right: 10%; bottom: 18%; }\n    .bubble-node {\n      position: relative;\n      display: flex;\n      align-items: flex-start;\n      gap: 0;\n      max-width: 100%;\n      z-index: 1;\n    }\n    @media (min-width: 560px) {\n      .bubble-node {\n        position: absolute;\n        transform: translate(-50%, -50%) scale(var(--bubble-scale, 1));\n        max-width: min(34%, 140px);\n      }\n    }\n    .bubble-shape {\n      flex-shrink: 0;\n      width: 10px;\n      height: 10px;\n      margin-top: 12px;\n      background: hsl(var(--bubble-hue, 168) 62% 42%);\n      border-radius: 0 0 0 3px;\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    }\n    @media (min-width: 560px) {\n      .bubble-shape {\n        position: absolute;\n        inset: 0;\n        width: auto;\n        height: auto;\n        margin: 0;\n        clip-path: none;\n        border-radius: 14px 14px 14px 4px;\n        background: hsl(var(--bubble-hue, 168) 48% 94%);\n        border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n        opacity: 0.98;\n        z-index: 0;\n      }\n      :root[data-theme=\"dark\"] .bubble-shape {\n        background: hsl(var(--bubble-hue, 168) 35% 22%);\n        border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n      }\n    }\n    .bubble-content {\n      flex: 1;\n      min-width: 0;\n      padding: 8px 11px;\n      border-radius: 14px;\n      border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n      background: hsl(var(--bubble-hue, 168) 48% 96%);\n      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n    }\n    :root[data-theme=\"dark\"] .bubble-content {\n      background: hsl(var(--bubble-hue, 168) 35% 20%);\n      border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n    }\n    @media (min-width: 560px) {\n      .bubble-content {\n        position: relative;\n        z-index: 1;\n        text-align: center;\n        border: none;\n        background: transparent;\n        box-shadow: none;\n        padding: 6px 8px;\n      }\n    }\n    .bubble-content strong {\n      display: block;\n      font-size: 11px;\n      font-weight: 800;\n      color: var(--ink);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .bubble-content .bubble-pct {\n      display: block;\n      font-size: 15px;\n      font-weight: 900;\n      letter-spacing: -0.03em;\n      color: hsl(var(--bubble-hue, 168) 55% 32%);\n      font-variant-numeric: tabular-nums;\n    }\n    :root[data-theme=\"dark\"] .bubble-content .bubble-pct {\n      color: hsl(var(--bubble-hue, 168) 70% 72%);\n    }\n    .bubble-content small {\n      display: block;\n      margin-top: 2px;\n      font-size: 9px;\n      color: var(--muted);\n      font-weight: 650;\n    }\n    .sc-plot-list {\n      display: grid;\n      gap: 10px;\n    }\n    @media (min-width: 560px) {\n      .sc-plot-list { display: block; position: absolute; inset: 0; }\n      .sc-plot-list .bubble-node { margin: 0; }\n    }\n    .fact-card { margin-bottom: 14px; padding: 14px 16px; }\n    .fact-card h2 { margin: 0 0 6px; font-size: 15px; }\n    .fact-hint { margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.45; }\n    .fact-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));\n      gap: 5px 7px;\n    }\n    .fact-cell {\n      padding: 5px 7px;\n      border-radius: 8px;\n      border: 1px solid var(--line);\n      background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent);\n      min-height: 42px;\n    }\n    .fact-cell b {\n      display: block;\n      color: var(--muted);\n      font-size: 9px;\n      font-weight: 750;\n      letter-spacing: 0.03em;\n      line-height: 1.15;\n      margin-bottom: 2px;\n    }\n    .fact-cell span {\n      font-weight: 850;\n      font-size: 12.5px;\n      font-variant-numeric: tabular-nums;\n      letter-spacing: -0.02em;\n    }\n    footer { margin-top: 28px; color: var(--muted); font-size: 11px; line-height: 1.5; }\n    @media (max-width: 900px) {\n      .hero, .two, .three { grid-template-columns: 1fr; }\n    }\n\n\n/* 03-kca-story.css */\n#s-wrapped, #s-personas, #s-chapters, #s-calendar { scroll-margin-top: 76px; }\n    .story-headline {\n      margin: 0 0 14px;\n      font-size: clamp(17px, 2.5vw, 21px);\n      line-height: 1.55;\n      font-weight: 650;\n      color: var(--ink);\n      max-width: 48ch;\n    }\n    .wrapped-section { margin-bottom: 20px; }\n    .wrapped-section h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }\n    .wrapped-lede { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }\n    .wrapped-deck {\n      display: grid;\n      gap: 12px;\n      grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));\n      padding: 0;\n    }\n    .wrapped-card {\n      border-radius: 18px;\n      border: 1px solid var(--line);\n      padding: 22px 20px;\n      min-height: 200px;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      background: linear-gradient(155deg, rgba(15, 107, 92, 0.14), rgba(196, 92, 42, 0.08));\n      box-shadow: var(--shadow);\n      position: relative;\n      overflow: hidden;\n    }\n    .wrapped-card::before {\n      content: attr(data-emoji);\n      position: absolute;\n      top: 12px;\n      right: 14px;\n      font-size: 2.4rem;\n      opacity: 0.35;\n      line-height: 1;\n    }\n    .wrapped-card-kicker {\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--muted);\n      margin: 0 0 6px;\n    }\n    .wrapped-card-stat {\n      margin: 0;\n      font-size: clamp(32px, 6vw, 44px);\n      font-weight: 900;\n      letter-spacing: -0.04em;\n      line-height: 1.05;\n      color: var(--ink);\n      word-break: break-word;\n    }\n    .wrapped-card-sub {\n      margin: 10px 0 0;\n      font-size: 13px;\n      line-height: 1.5;\n      color: var(--muted);\n    }\n    .persona-grid {\n      display: grid;\n      gap: 10px;\n      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    }\n    .persona-chip {\n      padding: 12px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n    }\n    .persona-chip strong {\n      display: block;\n      font-size: 14px;\n      color: var(--ink);\n      margin-bottom: 4px;\n    }\n    .persona-chip em {\n      display: block;\n      font-style: normal;\n      font-size: 12px;\n      font-weight: 800;\n      color: var(--accent);\n      margin-bottom: 4px;\n    }\n    .persona-chip span { font-size: 11px; color: var(--muted); line-height: 1.4; }\n    .chapter-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }\n    .chapter-item {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      gap: 10px 14px;\n      align-items: center;\n      padding: 14px 16px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n    }\n    @media (max-width: 560px) {\n      .chapter-item { grid-template-columns: auto 1fr; }\n      .chapter-item .chapter-stat { grid-column: 1 / -1; text-align: left; }\n    }\n    .chapter-badge {\n      font-size: 12px;\n      font-weight: 900;\n      color: var(--accent);\n      min-width: 2.5rem;\n    }\n    .chapter-meta { font-size: 13px; line-height: 1.45; color: var(--ink); }\n    .chapter-meta small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }\n    .chapter-stat { text-align: right; font-size: 13px; font-weight: 750; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n    /* GitHub contribution graph (\uC794\uB514) */\n    :root {\n      --gh-cell-size: 11px;\n      --gh-cell-gap: 3px;\n      --gh-cell-0: #ebedf0;\n      --gh-cell-1: #9be9a8;\n      --gh-cell-2: #40c463;\n      --gh-cell-3: #30a14e;\n      --gh-cell-4: #216e39;\n    }\n    @media (prefers-color-scheme: dark) {\n      :root:not([data-theme=\"light\"]) {\n        --gh-cell-0: #161b22;\n        --gh-cell-1: #0e4429;\n        --gh-cell-2: #006d32;\n        --gh-cell-3: #26a641;\n        --gh-cell-4: #39d353;\n      }\n    }\n    :root[data-theme=\"dark\"] {\n      --gh-cell-0: #161b22;\n      --gh-cell-1: #0e4429;\n      --gh-cell-2: #006d32;\n      --gh-cell-3: #26a641;\n      --gh-cell-4: #39d353;\n    }\n    :root[data-theme=\"light\"] {\n      --gh-cell-0: #ebedf0;\n      --gh-cell-1: #9be9a8;\n      --gh-cell-2: #40c463;\n      --gh-cell-3: #30a14e;\n      --gh-cell-4: #216e39;\n    }\n    .gh-contrib {\n      position: relative;\n      border: 1px solid var(--line);\n      border-radius: 12px;\n      padding: 16px 18px 14px;\n      background: var(--panel);\n    }\n    .gh-cal-tooltip {\n      position: absolute;\n      z-index: 20;\n      transform: translate(-50%, -100%);\n      padding: 6px 10px;\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 650;\n      line-height: 1.35;\n      white-space: nowrap;\n      color: #fff;\n      background: #24292f;\n      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.12s ease;\n    }\n    .gh-contrib.gh-tip-on .gh-cal-tooltip { opacity: 1; }\n    :root[data-theme=\"dark\"] .gh-cal-tooltip {\n      background: #f0f6fc;\n      color: #0d1117;\n    }\n    @media (prefers-color-scheme: dark) {\n      :root:not([data-theme=\"light\"]) .gh-cal-tooltip {\n        background: #f0f6fc;\n        color: #0d1117;\n      }\n    }\n    .gh-contrib-summary {\n      margin: 0 0 12px;\n      font-size: 14px;\n      line-height: 1.4;\n      color: var(--muted);\n    }\n    .gh-contrib-summary strong {\n      font-weight: 600;\n      color: var(--ink);\n      font-variant-numeric: tabular-nums;\n    }\n    .gh-contrib-span {\n      display: block;\n      margin-top: 4px;\n      font-size: 11px;\n      color: var(--muted);\n    }\n    .gh-cal-scroll {\n      overflow-x: auto;\n      overflow-y: hidden;\n      max-width: 100%;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: 2px;\n    }\n    .gh-cal-graph {\n      display: grid;\n      grid-template-areas:\n        \". months\"\n        \"days weeks\";\n      grid-template-columns: max-content max-content;\n      column-gap: 8px;\n      row-gap: 4px;\n      width: max-content;\n      min-width: min(100%, max-content);\n    }\n    .gh-cal-days {\n      grid-area: days;\n      display: grid;\n      grid-template-rows: repeat(7, var(--gh-cell-size));\n      gap: var(--gh-cell-gap);\n      align-items: center;\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      font-size: 9px;\n      line-height: 1;\n      color: var(--muted);\n      padding-right: 2px;\n    }\n    .gh-cal-days span {\n      height: var(--gh-cell-size);\n      display: flex;\n      align-items: center;\n    }\n    .gh-cal-days span:empty { visibility: hidden; }\n    .gh-cal-months {\n      grid-area: months;\n      display: grid;\n      grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n      gap: var(--gh-cell-gap);\n      height: 14px;\n      align-items: end;\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      font-size: 9px;\n      line-height: 1;\n      color: var(--muted);\n    }\n    .gh-cal-month {\n      grid-column: span 1;\n      white-space: nowrap;\n      overflow: visible;\n    }\n    .gh-cal-weeks {\n      grid-area: weeks;\n      display: grid;\n      grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n      grid-template-rows: repeat(7, var(--gh-cell-size));\n      gap: var(--gh-cell-gap);\n      grid-auto-flow: column;\n    }\n    .gh-cal-cell {\n      width: var(--gh-cell-size);\n      height: var(--gh-cell-size);\n      border-radius: 2px;\n      background: var(--gh-cell-0);\n      display: block;\n      padding: 0;\n      margin: 0;\n      appearance: none;\n      font: inherit;\n      cursor: default;\n      transition: transform 0.1s ease, box-shadow 0.1s ease, outline 0.1s ease;\n    }\n    .gh-cal-cell[data-date] {\n      cursor: pointer;\n    }\n    .gh-cal-cell[data-date]:hover,\n    .gh-cal-cell[data-date]:focus-visible {\n      transform: scale(1.45);\n      z-index: 5;\n      position: relative;\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel) 80%, transparent);\n    }\n    .gh-cal-cell[data-level=\"1\"] { background: var(--gh-cell-1); }\n    .gh-cal-cell[data-level=\"2\"] { background: var(--gh-cell-2); }\n    .gh-cal-cell[data-level=\"3\"] { background: var(--gh-cell-3); }\n    .gh-cal-cell[data-level=\"4\"] { background: var(--gh-cell-4); }\n    .gh-cal-cell[data-level=\"0\"] { background: var(--gh-cell-0); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }\n    .gh-cal-cell--pad {\n      pointer-events: none;\n      border: none;\n    }\n    .gh-cal-legend {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 4px;\n      margin-top: 12px;\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      font-size: 11px;\n      color: var(--muted);\n    }\n    .gh-cal-legend-scale {\n      display: inline-flex;\n      gap: var(--gh-cell-gap);\n      align-items: center;\n      margin: 0 2px;\n    }\n    .gh-cal-legend-scale i {\n      width: var(--gh-cell-size);\n      height: var(--gh-cell-size);\n      border-radius: 2px;\n      display: block;\n      font-style: normal;\n      background: var(--gh-cell-0);\n    }\n    .gh-cal-legend-scale i[data-level=\"1\"] { background: var(--gh-cell-1); }\n    .gh-cal-legend-scale i[data-level=\"2\"] { background: var(--gh-cell-2); }\n    .gh-cal-legend-scale i[data-level=\"3\"] { background: var(--gh-cell-3); }\n    .gh-cal-legend-scale i[data-level=\"4\"] { background: var(--gh-cell-4); }\n\n\n/* 04-kca-charts.css */\n.viz-hero {\n      margin: 0 0 18px;\n      padding: 20px 22px;\n      border-radius: 20px;\n      border: 1px solid var(--glass-border);\n      background: var(--glass);\n      backdrop-filter: blur(14px);\n      -webkit-backdrop-filter: blur(14px);\n      box-shadow: var(--shadow);\n    }\n    .viz-hero h2 {\n      margin: 0 0 6px;\n      font-size: 22px;\n      font-weight: 850;\n      letter-spacing: -0.03em;\n      background: var(--accent-grad);\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n    }\n    .viz-hero p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }\n    .viz-grid {\n      display: grid;\n      gap: 14px;\n      grid-template-columns: repeat(12, 1fr);\n    }\n    .viz-card {\n      grid-column: span 12;\n      container-type: inline-size;\n      container-name: kca-viz;\n      border-radius: 18px;\n      border: 1px solid var(--glass-border);\n      background: var(--glass);\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      padding: 16px 16px 12px;\n      box-shadow: var(--shadow);\n    }\n    @media (min-width: 900px) {\n      .viz-card.span-6 { grid-column: span 6; }\n      .viz-card.span-8 { grid-column: span 8; }\n      .viz-card.span-4 { grid-column: span 4; }\n    }\n    .viz-card h3 {\n      margin: 0 0 4px;\n      font-size: 15px;\n      font-weight: 800;\n      letter-spacing: -0.02em;\n    }\n    .viz-card .viz-hint {\n      margin: 0 0 10px;\n      font-size: 11px;\n      color: var(--muted);\n      line-height: 1.45;\n    }\n    .chart-box {\n      width: 100%;\n      min-height: 280px;\n      height: min(42vh, 360px);\n    }\n    .chart-box.tall { height: min(52vh, 440px); min-height: 320px; }\n    .chart-box.compact { height: 240px; min-height: 220px; }\n    .kw-table-wrap {\n      max-height: 520px;\n      overflow: auto;\n      border: 1px solid var(--line);\n      border-radius: 12px;\n    }\n    .kw-table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 12px;\n    }\n    .kw-table thead th {\n      position: sticky;\n      top: 0;\n      z-index: 1;\n      background: var(--panel-solid);\n      text-align: left;\n      padding: 8px 10px;\n      font-size: 11px;\n      color: var(--muted);\n      border-bottom: 1px solid var(--line);\n    }\n    .kw-table td {\n      padding: 7px 10px;\n      border-bottom: 1px solid var(--line);\n    }\n    .kw-table tbody tr:nth-child(even) { background: rgba(94, 234, 212, 0.04); }\n    .kw-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }\n    .kw-rank { color: var(--muted); width: 2.5rem; }\n\n\n/* 05-kca-ux.css */\n/* \uC139\uC158 \uB124\uBE44 \u2014 \uB9AC\uD329\uD130 \uC2DC \uC0AD\uC81C\uB410\uB358 \uAE30\uBCF8 \uADDC\uCE59 \uBCF5\uAD6C */\n.deck-nav {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px 10px;\n  margin-bottom: 0;\n  padding: 10px 12px;\n  border-radius: 0;\n  border: none;\n  background: transparent;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: none;\n}\n\n.deck-nav-h {\n  font-size: 11px;\n  font-weight: 800;\n  color: var(--muted);\n  margin-right: 4px;\n  letter-spacing: 0.04em;\n  flex: 0 0 auto;\n}\n\n.deck-nav a {\n  font-size: 12px;\n  font-weight: 700;\n  padding: 6px 11px;\n  border-radius: var(--radius-pill);\n  border: 1px solid var(--line);\n  background: var(--panel-solid);\n  color: var(--ink);\n  text-decoration: none;\n  transition:\n    transform 0.18s var(--ease-out),\n    border-color 0.18s var(--ease-out),\n    background 0.18s var(--ease-out);\n}\n\n.deck-nav a:hover {\n  border-color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));\n  color: var(--accent);\n  transform: translateY(-1px);\n}\n\n.kca-topbar {\n      position: sticky;\n      top: 0;\n      z-index: 40;\n      margin-bottom: 16px;\n      border-radius: 14px;\n      border: 1px solid var(--line);\n      background: var(--glass);\n      backdrop-filter: blur(14px);\n      -webkit-backdrop-filter: blur(14px);\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);\n      overflow: hidden;\n    }\n    .kca-progress {\n      height: 3px;\n      background: var(--line);\n    }\n    .kca-progress-fill {\n      display: block;\n      height: 100%;\n      width: 0%;\n      background: var(--accent-grad);\n      transition: width 0.12s ease-out;\n    }\n    .kca-topbar .toolbar {\n      margin: 0;\n      border: none;\n      border-radius: 0;\n      box-shadow: none;\n      border-bottom: 1px solid var(--line);\n    }\n    .deck-nav-shell > summary {\n      display: none;\n      cursor: pointer;\n      padding: 10px 14px;\n      font-size: 13px;\n      font-weight: 800;\n      color: var(--ink);\n      list-style: none;\n      border-bottom: 1px solid var(--line);\n    }\n    .deck-nav-shell > summary::-webkit-details-marker { display: none; }\n    .deck-nav-shell > summary::after {\n      content: \"\u25BE\";\n      float: right;\n      color: var(--muted);\n      font-size: 11px;\n    }\n    .deck-nav-shell:not([open]) > summary::after { content: \"\u25B8\"; }\n    .deck-nav-shell .deck-nav {\n      margin: 0;\n      border: none;\n      border-radius: 0;\n      box-shadow: none;\n      position: static;\n    }\n    .deck-nav a.is-active {\n      border-color: var(--accent);\n      background: color-mix(in srgb, var(--accent) 14%, transparent);\n      color: var(--accent);\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);\n    }\n    .theme-btn.is-active {\n      border-color: var(--accent);\n      background: color-mix(in srgb, var(--accent) 12%, transparent);\n      color: var(--accent);\n      font-weight: 800;\n    }\n    .hero-jumps {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      margin-top: 14px;\n    }\n    .hero-jump {\n      font-size: 12px;\n      font-weight: 750;\n      padding: 7px 12px;\n      border-radius: 999px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      color: var(--ink);\n      text-decoration: none;\n      transition: border-color 0.15s ease, transform 0.15s ease;\n    }\n    .hero-jump:hover {\n      border-color: var(--accent);\n      transform: translateY(-1px);\n    }\n    .hero-jump strong { color: var(--accent); font-weight: 850; }\n    .kca-back-top {\n      position: fixed;\n      right: max(16px, env(safe-area-inset-right));\n      bottom: max(16px, env(safe-area-inset-bottom));\n      z-index: 50;\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid var(--line);\n      background: var(--panel-solid);\n      color: var(--accent);\n      font-size: 18px;\n      font-weight: 900;\n      cursor: pointer;\n      box-shadow: var(--shadow);\n      transition: opacity 0.2s ease, transform 0.2s ease;\n    }\n    .kca-back-top:not([hidden]):hover { transform: translateY(-2px); border-color: var(--accent); }\n    .kca-back-top[hidden] { display: none; }\n    .kw-css-fold {\n      margin-bottom: 14px;\n      border-radius: 14px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      overflow: hidden;\n    }\n    .kw-css-fold > summary {\n      cursor: pointer;\n      padding: 12px 16px;\n      font-size: 13px;\n      font-weight: 800;\n      color: var(--ink);\n      list-style: none;\n    }\n    .kw-css-fold > summary::-webkit-details-marker { display: none; }\n    .kw-css-fold > summary small {\n      display: block;\n      margin-top: 4px;\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--muted);\n    }\n    .kw-css-fold .kw-css-body { padding: 0 16px 16px; }\n    @media (max-width: 720px) {\n      .deck-nav-shell > summary { display: block; }\n      .deck-nav-shell:not([open]) .deck-nav { display: none; }\n      .deck-nav-shell .deck-nav {\n        max-height: min(42vh, 280px);\n        overflow-y: auto;\n        overscroll-behavior: contain;\n      }\n      main { width: min(1200px, calc(100% - 20px)); padding: 20px 0 48px; }\n    }\n    @media (hover: none) {\n      .card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }\n    }\n    /* scroll-margin: 06-kca-responsive.css --kca-topbar-offset */\n\n\n/* 06-kca-responsive.css */\n/* kca \uBC18\uC751\uD615 \u2014 \uBAA8\uBC14\uC77C \u00B7 \uD0DC\uBE14\uB9BF \u00B7 \uB370\uC2A4\uD06C\uD1B1 \u00B7 4K + \uCEE8\uD14C\uC774\uB108 \uCFFC\uB9AC */\n:root {\n  --kca-content-max: 72rem;\n  --kca-gutter: clamp(12px, 2.8vw, 28px);\n  --kca-topbar-offset: 112px;\n  --kca-section-gap: clamp(14px, 2vw, 22px);\n}\n\n@media (min-width: 600px) {\n  :root {\n    --kca-topbar-offset: 104px;\n  }\n}\n\n@media (min-width: 1024px) {\n  :root {\n    --kca-content-max: 80rem;\n    --kca-topbar-offset: 92px;\n  }\n}\n\n@media (min-width: 1440px) {\n  :root {\n    --kca-content-max: 84rem;\n  }\n}\n\n@media (min-width: 1920px) {\n  :root {\n    --kca-content-max: 92rem;\n    --kca-gutter: clamp(20px, 2vw, 40px);\n    --kca-section-gap: 24px;\n  }\n}\n\n@media (min-width: 2560px) {\n  :root {\n    --kca-content-max: 100rem;\n  }\n}\n\nmain {\n  width: min(var(--kca-content-max), calc(100% - var(--kca-gutter) * 2));\n  padding-block: clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px);\n}\n\n#s-story,\n#s-wrapped,\n#s-personas,\n#s-chapters,\n#s-calendar,\n#s-facts,\n#s-hl,\n#s-ai,\n#s-topics,\n#s-viz,\n#s-charts,\n#s-help {\n  scroll-margin-top: var(--kca-topbar-offset);\n}\n\n.report-section {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 520px;\n}\n\n.kca-topbar,\n#s-story,\n#s-wrapped {\n  content-visibility: visible;\n}\n\n/* \u2500\u2500 \uCEE8\uD14C\uC774\uB108 \uCFFC\uB9AC: \uCC28\uD2B8 \uCE74\uB4DC \u2500\u2500 */\n.viz-card {\n  container-type: inline-size;\n  container-name: kca-viz;\n}\n\n@container kca-viz (max-width: 22rem) {\n  .chart-box {\n    height: min(36vh, 260px);\n    min-height: 200px;\n  }\n  .chart-box.tall {\n    height: min(42vh, 300px);\n    min-height: 220px;\n  }\n  .viz-card h3 {\n    font-size: 14px;\n  }\n}\n\n@container kca-viz (min-width: 22rem) {\n  .chart-box.compact {\n    height: min(32vh, 280px);\n  }\n}\n\n/* \u2500\u2500 \uBAA8\uBC14\uC77C (\u2264599px) \u2500\u2500 */\n@media (max-width: 599px) {\n  .hero {\n    grid-template-columns: 1fr;\n    gap: 16px;\n    padding-bottom: 20px;\n  }\n\n  .hero-jumps {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .hero-jump {\n    text-align: center;\n    justify-content: center;\n  }\n\n  .badge-row {\n    gap: 6px;\n  }\n\n  .badge {\n    font-size: 11px;\n    padding: 5px 8px;\n  }\n\n  .fact-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 6px;\n  }\n\n  .fact-cell b {\n    font-size: 8px;\n  }\n\n  .fact-cell span {\n    font-size: 11px;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: 1fr;\n  }\n\n  .wrapped-card {\n    min-height: 168px;\n    padding: 18px 16px;\n  }\n\n  .wrapped-card-stat {\n    font-size: clamp(28px, 10vw, 36px);\n  }\n\n  .chart-box {\n    height: 240px;\n    min-height: 200px;\n  }\n\n  .chart-box.tall {\n    height: min(44vh, 300px);\n    min-height: 220px;\n  }\n\n  .viz-hero {\n    padding: 16px;\n  }\n\n  .viz-hero h2 {\n    font-size: 18px;\n  }\n\n  .bar-row {\n    grid-template-columns: minmax(56px, 0.9fr) minmax(0, 2fr) 44px;\n    gap: 6px;\n  }\n\n  .deck-nav a {\n    font-size: 11px;\n    padding: 5px 9px;\n  }\n\n  .deck-nav-h {\n    width: 100%;\n    margin-bottom: 2px;\n  }\n}\n\n/* \u2500\u2500 \uD0DC\uBE14\uB9BF (600\u20131023px) \u2500\u2500 */\n@media (min-width: 600px) and (max-width: 1023px) {\n  .hero {\n    grid-template-columns: 1fr;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .fact-grid {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .insight-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .two {\n    grid-template-columns: 1fr;\n  }\n\n  .three {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .chart-box {\n    height: min(40vh, 320px);\n  }\n}\n\n/* \u2500\u2500 \uB370\uC2A4\uD06C\uD1B1 (1024\u20131919px) \u2500\u2500 */\n@media (min-width: 1024px) {\n  .hero {\n    grid-template-columns: 1.35fr 1fr;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  }\n\n  .fact-grid {\n    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));\n  }\n}\n\n/* \u2500\u2500 4K / \uC6B8\uD2B8\uB77C\uC640\uC774\uB4DC (\u22651920px) \u2500\u2500 */\n@media (min-width: 1920px) {\n  h1 {\n    font-size: clamp(2.25rem, 1.6vw + 1rem, 3.25rem);\n  }\n\n  .room-title {\n    font-size: clamp(1.25rem, 0.8vw + 0.75rem, 1.75rem);\n  }\n\n  .story-headline {\n    font-size: clamp(1.1rem, 0.5vw + 0.85rem, 1.35rem);\n    max-width: 56ch;\n  }\n\n  .viz-grid {\n    gap: 18px;\n  }\n\n  .viz-card {\n    padding: 18px 20px 14px;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n    gap: 16px;\n  }\n\n  .wrapped-card-stat {\n    font-size: clamp(36px, 3vw, 48px);\n  }\n\n  .card {\n    padding: 20px 24px;\n  }\n\n  .deck-nav a {\n    font-size: 13px;\n    padding: 7px 13px;\n  }\n}\n\n/* \uC2A4\uD06C\uB864 \uC9C4\uC785 \uBAA8\uC158 (\uC811\uADFC\uC131: reduced-motion \uC2DC UX \uC2A4\uD06C\uB9BD\uD2B8\uAC00 \uBE44\uD65C\uC131) */\n@media (prefers-reduced-motion: no-preference) {\n  .kca-reveal {\n    opacity: 0;\n    transform: translateY(14px);\n    transition:\n      opacity 0.55s var(--ease-out),\n      transform 0.55s var(--ease-out);\n    transition-delay: var(--reveal-delay, 0ms);\n  }\n\n  .kca-reveal.is-inview {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n/* \uBAA8\uBC14\uC77C \uB9D0\uD48D\uC120 \uB9F5 \u2014 \uB7AD\uD0B9 \uB9AC\uC2A4\uD2B8 */\n@media (max-width: 559px) {\n  .sc-plot {\n    padding: 12px 10px 14px;\n    background-image: none;\n    min-height: 0;\n  }\n\n  .sc-grid-label,\n  .sc-quadrant {\n    display: none;\n  }\n\n  .sc-plot-list {\n    gap: 8px;\n  }\n\n  .bubble-node {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    border-radius: 12px;\n    border: 1px solid var(--line);\n    background: var(--panel-solid);\n  }\n\n  .bubble-shape {\n    display: none;\n  }\n\n  .bubble-content {\n    display: contents;\n  }\n\n  .bubble-content strong {\n    grid-column: 1;\n    white-space: normal;\n    font-size: 12px;\n  }\n\n  .bubble-content .bubble-pct {\n    grid-column: 2;\n    grid-row: 1 / span 2;\n    font-size: 18px;\n    text-align: right;\n  }\n\n  .bubble-content small {\n    grid-column: 1;\n    font-size: 10px;\n  }\n}\n\n/* \uD130\uCE58 \uD0C0\uAE43 */\n@media (hover: none) and (pointer: coarse) {\n  .theme-btn,\n  .deck-nav a,\n  .hero-jump {\n    min-height: 44px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .gh-cal-cell {\n    min-width: 44px;\n    min-height: 44px;\n  }\n}\n\n";
+export declare const REPORT_STYLES = "/* open-props \u2014 https://open-props.style/ (MIT) */\n:where(html){--font-system-ui:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-transitional:Charter,Bitstream Charter,Sitka Text,Cambria,serif;--font-old-style:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;--font-humanist:Seravek,Gill Sans Nova,Ubuntu,Calibri,DejaVu Sans,source-sans-pro,sans-serif;--font-geometric-humanist:Avenir,Montserrat,Corbel,URW Gothic,source-sans-pro,sans-serif;--font-classical-humanist:Optima,Candara,Noto Sans,source-sans-pro,sans-serif;--font-neo-grotesque:Inter,Roboto,Helvetica Neue,Arial Nova,Nimbus Sans,Arial,sans-serif;--font-monospace-slab-serif:Nimbus Mono PS,Courier New,monospace;--font-monospace-code:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace;--font-industrial:Bahnschrift,DIN Alternate,Franklin Gothic Medium,Nimbus Sans Narrow,sans-serif-condensed,sans-serif;--font-rounded-sans:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;--font-slab-serif:Rockwell,Rockwell Nova,Roboto Slab,DejaVu Serif,Sitka Small,serif;--font-antique:Superclarendon,Bookman Old Style,URW Bookman,URW Bookman L,Georgia Pro,Georgia,serif;--font-didone:Didot,Bodoni MT,Noto Serif Display,URW Palladio L,P052,Sylfaen,serif;--font-handwritten:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive;--font-sans:var(--font-system-ui);--font-serif:ui-serif,serif;--font-mono:var(--font-monospace-code);--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-lineheight-00:.95;--font-lineheight-0:1.1;--font-lineheight-1:1.25;--font-lineheight-2:1.375;--font-lineheight-3:1.5;--font-lineheight-4:1.75;--font-lineheight-5:2;--font-letterspacing-0:-.05em;--font-letterspacing-1:.025em;--font-letterspacing-2:.050em;--font-letterspacing-3:.075em;--font-letterspacing-4:.150em;--font-letterspacing-5:.500em;--font-letterspacing-6:.750em;--font-letterspacing-7:1em;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:max(.75rem,min(2vw,1rem));--font-size-fluid-1:max(1rem,min(4vw,1.5rem));--font-size-fluid-2:max(1.5rem,min(6vw,2.5rem));--font-size-fluid-3:max(2rem,min(9vw,3.5rem));--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-px-000:-8px;--size-px-00:-4px;--size-px-1:4px;--size-px-2:8px;--size-px-3:16px;--size-px-4:20px;--size-px-5:24px;--size-px-6:28px;--size-px-7:32px;--size-px-8:48px;--size-px-9:64px;--size-px-10:80px;--size-px-11:120px;--size-px-12:160px;--size-px-13:240px;--size-px-14:320px;--size-px-15:480px;--size-fluid-1:max(.5rem,min(1vw,1rem));--size-fluid-2:max(1rem,min(2vw,1.5rem));--size-fluid-3:max(1.5rem,min(3vw,2rem));--size-fluid-4:max(2rem,min(4vw,3rem));--size-fluid-5:max(4rem,min(5vw,5rem));--size-fluid-6:max(5rem,min(7vw,7.5rem));--size-fluid-7:max(7.5rem,min(10vw,10rem));--size-fluid-8:max(10rem,min(20vw,15rem));--size-fluid-9:max(15rem,min(30vw,20rem));--size-fluid-10:max(20rem,min(40vw,30rem));--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-xxs:240px;--size-xs:360px;--size-sm:480px;--size-md:768px;--size-lg:1024px;--size-xl:1440px;--size-xxl:1920px;--size-relative-000:-.5ch;--size-relative-00:-.25ch;--size-relative-1:.25ch;--size-relative-2:.5ch;--size-relative-3:1ch;--size-relative-4:1.25ch;--size-relative-5:1.5ch;--size-relative-6:1.75ch;--size-relative-7:2ch;--size-relative-8:3ch;--size-relative-9:4ch;--size-relative-10:5ch;--size-relative-11:7.5ch;--size-relative-12:10ch;--size-relative-13:15ch;--size-relative-14:20ch;--size-relative-15:30ch;--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.50,0,1,1);--ease-in-3:cubic-bezier(.70,0,1,1);--ease-in-4:cubic-bezier(.90,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.50,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-0.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-0.50,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-0.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1.00,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-elastic-1:var(--ease-elastic-out-1);--ease-elastic-2:var(--ease-elastic-out-2);--ease-elastic-3:var(--ease-elastic-out-3);--ease-elastic-4:var(--ease-elastic-out-4);--ease-elastic-5:var(--ease-elastic-out-5);--ease-squish-1:var(--ease-elastic-in-out-1);--ease-squish-2:var(--ease-elastic-in-out-2);--ease-squish-3:var(--ease-elastic-in-out-3);--ease-squish-4:var(--ease-elastic-in-out-4);--ease-squish-5:var(--ease-elastic-in-out-5);--ease-spring-1:linear(0,0.006,0.025 2.8%,0.101 6.1%,0.539 18.9%,0.721 25.3%,0.849 31.5%,0.937 38.1%,0.968 41.8%,0.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,0.007,0.029 2.2%,0.118 4.7%,0.625 14.4%,0.826 19%,0.902,0.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,0.999 61.6%,0.995 71.2%,1);--ease-spring-3:linear(0,0.009,0.035 2.1%,0.141 4.4%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,0.991,0.977 51%,0.974 53.8%,0.975 57.1%,0.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,0.009,0.037 1.7%,0.153 3.6%,0.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,0.973,0.955 39.2%,0.953 41.1%,0.957 43.3%,0.998 53.3%,1.009 59.1% 63.7%,0.998 78.9%,1);--ease-spring-5:linear(0,0.01,0.04 1.6%,0.161 3.3%,0.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,0.999 29.4%,0.955 32.1%,0.942,0.935 34.9%,0.933,0.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,0.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,0.004,0.016,0.035,0.063,0.098,0.141,0.191,0.25,0.316,0.391 36.8%,0.563,0.766,1 58.8%,0.946,0.908 69.1%,0.895,0.885,0.879,0.878,0.879,0.885,0.895,0.908 89.7%,0.946,1);--ease-bounce-2:linear(0,0.004,0.016,0.035,0.063,0.098,0.141 15.1%,0.25,0.391,0.562,0.765,1,0.892 45.2%,0.849,0.815,0.788,0.769,0.757,0.753,0.757,0.769,0.788,0.815,0.85,0.892 75.2%,1 80.2%,0.973,0.954,0.943,0.939,0.943,0.954,0.973,1);--ease-bounce-3:linear(0,0.004,0.016,0.035,0.062,0.098,0.141 11.4%,0.25,0.39,0.562,0.764,1 30.3%,0.847 34.8%,0.787,0.737,0.699,0.672,0.655,0.65,0.656,0.672,0.699,0.738,0.787,0.847 61.7%,1 66.2%,0.946,0.908,0.885 74.2%,0.879,0.878,0.879,0.885 79.5%,0.908,0.946,1 87.4%,0.981,0.968,0.96,0.957,0.96,0.968,0.981,1);--ease-bounce-4:linear(0,0.004,0.016 3%,0.062,0.141,0.25,0.391,0.562 18.2%,1 24.3%,0.81,0.676 32.3%,0.629,0.595,0.575,0.568,0.575,0.595,0.629,0.676 48.2%,0.811,1 56.2%,0.918,0.86,0.825,0.814,0.825,0.86,0.918,1 77.2%,0.94 80.6%,0.925,0.92,0.925,0.94 87.5%,1 90.9%,0.974,0.965,0.974,1);--ease-bounce-5:linear(0,0.004,0.016 2.5%,0.063,0.141,0.25 10.1%,0.562,1 20.2%,0.783,0.627,0.534 30.9%,0.511,0.503,0.511,0.534 38%,0.627,0.782,1 48.7%,0.892,0.815,0.769 56.3%,0.757,0.753,0.757,0.769 61.3%,0.815,0.892,1 68.8%,0.908 72.4%,0.885,0.878,0.885,0.908 79.4%,1 83%,0.954 85.5%,0.943,0.939,0.943,0.954 90.5%,1 93%,0.977,0.97,0.977,1);--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-important:2147483647;--shadow-color:220 3% 15%;--shadow-strength:1%;--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 rgba(0,0,0,.067);--shadow-1:0 1px 2px -1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 hsl(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.6180/1;--gray-0:#f8f9fa;--gray-1:#f1f3f5;--gray-2:#e9ecef;--gray-3:#dee2e6;--gray-4:#ced4da;--gray-5:#adb5bd;--gray-6:#868e96;--gray-7:#495057;--gray-8:#343a40;--gray-9:#212529;--gray-10:#16191d;--gray-11:#0d0f12;--gray-12:#030507;--stone-0:#f8fafb;--stone-1:#f2f4f6;--stone-2:#ebedef;--stone-3:#e0e4e5;--stone-4:#d1d6d8;--stone-5:#b1b6b9;--stone-6:#979b9d;--stone-7:#7e8282;--stone-8:#666968;--stone-9:#50514f;--stone-10:#3a3a37;--stone-11:#252521;--stone-12:#121210;--red-0:#fff5f5;--red-1:#ffe3e3;--red-2:#ffc9c9;--red-3:#ffa8a8;--red-4:#ff8787;--red-5:#ff6b6b;--red-6:#fa5252;--red-7:#f03e3e;--red-8:#e03131;--red-9:#c92a2a;--red-10:#b02525;--red-11:#962020;--red-12:#7d1a1a;--pink-0:#fff0f6;--pink-1:#ffdeeb;--pink-2:#fcc2d7;--pink-3:#faa2c1;--pink-4:#f783ac;--pink-5:#f06595;--pink-6:#e64980;--pink-7:#d6336c;--pink-8:#c2255c;--pink-9:#a61e4d;--pink-10:#8c1941;--pink-11:#731536;--pink-12:#59102a;--purple-0:#f8f0fc;--purple-1:#f3d9fa;--purple-2:#eebefa;--purple-3:#e599f7;--purple-4:#da77f2;--purple-5:#cc5de8;--purple-6:#be4bdb;--purple-7:#ae3ec9;--purple-8:#9c36b5;--purple-9:#862e9c;--purple-10:#702682;--purple-11:#5a1e69;--purple-12:#44174f;--violet-0:#f3f0ff;--violet-1:#e5dbff;--violet-2:#d0bfff;--violet-3:#b197fc;--violet-4:#9775fa;--violet-5:#845ef7;--violet-6:#7950f2;--violet-7:#7048e8;--violet-8:#6741d9;--violet-9:#5f3dc4;--violet-10:#5235ab;--violet-11:#462d91;--violet-12:#3a2578;--indigo-0:#edf2ff;--indigo-1:#dbe4ff;--indigo-2:#bac8ff;--indigo-3:#91a7ff;--indigo-4:#748ffc;--indigo-5:#5c7cfa;--indigo-6:#4c6ef5;--indigo-7:#4263eb;--indigo-8:#3b5bdb;--indigo-9:#364fc7;--indigo-10:#2f44ad;--indigo-11:#283a94;--indigo-12:#21307a;--blue-0:#e7f5ff;--blue-1:#d0ebff;--blue-2:#a5d8ff;--blue-3:#74c0fc;--blue-4:#4dabf7;--blue-5:#339af0;--blue-6:#228be6;--blue-7:#1c7ed6;--blue-8:#1971c2;--blue-9:#1864ab;--blue-10:#145591;--blue-11:#114678;--blue-12:#0d375e;--cyan-0:#e3fafc;--cyan-1:#c5f6fa;--cyan-2:#99e9f2;--cyan-3:#66d9e8;--cyan-4:#3bc9db;--cyan-5:#22b8cf;--cyan-6:#15aabf;--cyan-7:#1098ad;--cyan-8:#0c8599;--cyan-9:#0b7285;--cyan-10:#095c6b;--cyan-11:#074652;--cyan-12:#053038;--teal-0:#e6fcf5;--teal-1:#c3fae8;--teal-2:#96f2d7;--teal-3:#63e6be;--teal-4:#38d9a9;--teal-5:#20c997;--teal-6:#12b886;--teal-7:#0ca678;--teal-8:#099268;--teal-9:#087f5b;--teal-10:#066649;--teal-11:#054d37;--teal-12:#033325;--green-0:#ebfbee;--green-1:#d3f9d8;--green-2:#b2f2bb;--green-3:#8ce99a;--green-4:#69db7c;--green-5:#51cf66;--green-6:#40c057;--green-7:#37b24d;--green-8:#2f9e44;--green-9:#2b8a3e;--green-10:#237032;--green-11:#1b5727;--green-12:#133d1b;--lime-0:#f4fce3;--lime-1:#e9fac8;--lime-2:#d8f5a2;--lime-3:#c0eb75;--lime-4:#a9e34b;--lime-5:#94d82d;--lime-6:#82c91e;--lime-7:#74b816;--lime-8:#66a80f;--lime-9:#5c940d;--lime-10:#4c7a0b;--lime-11:#3c6109;--lime-12:#2c4706;--yellow-0:#fff9db;--yellow-1:#fff3bf;--yellow-2:#ffec99;--yellow-3:#ffe066;--yellow-4:#ffd43b;--yellow-5:#fcc419;--yellow-6:#fab005;--yellow-7:#f59f00;--yellow-8:#f08c00;--yellow-9:#e67700;--yellow-10:#b35c00;--yellow-11:#804200;--yellow-12:#663500;--orange-0:#fff4e6;--orange-1:#ffe8cc;--orange-2:#ffd8a8;--orange-3:#ffc078;--orange-4:#ffa94d;--orange-5:#ff922b;--orange-6:#fd7e14;--orange-7:#f76707;--orange-8:#e8590c;--orange-9:#d9480f;--orange-10:#bf400d;--orange-11:#99330b;--orange-12:#802b09;--choco-0:#fff8dc;--choco-1:#fce1bc;--choco-2:#f7ca9e;--choco-3:#f1b280;--choco-4:#e99b62;--choco-5:#df8545;--choco-6:#d46e25;--choco-7:#bd5f1b;--choco-8:#a45117;--choco-9:#8a4513;--choco-10:#703a13;--choco-11:#572f12;--choco-12:#3d210d;--brown-0:#faf4eb;--brown-1:#ede0d1;--brown-2:#e0cab7;--brown-3:#d3b79e;--brown-4:#c5a285;--brown-5:#b78f6d;--brown-6:#a87c56;--brown-7:#956b47;--brown-8:#825b3a;--brown-9:#6f4b2d;--brown-10:#5e3a21;--brown-11:#4e2b15;--brown-12:#422412;--sand-0:#f8fafb;--sand-1:#e6e4dc;--sand-2:#d5cfbd;--sand-3:#c2b9a0;--sand-4:#aea58c;--sand-5:#9a9178;--sand-6:#867c65;--sand-7:#736a53;--sand-8:#5f5746;--sand-9:#4b4639;--sand-10:#38352d;--sand-11:#252521;--sand-12:#121210;--camo-0:#f9fbe7;--camo-1:#e8ed9c;--camo-2:#d2df4e;--camo-3:#c2ce34;--camo-4:#b5bb2e;--camo-5:#a7a827;--camo-6:#999621;--camo-7:#8c851c;--camo-8:#7e7416;--camo-9:#6d6414;--camo-10:#5d5411;--camo-11:#4d460e;--camo-12:#36300a;--jungle-0:#ecfeb0;--jungle-1:#def39a;--jungle-2:#d0e884;--jungle-3:#c2dd6e;--jungle-4:#b5d15b;--jungle-5:#a8c648;--jungle-6:#9bbb36;--jungle-7:#8fb024;--jungle-8:#84a513;--jungle-9:#7a9908;--jungle-10:#658006;--jungle-11:#516605;--jungle-12:#3d4d04;--gradient-space: ;--gradient-1:linear-gradient(to bottom right var(--gradient-space),#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);--gradient-2:linear-gradient(to bottom right var(--gradient-space),#48005c,#8300e2,#a269ff);--gradient-3:radial-gradient(circle at top right var(--gradient-space),#0ff,rgba(0,255,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#ff1492,rgba(255,20,146,0));--gradient-4:linear-gradient(to bottom right var(--gradient-space),#00f5a0,#00d9f5);--gradient-5:conic-gradient(from -270deg at 75% 110% var(--gradient-space),#f0f,#fffaf0);--gradient-6:conic-gradient(from -90deg at top left var(--gradient-space),#000,#fff);--gradient-7:linear-gradient(to bottom right var(--gradient-space),#72c6ef,#004e8f);--gradient-8:conic-gradient(from 90deg at 50% 0% var(--gradient-space),#111,50%,#222,#111);--gradient-9:conic-gradient(from .5turn at bottom center var(--gradient-space),#add8e6,#fff);--gradient-10:conic-gradient(from 90deg at 40% -25% var(--gradient-space),gold,#f79d03,#ee6907,#e6390a,#de0d0d,#d61039,#cf1261,#c71585,#cf1261,#d61039,#de0d0d,#ee6907,#f79d03,gold,gold,gold);--gradient-11:conic-gradient(at bottom left var(--gradient-space),#ff1493,cyan);--gradient-12:conic-gradient(from 90deg at 25% -10% var(--gradient-space),#ff4500,#d3f340,#7bee85,#afeeee,#7bee85);--gradient-13:radial-gradient(circle at 50% 200% var(--gradient-space),#000142,#3b0083,#b300c3,#ff059f,#ff4661,#ffad86,#fff3c7);--gradient-14:conic-gradient(at top right var(--gradient-space),lime,cyan);--gradient-15:linear-gradient(to bottom right var(--gradient-space),#c7d2fe,#fecaca,#fef3c7);--gradient-16:radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);--gradient-17:conic-gradient(from -90deg at 50% -25% var(--gradient-space),blue,#8a2be2);--gradient-18:linear-gradient(0deg var(--gradient-space),rgba(255,0,0,.8),rgba(255,0,0,0) 75%),linear-gradient(60deg var(--gradient-space),rgba(255,255,0,.8),rgba(255,255,0,0) 75%),linear-gradient(120deg var(--gradient-space),rgba(0,255,0,.8),rgba(0,255,0,0) 75%),linear-gradient(180deg var(--gradient-space),rgba(0,255,255,.8),rgba(0,255,255,0) 75%),linear-gradient(240deg var(--gradient-space),rgba(0,0,255,.8),rgba(0,0,255,0) 75%),linear-gradient(300deg var(--gradient-space),rgba(255,0,255,.8),rgba(255,0,255,0) 75%);--gradient-19:linear-gradient(to bottom right var(--gradient-space),#ffe259,#ffa751);--gradient-20:conic-gradient(from -135deg at -10% center var(--gradient-space),orange,#ff7715,#ff522a,#ff3f47,#ff5482,#ff69b4);--gradient-21:conic-gradient(from -90deg at 25% 115% var(--gradient-space),red,#f06,#f0c,#c0f,#60f,#00f,#00f,#00f,#00f);--gradient-22:linear-gradient(to bottom right var(--gradient-space),#acb6e5,#86fde8);--gradient-23:linear-gradient(to bottom right var(--gradient-space),#536976,#292e49);--gradient-24:conic-gradient(from .5turn at 0% 0% var(--gradient-space),#00c476,10%,#82b0ff,90%,#00c476);--gradient-25:conic-gradient(at 125% 50% var(--gradient-space),#b78cf7,#ff7c94,#ffcf0d,#ff7c94,#b78cf7);--gradient-26:linear-gradient(to bottom right var(--gradient-space),#9796f0,#fbc7d4);--gradient-27:conic-gradient(from .5turn at bottom left var(--gradient-space),#ff1493,#639);--gradient-28:conic-gradient(from -90deg at 50% 105% var(--gradient-space),#fff,orchid);--gradient-29:radial-gradient(circle at top right var(--gradient-space),#bfb3ff,rgba(191,179,255,0)),radial-gradient(circle at bottom left var(--gradient-space),#86acf9,rgba(134,172,249,0));--gradient-30:radial-gradient(circle at top right var(--gradient-space),#00ff80,rgba(0,255,128,0)),radial-gradient(circle at bottom left var(--gradient-space),#adffd6,rgba(173,255,214,0));--noise-1:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-2:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-3:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-4:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-5:url(\"data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E\");--noise-filter-1:contrast(300%) brightness(100%);--noise-filter-2:contrast(200%) brightness(150%);--noise-filter-3:contrast(200%) brightness(250%);--noise-filter-4:contrast(200%) brightness(500%);--noise-filter-5:contrast(200%) brightness(1000%);--animation-fade-in:fade-in .5s var(--ease-3);--animation-fade-in-bloom:fade-in-bloom 2s var(--ease-3);--animation-fade-out:fade-out .5s var(--ease-3);--animation-fade-out-bloom:fade-out-bloom 2s var(--ease-3);--animation-scale-up:scale-up .5s var(--ease-3);--animation-scale-down:scale-down .5s var(--ease-3);--animation-slide-out-up:slide-out-up .5s var(--ease-3);--animation-slide-out-down:slide-out-down .5s var(--ease-3);--animation-slide-out-right:slide-out-right .5s var(--ease-3);--animation-slide-out-left:slide-out-left .5s var(--ease-3);--animation-slide-in-up:slide-in-up .5s var(--ease-3);--animation-slide-in-down:slide-in-down .5s var(--ease-3);--animation-slide-in-right:slide-in-right .5s var(--ease-3);--animation-slide-in-left:slide-in-left .5s var(--ease-3);--animation-shake-x:shake-x .75s var(--ease-out-5);--animation-shake-y:shake-y .75s var(--ease-out-5);--animation-shake-z:shake-z 1s var(--ease-in-out-3);--animation-spin:spin 2s linear infinite;--animation-ping:ping 5s var(--ease-out-3) infinite;--animation-blink:blink 1s var(--ease-out-3) infinite;--animation-float:float 3s var(--ease-in-out-3) infinite;--animation-bounce:bounce 2s var(--ease-squish-2) infinite;--animation-pulse:pulse 2s var(--ease-out-3) infinite;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-drawn-1:255px 15px 225px 15px/15px 225px 15px 255px;--radius-drawn-2:125px 10px 20px 185px/25px 205px 205px 25px;--radius-drawn-3:15px 255px 15px 225px/225px 15px 255px 15px;--radius-drawn-4:15px 25px 155px 25px/225px 150px 25px 115px;--radius-drawn-5:250px 25px 15px 20px/15px 80px 105px 115px;--radius-drawn-6:28px 100px 20px 15px/150px 30px 205px 225px;--radius-round:1e5px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%) * 1e5,var(--radius-6))}@media (prefers-color-scheme:dark){:where(html){--shadow-color:220 40% 2%;--shadow-strength:25%;--inner-shadow-highlight:inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467)}}@supports (background:linear-gradient(to right in oklab,#000,#fff)){:where(html){--gradient-space:in oklab}}@keyframes fade-in{to{opacity:1}}@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(2) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@keyframes slide-out-up{to{transform:translateY(-100%)}}@keyframes slide-out-down{to{transform:translateY(100%)}}@keyframes slide-out-right{to{transform:translateX(100%)}}@keyframes slide-out-left{to{transform:translateX(-100%)}}@keyframes slide-in-up{0%{transform:translateY(100%)}}@keyframes slide-in-down{0%{transform:translateY(-100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}}@keyframes shake-x{0%,to{transform:translateX(0)}20%{transform:translateX(-5%)}40%{transform:translateX(5%)}60%{transform:translateX(-5%)}80%{transform:translateX(5%)}}@keyframes shake-y{0%,to{transform:translateY(0)}20%{transform:translateY(-5%)}40%{transform:translateY(5%)}60%{transform:translateY(-5%)}80%{transform:translateY(5%)}}@keyframes shake-z{0%,to{transform:rotate(0deg)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes ping{90%,to{opacity:0;transform:scale(2)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}@keyframes float{50%{transform:translateY(-25%)}}@keyframes bounce{25%{transform:translateY(-20%)}40%{transform:translateY(-3%)}0%,60%,to{transform:translateY(0)}}@keyframes pulse{50%{transform:scale(.9)}}@media (prefers-color-scheme:dark){@keyframes fade-in-bloom{0%{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}to{filter:brightness(1) blur(0);opacity:1}}}@media (prefers-color-scheme:dark){@keyframes fade-out-bloom{to{filter:brightness(1) blur(20px);opacity:0}10%{filter:brightness(.5) blur(10px);opacity:1}0%{filter:brightness(1) blur(0);opacity:1}}}\n\n/* 00-kca-tokens.css */\n/* kca OLED \uAE00\uB77C\uC2A4 \u2014 \uC2DC\uB9E8\uD2F1 \uD1A0\uD070 + \uB124\uC628 \uD314\uB808\uD2B8 */\n:root {\n  color-scheme: light dark;\n  --oled-void: #0a0c10;\n  --oled-deep: #050608;\n  --bg: #0c0f14;\n  --bg2: #000000;\n  --ink: #f2f6fc;\n  --muted: #94a3b8;\n  --line: rgba(255, 255, 255, 0.1);\n  --panel: rgba(255, 255, 255, 0.055);\n  --panel-solid: #12161e;\n  --accent: #2ef2d0;\n  --accent2: #c4b5fd;\n  --warm: #ffb347;\n  --gold: #fde047;\n  --rose: #ff6b9d;\n  --shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.06) inset;\n  --shadow-glow: 0 0 48px color-mix(in oklab, var(--accent) 28%, transparent);\n  --bar-bg: rgba(255, 255, 255, 0.07);\n  --glow: color-mix(in oklab, var(--accent) 22%, transparent);\n  --glow-violet: color-mix(in oklab, var(--accent2) 18%, transparent);\n  --glow-warm: color-mix(in oklab, var(--warm) 16%, transparent);\n  --glass: rgba(14, 18, 26, 0.62);\n  --glass-strong: rgba(8, 10, 16, 0.88);\n  --glass-border: rgba(255, 255, 255, 0.14);\n  --glass-highlight: rgba(255, 255, 255, 0.22);\n  --glass-blur: 22px;\n  --glass-saturate: 1.45;\n  --spot-glow: color-mix(in oklab, var(--accent) 42%, transparent);\n  --accent-grad: linear-gradient(125deg, var(--accent) 0%, var(--accent2) 48%, var(--warm) 100%);\n  --accent-grad-soft: linear-gradient(120deg, color-mix(in oklab, var(--accent) 35%, transparent), color-mix(in oklab, var(--accent2) 25%, transparent));\n  --border-shine: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.35) 0%,\n    rgba(255, 255, 255, 0.04) 40%,\n    rgba(255, 255, 255, 0.18) 100%\n  );\n  --radius-card: 18px;\n  --radius-pill: 999px;\n  --kca-font-sans: \"Pretendard Variable\", Pretendard, \"Apple SD Gothic Neo\", \"Malgun Gothic\", var(--font-sans, system-ui, sans-serif);\n  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);\n  --viz-dawn: #818cf8;\n  --viz-morning: #22d3ee;\n  --viz-afternoon: #4ade80;\n  --viz-evening: #fb923c;\n  font-family: var(--kca-font-sans);\n}\n\n@media (prefers-color-scheme: light) {\n  :root:not([data-theme=\"dark\"]) {\n    --oled-void: #e8ecf4;\n    --oled-deep: #dfe4ee;\n    --bg: #eef1f8;\n    --bg2: #e2e7f2;\n    --ink: #0b0f16;\n    --muted: #5a6578;\n    --line: rgba(15, 20, 30, 0.12);\n    --panel: rgba(255, 255, 255, 0.72);\n    --panel-solid: #ffffff;\n    --accent: #0d9488;\n    --accent2: #7c3aed;\n    --warm: #ea580c;\n    --gold: #ca8a04;\n    --rose: #e11d48;\n    --shadow: 0 24px 64px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;\n    --shadow-glow: 0 0 40px color-mix(in oklab, var(--accent) 18%, transparent);\n    --bar-bg: rgba(15, 23, 42, 0.08);\n    --glow: color-mix(in oklab, var(--accent) 14%, transparent);\n    --glow-violet: color-mix(in oklab, var(--accent2) 12%, transparent);\n    --glass: rgba(255, 255, 255, 0.78);\n    --glass-strong: rgba(255, 255, 255, 0.92);\n    --glass-border: rgba(255, 255, 255, 0.65);\n    --glass-highlight: rgba(255, 255, 255, 0.95);\n    --glass-saturate: 1.2;\n    --spot-glow: color-mix(in oklab, var(--accent) 28%, transparent);\n    --accent-grad: linear-gradient(125deg, #0d9488, #7c3aed 55%, #ea580c);\n  }\n}\n\n:root[data-theme=\"dark\"] {\n  --oled-void: #0a0c10;\n  --oled-deep: #000000;\n  --bg: #0c0f14;\n  --bg2: #000000;\n  --ink: #f2f6fc;\n  --muted: #94a3b8;\n  --line: rgba(255, 255, 255, 0.1);\n  --panel: rgba(255, 255, 255, 0.055);\n  --panel-solid: #12161e;\n  --accent: #2ef2d0;\n  --accent2: #c4b5fd;\n  --warm: #ffb347;\n  --gold: #fde047;\n  --shadow: 0 32px 80px rgba(0, 0, 0, 0.65);\n  --bar-bg: rgba(255, 255, 255, 0.07);\n  --glow: color-mix(in oklab, #2ef2d0 22%, transparent);\n  --glass: rgba(14, 18, 26, 0.62);\n  --glass-strong: rgba(8, 10, 16, 0.88);\n  --glass-border: rgba(255, 255, 255, 0.14);\n  --spot-glow: color-mix(in oklab, #2ef2d0 42%, transparent);\n  --accent-grad: linear-gradient(125deg, #2ef2d0, #c4b5fd 50%, #ffb347);\n}\n\n:root[data-theme=\"light\"] {\n  --oled-void: #e8ecf4;\n  --oled-deep: #dfe4ee;\n  --bg: #eef1f8;\n  --bg2: #e2e7f2;\n  --ink: #0b0f16;\n  --muted: #5a6578;\n  --line: rgba(15, 20, 30, 0.12);\n  --panel: rgba(255, 255, 255, 0.72);\n  --panel-solid: #ffffff;\n  --accent: #0d9488;\n  --accent2: #7c3aed;\n  --warm: #ea580c;\n  --gold: #ca8a04;\n  --rose: #e11d48;\n  --shadow: 0 24px 64px rgba(15, 23, 42, 0.12);\n  --bar-bg: rgba(15, 23, 42, 0.08);\n  --glow: color-mix(in oklab, #0d9488 14%, transparent);\n  --glass: rgba(255, 255, 255, 0.78);\n  --glass-strong: rgba(255, 255, 255, 0.92);\n  --glass-border: rgba(255, 255, 255, 0.65);\n  --spot-glow: color-mix(in oklab, #0d9488 28%, transparent);\n  --accent-grad: linear-gradient(125deg, #0d9488, #7c3aed 55%, #ea580c);\n}\n\n\n/* 01-kca-base.css */\n/* kca \uB9AC\uC14B\u00B7\uD0C0\uC774\uD3EC\u00B7\uC2DC\uB124\uB9C8\uD2F1 \uBC30\uACBD */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  scroll-behavior: smooth;\n  overflow-x: clip;\n  max-width: 100%;\n}\n\nbody.kca-oled {\n  margin: 0;\n  overflow-x: clip;\n  max-width: 100%;\n  min-height: 100dvh;\n  background-color: var(--bg2);\n  background-image:\n    radial-gradient(ellipse 120% 80% at 50% -30%, var(--glow-violet), transparent 55%),\n    radial-gradient(ellipse 90% 60% at 100% 20%, var(--glow-warm), transparent 50%),\n    radial-gradient(ellipse 80% 50% at 0% 60%, var(--glow), transparent 48%),\n    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 42%, var(--oled-deep) 100%);\n  color: var(--ink);\n  font-family: var(--kca-font-sans);\n  font-size: var(--font-size-1);\n  line-height: var(--font-lineheight-3);\n  transition:\n    background 0.45s var(--ease-out),\n    color 0.25s var(--ease-out);\n}\n\nbody.kca-oled::before {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  z-index: -2;\n  pointer-events: none;\n  opacity: 0.55;\n  background:\n    radial-gradient(circle at 20% 30%, var(--glow) 0%, transparent 42%),\n    radial-gradient(circle at 80% 10%, var(--glow-violet) 0%, transparent 38%);\n  animation: kca-aurora 18s ease-in-out infinite alternate;\n}\n\nbody.kca-oled::after {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n  opacity: 0.04;\n  background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n\n.skip-link {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.skip-link:focus {\n  position: fixed;\n  left: var(--size-3);\n  top: var(--size-3);\n  width: auto;\n  height: auto;\n  margin: 0;\n  clip: auto;\n  z-index: 10000;\n  padding: var(--size-2) var(--size-3);\n  border-radius: var(--radius-2);\n  background: var(--accent-grad);\n  color: var(--oled-deep);\n  font-weight: var(--font-weight-8);\n  font-size: var(--font-size-0);\n  box-shadow: var(--shadow-glow);\n}\n\nmain {\n  margin: 0 auto;\n  overflow-x: clip;\n  max-width: 100%;\n  position: relative;\n  z-index: 1;\n}\n\nh1 {\n  margin: 0;\n  font-size: clamp(var(--font-size-5), 4.2vw, var(--font-size-8));\n  line-height: var(--font-lineheight-00);\n  letter-spacing: var(--font-letterspacing-0);\n  font-weight: var(--font-weight-8);\n}\n\nh2 {\n  margin: 0 0 var(--size-2);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-weight-7);\n  letter-spacing: var(--font-letterspacing-0);\n}\n\na {\n  color: var(--accent);\n  transition: color 0.2s var(--ease-out), text-shadow 0.2s var(--ease-out);\n}\n\na:hover {\n  text-shadow: 0 0 20px color-mix(in oklab, var(--accent) 55%, transparent);\n}\n\n@keyframes kca-aurora {\n  0% {\n    transform: translate(0, 0) scale(1);\n    opacity: 0.45;\n  }\n  50% {\n    transform: translate(2%, 3%) scale(1.04);\n    opacity: 0.65;\n  }\n  100% {\n    transform: translate(-2%, 1%) scale(1.02);\n    opacity: 0.5;\n  }\n}\n\n@keyframes kca-fade-up {\n  from {\n    opacity: 0;\n    transform: translateY(20px) scale(0.985);\n    filter: blur(4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n    filter: blur(0);\n  }\n}\n\n@keyframes kca-ring-in {\n  from {\n    transform: scale(0.88);\n    opacity: 0.6;\n    filter: blur(2px);\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n    filter: blur(0);\n  }\n}\n\n@keyframes kca-shimmer {\n  0% {\n    background-position: 200% center;\n  }\n  100% {\n    background-position: -200% center;\n  }\n}\n\n@keyframes kca-pulse-glow {\n  0%,\n  100% {\n    box-shadow: 0 0 20px color-mix(in oklab, var(--accent) 25%, transparent);\n  }\n  50% {\n    box-shadow: 0 0 36px color-mix(in oklab, var(--accent) 45%, transparent);\n  }\n}\n\n.anim-enter {\n  animation: kca-fade-up 0.72s var(--ease-out) forwards;\n  opacity: 0;\n  animation-delay: var(--enter-delay, 0s);\n}\n\n.rh-wrap.anim-ring {\n  animation: kca-ring-in 0.85s var(--ease-spring) forwards;\n}\n\n.anim-enter:target {\n  opacity: 1 !important;\n  transform: none !important;\n  filter: none !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  html {\n    scroll-behavior: auto;\n  }\n\n  body.kca-oled::before {\n    animation: none;\n  }\n\n  .anim-enter,\n  .rh-wrap.anim-ring {\n    animation: none !important;\n    opacity: 1 !important;\n    transform: none !important;\n    filter: none !important;\n  }\n}\n\n\n/* 02-kca-components.css */\n    .card {\n      background: var(--panel);\n      border: 1px solid var(--line);\n      border-radius: var(--radius-card);\n      padding: 18px 20px;\n      box-shadow: var(--shadow);\n      transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.2s ease;\n    }\n    .card:hover {\n      border-color: var(--accent);\n      box-shadow: 0 22px 56px rgba(20, 26, 31, 0.11);\n      transform: translateY(-2px);\n    }\n    :root[data-theme=\"dark\"] .card:hover {\n      box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);\n    }\n    .stat-sample-badge {\n      margin: 0 0 12px;\n      padding: 8px 12px;\n      border-radius: 10px;\n      border: 1px dashed var(--line);\n      background: color-mix(in srgb, var(--accent) 6%, var(--panel));\n      font-size: 12px;\n      line-height: 1.45;\n      color: var(--muted);\n      font-variant-numeric: tabular-nums;\n    }\n    .stat-sample-badge strong { color: var(--ink); font-weight: 850; }\n    .stat-sample-k {\n      display: inline-block;\n      margin-right: 6px;\n      padding: 2px 7px;\n      border-radius: 6px;\n      font-size: 10px;\n      font-weight: 800;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      color: var(--accent);\n      background: color-mix(in srgb, var(--accent) 14%, transparent);\n    }\n    .stat-sample-range { margin-left: 4px; opacity: 0.92; }\n    .fact-hero-strip {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 10px;\n      margin: 0 0 14px;\n    }\n    @media (max-width: 560px) { .fact-hero-strip { grid-template-columns: 1fr; } }\n    .fact-hero-cell {\n      padding: 12px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: linear-gradient(145deg, rgba(15, 107, 92, 0.08), transparent);\n    }\n    .fact-hero-cell b {\n      display: block;\n      font-size: 11px;\n      font-weight: 750;\n      color: var(--muted);\n      margin-bottom: 4px;\n      letter-spacing: 0.02em;\n    }\n    .fact-hero-cell span {\n      font-size: clamp(22px, 4vw, 28px);\n      font-weight: 900;\n      letter-spacing: -0.03em;\n      font-variant-numeric: tabular-nums;\n      color: var(--ink);\n    }\n    .glossary {\n      margin-top: 18px;\n      padding: 14px 16px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      font-size: 13px;\n      line-height: 1.55;\n      color: var(--muted);\n    }\n    .glossary > summary {\n      cursor: pointer;\n      font-weight: 800;\n      color: var(--ink);\n      list-style: none;\n    }\n    .glossary > summary::-webkit-details-marker { display: none; }\n    .glossary dl { margin: 12px 0 0; display: grid; gap: 10px; }\n    .glossary dt { font-weight: 750; color: var(--ink); font-size: 12px; }\n    .glossary dd { margin: 2px 0 0; padding: 0; font-size: 12px; }\n    .chart-stack { display: flex; flex-direction: column; gap: 14px; }\n\n.toolbar {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 10px;\n      margin-bottom: 18px;\n      padding: 10px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      box-shadow: var(--shadow);\n    }\n.toolbar-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 4px; }\n    .theme-btn {\n      font: inherit;\n      font-size: 12px;\n      font-weight: 650;\n      padding: 7px 12px;\n      border-radius: 999px;\n      border: 1px solid var(--line);\n      background: transparent;\n      color: var(--ink);\n      cursor: pointer;\n    }\n    .theme-btn:hover { border-color: var(--accent); color: var(--accent); }\n    .hero { display: grid; gap: 20px; grid-template-columns: 1.35fr 1fr; align-items: stretch; padding-bottom: 28px; }\n    h1 { margin: 0; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }\n    .room-title {\n      margin: 10px 0 0;\n      font-size: clamp(18px, 2.8vw, 26px);\n      line-height: 1.25;\n      font-weight: 750;\n      letter-spacing: -0.02em;\n      color: var(--accent);\n      word-break: break-word;\n    }\n    .sub { margin: 12px 0 0; color: var(--muted); line-height: 1.65; font-size: 15px; max-width: 52ch; }\n    .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }\n    .badge { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }\n    .side-card { display: flex; flex-direction: column; gap: 10px; justify-content: center; }\n    .side-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }\n    .side-card strong { color: var(--ink); }\n    h2 { margin: 0 0 12px; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }\n    .grid { display: grid; gap: 14px; }\n    .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n    .three { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n    .highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }\n    .highlights li { padding: 12px 14px; border-radius: 10px; background: linear-gradient(120deg, rgba(15,107,92,0.08), rgba(196,92,42,0.06)); border: 1px solid rgba(15,107,92,0.15); font-size: 14px; line-height: 1.55; }\n    .highlights strong { color: var(--accent); font-weight: 750; }\n    .bars { display: grid; gap: 8px; }\n    .bar-row { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 2.2fr) 52px; gap: 10px; align-items: center; min-height: 22px; }\n    .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }\n    .bar-track { height: 9px; background: var(--bar-bg); border-radius: 999px; overflow: hidden; }\n    .bar-fill {\n      display: block;\n      height: 100%;\n      min-width: 2px;\n      background: linear-gradient(90deg, var(--accent), #1a9d87);\n      border-radius: inherit;\n    }\n    .bar-value { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }\n    .chart-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }\n    .chart-hint strong { color: var(--ink); font-weight: 700; }\n    .calendar {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));\n      gap: 5px;\n      width: 100%;\n      box-sizing: border-box;\n    }\n    .day {\n      border-radius: 8px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: 2px;\n      min-width: 0;\n      aspect-ratio: 1;\n      padding: 4px 2px;\n      font-weight: 650;\n      border: 1px solid var(--line);\n    }\n    .day-k { font-size: 9px; line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; }\n    .day-n { font-size: 11px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }\n    .day-burst { box-shadow: inset 0 0 0 2px #e85d04; position: relative; }\n    .pace-ribbon {\n      display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;\n      margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;\n      background: linear-gradient(120deg, rgba(232,93,4,0.1), rgba(15,107,92,0.08));\n      border: 1px solid rgba(232,93,4,0.22);\n    }\n    .pace-ribbon strong { font-size: 15px; font-weight: 800; }\n    .pace-ribbon span { font-size: 13px; color: var(--muted); line-height: 1.45; }\n    .arc-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }\n    .arc-chip {\n      flex: 1 1 140px; min-width: 120px; padding: 10px 12px; border-radius: 10px;\n      background: var(--panel); border: 1px solid var(--line);\n    }\n    .arc-chip b { display: block; font-size: 18px; font-weight: 850; color: var(--accent); }\n    .arc-chip small { font-size: 11px; color: var(--muted); }\n    .pulse-mini { margin-top: 12px; }\n    .pulse-mini h4 { margin: 0 0 6px; font-size: 12px; font-weight: 750; color: var(--muted); }\n    .pulse-row { display: flex; align-items: flex-end; gap: 3px; height: 52px; overflow-x: auto; padding-bottom: 4px; }\n    .pulse-bar {\n      flex: 0 0 10px; min-height: 4px; border-radius: 3px 3px 1px 1px;\n      background: linear-gradient(180deg, #ea580c 55%, #0f6b5c 100%);\n      opacity: 0.85;\n    }\n    .hours-wrap { display: flex; flex-direction: column; gap: 8px; }\n    .hours-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n    @media (max-width: 560px) { .hours-split { grid-template-columns: 1fr; } }\n    .hours-half { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n    .hours-band {\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: 0.04em;\n      padding: 4px 8px;\n      border-radius: 6px;\n      text-align: center;\n    }\n    .hours-band-am { color: #0c4a6e; background: rgba(8, 145, 178, 0.14); }\n    .hours-band-pm { color: #9a3412; background: rgba(234, 88, 12, 0.14); }\n    :root[data-theme=\"dark\"] .hours-band-am { color: #7dd3fc; background: rgba(8, 145, 178, 0.22); }\n    :root[data-theme=\"dark\"] .hours-band-pm { color: #fdba74; background: rgba(234, 88, 12, 0.2); }\n    .hours-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; align-items: end; height: 120px; }\n    .hour {\n      min-width: 0;\n      width: 100%;\n      align-self: end;\n      border-radius: 4px 4px 0 0;\n    }\n    .hour-am { background: linear-gradient(180deg, #22d3ee, #0891b2); }\n    .hour-pm { background: linear-gradient(180deg, #fb923c, #ea580c); }\n    .hours-labels {\n      display: grid;\n      grid-template-columns: repeat(12, minmax(0, 1fr));\n      gap: 2px;\n      font-size: 9px;\n      line-height: 1.15;\n      color: var(--muted);\n      text-align: center;\n      font-variant-numeric: tabular-nums;\n    }\n    .hours-labels span { min-width: 0; }\n    .table { width: 100%; border-collapse: collapse; font-size: 13px; }\n    .table-rank { width: 100%; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; table-layout: fixed; }\n    .table-rank thead th {\n      color: var(--muted);\n      font-weight: 700;\n      font-size: 11px;\n      padding: 10px 8px;\n      background: var(--bar-bg);\n      border-bottom: 2px solid var(--line);\n    }\n    .table-rank tbody tr { border-bottom: 1px solid var(--line); }\n    .table-rank tbody tr:last-child { border-bottom: none; }\n    .table-rank tbody tr:nth-child(even) { background: rgba(15, 107, 92, 0.04); }\n    :root[data-theme=\"dark\"] .table-rank tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); }\n    .table-rank td { padding: 10px 8px; }\n    .table-rank td:first-child { font-weight: 700; color: var(--ink); }\n    .table th, .table td { text-align: left; border-bottom: 1px solid var(--line); padding: 9px 6px; }\n    .table th { color: var(--muted); font-weight: 650; font-size: 11px; text-transform: none; }\n    .table td.num { text-align: right; font-variant-numeric: tabular-nums; }\n    .kw-note {\n      margin: 0 0 10px;\n      padding: 10px 12px;\n      border-radius: 8px;\n      border: 1px solid var(--line);\n      background: rgba(15, 107, 92, 0.06);\n      font-size: 12px;\n      line-height: 1.55;\n      color: var(--muted);\n    }\n    .topic-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      gap: 12px;\n      margin-top: 12px;\n    }\n    .topic-card {\n      border: 1px solid var(--line);\n      border-radius: 12px;\n      padding: 12px 14px;\n      background: var(--bar-bg);\n    }\n    .topic-card header {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 10px;\n      font-size: 14px;\n    }\n    .topic-badge {\n      font-size: 10px;\n      font-weight: 700;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n      padding: 2px 7px;\n      border-radius: 999px;\n    }\n    .topic-badge.theme { background: rgba(15, 107, 92, 0.15); color: var(--accent); }\n    .topic-badge.period { background: rgba(196, 92, 42, 0.15); color: var(--warm); }\n    .topic-pct { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }\n    .topic-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n    .topic-chip {\n      font-size: 12px;\n      padding: 4px 9px;\n      border-radius: 999px;\n      border: 1px solid var(--line);\n      background: rgba(255, 255, 255, 0.5);\n      color: var(--ink);\n    }\n    :root[data-theme=\"dark\"] .topic-chip { background: rgba(255, 255, 255, 0.06); }\n    .self-serve {\n      margin-top: 14px;\n      border: 1px dashed rgba(15, 107, 92, 0.38);\n      border-radius: 12px;\n      padding: 16px 18px;\n      background: linear-gradient(135deg, rgba(15, 107, 92, 0.06), rgba(196, 92, 42, 0.04));\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--muted);\n    }\n    .self-serve h2 { margin: 0 0 10px; font-size: 16px; font-weight: 750; color: var(--ink); letter-spacing: -0.02em; }\n    .self-serve p { margin: 0 0 8px; }\n    .self-serve ol { margin: 0 0 10px; padding-left: 1.25rem; }\n    .self-serve li { margin: 4px 0; }\n    .self-serve code { font-size: 11.5px; background: var(--bar-bg); padding: 1px 5px; border-radius: 4px; color: var(--ink); }\n    .self-serve .cmd {\n      margin: 10px 0 12px;\n      padding: 11px 13px;\n      border-radius: 8px;\n      background: var(--bar-bg);\n      border: 1px solid var(--line);\n      font-family: ui-monospace, \"Cascadia Code\", \"Consolas\", monospace;\n      font-size: 12px;\n      line-height: 1.45;\n      color: var(--ink);\n      white-space: pre-wrap;\n      overflow-wrap: anywhere;\n      word-break: break-word;\n      max-width: 100%;\n    }\n    .self-serve .links { margin: 10px 0 0; font-size: 12px; }\n    .self-serve .links a { font-weight: 650; }\n    .insight-hero { position: relative; overflow: hidden; }\n    .insight-hero::before {\n      content: \"\";\n      position: absolute;\n      inset: -40% 40% auto -20%;\n      height: 120%;\n      background: radial-gradient(closest-side, var(--glow), transparent 70%);\n      pointer-events: none;\n    }\n    .insight-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }\n    .insight-lede { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 62ch; }\n    .insight-grid {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 10px;\n      margin-top: 18px;\n      position: relative;\n      z-index: 1;\n    }\n    @media (min-width: 1080px) {\n      .insight-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n    }\n    @media (max-width: 720px) { .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }\n    .ins-metric {\n      padding: 12px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: linear-gradient(145deg, rgba(255,255,255,0.04), transparent);\n    }\n    .ins-m-label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }\n    .ins-m-val { font-size: 22px; font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }\n    .ins-m-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }\n    .insight-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; position: relative; z-index: 1; }\n    @media (max-width: 900px) { .insight-split { grid-template-columns: 1fr; } }\n    .insight-sub { margin: 0 0 6px; font-size: 14px; font-weight: 750; color: var(--ink); }\n    .daypart-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }\n    .dp-seg { min-width: 2px; height: 100%; transition: opacity 0.2s; }\n    .dp-seg:hover { opacity: 0.85; }\n    .daypart-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 12px; color: var(--muted); }\n    .daypart-legend li { display: flex; align-items: center; gap: 6px; }\n    .daypart-legend i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }\n    .rh-wrap { position: relative; width: 108px; height: 108px; flex-shrink: 0; }\n    .rh-ring {\n      width: 108px;\n      height: 108px;\n      border-radius: 50%;\n      background: conic-gradient(from -90deg, var(--accent) calc(var(--p) * 1%), var(--bar-bg) 0);\n      display: grid;\n      place-items: center;\n      box-shadow: 0 0 0 1px var(--line) inset;\n    }\n    .rh-ring span {\n      width: 74px;\n      height: 74px;\n      border-radius: 50%;\n      background: var(--panel);\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\n      border: 1px solid var(--line);\n    }\n    .rh-cap {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n      font-size: 11px;\n      color: var(--muted);\n      font-weight: 700;\n    }\n    .rh-cap span { font-size: 22px; font-weight: 900; color: var(--ink); letter-spacing: -0.04em; }\n    .rh-cap small { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 1px; }\n    .sc-plot {\n      position: relative;\n      width: 100%;\n      max-width: 100%;\n      margin-top: 4px;\n      padding: 32px 8px 36px 8px;\n      border-radius: 14px;\n      border: 1px solid var(--line);\n      background-color: var(--panel);\n      background-image:\n        linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),\n        linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);\n      background-size: 25% 25%;\n      overflow: hidden;\n    }\n    @media (min-width: 560px) {\n      .sc-plot {\n        aspect-ratio: 5 / 4;\n        min-height: 240px;\n        max-height: 380px;\n        padding: 28px 12px 40px 12px;\n      }\n    }\n    .sc-grid-label {\n      position: absolute;\n      font-size: 10px;\n      font-weight: 700;\n      color: var(--muted);\n      letter-spacing: 0.02em;\n      pointer-events: none;\n      line-height: 1.2;\n    }\n    .sc-lbl-top { left: 50%; top: 6px; transform: translateX(-50%); }\n    .sc-lbl-bottom { left: 50%; bottom: 8px; transform: translateX(-50%); }\n    .sc-lbl-left { left: 6px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }\n    .sc-lbl-right { right: 6px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }\n    .sc-quadrant {\n      position: absolute;\n      font-size: 9px;\n      font-weight: 650;\n      color: color-mix(in srgb, var(--muted) 75%, transparent);\n      pointer-events: none;\n    }\n    .sc-q-tl { left: 12%; top: 14%; }\n    .sc-q-tr { right: 10%; top: 14%; }\n    .sc-q-bl { left: 12%; bottom: 18%; }\n    .sc-q-br { right: 10%; bottom: 18%; }\n    .bubble-node {\n      position: relative;\n      display: flex;\n      align-items: flex-start;\n      gap: 0;\n      max-width: 100%;\n      z-index: 1;\n    }\n    @media (min-width: 560px) {\n      .bubble-node {\n        position: absolute;\n        transform: translate(-50%, -50%) scale(var(--bubble-scale, 1));\n        max-width: min(34%, 140px);\n      }\n    }\n    .bubble-shape {\n      flex-shrink: 0;\n      width: 10px;\n      height: 10px;\n      margin-top: 12px;\n      background: hsl(var(--bubble-hue, 168) 62% 42%);\n      border-radius: 0 0 0 3px;\n      clip-path: polygon(0 0, 100% 50%, 0 100%);\n    }\n    @media (min-width: 560px) {\n      .bubble-shape {\n        position: absolute;\n        inset: 0;\n        width: auto;\n        height: auto;\n        margin: 0;\n        clip-path: none;\n        border-radius: 14px 14px 14px 4px;\n        background: hsl(var(--bubble-hue, 168) 48% 94%);\n        border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n        opacity: 0.98;\n        z-index: 0;\n      }\n      :root[data-theme=\"dark\"] .bubble-shape {\n        background: hsl(var(--bubble-hue, 168) 35% 22%);\n        border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n      }\n    }\n    .bubble-content {\n      flex: 1;\n      min-width: 0;\n      padding: 8px 11px;\n      border-radius: 14px;\n      border: 2px solid hsl(var(--bubble-hue, 168) 58% 40%);\n      background: hsl(var(--bubble-hue, 168) 48% 96%);\n      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);\n    }\n    :root[data-theme=\"dark\"] .bubble-content {\n      background: hsl(var(--bubble-hue, 168) 35% 20%);\n      border-color: hsl(var(--bubble-hue, 168) 55% 48%);\n    }\n    @media (min-width: 560px) {\n      .bubble-content {\n        position: relative;\n        z-index: 1;\n        text-align: center;\n        border: none;\n        background: transparent;\n        box-shadow: none;\n        padding: 6px 8px;\n      }\n    }\n    .bubble-content strong {\n      display: block;\n      font-size: 11px;\n      font-weight: 800;\n      color: var(--ink);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .bubble-content .bubble-pct {\n      display: block;\n      font-size: 15px;\n      font-weight: 900;\n      letter-spacing: -0.03em;\n      color: hsl(var(--bubble-hue, 168) 55% 32%);\n      font-variant-numeric: tabular-nums;\n    }\n    :root[data-theme=\"dark\"] .bubble-content .bubble-pct {\n      color: hsl(var(--bubble-hue, 168) 70% 72%);\n    }\n    .bubble-content small {\n      display: block;\n      margin-top: 2px;\n      font-size: 9px;\n      color: var(--muted);\n      font-weight: 650;\n    }\n    .sc-plot-list {\n      display: grid;\n      gap: 10px;\n    }\n    @media (min-width: 560px) {\n      .sc-plot-list { display: block; position: absolute; inset: 0; }\n      .sc-plot-list .bubble-node { margin: 0; }\n    }\n    .fact-card { margin-bottom: 14px; padding: 14px 16px; }\n    .fact-card h2 { margin: 0 0 6px; font-size: 15px; }\n    .fact-hint { margin: 0 0 10px; font-size: 11px; color: var(--muted); line-height: 1.45; }\n    .fact-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));\n      gap: 5px 7px;\n    }\n    .fact-cell {\n      padding: 5px 7px;\n      border-radius: 8px;\n      border: 1px solid var(--line);\n      background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), transparent);\n      min-height: 42px;\n    }\n    .fact-cell b {\n      display: block;\n      color: var(--muted);\n      font-size: 9px;\n      font-weight: 750;\n      letter-spacing: 0.03em;\n      line-height: 1.15;\n      margin-bottom: 2px;\n    }\n    .fact-cell span {\n      font-weight: 850;\n      font-size: 12.5px;\n      font-variant-numeric: tabular-nums;\n      letter-spacing: -0.02em;\n    }\n    footer { margin-top: 28px; color: var(--muted); font-size: 11px; line-height: 1.5; }\n    @media (max-width: 900px) {\n      .hero, .two, .three { grid-template-columns: 1fr; }\n    }\n\n\n/* 03-kca-story.css */\n#s-wrapped, #s-personas, #s-chapters, #s-calendar { scroll-margin-top: 76px; }\n    .story-headline {\n      margin: 0 0 14px;\n      font-size: clamp(17px, 2.5vw, 21px);\n      line-height: 1.55;\n      font-weight: 650;\n      color: var(--ink);\n      max-width: 48ch;\n    }\n    .wrapped-section { margin-bottom: 20px; }\n    .wrapped-section h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }\n    .wrapped-lede { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }\n    .wrapped-deck {\n      display: grid;\n      gap: 12px;\n      grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));\n      padding: 0;\n    }\n    .wrapped-card {\n      border-radius: 18px;\n      border: 1px solid var(--line);\n      padding: 22px 20px;\n      min-height: 200px;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      background: linear-gradient(155deg, rgba(15, 107, 92, 0.14), rgba(196, 92, 42, 0.08));\n      box-shadow: var(--shadow);\n      position: relative;\n      overflow: hidden;\n    }\n    .wrapped-card::before {\n      content: attr(data-emoji);\n      position: absolute;\n      top: 12px;\n      right: 14px;\n      font-size: 2.4rem;\n      opacity: 0.35;\n      line-height: 1;\n    }\n    .wrapped-card-kicker {\n      font-size: 11px;\n      font-weight: 800;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--muted);\n      margin: 0 0 6px;\n    }\n    .wrapped-card-stat {\n      margin: 0;\n      font-size: clamp(32px, 6vw, 44px);\n      font-weight: 900;\n      letter-spacing: -0.04em;\n      line-height: 1.05;\n      color: var(--ink);\n      word-break: break-word;\n    }\n    .wrapped-card-sub {\n      margin: 10px 0 0;\n      font-size: 13px;\n      line-height: 1.5;\n      color: var(--muted);\n    }\n    .persona-grid {\n      display: grid;\n      gap: 10px;\n      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n    }\n    .persona-chip {\n      padding: 12px 14px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n    }\n    .persona-chip strong {\n      display: block;\n      font-size: 14px;\n      color: var(--ink);\n      margin-bottom: 4px;\n    }\n    .persona-chip em {\n      display: block;\n      font-style: normal;\n      font-size: 12px;\n      font-weight: 800;\n      color: var(--accent);\n      margin-bottom: 4px;\n    }\n    .persona-chip span { font-size: 11px; color: var(--muted); line-height: 1.4; }\n    .chapter-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }\n    .chapter-item {\n      display: grid;\n      grid-template-columns: auto 1fr auto;\n      gap: 10px 14px;\n      align-items: center;\n      padding: 14px 16px;\n      border-radius: 12px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n    }\n    @media (max-width: 560px) {\n      .chapter-item { grid-template-columns: auto 1fr; }\n      .chapter-item .chapter-stat { grid-column: 1 / -1; text-align: left; }\n    }\n    .chapter-badge {\n      font-size: 12px;\n      font-weight: 900;\n      color: var(--accent);\n      min-width: 2.5rem;\n    }\n    .chapter-meta { font-size: 13px; line-height: 1.45; color: var(--ink); }\n    .chapter-meta small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }\n    .chapter-stat { text-align: right; font-size: 13px; font-weight: 750; color: var(--muted); font-variant-numeric: tabular-nums; }\n\n    /* GitHub contribution graph (\uC794\uB514) */\n    :root {\n      --gh-cell-size: 11px;\n      --gh-cell-gap: 3px;\n      --gh-cell-0: #ebedf0;\n      --gh-cell-1: #9be9a8;\n      --gh-cell-2: #40c463;\n      --gh-cell-3: #30a14e;\n      --gh-cell-4: #216e39;\n    }\n    @media (prefers-color-scheme: dark) {\n      :root:not([data-theme=\"light\"]) {\n        --gh-cell-0: #161b22;\n        --gh-cell-1: #0e4429;\n        --gh-cell-2: #006d32;\n        --gh-cell-3: #26a641;\n        --gh-cell-4: #39d353;\n      }\n    }\n    :root[data-theme=\"dark\"] {\n      --gh-cell-0: #161b22;\n      --gh-cell-1: #0e4429;\n      --gh-cell-2: #006d32;\n      --gh-cell-3: #26a641;\n      --gh-cell-4: #39d353;\n    }\n    :root[data-theme=\"light\"] {\n      --gh-cell-0: #ebedf0;\n      --gh-cell-1: #9be9a8;\n      --gh-cell-2: #40c463;\n      --gh-cell-3: #30a14e;\n      --gh-cell-4: #216e39;\n    }\n    .gh-contrib {\n      position: relative;\n      border: 1px solid var(--line);\n      border-radius: 12px;\n      padding: 16px 18px 14px;\n      background: var(--panel);\n    }\n    .gh-cal-tooltip {\n      position: absolute;\n      z-index: 20;\n      transform: translate(-50%, -100%);\n      padding: 6px 10px;\n      border-radius: 8px;\n      font-size: 12px;\n      font-weight: 650;\n      line-height: 1.35;\n      white-space: nowrap;\n      color: #fff;\n      background: #24292f;\n      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.12s ease;\n    }\n    .gh-contrib.gh-tip-on .gh-cal-tooltip { opacity: 1; }\n    :root[data-theme=\"dark\"] .gh-cal-tooltip {\n      background: #f0f6fc;\n      color: #0d1117;\n    }\n    @media (prefers-color-scheme: dark) {\n      :root:not([data-theme=\"light\"]) .gh-cal-tooltip {\n        background: #f0f6fc;\n        color: #0d1117;\n      }\n    }\n    .gh-contrib-summary {\n      margin: 0 0 12px;\n      font-size: 14px;\n      line-height: 1.4;\n      color: var(--muted);\n    }\n    .gh-contrib-summary strong {\n      font-weight: 600;\n      color: var(--ink);\n      font-variant-numeric: tabular-nums;\n    }\n    .gh-contrib-span {\n      display: block;\n      margin-top: 4px;\n      font-size: 11px;\n      color: var(--muted);\n    }\n    .gh-cal-scroll {\n      overflow-x: auto;\n      overflow-y: hidden;\n      max-width: 100%;\n      -webkit-overflow-scrolling: touch;\n      padding-bottom: 2px;\n    }\n    .gh-cal-graph {\n      display: grid;\n      grid-template-areas:\n        \". months\"\n        \"days weeks\";\n      grid-template-columns: max-content max-content;\n      column-gap: 8px;\n      row-gap: 4px;\n      width: max-content;\n      min-width: min(100%, max-content);\n    }\n    .gh-cal-days {\n      grid-area: days;\n      display: grid;\n      grid-template-rows: repeat(7, var(--gh-cell-size));\n      gap: var(--gh-cell-gap);\n      align-items: center;\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      font-size: 9px;\n      line-height: 1;\n      color: var(--muted);\n      padding-right: 2px;\n    }\n    .gh-cal-days span {\n      height: var(--gh-cell-size);\n      display: flex;\n      align-items: center;\n    }\n    .gh-cal-days span:empty { visibility: hidden; }\n    .gh-cal-months {\n      grid-area: months;\n      display: grid;\n      grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n      gap: var(--gh-cell-gap);\n      height: 14px;\n      align-items: end;\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      font-size: 9px;\n      line-height: 1;\n      color: var(--muted);\n    }\n    .gh-cal-month {\n      grid-column: span 1;\n      white-space: nowrap;\n      overflow: visible;\n    }\n    .gh-cal-weeks {\n      grid-area: weeks;\n      display: grid;\n      grid-template-columns: repeat(var(--gh-weeks), var(--gh-cell-size));\n      grid-template-rows: repeat(7, var(--gh-cell-size));\n      gap: var(--gh-cell-gap);\n      grid-auto-flow: column;\n    }\n    .gh-cal-cell {\n      width: var(--gh-cell-size);\n      height: var(--gh-cell-size);\n      border-radius: 2px;\n      background: var(--gh-cell-0);\n      display: block;\n      padding: 0;\n      margin: 0;\n      appearance: none;\n      font: inherit;\n      cursor: default;\n      transition: transform 0.1s ease, box-shadow 0.1s ease, outline 0.1s ease;\n    }\n    .gh-cal-cell[data-date] {\n      cursor: pointer;\n    }\n    .gh-cal-cell[data-date]:hover,\n    .gh-cal-cell[data-date]:focus-visible {\n      transform: scale(1.45);\n      z-index: 5;\n      position: relative;\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel) 80%, transparent);\n    }\n    .gh-cal-cell[data-level=\"1\"] { background: var(--gh-cell-1); }\n    .gh-cal-cell[data-level=\"2\"] { background: var(--gh-cell-2); }\n    .gh-cal-cell[data-level=\"3\"] { background: var(--gh-cell-3); }\n    .gh-cal-cell[data-level=\"4\"] { background: var(--gh-cell-4); }\n    .gh-cal-cell[data-level=\"0\"] { background: var(--gh-cell-0); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }\n    .gh-cal-cell--pad {\n      pointer-events: none;\n      border: none;\n    }\n    .gh-cal-legend {\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: 4px;\n      margin-top: 12px;\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      font-size: 11px;\n      color: var(--muted);\n    }\n    .gh-cal-legend-scale {\n      display: inline-flex;\n      gap: var(--gh-cell-gap);\n      align-items: center;\n      margin: 0 2px;\n    }\n    .gh-cal-legend-scale i {\n      width: var(--gh-cell-size);\n      height: var(--gh-cell-size);\n      border-radius: 2px;\n      display: block;\n      font-style: normal;\n      background: var(--gh-cell-0);\n    }\n    .gh-cal-legend-scale i[data-level=\"1\"] { background: var(--gh-cell-1); }\n    .gh-cal-legend-scale i[data-level=\"2\"] { background: var(--gh-cell-2); }\n    .gh-cal-legend-scale i[data-level=\"3\"] { background: var(--gh-cell-3); }\n    .gh-cal-legend-scale i[data-level=\"4\"] { background: var(--gh-cell-4); }\n\n\n/* 04-kca-charts.css */\n.viz-hero {\n      margin: 0 0 18px;\n      padding: 20px 22px;\n      border-radius: 20px;\n      border: 1px solid var(--glass-border);\n      background: var(--glass);\n      backdrop-filter: blur(14px);\n      -webkit-backdrop-filter: blur(14px);\n      box-shadow: var(--shadow);\n    }\n    .viz-hero h2 {\n      margin: 0 0 6px;\n      font-size: 22px;\n      font-weight: 850;\n      letter-spacing: -0.03em;\n      background: var(--accent-grad);\n      -webkit-background-clip: text;\n      background-clip: text;\n      color: transparent;\n    }\n    .viz-hero p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }\n    .viz-grid {\n      display: grid;\n      gap: 14px;\n      grid-template-columns: repeat(12, 1fr);\n    }\n    .viz-card {\n      grid-column: span 12;\n      container-type: inline-size;\n      container-name: kca-viz;\n      border-radius: 18px;\n      border: 1px solid var(--glass-border);\n      background: var(--glass);\n      backdrop-filter: blur(12px);\n      -webkit-backdrop-filter: blur(12px);\n      padding: 16px 16px 12px;\n      box-shadow: var(--shadow);\n    }\n    @media (min-width: 900px) {\n      .viz-card.span-6 { grid-column: span 6; }\n      .viz-card.span-8 { grid-column: span 8; }\n      .viz-card.span-4 { grid-column: span 4; }\n    }\n    .viz-card h3 {\n      margin: 0 0 4px;\n      font-size: 15px;\n      font-weight: 800;\n      letter-spacing: -0.02em;\n    }\n    .viz-card .viz-hint {\n      margin: 0 0 10px;\n      font-size: 11px;\n      color: var(--muted);\n      line-height: 1.45;\n    }\n    .chart-box {\n      width: 100%;\n      min-height: 280px;\n      height: min(42vh, 360px);\n    }\n    .chart-box.tall { height: min(52vh, 440px); min-height: 320px; }\n    .chart-box.compact { height: 240px; min-height: 220px; }\n    .kw-table-wrap {\n      max-height: 520px;\n      overflow: auto;\n      border: 1px solid var(--line);\n      border-radius: 12px;\n    }\n    .kw-table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 12px;\n    }\n    .kw-table thead th {\n      position: sticky;\n      top: 0;\n      z-index: 1;\n      background: var(--panel-solid);\n      text-align: left;\n      padding: 8px 10px;\n      font-size: 11px;\n      color: var(--muted);\n      border-bottom: 1px solid var(--line);\n    }\n    .kw-table td {\n      padding: 7px 10px;\n      border-bottom: 1px solid var(--line);\n    }\n    .kw-table tbody tr:nth-child(even) { background: rgba(94, 234, 212, 0.04); }\n    .kw-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }\n    .kw-rank { color: var(--muted); width: 2.5rem; }\n\n\n/* 05-kca-ux.css */\n/* \uC139\uC158 \uB124\uBE44 \u2014 \uB9AC\uD329\uD130 \uC2DC \uC0AD\uC81C\uB410\uB358 \uAE30\uBCF8 \uADDC\uCE59 \uBCF5\uAD6C */\n.deck-nav {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px 10px;\n  margin-bottom: 0;\n  padding: 10px 12px;\n  border-radius: 0;\n  border: none;\n  background: transparent;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: none;\n}\n\n.deck-nav-h {\n  font-size: 11px;\n  font-weight: 800;\n  color: var(--muted);\n  margin-right: 4px;\n  letter-spacing: 0.04em;\n  flex: 0 0 auto;\n}\n\n.deck-nav a {\n  font-size: 12px;\n  font-weight: 700;\n  padding: 6px 11px;\n  border-radius: var(--radius-pill);\n  border: 1px solid var(--line);\n  background: var(--panel-solid);\n  color: var(--ink);\n  text-decoration: none;\n  transition:\n    transform 0.18s var(--ease-out),\n    border-color 0.18s var(--ease-out),\n    background 0.18s var(--ease-out);\n}\n\n.deck-nav a:hover {\n  border-color: var(--accent);\n  background: color-mix(in srgb, var(--accent) 10%, var(--panel-solid));\n  color: var(--accent);\n  transform: translateY(-1px);\n}\n\n.kca-topbar {\n      position: sticky;\n      top: 0;\n      z-index: 40;\n      margin-bottom: 16px;\n      border-radius: 14px;\n      border: 1px solid var(--line);\n      background: var(--glass);\n      backdrop-filter: blur(14px);\n      -webkit-backdrop-filter: blur(14px);\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);\n      overflow: hidden;\n    }\n    .kca-progress {\n      height: 3px;\n      background: var(--line);\n    }\n    .kca-progress-fill {\n      display: block;\n      height: 100%;\n      width: 0%;\n      background: var(--accent-grad);\n      transition: width 0.12s ease-out;\n    }\n    .kca-topbar .toolbar {\n      margin: 0;\n      border: none;\n      border-radius: 0;\n      box-shadow: none;\n      border-bottom: 1px solid var(--line);\n    }\n    .deck-nav-shell > summary {\n      display: none;\n      cursor: pointer;\n      padding: 10px 14px;\n      font-size: 13px;\n      font-weight: 800;\n      color: var(--ink);\n      list-style: none;\n      border-bottom: 1px solid var(--line);\n    }\n    .deck-nav-shell > summary::-webkit-details-marker { display: none; }\n    .deck-nav-shell > summary::after {\n      content: \"\u25BE\";\n      float: right;\n      color: var(--muted);\n      font-size: 11px;\n    }\n    .deck-nav-shell:not([open]) > summary::after { content: \"\u25B8\"; }\n    .deck-nav-shell .deck-nav {\n      margin: 0;\n      border: none;\n      border-radius: 0;\n      box-shadow: none;\n      position: static;\n    }\n    .deck-nav a.is-active {\n      border-color: var(--accent);\n      background: color-mix(in srgb, var(--accent) 14%, transparent);\n      color: var(--accent);\n      box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);\n    }\n    .theme-btn.is-active {\n      border-color: var(--accent);\n      background: color-mix(in srgb, var(--accent) 12%, transparent);\n      color: var(--accent);\n      font-weight: 800;\n    }\n    .hero-jumps {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      margin-top: 14px;\n    }\n    .hero-jump {\n      font-size: 12px;\n      font-weight: 750;\n      padding: 7px 12px;\n      border-radius: 999px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      color: var(--ink);\n      text-decoration: none;\n      transition: border-color 0.15s ease, transform 0.15s ease;\n    }\n    .hero-jump:hover {\n      border-color: var(--accent);\n      transform: translateY(-1px);\n    }\n    .hero-jump strong { color: var(--accent); font-weight: 850; }\n    .kca-back-top {\n      position: fixed;\n      right: max(16px, env(safe-area-inset-right));\n      bottom: max(16px, env(safe-area-inset-bottom));\n      z-index: 50;\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 1px solid var(--line);\n      background: var(--panel-solid);\n      color: var(--accent);\n      font-size: 18px;\n      font-weight: 900;\n      cursor: pointer;\n      box-shadow: var(--shadow);\n      transition: opacity 0.2s ease, transform 0.2s ease;\n    }\n    .kca-back-top:not([hidden]):hover { transform: translateY(-2px); border-color: var(--accent); }\n    .kca-back-top[hidden] { display: none; }\n    .kw-css-fold {\n      margin-bottom: 14px;\n      border-radius: 14px;\n      border: 1px solid var(--line);\n      background: var(--panel);\n      overflow: hidden;\n    }\n    .kw-css-fold > summary {\n      cursor: pointer;\n      padding: 12px 16px;\n      font-size: 13px;\n      font-weight: 800;\n      color: var(--ink);\n      list-style: none;\n    }\n    .kw-css-fold > summary::-webkit-details-marker { display: none; }\n    .kw-css-fold > summary small {\n      display: block;\n      margin-top: 4px;\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--muted);\n    }\n    .kw-css-fold .kw-css-body { padding: 0 16px 16px; }\n    @media (max-width: 720px) {\n      .deck-nav-shell > summary { display: block; }\n      .deck-nav-shell:not([open]) .deck-nav { display: none; }\n      .deck-nav-shell .deck-nav {\n        max-height: min(42vh, 280px);\n        overflow-y: auto;\n        overscroll-behavior: contain;\n      }\n      main { width: min(1200px, calc(100% - 20px)); padding: 20px 0 48px; }\n    }\n    @media (hover: none) {\n      .card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }\n    }\n    /* scroll-margin: 06-kca-responsive.css --kca-topbar-offset */\n\n\n/* 06-kca-responsive.css */\n/* kca \uBC18\uC751\uD615 \u2014 \uBAA8\uBC14\uC77C \u00B7 \uD0DC\uBE14\uB9BF \u00B7 \uB370\uC2A4\uD06C\uD1B1 \u00B7 4K + \uCEE8\uD14C\uC774\uB108 \uCFFC\uB9AC */\n:root {\n  --kca-content-max: 72rem;\n  --kca-gutter: clamp(12px, 2.8vw, 28px);\n  --kca-topbar-offset: 112px;\n  --kca-section-gap: clamp(14px, 2vw, 22px);\n}\n\n@media (min-width: 600px) {\n  :root {\n    --kca-topbar-offset: 104px;\n  }\n}\n\n@media (min-width: 1024px) {\n  :root {\n    --kca-content-max: 80rem;\n    --kca-topbar-offset: 92px;\n  }\n}\n\n@media (min-width: 1440px) {\n  :root {\n    --kca-content-max: 84rem;\n  }\n}\n\n@media (min-width: 1920px) {\n  :root {\n    --kca-content-max: 92rem;\n    --kca-gutter: clamp(20px, 2vw, 40px);\n    --kca-section-gap: 24px;\n  }\n}\n\n@media (min-width: 2560px) {\n  :root {\n    --kca-content-max: 100rem;\n  }\n}\n\nmain {\n  width: min(var(--kca-content-max), calc(100% - var(--kca-gutter) * 2));\n  padding-block: clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px);\n}\n\n#s-story,\n#s-wrapped,\n#s-personas,\n#s-chapters,\n#s-calendar,\n#s-facts,\n#s-hl,\n#s-ai,\n#s-topics,\n#s-viz,\n#s-charts,\n#s-help {\n  scroll-margin-top: var(--kca-topbar-offset);\n}\n\n.report-section {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 520px;\n}\n\n.kca-topbar,\n#s-story,\n#s-wrapped {\n  content-visibility: visible;\n}\n\n/* \u2500\u2500 \uCEE8\uD14C\uC774\uB108 \uCFFC\uB9AC: \uCC28\uD2B8 \uCE74\uB4DC \u2500\u2500 */\n.viz-card {\n  container-type: inline-size;\n  container-name: kca-viz;\n}\n\n@container kca-viz (max-width: 22rem) {\n  .chart-box {\n    height: min(36vh, 260px);\n    min-height: 200px;\n  }\n  .chart-box.tall {\n    height: min(42vh, 300px);\n    min-height: 220px;\n  }\n  .viz-card h3 {\n    font-size: 14px;\n  }\n}\n\n@container kca-viz (min-width: 22rem) {\n  .chart-box.compact {\n    height: min(32vh, 280px);\n  }\n}\n\n/* \u2500\u2500 \uBAA8\uBC14\uC77C (\u2264599px) \u2500\u2500 */\n@media (max-width: 599px) {\n  .hero {\n    grid-template-columns: 1fr;\n    gap: 16px;\n    padding-bottom: 20px;\n  }\n\n  .hero-jumps {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .hero-jump {\n    text-align: center;\n    justify-content: center;\n  }\n\n  .badge-row {\n    gap: 6px;\n  }\n\n  .badge {\n    font-size: 11px;\n    padding: 5px 8px;\n  }\n\n  .fact-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 6px;\n  }\n\n  .fact-cell b {\n    font-size: 8px;\n  }\n\n  .fact-cell span {\n    font-size: 11px;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: 1fr;\n  }\n\n  .wrapped-card {\n    min-height: 168px;\n    padding: 18px 16px;\n  }\n\n  .wrapped-card-stat {\n    font-size: clamp(28px, 10vw, 36px);\n  }\n\n  .chart-box {\n    height: 240px;\n    min-height: 200px;\n  }\n\n  .chart-box.tall {\n    height: min(44vh, 300px);\n    min-height: 220px;\n  }\n\n  .viz-hero {\n    padding: 16px;\n  }\n\n  .viz-hero h2 {\n    font-size: 18px;\n  }\n\n  .bar-row {\n    grid-template-columns: minmax(56px, 0.9fr) minmax(0, 2fr) 44px;\n    gap: 6px;\n  }\n\n  .deck-nav a {\n    font-size: 11px;\n    padding: 5px 9px;\n  }\n\n  .deck-nav-h {\n    width: 100%;\n    margin-bottom: 2px;\n  }\n}\n\n/* \u2500\u2500 \uD0DC\uBE14\uB9BF (600\u20131023px) \u2500\u2500 */\n@media (min-width: 600px) and (max-width: 1023px) {\n  .hero {\n    grid-template-columns: 1fr;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .fact-grid {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .insight-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .two {\n    grid-template-columns: 1fr;\n  }\n\n  .three {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .chart-box {\n    height: min(40vh, 320px);\n  }\n}\n\n/* \u2500\u2500 \uB370\uC2A4\uD06C\uD1B1 (1024\u20131919px) \u2500\u2500 */\n@media (min-width: 1024px) {\n  .hero {\n    grid-template-columns: 1.35fr 1fr;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n  }\n\n  .fact-grid {\n    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));\n  }\n}\n\n/* \u2500\u2500 4K / \uC6B8\uD2B8\uB77C\uC640\uC774\uB4DC (\u22651920px) \u2500\u2500 */\n@media (min-width: 1920px) {\n  h1 {\n    font-size: clamp(2.25rem, 1.6vw + 1rem, 3.25rem);\n  }\n\n  .room-title {\n    font-size: clamp(1.25rem, 0.8vw + 0.75rem, 1.75rem);\n  }\n\n  .story-headline {\n    font-size: clamp(1.1rem, 0.5vw + 0.85rem, 1.35rem);\n    max-width: 56ch;\n  }\n\n  .viz-grid {\n    gap: 18px;\n  }\n\n  .viz-card {\n    padding: 18px 20px 14px;\n  }\n\n  .wrapped-deck {\n    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n    gap: 16px;\n  }\n\n  .wrapped-card-stat {\n    font-size: clamp(36px, 3vw, 48px);\n  }\n\n  .card {\n    padding: 20px 24px;\n  }\n\n  .deck-nav a {\n    font-size: 13px;\n    padding: 7px 13px;\n  }\n}\n\n/* \uC2A4\uD06C\uB864 \uC9C4\uC785 \uBAA8\uC158 (\uC811\uADFC\uC131: reduced-motion \uC2DC UX \uC2A4\uD06C\uB9BD\uD2B8\uAC00 \uBE44\uD65C\uC131) */\n@media (prefers-reduced-motion: no-preference) {\n  .kca-reveal {\n    opacity: 0;\n    transform: translateY(14px);\n    transition:\n      opacity 0.55s var(--ease-out),\n      transform 0.55s var(--ease-out);\n    transition-delay: var(--reveal-delay, 0ms);\n  }\n\n  .kca-reveal.is-inview {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n/* \uBAA8\uBC14\uC77C \uB9D0\uD48D\uC120 \uB9F5 \u2014 \uB7AD\uD0B9 \uB9AC\uC2A4\uD2B8 */\n@media (max-width: 559px) {\n  .sc-plot {\n    padding: 12px 10px 14px;\n    background-image: none;\n    min-height: 0;\n  }\n\n  .sc-grid-label,\n  .sc-quadrant {\n    display: none;\n  }\n\n  .sc-plot-list {\n    gap: 8px;\n  }\n\n  .bubble-node {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 12px;\n    border-radius: 12px;\n    border: 1px solid var(--line);\n    background: var(--panel-solid);\n  }\n\n  .bubble-shape {\n    display: none;\n  }\n\n  .bubble-content {\n    display: contents;\n  }\n\n  .bubble-content strong {\n    grid-column: 1;\n    white-space: normal;\n    font-size: 12px;\n  }\n\n  .bubble-content .bubble-pct {\n    grid-column: 2;\n    grid-row: 1 / span 2;\n    font-size: 18px;\n    text-align: right;\n  }\n\n  .bubble-content small {\n    grid-column: 1;\n    font-size: 10px;\n  }\n}\n\n/* \uD130\uCE58 \uD0C0\uAE43 */\n@media (hover: none) and (pointer: coarse) {\n  .theme-btn,\n  .deck-nav a,\n  .hero-jump {\n    min-height: 44px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .gh-cal-cell {\n    min-width: 44px;\n    min-height: 44px;\n  }\n}\n\n\n/* 07-kca-oled-glass.css */\n/* OLED \uAE00\uB77C\uC2A4\uBAA8\uD53C\uC998 \u00B7 \uAE00\uB85C\uC6B0 \u00B7 \uB9C8\uC774\uD06C\uB85C \uBAA8\uC158 (\uCD5C\uC0C1\uC704 \uB808\uC774\uC5B4) */\n\n/* \u2014\u2014 \uACF5\uD1B5 \uAE00\uB77C\uC2A4 \uD328\uB110 \u2014\u2014 */\nbody.kca-oled .card,\nbody.kca-oled .viz-card,\nbody.kca-oled .viz-hero,\nbody.kca-oled .kw-css-fold,\nbody.kca-oled .toolbar {\n  position: relative;\n  background: var(--glass);\n  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));\n  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));\n  border: 1px solid var(--glass-border);\n  box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklab, var(--glass-highlight) 40%, transparent) inset;\n  transition:\n    transform 0.35s var(--ease-spring),\n    box-shadow 0.35s var(--ease-out),\n    border-color 0.3s var(--ease-out);\n}\n\nbody.kca-oled .card::before,\nbody.kca-oled .viz-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  padding: 1px;\n  background: var(--border-shine);\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  pointer-events: none;\n  opacity: 0.65;\n}\n\nbody.kca-oled .card::after,\nbody.kca-oled .wrapped-card::after,\nbody.kca-oled .viz-card::after,\nbody.kca-oled .insight-hero::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: radial-gradient(\n    520px circle at var(--kca-spot-x, 50%) var(--kca-spot-y, 30%),\n    var(--spot-glow),\n    transparent 58%\n  );\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.35s var(--ease-out);\n}\n\nbody.kca-oled .card:hover::after,\nbody.kca-oled .wrapped-card:hover::after,\nbody.kca-oled .viz-card:hover::after {\n  opacity: 0.85;\n}\n\nbody.kca-oled .card:hover,\nbody.kca-oled .viz-card:hover {\n  transform: translateY(-4px) scale(1.005);\n  border-color: color-mix(in oklab, var(--accent) 45%, var(--glass-border));\n  box-shadow: var(--shadow), var(--shadow-glow);\n}\n\n/* \u2014\u2014 \uD788\uC5B4\uB85C \u2014\u2014 */\nbody.kca-oled .hero h1 {\n  background: var(--accent-grad);\n  background-size: 200% auto;\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n  animation: kca-shimmer 8s linear infinite;\n  filter: drop-shadow(0 0 28px color-mix(in oklab, var(--accent) 35%, transparent));\n}\n\nbody.kca-oled .room-title {\n  color: var(--ink);\n  text-shadow: 0 0 24px color-mix(in oklab, var(--accent) 40%, transparent);\n}\n\nbody.kca-oled .story-headline {\n  color: color-mix(in oklab, var(--ink) 92%, var(--accent));\n}\n\nbody.kca-oled .badge {\n  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line));\n  background: color-mix(in oklab, var(--glass) 80%, var(--accent) 8%);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 12%, transparent);\n  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;\n}\n\nbody.kca-oled .badge:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 0 22px color-mix(in oklab, var(--accent) 22%, transparent);\n}\n\n/* \u2014\u2014 Wrapped \uCE74\uB4DC \u2014\u2014 */\nbody.kca-oled .wrapped-card {\n  border: 1px solid var(--glass-border);\n  background:\n    linear-gradient(155deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 42%),\n    linear-gradient(220deg, color-mix(in oklab, var(--warm) 12%, transparent), transparent 50%),\n    var(--glass);\n  backdrop-filter: blur(20px) saturate(1.5);\n  -webkit-backdrop-filter: blur(20px) saturate(1.5);\n  box-shadow: var(--shadow), 0 0 40px color-mix(in oklab, var(--accent) 8%, transparent);\n  overflow: hidden;\n  transition:\n    transform 0.4s var(--ease-spring),\n    box-shadow 0.4s var(--ease-out);\n}\n\nbody.kca-oled .wrapped-card:hover {\n  transform: translateY(-6px) scale(1.02);\n  box-shadow: var(--shadow), 0 0 56px color-mix(in oklab, var(--accent) 22%, transparent);\n}\n\nbody.kca-oled .wrapped-card-stat {\n  background: var(--accent-grad);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\nbody.kca-oled .wrapped-card::before {\n  opacity: 0.28;\n  filter: drop-shadow(0 0 20px var(--glow));\n}\n\n/* \u2014\u2014 \uD329\uD2B8 \u00B7 \uC778\uC0AC\uC774\uD2B8 \u2014\u2014 */\nbody.kca-oled .fact-hero-cell {\n  background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 14%, transparent), transparent);\n  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line));\n  box-shadow: 0 0 24px color-mix(in oklab, var(--accent) 10%, transparent);\n}\n\nbody.kca-oled .fact-hero-cell span {\n  background: var(--accent-grad);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\nbody.kca-oled .stat-sample-badge {\n  border-style: solid;\n  border-color: color-mix(in oklab, var(--accent2) 35%, var(--line));\n  background: var(--accent-grad-soft);\n  box-shadow: 0 0 20px color-mix(in oklab, var(--accent2) 8%, transparent);\n}\n\nbody.kca-oled .ins-metric {\n  background: var(--glass);\n  backdrop-filter: blur(14px);\n  -webkit-backdrop-filter: blur(14px);\n  border: 1px solid var(--glass-border);\n  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s;\n}\n\nbody.kca-oled .ins-metric:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 12px 32px color-mix(in oklab, var(--accent) 15%, transparent);\n}\n\nbody.kca-oled .ins-m-val {\n  background: var(--accent-grad);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\nbody.kca-oled .insight-hero::before {\n  background: radial-gradient(closest-side, var(--glow-violet), transparent 72%);\n  animation: kca-aurora 14s ease-in-out infinite alternate;\n}\n\nbody.kca-oled .rh-ring {\n  box-shadow:\n    0 0 0 1px var(--glass-border) inset,\n    0 0 32px color-mix(in oklab, var(--accent) 35%, transparent);\n  animation: kca-pulse-glow 3.5s ease-in-out infinite;\n}\n\nbody.kca-oled .pace-ribbon {\n  border: 1px solid color-mix(in oklab, var(--warm) 40%, var(--line));\n  background: linear-gradient(\n    120deg,\n    color-mix(in oklab, var(--warm) 16%, transparent),\n    color-mix(in oklab, var(--accent) 12%, transparent)\n  );\n  box-shadow: 0 0 28px color-mix(in oklab, var(--warm) 12%, transparent);\n}\n\n/* \u2014\u2014 \uB9C9\uB300 \u00B7 \uD558\uC774\uB77C\uC774\uD2B8 \u2014\u2014 */\nbody.kca-oled .bar-fill {\n  background: var(--accent-grad);\n  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 45%, transparent);\n}\n\nbody.kca-oled .highlights li {\n  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line));\n  background: linear-gradient(\n    120deg,\n    color-mix(in oklab, var(--accent) 12%, var(--glass)),\n    color-mix(in oklab, var(--warm) 8%, var(--glass))\n  );\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n\n/* \u2014\u2014 \uD0D1\uBC14 \u00B7 \uB124\uBE44 \u2014\u2014 */\nbody.kca-oled .kca-topbar {\n  border: 1px solid var(--glass-border);\n  background: var(--glass-strong);\n  backdrop-filter: blur(28px) saturate(1.6);\n  -webkit-backdrop-filter: blur(28px) saturate(1.6);\n  box-shadow:\n    0 16px 48px rgba(0, 0, 0, 0.35),\n    0 0 0 1px color-mix(in oklab, var(--glass-highlight) 30%, transparent) inset;\n}\n\nbody.kca-oled .kca-progress-fill {\n  background: var(--accent-grad);\n  background-size: 200% auto;\n  animation: kca-shimmer 4s linear infinite;\n  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 55%, transparent);\n}\n\nbody.kca-oled .deck-nav a,\nbody.kca-oled .hero-jump,\nbody.kca-oled .theme-btn {\n  background: var(--glass);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  border: 1px solid var(--glass-border);\n  transition:\n    transform 0.22s var(--ease-spring),\n    border-color 0.2s,\n    box-shadow 0.22s,\n    color 0.2s;\n}\n\nbody.kca-oled .deck-nav a:hover,\nbody.kca-oled .hero-jump:hover,\nbody.kca-oled .theme-btn:hover {\n  border-color: var(--accent);\n  box-shadow: 0 0 20px color-mix(in oklab, var(--accent) 25%, transparent);\n  transform: translateY(-2px);\n}\n\nbody.kca-oled .deck-nav a.is-active,\nbody.kca-oled .theme-btn.is-active {\n  border-color: color-mix(in oklab, var(--accent) 60%, var(--glass-border));\n  background: color-mix(in oklab, var(--accent) 16%, var(--glass));\n  color: var(--accent);\n  box-shadow:\n    0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent),\n    0 0 24px color-mix(in oklab, var(--accent) 20%, transparent);\n}\n\nbody.kca-oled .kca-back-top {\n  background: var(--glass-strong);\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));\n  box-shadow: var(--shadow-glow);\n}\n\nbody.kca-oled .kca-back-top:hover {\n  animation: kca-pulse-glow 1.2s ease-in-out;\n}\n\n/* \u2014\u2014 \uCC28\uD2B8 \uB371 \u2014\u2014 */\nbody.kca-oled .viz-hero h2,\nbody.kca-oled h2.section-glow {\n  background: var(--accent-grad);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\nbody.kca-oled .chart-box {\n  border-radius: 14px;\n  background: color-mix(in oklab, var(--oled-deep) 40%, transparent);\n  box-shadow: inset 0 0 0 1px var(--line);\n}\n\nbody.kca-oled .daypart-bar {\n  box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 8%, transparent);\n}\n\nbody.kca-oled .dp-seg {\n  filter: saturate(1.15);\n  box-shadow: 0 0 8px color-mix(in oklab, currentColor 20%, transparent);\n}\n\n/* \u2014\u2014 \uD398\uB974\uC18C\uB098 \u00B7 \uCC55\uD130 \u2014\u2014 */\nbody.kca-oled .persona-chip,\nbody.kca-oled .chapter-item,\nbody.kca-oled .arc-chip {\n  background: var(--glass);\n  backdrop-filter: blur(14px);\n  -webkit-backdrop-filter: blur(14px);\n  border: 1px solid var(--glass-border);\n  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s;\n}\n\nbody.kca-oled .persona-chip:hover,\nbody.kca-oled .chapter-item:hover {\n  transform: translateX(4px);\n  box-shadow: -4px 0 24px color-mix(in oklab, var(--accent) 12%, transparent);\n}\n\nbody.kca-oled .persona-chip em {\n  text-shadow: 0 0 16px color-mix(in oklab, var(--accent) 40%, transparent);\n}\n\n/* \u2014\u2014 \uC2A4\uD06C\uB864 \uB9AC\uBE4C \uAC15\uD654 \u2014\u2014 */\n@media (prefers-reduced-motion: no-preference) {\n  body.kca-oled .kca-reveal {\n    opacity: 0;\n    transform: translateY(22px) scale(0.98);\n    filter: blur(6px);\n    transition:\n      opacity 0.65s var(--ease-out),\n      transform 0.65s var(--ease-spring),\n      filter 0.65s var(--ease-out);\n    transition-delay: var(--reveal-delay, 0ms);\n  }\n\n  body.kca-oled .kca-reveal.is-inview {\n    opacity: 1;\n    transform: none;\n    filter: none;\n  }\n}\n\n/* \u2014\u2014 \uD14C\uB9C8 \uBC84\uD2BC \uD074\uB9AD \uB9AC\uD50C \u2014\u2014 */\nbody.kca-oled .theme-btn.kca-ripple {\n  animation: kca-ripple 0.45s var(--ease-out);\n}\n\n@keyframes kca-ripple {\n  0% {\n    box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent);\n  }\n  100% {\n    box-shadow: 0 0 0 14px transparent;\n  }\n}\n\n@media (hover: none) {\n  body.kca-oled .card:hover,\n  body.kca-oled .wrapped-card:hover,\n  body.kca-oled .viz-card:hover {\n    transform: none;\n  }\n\n  body.kca-oled .card::after,\n  body.kca-oled .wrapped-card::after,\n  body.kca-oled .viz-card::after {\n    opacity: 0;\n  }\n}\n\n:root[data-theme=\"light\"] body.kca-oled .rh-ring {\n  animation: none;\n}\n\n";