@leterhong/multichat 1.6.0

package/.agents/skills/wanghong-handwritten-ppt/examples/deepseek-v4-flash/style.css

@@ -0,0 +1,897 @@
+:root {
+  --paper: #f6f5ee;
+  --ink: #171a46;
+  --ink-soft: #3f4260;
+  --blue: #1f54d8;
+  --magenta: #c52563;
+  --green: #4ce52e;
+  --yellow: #f4ec35;
+  --coral: #ef8e91;
+  --purple: #6e50a5;
+  --sky: #74ace7;
+  --hand-font: "HanziPen SC";
+  --bg: var(--paper);
+  --bg-soft: var(--paper);
+  --surface: transparent;
+  --surface-2: transparent;
+  --border: color-mix(in srgb, var(--ink) 18%, transparent);
+  --text-1: var(--ink);
+  --text-2: var(--ink-soft);
+  --text-3: color-mix(in srgb, var(--ink) 58%, transparent);
+  --accent: var(--magenta);
+  --accent-2: var(--blue);
+  --radius: 0;
+  --shadow: none;
+  --font-sans: var(--hand-font);
+  --font-display: var(--hand-font);
+  --font-mono: var(--hand-font);
+  --font-serif: var(--hand-font);
+  --letter-tight: .02em;
+  --letter-normal: .02em;
+}
+
+.progress-bar {
+  display: none;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--paper);
+}
+
+body {
+  color: var(--ink);
+  font-family: var(--hand-font);
+}
+
+.deck {
+  aspect-ratio: 16 / 9;
+  background: var(--paper);
+}
+
+.slide {
+  padding: 62px 86px 56px;
+  justify-content: flex-start;
+  background: transparent;
+  transition: opacity .25s ease;
+  transform: none;
+}
+
+.slide.is-prev {
+  transform: none;
+}
+
+.hand-title {
+  display: inline-block;
+  width: max-content;
+  max-width: 100%;
+  margin: 0;
+  color: var(--ink);
+  font-size: 45px;
+  font-weight: 500;
+  line-height: 1.18;
+  letter-spacing: .04em;
+}
+
+.title-line {
+  width: 100%;
+  height: 4px;
+  margin-top: 8px;
+  background: var(--magenta);
+  border-radius: 55% 45% 48% 52%;
+  transform: rotate(-.15deg);
+}
+
+.cover {
+  align-items: center;
+  text-align: center;
+  padding-top: 166px;
+}
+
+.cover .hand-title {
+  font-size: 54px;
+  white-space: nowrap;
+}
+
+.cover .title-line {
+  height: 4px;
+}
+
+.cover-meta {
+  margin-top: 90px;
+  display: grid;
+  gap: 38px;
+  font-size: 31px;
+  line-height: 1;
+}
+
+.page-heading {
+  display: inline-block;
+  margin-bottom: 38px;
+}
+
+.page-heading .hand-title {
+  font-size: 40px;
+}
+
+.page-heading .title-line {
+  width: 102%;
+  height: 3px;
+  background: var(--blue);
+}
+
+.note-line {
+  margin: 0;
+  font-size: 31px;
+  line-height: 1.5;
+}
+
+.small-note {
+  font-size: 23px;
+  line-height: 1.35;
+}
+
+.ink-blue { color: var(--blue); }
+.ink-magenta { color: var(--magenta); }
+.ink-green { color: #238a24; }
+
+.marker {
+  display: inline-block;
+  padding: 0 .2em .06em;
+  border-radius: 42% 55% 46% 54%;
+  color: var(--ink);
+}
+
+.marker-yellow { background: color-mix(in srgb, var(--yellow) 88%, transparent); }
+.marker-green { background: color-mix(in srgb, var(--green) 84%, transparent); }
+.marker-coral { background: color-mix(in srgb, var(--coral) 68%, transparent); }
+
+.thin-box {
+  border: 3px solid var(--magenta);
+  padding: 15px 22px 13px;
+  transform: rotate(-.12deg);
+}
+
+.s2-layout {
+  display: grid;
+  grid-template-columns: 48% 52%;
+  align-items: center;
+  min-height: 680px;
+}
+
+.scatter-copy {
+  display: grid;
+  gap: 31px;
+  align-content: center;
+  padding-left: 34px;
+}
+
+.scatter-copy .equation {
+  width: max-content;
+  margin-top: 18px;
+  color: var(--magenta);
+  font-size: 34px;
+}
+
+.diagram {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.diagram text {
+  font-family: var(--hand-font);
+  fill: var(--ink);
+}
+
+.scribble {
+  fill: none;
+  stroke: var(--ink);
+  stroke-width: 3.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: url(#wobble);
+}
+
+.scribble-blue { stroke: var(--blue); }
+.scribble-magenta { stroke: var(--magenta); }
+.scribble-green { stroke: #2aaf2d; }
+.scribble-coral { stroke: #d76569; }
+
+.quant-layout {
+  display: grid;
+  grid-template-columns: 55% 45%;
+  gap: 40px;
+  align-items: center;
+  min-height: 650px;
+}
+
+.quant-copy {
+  display: grid;
+  gap: 34px;
+  align-content: center;
+}
+
+.quant-copy .thin-box {
+  width: max-content;
+  margin-top: 12px;
+  font-size: 34px;
+}
+
+.conclusion-arrow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  color: var(--blue);
+  font-size: 30px;
+}
+
+.conclusion-arrow strong {
+  color: var(--ink);
+  font-weight: 500;
+}
+
+.choice-layout {
+  display: grid;
+  grid-template-columns: 52% 48%;
+  gap: 22px;
+  align-items: center;
+  min-height: 600px;
+}
+
+.choice-list {
+  display: grid;
+  gap: 31px;
+  padding-left: 20px;
+}
+
+.choice-row {
+  display: grid;
+  grid-template-columns: 165px 44px 1fr;
+  align-items: baseline;
+  column-gap: 12px;
+  font-size: 29px;
+  line-height: 1.3;
+}
+
+.choice-row .arrow {
+  color: var(--blue);
+  font-size: 36px;
+}
+
+.choice-result {
+  position: absolute;
+  left: 260px;
+  right: 230px;
+  bottom: 42px;
+  padding: 12px 18px 10px;
+  border: 3px solid var(--magenta);
+  color: var(--magenta);
+  text-align: center;
+  font-size: 31px;
+  line-height: 1.25;
+  transform: rotate(.08deg);
+}
+
+.ann {
+  --ann-font: var(--hand-font);
+  --ann-color: var(--magenta);
+  --ann-label-max-width: 220px;
+}
+
+.ann::after {
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 1.1;
+  letter-spacing: .02em;
+}
+
+.annotation-anchor {
+  width: 1px;
+  height: 1px;
+  min-width: 1px;
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+  color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.ann-blue { --ann-color: var(--blue); }
+.ann-green { --ann-color: #248c2a; }
+.ann-red { --ann-color: var(--magenta); }
+.ann-amber { --ann-color: #9f7700; }
+
+.progress-bar,
+.deck-header,
+.deck-footer {
+  display: none !important;
+}
+
+@media (max-aspect-ratio: 16/9) {
+  .deck {
+    width: 100vw;
+    height: 56.25vw;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+/* Full-deck layouts */
+.release-sub {
+  margin: 6px 0 36px 54px;
+}
+
+.release-flow {
+  display: grid;
+  grid-template-columns: 1fr 90px 1.45fr 90px 1fr;
+  align-items: center;
+  gap: 18px;
+  margin: 42px 80px 0;
+}
+
+.sketch-box {
+  padding: 22px 30px 18px;
+  border: 3px solid var(--ink);
+  text-align: center;
+  font-size: 40px;
+  line-height: 1.1;
+  transform: rotate(-.2deg);
+}
+
+.flow-arrow {
+  color: var(--blue);
+  text-align: center;
+  font-size: 56px;
+  line-height: 1;
+}
+
+.training-notes {
+  display: flex;
+  justify-content: center;
+  gap: 64px;
+  margin-top: 42px;
+  font-size: 28px;
+}
+
+.training-notes span {
+  padding-bottom: 4px;
+  border-bottom: 2px solid var(--blue);
+}
+
+.wide-result {
+  position: absolute;
+  left: 310px;
+  right: 310px;
+  bottom: 68px;
+  padding: 14px 22px 11px;
+  border: 3px solid var(--magenta);
+  color: var(--magenta);
+  text-align: center;
+  font-size: 31px;
+  line-height: 1.25;
+  transform: rotate(-.08deg);
+}
+
+.compact-result {
+  left: 610px;
+  right: 610px;
+}
+
+.model-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 64px;
+  margin: 54px 64px 0;
+  align-items: start;
+}
+
+.model-stats > div {
+  display: grid;
+  justify-items: center;
+  gap: 13px;
+}
+
+.model-stats strong {
+  font-size: 62px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.model-stats span {
+  font-size: 26px;
+}
+
+.local-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 80px;
+  align-items: center;
+  margin: 62px 110px 0;
+}
+
+.local-boundary {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 35px 84px 35px auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 195px;
+  padding: 44px 35px 26px;
+  border: 3px solid var(--blue);
+  border-radius: 42% 39% 46% 41%;
+  font-size: 25px;
+}
+
+.boundary-title {
+  position: absolute;
+  top: -25px;
+  left: 42%;
+  padding: 0 18px;
+  background: var(--paper);
+  font-size: 30px;
+}
+
+.server-doodle {
+  font-family: var(--font-mono);
+  font-size: 64px;
+}
+
+.ram-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 8px;
+  text-align: center;
+  font-size: 22px;
+}
+
+.why-local {
+  display: grid;
+  gap: 35px;
+  width: 740px;
+  margin: 42px 0 0 70px;
+}
+
+.why-line {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 26px;
+  align-items: center;
+}
+
+.why-line > span {
+  text-align: center;
+  font-size: 32px;
+}
+
+.why-line p {
+  margin: 0;
+  font-size: 28px;
+}
+
+.model-weight-compare {
+  position: absolute;
+  top: 236px;
+  right: 92px;
+  width: 760px;
+  display: grid;
+  gap: 42px;
+}
+
+.model-weight-compare > div {
+  display: grid;
+  grid-template-columns: 150px 1fr 170px;
+  gap: 18px;
+  align-items: center;
+  font-size: 25px;
+}
+
+.model-weight-compare i {
+  display: block;
+  height: 20px;
+  border: 2px solid var(--ink);
+  background: repeating-linear-gradient(120deg, transparent 0 12px, color-mix(in srgb, var(--blue) 34%, transparent) 12px 16px);
+}
+
+.model-weight-compare .weight-short {
+  width: 52%;
+  border-color: var(--magenta);
+  background: repeating-linear-gradient(120deg, transparent 0 12px, color-mix(in srgb, var(--green) 40%, transparent) 12px 16px);
+}
+
+.model-weight-compare em {
+  font-style: normal;
+  color: var(--magenta);
+}
+
+.deploy-split {
+  display: grid;
+  grid-template-columns: 48% 52%;
+  align-items: center;
+  min-height: 620px;
+}
+
+.deploy-notes {
+  display: grid;
+  gap: 42px;
+  padding-left: 55px;
+}
+
+.gpu-diagram {
+  width: 90%;
+  margin: 0 auto;
+}
+
+.pd-layout {
+  display: grid;
+  grid-template-columns: 1fr 300px 1fr;
+  gap: 45px;
+  align-items: center;
+  margin-top: 110px;
+}
+
+.gpu-group {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, 110px);
+  gap: 20px;
+  justify-content: center;
+  padding: 48px 32px 32px;
+  border: 3px solid var(--blue);
+  transform: rotate(-.2deg);
+}
+
+.gpu-group:last-child { border-color: var(--magenta); }
+
+.gpu-group span {
+  position: absolute;
+  top: -28px;
+  left: 50%;
+  padding: 0 18px;
+  background: var(--paper);
+  font-size: 34px;
+  transform: translateX(-50%);
+}
+
+.gpu-group b {
+  padding: 16px 10px 12px;
+  border: 2px solid var(--ink);
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+}
+
+.kv-bridge {
+  display: grid;
+  justify-items: center;
+  gap: 20px;
+  font-size: 25px;
+}
+
+.kv-bridge i {
+  color: var(--magenta);
+  font-size: 64px;
+  line-height: .7;
+}
+
+.pd-caption {
+  display: flex;
+  justify-content: space-between;
+  margin: 36px 190px 0;
+  color: var(--ink-soft);
+  font-size: 25px;
+}
+
+.levels-list {
+  display: grid;
+  gap: 24px;
+  margin: 24px 80px 0;
+}
+
+.levels-list > div {
+  display: grid;
+  grid-template-columns: 150px repeat(4, minmax(0, 1fr));
+  gap: 28px;
+  align-items: center;
+  min-height: 62px;
+  border-bottom: 2px solid color-mix(in srgb, var(--blue) 40%, transparent);
+  font-size: 25px;
+}
+
+.levels-list span {
+  color: var(--magenta);
+  font-size: 30px;
+}
+
+.levels-list b {
+  font-weight: 500;
+  text-align: center;
+}
+
+.levels-scale {
+  display: grid;
+  grid-template-columns: 120px 1fr 120px;
+  gap: 18px;
+  align-items: center;
+  margin: 30px 210px 0;
+  font-size: 23px;
+}
+
+.levels-scale i {
+  height: 5px;
+  background: var(--blue);
+  border-radius: 50%;
+}
+
+.method-compare,
+.metrics-table {
+  display: grid;
+  margin: 36px 70px 0;
+  border-top: 3px solid var(--ink);
+  border-bottom: 3px solid var(--ink);
+}
+
+.method-compare > div,
+.metrics-table > div {
+  display: grid;
+  align-items: center;
+  min-height: 82px;
+  border-bottom: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
+  font-size: 25px;
+}
+
+.method-compare > div { grid-template-columns: 1.35fr 1fr .7fr .55fr; }
+.metrics-table > div { grid-template-columns: 1.5fr .75fr .7fr .75fr .75fr; }
+
+.method-compare > div:last-child,
+.metrics-table > div:last-child { border-bottom: 0; }
+
+.method-compare span,
+.metrics-table span { text-align: center; }
+
+.compare-head,
+.metrics-head {
+  color: var(--blue);
+  font-size: 27px !important;
+}
+
+.metric-highlight {
+  background: color-mix(in srgb, var(--green) 20%, transparent);
+}
+
+.callout-pair {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 34px;
+  margin-top: 34px;
+  color: var(--magenta);
+  font-size: 34px;
+}
+
+.callout-pair p { margin: 0; }
+
+.metric-note {
+  position: absolute;
+  right: 310px;
+  top: 353px;
+  color: transparent;
+  font-size: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.curve-layout {
+  display: grid;
+  grid-template-columns: 43% 57%;
+  gap: 30px;
+  align-items: center;
+  min-height: 670px;
+}
+
+.curve-copy {
+  display: grid;
+  gap: 38px;
+  padding-left: 55px;
+}
+
+.curve-copy .thin-box {
+  width: 600px;
+  font-size: 27px;
+}
+
+.memory-scale {
+  display: grid;
+  gap: 28px;
+  margin: 30px 150px 0;
+}
+
+.memory-scale > div {
+  display: grid;
+  grid-template-columns: 110px 150px 1fr;
+  align-items: center;
+  gap: 24px;
+  font-size: 27px;
+}
+
+.memory-scale b { font-weight: 500; }
+
+.memory-scale i {
+  display: block;
+  width: var(--w);
+  height: 18px;
+  border: 2px solid var(--blue);
+  background: repeating-linear-gradient(120deg, transparent 0 12px, color-mix(in srgb, var(--blue) 40%, transparent) 12px 16px);
+}
+
+.memory-scale .bar-green {
+  border-color: #2aaf2d;
+  background: color-mix(in srgb, var(--green) 42%, transparent);
+}
+
+.memory-scale .bar-yellow {
+  border-color: #9f7700;
+  background: color-mix(in srgb, var(--yellow) 65%, transparent);
+}
+
+.memory-notes {
+  display: flex;
+  justify-content: space-between;
+  margin: 42px 170px 0;
+  font-size: 24px;
+}
+
+.code-slide .page-heading { margin-bottom: 18px; }
+
+.command-block {
+  display: grid;
+  gap: 12px;
+  margin: 24px 90px 0;
+  padding: 30px 36px;
+  border: 3px solid var(--blue);
+  transform: rotate(-.08deg);
+}
+
+.command-block code,
+.thinking-modes code,
+.mono-note {
+  font-family: var(--hand-font);
+}
+
+.command-block code {
+  color: var(--ink);
+  font-size: 24px;
+  line-height: 1.35;
+}
+
+.download-note {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 44px;
+  margin-top: 36px;
+}
+
+.download-note .thin-box { font-size: 25px; }
+
+.run-platforms {
+  display: flex;
+  justify-content: center;
+  gap: 80px;
+  margin-top: 34px;
+  color: var(--blue);
+  font-size: 27px;
+}
+
+.thinking-modes {
+  display: grid;
+  gap: 26px;
+  margin: 50px 120px 0;
+}
+
+.thinking-modes > div {
+  display: grid;
+  grid-template-columns: 180px 1fr 260px;
+  gap: 28px;
+  align-items: center;
+  min-height: 82px;
+  border-bottom: 2px solid color-mix(in srgb, var(--ink) 28%, transparent);
+  font-size: 27px;
+}
+
+.thinking-modes span { color: var(--magenta); font-size: 32px; }
+.thinking-modes code { font-size: 24px; }
+.thinking-modes em { color: var(--ink-soft); font-style: normal; }
+
+.sampling-row {
+  display: flex;
+  justify-content: center;
+  gap: 70px;
+  margin-top: 44px;
+  font-size: 25px;
+}
+
+.template-flow {
+  display: grid;
+  grid-template-columns: 1fr 90px 1fr 90px 1.2fr;
+  gap: 24px;
+  align-items: center;
+  margin: 80px 70px 0;
+}
+
+.template-flow > div:not(.flow-arrow) {
+  display: grid;
+  gap: 20px;
+  padding: 30px 20px;
+  border: 3px solid var(--ink);
+  text-align: center;
+  font-size: 24px;
+}
+
+.template-flow span { color: var(--blue); font-size: 31px; }
+.template-flow b { font-weight: 500; }
+.template-flow em { color: var(--ink-soft); font-style: normal; }
+
+.check-pair {
+  display: flex;
+  justify-content: center;
+  gap: 100px;
+  margin-top: 66px;
+  color: var(--magenta);
+  font-size: 29px;
+}
+
+.route-notes {
+  display: grid;
+  gap: 38px;
+  margin: 55px 0 0 115px;
+  font-size: 31px;
+}
+
+.route-notes p { margin: 0; }
+
+.enterprise-formula {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  margin-top: 76px;
+  font-size: 38px;
+}
+
+.enterprise-formula span {
+  padding: 4px 18px;
+  border-bottom: 3px solid var(--blue);
+}
+
+.enterprise-formula span:nth-of-type(4) { border-color: var(--magenta); }
+.enterprise-formula b { color: var(--magenta); font-weight: 500; }
+
+.thanks {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.thanks-main {
+  font-family: var(--hand-font);
+  font-size: 82px;
+  color: var(--ink);
+}
+
+.thanks-line {
+  margin-top: 95px;
+  padding-bottom: 9px;
+  border-bottom: 4px solid var(--magenta);
+  font-size: 42px;
+}
+
+.thanks-meta {
+  margin-top: 52px;
+  font-size: 27px;
+}