Files
aio-01d4-stu/StuDoc/프런트엔드 · 백엔드 · 저장소 구성.html
2026-10-25 19:11:58 +09:00

3640 lines
813 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline' https://fonts.googleapis.com; font-src data: https://fonts.gstatic.com; img-src data: blob:; media-src data: blob:; frame-src about:; child-src about:; worker-src 'none'; connect-src 'none'; object-src 'none'; form-action 'none'; base-uri 'none'">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="hz:slide-selector" content=".slide">
<meta name="hz:canvas-width" content="1920">
<meta name="hz:canvas-height" content="1080">
<title>프런트엔드 · 백엔드 · 저장소 구성</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,400&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,600&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,400&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,500&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,900&amp;display=swap">
<style>
@layer properties {
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
:root, :host { --cds-message-actions-opacity: 1; --cds-badge-x-wght: 577.8; --cds-sticky-edge-start: 0; --cds-sticky-edge-end: 0; --cds-sticky-edge-active: 0; }
*, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-pan-x: initial; --tw-pan-y: initial; --tw-pinch-zoom: initial; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-x-reverse: 0; --tw-border-style: solid; --tw-divide-y-reverse: 0; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; --tw-contain-size: initial; --tw-contain-layout: initial; --tw-contain-paint: initial; --tw-contain-style: initial; --cds-outset-x: 0px; --cds-outset-y: 0px; --cds-scroll-fade-size: 28px; --cds-scroll-fade-top: 0px; --cds-scroll-fade-bottom: 0px; --cds-scroll-fade-left: 0px; --cds-scroll-fade-right: 0px; --cds-scroll-fade-top-raw: 0px; --cds-scroll-fade-bottom-raw: 0px; --cds-scroll-fade-left-raw: 0px; --cds-scroll-fade-right-raw: 0px; --cds-scroll-fade-y-active: 0; --cds-scroll-fade-x-active: 0; --cds-scroll-fade-top-on: 1; --cds-scroll-fade-bottom-on: 1; --cds-scroll-fade-left-on: 1; --cds-scroll-fade-right-on: 1; --cds-scroll-fade-strip-raw: 0; --cds-scroll-fade-strip-active: 0; --_cds-font-weight-role: initial; --_cds-font-axis-wght-role: initial; }
}
}
@layer theme {
:root, :host { --spacing: .25rem; --container-sm: 24rem; --container-md: 28rem; --container-3xl: 48rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --tracking-wide: .025em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-md: 12px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--cds-font-sans); --default-mono-font-family: var(--cds-font-mono); --color-white: #fff; --z-index-pick: 100; --color-app-accent: var(--t-app-accent); }
@media print {
.cds-root [data-cds="AccordionHeader"] ~ [role="region"][hidden] { display: block !important; }
}
}
@layer base {
*, ::after, ::before, ::backdrop { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; }
html, :host { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; }
small { font-size: 80%; }
sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
progress { vertical-align: baseline; }
summary { display: list-item; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; }
:where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
::file-selector-button { margin-inline-end: 4px; }
::placeholder { opacity: 1; }
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder { color: currentcolor; }
@supports (color:color-mix(in lab, red, red)) {
::placeholder { color: color-mix(currentcolor, transparent); }
}
}
textarea { resize: vertical; }
::-webkit-search-decoration { appearance: none; }
::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0px; }
::-webkit-datetime-edit { padding-block: 0px; }
::-webkit-datetime-edit-year-field { padding-block: 0px; }
::-webkit-datetime-edit-month-field { padding-block: 0px; }
::-webkit-datetime-edit-day-field { padding-block: 0px; }
::-webkit-datetime-edit-hour-field { padding-block: 0px; }
::-webkit-datetime-edit-minute-field { padding-block: 0px; }
::-webkit-datetime-edit-second-field { padding-block: 0px; }
::-webkit-datetime-edit-millisecond-field { padding-block: 0px; }
::-webkit-datetime-edit-meridiem-field { padding-block: 0px; }
::-webkit-calendar-picker-indicator { line-height: 1; }
button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; }
::file-selector-button { appearance: button; }
::-webkit-inner-spin-button { height: auto; }
::-webkit-outer-spin-button { height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
:where(.bg-surface-0) { --cds-scroll-fade-strip-color: var(--cds-surface-0); }
:where(.bg-surface-1) { --cds-scroll-fade-strip-color: var(--cds-surface-1); }
:where(.bg-surface-2) { --cds-scroll-fade-strip-color: var(--cds-surface-2); }
:where(.bg-surface-3) { --cds-scroll-fade-strip-color: var(--cds-surface-3); }
:where(.bg-surface-panel) { --cds-scroll-fade-strip-color: var(--cds-surface-panel); }
:where(.bg-surface-popover) { --cds-scroll-fade-strip-color: var(--cds-surface-popover); }
:where([data-cds="Card"]) { --cds-scroll-fade-strip-color: var(--cds-surface-1); }
html:where(.cds-root), html:where(.cds-root)::before, html:where(.cds-root)::after, html:where(.cds-root) *, html:where(.cds-root) ::before, html:where(.cds-root) ::after, html :where(.cds-root), html :where(.cds-root)::before, html :where(.cds-root)::after, html :where(.cds-root) *, html :where(.cds-root) ::before, html :where(.cds-root) ::after { border-color: var(--cds-border); }
:where(.cds-root) :where(button, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="switch"], [role="checkbox"], [role="radio"]) { cursor: var(--cds-cursor-interactive); }
:where(.cds-root) :where(button, [role]):where(:disabled, [aria-disabled="true"], [data-disabled]) { cursor: default; }
:where(.cds-root) th { --cds-font-axis-wght: initial; font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where(.cds-root) th:where(:is(.font-normal, .font-medium, .font-semibold, .font-bold, .text-caption-regular, .text-caption-medium, .text-caption-semibold, .text-caption-bold) th), :where(.cds-root) th:where(:is(.text-footnote-regular, .text-footnote-medium, .text-footnote-semibold, .text-footnote-bold, .text-code-regular, .text-code-medium, .text-code-semibold, .text-code-bold) th), :where(.cds-root) th:where(:is(.text-body-regular, .text-body-medium, .text-body-semibold, .text-body-bold, .text-prose-regular, .text-prose-medium, .text-prose-semibold, .text-prose-bold) th), :where(.cds-root) th:where(:is(.text-heading-regular, .text-heading-medium, .text-heading-semibold, .text-heading-bold, .text-title-regular, .text-title-medium, .text-title-semibold, .text-title-bold) th) { --cds-font-axis-wght: inherit; font-variation-settings: inherit; }
:where(.cds-root) :where(text[font-weight], tspan[font-weight]), :where(.cds-root) [style*="font-weight"]:where(:not([style*="font-weight: 400"], [style*="font-weight:400"], [style*="font-weight: normal"], [style*="font-weight:normal"])) { --cds-font-axis-wght: initial; font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
}
@layer components {
:where(.cds-root) :where(input, textarea, select).cds-input { appearance: none; box-shadow: none; font: inherit; color: inherit; background: 0px 0px; border: 0px; border-radius: 0px; outline: none; padding: 0px; }
:where(.cds-root) :where(input, textarea).cds-input.cds-input:focus { box-shadow: none; border-color: var(--cds-border); outline: none; }
:where(.cds-root) :where(input, textarea).cds-input.cds-input:focus-visible { box-shadow: var(--cds-focus-shadow); outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
:where(.cds-root) .cds-reset:focus, :where(.cds-root) .cds-reset:focus-visible { outline: none; }
:where(.cds-root) .cds-reset:focus-visible { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
:where(.cds-root) .cds-text-link { color: var(--cds-text-accent); --_text-link-line: currentColor; border-radius: 2px; text-decoration-line: none; }
@supports (color:color-mix(in lab, red, red)) {
:where(.cds-root) .cds-text-link { --_text-link-line: color-mix(in srgb, currentColor, transparent 60%); }
}
:where(.cds-root) .cds-text-link { transition-property: color, text-decoration-color, box-shadow; transition-duration: var(--cds-dur-fast,60ms); transition-timing-function: var(--cds-ease-out); }
:where(.cds-root) .cds-text-link:is(:hover, :focus-visible) { --_text-link-line: currentColor; }
:where(.cds-root) .cds-text-link:focus-visible { outline-offset: 2px; box-shadow: var(--cds-focus-shadow,0 0 0 2px Highlight); outline: rgba(0, 0, 0, 0) solid 2px; }
:where(.cds-root) .cds-text-link-underline { text-underline-offset: 3px; text-decoration-line: underline; text-decoration-color: var(--_text-link-line,currentColor); transition-property: color, text-decoration-color, box-shadow; transition-duration: var(--cds-dur-fast,60ms); transition-timing-function: var(--cds-ease-out); }
:where(.cds-root .cds-user-message-body) a:where(:not([data-cds])) { color: var(--cds-text-accent); --_text-link-line: currentColor; border-radius: 2px; text-decoration-line: underline; }
@supports (color:color-mix(in lab, red, red)) {
:where(.cds-root .cds-user-message-body) a:where(:not([data-cds])) { --_text-link-line: color-mix(in srgb, currentColor, transparent 60%); }
}
:where(.cds-root .cds-user-message-body) a:where(:not([data-cds])) { transition-property: color, text-decoration-color, box-shadow; transition-duration: var(--cds-dur-fast,60ms); transition-timing-function: var(--cds-ease-out); text-underline-offset: 3px; text-decoration-color: var(--_text-link-line,currentColor); }
:where(.cds-root .cds-user-message-body) a:where(:not([data-cds])):is(:hover, :focus-visible) { --_text-link-line: currentColor; }
:where(.cds-root .cds-user-message-body) a:where(:not([data-cds])):focus-visible { outline-offset: 2px; box-shadow: var(--cds-focus-shadow,0 0 0 2px Highlight); outline: rgba(0, 0, 0, 0) solid 2px; }
:where(.text-title, .text-title-regular, .text-title-medium, .text-title-semibold, .text-title-bold) { font-family: var(--_cds-title-family,var(--cds-font-sans-display)); }
:where(.cds-root) :is(b, strong) { font-weight: var(--cds-font-weight-bold); }
@media screen {
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) :is(b, strong):where(:not([class*="font"])) { --cds-font-axis-wght: var(--cds-font-axis-wght-bold); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
}
@media screen and (prefers-color-scheme: dark) {
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) :is(b, strong):where(:not([class*="font"])) { --cds-font-axis-wght: var(--cds-font-axis-wght-bold); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
}
}
@layer utilities {
.\@container { container-type: inline-size; }
.pointer-events-auto { pointer-events: auto; }
.pointer-events-none { pointer-events: none; }
.collapse { visibility: collapse; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }
.visible\! { visibility: visible !important; }
.sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
.not-sr-only { clip-path: none; white-space: normal; width: auto; height: auto; margin: 0px; padding: 0px; position: static; overflow: visible; }
.absolute { position: absolute; }
.absolute\! { position: absolute !important; }
.fixed { position: fixed; }
.relative { position: relative; }
.static { position: static; }
.sticky { position: sticky; }
.inset-0 { inset: 0px; }
.inset-3\.5 { inset: calc(var(--spacing) * 3.5); }
.inset-\[0\.5px\] { inset: 0.5px; }
.inset-x-0 { inset-inline: 0px; }
.inset-y-0 { inset-block: 0px; }
.inset-y-1\/4 { inset-block: 25%; }
.inset-y-px { inset-block: 1px; }
.start-0 { inset-inline-start: calc(var(--spacing) * 0); }
.start-\[calc\(-6px_-_\(var\(--cds-ring-outer\,0px\)_-_var\(--cds-ring-inner\,0px\)\)_\/_2\)\] { inset-inline-start: calc(-6px - (var(--cds-ring-outer,0px) - var(--cds-ring-inner,0px)) / 2); }
.start-\[calc\(50\%_-_var\(--resize-line\)_\/_2\)\] { inset-inline-start: calc(50% - var(--resize-line) / 2); }
.end-0 { inset-inline-end: calc(var(--spacing) * 0); }
.end-\[calc\(-6px_-_\(var\(--cds-ring-outer\,0px\)_-_var\(--cds-ring-inner\,0px\)\)_\/_2\)\] { inset-inline-end: calc(-6px - (var(--cds-ring-outer,0px) - var(--cds-ring-inner,0px)) / 2); }
.-top-0\.5 { top: calc(var(--spacing) * -.5); }
.-top-1\.5 { top: calc(var(--spacing) * -1.5); }
.top-0 { top: 0px; }
.top-1 { top: var(--spacing); }
.top-1\/2 { top: 50%; }
.top-2 { top: calc(var(--spacing) * 2); }
.top-\[calc\(-6px_-_\(var\(--cds-ring-outer\,0px\)_-_var\(--cds-ring-inner\,0px\)\)_\/_2\)\] { top: calc(-6px - (var(--cds-ring-outer,0px) - var(--cds-ring-inner,0px)) / 2); }
.top-\[calc\(50\%_-_var\(--resize-line\)_\/_2\)\] { top: calc(50% - var(--resize-line) / 2); }
.top-\[calc\(var\(--tb-overlay-h\,0px\)\+1rem\)\] { top: calc(var(--tb-overlay-h,0px) + 1rem); }
.top-full { top: 100%; }
.top-px { top: 1px; }
.-right-0\.5 { right: calc(var(--spacing) * -.5); }
.-right-\[7px\] { right: -7px; }
.right-0 { right: 0px; }
.right-1 { right: var(--spacing); }
.right-2 { right: calc(var(--spacing) * 2); }
.right-3 { right: calc(var(--spacing) * 3); }
.right-4 { right: calc(var(--spacing) * 4); }
.right-6 { right: calc(var(--spacing) * 6); }
.right-px { right: 1px; }
.bottom-0 { bottom: 0px; }
.bottom-1 { bottom: var(--spacing); }
.bottom-3 { bottom: calc(var(--spacing) * 3); }
.bottom-4 { bottom: calc(var(--spacing) * 4); }
.bottom-5 { bottom: calc(var(--spacing) * 5); }
.bottom-\[calc\(-6px_-_\(var\(--cds-ring-outer\,0px\)_-_var\(--cds-ring-inner\,0px\)\)_\/_2\)\] { bottom: calc(-6px - (var(--cds-ring-outer,0px) - var(--cds-ring-inner,0px)) / 2); }
.bottom-\[calc\(1\.25rem\+var\(--sl-safe-b\,0px\)\)\] { bottom: calc(1.25rem + var(--sl-safe-b,0px)); }
.bottom-full { bottom: 100%; }
.bottom-px { bottom: 1px; }
.-left-1\.5 { left: calc(var(--spacing) * -1.5); }
.left-0 { left: 0px; }
.left-1 { left: var(--spacing); }
.left-1\/2 { left: 50%; }
.left-3 { left: calc(var(--spacing) * 3); }
.left-6 { left: calc(var(--spacing) * 6); }
.left-px { left: 1px; }
.isolate { isolation: isolate; }
.isolation-auto { isolation: auto; }
.-z-\[1\] { z-index: calc(-1); }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[1\] { z-index: 1; }
.z-\[5\] { z-index: 5; }
.z-\[35\] { z-index: 35; }
.z-\[38\] { z-index: 38; }
.z-\[39\] { z-index: 39; }
.z-\[45\] { z-index: 45; }
.z-\[calc\(var\(--cds-layer-base\,0\)_\+_1000\)\] { z-index: calc(var(--cds-layer-base,0) + 1000); }
.z-ask { z-index: 60; }
.z-panel { z-index: 40; }
.z-scrim { z-index: 101; }
.z-selection { z-index: 45; }
.z-toolbar { z-index: 49; }
.order-first { order: -9999; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-full { grid-column: 1 / -1; }
.col-start-1 { grid-column-start: 1; }
.row-span-full { grid-row: 1 / -1; }
.row-start-1 { grid-row-start: 1; }
.\!container { width: 100% !important; }
@media (min-width: 40rem) {
.\!container { max-width: 40rem !important; }
}
@media (min-width: 48rem) {
.\!container { max-width: 48rem !important; }
}
@media (min-width: 64rem) {
.\!container { max-width: 64rem !important; }
}
@media (min-width: 80rem) {
.\!container { max-width: 80rem !important; }
}
@media (min-width: 96rem) {
.\!container { max-width: 96rem !important; }
}
.container { width: 100%; }
@media (min-width: 40rem) {
.container { max-width: 40rem; }
}
@media (min-width: 48rem) {
.container { max-width: 48rem; }
}
@media (min-width: 64rem) {
.container { max-width: 64rem; }
}
@media (min-width: 80rem) {
.container { max-width: 80rem; }
}
@media (min-width: 96rem) {
.container { max-width: 96rem; }
}
.-m-2 { margin: calc(var(--spacing) * -2); }
.m-0 { margin: 0px; }
.m-1 { margin: var(--spacing); }
.m-6 { margin: calc(var(--spacing) * 6); }
.m-\[var\(--cds-ring-inner\)\] { margin: var(--cds-ring-inner); }
.m-auto { margin: auto; }
.-mx-0\.5 { margin-inline: calc(var(--spacing) * -.5); }
.-mx-1 { margin-inline: calc(var(--spacing) * -1); }
.-mx-1\.5 { margin-inline: calc(var(--spacing) * -1.5); }
.-mx-2 { margin-inline: calc(var(--spacing) * -2); }
.-mx-\[var\(--cds-menu-gutter\,0\.25rem\)\] { margin-inline: calc(var(--cds-menu-gutter,.25rem) * -1); }
.-mx-pad-xl { margin-inline: calc(var(--cds-pad-xl) * -1); }
.mx-0\.5 { margin-inline: calc(var(--spacing) * .5); }
.mx-1 { margin-inline: var(--spacing); }
.mx-\[-0\.15em\] { margin-inline: -0.15em; }
.mx-auto { margin-inline: auto; }
.mx-outset { margin-inline: calc(var(--cds-outset-x,0px) * -1); }
.-my-1 { margin-block: calc(var(--spacing) * -1); }
.-my-\[0\.125em\] { margin-block: -0.125em; }
.my-1 { margin-block: var(--spacing); }
.my-3 { margin-block: calc(var(--spacing) * 3); }
.my-\[calc\(\(1lh-var\(--cds-h-control\)\)\/2\)\] { margin-block: calc((1lh - var(--cds-h-control)) / 2); }
.my-auto { margin-block: auto; }
.-ms-1 { margin-inline-start: calc(var(--spacing) * -1); }
.-ms-\[2px\] { margin-inline-start: -2px; }
.-ms-\[4px\] { margin-inline-start: -4px; }
.-ms-\[6px\] { margin-inline-start: -6px; }
.ms-1 { margin-inline-start: var(--spacing); }
.ms-\[4px\] { margin-inline-start: 4px; }
.ms-\[6px\] { margin-inline-start: 6px; }
.ms-auto { margin-inline-start: auto; }
.ms-md { margin-inline-start: var(--cds-gap-md); }
.ms-outset { margin-inline-start: calc(var(--cds-outset-x,0px) * -1); }
.-me-0\.5 { margin-inline-end: calc(var(--spacing) * -.5); }
.-me-0\.75 { margin-inline-end: calc(var(--spacing) * -.75); }
.-me-1 { margin-inline-end: calc(var(--spacing) * -1); }
.-me-2\.5 { margin-inline-end: calc(var(--spacing) * -2.5); }
.-me-\[2px\] { margin-inline-end: -2px; }
.-me-\[4px\] { margin-inline-end: -4px; }
.-me-\[calc\(var\(--cds-pad-md\)-2px\)\] { margin-inline-end: calc(calc(var(--cds-pad-md) - 2px) * -1); }
.-me-\[calc\(var\(--cds-pad-md\)-6px\)\] { margin-inline-end: calc(calc(var(--cds-pad-md) - 6px) * -1); }
.-me-pad-sm { margin-inline-end: calc(var(--cds-pad-sm) * -1); }
.-me-px { margin-inline-end: -1px; }
.me-0\.5 { margin-inline-end: calc(var(--spacing) * .5); }
.me-\[2px\] { margin-inline-end: 2px; }
.me-\[calc\(\(var\(--cds-h-control\)-1em-6px\)\/2-min\(var\(--cds-pad-md\)\,var\(--cds-button-pad-max\,var\(--cds-pad-md\)\)\)\)\] { margin-inline-end: calc((var(--cds-h-control) - 1em - 6px) / 2 - min(var(--cds-pad-md), var(--cds-button-pad-max,var(--cds-pad-md)))); }
.me-\[calc\(\(var\(--cds-h-control\)-1em-6px\)\/2-var\(--cds-pad-md\)\)\] { margin-inline-end: calc((var(--cds-h-control) - 1em - 6px) / 2 - var(--cds-pad-md)); }
.me-\[calc\(6px-var\(--cds-pad-md\)\)\] { margin-inline-end: calc(6px - var(--cds-pad-md)); }
.me-\[calc\(8px-var\(--cds-pad-md\)\)\] { margin-inline-end: calc(8px - var(--cds-pad-md)); }
.me-outset { margin-inline-end: calc(var(--cds-outset-x,0px) * -1); }
.-mt-0\.5 { margin-top: calc(var(--spacing) * -.5); }
.-mt-1 { margin-top: calc(var(--spacing) * -1); }
.-mt-2 { margin-top: calc(var(--spacing) * -2); }
.-mt-\[calc\(var\(--cds-toolbar-pad-block\)_\+_\(var\(--cds-h-control\)_-_var\(--cds-leading-heading\)\)_\/_2\)\] { margin-top: calc(calc(var(--cds-toolbar-pad-block) + (var(--cds-h-control) - var(--cds-leading-heading)) / 2) * -1); }
.-mt-\[var\(--cds-menu-gutter\,0\.25rem\)\] { margin-top: calc(var(--cds-menu-gutter,.25rem) * -1); }
.-mt-pad-sm { margin-top: calc(var(--cds-pad-sm) * -1); }
.-mt-px { margin-top: -1px; }
.mt-0\.5 { margin-top: calc(var(--spacing) * .5); }
.mt-1 { margin-top: var(--spacing); }
.mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mt-3 { margin-top: calc(var(--spacing) * 3); }
.mt-\[calc\(\(1lh_-_var\(--cds-checkbox\,1rem\)\)_\/_2\)\] { margin-top: calc((1lh - var(--cds-checkbox,1rem)) / 2); }
.mt-\[var\(--cds-menu-gutter\,0\.25rem\)\] { margin-top: var(--cds-menu-gutter,.25rem); }
.mt-\[var\(--tb-overlay-h\,0px\)\] { margin-top: var(--tb-overlay-h,0px); }
.mt-pad-lg { margin-top: var(--cds-pad-lg); }
.mt-pad-md { margin-top: var(--cds-pad-md); }
.mt-px { margin-top: 1px; }
.mt-xs { margin-top: var(--cds-gap-xs); }
.-mr-1 { margin-right: calc(var(--spacing) * -1); }
.-mr-\[5px\] { margin-right: -5px; }
.mr-0\.5 { margin-right: calc(var(--spacing) * .5); }
.mr-1\.5 { margin-right: calc(var(--spacing) * 1.5); }
.-mb-1 { margin-bottom: calc(var(--spacing) * -1); }
.mb-1 { margin-bottom: var(--spacing); }
.mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.mb-3\.5 { margin-bottom: calc(var(--spacing) * 3.5); }
.mb-\[-1px\] { margin-bottom: -1px; }
.mb-\[8\.5px\] { margin-bottom: 8.5px; }
.mb-\[calc\(-1\*var\(--cs-bottom\,16px\)\)\] { margin-bottom: calc(-1 * var(--cs-bottom,16px)); }
.mb-pad-md { margin-bottom: var(--cds-pad-md); }
.mb-pad-xl { margin-bottom: var(--cds-pad-xl); }
.-ml-1 { margin-left: calc(var(--spacing) * -1); }
.-ml-\[5px\] { margin-left: -5px; }
.-ml-pad-md { margin-left: calc(var(--cds-pad-md) * -1); }
.ml-0\.5 { margin-left: calc(var(--spacing) * .5); }
.ml-1 { margin-left: var(--spacing); }
.ml-2 { margin-left: calc(var(--spacing) * 2); }
.ml-3\.5 { margin-left: calc(var(--spacing) * 3.5); }
.ml-14 { margin-left: calc(var(--spacing) * 14); }
.ml-auto { margin-left: auto; }
.ml-md { margin-left: var(--cds-gap-md); }
.ml-xs { margin-left: var(--cds-gap-xs); }
.box-border { box-sizing: border-box; }
.line-clamp-2 { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.line-clamp-\[var\(--cds-menu-description-lines\)\] { -webkit-line-clamp: var(--cds-menu-description-lines); -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.\!hidden { display: none !important; }
.\[display\:inherit\] { display: inherit; }
.block { display: block; }
.block\! { display: block !important; }
.contents { display: contents; }
.flex { display: flex; }
.flow-root { display: flow-root; }
.grid { display: grid; }
.hidden { display: none; }
.hidden\! { display: none !important; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.inline-grid { display: inline-grid; }
.inline-table { display: inline-table; }
.list-item { display: list-item; }
.table { display: table; }
.table\! { display: table !important; }
.table-caption { display: table-caption; }
.table-cell { display: table-cell; }
.table-column { display: table-column; }
.table-column-group { display: table-column-group; }
.table-footer-group { display: table-footer-group; }
.table-header-group { display: table-header-group; }
.table-row { display: table-row; }
.table-row-group { display: table-row-group; }
.aspect-\[3\/2\] { aspect-ratio: 3 / 2; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: var(--aspect-video); }
.\!size-\[var\(--fhn\)\] { width: var(--fhn) !important; height: var(--fhn) !important; }
.size-0 { width: 0px; height: 0px; }
.size-1\.5 { width: calc(var(--spacing) * 1.5); height: calc(var(--spacing) * 1.5); }
.size-2 { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); }
.size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); }
.size-4 { width: calc(var(--spacing) * 4); height: calc(var(--spacing) * 4); }
.size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); }
.size-\[calc\(0\.375rem\*var\(--cds-rem-scale\,1\)\)\] { width: calc(.375rem * var(--cds-rem-scale,1)); height: calc(.375rem * var(--cds-rem-scale,1)); }
.size-\[calc\(var\(--cds-checkbox\,1rem\)-calc\(0\.625rem\*var\(--cds-rem-scale\,1\)\)\)\] { width: calc(var(--cds-checkbox,1rem) - calc(.625rem * var(--cds-rem-scale,1))); height: calc(var(--cds-checkbox,1rem) - calc(.625rem * var(--cds-rem-scale,1))); }
.size-\[calc\(var\(--cds-switch-h\,1\.25rem\)-4px\)\] { width: calc(var(--cds-switch-h,1.25rem) - 4px); height: calc(var(--cds-switch-h,1.25rem) - 4px); }
.size-\[var\(--cds-avatar-lg\)\] { width: var(--cds-avatar-lg); height: var(--cds-avatar-lg); }
.size-\[var\(--cds-avatar-md\)\] { width: var(--cds-avatar-md); height: var(--cds-avatar-md); }
.size-\[var\(--cds-avatar-sm\)\] { width: var(--cds-avatar-sm); height: var(--cds-avatar-sm); }
.size-\[var\(--cds-avatar-xs\)\] { width: var(--cds-avatar-xs); height: var(--cds-avatar-xs); }
.size-\[var\(--cds-checkbox\)\] { width: var(--cds-checkbox); height: var(--cds-checkbox); }
.size-control { width: var(--cds-h-control); height: var(--cds-h-control); }
.size-full { width: 100%; height: 100%; }
.size-icon { width: var(--cds-icon); height: var(--cds-icon); }
.h-0 { height: 0px; }
.h-0\.5 { height: calc(var(--spacing) * .5); }
.h-1 { height: var(--spacing); }
.h-1\.5 { height: calc(var(--spacing) * 1.5); }
.h-2 { height: calc(var(--spacing) * 2); }
.h-2\.5 { height: calc(var(--spacing) * 2.5); }
.h-3 { height: calc(var(--spacing) * 3); }
.h-3\.5 { height: calc(var(--spacing) * 3.5); }
.h-4 { height: calc(var(--spacing) * 4); }
.h-5 { height: calc(var(--spacing) * 5); }
.h-6 { height: calc(var(--spacing) * 6); }
.h-7 { height: calc(var(--spacing) * 7); }
.h-8 { height: calc(var(--spacing) * 8); }
.h-9 { height: calc(var(--spacing) * 9); }
.h-10 { height: calc(var(--spacing) * 10); }
.h-11 { height: calc(var(--spacing) * 11); }
.h-12 { height: calc(var(--spacing) * 12); }
.h-48 { height: calc(var(--spacing) * 48); }
.h-\[1em\] { height: 1em; }
.h-\[1lh\] { height: 1lh; }
.h-\[3px\] { height: 3px; }
.h-\[18px\] { height: 18px; }
.h-\[30vh\] { height: 30vh; }
.h-\[38px\] { height: 38px; }
.h-\[calc\(1em\+6px\)\] { height: calc(1em + 6px); }
.h-\[calc\(3\.375rem\+var\(--sl-safe-b\,0px\)\)\] { height: calc(3.375rem + var(--sl-safe-b,0px)); }
.h-\[var\(--cds-avatar-lg\)\] { height: var(--cds-avatar-lg); }
.h-\[var\(--cds-avatar-md\)\] { height: var(--cds-avatar-md); }
.h-\[var\(--cds-avatar-sm\)\] { height: var(--cds-avatar-sm); }
.h-\[var\(--cds-avatar-xs\)\] { height: var(--cds-avatar-xs); }
.h-\[var\(--cds-disclosure-panel-height\)\] { height: var(--cds-disclosure-panel-height); }
.h-\[var\(--cds-spark-size\)\] { height: var(--cds-spark-size); }
.h-\[var\(--cds-switch-h\)\] { height: var(--cds-switch-h); }
.h-\[var\(--resize-line\)\] { height: var(--resize-line); }
.h-auto { height: auto; }
.h-control { height: var(--cds-h-control); }
.h-control-nested { height: var(--cds-h-control-nested); }
.h-dvh { height: 100dvh; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.h-screen { height: 100vh; }
.max-h-12 { max-height: calc(var(--spacing) * 12); }
.max-h-32 { max-height: calc(var(--spacing) * 32); }
.max-h-\[60vh\] { max-height: 60vh; }
.max-h-\[calc\(100dvh_-_max\(2rem\,2\*var\(--desktop-titlebar-inset\,0px\)\)_-_2\*max\(env\(safe-area-inset-top\,0px\)\,env\(safe-area-inset-bottom\,0px\)\)\)\] { max-height: calc(100dvh - max(2rem, 2 * var(--desktop-titlebar-inset,0px)) - 2 * max(env(safe-area-inset-top,0px), env(safe-area-inset-bottom,0px))); }
.max-h-\[inherit\] { max-height: inherit; }
.max-h-\[min\(18rem\,max\(6rem\,calc\(var\(--available-height\,100vh\)_-_7\.5rem\)\)\)\] { max-height: min(18rem, max(6rem, calc(var(--available-height,100vh) - 7.5rem))); }
.max-h-\[min\(24rem\,max\(6rem\,calc\(var\(--available-height\,100vh\)_-_8rem\)\)\)\] { max-height: min(24rem, max(6rem, calc(var(--available-height,100vh) - 8rem))); }
.max-h-\[min\(70vh\,640px\)\] { max-height: min(70vh, 640px); }
.max-h-\[min\(75dvh\,42rem\)\] { max-height: min(75dvh, 42rem); }
.max-h-\[var\(--available-height\)\] { max-height: var(--available-height); }
.max-h-full { max-height: 100%; }
.max-h-none { max-height: none; }
.min-h-0 { min-height: 0px; }
.min-h-1 { min-height: var(--spacing); }
.min-h-4 { min-height: calc(var(--spacing) * 4); }
.min-h-6 { min-height: calc(var(--spacing) * 6); }
.min-h-7 { min-height: calc(var(--spacing) * 7); }
.min-h-8 { min-height: calc(var(--spacing) * 8); }
.min-h-9 { min-height: calc(var(--spacing) * 9); }
.min-h-10 { min-height: calc(var(--spacing) * 10); }
.min-h-16 { min-height: calc(var(--spacing) * 16); }
.min-h-40 { min-height: calc(var(--spacing) * 40); }
.min-h-\[1lh\] { min-height: 1lh; }
.min-h-\[13px\] { min-height: 13px; }
.min-h-\[calc\(1\.5rem\*var\(--cds-rem-scale\,1\)\)\] { min-height: calc(1.5rem * var(--cds-rem-scale,1)); }
.min-h-\[calc\(var\(--cds-h-control\)_\+_2_\*_var\(--cds-toolbar-pad-block\)\)\] { min-height: calc(var(--cds-h-control) + 2 * var(--cds-toolbar-pad-block)); }
.min-h-\[var\(--prop-row-h\,32px\)\] { min-height: var(--prop-row-h,32px); }
.min-h-control { min-height: var(--cds-h-control); }
.w-0 { width: 0px; }
.w-1 { width: var(--spacing); }
.w-1\.5 { width: calc(var(--spacing) * 1.5); }
.w-1\/2 { width: 50%; }
.w-2 { width: calc(var(--spacing) * 2); }
.w-2\.5 { width: calc(var(--spacing) * 2.5); }
.w-3 { width: calc(var(--spacing) * 3); }
.w-3\.5 { width: calc(var(--spacing) * 3.5); }
.w-4 { width: calc(var(--spacing) * 4); }
.w-5 { width: calc(var(--spacing) * 5); }
.w-6 { width: calc(var(--spacing) * 6); }
.w-7 { width: calc(var(--spacing) * 7); }
.w-8 { width: calc(var(--spacing) * 8); }
.w-9 { width: calc(var(--spacing) * 9); }
.w-10 { width: calc(var(--spacing) * 10); }
.w-12 { width: calc(var(--spacing) * 12); }
.w-14 { width: calc(var(--spacing) * 14); }
.w-20 { width: calc(var(--spacing) * 20); }
.w-24 { width: calc(var(--spacing) * 24); }
.w-28 { width: calc(var(--spacing) * 28); }
.w-48 { width: calc(var(--spacing) * 48); }
.w-60 { width: calc(var(--spacing) * 60); }
.w-64 { width: calc(var(--spacing) * 64); }
.w-72 { width: calc(var(--spacing) * 72); }
.w-80 { width: calc(var(--spacing) * 80); }
.w-\[3\.75rem\] { width: 3.75rem; }
.w-\[3px\] { width: 3px; }
.w-\[4\.5rem\] { width: 4.5rem; }
.w-\[4\.75rem\] { width: 4.75rem; }
.w-\[14\.5rem\] { width: 14.5rem; }
.w-\[18\%\] { width: 18%; }
.w-\[30\%\] { width: 30%; }
.w-\[34px\] { width: 34px; }
.w-\[48\%\] { width: 48%; }
.w-\[68px\] { width: 68px; }
.w-\[70\%\] { width: 70%; }
.w-\[76px\] { width: 76px; }
.w-\[184px\] { width: 184px; }
.w-\[360px\] { width: 360px; }
.w-\[400px\] { width: 400px; }
.w-\[calc\(1em\+6px\)\] { width: calc(1em + 6px); }
.w-\[calc\(100\%\+0\.75rem\)\] { width: calc(100% + 0.75rem); }
.w-\[calc\(100vw_-_2rem_-_2\*max\(env\(safe-area-inset-left\,0px\)\,env\(safe-area-inset-right\,0px\)\)\)\] { width: calc(100vw - 2rem - 2 * max(env(safe-area-inset-left,0px), env(safe-area-inset-right,0px))); }
.w-\[calc\(var\(--anchor-width\)\+1\.375rem\)\] { width: calc(var(--anchor-width) + 1.375rem); }
.w-\[calc\(var\(--cds-switch-h\,1\.25rem\)\*1\.8\)\] { width: calc(var(--cds-switch-h,1.25rem) * 1.8); }
.w-\[var\(--anchor-width\)\] { width: var(--anchor-width); }
.w-\[var\(--cds-spark-size\)\] { width: var(--cds-spark-size); }
.w-\[var\(--mc-side-w\)\] { width: var(--mc-side-w); }
.w-\[var\(--pp-iconcol\,auto\)\] { width: var(--pp-iconcol,auto); }
.w-\[var\(--resize-line\)\] { width: var(--resize-line); }
.w-auto { width: auto; }
.w-control { width: var(--cds-h-control); }
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.w-icon { width: var(--cds-icon); }
.w-max { width: max-content; }
.w-px { width: 1px; }
.w-screen { width: 100vw; }
.max-w-3xl { max-width: var(--container-3xl); }
.max-w-12 { max-width: calc(var(--spacing) * 12); }
.max-w-40 { max-width: calc(var(--spacing) * 40); }
.max-w-80 { max-width: calc(var(--spacing) * 80); }
.max-w-\[45rem\] { max-width: 45rem; }
.max-w-\[70\%\] { max-width: 70%; }
.max-w-\[160px\] { max-width: 160px; }
.max-w-\[240px\] { max-width: 240px; }
.max-w-\[320px\] { max-width: 320px; }
.max-w-\[400px\] { max-width: 400px; }
.max-w-\[480px\] { max-width: 480px; }
.max-w-\[520px\] { max-width: 520px; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[880px\] { max-width: 880px; }
.max-w-\[1024px\] { max-width: 1024px; }
.max-w-\[1152px\] { max-width: 1152px; }
.max-w-\[calc\(100vw-2rem\)\] { max-width: calc(-2rem + 100vw); }
.max-w-\[calc\(100vw-16px\)\] { max-width: calc(-16px + 100vw); }
.max-w-\[var\(--preview-card-max-w\,360px\)\] { max-width: var(--preview-card-max-w,360px); }
.max-w-full { max-width: 100%; }
.max-w-md { max-width: var(--container-md); }
.max-w-none { max-width: none; }
.max-w-sm { max-width: var(--container-sm); }
.min-w-0 { min-width: 0px; }
.min-w-0\! { min-width: 0px !important; }
.min-w-1 { min-width: var(--spacing); }
.min-w-4 { min-width: calc(var(--spacing) * 4); }
.min-w-6 { min-width: calc(var(--spacing) * 6); }
.min-w-8 { min-width: calc(var(--spacing) * 8); }
.min-w-12 { min-width: calc(var(--spacing) * 12); }
.min-w-14 { min-width: calc(var(--spacing) * 14); }
.min-w-48 { min-width: calc(var(--spacing) * 48); }
.min-w-52 { min-width: calc(var(--spacing) * 52); }
.min-w-56 { min-width: calc(var(--spacing) * 56); }
.min-w-\[4\.5rem\] { min-width: 4.5rem; }
.min-w-\[12rem\] { min-width: 12rem; }
.min-w-\[128px\] { min-width: 128px; }
.min-w-\[180px\] { min-width: 180px; }
.min-w-\[200px\] { min-width: 200px; }
.min-w-\[calc\(0\.5rem\+var\(--cds-h-control\)\+1\.25rem\)\] { min-width: calc(.5rem + var(--cds-h-control) + 1.25rem); }
.min-w-\[calc\(1em\+6px\)\] { min-width: calc(1em + 6px); }
.min-w-\[calc\(100\%-0\.5rem\)\] { min-width: calc(100% - 0.5rem); }
.min-w-\[calc\(var\(--cds-h-control\)\*3\)\] { min-width: calc(var(--cds-h-control) * 3); }
.min-w-\[min\(20ch\,100\%\)\] { min-width: min(20ch, 100%); }
.min-w-\[min\(40ch\,100\%\)\] { min-width: min(40ch, 100%); }
.min-w-\[var\(--cds-avatar-lg\)\] { min-width: var(--cds-avatar-lg); }
.min-w-\[var\(--cds-avatar-md\)\] { min-width: var(--cds-avatar-md); }
.min-w-\[var\(--cds-avatar-sm\)\] { min-width: var(--cds-avatar-sm); }
.min-w-\[var\(--cds-avatar-xs\)\] { min-width: var(--cds-avatar-xs); }
.min-w-\[var\(--cds-h-control-nested\)\] { min-width: var(--cds-h-control-nested); }
.min-w-\[var\(--preview-card-min-w\,200px\)\] { min-width: var(--preview-card-min-w,200px); }
.min-w-fit { min-width: fit-content; }
.min-w-full { min-width: 100%; }
.min-w-max { min-width: max-content; }
.flex-1 { flex: 1 1 0%; }
.flex-\[0_0_40\%\] { flex: 0 0 40%; }
.flex-\[1_1_60\%\] { flex: 1 1 60%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: 0 0 auto; }
.flex-shrink, .shrink { flex-shrink: 1; }
.shrink\! { flex-shrink: 1 !important; }
.shrink-0 { flex-shrink: 0; }
.flex-grow, .grow { flex-grow: 1; }
.grow\! { flex-grow: 1 !important; }
.grow-0 { flex-grow: 0; }
.basis-3 { flex-basis: calc(var(--spacing) * 3); }
.basis-\[calc\(var\(--cds-pad-md\)\*2\)\] { flex-basis: calc(var(--cds-pad-md) * 2); }
.basis-auto { flex-basis: auto; }
.basis-full { flex-basis: 100%; }
.border-collapse { border-collapse: collapse; }
.origin-\[var\(--transform-origin\)\] { transform-origin: var(--transform-origin); }
.origin-bottom { transform-origin: center bottom; }
.origin-left { transform-origin: 0px center; }
.origin-top { transform-origin: center top; }
.-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
.-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
.-translate-y-3 { --tw-translate-y: calc(var(--spacing) * -3); translate: var(--tw-translate-x) var(--tw-translate-y); }
.translate-y-1 { --tw-translate-y: var(--spacing); translate: var(--tw-translate-x) var(--tw-translate-y); }
.translate-none { translate: none; }
.scale-75 { --tw-scale-x: 75%; --tw-scale-y: 75%; --tw-scale-z: 75%; scale: var(--tw-scale-x) var(--tw-scale-y); }
.scale-3d { scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); }
.scale-\[0\.67\] { scale: 0.67; }
.scale-\[calc\(1_\+_6\.2_\/_var\(--sl-thumb-w\)\)\] { scale: calc(1 + 6.2 / var(--sl-thumb-w)); }
.-rotate-90 { rotate: -90deg; }
.-rotate-\[14deg\] { rotate: -14deg; }
.rotate-0 { rotate: 0deg; }
.rotate-45 { rotate: 45deg; }
.rotate-90 { rotate: 90deg; }
.rotate-\[14deg\] { rotate: 14deg; }
.\[transform\:translateY\(var\(--ty\)\)_scale\(var\(--ts\)\)\] { transform: translateY(var(--ty)) scale(var(--ts)); }
.transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); }
.transform\! { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important; }
.animate-\[spin_1s_linear_infinite\] { animation: 1s linear 0s infinite normal none running spin; }
.cursor-\[var\(--cds-cursor-interactive\)\] { cursor: var(--cds-cursor-interactive); }
.cursor-col-resize { cursor: col-resize; }
.cursor-default { cursor: default; }
.cursor-ew-resize { cursor: ew-resize; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-interactive { cursor: var(--cds-cursor-interactive); }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-pointer { cursor: pointer; }
.cursor-row-resize { cursor: row-resize; }
.cursor-text { cursor: text; }
.touch-pinch-zoom { --tw-pinch-zoom: pinch-zoom; touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,); }
.touch-none { touch-action: none; }
.resize { resize: both; }
.resize-none { resize: none; }
.scroll-fade-y { scroll-padding-block: calc(var(--cds-scroll-fade-size) * var(--cds-scroll-fade-top-on)) calc(var(--cds-scroll-fade-size) * var(--cds-scroll-fade-bottom-on)); }
@supports (animation-timeline:scroll()) {
.scroll-fade-y { --cds-scroll-fade-top: calc(var(--cds-scroll-fade-top-raw) * var(--cds-scroll-fade-y-active) * var(--cds-scroll-fade-top-on)); --cds-scroll-fade-bottom: calc(var(--cds-scroll-fade-bottom-raw) * var(--cds-scroll-fade-y-active) * var(--cds-scroll-fade-bottom-on)); mask-image: linear-gradient(to bottom, transparent, #0000000d calc(var(--cds-scroll-fade-top) * .15), #00000026 calc(var(--cds-scroll-fade-top) * .3), #0000004d calc(var(--cds-scroll-fade-top) * .45), #00000080 calc(var(--cds-scroll-fade-top) * .6), #000000b3 calc(var(--cds-scroll-fade-top) * .75), #000000d9 calc(var(--cds-scroll-fade-top) * .87), #000 var(--cds-scroll-fade-top), #000 calc(100% - var(--cds-scroll-fade-bottom)), #000000d9 calc(100% - var(--cds-scroll-fade-bottom) * .87), #000000b3 calc(100% - var(--cds-scroll-fade-bottom) * .75), #00000080 calc(100% - var(--cds-scroll-fade-bottom) * .6), #0000004d calc(100% - var(--cds-scroll-fade-bottom) * .45), #00000026 calc(100% - var(--cds-scroll-fade-bottom) * .3), #0000000d calc(100% - var(--cds-scroll-fade-bottom) * .15), transparent); animation-name: cds-scroll-fade-top, cds-scroll-fade-bottom, cds-scroll-fade-y-active; animation-timing-function: linear; animation-fill-mode: both, both, none; animation-duration: auto; animation-timeline: scroll(self); animation-range: 0px var(--cds-scroll-fade-size), calc(100% - var(--cds-scroll-fade-size)) 100%, 0px 101%; }
}
.scroll-fade-x { scroll-padding-left: calc(var(--cds-scroll-fade-size) * var(--cds-scroll-fade-left-on)); scroll-padding-right: calc(var(--cds-scroll-fade-size) * var(--cds-scroll-fade-right-on)); }
@supports (animation-timeline:scroll()) {
.scroll-fade-x { --cds-scroll-fade-left: calc(var(--cds-scroll-fade-left-raw) * var(--cds-scroll-fade-x-active) * var(--cds-scroll-fade-left-on)); --cds-scroll-fade-right: calc(var(--cds-scroll-fade-right-raw) * var(--cds-scroll-fade-x-active) * var(--cds-scroll-fade-right-on)); mask-image: linear-gradient(to right, transparent, #0000000d calc(var(--cds-scroll-fade-left) * .15), #00000026 calc(var(--cds-scroll-fade-left) * .3), #0000004d calc(var(--cds-scroll-fade-left) * .45), #00000080 calc(var(--cds-scroll-fade-left) * .6), #000000b3 calc(var(--cds-scroll-fade-left) * .75), #000000d9 calc(var(--cds-scroll-fade-left) * .87), #000 var(--cds-scroll-fade-left), #000 calc(100% - var(--cds-scroll-fade-right)), #000000d9 calc(100% - var(--cds-scroll-fade-right) * .87), #000000b3 calc(100% - var(--cds-scroll-fade-right) * .75), #00000080 calc(100% - var(--cds-scroll-fade-right) * .6), #0000004d calc(100% - var(--cds-scroll-fade-right) * .45), #00000026 calc(100% - var(--cds-scroll-fade-right) * .3), #0000000d calc(100% - var(--cds-scroll-fade-right) * .15), transparent); animation-name: cds-scroll-fade-left, cds-scroll-fade-right, cds-scroll-fade-x-active; animation-timing-function: linear; animation-fill-mode: both, both, none; animation-duration: auto; animation-timeline: scroll(self inline); animation-range: 0px var(--cds-scroll-fade-size), calc(100% - var(--cds-scroll-fade-size)) 100%, 0px 101%; }
.scroll-fade-x:where(:root[dir="rtl"] :dir(rtl)) { --cds-scroll-fade-left: calc(var(--cds-scroll-fade-right-raw) * var(--cds-scroll-fade-x-active) * var(--cds-scroll-fade-left-on)); --cds-scroll-fade-right: calc(var(--cds-scroll-fade-left-raw) * var(--cds-scroll-fade-x-active) * var(--cds-scroll-fade-right-on)); }
}
.\[scrollbar-width\:none\] { scrollbar-width: none; }
.\[scrollbar-gutter\:stable\] { scrollbar-gutter: stable; }
.list-disc { list-style-type: disc; }
.\[grid-auto-columns\:inherit\] { grid-auto-columns: inherit; }
.\[grid-auto-flow\:inherit\] { grid-auto-flow: inherit; }
.\[grid-auto-rows\:inherit\] { grid-auto-rows: inherit; }
.\[grid-template-columns\:inherit\] { grid-template-columns: inherit; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.grid-cols-\[1fr_1fr_auto\] { grid-template-columns: 1fr 1fr auto; }
.grid-cols-\[minmax\(0\,1fr\)\] { grid-template-columns: minmax(0px, 1fr); }
.grid-cols-\[var\(--pp-label-w\,80px\)_minmax\(0\,1fr\)\] { grid-template-columns: var(--pp-label-w,80px) minmax(0,1fr); }
.grid-cols-\[…\] { }
.\[grid-template-rows\:inherit\] { grid-template-rows: inherit; }
.\[flex-direction\:inherit\] { flex-direction: inherit; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.\[flex-wrap\:inherit\] { flex-wrap: inherit; }
.flex-wrap { flex-wrap: wrap; }
.place-items-center { place-items: center; }
.\[align-items\:inherit\] { align-items: inherit; }
.items-baseline { align-items: baseline; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.\[justify-content\:inherit\] { justify-content: inherit; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.\[justify-items\:inherit\] { justify-items: inherit; }
.\[gap\:inherit\] { gap: inherit; }
.gap-0 { gap: 0px; }
.gap-0\.5 { gap: calc(var(--spacing) * .5); }
.gap-1 { gap: var(--spacing); }
.gap-1\.5 { gap: calc(var(--spacing) * 1.5); }
.gap-2 { gap: calc(var(--spacing) * 2); }
.gap-2\.5 { gap: calc(var(--spacing) * 2.5); }
.gap-3 { gap: calc(var(--spacing) * 3); }
.gap-4 { gap: calc(var(--spacing) * 4); }
.gap-6 { gap: calc(var(--spacing) * 6); }
.gap-\[0\.15em\] { gap: 0.15em; }
.gap-\[0\.25em\] { gap: 0.25em; }
.gap-\[1px\] { gap: 1px; }
.gap-\[2px\] { gap: 2px; }
.gap-\[6\%\] { gap: 6%; }
.gap-\[var\(--cds-pad-sm\,6px\)\] { gap: var(--cds-pad-sm,6px); }
.gap-\[var\(--mc-strip-gap\)\] { gap: var(--mc-strip-gap); }
.gap-lg { gap: var(--cds-gap-lg); }
.gap-md { gap: var(--cds-gap-md); }
.gap-sm { gap: var(--cds-gap-sm); }
.gap-xs { gap: var(--cds-gap-xs); }
:where(.space-y-reverse > :not(:last-child)) { --tw-space-y-reverse: 1; }
.gap-x-1 { column-gap: var(--spacing); }
.gap-x-2 { column-gap: calc(var(--spacing) * 2); }
.gap-x-3 { column-gap: calc(var(--spacing) * 3); }
.gap-x-\[2px\] { column-gap: 2px; }
.gap-x-\[var\(--mc-group-gap\,4px\)\] { column-gap: var(--mc-group-gap,4px); }
.gap-x-md { column-gap: var(--cds-gap-md); }
.gap-x-sm { column-gap: var(--cds-gap-sm); }
:where(.space-x-reverse > :not(:last-child)) { --tw-space-x-reverse: 1; }
.gap-y-1 { row-gap: var(--spacing); }
.gap-y-2\.5 { row-gap: calc(var(--spacing) * 2.5); }
.gap-y-sm { row-gap: var(--cds-gap-sm); }
.gap-y-xs { row-gap: var(--cds-gap-xs); }
:where(.divide-x > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); }
:where(.divide-y > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); }
:where(.divide-y-reverse > :not(:last-child)) { --tw-divide-y-reverse: 1; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-start { align-self: flex-start; }
.self-stretch { align-self: stretch; }
.justify-self-end { justify-self: flex-end; }
.justify-self-stretch { justify-self: stretch; }
.truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-clip { overflow: clip; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-clip { overflow-x: clip; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.overscroll-contain { overscroll-behavior: contain; }
.overscroll-x-contain { overscroll-behavior-x: contain; }
.\!rounded-\[calc\(var\(--fr\)-\(var\(--fh\)-var\(--fhn\)\)\/2\)\] { border-radius: calc(var(--fr) - (var(--fh) - var(--fhn)) / 2) !important; }
.rounded { border-radius: var(--cds-radius); }
.rounded-\[3px\] { border-radius: 3px; }
.rounded-\[4px\] { border-radius: 4px; }
.rounded-\[calc\(0\.375rem\*var\(--cds-rem-scale\,1\)\)\] { border-radius: calc(.375rem * var(--cds-rem-scale,1)); }
.rounded-\[calc\(var\(--cds-radius\)\+var\(--cds-button-radius-add\,0px\)\)\] { border-radius: calc(var(--cds-radius) + var(--cds-button-radius-add,0px)); }
.rounded-\[calc\(var\(--cds-radius\)\+var\(--cds-menu-gutter\,calc\(0\.25rem\*var\(--cds-rem-scale\,1\)\)\)\)\] { border-radius: calc(var(--cds-radius) + var(--cds-menu-gutter,calc(.25rem * var(--cds-rem-scale,1)))); }
.rounded-\[calc\(var\(--cds-radius\)-1px\)\] { border-radius: calc(var(--cds-radius) - 1px); }
.rounded-\[calc\(var\(--cds-radius\)-2px\)\] { border-radius: calc(var(--cds-radius) - 2px); }
.rounded-\[inherit\] { border-radius: inherit; }
.rounded-\[var\(--cds-checkbox-radius\)\] { border-radius: var(--cds-checkbox-radius); }
.rounded-\[var\(--cds-keycap-radius\,4px\)\] { border-radius: var(--cds-keycap-radius,4px); }
.rounded-card { border-radius: calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale,1))); }
.rounded-composer { border-radius: var(--cds-radius-composer); }
.rounded-full { border-radius: 3.40282e+38px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-none { border-radius: 0px; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-s { border-start-start-radius: var(--cds-radius); border-end-start-radius: var(--cds-radius); }
.rounded-s-none { border-start-start-radius: 0px; border-end-start-radius: 0px; }
.rounded-ss { border-start-start-radius: var(--cds-radius); }
.rounded-e { border-start-end-radius: var(--cds-radius); border-end-end-radius: var(--cds-radius); }
.rounded-e-\[calc\(var\(--cds-radius\)\+var\(--cds-button-radius-add\,0px\)\)\] { border-start-end-radius: calc(var(--cds-radius) + var(--cds-button-radius-add,0px)); border-end-end-radius: calc(var(--cds-radius) + var(--cds-button-radius-add,0px)); }
.rounded-e-none { border-start-end-radius: 0px; border-end-end-radius: 0px; }
.rounded-se { border-start-end-radius: var(--cds-radius); }
.rounded-ee { border-end-end-radius: var(--cds-radius); }
.rounded-es { border-end-start-radius: var(--cds-radius); }
.rounded-t { border-top-left-radius: var(--cds-radius); border-top-right-radius: var(--cds-radius); }
.rounded-t-card { border-top-left-radius: calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale,1))); border-top-right-radius: calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale,1))); }
.rounded-l { border-top-left-radius: var(--cds-radius); border-bottom-left-radius: var(--cds-radius); }
.rounded-tl { border-top-left-radius: var(--cds-radius); }
.rounded-r { border-top-right-radius: var(--cds-radius); border-bottom-right-radius: var(--cds-radius); }
.rounded-tr { border-top-right-radius: var(--cds-radius); }
.rounded-b { border-bottom-right-radius: var(--cds-radius); border-bottom-left-radius: var(--cds-radius); }
.rounded-b-none { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }
.rounded-br { border-bottom-right-radius: var(--cds-radius); }
.rounded-bl { border-bottom-left-radius: var(--cds-radius); }
.border { border-style: var(--tw-border-style); border-width: 1px; }
.border\! { border-style: var(--tw-border-style) !important; border-width: 1px !important; }
.border-0 { border-style: var(--tw-border-style); border-width: 0px; }
.border-2 { border-style: var(--tw-border-style); border-width: 2px; }
.border-100 { border-style: var(--tw-border-style); border-width: 100px; }
.border-\[1\.5px\] { border-style: var(--tw-border-style); border-width: 1.5px; }
.border-x { border-inline-style: var(--tw-border-style); border-inline-width: 1px; }
.border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; }
.border-s { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 1px; }
.border-e { border-inline-end-style: var(--tw-border-style); border-inline-end-width: 1px; }
.border-bs { border-block-start-style: var(--tw-border-style); border-block-start-width: 1px; }
.border-be { border-block-end-style: var(--tw-border-style); border-block-end-width: 1px; }
.border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; }
.border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; }
.border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; }
.border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; }
.border-b-\[0\.5px\] { border-bottom-style: var(--tw-border-style); border-bottom-width: 0.5px; }
.border-b-\[length\:var\(--cds-ring-inner\)\] { border-bottom-style: var(--tw-border-style); border-bottom-width: var(--cds-ring-inner); }
.border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; }
.border-dashed { --tw-border-style: dashed; border-style: dashed; }
.\!border-transparent { border-color: rgba(0, 0, 0, 0) !important; }
.border-\[color\:var\(--cds-shortcut-cap-line\)\] { border-color: var(--cds-shortcut-cap-line); }
.border-alpha-2 { border-color: var(--cds-alpha-2); }
.border-alpha-3 { border-color: var(--cds-alpha-3); }
.border-app-accent, .border-app-accent\/70 { border-color: var(--t-app-accent); }
@supports (color:color-mix(in lab, red, red)) {
.border-app-accent\/70 { border-color: color-mix(in oklab, var(--t-app-accent) 70%, transparent); }
}
.border-border-line { border-color: var(--t-border); }
.border-border-strong { border-color: var(--t-border-strong); }
.border-editor-comment-target { border-color: var(--cds-border-editor-comment-target); }
.border-strong { border-color: var(--cds-border-strong); }
.border-stronger { border-color: var(--cds-border-stronger); }
.border-transparent { border-color: rgba(0, 0, 0, 0); }
.border-white { border-color: var(--color-white); }
.\!bg-transparent { background-color: rgba(0, 0, 0, 0) !important; }
.bg-\[color\:var\(--cds-shortcut-cap-fill\)\] { background-color: var(--cds-shortcut-cap-fill); }
.bg-\[var\(--cds-button-on-content\)\] { background-color: var(--cds-button-on-content); }
.bg-\[var\(--cds-on-accent\)\] { background-color: var(--cds-on-accent); }
.bg-\[var\(--cds-on-brand\)\] { background-color: var(--cds-on-brand); }
.bg-\[var\(--cds-on-danger\)\] { background-color: var(--cds-on-danger); }
.bg-\[var\(--cds-on-primary\)\] { background-color: var(--cds-on-primary); }
.bg-\[var\(--cds-page-bg\)\] { background-color: var(--cds-page-bg); }
.bg-\[var\(--cds-scroll-fade-strip-color\,var\(--cds-page-bg\)\)\] { background-color: var(--cds-scroll-fade-strip-color,var(--cds-page-bg)); }
.bg-\[var\(--cds-segmented-control-thumb\)\] { background-color: var(--cds-segmented-control-thumb); }
.bg-\[var\(--cds-segmented-control-track\)\] { background-color: var(--cds-segmented-control-track); }
.bg-\[var\(--cds-skeleton-base\)\] { background-color: var(--cds-skeleton-base); }
.bg-\[var\(--cds-switch-knob\)\] { background-color: var(--cds-switch-knob); }
.bg-\[var\(--cds-switch-track\)\] { background-color: var(--cds-switch-track); }
.bg-\[var\(--cds-tooltip-bg\)\] { background-color: var(--cds-tooltip-bg); }
.bg-accent { background-color: var(--cds-bg-accent); }
.bg-accent-muted { background-color: var(--cds-bg-accent-muted); }
.bg-alpha-2 { background-color: var(--cds-alpha-2); }
.bg-alpha-3 { background-color: var(--cds-alpha-3); }
.bg-app-accent, .bg-app-accent\/5 { background-color: var(--t-app-accent); }
@supports (color:color-mix(in lab, red, red)) {
.bg-app-accent\/5 { background-color: color-mix(in oklab, var(--t-app-accent) 5%, transparent); }
}
.bg-backdrop { background-color: var(--cds-backdrop); }
.bg-bad\/10 { background-color: var(--t-bad); }
@supports (color:color-mix(in lab, red, red)) {
.bg-bad\/10 { background-color: color-mix(in oklab, var(--t-bad) 10%, transparent); }
}
.bg-bad\/15 { background-color: var(--t-bad); }
@supports (color:color-mix(in lab, red, red)) {
.bg-bad\/15 { background-color: color-mix(in oklab, var(--t-bad) 15%, transparent); }
}
.bg-bg { background-color: var(--t-bg); }
.bg-bg-warm { background-color: var(--t-bg-warm); }
.bg-black, .bg-black\/40 { background-color: var(--cds-black); }
@supports (color:color-mix(in lab, red, red)) {
.bg-black\/40 { background-color: color-mix(in oklab, var(--cds-black) 40%, transparent); }
}
.bg-black\/85 { background-color: var(--cds-black); }
@supports (color:color-mix(in lab, red, red)) {
.bg-black\/85 { background-color: color-mix(in oklab, var(--cds-black) 85%, transparent); }
}
.bg-border { background-color: var(--cds-border); }
.bg-border-line { background-color: var(--t-border); }
.bg-border-strong { background-color: var(--t-border-strong); }
.bg-current { background-color: currentcolor; }
.bg-danger { background-color: var(--cds-bg-danger); }
.bg-editor-canvas { background-color: var(--cds-bg-editor-canvas); }
.bg-fg-muted { background-color: var(--t-fg-muted); }
.bg-fill-accent { background-color: var(--cds-fill-accent); }
.bg-fill-brand { background-color: var(--cds-fill-brand); }
.bg-fill-control { background-color: var(--cds-fill-control); }
.bg-fill-danger { background-color: var(--cds-fill-danger); }
.bg-fill-field { background-color: var(--cds-fill-field); }
.bg-fill-ghost-hover { background-color: var(--cds-fill-ghost-hover); }
.bg-fill-primary { background-color: var(--cds-fill-primary); }
.bg-fill-pro { background-color: var(--cds-fill-pro); }
.bg-fill-secondary { background-color: var(--cds-fill-secondary); }
.bg-fill-success { background-color: var(--cds-fill-success); }
.bg-fill-warning { background-color: var(--cds-fill-warning); }
.bg-green-500 { background-color: var(--cds-green-500); }
.bg-neutral { background-color: var(--cds-bg-neutral); }
.bg-ok\/15 { background-color: var(--t-ok); }
@supports (color:color-mix(in lab, red, red)) {
.bg-ok\/15 { background-color: color-mix(in oklab, var(--t-ok) 15%, transparent); }
}
.bg-page { background-color: var(--cds-page-bg); }
.bg-panel, .bg-panel\/90 { background-color: var(--t-panel); }
@supports (color:color-mix(in lab, red, red)) {
.bg-panel\/90 { background-color: color-mix(in oklab, var(--t-panel) 90%, transparent); }
}
.bg-surface-1 { background-color: var(--cds-surface-1); }
.bg-surface-2 { background-color: var(--cds-surface-2); }
.bg-surface-3 { background-color: var(--cds-surface-3); }
.bg-surface-panel { background-color: var(--cds-surface-panel); }
.bg-surface-popover { background-color: var(--cds-surface-popover); }
.bg-transparent { background-color: rgba(0, 0, 0, 0); }
.bg-warning { background-color: var(--cds-bg-warning); }
.bg-wash-1 { background-color: var(--t-wash-1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
@supports (color:color-mix(in lab, red, red)) {
.bg-white\/20 { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); }
}
.bg-gradient-to-l { --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); }
.bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); }
.\[background-image\:linear-gradient\(0deg\,var\(--cds-bg-danger\)\,var\(--cds-bg-danger\)\)\] { background-image: linear-gradient(0deg,var(--cds-bg-danger),var(--cds-bg-danger)); }
.\[background-image\:linear-gradient\(0deg\,var\(--cds-bg-warning\)\,var\(--cds-bg-warning\)\)\] { background-image: linear-gradient(0deg,var(--cds-bg-warning),var(--cds-bg-warning)); }
.bg-\[linear-gradient\(to_right\,\#f00_0\%\,\#ff0_17\%\,\#0f0_33\%\,\#0ff_50\%\,\#00f_67\%\,\#f0f_83\%\,\#f00_100\%\)\] { background-image: linear-gradient(90deg, red 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, red 100%); }
.bg-\[repeating-conic-gradient\(var\(--cds-alpha-2\)_0_25\%\,transparent_0_50\%\)\] { background-image: repeating-conic-gradient(var(--cds-alpha-2) 0 25%,transparent 0 50%); }
.layers-1-\[color\:var\(--cds-banner-neutral-tint\)\] { background-image: linear-gradient(var(--cds-banner-neutral-tint) 0 0); }
.from-bg { --tw-gradient-from: var(--t-bg); --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.from-panel\/45 { --tw-gradient-from: var(--t-panel); }
@supports (color:color-mix(in lab, red, red)) {
.from-panel\/45 { --tw-gradient-from: color-mix(in oklab, var(--t-panel) 45%, transparent); }
}
.from-panel\/45 { --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.bg-\[length\:8px_8px\] { background-size: 8px 8px; }
.bg-repeat { background-repeat: repeat; }
.mask-no-clip { mask-clip: no-clip; }
.mask-repeat { mask-repeat: repeat; }
.fill-accent { fill: var(--cds-fill-accent); }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.p-0 { padding: 0px; }
.p-0\.5 { padding: calc(var(--spacing) * .5); }
.p-1 { padding: var(--spacing); }
.p-1\.5 { padding: calc(var(--spacing) * 1.5); }
.p-2 { padding: calc(var(--spacing) * 2); }
.p-2\.25 { padding: calc(var(--spacing) * 2.25); }
.p-3 { padding: calc(var(--spacing) * 3); }
.p-3\.5 { padding: calc(var(--spacing) * 3.5); }
.p-4 { padding: calc(var(--spacing) * 4); }
.p-5 { padding: calc(var(--spacing) * 5); }
.p-6 { padding: calc(var(--spacing) * 6); }
.p-\[2px\] { padding: 2px; }
.p-\[var\(--cds-menu-gutter\,0\.25rem\)\] { padding: var(--cds-menu-gutter,.25rem); }
.p-\[var\(--mc-strip-pad\)\] { padding: var(--mc-strip-pad); }
.p-lg { padding: var(--cds-pad-lg); }
.p-md { padding: var(--cds-pad-md); }
.p-px { padding: 1px; }
.p-sm { padding: var(--cds-pad-sm); }
.p-xl { padding: var(--cds-pad-xl); }
.p-xs { padding: var(--cds-pad-xs); }
.px-0 { padding-inline: 0px; }
.px-0\.5 { padding-inline: calc(var(--spacing) * .5); }
.px-1 { padding-inline: var(--spacing); }
.px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); }
.px-2 { padding-inline: calc(var(--spacing) * 2); }
.px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); }
.px-3 { padding-inline: calc(var(--spacing) * 3); }
.px-3\.5 { padding-inline: calc(var(--spacing) * 3.5); }
.px-6 { padding-inline: calc(var(--spacing) * 6); }
.px-12 { padding-inline: calc(var(--spacing) * 12); }
.px-\[2px\] { padding-inline: 2px; }
.px-\[3px\] { padding-inline: 3px; }
.px-\[5px\] { padding-inline: 5px; }
.px-\[10\%\] { padding-inline: 10%; }
.px-\[calc\(var\(--cds-h-control-nested\)\*0\.3\)\] { padding-inline: calc(var(--cds-h-control-nested) * .3); }
.px-\[min\(var\(--cds-pad-md\)\,var\(--cds-button-pad-max\,var\(--cds-pad-md\)\)\)\] { padding-inline: min(var(--cds-pad-md), var(--cds-button-pad-max,var(--cds-pad-md))); }
.px-\[var\(--cds-menu-gutter\,0\.25rem\)\] { padding-inline: var(--cds-menu-gutter,.25rem); }
.px-\[var\(--cds-stack-chip-pad\)\] { padding-inline: var(--cds-stack-chip-pad); }
.px-lg { padding-inline: var(--cds-pad-lg); }
.px-md { padding-inline: var(--cds-pad-md); }
.px-sm { padding-inline: var(--cds-pad-sm); }
.\!py-lg { padding-block: var(--cds-pad-lg) !important; }
.py-0 { padding-block: 0px; }
.py-0\.5 { padding-block: calc(var(--spacing) * .5); }
.py-1 { padding-block: var(--spacing); }
.py-1\.5 { padding-block: calc(var(--spacing) * 1.5); }
.py-2 { padding-block: calc(var(--spacing) * 2); }
.py-2\.5 { padding-block: calc(var(--spacing) * 2.5); }
.py-12 { padding-block: calc(var(--spacing) * 12); }
.py-\[0\.125em\] { padding-block: 0.125em; }
.py-\[calc\(\(var\(--cds-h-control\)-var\(--cds-leading-body\)\)\/2\)\] { padding-block: calc((var(--cds-h-control) - var(--cds-leading-body)) / 2); }
.py-\[calc\(\(var\(--cds-h-control\)_-_1lh\)_\/_2\)\] { padding-block: calc((var(--cds-h-control) - 1lh) / 2); }
.py-\[calc\(0\.1875rem\*var\(--cds-rem-scale\,1\)\)\] { padding-block: calc(.1875rem * var(--cds-rem-scale,1)); }
.py-\[calc\(var\(--cds-pad-md\)\+2px\)\] { padding-block: calc(var(--cds-pad-md) + 2px); }
.py-\[var\(--cds-toolbar-pad-block\)\] { padding-block: var(--cds-toolbar-pad-block); }
.py-md { padding-block: var(--cds-pad-md); }
.py-px { padding-block: 1px; }
.py-sm { padding-block: var(--cds-pad-sm); }
.ps-2 { padding-inline-start: calc(var(--spacing) * 2); }
.ps-2\.5 { padding-inline-start: calc(var(--spacing) * 2.5); }
.ps-\[calc\(var\(--cds-stack-chip-pad\)_\/_2_\+_var\(--cds-stack-overlap\)_\*_2_\/_3_\+_2px\)\] { padding-inline-start: calc(var(--cds-stack-chip-pad) / 2 + var(--cds-stack-overlap) * 2 / 3 + 2px); }
.ps-md { padding-inline-start: var(--cds-pad-md); }
.ps-xl { padding-inline-start: var(--cds-pad-xl); }
.pe-1 { padding-inline-end: var(--spacing); }
.pe-3 { padding-inline-end: calc(var(--spacing) * 3); }
.pe-\[calc\(\(var\(--cds-h-control\)-var\(--cds-h-control-nested\)\)\/2\)\] { padding-inline-end: calc((var(--cds-h-control) - var(--cds-h-control-nested)) / 2); }
.pe-\[calc\(var\(--cds-stack-chip-pad\)_\/_2_\+_var\(--cds-stack-overlap\)_\/_3\)\] { padding-inline-end: calc(var(--cds-stack-chip-pad) / 2 + var(--cds-stack-overlap) / 3); }
.pe-\[min\(var\(--cds-pad-md\)\,var\(--cds-button-pad-max\,var\(--cds-pad-md\)\)\)\] { padding-inline-end: min(var(--cds-pad-md), var(--cds-button-pad-max,var(--cds-pad-md))); }
.pe-\[var\(--cds-toolbar-pad-block\)\] { padding-inline-end: var(--cds-toolbar-pad-block); }
.pe-md { padding-inline-end: var(--cds-pad-md); }
.pe-sm { padding-inline-end: var(--cds-pad-sm); }
.pt-0 { padding-top: 0px; }
.pt-0\.5 { padding-top: calc(var(--spacing) * .5); }
.pt-1 { padding-top: var(--spacing); }
.pt-1\.5 { padding-top: calc(var(--spacing) * 1.5); }
.pt-2 { padding-top: calc(var(--spacing) * 2); }
.pt-2\.5 { padding-top: calc(var(--spacing) * 2.5); }
.pt-3 { padding-top: calc(var(--spacing) * 3); }
.pt-\[17px\] { padding-top: 17px; }
.pt-\[calc\(1\.5rem\+var\(--tb-overlay-h\,0px\)\)\] { padding-top: calc(1.5rem + var(--tb-overlay-h,0px)); }
.pt-\[calc\(2rem\+42px\)\] { padding-top: calc(42px + 2rem); }
.pt-\[calc\(var\(--cds-pad-md\)-2px\)\] { padding-top: calc(var(--cds-pad-md) - 2px); }
.pt-\[var\(--cds-gap-sm\)\] { padding-top: var(--cds-gap-sm); }
.pt-\[var\(--cds-menu-gutter\,0\.25rem\)\] { padding-top: var(--cds-menu-gutter,.25rem); }
.pt-\[var\(--tb-overlay-h\,0px\)\] { padding-top: var(--tb-overlay-h,0px); }
.pt-md { padding-top: var(--cds-pad-md); }
.pt-sm { padding-top: var(--cds-pad-sm); }
.pr-0 { padding-right: 0px; }
.pr-1 { padding-right: var(--spacing); }
.pr-1\.5 { padding-right: calc(var(--spacing) * 1.5); }
.pr-2 { padding-right: calc(var(--spacing) * 2); }
.pr-3\.5 { padding-right: calc(var(--spacing) * 3.5); }
.pr-\[calc\(var\(--pp-iconcol\,-4px\)\+4px\)\] { padding-right: calc(var(--pp-iconcol,-4px) + 4px); }
.pr-\[env\(safe-area-inset-right\,0px\)\] { padding-right: env(safe-area-inset-right,0px); }
.pr-\[var\(--pp-gutter-r\,var\(--cds-pad-md\)\)\] { padding-right: var(--pp-gutter-r,var(--cds-pad-md)); }
.pr-md { padding-right: var(--cds-pad-md); }
.pr-sm { padding-right: var(--cds-pad-sm); }
.pr-xs { padding-right: var(--cds-pad-xs); }
.pb-1 { padding-bottom: var(--spacing); }
.pb-1\.5 { padding-bottom: calc(var(--spacing) * 1.5); }
.pb-2 { padding-bottom: calc(var(--spacing) * 2); }
.pb-4 { padding-bottom: calc(var(--spacing) * 4); }
.pb-\[5px\] { padding-bottom: 5px; }
.pb-\[calc\(\(var\(--cds-h-control\)-var\(--cds-font-size-body\)-var\(--cds-leading-footnote\)\+var\(--cds-font-size-footnote\)\)\/2\)\] { padding-bottom: calc((var(--cds-h-control) - var(--cds-font-size-body) - var(--cds-leading-footnote) + var(--cds-font-size-footnote)) / 2); }
.pb-\[calc\(0\.5rem\+var\(--mc-foot-inset\,0px\)\)\] { padding-bottom: calc(.5rem + var(--mc-foot-inset,0px)); }
.pb-\[calc\(0\.5rem\+var\(--sl-safe-b\,0px\)\)\] { padding-bottom: calc(.5rem + var(--sl-safe-b,0px)); }
.pb-\[calc\(1rem\+var\(--sl-safe-b\,0px\)\)\] { padding-bottom: calc(1rem + var(--sl-safe-b,0px)); }
.pb-\[max\(env\(safe-area-inset-bottom\)\,0\.5rem\)\] { padding-bottom: max(env(safe-area-inset-bottom), .5rem); }
.pb-\[var\(--cds-menu-gutter\,0\.25rem\)\] { padding-bottom: var(--cds-menu-gutter,.25rem); }
.pb-\[var\(--cs-bottom\,16px\)\] { padding-bottom: var(--cs-bottom,16px); }
.pb-\[var\(--sl-safe-b\,0px\)\] { padding-bottom: var(--sl-safe-b,0px); }
.pb-lg { padding-bottom: var(--cds-pad-lg); }
.pb-xs { padding-bottom: var(--cds-pad-xs); }
.pl-1 { padding-left: var(--spacing); }
.pl-1\.5 { padding-left: calc(var(--spacing) * 1.5); }
.pl-2 { padding-left: calc(var(--spacing) * 2); }
.pl-9 { padding-left: calc(var(--spacing) * 9); }
.pl-\[17px\] { padding-left: 17px; }
.pl-\[calc\(var\(--pp-gutter-l\,var\(--cds-pad-lg\)\)-var\(--cds-pad-sm\)\)\] { padding-left: calc(var(--pp-gutter-l,var(--cds-pad-lg)) - var(--cds-pad-sm)); }
.pl-\[env\(safe-area-inset-left\,0px\)\] { padding-left: env(safe-area-inset-left,0px); }
.pl-\[var\(--pp-gutter-l\,var\(--cds-pad-lg\)\)\] { padding-left: var(--pp-gutter-l,var(--cds-pad-lg)); }
.pl-lg { padding-left: var(--cds-pad-lg); }
.pl-md { padding-left: var(--cds-pad-md); }
.pl-sm { padding-left: var(--cds-pad-sm); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-start { text-align: start; }
.align-baseline { vertical-align: baseline; }
.align-middle { vertical-align: middle; }
.align-top { vertical-align: top; }
.font-inherit { font-family: inherit; }
.font-mono { font-family: var(--cds-font-mono); }
.font-sans { font-family: var(--cds-font-sans); }
.font-sans-display { font-family: var(--cds-font-sans-display); }
.text-body-semibold { font-size: var(--cds-font-size-body); line-height: var(--cds-leading-body); font-weight: var(--cds-font-weight-semibold); --cds-font-axis-wght: var(--cds-font-axis-wght-semibold); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
.text-body-semibold :is(b, strong) { --cds-font-axis-wght: var(--cds-font-axis-wght-bold); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
.text-caption-medium { font-size: var(--cds-font-size-caption); line-height: var(--cds-leading-caption); font-weight: var(--cds-font-weight-medium); --cds-font-axis-wght: var(--cds-font-axis-wght-medium); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
.text-caption-medium :is(b, strong) { --cds-font-axis-wght: var(--cds-font-axis-wght-bold); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)); }
.text-\[calc\(0\.6875rem\*var\(--cds-rem-scale\,1\)\)\]\/\[calc\(0\.875rem\*var\(--cds-rem-scale\,1\)\)\] { font-size: calc(.6875rem * var(--cds-rem-scale,1)); line-height: calc(.875rem * var(--cds-rem-scale,1)); }
.text-\[calc\(0\.8125rem\*var\(--cds-rem-scale\,1\)\)\]\/\[calc\(1\.125rem\*var\(--cds-rem-scale\,1\)\)\] { font-size: calc(.8125rem * var(--cds-rem-scale,1)); line-height: calc(1.125rem * var(--cds-rem-scale,1)); }
.text-base { font-size: var(--text-base); line-height: var(--tw-leading,var(--text-base--line-height)); }
.text-body { font-size: var(--cds-font-size-body); line-height: var(--tw-leading,var(--cds-leading-body)); }
.text-caption { font-size: var(--cds-font-size-caption); line-height: var(--tw-leading,var(--cds-leading-caption)); }
.text-footnote { font-size: var(--cds-font-size-footnote); line-height: var(--tw-leading,var(--cds-leading-footnote)); }
.text-heading { font-size: var(--cds-font-size-heading); line-height: var(--tw-leading,var(--cds-leading-heading)); }
.text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)); }
.text-title { font-size: var(--cds-font-size-title); line-height: var(--tw-leading,var(--cds-leading-title)); }
.text-xs { font-size: var(--text-xs); line-height: var(--tw-leading,var(--text-xs--line-height)); }
.text-\[0\.9em\] { font-size: 0.9em; }
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[15px\] { font-size: 15px; }
.text-\[16px\] { font-size: 16px; }
.text-\[calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\] { font-size: calc(.75rem * var(--cds-rem-scale,1)); }
.text-\[calc\(0\.5625rem\*var\(--cds-rem-scale\,1\)\)\] { font-size: calc(.5625rem * var(--cds-rem-scale,1)); }
.text-\[length\:var\(--cds-avatar-text-xs\)\] { font-size: var(--cds-avatar-text-xs); }
.leading-4 { --tw-leading: calc(var(--spacing) * 4); line-height: calc(var(--spacing) * 4); }
.leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); }
.leading-\[0\] { --tw-leading: 0; line-height: 0; }
.leading-\[1\.3\] { --tw-leading: 1.3; line-height: 1.3; }
.leading-\[1\.4\] { --tw-leading: 1.4; line-height: 1.4; }
.leading-\[1\.45\] { --tw-leading: 1.45; line-height: 1.45; }
.leading-\[18px\] { --tw-leading: 18px; line-height: 18px; }
.leading-none { --tw-leading: 1; line-height: 1; }
.leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); }
.leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); }
.leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); }
.\[line-height\:1\] { line-height: 1; }
.font-\[650\] { --tw-font-weight: 650; font-weight: 650; }
.font-medium { --tw-font-weight: var(--_cds-font-weight-role,var(--cds-font-weight-medium)); font-weight: var(--_cds-font-weight-role,var(--cds-font-weight-medium)); }
.font-normal { --tw-font-weight: var(--_cds-font-weight-role,var(--cds-font-weight-body,var(--cds-font-weight-regular))); font-weight: var(--_cds-font-weight-role,var(--cds-font-weight-body,var(--cds-font-weight-regular))); }
.font-semibold { --tw-font-weight: var(--_cds-font-weight-role,var(--cds-font-weight-semibold)); font-weight: var(--_cds-font-weight-role,var(--cds-font-weight-semibold)); }
.tracking-\[0\.6px\] { --tw-tracking: .6px; letter-spacing: 0.6px; }
.tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.text-wrap { text-wrap: wrap; }
.break-words, .wrap-break-word { overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.text-clip { text-overflow: clip; }
.text-ellipsis { text-overflow: ellipsis; }
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.tab-1 { tab-size: 1; }
.tab-2 { tab-size: 2; }
.tab-3 { tab-size: 3; }
.tab-4 { tab-size: 4; }
.tab-9 { tab-size: 9; }
.\[color\:var\(--cds-shortcut-cap-ink\)\] { color: var(--cds-shortcut-cap-ink); }
.text-\[color-mix\(in_srgb\,currentColor_85\%\,transparent\)\] { color: currentcolor; }
@supports (color:color-mix(in lab, red, red)) {
.text-\[color-mix\(in_srgb\,currentColor_85\%\,transparent\)\] { color: color-mix(in srgb, currentcolor 85%, transparent); }
}
.text-\[color\:var\(--cds-text-stays-secondary\,var\(--cds-text-muted\)\)\] { color: var(--cds-text-stays-secondary,var(--cds-text-muted)); }
.text-\[var\(--cds-tooltip-fg\)\] { color: var(--cds-tooltip-fg); }
.text-accent { color: var(--cds-text-accent); }
.text-app-accent { color: var(--t-app-accent); }
.text-bad { color: var(--t-bad); }
.text-blue-text { color: var(--t-blue-text); }
.text-danger { color: var(--cds-text-danger); }
.text-disabled { color: var(--cds-text-disabled); }
.text-fg { color: var(--t-fg); }
.text-fg-muted { color: var(--t-fg-muted); }
.text-fg-secondary { color: var(--t-fg-secondary); }
.text-gray-0 { color: var(--cds-gray-0); }
.text-inherit { color: inherit; }
.text-muted { color: var(--cds-text-muted); }
.text-ok { color: var(--t-ok); }
.text-on-accent, .text-on-accent\/50 { color: var(--cds-on-accent); }
@supports (color:color-mix(in lab, red, red)) {
.text-on-accent\/50 { color: color-mix(in oklab, var(--cds-on-accent) 50%, transparent); }
}
.text-on-accent\/60 { color: var(--cds-on-accent); }
@supports (color:color-mix(in lab, red, red)) {
.text-on-accent\/60 { color: color-mix(in oklab, var(--cds-on-accent) 60%, transparent); }
}
.text-on-brand { color: var(--cds-on-brand); }
.text-on-danger { color: var(--cds-on-danger); }
.text-on-primary { color: var(--cds-on-primary); }
.text-on-pro { color: var(--cds-on-pro); }
.text-primary { color: var(--cds-text-primary); }
.text-secondary { color: var(--cds-text-secondary); }
.text-warning { color: var(--cds-text-warning); }
.text-white { color: var(--color-white); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
@supports (color:color-mix(in lab, red, red)) {
.text-white\/50 { color: color-mix(in oklab, var(--color-white) 50%, transparent); }
}
.text-yellow-750 { color: var(--cds-yellow-750); }
.capitalize { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }
.normal-case { text-transform: none; }
.uppercase { text-transform: uppercase; }
.\!italic { font-style: italic !important; }
.italic { font-style: italic; }
.italic\! { font-style: italic !important; }
.not-italic { font-style: normal; }
.diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.lining-nums { --tw-numeric-figure: lining-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.oldstyle-nums { --tw-numeric-figure: oldstyle-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.ordinal { --tw-ordinal: ordinal; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.proportional-nums { --tw-numeric-spacing: proportional-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.slashed-zero { --tw-slashed-zero: slashed-zero; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.stacked-fractions { --tw-numeric-fraction: stacked-fractions; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); }
.normal-nums { font-variant-numeric: normal; }
.\!underline { text-decoration-line: underline !important; }
.line-through { text-decoration-line: line-through; }
.no-underline { text-decoration-line: none; }
.overline { text-decoration-line: overline; }
.underline { text-decoration-line: underline; }
.underline\! { text-decoration-line: underline !important; }
.underline-offset-2 { text-underline-offset: 2px; }
.antialiased { -webkit-font-smoothing: antialiased; }
.subpixel-antialiased { -webkit-font-smoothing: auto; }
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-40 { opacity: 0.4; }
.opacity-45 { opacity: 0.45; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }
.opacity-\[var\(--cds-resize-pill-force\,0\)\] { opacity: var(--cds-resize-pill-force,0); }
.opacity-disabled { opacity: var(--cds-opacity-disabled); }
.\!shadow-none { --tw-shadow: 0 0 #0000 !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; }
.shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow\! { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; }
.shadow-\[0_0_0_1px_rgba\(0\,0\,0\,0\.3\)\] { --tw-shadow: 0 0 0 1px var(--tw-shadow-color,#0000004d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-\[0_4px_16px_rgba\(0\,0\,0\,0\.1\)\,0_1px_4px_rgba\(0\,0\,0\,0\.06\)\] { --tw-shadow: 0 4px 16px var(--tw-shadow-color,#0000001a), 0 1px 4px var(--tw-shadow-color,#0000000f); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-\[inset_0_-1px_0_0_var\(--t-border\)\] { --tw-shadow: inset 0 -1px 0 0 var(--tw-shadow-color,var(--t-border)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-\[inset_0_0_0_1px_var\(--cds-button-on-content-ring\)\] { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-button-on-content-ring)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-\[inset_0_0_0_1px_var\(--cds-split-ring\,transparent\)\] { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-split-ring,transparent)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-\[inset_0_0_0_2px_var\(--cds-fill-accent\)\] { --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color,var(--cds-fill-accent)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-\[inset_0_0_0_var\(--cds-ring-inner\)_var\(--cds-banner-neutral-ring\,var\(--cds-ring-color\)\)\,0_0_0_var\(--cds-ring-outer\)_var\(--cds-banner-neutral-ring\,var\(--cds-ring-color\)\)\] { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-banner-neutral-ring,var(--cds-ring-color)), 0 0 0 var(--cds-ring-outer) var(--cds-banner-neutral-ring,var(--cds-ring-color)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-\[inset_0_0_24px_0_color-mix\(in_srgb\,var\(--cds-fill-accent\)_20\%\,transparent\)\] { --tw-shadow: inset 0 0 24px 0 var(--tw-shadow-color,var(--cds-fill-accent)); }
@supports (color:color-mix(in lab, red, red)) {
.shadow-\[inset_0_0_24px_0_color-mix\(in_srgb\,var\(--cds-fill-accent\)_20\%\,transparent\)\] { --tw-shadow: inset 0 0 24px 0 var(--tw-shadow-color,color-mix(in srgb,var(--cds-fill-accent) 20%,transparent)); }
}
.shadow-\[inset_0_0_24px_0_color-mix\(in_srgb\,var\(--cds-fill-accent\)_20\%\,transparent\)\] { box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-card-ring { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-ring-color), 0 0 0 var(--cds-ring-outer) var(--cds-ring-color); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-field { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-fill-secondary-ring)), 0 1px 2px 0 var(--tw-shadow-color,#0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-field-drop { --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color,#0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-field-hover { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-strong)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-field-ring { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-fill-field-ring)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-lg { --tw-shadow: var(--cds-shadow-lg); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-panel { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-ring-color), 0 0 0 var(--cds-ring-outer) var(--cds-ring-color), var(--cds-shadow-popover); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-panel-lg { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-ring-color), 0 0 0 var(--cds-ring-outer) var(--cds-ring-color), var(--cds-shadow-lg); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-panel-md { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-ring-color), 0 0 0 var(--cds-ring-outer) var(--cds-ring-color), var(--cds-shadow-md); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-panel-sm { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-ring-color), 0 0 0 var(--cds-ring-outer) var(--cds-ring-color), var(--cds-shadow-sm); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-popover { --tw-shadow: var(--cds-shadow-popover); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-ring-danger { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-danger)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-ring-warning { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-warning)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-sm { --tw-shadow: var(--cds-shadow-sm); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.ring, .ring-1 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.ring-2 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.ring-6 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.inset-ring { --tw-inset-ring-shadow: inset 0 0 0 1px var(--tw-inset-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.\[box-shadow\:0_0_0_2px_var\(--cds-page-bg\)\] { box-shadow: 0 0 0 2px var(--cds-page-bg); }
.\[box-shadow\:inset_0_0_0_1px_var\(--cds-border\)\] { box-shadow: inset 0 0 0 1px var(--cds-border); }
.\[box-shadow\:var\(--cds-segmented-control-thumb-shadow\,inset_0_0_0_1px_var\(--cds-border\)\,0_1px_2px_0_rgb\(0_0_0\/0\.05\)\)\] { box-shadow: var(--cds-segmented-control-thumb-shadow,inset 0 0 0 1px var(--cds-border),0 1px 2px 0 #0000000d); }
.ring-accent { --tw-ring-color: var(--cds-border-accent); }
.ring-border-line { --tw-ring-color: var(--t-border); }
.ring-danger { --tw-ring-color: var(--cds-border-danger); }
.ring-editor-comment-target { --tw-ring-color: var(--cds-border-editor-comment-target); }
.ring-pro { --tw-ring-color: var(--cds-border-pro); }
.ring-success { --tw-ring-color: var(--cds-border-success); }
.ring-warning { --tw-ring-color: var(--cds-border-warning); }
.outline-hidden { --tw-outline-style: none; outline-style: none; }
@media (forced-colors: active) {
.outline-hidden { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
}
.outline, .outline-1 { outline-style: var(--tw-outline-style); outline-width: 1px; }
.outline-2 { outline-style: var(--tw-outline-style); outline-width: 2px; }
.outline-3 { outline-style: var(--tw-outline-style); outline-width: 3px; }
.-outline-offset-1 { outline-offset: calc(-1px); }
.-outline-offset-2 { outline-offset: calc(-2px); }
.outline-offset-1 { outline-offset: 1px; }
.outline-offset-2 { outline-offset: 2px; }
.outline-offset-4 { outline-offset: 4px; }
.outline-app-accent { outline-color: var(--t-app-accent); }
.outline-border-strong { outline-color: var(--t-border-strong); }
.outline-fill-accent { outline-color: var(--cds-fill-accent); }
.outline-transparent { outline-color: rgba(0, 0, 0, 0); }
.blur { --tw-blur: blur(8px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.blur\! { --tw-blur: blur(8px) !important; filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; }
.blur-\[1\.5px\] { --tw-blur: blur(1.5px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.drop-shadow { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color,#0000000f)); --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.grayscale\! { --tw-grayscale: grayscale(100%) !important; filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; }
.invert { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.invert\! { --tw-invert: invert(100%) !important; filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; }
.saturate-50 { --tw-saturate: saturate(50%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.sepia { --tw-sepia: sepia(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.sepia\! { --tw-sepia: sepia(100%) !important; filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; }
.filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.filter\! { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; }
.backdrop-blur { --tw-backdrop-blur: blur(8px); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.backdrop-blur-\[12px\] { --tw-backdrop-blur: blur(12px); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.backdrop-invert { --tw-backdrop-invert: invert(100%); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.backdrop-saturate-150 { --tw-backdrop-saturate: saturate(150%); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.backdrop-sepia { --tw-backdrop-sepia: sepia(100%); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.backdrop-filter { backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition\! { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)) !important; transition-duration: var(--tw-duration,var(--default-transition-duration)) !important; }
.transition-\[background-color\,box-shadow\,color\] { transition-property: background-color, box-shadow, color; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[box-shadow\] { transition-property: box-shadow; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[clip-path\] { transition-property: clip-path; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[height\] { transition-property: height; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[left\,top\] { transition-property: left, top; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[opacity\,color\,background-color\] { transition-property: opacity, color, background-color; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[opacity\,scale\,filter\] { transition-property: opacity, scale, filter; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[opacity\,scale\] { transition-property: opacity, scale; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[opacity\,translate\] { transition-property: opacity, translate; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[opacity\,visibility\] { transition-property: opacity, visibility; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[outline-color\] { transition-property: outline-color; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[top\] { transition-property: top; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[transform\,opacity\] { transition-property: transform, opacity; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[translate\,height\,scale\] { transition-property: translate, height, scale; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[translate\] { transition-property: translate; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[width\,background-color\,border-color\] { transition-property: width, background-color, border-color; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-\[width\] { transition-property: width; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.\[transition-property\:text-decoration-color\,box-shadow\] { transition-property: text-decoration-color, box-shadow; }
.\[transition-property\:text-decoration-color\] { transition-property: text-decoration-color; }
.transition-none { transition-property: none; }
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.duration-150 { --tw-duration: .15s; transition-duration: 0.15s; }
.duration-300 { --tw-duration: .3s; transition-duration: 0.3s; }
.duration-base { --tw-duration: var(--cds-dur-base); transition-duration: var(--cds-dur-base); }
.duration-fast { --tw-duration: var(--cds-dur-fast); transition-duration: var(--cds-dur-fast); }
.duration-sheet { --tw-duration: var(--cds-dur-sheet); transition-duration: var(--cds-dur-sheet); }
.duration-snap { --tw-duration: var(--cds-dur-snap); transition-duration: var(--cds-dur-snap); }
.ease-in { --tw-ease: var(--ease-in); transition-timing-function: var(--ease-in); }
.ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); }
.ease-out { --tw-ease: var(--cds-ease-out); transition-timing-function: var(--cds-ease-out); }
.ease-overshoot { --tw-ease: var(--cds-ease-overshoot); transition-timing-function: var(--cds-ease-overshoot); }
.ease-snap { --tw-ease: var(--cds-ease-snap); transition-timing-function: var(--cds-ease-snap); }
.forced-color-adjust-none { forced-color-adjust: none; }
.draggable-none { app-region: no-drag; }
.font-control { --_cds-font-weight-role: var(--cds-font-weight-control); --_cds-font-axis-wght-role: var(--cds-font-axis-wght-control); }
.font-header { --_cds-font-weight-role: var(--cds-font-weight-header); --_cds-font-axis-wght-role: var(--cds-font-axis-wght-header); }
.outline-none { --tw-outline-style: none; outline-style: none; }
.outline-solid { --tw-outline-style: solid; outline-style: solid; }
.select-all { user-select: all; }
.select-none { user-select: none; }
.select-text { user-select: text; }
.\[--btn-dot-r\:calc\(0\.1875rem\*var\(--cds-rem-scale\,1\)\)\] { --btn-dot-r: calc(.1875rem * var(--cds-rem-scale,1)); }
.\[--btn-dot-x\:calc\(100\%_-_var\(--btn-dot-r\)_\+_1px\)\] { --btn-dot-x: calc(100% - var(--btn-dot-r) + 1px); }
.\[--cds-button-on-content\:var\(--cds-button-on-content-hover\)\] { --cds-button-on-content: var(--cds-button-on-content-hover); }
.\[--cds-checkbox-glyph\:var\(--cds-checkbox-xxs-glyph\)\] { --cds-checkbox-glyph: var(--cds-checkbox-xxs-glyph); }
.\[--cds-checkbox-radius\:var\(--cds-checkbox-xxs-radius\)\] { --cds-checkbox-radius: var(--cds-checkbox-xxs-radius); }
.\[--cds-checkbox\:var\(--cds-checkbox-xxs\)\] { --cds-checkbox: var(--cds-checkbox-xxs); }
.\[--cds-disclosure-panel-height\:var\(--collapsible-panel-height\)\] { --cds-disclosure-panel-height: var(--collapsible-panel-height); }
.\[--cds-menu-gutter\:initial\] { --cds-menu-gutter: initial; }
.\[--cds-pad-xl\:var\(--cds-pad-lg\)\] { --cds-pad-xl: var(--cds-pad-lg); }
.\[--cds-prose-code-color\:currentColor\] { --cds-prose-code-color: currentColor; }
.\[--cds-prose-code-color\:var\(--cds-text-danger\)\] { --cds-prose-code-color: var(--cds-text-danger); }
.\[--cds-prose-marker-color\:currentColor\] { --cds-prose-marker-color: currentColor; }
.\[--cds-prose-marker-color\:var\(--cds-text-secondary\)\] { --cds-prose-marker-color: var(--cds-text-secondary); }
.\[--cds-resize-pill-force\:1\] { --cds-resize-pill-force: 1; }
.\[--cds-ring-inner\:0px\] { --cds-ring-inner: 0px; }
.\[--cds-ring-outer\:1px\] { --cds-ring-outer: 1px; }
.\[--cds-shortcut-cap-ink\:currentColor\] { --cds-shortcut-cap-ink: currentColor; }
.\[--cds-shortcut-cap-ink\:var\(--cds-text-muted\)\] { --cds-shortcut-cap-ink: var(--cds-text-muted); }
.\[--cds-stack-chip-pad\:0\.5rem\] { --cds-stack-chip-pad: .5rem; }
.\[--cds-stack-chip-pad\:0\.25rem\] { --cds-stack-chip-pad: .25rem; }
.\[--cds-stack-chip-pad\:0\.75rem\] { --cds-stack-chip-pad: .75rem; }
.\[--cds-stack-chip-pad\:0\.375rem\] { --cds-stack-chip-pad: .375rem; }
.\[--cds-stack-overlap\:calc\(var\(--cds-avatar-lg\)\*0\.25\)\] { --cds-stack-overlap: calc(var(--cds-avatar-lg) * .25); }
.\[--cds-stack-overlap\:calc\(var\(--cds-avatar-md\)\*0\.25\)\] { --cds-stack-overlap: calc(var(--cds-avatar-md) * .25); }
.\[--cds-stack-overlap\:calc\(var\(--cds-avatar-sm\)\*0\.25\)\] { --cds-stack-overlap: calc(var(--cds-avatar-sm) * .25); }
.\[--cds-stack-overlap\:calc\(var\(--cds-avatar-xs\)\*0\.25\)\] { --cds-stack-overlap: calc(var(--cds-avatar-xs) * .25); }
.\[--fh\:var\(--cds-h-control\)\] { --fh: var(--cds-h-control); }
.\[--fhn\:var\(--cds-h-control-nested\)\] { --fhn: var(--cds-h-control-nested); }
.\[--fr\:var\(--cds-radius\)\] { --fr: var(--cds-radius); }
.\[--kit-rn-max-w\:45rem\] { --kit-rn-max-w: 45rem; }
.\[--kit-rn-min-w\:10rem\] { --kit-rn-min-w: 10rem; }
.\[--mc-group-gap\:2px\] { --mc-group-gap: 2px; }
.\[--mc-group-gap\:4px\] { --mc-group-gap: 4px; }
.\[--mc-strip-gap\:2px\] { --mc-strip-gap: 2px; }
.\[--mc-strip-gap\:4px\] { --mc-strip-gap: 4px; }
.\[--mc-strip-pad\:4px\] { --mc-strip-pad: 4px; }
.\[--mc-strip-pad\:5px\] { --mc-strip-pad: 5px; }
.\[--more-shift\:1\.5rem\] { --more-shift: 1.5rem; }
.\[--pp-gutter-l\:0px\] { --pp-gutter-l: 0px; }
.\[--pp-gutter-r\:0px\] { --pp-gutter-r: 0px; }
.\[--pp-iconcol\:var\(--cds-h-control\)\] { --pp-iconcol: var(--cds-h-control); }
.\[--pp-label-w\:3rem\] { --pp-label-w: 3rem; }
.\[--pp-label-w\:66px\] { --pp-label-w: 66px; }
.\[--pp-label-w\:72px\] { --pp-label-w: 72px; }
.\[--preview-card-min-w\:0px\] { --preview-card-min-w: 0px; }
.\[--prop-row-h\:0px\] { --prop-row-h: 0px; }
.\[--prop-row-h\:32px\] { --prop-row-h: 32px; }
.\[--resize-line\:2px\] { --resize-line: 2px; }
.\[--seg-dot-r\:calc\(0\.1875rem\*var\(--cds-rem-scale\,1\)\)\] { --seg-dot-r: calc(.1875rem * var(--cds-rem-scale,1)); }
.\[--seg-dot-x\:calc\(100\%_-_var\(--seg-dot-r\)_\+_1px\)\] { --seg-dot-x: calc(100% - var(--seg-dot-r) + 1px); }
.\[--sl-thumb-w\:inherit\] { --sl-thumb-w: inherit; }
.\[--ts\:calc\(1_-_var\(--toast-index\)_\*_0\.04\)\] { --ts: calc(1 - var(--toast-index) * .04); }
.\[--ty\:calc\(var\(--toast-index\)_\*_-14px\)\] { --ty: calc(var(--toast-index) * -14px); }
.\[clip-path\:inset\(0_0_-200vh_0\)\] { clip-path: inset(0px 0px -200vh); }
.\[clip-path\:inset\(0_1px\)\] { clip-path: inset(0px 1px); }
.\[clip-path\:inset\(0_100\%_0_0\)\] { clip-path: inset(0px 100% 0px 0px); }
.\[font-variation-settings\:inherit\] { font-variation-settings: inherit; }
.\[font-variation-settings\:normal\] { font-variation-settings: normal; }
.\[scroll-timeline\:--cds-dialog-scroll_block\] { scroll-timeline: --cds-dialog-scroll; }
:where(.divide-x-reverse > :not(:last-child)) { --tw-divide-x-reverse: 1; }
.ring-inset { --tw-ring-inset: inset; }
.not-\[\[data-cds-fizzy-lake\~\=icons\]_\*\]\:translate-x-\[0\.074em\]:not(:is([data-cds-fizzy-lake~="icons"] *)) { --tw-translate-x: .074em; translate: var(--tw-translate-x) var(--tw-translate-y); }
.group-focus-within\/cell\:flex:is(:where(.group\/cell):focus-within *), .group-focus-within\/field\:flex:is(:where(.group\/field):focus-within *) { display: flex; }
@media (hover: hover) {
.group-hover\:border-border-strong:is(:where(.group):hover *) { border-color: var(--t-border-strong); }
.group-hover\:border-stronger:is(:where(.group):hover *) { border-color: var(--cds-border-stronger); }
.group-hover\:bg-panel:is(:where(.group):hover *) { background-color: var(--t-panel); }
.group-hover\:text-fg:is(:where(.group):hover *) { color: var(--t-fg); }
.group-hover\/btn\:bg-\[var\(--cds-button-on-content-hover\)\]:is(:where(.group\/btn):hover *) { background-color: var(--cds-button-on-content-hover); }
.group-hover\/btn\:bg-fill-brand-hover:is(:where(.group\/btn):hover *) { background-color: var(--cds-fill-brand-hover); }
.group-hover\/btn\:bg-fill-danger-hover:is(:where(.group\/btn):hover *) { background-color: var(--cds-fill-danger-hover); }
.group-hover\/btn\:bg-fill-ghost-hover:is(:where(.group\/btn):hover *) { background-color: var(--cds-fill-ghost-hover); }
.group-hover\/btn\:bg-fill-primary-hover:is(:where(.group\/btn):hover *) { background-color: var(--cds-fill-primary-hover); }
.group-hover\/btn\:bg-fill-secondary-hover:is(:where(.group\/btn):hover *) { background-color: var(--cds-fill-secondary-hover); }
.group-hover\/cell\:flex:is(:where(.group\/cell):hover *) { display: flex; }
.group-hover\/end\:opacity-100:is(:where(.group\/end):hover *) { opacity: 1; }
.group-hover\/label\:flex:is(:where(.group\/label):hover *) { display: flex; }
.group-hover\/label\:bg-border-strong:is(:where(.group\/label):hover *) { background-color: var(--t-border-strong); }
.group-hover\/menu-danger\:text-on-danger:is(:where(.group\/menu-danger):hover *) { color: var(--cds-on-danger); }
.group-hover\/more\:bg-bg-warm:is(:where(.group\/more):hover *) { background-color: var(--t-bg-warm); }
.group-hover\/rail\:pointer-events-auto:is(:where(.group\/rail):hover *) { pointer-events: auto; }
.group-hover\/rail\:opacity-100:is(:where(.group\/rail):hover *) { opacity: 1; }
.group-hover\/rd\:border-stronger:is(:where(.group\/rd):hover *) { border-color: var(--cds-border-stronger); }
.group-hover\/resize\:opacity-100:is(:where(.group\/resize):hover *) { opacity: 1; }
.group-hover\/row\:w-auto:is(:where(.group\/row):hover *) { width: auto; }
.group-hover\/row\:overflow-visible:is(:where(.group\/row):hover *) { overflow: visible; }
.group-hover\/skip\:bg-bg-warm:is(:where(.group\/skip):hover *) { background-color: var(--t-bg-warm); }
.group-hover\/skip\:text-fg:is(:where(.group\/skip):hover *) { color: var(--t-fg); }
.group-hover\/split\:opacity-100:is(:where(.group\/split):hover *) { opacity: 1; }
.group-hover\/tile\:text-fg-secondary:is(:where(.group\/tile):hover *) { color: var(--t-fg-secondary); }
.group-hover\/tile\:outline-border-strong:is(:where(.group\/tile):hover *) { outline-color: var(--t-border-strong); }
}
.group-focus-visible\/btn\:\!shadow-\[inset_0_0_0_1px_var\(--cds-button-on-content-ring\)\]:is(:where(.group\/btn):focus-visible *) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-button-on-content-ring)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; }
.group-focus-visible\/btn\:shadow-\[inset_0_0_0_1px_var\(--cds-page-bg\)\]:is(:where(.group\/btn):focus-visible *) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-page-bg)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-focus-visible\/cb\:shadow-focus:is(:where(.group\/cb):focus-visible *) { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-focus-visible\/menu-danger\:text-on-danger:is(:where(.group\/menu-danger):focus-visible *) { color: var(--cds-on-danger); }
.group-focus-visible\/more\:shadow-\[0_0_0_2px_var\(--t-app-accent\)\]:is(:where(.group\/more):focus-visible *) { --tw-shadow: 0 0 0 2px var(--tw-shadow-color,var(--t-app-accent)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-focus-visible\/more\:ring-0:is(:where(.group\/more):focus-visible *) { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-focus-visible\/rd\:shadow-focus:is(:where(.group\/rd):focus-visible *) { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-focus-visible\/resize\:max-h-none:is(:where(.group\/resize):focus-visible *) { max-height: none; }
.group-focus-visible\/resize\:max-w-none:is(:where(.group\/resize):focus-visible *) { max-width: none; }
.group-focus-visible\/resize\:rounded-full:is(:where(.group\/resize):focus-visible *) { border-radius: 3.40282e+38px; }
.group-focus-visible\/resize\:bg-fill-accent:is(:where(.group\/resize):focus-visible *) { background-color: var(--cds-fill-accent); }
.group-focus-visible\/resize\:opacity-100:is(:where(.group\/resize):focus-visible *) { opacity: 1; }
.group-focus-visible\/resize\:shadow-focus:is(:where(.group\/resize):focus-visible *) { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-focus-visible\/resize\:delay-0:is(:where(.group\/resize):focus-visible *) { transition-delay: 0s; }
.group-focus-visible\/resize\:\[--resize-line\:3px\]:is(:where(.group\/resize):focus-visible *) { --resize-line: 3px; }
.group-focus-visible\/slider\:shadow-focus:is(:where(.group\/slider):focus-visible *), .group-focus-visible\/track\:shadow-focus:is(:where(.group\/track):focus-visible *), .group-focus-visible\/video\:shadow-focus:is(:where(.group\/video):focus-visible *) { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-focus-visible\/video\:outline-hidden:is(:where(.group\/video):focus-visible *) { --tw-outline-style: none; outline-style: none; }
@media (forced-colors: active) {
.group-focus-visible\/video\:outline-hidden:is(:where(.group\/video):focus-visible *) { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
}
@media (hover: hover) {
.group-enabled\/select\:group-hover\/select\:text-secondary:is(:where(.group\/select):enabled *):is(:where(.group\/select):hover *) { color: var(--cds-text-secondary); }
}
.group-aria-expanded\/more\:bg-bg-warm:is(:where(.group\/more)[aria-expanded="true"] *) { background-color: var(--t-bg-warm); }
.group-aria-pressed\/btn\:bg-accent:is(:where(.group\/btn)[aria-pressed="true"] *) { background-color: var(--cds-bg-accent); }
.group-aria-pressed\/btn\:bg-fill-ghost-selected:is(:where(.group\/btn)[aria-pressed="true"] *) { background-color: var(--cds-fill-ghost-selected); }
.group-aria-pressed\/btn\:shadow-field-pressed:is(:where(.group\/btn)[aria-pressed="true"] *) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-fill-secondary-pressed-ring)), 0 1px 2px 0 var(--tw-shadow-color,#0000000d); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
@media (hover: hover) {
.group-hover\/btn\:group-aria-pressed\/btn\:bg-accent:is(:where(.group\/btn):hover *):is(:where(.group\/btn)[aria-pressed="true"] *) { background-color: var(--cds-bg-accent); }
.group-hover\/btn\:group-aria-pressed\/btn\:bg-fill-ghost-selected:is(:where(.group\/btn):hover *):is(:where(.group\/btn)[aria-pressed="true"] *) { background-color: var(--cds-fill-ghost-selected); }
}
.group-focus-visible\/btn\:group-aria-pressed\/btn\:shadow-\[inset_0_0_0_1px_var\(--cds-page-bg\)\]:is(:where(.group\/btn):focus-visible *):is(:where(.group\/btn)[aria-pressed="true"] *) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-page-bg)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.group-data-\[cds-sheet-drilled\]\/sheet\:-translate-x-\[calc\(100\%\+env\(safe-area-inset-left\,0px\)\)\]:is(:where(.group\/sheet)[data-cds-sheet-drilled] *) { --tw-translate-x: calc(calc(100% + env(safe-area-inset-left,0px)) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
.group-data-\[checked\]\/cb\:border-transparent:is(:where(.group\/cb)[data-checked] *) { border-color: rgba(0, 0, 0, 0); }
.group-data-\[checked\]\/cb\:bg-fill-accent:is(:where(.group\/cb)[data-checked] *) { background-color: var(--cds-fill-accent); }
.group-data-\[checked\]\/cb\:duration-base:is(:where(.group\/cb)[data-checked] *) { --tw-duration: var(--cds-dur-base); transition-duration: var(--cds-dur-base); }
.group-data-\[checked\]\/cb\:\[clip-path\:inset\(0\)\]:is(:where(.group\/cb)[data-checked] *) { clip-path: inset(0px); }
@media (hover: hover) {
.group-data-\[checked\]\/cb\:group-hover\/cb\:bg-fill-accent-hover:is(:where(.group\/cb)[data-checked] *):is(:where(.group\/cb):hover *) { background-color: var(--cds-fill-accent-hover); }
}
.group-data-\[checked\]\/rd\:border-0:is(:where(.group\/rd)[data-checked] *) { border-style: var(--tw-border-style); border-width: 0px; }
.group-data-\[checked\]\/rd\:bg-fill-accent:is(:where(.group\/rd)[data-checked] *) { background-color: var(--cds-fill-accent); }
@media (hover: hover) {
.group-data-\[checked\]\/rd\:group-hover\/rd\:bg-fill-accent-hover:is(:where(.group\/rd)[data-checked] *):is(:where(.group\/rd):hover *) { background-color: var(--cds-fill-accent-hover); }
.group-data-\[disabled\]\/rd\:group-hover\/rd\:border-strong:is(:where(.group\/rd)[data-disabled] *):is(:where(.group\/rd):hover *) { border-color: var(--cds-border-strong); }
}
.group-data-\[highlighted\]\/menu-danger\:text-on-danger:is(:where(.group\/menu-danger)[data-highlighted] *) { color: var(--cds-on-danger); }
.group-data-\[highlighted\]\/sheet-close\:bg-fill-ghost-hover:is(:where(.group\/sheet-close)[data-highlighted] *) { background-color: var(--cds-fill-ghost-hover); }
.group-data-\[indeterminate\]\/cb\:border-transparent:is(:where(.group\/cb)[data-indeterminate] *) { border-color: rgba(0, 0, 0, 0); }
.group-data-\[indeterminate\]\/cb\:bg-fill-accent:is(:where(.group\/cb)[data-indeterminate] *) { background-color: var(--cds-fill-accent); }
.group-data-\[indeterminate\]\/cb\:duration-base:is(:where(.group\/cb)[data-indeterminate] *) { --tw-duration: var(--cds-dur-base); transition-duration: var(--cds-dur-base); }
.group-data-\[indeterminate\]\/cb\:\[clip-path\:inset\(0\)\]:is(:where(.group\/cb)[data-indeterminate] *) { clip-path: inset(0px); }
@media (hover: hover) {
.group-data-\[indeterminate\]\/cb\:group-hover\/cb\:bg-fill-accent-hover:is(:where(.group\/cb)[data-indeterminate] *):is(:where(.group\/cb):hover *) { background-color: var(--cds-fill-accent-hover); }
}
.group-data-\[panel-open\]\/clp\:rotate-90:is(:where(.group\/clp)[data-panel-open] *) { rotate: 90deg; }
.group-data-\[popup-open\]\/split\:pointer-events-none:is(:where(.group\/split)[data-popup-open] *) { pointer-events: none; }
@media (hover: hover) {
.group-data-\[unchecked\]\/cb\:group-hover\/cb\:border-stronger:is(:where(.group\/cb)[data-unchecked] *):is(:where(.group\/cb):hover *) { border-color: var(--cds-border-stronger); }
.group-data-\[disabled\]\/cb\:group-data-\[unchecked\]\/cb\:group-hover\/cb\:border-strong:is(:where(.group\/cb)[data-disabled] *):is(:where(.group\/cb)[data-unchecked] *):is(:where(.group\/cb):hover *) { border-color: var(--cds-border-strong); }
}
.group-\[\[aria-haspopup\]\[aria-expanded\=true\]\]\/btn\:bg-\[var\(--cds-button-on-content-hover\)\]:is(:where(.group\/btn)[aria-haspopup][aria-expanded="true"] *) { background-color: var(--cds-button-on-content-hover); }
.group-\[\[aria-haspopup\]\[aria-expanded\=true\]\]\/btn\:bg-fill-brand-hover:is(:where(.group\/btn)[aria-haspopup][aria-expanded="true"] *) { background-color: var(--cds-fill-brand-hover); }
.group-\[\[aria-haspopup\]\[aria-expanded\=true\]\]\/btn\:bg-fill-danger-hover:is(:where(.group\/btn)[aria-haspopup][aria-expanded="true"] *) { background-color: var(--cds-fill-danger-hover); }
.group-\[\[aria-haspopup\]\[aria-expanded\=true\]\]\/btn\:bg-fill-ghost-hover:is(:where(.group\/btn)[aria-haspopup][aria-expanded="true"] *) { background-color: var(--cds-fill-ghost-hover); }
.group-\[\[aria-haspopup\]\[aria-expanded\=true\]\]\/btn\:bg-fill-primary-hover:is(:where(.group\/btn)[aria-haspopup][aria-expanded="true"] *) { background-color: var(--cds-fill-primary-hover); }
.group-\[\[aria-haspopup\]\[aria-expanded\=true\]\]\/btn\:bg-fill-secondary-hover:is(:where(.group\/btn)[aria-haspopup][aria-expanded="true"] *) { background-color: var(--cds-fill-secondary-hover); }
.group-\[\[aria-haspopup\]\[aria-expanded\=true\]\]\/btn\:group-aria-pressed\/btn\:bg-fill-ghost-selected:is(:where(.group\/btn)[aria-haspopup][aria-expanded="true"] *):is(:where(.group\/btn)[aria-pressed="true"] *) { background-color: var(--cds-fill-ghost-selected); }
.group-\[\[data-initial-focus\]\:focus\]\/btn\:\!shadow-\[inset_0_0_0_1px_var\(--cds-button-on-content-ring\)\]:is(:where(.group\/btn)[data-initial-focus]:focus *) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-button-on-content-ring)) !important; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important; }
.group-\[\[data-initial-focus\]\:focus\]\/btn\:shadow-\[inset_0_0_0_1px_var\(--cds-page-bg\)\]:is(:where(.group\/btn)[data-initial-focus]:focus *) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-page-bg)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
@media (hover: hover) {
.peer-hover\/slot\:bg-fill-brand-hover:is(:where(.peer\/slot):hover ~ *) { background-color: var(--cds-fill-brand-hover); }
.peer-hover\/slot\:bg-fill-danger-hover:is(:where(.peer\/slot):hover ~ *) { background-color: var(--cds-fill-danger-hover); }
.peer-hover\/slot\:bg-fill-ghost-hover:is(:where(.peer\/slot):hover ~ *) { background-color: var(--cds-fill-ghost-hover); }
.peer-hover\/slot\:bg-fill-primary-hover:is(:where(.peer\/slot):hover ~ *) { background-color: var(--cds-fill-primary-hover); }
.peer-hover\/slot\:bg-fill-secondary-hover:is(:where(.peer\/slot):hover ~ *) { background-color: var(--cds-fill-secondary-hover); }
}
.peer-\[\:disabled\:not\(\[aria-busy\]\)\]\/slot\:opacity-disabled:is(:where(.peer\/slot):disabled:not([aria-busy]) ~ *) { opacity: var(--cds-opacity-disabled); }
.placeholder\:text-fg-muted::placeholder { color: var(--t-fg-muted); }
.placeholder\:text-muted::placeholder { color: var(--cds-text-muted); }
.placeholder\:text-primary::placeholder { color: var(--cds-text-primary); }
.before\:invisible::before { content: var(--tw-content); visibility: hidden; }
.before\:absolute::before { content: var(--tw-content); position: absolute; }
.before\:inset-\[-10px\]::before { content: var(--tw-content); inset: -10px; }
.before\:inset-x-px::before { content: var(--tw-content); inset-inline: 1px; }
.before\:inset-y-0::before { content: var(--tw-content); inset-block: 0px; }
.before\:-z-\[1\]::before { content: var(--tw-content); z-index: calc(-1); }
.before\:h-0::before { content: var(--tw-content); height: 0px; }
.before\:min-w-0::before { content: var(--tw-content); min-width: 0px; }
.before\:rounded::before { content: var(--tw-content); border-radius: var(--cds-radius); }
.before\:whitespace-pre::before { content: var(--tw-content); white-space: pre; }
.before\:transition-shadow::before { content: var(--tw-content); transition-property: box-shadow; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.before\:duration-fast::before { content: var(--tw-content); --tw-duration: var(--cds-dur-fast); transition-duration: var(--cds-dur-fast); }
.before\:content-\[\'\'\]::before { --tw-content: ""; content: var(--tw-content); }
.before\:content-\[attr\(data-copy\)\]::before { --tw-content: attr(data-copy); content: var(--tw-content); }
.before\:content-\[attr\(data-sizer\)\]::before { --tw-content: attr(data-sizer); content: var(--tw-content); }
.after\:pointer-events-auto::after { content: var(--tw-content); pointer-events: auto; }
.after\:pointer-events-none::after { content: var(--tw-content); pointer-events: none; }
.after\:absolute::after { content: var(--tw-content); position: absolute; }
.after\:inset-0::after { content: var(--tw-content); inset: 0px; }
.after\:inset-\[min\(0px\,calc\(\(var\(--cds-h-control\)-1\.5rem\)\/2\)\)\]::after { content: var(--tw-content); inset: min(0px, calc((var(--cds-h-control) - 1.5rem) / 2)); }
.after\:inset-x-0::after { content: var(--tw-content); inset-inline: 0px; }
.after\:inset-y-0::after { content: var(--tw-content); inset-block: 0px; }
.after\:-start-\[2px\]::after { content: var(--tw-content); inset-inline-start: -2px; }
.after\:start-0::after { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * 0); }
.after\:start-\[calc\(var\(--cds-split-caret-tuck\)-1px\)\]::after { content: var(--tw-content); inset-inline-start: calc(var(--cds-split-caret-tuck) - 1px); }
.after\:-end-2::after { content: var(--tw-content); inset-inline-end: calc(var(--spacing) * -2); }
.after\:-end-\[9px\]::after { content: var(--tw-content); inset-inline-end: -9px; }
.after\:-end-\[calc\(3px\+var\(--cds-split-caret-tuck\)\)\]::after { content: var(--tw-content); inset-inline-end: calc(calc(3px + var(--cds-split-caret-tuck)) * -1); }
.after\:top-full::after { content: var(--tw-content); top: 100%; }
.after\:bottom-0::after { content: var(--tw-content); bottom: 0px; }
.after\:z-50::after { content: var(--tw-content); z-index: 50; }
.after\:h-\[100dvh\]::after { content: var(--tw-content); height: 100dvh; }
.after\:w-2::after { content: var(--tw-content); width: calc(var(--spacing) * 2); }
.after\:shrink-0::after { content: var(--tw-content); flex-shrink: 0; }
.after\:animate-\[cds-shimmer_2s_linear_infinite\]::after { content: var(--tw-content); animation: 2s linear 0s infinite normal none running cds-shimmer; }
.after\:rounded-\[inherit\]::after { content: var(--tw-content); border-radius: inherit; }
.after\:rounded-s-\[inherit\]::after { content: var(--tw-content); border-start-start-radius: inherit; border-end-start-radius: inherit; }
.after\:border-\[color\:var\(--cds-border-line\,var\(--cds-border\)\)\]::after { content: var(--tw-content); border-color: var(--cds-border-line,var(--cds-border)); }
.after\:bg-backdrop::after { content: var(--tw-content); background-color: var(--cds-backdrop); }
.after\:bg-surface-3::after { content: var(--tw-content); background-color: var(--cds-surface-3); }
.after\:bg-\[linear-gradient\(90deg\,transparent\,var\(--cds-skeleton-sheen\)\,transparent\)\]::after { content: var(--tw-content); background-image: linear-gradient(90deg,transparent,var(--cds-skeleton-sheen),transparent); }
.after\:opacity-0::after { content: var(--tw-content); opacity: 0; }
.after\:\[box-shadow\:inset_0_0_0_1px_var\(--cds-fill-secondary-ring\)\]::after { content: var(--tw-content); box-shadow: inset 0 0 0 1px var(--cds-fill-secondary-ring); }
.after\:transition-opacity::after { content: var(--tw-content); transition-property: opacity; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.after\:duration-base::after { content: var(--tw-content); --tw-duration: var(--cds-dur-base); transition-duration: var(--cds-dur-base); }
.after\:duration-sheet::after { content: var(--tw-content); --tw-duration: var(--cds-dur-sheet); transition-duration: var(--cds-dur-sheet); }
.after\:ease-out::after { content: var(--tw-content); --tw-ease: var(--cds-ease-out); transition-timing-function: var(--cds-ease-out); }
.after\:content-\[\'\'\]::after { --tw-content: ""; content: var(--tw-content); }
.after\:\[animation-duration\:auto\]::after { content: var(--tw-content); animation-duration: auto; }
.after\:\[animation-fill-mode\:both\,none\]::after { content: var(--tw-content); animation-fill-mode: both, none; }
.after\:\[animation-range\:0px_var\(--spacing\)\,0px_101\%\]::after { content: var(--tw-content); animation-range: 0px var(--spacing),0px 101%; }
.after\:\[animation-timeline\:--cds-dialog-scroll\]::after { content: var(--tw-content); animation-timeline: --cds-dialog-scroll; }
.after\:\[animation-timing-function\:linear\]::after { content: var(--tw-content); animation-timing-function: linear; }
.first\:-mt-pad-xl:first-child { margin-top: calc(var(--cds-pad-xl) * -1); }
.first\:hidden:first-child { display: none; }
.first\:border-t-0:first-child { border-top-style: var(--tw-border-style); border-top-width: 0px; }
.last\:me-\[calc\(var\(--cds-pad-xl\)_-_var\(--cds-toolbar-pad-block\)\)\]:last-child { margin-inline-end: calc(var(--cds-pad-xl) - var(--cds-toolbar-pad-block)); }
.empty\:hidden:empty { display: none; }
.focus-within\:w-auto:focus-within { width: auto; }
.focus-within\:overflow-visible:focus-within { overflow: visible; }
.focus-within\:shadow-focus:focus-within { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
@media (hover: hover) {
.hover\:border-strong:hover { border-color: var(--cds-border-strong); }
.hover\:bg-\[var\(--cds-switch-track-hover\)\]:hover { background-color: var(--cds-switch-track-hover); }
.hover\:bg-alpha-1:hover { background-color: var(--cds-alpha-1); }
.hover\:bg-alpha-4:hover { background-color: var(--cds-alpha-4); }
.hover\:bg-bg-warm:hover, .hover\:bg-bg-warm\/60:hover { background-color: var(--t-bg-warm); }
@supports (color:color-mix(in lab, red, red)) {
.hover\:bg-bg-warm\/60:hover { background-color: color-mix(in oklab, var(--t-bg-warm) 60%, transparent); }
}
.hover\:bg-fill-accent:hover { background-color: var(--cds-fill-accent); }
.hover\:bg-fill-ghost-hover:hover { background-color: var(--cds-fill-ghost-hover); }
.hover\:bg-transparent:hover { background-color: rgba(0, 0, 0, 0); }
.hover\:bg-wash-1:hover { background-color: var(--t-wash-1); }
.hover\:text-primary:hover { color: var(--cds-text-primary); }
.hover\:shadow-\[inset_0_0_0_calc\(1px\*var\(--inv\)\)_var\(--t-border-strong\)\]:hover { --tw-shadow: inset 0 0 0 calc(1px * var(--inv)) var(--tw-shadow-color,var(--t-border-strong)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.hover\:not-focus-within\:shadow-field-hover:hover:not(:focus-within) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-strong)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
}
.focus\:outline-2:focus { outline-style: var(--tw-outline-style); outline-width: 2px; }
.focus\:outline-app-accent:focus { outline-color: var(--t-app-accent); }
.focus\:outline-solid:focus { --tw-outline-style: solid; outline-style: solid; }
.focus-visible\:bg-fill-danger:focus-visible { background-color: var(--cds-fill-danger); }
.focus-visible\:bg-fill-ghost-hover:focus-visible { background-color: var(--cds-fill-ghost-hover); }
.focus-visible\:text-on-danger:focus-visible { color: var(--cds-on-danger); }
.focus-visible\:shadow-\[0_0_0_2px_var\(--cds-gray-0\)\,0_0_0_4px_var\(--cds-role-accent-700\)\]:focus-visible { --tw-shadow: 0 0 0 2px var(--tw-shadow-color,var(--cds-gray-0)), 0 0 0 4px var(--tw-shadow-color,var(--cds-role-accent-700)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.focus-visible\:shadow-focus:focus-visible { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.focus-visible\:shadow-focus-danger:focus-visible { --tw-shadow: var(--cds-focus-shadow-danger); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.focus-visible\:shadow-none:focus-visible { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.focus-visible\:ring-1:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.focus-visible\:ring-2:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.focus-visible\:ring-stronger:focus-visible { --tw-ring-color: var(--cds-border-stronger); }
.focus-visible\:ring-white\/30:focus-visible { --tw-ring-color: #ffffff4d; }
@supports (color:color-mix(in lab, red, red)) {
.focus-visible\:ring-white\/30:focus-visible { --tw-ring-color: color-mix(in oklab, var(--color-white) 30%, transparent); }
}
.focus-visible\:outline-hidden:focus-visible { --tw-outline-style: none; outline-style: none; }
@media (forced-colors: active) {
.focus-visible\:outline-hidden:focus-visible { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
}
.focus-visible\:outline-2:focus-visible { outline-style: var(--tw-outline-style); outline-width: 2px; }
.focus-visible\:outline-offset-4:focus-visible { outline-offset: 4px; }
.focus-visible\:outline-app-accent:focus-visible { outline-color: var(--t-app-accent); }
.focus-visible\:outline-solid:focus-visible { --tw-outline-style: solid; outline-style: solid; }
.focus-visible\:ring-inset:focus-visible { --tw-ring-inset: inset; }
.focus-visible\:before\:shadow-focus:focus-visible::before { content: var(--tw-content); --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.active\:scale-\[0\.98\]:active { scale: 0.98; }
.active\:cursor-grabbing:active { cursor: grabbing; }
.enabled\:cursor-default:enabled { cursor: default; }
@media (hover: hover) {
.enabled\:hover\:bg-alpha-1:enabled:hover { background-color: var(--cds-alpha-1); }
.enabled\:hover\:bg-fill-danger:enabled:hover { background-color: var(--cds-fill-danger); }
.enabled\:hover\:bg-fill-ghost-hover:enabled:hover { background-color: var(--cds-fill-ghost-hover); }
.enabled\:hover\:text-on-danger:enabled:hover { color: var(--cds-on-danger); }
.enabled\:hover\:text-primary:enabled:hover { color: var(--cds-text-primary); }
.enabled\:hover\:shadow-field-hover:enabled:hover { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-strong)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
}
.disabled\:pointer-events-none:disabled { pointer-events: none; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-40:disabled { opacity: 0.4; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:opacity-100:disabled { opacity: 1; }
.disabled\:opacity-disabled:disabled { opacity: var(--cds-opacity-disabled); }
.has-\[\:focus-visible\]\:shadow-focus:has(:focus-visible) { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.has-\[\[data-cds-end-slot\]_\[data-cds\=Button\]\:not\(\[data-cds-ghost\]\)\]\:pe-\[calc\(\(var\(--cds-h-control\)-var\(--cds-h-control-nested\)\)\/2\)\]:has(:is([data-cds-end-slot] [data-cds="Button"]:not([data-cds-ghost]))) { padding-inline-end: calc((var(--cds-h-control) - var(--cds-h-control-nested)) / 2); }
.has-\[\[data-cds\=Switch\]\,\[data-cds\=Checkbox\]\,\[data-cds\=Button\]\]\:self-stretch:has(:is([data-cds="Switch"], [data-cds="Checkbox"], [data-cds="Button"])) { align-self: stretch; }
.has-\[input\:disabled\]\:opacity-disabled:has(:is(input:disabled)) { opacity: var(--cds-opacity-disabled); }
.has-\[\>\[data-cds\=Pulse\]\]\:\[--cds-page-bg\:transparent\]:has(> [data-cds="Pulse"]) { --cds-page-bg: transparent; }
@media not all and (forced-colors: active) {
.not-forced-colors\:has-\[\~\[data-cds-part\=indicator\]\>\*\]\:\[mask-image\:radial-gradient\(circle_at_var\(--seg-dot-x\)_calc\(var\(--seg-dot-r\)_-_1px\)\,transparent_calc\(var\(--seg-dot-r\)_\+_2px\)\,black_calc\(var\(--seg-dot-r\)_\+_2\.5px\)\)\]:has(~ [data-cds-part="indicator"] > *) { mask-image: radial-gradient(circle at var(--seg-dot-x) calc(var(--seg-dot-r) - 1px),transparent calc(var(--seg-dot-r) + 2px),black calc(var(--seg-dot-r) + 2.5px)); }
.not-forced-colors\:has-\[\~\[data-cds-part\=indicator\]\>\[data-cds\=Pulse\]\]\:\[mask-image\:radial-gradient\(circle_at_var\(--btn-dot-x\)_calc\(var\(--btn-dot-r\)_-_1px\)\,transparent_calc\(var\(--btn-dot-r\)_\+_2px\)\,black_calc\(var\(--btn-dot-r\)_\+_2\.5px\)\)\]:has(~ [data-cds-part="indicator"] > [data-cds="Pulse"]) { mask-image: radial-gradient(circle at var(--btn-dot-x) calc(var(--btn-dot-r) - 1px),transparent calc(var(--btn-dot-r) + 2px),black calc(var(--btn-dot-r) + 2.5px)); }
}
.has-\[\~\[data-nested\]\]\:bg-transparent:has(~ [data-nested]) { background-color: rgba(0, 0, 0, 0); }
.has-\[\~\[data-nested\]\]\:backdrop-blur-none:has(~ [data-nested]) { --tw-backdrop-blur: ; backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); }
.aria-disabled\:cursor-default[aria-disabled="true"] { cursor: default; }
.aria-disabled\:opacity-50[aria-disabled="true"] { opacity: 0.5; }
.aria-disabled\:opacity-disabled[aria-disabled="true"] { opacity: var(--cds-opacity-disabled); }
.aria-expanded\:shadow-field-hover[aria-expanded="true"] { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-strong)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.aria-hidden\:opacity-0[aria-hidden="true"] { opacity: 0; }
.aria-pressed\:text-accent[aria-pressed="true"] { color: var(--cds-text-accent); }
.aria-pressed\:text-primary[aria-pressed="true"] { color: var(--cds-text-primary); }
.aria-\[invalid\]\:shadow-\[0_0_0_2px_var\(--cds-color-border-danger\,\#d9534f\)\][aria-invalid] { --tw-shadow: 0 0 0 2px var(--tw-shadow-color,var(--cds-color-border-danger,#d9534f)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.data-\[active\]\:text-primary[data-active] { color: var(--cds-text-primary); }
.data-\[active\]\:before\:bg-fill-ghost-hover[data-active]::before { content: var(--tw-content); background-color: var(--cds-fill-ghost-hover); }
.data-\[anchor-hidden\]\:invisible[data-anchor-hidden] { visibility: hidden; }
.data-\[animating\]\:contain-layout[data-animating] { --tw-contain-layout: layout; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); }
.data-\[animating\]\:\[clip-path\:inset\(-8px_-100vw_0_-100vw\)\][data-animating] { clip-path: inset(-8px -100vw 0px); }
.data-\[behind\]\:invisible[data-behind] { visibility: hidden; }
.data-\[behind\]\:opacity-0[data-behind] { opacity: 0; }
.data-\[cds-sheet-covered\]\:scale-\[0\.94\][data-cds-sheet-covered] { scale: 0.94; }
.data-\[cds-sheet-covered\]\:after\:opacity-100[data-cds-sheet-covered]::after { content: var(--tw-content); opacity: 1; }
.data-\[checked\]\:translate-x-\[calc\(var\(--cds-switch-h\,1\.25rem\)\*0\.8\)\][data-checked] { --tw-translate-x: calc(var(--cds-switch-h,1.25rem) * .8); translate: var(--tw-translate-x) var(--tw-translate-y); }
.data-\[checked\]\:border-accent[data-checked] { border-color: var(--cds-border-accent); }
.data-\[checked\]\:bg-\[var\(--cds-radio-group-card-selected\)\][data-checked] { background-color: var(--cds-radio-group-card-selected); }
.data-\[checked\]\:bg-fill-accent[data-checked] { background-color: var(--cds-fill-accent); }
.data-\[checked\]\:text-primary[data-checked] { color: var(--cds-text-primary); }
@media (hover: hover) {
.data-\[checked\]\:hover\:border-accent[data-checked]:hover { border-color: var(--cds-border-accent); }
.data-\[checked\]\:hover\:bg-fill-accent-hover[data-checked]:hover { background-color: var(--cds-fill-accent-hover); }
}
.data-\[disabled\]\:pointer-events-auto[data-disabled] { pointer-events: auto; }
.data-\[disabled\]\:pointer-events-none[data-disabled] { pointer-events: none; }
.data-\[disabled\]\:cursor-default[data-disabled] { cursor: default; }
.data-\[disabled\]\:opacity-disabled[data-disabled] { opacity: var(--cds-opacity-disabled); }
@media (hover: hover) {
.data-\[disabled\]\:hover\:bg-\[var\(--cds-switch-track\)\][data-disabled]:hover { background-color: var(--cds-switch-track); }
}
.data-\[disabled\]\:focus-visible\:shadow-focus[data-disabled]:focus-visible { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
@media (hover: hover) {
.data-\[checked\]\:data-\[disabled\]\:hover\:bg-fill-accent[data-checked][data-disabled]:hover { background-color: var(--cds-fill-accent); }
}
.data-\[dragging\]\:bg-alpha-4[data-dragging] { background-color: var(--cds-alpha-4); }
.data-\[ending-style\]\:h-0[data-ending-style] { height: 0px; }
.data-\[ending-style\]\:translate-y-\[calc\(100\%\+1\.5rem\)\][data-ending-style] { --tw-translate-y: calc(100% + 1.5rem); translate: var(--tw-translate-x) var(--tw-translate-y); }
.data-\[ending-style\]\:scale-\[0\.98\][data-ending-style] { scale: 0.98; }
.data-\[ending-style\]\:opacity-0[data-ending-style] { opacity: 0; }
.data-\[ending-style\]\:contain-layout[data-ending-style] { --tw-contain-layout: layout; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); }
.data-\[ending-style\]\:\[--ts\:0\.85\][data-ending-style] { --ts: .85; }
.data-\[ending-style\]\:\[clip-path\:inset\(-8px_-100vw_0_-100vw\)\][data-ending-style] { clip-path: inset(-8px -100vw 0px); }
.data-\[highlighted\]\:bg-fill-danger[data-highlighted] { background-color: var(--cds-fill-danger); }
.data-\[highlighted\]\:bg-fill-ghost-hover[data-highlighted] { background-color: var(--cds-fill-ghost-hover); }
.data-\[highlighted\]\:text-on-danger[data-highlighted] { color: var(--cds-on-danger); }
.data-\[highlighted\]\:\[--cds-shortcut-cap-ink\:currentColor\][data-highlighted] { --cds-shortcut-cap-ink: currentColor; }
.data-\[instant\]\:duration-0[data-instant] { --tw-duration: 0s; transition-duration: 0s; }
.data-\[invalid\]\:shadow-field-invalid[data-invalid] { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-fill-danger)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.data-\[invalid\]\:focus-within\:shadow-focus-danger[data-invalid]:focus-within, .data-\[invalid\]\:focus-visible\:shadow-focus-danger[data-invalid]:focus-visible, .data-\[invalid\]\:has-\[\:focus-visible\]\:shadow-focus-danger[data-invalid]:has(:focus-visible) { --tw-shadow: var(--cds-focus-shadow-danger); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.data-\[limited\]\:opacity-0[data-limited] { opacity: 0; }
.data-\[nested-dialog-open\]\:blur-\[2px\][data-nested-dialog-open] { --tw-blur: blur(2px); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); }
.data-\[nested-dialog-open\]\:after\:opacity-100[data-nested-dialog-open]::after { content: var(--tw-content); opacity: 1; }
.data-\[popup-open\]\:bg-fill-ghost-hover[data-popup-open] { background-color: var(--cds-fill-ghost-hover); }
.data-\[popup-open\]\:\[--cds-split-ring\:var\(--cds-border\)\][data-popup-open] { --cds-split-ring: var(--cds-border); }
.data-\[starting-style\]\:h-0[data-starting-style] { height: 0px; }
.data-\[starting-style\]\:translate-y-\[calc\(100\%\+1\.5rem\)\][data-starting-style] { --tw-translate-y: calc(100% + 1.5rem); translate: var(--tw-translate-x) var(--tw-translate-y); }
.data-\[starting-style\]\:scale-\[0\.98\][data-starting-style] { scale: 0.98; }
.data-\[starting-style\]\:opacity-0[data-starting-style] { opacity: 0; }
.data-\[starting-style\]\:contain-layout[data-starting-style] { --tw-contain-layout: layout; contain: var(--tw-contain-size,) var(--tw-contain-layout,) var(--tw-contain-paint,) var(--tw-contain-style,); }
.data-\[starting-style\]\:\[--ty\:100\%\][data-starting-style] { --ty: 100%; }
.data-\[starting-style\]\:\[clip-path\:inset\(-8px_-100vw_0_-100vw\)\][data-starting-style] { clip-path: inset(-8px -100vw 0px); }
.data-\[unchecked\]\:hidden[data-unchecked] { display: none; }
@supports (animation-timeline:scroll()) {
.supports-\[animation-timeline\:scroll\(\)\]\:after\:opacity-\[calc\(var\(--cds-sticky-edge-start\)_\*_var\(--cds-sticky-edge-active\)\)\]::after { content: var(--tw-content); opacity: calc(var(--cds-sticky-edge-start) * var(--cds-sticky-edge-active)); }
.supports-\[animation-timeline\:scroll\(\)\]\:after\:\[animation-name\:cds-sticky-edge-start\,cds-sticky-edge-active\]::after { content: var(--tw-content); animation-name: cds-sticky-edge-start, cds-sticky-edge-active; }
}
@media (prefers-reduced-motion: no-preference) {
.motion-safe\:animate-\[cds-fade-in_0\.2s_cubic-bezier\(0\.215\,0\.61\,0\.355\,1\)_0\.08s_backwards\]:not(:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 80ms 1 normal backwards running cds-fade-in; }
.motion-safe\:animate-\[cds-fade-in_0\.15s_cubic-bezier\(0\.215\,0\.61\,0\.355\,1\)\]:not(:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal none running cds-fade-in; }
.motion-safe\:animate-\[mc-drop-icon-rise_0\.22s_cubic-bezier\(0\.215\,0\.61\,0\.355\,1\)_var\(--rise-delay\,0ms\)_backwards\]:not(:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: mc-drop-icon-rise .22s cubic-bezier(.215,.61,.355,1) var(--rise-delay,0s) backwards; }
.motion-safe\:animate-\[mc-drop-ring-in_0\.15s_cubic-bezier\(0\.215\,0\.61\,0\.355\,1\)\]:not(:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 normal none running mc-drop-ring-in; }
.motion-safe\:animate-pulse:not(:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)) { animation: var(--animate-pulse); }
}
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:translate-y-0 { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); }
}
.motion-reduce\:translate-y-0:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) { --tw-translate-y: 0px; translate: var(--tw-translate-x) var(--tw-translate-y); }
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:animate-none { animation: auto ease 0s 1 normal none running none; }
}
.motion-reduce\:animate-none:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) { animation: auto ease 0s 1 normal none running none; }
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:transition-none { transition-property: none; }
}
.motion-reduce\:transition-none:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) { transition-property: none; }
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:after\:hidden::after { content: var(--tw-content); display: none; }
}
.motion-reduce\:after\:hidden:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)::after { content: var(--tw-content); display: none; }
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:after\:transition-none::after { content: var(--tw-content); transition-property: none; }
}
.motion-reduce\:after\:transition-none:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)::after { content: var(--tw-content); transition-property: none; }
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:data-\[starting-style\]\:scale-100[data-starting-style] { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); }
}
.motion-reduce\:data-\[starting-style\]\:scale-100:where([data-reduce-motion="true"], [data-reduce-motion="true"] *)[data-starting-style] { --tw-scale-x: 100%; --tw-scale-y: 100%; --tw-scale-z: 100%; scale: var(--tw-scale-x) var(--tw-scale-y); }
@media not all and (min-width: 48rem) {
.max-md\:absolute { position: absolute; }
.max-md\:relative { position: relative; }
.max-md\:top-\[var\(--tb-row-h\,0px\)\] { top: var(--tb-row-h,0px); }
.max-md\:right-0 { right: 0px; }
.max-md\:bottom-0 { bottom: 0px; }
.max-md\:z-sheet { z-index: 47; }
.max-md\:block { display: block; }
.max-md\:h-\[var\(--mc-sheet-h\,min\(50dvh\,calc\(24rem_\+_var\(--mc-foot-inset\,0px\)\)\)\)\] { height: var(--mc-sheet-h,min(50dvh, calc(24rem + var(--mc-foot-inset,0px)))); }
.max-md\:max-h-\[85dvh\] { max-height: 85dvh; }
.max-md\:w-full { width: 100%; }
.max-md\:shrink-0 { flex-shrink: 0; }
.max-md\:rotate-90 { rotate: 90deg; }
.max-md\:flex-col { flex-direction: column; }
.max-md\:border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; }
.max-md\:border-l-0 { border-left-style: var(--tw-border-style); border-left-width: 0px; }
.max-md\:border-border-line { border-color: var(--t-border); }
.max-md\:pb-\[var\(--mc-foot-inset\,0px\)\] { padding-bottom: var(--mc-foot-inset,0px); }
.max-md\:shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
}
@media (min-width: 40rem) {
.sm\:flex-row { flex-direction: row; }
.sm\:justify-between { justify-content: space-between; }
.sm\:justify-center { justify-content: center; }
.sm\:justify-end { justify-content: flex-end; }
.sm\:justify-start { justify-content: flex-start; }
}
@media (min-width: 48rem) {
.md\:absolute { position: absolute; }
.md\:top-\[var\(--tb-row-h\,0px\)\] { top: var(--tb-row-h,0px); }
.md\:right-0 { right: 0px; }
.md\:bottom-0 { bottom: 0px; }
.md\:hidden { display: none; }
.md\:shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
}
.rtl\:rotate-90:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { rotate: 90deg; }
.rtl\:text-right:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; }
.rtl\:group-data-\[cds-sheet-drilled\]\/sheet\:translate-x-\[calc\(100\%\+env\(safe-area-inset-right\,0px\)\)\]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *):is(:where(.group\/sheet)[data-cds-sheet-drilled] *) { --tw-translate-x: calc(100% + env(safe-area-inset-right,0px)); translate: var(--tw-translate-x) var(--tw-translate-y); }
@media screen {
.dark\:bg-\[color-mix\(in_srgb\,var\(--cds-fill-accent\)_35\%\,transparent\)\]:where([data-mode="dark"], [data-mode="dark"] *) { background-color: var(--cds-fill-accent); }
@supports (color:color-mix(in lab, red, red)) {
.dark\:bg-\[color-mix\(in_srgb\,var\(--cds-fill-accent\)_35\%\,transparent\)\]:where([data-mode="dark"], [data-mode="dark"] *) { background-color: color-mix(in srgb,var(--cds-fill-accent) 35%,transparent); }
}
}
@media screen and (prefers-color-scheme: dark) {
.dark\:bg-\[color-mix\(in_srgb\,var\(--cds-fill-accent\)_35\%\,transparent\)\]:where([data-mode="system"], [data-mode="system"] *):not(:where([data-mode="system"] :is([data-mode="light"], [data-mode="dark"]), [data-mode="system"] :is([data-mode="light"], [data-mode="dark"]) *)) { background-color: var(--cds-fill-accent); }
@supports (color:color-mix(in lab, red, red)) {
.dark\:bg-\[color-mix\(in_srgb\,var\(--cds-fill-accent\)_35\%\,transparent\)\]:where([data-mode="system"], [data-mode="system"] *):not(:where([data-mode="system"] :is([data-mode="light"], [data-mode="dark"]), [data-mode="system"] :is([data-mode="light"], [data-mode="dark"]) *)) { background-color: color-mix(in srgb,var(--cds-fill-accent) 35%,transparent); }
}
.dark\:bg-\[color-mix\(in_srgb\,var\(--cds-fill-accent\)_35\%\,transparent\)\]:where(.cds-root, .cds-root *):not(:where([data-mode], [data-mode] *)) { background-color: var(--cds-fill-accent); }
@supports (color:color-mix(in lab, red, red)) {
.dark\:bg-\[color-mix\(in_srgb\,var\(--cds-fill-accent\)_35\%\,transparent\)\]:where(.cds-root, .cds-root *):not(:where([data-mode], [data-mode] *)) { background-color: color-mix(in srgb,var(--cds-fill-accent) 35%,transparent); }
}
}
@media screen {
.dark\:shadow-panel-sm:where([data-mode="dark"], [data-mode="dark"] *) { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-ring-color), 0 0 0 var(--cds-ring-outer) var(--cds-ring-color), var(--cds-shadow-sm); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
}
@media screen and (prefers-color-scheme: dark) {
.dark\:shadow-panel-sm:where([data-mode="system"], [data-mode="system"] *):not(:where([data-mode="system"] :is([data-mode="light"], [data-mode="dark"]), [data-mode="system"] :is([data-mode="light"], [data-mode="dark"]) *)), .dark\:shadow-panel-sm:where(.cds-root, .cds-root *):not(:where([data-mode], [data-mode] *)) { --tw-shadow: inset 0 0 0 var(--cds-ring-inner) var(--cds-ring-color), 0 0 0 var(--cds-ring-outer) var(--cds-ring-color), var(--cds-shadow-sm); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
}
@starting-style {
.starting\:scale-\[0\.98\] { scale: 0.98; }
.starting\:opacity-0 { opacity: 0; }
}
@media print {
.print\:hidden { display: none; }
}
@media (forced-colors: active) {
.forced-colors\:border { border-style: var(--tw-border-style); border-width: 1px; }
.forced-colors\:border-2 { border-style: var(--tw-border-style); border-width: 2px; }
.forced-colors\:border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; }
.forced-colors\:border-solid { --tw-border-style: solid; border-style: solid; }
.forced-colors\:border-\[color\:CanvasText\] { border-color: canvastext; }
.forced-colors\:border-\[color\:Highlight\] { border-color: highlight; }
.forced-colors\:bg-\[color\:CanvasText\] { background-color: canvastext; }
.forced-colors\:bg-\[color\:Highlight\] { background-color: highlight; }
.forced-colors\:p-px { padding: 1px; }
.forced-colors\:text-\[color\:HighlightText\] { color: highlighttext; }
.forced-colors\:outline-\[CanvasText\] { outline-color: canvastext; }
.forced-colors\:outline-\[Canvas\] { outline-color: canvas; }
.forced-colors\:outline-\[Highlight\] { outline-color: highlight; }
.forced-colors\:forced-color-adjust-none { forced-color-adjust: none; }
@media (hover: hover) {
.forced-colors\:hover\:bg-\[color\:Highlight\]:hover { background-color: highlight; }
}
.forced-colors\:focus-visible\:-outline-offset-1:focus-visible { outline-offset: calc(-1px); }
.forced-colors\:focus-visible\:-outline-offset-2:focus-visible { outline-offset: calc(-2px); }
.forced-colors\:data-\[checked\]\:border-\[color\:Highlight\][data-checked] { border-color: highlight; }
.forced-colors\:data-\[checked\]\:\!bg-\[color\:Highlight\][data-checked] { background-color: highlight !important; }
.forced-colors\:data-\[checked\]\:bg-\[color\:HighlightText\][data-checked] { background-color: highlighttext; }
}
@media (pointer: coarse) {
.pointer-coarse\:pointer-events-auto { pointer-events: auto; }
.pointer-coarse\:right-10 { right: calc(var(--spacing) * 10); }
.pointer-coarse\:right-14 { right: calc(var(--spacing) * 14); }
.pointer-coarse\:right-\[8\.25rem\] { right: 8.25rem; }
.pointer-coarse\:left-10 { left: calc(var(--spacing) * 10); }
.pointer-coarse\:left-24 { left: calc(var(--spacing) * 24); }
.pointer-coarse\:-me-1 { margin-inline-end: calc(var(--spacing) * -1); }
.pointer-coarse\:mt-1 { margin-top: var(--spacing); }
.pointer-coarse\:ml-0 { margin-left: 0px; }
.pointer-coarse\:\!hidden { display: none !important; }
.pointer-coarse\:flex { display: flex; }
.pointer-coarse\:hidden { display: none; }
.pointer-coarse\:hidden\! { display: none !important; }
.pointer-coarse\:h-2\.5 { height: calc(var(--spacing) * 2.5); }
.pointer-coarse\:h-5 { height: calc(var(--spacing) * 5); }
.pointer-coarse\:h-6 { height: calc(var(--spacing) * 6); }
.pointer-coarse\:h-7 { height: calc(var(--spacing) * 7); }
.pointer-coarse\:h-10 { height: calc(var(--spacing) * 10); }
.pointer-coarse\:h-12 { height: calc(var(--spacing) * 12); }
.pointer-coarse\:h-13 { height: calc(var(--spacing) * 13); }
.pointer-coarse\:h-\[calc\(1\.875rem\+40px\+var\(--sl-safe-b\,0px\)\)\] { height: calc(1.875rem + 40px + var(--sl-safe-b,0px)); }
.pointer-coarse\:min-h-10 { min-height: calc(var(--spacing) * 10); }
.pointer-coarse\:min-h-\[var\(--prop-row-h\,40px\)\] { min-height: var(--prop-row-h,40px); }
.pointer-coarse\:w-2\.5 { width: calc(var(--spacing) * 2.5); }
.pointer-coarse\:w-5 { width: calc(var(--spacing) * 5); }
.pointer-coarse\:w-6 { width: calc(var(--spacing) * 6); }
.pointer-coarse\:w-7 { width: calc(var(--spacing) * 7); }
.pointer-coarse\:w-10 { width: calc(var(--spacing) * 10); }
.pointer-coarse\:w-14 { width: calc(var(--spacing) * 14); }
.pointer-coarse\:w-36 { width: calc(var(--spacing) * 36); }
.pointer-coarse\:w-56 { width: calc(var(--spacing) * 56); }
.pointer-coarse\:w-\[17rem\] { width: 17rem; }
.pointer-coarse\:w-auto { width: auto; }
.pointer-coarse\:min-w-10 { min-width: calc(var(--spacing) * 10); }
.pointer-coarse\:min-w-15 { min-width: calc(var(--spacing) * 15); }
.pointer-coarse\:min-w-60 { min-width: calc(var(--spacing) * 60); }
.pointer-coarse\:basis-10 { flex-basis: calc(var(--spacing) * 10); }
.pointer-coarse\:grid-cols-\[calc\(var\(--pp-label-w\,80px\)\*13\/12\)_minmax\(0\,1fr\)\] { grid-template-columns: calc(var(--pp-label-w,80px) * 13 / 12) minmax(0,1fr); }
.pointer-coarse\:gap-0\.5 { gap: calc(var(--spacing) * .5); }
.pointer-coarse\:gap-1\.5 { gap: calc(var(--spacing) * 1.5); }
.pointer-coarse\:gap-4 { gap: calc(var(--spacing) * 4); }
.pointer-coarse\:overflow-visible { overflow: visible; }
.pointer-coarse\:rounded-xl { border-radius: var(--radius-xl); }
.pointer-coarse\:px-2 { padding-inline: calc(var(--spacing) * 2); }
.pointer-coarse\:py-3\.5 { padding-block: calc(var(--spacing) * 3.5); }
.pointer-coarse\:pr-\[calc\(var\(--pp-iconcol\,-8px\)\+8px\)\] { padding-right: calc(var(--pp-iconcol,-8px) + 8px); }
.pointer-coarse\:text-body { font-size: var(--cds-font-size-body); line-height: var(--tw-leading,var(--cds-leading-body)); }
.pointer-coarse\:opacity-100 { opacity: 1; }
.pointer-coarse\:\[--cds-resize-pill-force\:0\.2\] { --cds-resize-pill-force: .2; }
.pointer-coarse\:\[--cds-resize-pill-force\:0\.5\] { --cds-resize-pill-force: .5; }
.pointer-coarse\:\[--mc-group-gap\:8px\] { --mc-group-gap: 8px; }
.pointer-coarse\:\[--mc-strip-gap\:8px\] { --mc-strip-gap: 8px; }
.pointer-coarse\:\[--mc-strip-pad\:6px\] { --mc-strip-pad: 6px; }
.pointer-coarse\:\[--more-shift\:2\.5rem\] { --more-shift: 2.5rem; }
.pointer-coarse\:\[--prop-row-h\:40px\] { --prop-row-h: 40px; }
.pointer-coarse\:before\:inset-\[-13px\]::before { content: var(--tw-content); inset: -13px; }
}
@media not all and (min-width: 48rem) {
@media (pointer: coarse) {
.max-md\:pointer-coarse\:flex { display: flex; }
}
}
@media (pointer: fine) {
.pointer-fine\:hidden { display: none; }
.pointer-fine\:will-change-transform { will-change: transform; }
@media (hover: hover) {
.pointer-fine\:group-hover\:flex:is(:where(.group):hover *), .pointer-fine\:group-hover\/tile\:flex:is(:where(.group\/tile):hover *) { display: flex; }
}
}
:where(.group\/rail):has(:focus-visible) .group-has-\[\:focus-visible\]\/rail\:pointer-events-auto { pointer-events: auto; }
:where(.group\/rail):has(:focus-visible) .group-has-\[\:focus-visible\]\/rail\:opacity-100 { opacity: 1; }
:where(.group\/menu-popup):has([data-cds-icon-row]) .group-has-\[\[data-cds-icon-row\]\]\/menu-popup\:ms-0 { margin-inline-start: 0px; }
.comfortable\:mx-2\.5:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline: calc(var(--spacing) * 2.5); }
.comfortable\:-ms-\[2px\]:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline-start: -2px; }
.comfortable\:-ms-\[4px\]:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline-start: -4px; }
.comfortable\:ms-\[2px\]:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline-start: 2px; }
.comfortable\:ms-\[4px\]:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline-start: 4px; }
.comfortable\:-me-\[4px\]:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline-end: -4px; }
.comfortable\:me-\[calc\(4px-var\(--cds-pad-md\)\)\]:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline-end: calc(4px - var(--cds-pad-md)); }
.comfortable\:me-\[calc\(5px-var\(--cds-pad-md\)\)\]:where([data-density="comfortable"], [data-density="comfortable"] *) { margin-inline-end: calc(5px - var(--cds-pad-md)); }
.comfortable\:px-2\.5:where([data-density="comfortable"], [data-density="comfortable"] *) { padding-inline: calc(var(--spacing) * 2.5); }
.comfortable\:\!ps-2\.5:where([data-density="comfortable"], [data-density="comfortable"] *) { padding-inline-start: calc(var(--spacing) * 2.5) !important; }
.compact\:mx-2:where([data-density="compact"], [data-density="compact"] *) { margin-inline: calc(var(--spacing) * 2); }
.compact\:-ms-\[4px\]:where([data-density="compact"], [data-density="compact"] *) { margin-inline-start: -4px; }
.compact\:-ms-\[6px\]:where([data-density="compact"], [data-density="compact"] *) { margin-inline-start: -6px; }
.compact\:ms-\[4px\]:where([data-density="compact"], [data-density="compact"] *) { margin-inline-start: 4px; }
.compact\:ms-\[6px\]:where([data-density="compact"], [data-density="compact"] *) { margin-inline-start: 6px; }
.compact\:-me-\[2px\]:where([data-density="compact"], [data-density="compact"] *) { margin-inline-end: -2px; }
.compact\:me-\[calc\(6px-var\(--cds-pad-md\)\)\]:where([data-density="compact"], [data-density="compact"] *) { margin-inline-end: calc(6px - var(--cds-pad-md)); }
.compact\:me-\[calc\(8px-var\(--cds-pad-md\)\)\]:where([data-density="compact"], [data-density="compact"] *) { margin-inline-end: calc(8px - var(--cds-pad-md)); }
.compact\:px-2:where([data-density="compact"], [data-density="compact"] *) { padding-inline: calc(var(--spacing) * 2); }
.compact\:\!ps-2:where([data-density="compact"], [data-density="compact"] *) { padding-inline-start: calc(var(--spacing) * 2) !important; }
.group-data-\[panel-open\]\/clp\:page-rtl\:-rotate-90:is(:where(.group\/clp)[data-panel-open] *):where(:root[dir="rtl"] :dir(rtl)) { rotate: -90deg; }
.\[\&_\*\]\:transition-colors * { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); }
.\[\&_\*\]\:duration-200 * { --tw-duration: .2s; transition-duration: 0.2s; }
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:\[\&_\*\]\:transition-none * { transition-property: none; }
}
.motion-reduce\:\[\&_\*\]\:transition-none:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) * { transition-property: none; }
@media (pointer: coarse) {
.pointer-coarse\:\[\&_\*\]\:\[backdrop-filter\:none\]\! * { backdrop-filter: none !important; }
.pointer-coarse\:\[\&_\*\]\:\[-webkit-backdrop-filter\:none\]\! * { }
}
.\[\&_\.scroll-fade-y\]\:\[scrollbar-width\:none\] .scroll-fade-y { scrollbar-width: none; }
.\[\&_\.scroll-fade-y\]\:\[--cds-scroll-fade-size\:0px\] .scroll-fade-y { --cds-scroll-fade-size: 0px; }
.\[\&_\[data-cds-part\=paint\]\]\:bg-clip-content [data-cds-part="paint"] { background-clip: content-box; }
.\[\&_\[data-cds-part\=paint\]\]\:p-\(--cds-split-inset\) [data-cds-part="paint"] { padding: var(--cds-split-inset); }
.aria-disabled\:\[\&_\[data-cds-part\=paint\]\]\:bg-transparent\![aria-disabled="true"] [data-cds-part="paint"] { background-color: rgba(0, 0, 0, 0) !important; }
.\[\&_\[data-cds-sheet-scroll\]\]\:overscroll-contain [data-cds-sheet-scroll] { overscroll-behavior: contain; }
.\[\&_\[data-cds\=Button\]\:not\(\[data-cds-ghost\]\)\]\:h-\[var\(--fhn\)\] [data-cds="Button"]:not([data-cds-ghost]) { height: var(--fhn); }
.\[\&_\[data-cds\=Button\]\:not\(\[data-cds-ghost\]\)\]\:rounded-\[calc\(var\(--fr\)-\(var\(--fh\)-var\(--fhn\)\)\/2\)\] [data-cds="Button"]:not([data-cds-ghost]) { border-radius: calc(var(--fr) - (var(--fh) - var(--fhn)) / 2); }
.\[\&_\[data-cds\=Button\]\[aria-label\]\:not\(\[aria-pressed\=true\]\)\]\:text-secondary [data-cds="Button"][aria-label]:not([aria-pressed="true"]) { color: var(--cds-text-secondary); }
.\[\&_\[data-cds\=Button\]\[data-cds-icon-only\]\:not\(\[data-cds-ghost\]\)\]\:w-\[var\(--fhn\)\] [data-cds="Button"][data-cds-icon-only]:not([data-cds-ghost]) { width: var(--fhn); }
.aria-disabled\:\[\&_\[data-cds\=Icon\]\]\:opacity-disabled[aria-disabled="true"] [data-cds="Icon"] { opacity: var(--cds-opacity-disabled); }
.\[\&_\[data-cds\=SegmentedControl\]\]\:gap-0 [data-cds="SegmentedControl"] { gap: 0px; }
.\[\&_\[data-cds\=SegmentedControl\]\]\:p-0 [data-cds="SegmentedControl"] { padding: 0px; }
.\[\&_\[data-mc-divider\]\]\:mx-0 [data-mc-divider] { margin-inline: 0px; }
.\[\&_\[role\=radio\]\]\:min-w-\[calc\(var\(--cds-h-control\)_-_2px\)\] [role="radio"] { min-width: calc(var(--cds-h-control) - 2px); }
.\[\&_\[role\=radio\]\]\:min-w-\[var\(--cds-h-control\)\] [role="radio"] { min-width: var(--cds-h-control); }
.\[\&_\[role\=radio\]\]\:px-0 [role="radio"] { padding-inline: 0px; }
.\[\&_\[role\=separator\]\]\:-mx-1 [role="separator"] { margin-inline: calc(var(--spacing) * -1); }
.\[\&_\[role\=separator\]\]\:mt-0 [role="separator"] { margin-top: 0px; }
.\[\&_iframe\]\:pointer-events-none\! iframe { pointer-events: none !important; }
.\[\&_input\]\:placeholder\:text-primary input::placeholder { color: var(--cds-text-primary); }
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; }
.\[\&\:dir\(rtl\)\]\:\[--btn-dot-x\:calc\(var\(--btn-dot-r\)_-_1px\)\]:dir(rtl) { --btn-dot-x: calc(var(--btn-dot-r) - 1px); }
.\[\&\:dir\(rtl\)\]\:\[--seg-dot-x\:calc\(var\(--seg-dot-r\)_-_1px\)\]:dir(rtl) { --seg-dot-x: calc(var(--seg-dot-r) - 1px); }
.\[\&\:disabled\:not\(\[aria-busy\]\)\]\:opacity-disabled:disabled:not([aria-busy]) { opacity: var(--cds-opacity-disabled); }
.\[\&\:has\(\+\[data-cds-segment\]_\[aria-haspopup\]\[aria-expanded\=true\]\)\>\[data-cds-seam-line\]\]\:opacity-0:has(+ [data-cds-segment] [aria-haspopup][aria-expanded="true"]) > [data-cds-seam-line], .\[\&\:has\(\+\[data-cds-segment\]_\[aria-pressed\=true\]\)\>\[data-cds-seam-line\]\]\:opacity-0:has(+ [data-cds-segment] [aria-pressed="true"]) > [data-cds-seam-line], .\[\&\:has\(\+\[data-cds-segment\]\:hover\)\>\[data-cds-seam-line\]\]\:opacity-0:has(+ [data-cds-segment]:hover) > [data-cds-seam-line] { opacity: 0; }
.enabled\:\[\&\:hover\:not\(\:focus\)\:not\(\[data-invalid\]\)\]\:shadow-field-hover:enabled:hover:not(:focus):not([data-invalid]), .\[\&\:hover\:not\(\:focus-visible\)\:not\(\:has\(\:focus-visible\)\)\:not\(\[data-invalid\]\)\:not\(\[data-disabled\]\)\]\:shadow-field-hover:hover:not(:focus-visible):not(:has(:focus-visible)):not([data-invalid]):not([data-disabled]) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-strong)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.\[\&\:hover\:not\(\:focus-visible\)\>\[data-cds-part\=resize-pill\]\]\:opacity-50:hover:not(:focus-visible) > [data-cds-part="resize-pill"] { opacity: 0.5; }
.\[\&\:hover\:not\(\:focus-within\)\:not\(\[data-invalid\]\)\:not\(\[data-disabled\]\)\]\:shadow-field-hover:hover:not(:focus-within):not([data-invalid]):not([data-disabled]) { --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color,var(--cds-border-strong)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child) { border-top-style: var(--tw-border-style); border-top-width: 1px; }
.\[\&\:not\(\:first-child\)\]\:pt-2:not(:first-child) { padding-top: calc(var(--spacing) * 2); }
.\[\&\:not\(\:focus-visible\)\:not\(\[data-cds-sheet-control-held\]\)\]\:sr-only:not(:focus-visible):not([data-cds-sheet-control-held]), .\[\&\:not\(\:focus-visible\)\:not\(\[data-highlighted\]\)\:not\(\[data-cds-sheet-control-held\]\)\]\:sr-only:not(:focus-visible):not([data-highlighted]):not([data-cds-sheet-control-held]) { clip-path: inset(50%); white-space: nowrap; border-width: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
.\[\&\:not\(\:focus-visible\)\>\[data-cds-part\=resize-pill\]\]\:top-\[calc\(50\%\+6px\)\]:not(:focus-visible) > [data-cds-part="resize-pill"] { top: calc(50% + 6px); }
.\[\&\:not\(\:focus-visible\)\>\[data-cds-part\=resize-pill\]\]\:opacity-0:not(:focus-visible) > [data-cds-part="resize-pill"] { opacity: 0; }
.\[\&\:not\(\:hover\,\:focus-visible\)\]\:\[--_text-link-line\:color-mix\(in_srgb\,currentColor\,transparent_35\%\)\]:not(:hover, :focus-visible) { --_text-link-line: currentColor; }
@supports (color:color-mix(in lab, red, red)) {
.\[\&\:not\(\:hover\,\:focus-visible\)\]\:\[--_text-link-line\:color-mix\(in_srgb\,currentColor\,transparent_35\%\)\]:not(:hover, :focus-visible) { --_text-link-line: color-mix(in srgb,currentColor,transparent 35%); }
}
@media (hover: hover) {
.\[\&\:not\(\[data-active\]\)\:not\(\[data-disabled\]\)\]\:hover\:text-secondary:not([data-active]):not([data-disabled]):hover { color: var(--cds-text-secondary); }
.\[\&\:not\(\[data-active\]\)\:not\(\[data-disabled\]\)\]\:hover\:before\:bg-fill-ghost-hover:not([data-active]):not([data-disabled]):hover::before { content: var(--tw-content); background-color: var(--cds-fill-ghost-hover); }
.\[\&\:not\(\[data-checked\]\)\:not\(\[data-disabled\]\)\]\:hover\:bg-fill-ghost-hover:not([data-checked]):not([data-disabled]):hover { background-color: var(--cds-fill-ghost-hover); }
.\[\&\:not\(\[data-disabled\]\)\]\:hover\:text-primary:not([data-disabled]):hover { color: var(--cds-text-primary); }
.\[\&\:not\(\[data-disabled\]\)\]\:hover\:\[--cds-split-ring\:var\(--cds-border\)\]:not([data-disabled]):hover { --cds-split-ring: var(--cds-border); }
}
.\[\&\:not\(\[data-disabled\]\)\]\:has-\[\[aria-pressed\=true\]\]\:\[--cds-split-ring\:var\(--cds-border\)\]:not([data-disabled]):has([aria-pressed="true"]) { --cds-split-ring: var(--cds-border); }
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:right-auto:where(:root[dir="rtl"] :dir(rtl)) { right: auto; }
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:left-4:where(:root[dir="rtl"] :dir(rtl)) { left: calc(var(--spacing) * 4); }
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:-ms-pad-md:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-start: calc(var(--cds-pad-md) * -1); }
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:me-0:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-end: 0px; }
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:flex-row-reverse:where(:root[dir="rtl"] :dir(rtl)) { flex-direction: row-reverse; }
.data-\[checked\]\:\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:-translate-x-\[calc\(var\(--cds-switch-h\,1\.25rem\)\*0\.8\)\][data-checked]:where(:root[dir="rtl"] :dir(rtl)) { --tw-translate-x: calc(calc(var(--cds-switch-h,1.25rem) * .8) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
.\[\&\>\*\]\:z-\[var\(--cds-portal-z\)\] > * { z-index: var(--cds-portal-z); }
.\[\&\>\*\]\:shrink-0 > * { flex-shrink: 0; }
.\[\&\>\*\]\:\[grid-area\:1\/1\] > * { grid-area: 1 / 1; }
.data-\[orientation\=horizontal\]\:\[\&\>\:first-child\>\:first-child\>\[data-orientation\]\[role\=tab\]\:first-child\]\:before\:start-0[data-orientation="horizontal"] > :first-child > :first-child > [data-orientation][role="tab"]:first-child::before, .data-\[orientation\=horizontal\]\:\[\&\>\:first-child\>\[data-orientation\]\[role\=tab\]\:first-child\]\:before\:start-0[data-orientation="horizontal"] > :first-child > [data-orientation][role="tab"]:first-child::before { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * 0); }
.data-\[orientation\=horizontal\]\:\[\&\>\:last-child\>\:last-child\>\[data-orientation\]\[role\=tab\]\:last-child\]\:before\:end-0[data-orientation="horizontal"] > :last-child > :last-child > [data-orientation][role="tab"]:last-child::before, .data-\[orientation\=horizontal\]\:\[\&\>\:last-child\>\[data-orientation\]\[role\=tab\]\:last-child\]\:before\:end-0[data-orientation="horizontal"] > :last-child > [data-orientation][role="tab"]:last-child::before { content: var(--tw-content); inset-inline-end: calc(var(--spacing) * 0); }
.\[\&\>\:not\(\[inert\]\)\]\:draggable-none > :not([inert]) { app-region: no-drag; }
@media not all and (min-width: 40rem) {
.max-sm\:\[\&\>\[data-cds-disabled-reason-wrapper\]\]\:flex-col > [data-cds-disabled-reason-wrapper] { flex-direction: column; }
}
.\[\&\>\[data-cds-segment\]\:first-child_\[data-cds-part\=paint\]\]\:\!p-0 > [data-cds-segment]:first-child [data-cds-part="paint"] { padding: 0px !important; }
.\[\&\>\[data-cds-segment\]\:first-child_\[data-cds-part\=paint\]\]\:pe-0 > [data-cds-segment]:first-child [data-cds-part="paint"] { padding-inline-end: 0px; }
.\[\&\>\[data-cds-segment\]\:last-child_\[data-cds-part\=paint\]\]\:\!px-0 > [data-cds-segment]:last-child [data-cds-part="paint"] { padding-inline: 0px !important; }
.\[\&\>\[data-cds-segment\]\:last-child_\[data-cds-part\=paint\]\]\:ps-0 > [data-cds-segment]:last-child [data-cds-part="paint"] { padding-inline-start: 0px; }
.\[\&\>\[data-cds-segment\]\:last-child_button\]\:\!ms-0 > [data-cds-segment]:last-child button { margin-inline-start: 0px !important; }
.\[\&\>\[data-cds-segment\]\:last-child_button\]\:\!px-0\.5 > [data-cds-segment]:last-child button { padding-inline: calc(var(--spacing) * .5) !important; }
.\[\&\>\[data-cds-segment\]\:last-child_button\]\:after\:\!start-0 > [data-cds-segment]:last-child button::after { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * 0) !important; }
.\[\&\>\[data-cds-segment\]\:last-child_button\]\:after\:\!-end-1 > [data-cds-segment]:last-child button::after { content: var(--tw-content); inset-inline-end: calc(var(--spacing) * -1) !important; }
.data-\[orientation\=horizontal\]\:\[\&\>\[role\=tab\]\:first-child\]\:before\:start-0[data-orientation="horizontal"] > [role="tab"]:first-child::before { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * 0); }
.data-\[orientation\=horizontal\]\:\[\&\>\[role\=tab\]\:last-child\]\:before\:end-0[data-orientation="horizontal"] > [role="tab"]:last-child::before { content: var(--tw-content); inset-inline-end: calc(var(--spacing) * 0); }
.\[\&\>span\]\:text-muted > span { color: var(--cds-text-muted); }
@media (forced-colors: active) {
.forced-colors\:\[\&\>span\[aria-hidden\=true\]\]\:forced-color-adjust-none > span[aria-hidden="true"] { forced-color-adjust: none; }
}
.\[\&\[data-cds-sheet-covered\]\:not\(\[data-starting-style\]\)\:not\(\[data-ending-style\]\)\]\:-translate-y-3[data-cds-sheet-covered]:not([data-starting-style]):not([data-ending-style]) { --tw-translate-y: calc(var(--spacing) * -3); translate: var(--tw-translate-x) var(--tw-translate-y); }
.\[\&\[data-cds-sheet-pressed\]_\[data-cds-sheet-scroll\]\]\:\[scroll-padding-block\:0px\][data-cds-sheet-pressed] [data-cds-sheet-scroll] { scroll-padding-block: 0px; }
.\[\&\[data-ending-style\]\:not\(\[data-cds-sheet-tree-closing\]\)\]\:translate-x-full[data-ending-style]:not([data-cds-sheet-tree-closing]) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); }
.rtl\:\[\&\[data-ending-style\]\:not\(\[data-cds-sheet-tree-closing\]\)\]\:-translate-x-full:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)[data-ending-style]:not([data-cds-sheet-tree-closing]) { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); }
.\[\&\[data-ending-style\]\[data-cds-sheet-peeling\]\]\:translate-x-full[data-ending-style][data-cds-sheet-peeling] { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); }
.rtl\:\[\&\[data-ending-style\]\[data-cds-sheet-peeling\]\]\:-translate-x-full:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)[data-ending-style][data-cds-sheet-peeling] { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); }
.\[\&\[data-ending-style\]\[data-cds-sheet-tree-closing\]\]\:translate-y-\[calc\(100\%\+1\.5rem\)\][data-ending-style][data-cds-sheet-tree-closing] { --tw-translate-y: calc(100% + 1.5rem); translate: var(--tw-translate-x) var(--tw-translate-y); }
.\[\&\[data-initial-focus\]\:focus\]\:shadow-\[0_0_0_2px_var\(--cds-gray-0\)\,0_0_0_4px_var\(--cds-role-accent-700\)\][data-initial-focus]:focus { --tw-shadow: 0 0 0 2px var(--tw-shadow-color,var(--cds-gray-0)), 0 0 0 4px var(--tw-shadow-color,var(--cds-role-accent-700)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.\[\&\[data-initial-focus\]\:focus\]\:shadow-focus[data-initial-focus]:focus { --tw-shadow: var(--cds-focus-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.\[\&\[data-initial-focus\]\:focus\]\:shadow-focus-danger[data-initial-focus]:focus { --tw-shadow: var(--cds-focus-shadow-danger); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
.\[\&\[data-initial-focus\]\:focus\]\:outline-hidden[data-initial-focus]:focus { --tw-outline-style: none; outline-style: none; }
@media (forced-colors: active) {
.\[\&\[data-initial-focus\]\:focus\]\:outline-hidden[data-initial-focus]:focus { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
}
:root[data-mc-presentation="sheet"] .\[\:root\[data-mc-presentation\=sheet\]_\&\]\:hidden { display: none; }
:root[data-mc-presentation="sheet"] .\[\:root\[data-mc-presentation\=sheet\]_\&\]\:pb-0 { padding-bottom: 0px; }
:root[data-mc-presentation="sheet"] .\[\:root\[data-mc-presentation\=sheet\]_\&\]\:pb-2 { padding-bottom: calc(var(--spacing) * 2); }
:where([data-cds-tall-window]) .\[\:where\(\[data-cds-tall-window\]\)_\&\]\:top-\[calc\(-1_\*_var\(--cds-pad-xl\)\)\] { top: calc(-1 * var(--cds-pad-xl)); }
:where([data-cds-tall-window]) .\[\:where\(\[data-cds-tall-window\]\)_\&\]\:scroll-pt-\[calc\(var\(--cds-h-control\)_\+_3_\*_var\(--cds-toolbar-pad-block\)\)\] { scroll-padding-top: calc(var(--cds-h-control) + 3 * var(--cds-toolbar-pad-block)); }
:where([data-cds-tall-window]) .\[\:where\(\[data-cds-tall-window\]\)_\&\]\:after\:border-b-\[length\:var\(--cds-toolbar-line\)\]::after { content: var(--tw-content); border-bottom-style: var(--tw-border-style); border-bottom-width: var(--cds-toolbar-line); }
:where([data-cds-tall-window]) .\[\:where\(\[data-cds-tall-window\]\)_\&\]\:has-\[\[data-cds-part\=band\]\]\:scroll-fade-hide-top:has([data-cds-part="band"]) { --cds-scroll-fade-top-on: 0; }
[data-cds-part="band"] + .\[\[data-cds-part\=band\]\+\&\]\:mt-0 { margin-top: 0px; }
[data-cds-part="band"][data-cds-alert] + .\[\[data-cds-part\=band\]\[data-cds-alert\]\+\&\]\:-mt-\[calc\(var\(--cds-toolbar-pad-block\)_\+_\(var\(--cds-h-control\)_-_var\(--cds-leading-heading\)\)_\/_2\)\] { margin-top: calc(calc(var(--cds-toolbar-pad-block) + (var(--cds-h-control) - var(--cds-leading-heading)) / 2) * -1); }
[data-cds-segment]:has(:disabled:not([aria-busy])) + .\[\[data-cds-segment\]\:has\(\:disabled\:not\(\[aria-busy\]\)\)\+\&\:has\(\+\[data-cds-segment\]_\:disabled\:not\(\[aria-busy\]\)\)\]\:opacity-disabled:has(+ [data-cds-segment] :disabled:not([aria-busy])) { opacity: var(--cds-opacity-disabled); }
[data-cds-segment]:has([aria-haspopup][aria-expanded="true"]) + .\[\[data-cds-segment\]\:has\(\[aria-haspopup\]\[aria-expanded\=true\]\)\+\&\>\[data-cds-seam-line\]\]\:opacity-0 > [data-cds-seam-line], [data-cds-segment]:has([aria-pressed="true"]) + .\[\[data-cds-segment\]\:has\(\[aria-pressed\=true\]\)\+\&\>\[data-cds-seam-line\]\]\:opacity-0 > [data-cds-seam-line], [data-cds-segment]:hover + .\[\[data-cds-segment\]\:hover\+\&\>\[data-cds-seam-line\]\]\:opacity-0 > [data-cds-seam-line] { opacity: 0; }
[class~="font-voice"] { --_cds-title-family: var(--cds-font-voice); }
[class~="font-mono"] { --_cds-title-family: var(--cds-font-mono); }
[class~="font-mono-ui"] { --_cds-title-family: var(--cds-font-mono-ui); }
[class~="font-sans"] { --_cds-title-family: initial; }
:where(.cds-root, .cds-dark-scope[data-mode="dark"]) { --cds-font-axis-wght: var(--cds-font-axis-wght-body,var(--cds-font-axis-wght-regular)); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
@media screen {
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) :where(.font-thin, .font-extralight, .font-light, .font-extrabold, .font-black) { --cds-font-axis-wght: initial; font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) .font-normal { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-body,var(--cds-font-axis-wght-regular))); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) .font-medium { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-medium)); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) .font-semibold { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-semibold)); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) :is(b, strong):where([class*="font"]) { --cds-font-axis-wght: initial; font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) .font-bold { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-bold)); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) :is(.font-normal, .font-medium, .font-semibold) :is(b, strong) { --cds-font-axis-wght: var(--cds-font-axis-wght-bold); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
}
@media screen and (prefers-color-scheme: dark) {
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) :where(.font-thin, .font-extralight, .font-light, .font-extrabold, .font-black) { --cds-font-axis-wght: initial; font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) .font-normal { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-body,var(--cds-font-axis-wght-regular))); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) .font-medium { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-medium)); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) .font-semibold { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-semibold)); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) :is(b, strong):where([class*="font"]) { --cds-font-axis-wght: initial; font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) .font-bold { --cds-font-axis-wght: var(--_cds-font-axis-wght-role,var(--cds-font-axis-wght-bold)); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) :is(.font-normal, .font-medium, .font-semibold) :is(b, strong) { --cds-font-axis-wght: var(--cds-font-axis-wght-bold); font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad,0); }
}
}
.cds-root { -webkit-font-smoothing: antialiased; font-synthesis: none; }
.cds-root[data-font] { font-family: var(--cds-font-sans); }
[data-cds="Icon"]:not(svg) { font-family: var(--font-anthropicons,Anthropicons-Variable); font-feature-settings: "liga" 0; font-optical-sizing: auto; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; width: 1em; height: 1em; font-style: normal; line-height: 1; display: flex; }
[data-cds="Icon"]:not(svg):not([data-cds-anim]) { font-variation-settings: normal; }
:root[dir="rtl"] :is([data-cds="Icon"], svg)[data-cds-mirror]:dir(rtl) { transform: scaleX(-1); }
[data-cds="Icon"][data-cds-rotate] { --cds-icon-rotate: 0deg; rotate: var(--cds-icon-rotate); }
:root[dir="rtl"] [data-cds="Icon"][data-cds-rotate]:dir(rtl) { rotate: calc(var(--cds-icon-rotate) * -1); }
[data-cds="Icon"] > [data-cds-icon-layer="secondary"] { color: currentcolor; flex: 0 0 auto; width: 1em; margin-inline-end: -1em; }
@supports (color:color-mix(in lab, red, red)) {
[data-cds="Icon"] > [data-cds-icon-layer="secondary"] { color: color-mix(in srgb, currentColor calc(var(--cds-opacity-icon-secondary) * 100%), transparent); }
}
@media (forced-colors: active) {
[data-cds="Icon"] > [data-cds-icon-layer="secondary"] { forced-color-adjust: none; color: canvastext; position: relative; }
@supports (forced-color-adjust:preserve-parent-color) {
[data-cds="Icon"] > [data-cds-icon-layer="secondary"] { forced-color-adjust: preserve-parent-color; color: inherit; }
}
}
.cds-root { --cds-card-press-sx: .99; --cds-card-press-sy: .99; --cds-card-press-d: 2px; }
.cds-root .cds-card-body { --cds-card-press-sx: .99; --cds-card-press-sy: .99; }
.cds-root { --cds-shimmer-text-peak: transparent; --cds-shimmer-text-plateau: 0%; --cds-shimmer-text-keyframes: cds-shimmer-text-band; --cds-shimmer-text-keyframes-rtl: cds-shimmer-text-band-rtl; --cds-shimmer-text-delay: 0s; --cds-shimmer-text-play-state: running; }
.cds-root .group\/btn:has(> .cds-btn-squish) { isolation: isolate; }
.cds-root .cds-btn-squish { --cds-btn-press-sx: .975; --cds-btn-press-sy: .975; transform-origin: 50% center; transition: transform var(--cds-dur-slow) var(--cds-btn-spring); }
.cds-root .group\/btn:not([disabled]):active .cds-btn-squish, .cds-root .group\/btn:not([disabled]):has(:active) .cds-btn-squish { transform: scale(var(--cds-btn-press-sx), var(--cds-btn-press-sy)); transition: transform var(--cds-dur-fast) ease-out; }
.cds-root [data-cds="Card"] > .cds-card-fill, .cds-root [data-cds="Card"]::after { transform-origin: 50% center; transition: transform var(--cds-dur-slow) var(--cds-btn-spring); }
.cds-root [data-cds="Card"]:has([data-cds="CardLink"]:active) > .cds-card-fill, .cds-root [data-cds="Card"]:has([data-cds="CardLink"]:active)::after { transform: scale(var(--cds-card-press-sx), var(--cds-card-press-sy)); transition: transform var(--cds-dur-fast) ease-out; }
.cds-root [data-cds="Card"]:has([data-cds="CardLink"]) > .cds-card-body { clip-path: inset(0 round calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale,1)))); transition: clip-path var(--cds-dur-slow) var(--cds-btn-spring); }
.cds-root [data-cds="Card"]:has([data-cds="CardLink"]:active) > .cds-card-body { clip-path: inset(var(--cds-card-press-d) round calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale,1)))); transition: clip-path var(--cds-dur-fast) ease-out; }
@media (prefers-reduced-motion: reduce) {
.cds-root [data-cds="Card"] > .cds-card-fill, .cds-root [data-cds="Card"]::after, .cds-root [data-cds="Card"]:has([data-cds="CardLink"]:active) > .cds-card-fill, .cds-root [data-cds="Card"]:has([data-cds="CardLink"]:active)::after, .cds-root [data-cds="Card"]:has([data-cds="CardLink"]) > .cds-card-body, .cds-root [data-cds="Card"]:has([data-cds="CardLink"]:active) > .cds-card-body, .cds-root .cds-btn-squish, .cds-root .group\/btn:not([disabled]):active .cds-btn-squish, .cds-root .group\/btn:not([disabled]):has(:active) .cds-btn-squish { transition: none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="Card"] > .cds-card-fill, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="Card"]::after, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="Card"]:has([data-cds="CardLink"]:active) > .cds-card-fill, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="Card"]:has([data-cds="CardLink"]:active)::after, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="Card"]:has([data-cds="CardLink"]) > .cds-card-body, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="Card"]:has([data-cds="CardLink"]:active) > .cds-card-body, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-btn-squish, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .group\/btn:not([disabled]):active .cds-btn-squish, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .group\/btn:not([disabled]):has(:active) .cds-btn-squish { transition: none; }
.cds-root [data-cds="ChatComposerDock"][data-cds-dock-masked] :is([data-cds-dock-item], [data-cds-dock-card]):not([hidden]) ~ :is([data-cds-dock-item], [data-cds-dock-card])::before, .cds-root [data-cds="ChatComposerDock"][data-cds-dock-masked] :is([data-cds-dock-item], [data-cds-dock-card]):not([hidden]) ~ [data-cds-dock-group] :is([data-cds-dock-item], [data-cds-dock-card])::before, .cds-root [data-cds="ChatComposerDock"][data-cds-dock-masked] [data-cds-dock-group]:not([hidden]):has(:is([data-cds-dock-item], [data-cds-dock-card]):not([hidden])) ~ :is([data-cds-dock-item], [data-cds-dock-card])::before, .cds-root [data-cds="ChatComposerDock"][data-cds-dock-masked] [data-cds-dock-group]:not([hidden]):has(:is([data-cds-dock-item], [data-cds-dock-card]):not([hidden])) ~ [data-cds-dock-group] :is([data-cds-dock-item], [data-cds-dock-card])::before, .cds-root [data-cds="ChatComposerDock"][data-cds-dock-masked] [data-cds-dock-static="opaque"]:not([hidden]):not(:empty) ~ :is([data-cds-dock-item], [data-cds-dock-card])::before, .cds-root [data-cds="ChatComposerDock"][data-cds-dock-masked] [data-cds-dock-static="opaque"]:not([hidden]):not(:empty) ~ [data-cds-dock-group] :is([data-cds-dock-item], [data-cds-dock-card])::before, .cds-root [data-cds="ChatComposerDock"][data-cds-dock-masked][data-cds-dock-host-fade] :is([data-cds-dock-item], [data-cds-dock-card])::before { content: none; }
.cds-root [data-cds="ChatComposerDock"] > :not([data-cds-dock-item], [data-cds="ChatComposerNotices"], [data-cds="ChatComposerQueuedMessages"], [data-cds-dock-group], [data-cds-dock-static], [hidden], :last-child) { margin-bottom: var(--cds-gap-xs); }
.cds-root [data-cds="AssistantMessage"][data-cds-reply-type] [data-cds="TurnStatus"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) > div:first-child, .cds-root [data-cds="AssistantMessage"][data-cds-reply-type] [data-cds="TurnStatusStep"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) > div:first-child, .cds-root [data-cds="AssistantMessage"][data-cds-reply-type] [data-cds="TurnStatusStep"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) > a:first-child, .cds-root [data-cds="AssistantMessage"][data-cds-reply-type] [data-cds="TurnStatusStep"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) > button:first-child { font-size: var(--cds-font-size-prose); line-height: var(--cds-leading-prose); }
.cds-root [data-cds="AssistantMessage"] { --cds-assistant-message-text-inset: 4px; --cds-assistant-message-text-stop: clamp(0px, (100% - 384px) * .175, 56px); }
.cds-root [data-cds="AssistantMessage"] :is([data-cds="Card"], [data-cds="Surface"], [data-cds="Panel"], [data-cds="Banner"], [data-cds="Aside"], [data-cds="Accordion"], [data-cds="PreviewCard"], [data-cds="Table"], [data-cds="DataTable"], [data-cds="AskUserQuestion"], [data-cds="CommentCard"], [data-cds="ChartContainer"], [data-cds="PointChartContainer"], [data-cds="CellChartContainer"], [data-cds="FileDiff"], [data-cds="UserMessage"]) { --cds-assistant-message-text-inset: 0px; --cds-assistant-message-text-stop: 0px; }
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) { --_prose-h1-size: calc(1em + .125rem); --_prose-h1-leading: calc(var(--_prose-leading) + .1875rem); --_prose-h2-size: var(--_prose-h1-size); --_prose-h2-leading: var(--_prose-h1-leading); --_prose-h3-size: 1em; --_prose-h3-leading: var(--_prose-leading); --_prose-h4-size: 1em; --_prose-h4-leading: var(--_prose-leading); --_prose-h5-size: 1em; --_prose-h5-leading: var(--_prose-leading); --_prose-h6-size: 1em; --_prose-h6-leading: var(--_prose-leading); }
@media (forced-colors: none) {
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) .prose-scroll table:not([data-cds]):not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)), .cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) .prose-scroll > div:not([data-cds]):not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)) { border-width: 0px; border-radius: 0px; }
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) .prose-scroll :is(th, td):not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)) { background: 0px 0px; border-radius: 0px; padding-block: calc(0.4375em + 1px); padding-inline: 0px; }
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) .prose-scroll :is(th, td) + :where(th, td):not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)) { padding-inline-start: 1.5em; }
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) :is(li, blockquote, details) .prose-scroll:not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)) { border-width: 0px; border-radius: 0px; }
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) > .prose-scroll:not([data-cds-bubble-stack] *), .cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) > div:not(.prose-scroll, .prose-block, .prose-lead, .math-display, .not-prose, [data-not-prose], [data-cds]) > .prose-scroll:not([data-cds-bubble-stack] *) { border-width: 0px; border-inline-start: var(--cds-assistant-message-text-inset,0px) solid transparent; border-radius: 0px; }
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) .prose-scroll th:not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)) { font-weight: var(--cds-font-weight-header,var(--_prose-heading-weight,var(--cds-font-weight-semibold,580))); --cds-font-axis-wght: var(--cds-font-axis-wght-header,var(--_prose-heading-axis-wght,var(--cds-font-axis-wght-semibold,))); }
}
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) :is(strong, b):not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)) { font-weight: calc(var(--cds-font-weight-medium,500) + 1); --cds-font-axis-wght: var(--cds-font-axis-wght-medium,); }
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) :is(h1, h2, h3, h4, h5, h6):not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)), .cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) :is(h1, h2, h3, h4, h5, h6, th) :is(strong, b):not(:where(.not-prose, [data-not-prose], .not-prose *, [data-not-prose] *, [data-cds="Prose"] [data-cds] *)) { font-weight: var(--cds-font-weight-header,var(--_prose-heading-weight,var(--cds-font-weight-semibold,580))); --cds-font-axis-wght: var(--cds-font-axis-wght-header,var(--_prose-heading-axis-wght,var(--cds-font-axis-wght-semibold,))); }
.cds-root [data-cds="UserMessage"], .cds-root [data-cds="AssistantMessage"][data-variant="bubble"] { --cds-message-bubble-radius: calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale,1))); --cds-message-bubble-pad-x: var(--cds-pad-lg); --cds-message-bubble-pad-y: var(--cds-pad-md); --cds-message-bubble-measure: 85%; }
.cds-root [data-cds-reply-type] [data-cds="DiffIndicator"][data-variant="text"] { font-size: inherit; line-height: inherit; }
.cds-root [data-cds="AssistantMessage"][data-variant="bubble"] { --cds-assistant-message-text-inset: var(--cds-message-bubble-pad-x); --cds-assistant-message-text-stop: 0px; --cds-message-bubble-stack-gap: 2px; --cds-message-bubble-item-gap: 0px; }
.cds-root [data-cds="AssistantMessage"][data-variant="bubble"] [data-cds="Prose"]:not([data-cds="AssistantMessage"][data-variant="bubble"] :where([data-cds]:not([data-cds="AssistantMessage"][data-variant="bubble"])) *) { box-sizing: border-box; width: fit-content; max-width: var(--cds-message-bubble-measure); padding: var(--cds-message-bubble-pad-y) var(--cds-message-bubble-pad-x); border-radius: var(--cds-message-bubble-radius); background: var(--cds-bg-user-message); --cds-assistant-message-text-inset: 0px; --cds-assistant-message-text-stop: 0px; }
.cds-root [data-cds="AssistantMessage"][data-variant="bubble"] > div > .prose[data-cds="Prose"] + .prose[data-cds="Prose"] { margin-block-start: calc(var(--cds-message-bubble-stack-gap) - var(--cds-message-bubble-item-gap)); }
@media print {
.cds-root [data-cds="AssistantMessage"][data-variant="bubble"] > div > .prose[data-cds="Prose"] + .prose[data-cds="Prose"] { margin-block-start: var(--cds-message-bubble-stack-gap); }
}
@media screen and (forced-colors: none) {
.cds-root [data-cds-reply-type] [data-cds="Prose"]:not([data-cds-reply-type] :where([data-cds]:not([data-cds-reply-type])) *) code:not(pre code, .not-prose, [data-not-prose], [data-cds-reply-type] :where(.not-prose, [data-not-prose]) *) { background: var(--cds-fill-ghost-hover); color: var(--cds-prose-code-color,var(--cds-text-primary)); border: 0px; border-radius: 4px; padding: 1px 4px; }
}
@media print {
.cds-root [data-cds="AccordionHeader"] ~ [role="region"][hidden] { content-visibility: visible; height: auto; }
.cds-root [data-cds="AccordionHeader"]:has(~ [role="region"]) [data-cds-accordion-caret] { display: none; }
}
.cds-root [data-cds="DataTable"] { --cds-undimmed-text-primary: var(--cds-text-primary); --cds-undimmed-text-secondary: var(--cds-text-secondary); --cds-undimmed-text-muted: var(--cds-text-muted); --cds-undimmed-text-stays-secondary: var(--cds-text-stays-secondary,var(--cds-text-muted)); }
.cds-root [data-cds="DataTable"] tr[data-dimmed] { --cds-row-dimmed-opacity: .5; --cds-text-primary: var(--cds-undimmed-text-stays-secondary); --cds-text-secondary: var(--cds-text-disabled); --cds-text-muted: var(--cds-text-disabled); --cds-text-stays-secondary: var(--cds-text-disabled); }
.cds-root [data-cds="DataTable"] tr[data-dimmed] :is(button, input, select, textarea, [role="button"], [role="checkbox"], [role="combobox"], [role="menuitem"], [role="radio"], [role="slider"], [role="switch"], [role="tab"]) { --cds-row-dimmed-opacity: 1; --cds-text-primary: var(--cds-undimmed-text-primary); --cds-text-secondary: var(--cds-undimmed-text-secondary); --cds-text-muted: var(--cds-undimmed-text-muted); --cds-text-stays-secondary: var(--cds-undimmed-text-stays-secondary); }
.cds-root { --cds-message-actions-reveal-in-duration: var(--cds-dur-snap); --cds-message-actions-reveal-in-ease: var(--cds-ease-snap); --cds-message-actions-reveal-in-delay: .1s; --cds-message-actions-reveal-out-duration: var(--cds-dur-fast); --cds-message-actions-reveal-out-ease: var(--cds-ease-snap); --cds-message-actions-reveal-out-delay: 0s; --cds-message-actions-reveal-scale: none; --cds-message-actions-reveal-origin: top; }
@property --cds-message-actions-opacity { syntax: "<number>"; inherits: true; initial-value: 1; }
.cds-root [data-cds="MessageActions"][data-reveal] { --cds-message-actions-opacity: 0; opacity: var(--cds-message-actions-opacity); scale: var(--cds-message-actions-reveal-scale); transform-origin: var(--cds-message-actions-reveal-origin); transition-property: opacity, scale; transition-duration: var(--cds-message-actions-reveal-out-duration); transition-timing-function: var(--cds-message-actions-reveal-out-ease); transition-delay: var(--cds-message-actions-reveal-out-delay); }
.cds-root [data-cds="MessageActions"][data-reveal][data-always-visible] { opacity: 1; scale: none; }
.cds-root [data-cds="MessageActions"][data-reveal]:where([data-always-visible]:has(> [data-cds-reveal-on-hover])) { transition-property: --cds-message-actions-opacity; }
.cds-root [data-cds="MessageActions"][data-reveal] > [data-cds-reveal-on-hover] { opacity: var(--cds-message-actions-opacity); }
.cds-root [data-cds="MessageActions"][data-reveal]:not([data-always-visible]) > [data-cds-reveal-on-hover] { transition: opacity 0s linear calc((1 - var(--cds-message-actions-opacity)) * ( var(--cds-message-actions-reveal-out-delay) + var(--cds-message-actions-reveal-out-duration) )); }
.cds-root .group\/message-row:focus-within [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:focus-within) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-actions-scope]:focus-within [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:focus-within) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-row]:has([data-cds-row-toggle]:focus-visible) ~ [data-cds-row-panel] [data-cds-actions-scope] [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-row]:has([data-cds-row-toggle]:focus-visible) ~ [data-cds-row-panel] [data-cds-row-panel] [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-row] > [data-cds-row-toggle]:focus-visible ~ [data-cds-row-panel] [data-cds-actions-scope] [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-row] > [data-cds-row-toggle]:focus-visible ~ [data-cds-row-panel] [data-cds-row-panel] [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds="MessageActions"][data-reveal]:focus-within, .cds-root [data-cds="MessageActions"][data-reveal]:has([data-popup-open]) { --cds-message-actions-opacity: 1; transition-duration: var(--cds-message-actions-reveal-in-duration); transition-timing-function: var(--cds-message-actions-reveal-in-ease); transition-delay: 0s; scale: none; }
@starting-style {
.cds-root .group\/message-row:focus-within [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:focus-within) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-actions-scope]:focus-within [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:focus-within) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-row]:has([data-cds-row-toggle]:focus-visible) ~ [data-cds-row-panel] [data-cds-actions-scope] [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-row]:has([data-cds-row-toggle]:focus-visible) ~ [data-cds-row-panel] [data-cds-row-panel] [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-row] > [data-cds-row-toggle]:focus-visible ~ [data-cds-row-panel] [data-cds-actions-scope] [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-row] > [data-cds-row-toggle]:focus-visible ~ [data-cds-row-panel] [data-cds-row-panel] [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds="MessageActions"][data-reveal]:focus-within, .cds-root [data-cds="MessageActions"][data-reveal]:has([data-popup-open]) { --cds-message-actions-opacity: 0; scale: var(--cds-message-actions-reveal-scale); }
}
@media (hover: hover) {
.cds-root .group\/message-row:hover [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:hover) [data-cds="MessageActions"][data-reveal])), .cds-root .group\/message-row[data-hovered]:not([data-hovered="false"]) [data-cds="MessageActions"][data-reveal]:not(:where(.group\/message-row[data-hovered]:not([data-hovered="false"]) [data-cds-actions-scope]:not(:hover) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-actions-scope]:hover [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:hover) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds="MessageActions"][data-reveal]:hover { --cds-message-actions-opacity: 1; transition-duration: var(--cds-message-actions-reveal-in-duration); transition-timing-function: var(--cds-message-actions-reveal-in-ease); transition-delay: var(--cds-message-actions-reveal-in-delay); scale: none; }
@starting-style {
.cds-root .group\/message-row:hover [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:hover) [data-cds="MessageActions"][data-reveal])), .cds-root .group\/message-row[data-hovered]:not([data-hovered="false"]) [data-cds="MessageActions"][data-reveal]:not(:where(.group\/message-row[data-hovered]:not([data-hovered="false"]) [data-cds-actions-scope]:not(:hover) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds-actions-scope]:hover [data-cds="MessageActions"][data-reveal]:not(:where([data-cds-actions-scope]:not(:hover) [data-cds="MessageActions"][data-reveal])), .cds-root [data-cds="MessageActions"][data-reveal]:hover { --cds-message-actions-opacity: 0; scale: var(--cds-message-actions-reveal-scale); }
}
}
.cds-root [data-cds="MessageActions"][data-reveal="instant"] { transition-property: none; scale: none; }
@media (pointer: coarse), (hover: none) {
.cds-root [data-cds="MessageActions"][data-reveal] { --cds-message-actions-opacity: 1; transition-property: none; scale: none; }
}
@media (prefers-reduced-motion: reduce) {
.cds-root [data-cds="MessageActions"][data-reveal] { transition-property: none; scale: none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="MessageActions"][data-reveal] { transition-property: none; scale: none; }
:where(.cds-root) input.cds-input::-webkit-search-cancel-button { appearance: none; display: none; }
:where(.cds-root) input.cds-input::-webkit-search-decoration { appearance: none; display: none; }
:where(.cds-root) textarea.cds-input::-webkit-resizer { background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2016%2016%27%3E%3Cpath%20d=%27M4.5%2011.5%2011.5%204.5M8.5%2011.5%2011.5%208.5%27%20stroke=%27%23898781%27%20stroke-width=%271.5%27%20stroke-linecap=%27round%27%20fill=%27none%27/%3E%3C/svg%3E") 0px 0px / 100% 100% no-repeat; }
:where(:root[dir="rtl"] input[dir="ltr"]:is([type="email"], [type="url"], [type="tel"], [inputmode="email"], [inputmode="url"], [inputmode="tel"]):not([class*="text-left"], [class*="text-right"], [class*="text-center"], [class*="text-start"], [class*="text-end"], [class*="text-justify"], [class*="text-align"], [style*="text-align"]):placeholder-shown:not(:focus)) { text-align: end; }
:where(textarea[data-cds-typed-dir="ltr"][dir="ltr"], textarea[data-cds-typed-dir="rtl"][dir="rtl"]) { unicode-bidi: plaintext; }
@media (pointer: coarse) {
.cds-root { --cds-font-size-text-entry-floor: 16px; }
.cds-root input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"])), .cds-root textarea, .cds-root select, .cds-root .cds-text-entry-floored { font-size: max(var(--cds-font-size-text-entry-floor,0px), var(--cds-font-size-body)); }
.cds-root textarea, .cds-root .cds-text-entry-floored { line-height: var(--cmp-leading,max(1.375em, var(--cds-leading-body))); }
.cds-root [contenteditable]:where(:not([contenteditable="false"])) { font-size: max(var(--cds-font-size-text-entry-floor,0px), 1em); }
}
@keyframes cds-dot-pulse {
0%, 5% { opacity: 0.2857; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
15%, 25% { opacity: 1; animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); }
65%, 100% { opacity: 0.2857; }
}
.cds-root .cds-dot { width: calc(.1875rem * var(--cds-rem-scale,1)); height: calc(.1875rem * var(--cds-rem-scale,1)); background: var(--cds-alpha-7); opacity: 0.2857; border-radius: 9999px; animation: 1.8s linear 0s infinite normal none running cds-dot-pulse; }
.cds-root .cds-dot:nth-child(2) { animation-delay: 0.2s; }
.cds-root .cds-dot:nth-child(3) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
.cds-root .cds-dot { animation: auto ease 0s 1 normal none running none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-dot { animation: auto ease 0s 1 normal none running none; }
@keyframes cds-working-dot-halo {
50% { opacity: 0.3; transform: scale(1.5); }
}
.cds-root .cds-working-dot-halo { opacity: 0; animation: 2.5s ease-in-out 0s infinite normal none running cds-working-dot-halo; }
@keyframes cds-working-dot-lands {
0% { clip-path: circle(calc(.25rem * var(--cds-rem-scale,1))); }
100% { clip-path: circle(50%); }
}
@keyframes cds-working-dot-veil {
0% { opacity: 1; }
}
.cds-root [data-cds-part="comment"] [data-landing] { animation: cds-working-dot-lands var(--cds-dur-base) var(--cds-ease-out); position: relative; }
.cds-root [data-cds-part="comment"] [data-landing]::after { content: ""; background: var(--cds-fill-brand); opacity: 0; pointer-events: none; animation: cds-working-dot-veil var(--cds-dur-base) var(--cds-ease-out); border-radius: 9999px; position: absolute; inset: 0px; }
@media (prefers-reduced-motion: reduce) {
.cds-root .cds-working-dot-halo, .cds-root [data-cds-part="comment"] [data-landing], .cds-root [data-cds-part="comment"] [data-landing]::after { animation: auto ease 0s 1 normal none running none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-working-dot-halo, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds-part="comment"] [data-landing], .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds-part="comment"] [data-landing]::after { animation: auto ease 0s 1 normal none running none; }
@keyframes cds-flipbook {
0% { transform: translate(0px); }
100% { transform: translateX(var(--cds-flipbook-span)); }
}
.cds-root .cds-flipbook { --cds-flipbook-steps: 2; --cds-flipbook-span: 0%; transform-box: view-box; animation-name: cds-flipbook; animation-timing-function: steps(var(--cds-flipbook-steps), jump-none); animation-iteration-count: infinite; }
@media (prefers-reduced-motion: reduce) {
.cds-root .cds-flipbook { animation: auto ease 0s 1 normal none running none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-flipbook { animation: auto ease 0s 1 normal none running none; }
@keyframes cds-shimmer {
0% { transform: translate(-100%); }
100% { transform: translate(100%); }
}
.cds-root [data-cds="Skeleton"][data-cds="Skeleton"]:where(:root[dir="rtl"] :dir(rtl))::after { animation-direction: reverse; }
@keyframes cds-placeholder-reveal {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes cds-skeleton-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.cds-root [data-cds="SkeletonGroup"][data-hold] { --cds-skel-elapsed: 0s; --cds-skel-i: 0; --cds-skel-settled: 0s; --cds-skel-reveal-end: calc(var(--placeholder-reveal-delay,.5s) + .15s - var(--cds-skel-elapsed)); }
.cds-root [data-cds="SkeletonGroup"][data-hold="none"] { --cds-skel-reveal-end: calc(0s - var(--cds-skel-elapsed)); }
.cds-root [data-cds="SkeletonGroup"][data-hold="delayed"] { animation: cds-placeholder-reveal .15s ease-out calc(var(--placeholder-reveal-delay,.5s) - var(--cds-skel-elapsed) - var(--cds-skel-settled)) backwards; }
.cds-root [data-cds="SkeletonGroup"][data-motion="lockstep"][data-hold="none"] { animation: cds-skeleton-breathe 2s ease-in-out var(--cds-skel-reveal-end) infinite; }
.cds-root [data-cds="SkeletonGroup"][data-motion="lockstep"][data-hold="delayed"] { animation: cds-skeleton-breathe 2s ease-in-out var(--cds-skel-reveal-end) infinite, cds-placeholder-reveal .15s ease-out calc(var(--placeholder-reveal-delay,.5s) - var(--cds-skel-elapsed) - var(--cds-skel-settled)) backwards; }
@keyframes cds-skeleton-sweep {
0% { transform: translate(-100%); }
100% { transform: translate(100%); }
}
.cds-root .cds-skel-sweep-clip { pointer-events: none; position: absolute; inset: 0px; overflow: hidden; }
.cds-root .cds-skel-sweep-band { background: linear-gradient(105deg, transparent 35%, var(--cds-skeleton-sheen), transparent 65%); animation: cds-skeleton-sweep 2s linear var(--cds-skel-reveal-end,0s) infinite backwards; position: absolute; inset: 0px; }
.cds-root .cds-skel-sweep-clip:where(:root[dir="rtl"] :dir(rtl)) .cds-skel-sweep-band { background-image: linear-gradient(255deg, transparent 35%, var(--cds-skeleton-sheen), transparent 65%); animation-direction: reverse; }
.cds-root [data-cds="SkeletonGroup"][data-motion="wave"] [data-cds="Skeleton"] { animation: cds-skeleton-breathe 2s ease-in-out calc(var(--cds-skel-reveal-end,0s) + var(--cds-skel-i,0) * 90ms) infinite; }
@media (prefers-reduced-motion: reduce) {
.cds-root [data-cds="SkeletonGroup"][data-hold][data-motion], .cds-root [data-cds="SkeletonGroup"][data-hold][data-motion] [data-cds="Skeleton"] { animation-duration: 0.01ms; animation-iteration-count: 1; }
.cds-root [data-cds="SkeletonGroup"][data-hold][data-motion] .cds-skel-sweep-band { display: none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="SkeletonGroup"][data-hold][data-motion], .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="SkeletonGroup"][data-hold][data-motion] [data-cds="Skeleton"] { animation-duration: 0.01ms; animation-iteration-count: 1; }
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds="SkeletonGroup"][data-hold][data-motion] .cds-skel-sweep-band { display: none; }
@keyframes cds-shimmer-text-shine {
0%, 15% { background-position: 83.333% 0px; animation-timing-function: cubic-bezier(0.714, 0.121, 0.211, 0.888); }
85%, 100% { background-position: 16.667% 0px; }
}
@keyframes cds-shimmer-text-shine-rtl {
0%, 15% { background-position: 16.667% 0px; animation-timing-function: cubic-bezier(0.714, 0.121, 0.211, 0.888); }
85%, 100% { background-position: 83.333% 0px; }
}
@keyframes cds-shimmer-text-shine-strong {
0%, 5% { background-position: 83.333% 0px; animation-timing-function: cubic-bezier(0.4, 0.15, 0.6, 0.85); }
95%, 100% { background-position: 16.667% 0px; }
}
@keyframes cds-shimmer-text-shine-strong-rtl {
0%, 5% { background-position: 16.667% 0px; animation-timing-function: cubic-bezier(0.4, 0.15, 0.6, 0.85); }
95%, 100% { background-position: 83.333% 0px; }
}
@keyframes cds-shimmer-text-band {
0%, 15% { animation-timing-function: cubic-bezier(0.714, 0.121, 0.211, 0.888); translate: -62.5%; }
85%, 100% { translate: -12.5%; }
}
@keyframes cds-shimmer-text-band-rtl {
0%, 15% { animation-timing-function: cubic-bezier(0.714, 0.121, 0.211, 0.888); translate: -12.5%; }
85%, 100% { translate: -62.5%; }
}
@keyframes cds-shimmer-text-band-strong {
0%, 5% { animation-timing-function: cubic-bezier(0.4, 0.15, 0.6, 0.85); translate: -62.5%; }
95%, 100% { translate: -12.5%; }
}
@keyframes cds-shimmer-text-band-strong-rtl {
0%, 5% { animation-timing-function: cubic-bezier(0.4, 0.15, 0.6, 0.85); translate: -12.5%; }
95%, 100% { translate: -62.5%; }
}
[data-cds-shimmer-clone] { display: none; }
@supports ((-webkit-mask-clip:text)) and (-webkit-app-region:drag) {
.cds-root [data-cds-shimmer-clone] { box-sizing: border-box; padding: inherit; white-space: inherit; text-overflow: inherit; pointer-events: none; user-select: none; -webkit-text-fill-color: transparent; mask-image: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); mask-clip: text; display: block; position: absolute; inset: 0px; overflow: clip; }
.cds-root [data-cds-shimmer-clone]::after { content: ""; background-image: linear-gradient(120deg, transparent 37.5%, var(--cds-shimmer-text-peak,transparent) calc(50% - var(--cds-shimmer-text-plateau,0%)), var(--cds-shimmer-text-peak,transparent) calc(50% + var(--cds-shimmer-text-plateau,0%)), transparent 62.5%); animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-timeline: auto; animation-range: normal; animation-name: var(--cds-shimmer-text-keyframes,cds-shimmer-text-band); animation-delay: var(--cds-shimmer-text-delay,0s); animation-play-state: var(--cds-shimmer-text-play-state,running); position: absolute; inset: 0px -300% 0px 0px; translate: -62.5%; }
.cds-root [data-cds-shimmer-clone]:where(:root[dir="rtl"] :dir(rtl))::after { background-image: linear-gradient(240deg, transparent 37.5%, var(--cds-shimmer-text-peak,transparent) calc(50% - var(--cds-shimmer-text-plateau,0%)), var(--cds-shimmer-text-peak,transparent) calc(50% + var(--cds-shimmer-text-plateau,0%)), transparent 62.5%); animation-name: var(--cds-shimmer-text-keyframes-rtl,cds-shimmer-text-band-rtl); translate: -12.5%; }
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
.cds-root [data-cds-shimmer-copy-inks]:not([data-reduce-motion="true"] *) { -webkit-text-fill-color: transparent; }
.cds-root [data-cds-shimmer-copy-inks]:not([data-reduce-motion="true"] *) > [inert] { background-color: var(--cds-text-primary,currentcolor); }
}
}
@media (prefers-reduced-motion: reduce) {
.cds-root [data-cds-shimmer-clone] { display: none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds-shimmer-clone] { display: none; }
@media (forced-colors: active) {
.cds-root [data-cds-shimmer-clone] { display: none; }
}
@keyframes cds-reveal-in {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: none; }
}
@keyframes cds-reveal-out {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(4px); }
}
@keyframes cds-fade-in {
0% { opacity: 0; }
}
@keyframes cds-slide-in-end {
0% { opacity: 0; transform: translate(12px); }
}
@keyframes cds-slide-in-start {
0% { opacity: 0; transform: translate(-12px); }
}
@keyframes cds-page-title-leaves {
0% { opacity: 1; transform: none; }
0.001%, 100% { opacity: 0; transform: translateY(20px) scale(0.96); }
}
@keyframes cds-page-tabs-arrive {
0% { translate: var(--cds-page-header-tabs-pull); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
0.005%, 100% { translate: 0px; }
}
@supports (animation-timeline:scroll()) {
[data-cds-title-leaves] [data-cds-part="page-title-motion"] { animation-name: cds-page-title-leaves; animation-duration: auto; animation-timing-function: linear; animation-timeline: scroll(); animation-range: 0px 2.8e+06px; }
[data-cds-tabs-arrive] { --cds-page-header-tabs-pull: 0px; --cds-page-header-tabs-travel: 1px; }
[data-cds-tabs-arrive] [data-cds-part="tabs-row"] { translate: var(--cds-page-header-tabs-pull); animation-name: cds-page-tabs-arrive; animation-duration: auto; animation-timing-function: linear; animation-timeline: scroll(); animation-range: 0px calc(var(--cds-page-header-tabs-travel) * 20000); }
[data-cds-title-leaves] [data-cds-part="page-title-motion"], [data-cds-tabs-arrive] [data-cds-part="tabs-row"] { z-index: 1; }
[data-cds-title-leaves]:not([data-cds-row-level]) [data-cds-part="page-title-motion"], [data-cds-tabs-arrive] [data-cds-part="tabs-row"] { position: relative; }
}
[data-cds="Toolbar"] > [data-cds-part="toolbar-ground"], [data-cds="Page"] [data-cds-part="page-header-ground"] { --_toolbar-ground-fill: 85%; z-index: -1; pointer-events: none; user-select: none; background-color: var(--cds-page-bg); position: absolute; inset: 0px; }
@supports (color:color-mix(in lab, red, red)) {
[data-cds="Toolbar"] > [data-cds-part="toolbar-ground"], [data-cds="Page"] [data-cds-part="page-header-ground"] { background-color: color-mix(in srgb, var(--cds-page-bg) var(--_toolbar-ground-fill), transparent); }
}
[data-cds="Toolbar"] > [data-cds-part="toolbar-ground"], [data-cds="Page"] [data-cds-part="page-header-ground"] { backdrop-filter: blur(12px); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active), print {
[data-cds="Toolbar"] > [data-cds-part="toolbar-ground"], [data-cds="Page"] [data-cds-part="page-header-ground"] { --_toolbar-ground-fill: 100%; backdrop-filter: none; }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
[data-cds="Toolbar"] > [data-cds-part="toolbar-ground"], [data-cds="Page"] [data-cds-part="page-header-ground"] { --_toolbar-ground-fill: 100%; }
}
[data-cds-opaque-toolbars] [data-cds="Toolbar"] > [data-cds-part="toolbar-ground"], [data-cds-opaque-toolbars] [data-cds="Page"] [data-cds-part="page-header-ground"] { --_toolbar-ground-fill: 100%; backdrop-filter: none; }
@keyframes cds-morph-in {
0% { opacity: 0; transform: translateY(3px); }
}
.cds-root [data-cds-row-cut] { text-overflow: clip; mask-image: linear-gradient(90deg, rgb(0, 0, 0) calc(100% - 24px), rgba(0, 0, 0, 0)); mask-clip: no-clip; }
.cds-root [data-cds-row-cut]:dir(rtl) { mask-image: linear-gradient(270deg, rgb(0, 0, 0) calc(100% - 24px), rgba(0, 0, 0, 0)); }
.cds-root [data-cds-row] [data-cds-row-cut] { z-index: 1; pointer-events: none; position: relative; }
@keyframes cds-drop-ring-in {
0% { opacity: 0; transform: scale(1.005); }
}
@keyframes cds-drop-icon-rise {
0% { opacity: 0; transform: translateY(12px); }
}
@keyframes cds-grid-rows-in {
0% { grid-template-rows: 0fr; }
}
.cds-root { --cds-chip-in-base-delay: 50ms; }
@keyframes cds-chip-in {
0% { opacity: 0; filter: blur(2px); transform: scale(0.8); }
}
.cds-root .cds-chip-in { animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: calc(var(--cds-chip-in-base-delay,50ms) + min(sibling-index() - 1, 8) * 30ms); }
@media (prefers-reduced-motion: reduce) {
.cds-root .cds-chip-in { animation: auto ease 0s 1 normal none running none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-chip-in { animation: auto ease 0s 1 normal none running none; }
.cds-root [data-composer-placeholder-ghost]::before { content: attr(data-composer-placeholder-ghost); }
.cds-root [data-composer-placeholder]:has(+ [data-cds="ChatComposerEditor"] [data-doc-empty="false"]), .cds-root [data-cds="ChatComposerEditor"]:has([data-doc-empty="false"]) [data-cds-part="draft-stand-in"] { visibility: hidden; }
@media (pointer: coarse), (hover: none) {
.cds-root [data-cds="ChatComposerChin"] [data-touch-size] { --cds-radius: inherit; --cds-h-control: inherit; --cds-h-control-nested: inherit; --cds-icon: inherit; --cds-pad-xs: inherit; --cds-pad-sm: inherit; --cds-pad-md: inherit; --cds-pad-lg: inherit; --cds-pad-xl: inherit; --cds-checkbox: inherit; --cds-checkbox-glyph: inherit; --cds-checkbox-radius: inherit; --cds-switch-h: inherit; --cmp-chin-touch-grow: calc((var(--cds-h-control) - var(--cmp-chin-row-h,var(--cds-h-control))) / 2); min-height: var(--cmp-chin-row-h,var(--cds-h-control)); }
.cds-root [data-cds="ChatComposerChin"] [data-touch-size] :is([data-cds="ButtonGroup"], [data-cds="SplitDropdownButton"]):not([data-size]), .cds-root [data-cds="ChatComposerChin"] [data-touch-size] :is([data-cds="Button"], [data-cds="ModelSelector"], [data-cds="ModelSelectorEffort"]):not([data-size]):not(:is([data-cds="ButtonGroup"], [data-cds="SplitDropdownButton"]) *) { margin-block: calc(var(--cmp-chin-touch-grow,0px) * -1); }
}
.cds-root [data-cds-composer-attachments]:has([data-cds-attachment]) { transition: opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
.cds-root [data-cds-composer-attachments] [data-cds-attachment] { --cds-attachment-vt-name: none; transform-origin: 0px center; view-transition-class: cds-attachment; transition: transform 0.18s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.18s cubic-bezier(0.215, 0.61, 0.355, 1); }
.cds-root [data-cds-composer-attachments] [data-cds-attachment]:where(:dir(rtl), [dir="rtl"] *) { transform-origin: 100% center; }
:root:active-view-transition-type(cds-attachments) [data-cds-composer-attachments] [data-cds-attachment] { view-transition-name: var(--cds-attachment-vt-name); }
@supports selector(::view-transition-group-children(.x)) and (view-transition-group:contain) {
:root:active-view-transition-type(cds-attachments) [data-cds-composer-attachments-clip][data-cds-attachments-clipping] { view-transition-name: match-element; view-transition-class: cds-attachments-clip; view-transition-group: contain; }
:root:active-view-transition-type(cds-attachments)::view-transition-group(*.cds-attachments-clip) { animation-duration: 0.18s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
:root:active-view-transition-type(cds-attachments)::view-transition-group-children(*.cds-attachments-clip) { overflow: clip visible; }
}
@starting-style {
.cds-root [data-cds-composer-attachments]:has([data-cds-attachment]:not([data-cds-attachment-restored])) { opacity: 0; transform: translateY(-8px); }
.cds-root [data-cds-composer-attachments] [data-cds-attachment]:not([data-cds-attachment-restored]) { opacity: 0; transform: scale(0.92) translateY(4px); }
}
:root:active-view-transition-type(cds-attachments) { view-transition-name: none; }
:root:active-view-transition-type(cds-attachments)::view-transition-group(root) { animation-duration: 0s; }
:root:active-view-transition-type(cds-attachments)::view-transition-group(*.cds-attachment) { animation-duration: 0.18s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
@keyframes cds-attachment-out {
100% { opacity: 0; transform: scale(0.5); }
}
:root:active-view-transition-type(cds-attachments)::view-transition-old(*.cds-attachment):only-child { animation: 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s 1 normal forwards running cds-attachment-out; }
@media (prefers-reduced-motion: reduce) {
.cds-root [data-cds-composer-attachments]:has([data-cds-attachment]), .cds-root [data-cds-composer-attachments] [data-cds-attachment] { transition: none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds-composer-attachments]:has([data-cds-attachment]), .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) [data-cds-composer-attachments] [data-cds-attachment] { transition: none; }
.cds-root :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] { max-width: min(100%, 480px); }
.cds-root :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] [data-cds-tile-media] { width: 120px; height: 120px; }
.cds-root :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] [data-cds-tile-picture] { object-fit: contain; width: 100%; height: 100%; }
.cds-root :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]:not([data-cds-composer-attachments] *) [data-cds-tile-media]:has([data-cds-tile-picture][data-loaded]) { width: auto; min-width: 120px; height: auto; min-height: 120px; }
.cds-root :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]:not([data-cds-composer-attachments] *) [data-cds-tile-picture][data-loaded] { width: auto; max-width: 100%; height: auto; max-height: 320px; }
.cds-root [data-cds="MessageAttachments"][data-thumbnail-height] :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] { max-width: min(100%, 288px); }
.cds-root [data-cds="MessageAttachments"][data-thumbnail-height] :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]:not([data-cds-composer-attachments] *) [data-cds-tile-media]:has([data-cds-tile-picture][data-loaded]) { min-width: 80px; }
.cds-root [data-cds="MessageAttachments"][data-thumbnail-height] :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]:not([data-cds-composer-attachments] *) [data-cds-tile-picture][data-loaded] { max-height: 120px; }
.cds-root [data-cds="MessageAttachments"][data-fit="natural"]:not([data-cds-composer-attachments] *):not([data-thumbnail-height]):has(> :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] ~ :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]) > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"], .cds-root [data-cds="MessageAttachments"][data-fit="natural"]:not([data-cds-composer-attachments] *):not([data-thumbnail-height]):has(> * > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] ~ :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]) > * > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] { max-width: min(100%, 240px, calc(50% - var(--cds-gap-xs) / 2)); }
.cds-root [data-cds="MessageAttachments"][data-fit="natural"]:not([data-cds-composer-attachments] *):not([data-thumbnail-height]):has(> :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] ~ :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]) > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] [data-cds-tile-picture][data-loaded], .cds-root [data-cds="MessageAttachments"][data-fit="natural"]:not([data-cds-composer-attachments] *):not([data-thumbnail-height]):has(> * > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] ~ :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"]) > * > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] [data-cds-tile-picture][data-loaded] { max-height: 160px; }
.cds-root [data-cds="MessageAttachments"][data-fit="natural"][data-natural-tiles]:not([data-cds-composer-attachments] *) { margin-top: calc(-1 * var(--cds-gap-xs)); reading-flow: flex-visual; row-gap: 0px; }
.cds-root [data-cds="MessageAttachments"][data-fit="natural"][data-natural-tiles]:not([data-cds-composer-attachments] *) > *, .cds-root [data-cds="MessageAttachments"][data-fit="natural"][data-natural-tiles]:not([data-cds-composer-attachments] *) > * > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"], [data-cds="MessageAttachmentsFile"], [data-cds="MessageAttachmentsQuote"]) { margin-top: var(--cds-gap-xs); }
.cds-root [data-cds="MessageAttachments"][data-fit="natural"]:not([data-cds-composer-attachments] *) > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"], .cds-root [data-cds="MessageAttachments"][data-fit="natural"]:not([data-cds-composer-attachments] *) > * > :is([data-cds="MessageAttachmentsImage"], [data-cds="MessageAttachmentsVideo"])[data-fit="natural"] { order: -2; }
.cds-root [data-cds="MessageAttachments"][data-fit="natural"][data-natural-tiles]:not([data-cds-composer-attachments] *)::after { content: ""; flex: 0 0 100%; order: -1; height: 0px; }
@property --cds-badge-x-wght { syntax: "<number>"; inherits: true; initial-value: 577.8; }
@layer cds-card {
.cds-root [data-cds="Card"] > .cds-card-fill { background-color: var(--cds-surface-1); }
.cds-root [data-cds="Card"]:has([data-cds="CardLink"]):hover > .cds-card-fill { background-color: var(--cds-surface-2); }
:where(.cds-root [data-cds="Card"]:has([data-cds="CardLink"])) :where(a, button, input, select, textarea, label, summary, iframe, [role="button"], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex^="-"])):where(:not([data-cds="CardLink"], [data-cds="CardLink"] *)) { z-index: 1; position: relative; }
:where(.cds-root) :where([data-cds="CardLink"]:focus-visible)::after { outline-offset: -2px; outline: rgba(0, 0, 0, 0) solid 2px; }
:where(.cds-root [data-cds-row]) :where(a, button, input, select, textarea, label, summary, iframe, [role="button"], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex^="-"])):where(:not([data-cds-row-toggle], [data-cds-row-navigate])), :where(.cds-root [data-cds-option-row]) :where(a, button, input, select, textarea, label, summary, iframe, [role="button"], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex^="-"])):where(:not([data-cds-option])) { z-index: 1; position: relative; }
:where(.cds-root [data-cds-row] [data-cds-row-cut]) :where(a, button, input, select, textarea, label, summary, iframe, [role="button"], [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex^="-"])) { pointer-events: auto; }
@media (hover: hover) {
:where(.cds-root) [data-cds-open-text][data-cds-line-hot] { cursor: var(--cds-cursor-interactive); }
:where(.cds-root) [data-cds-open-text][data-cds-line-hot] [data-cds-first-line]::first-line { color: var(--cds-text-primary); }
}
:where(.cds-root) :where([data-cds-row-toggle]:focus-visible, [data-cds-row-navigate]:focus-visible)::after { outline-offset: -2px; outline: rgba(0, 0, 0, 0) solid 2px; }
}
.cds-root [data-cds-collapsing] { display: contents; }
.cds-root [data-cds-part="compact-name"] [data-cds-part="menu-caret"] { display: none; }
.cds-root .cds-resolve-square { fill: var(--cds-fill-accent); stroke: var(--cds-fill-accent); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 52; stroke-dashoffset: 0; fill-opacity: 1; animation: cds-resolve-square calc(2 * var(--cds-dur-snap)) linear both; }
.cds-root .cds-resolve-check { color: var(--cds-on-accent); animation: cds-resolve-glyph calc(2 * var(--cds-dur-snap)) linear both; }
.cds-root [data-cds-part="resolve"][data-resolving="true"] [data-cds-part="paint"] { background-color: rgba(0, 0, 0, 0); }
@keyframes cds-resolve-square {
0% { stroke-dashoffset: 52px; fill-opacity: 0; }
50% { stroke-dashoffset: 0; fill-opacity: 0; }
100% { stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes cds-resolve-glyph {
0%, 74.9% { color: inherit; }
75%, 100% { color: var(--cds-on-accent); }
}
@media (prefers-reduced-motion: reduce) {
.cds-root .cds-resolve-square, .cds-root .cds-resolve-check { animation: auto ease 0s 1 normal none running none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-resolve-square, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-resolve-check { animation: auto ease 0s 1 normal none running none; }
.cds-root .cds-pill-in-own { animation: cds-pill-in var(--cds-dur-base) var(--cds-ease-overshoot), cds-fade-in var(--cds-dur-base) var(--cds-ease-out); }
.cds-root .cds-pill-in-quiet { animation: cds-pill-in var(--cds-dur-snap) var(--cds-ease-overshoot), cds-fade-in var(--cds-dur-snap) var(--cds-ease-out); }
.cds-root .cds-pill-pop { animation: cds-pill-pop-up calc(var(--cds-dur-base) * .4) var(--cds-ease-out), cds-pill-pop-down calc(var(--cds-dur-base) * .6) var(--cds-ease-overshoot) calc(var(--cds-dur-base) * .4); }
.cds-root .cds-pill-dip { animation: cds-pill-dip-down calc((var(--cds-dur-snap) + 40ms) / 2) var(--cds-ease-out), cds-pill-dip-up calc((var(--cds-dur-snap) + 40ms) / 2) var(--cds-ease-out) calc((var(--cds-dur-snap) + 40ms) / 2); }
.cds-root .cds-pill-roll-in-up { animation: cds-pill-roll-in-up var(--cds-dur-base) var(--cds-ease-out); }
.cds-root .cds-pill-roll-in-down { animation: cds-pill-roll-in-down var(--cds-dur-base) var(--cds-ease-out); }
.cds-root .cds-pill-roll-out-up::before, .cds-root .cds-pill-roll-out-down::before { content: attr(data-cds-roll-from); opacity: 0; animation: cds-pill-roll-out var(--cds-dur-base) var(--cds-ease-out); inset-inline-start: 0px; position: absolute; top: 0px; }
.cds-root .cds-pill-roll-out-up::before { transform: translateY(-70%); }
.cds-root .cds-pill-roll-out-down::before { transform: translateY(70%); }
.cds-root .cds-pill-out { opacity: 0; animation: cds-pill-out var(--cds-dur-snap) var(--cds-ease-out); transform: scale(0.8); }
@keyframes cds-pill-in {
0% { transform: scale(0.8); }
}
@keyframes cds-pill-pop-up {
100% { transform: scale(1.32); }
}
@keyframes cds-pill-pop-down {
0% { transform: scale(1.32); }
}
@keyframes cds-pill-dip-down {
100% { transform: scale(0.82); }
}
@keyframes cds-pill-dip-up {
0% { transform: scale(0.82); }
}
@keyframes cds-pill-roll-in-up {
0% { opacity: 0; transform: translateY(70%); }
}
@keyframes cds-pill-roll-in-down {
0% { opacity: 0; transform: translateY(-70%); }
}
@keyframes cds-pill-roll-out {
0% { opacity: 1; transform: none; }
}
@keyframes cds-pill-out {
0% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.cds-root .cds-pill-in-own, .cds-root .cds-pill-in-quiet, .cds-root .cds-pill-pop, .cds-root .cds-pill-dip, .cds-root .cds-pill-roll-in-up, .cds-root .cds-pill-roll-in-down, .cds-root .cds-pill-roll-out-up::before, .cds-root .cds-pill-roll-out-down::before, .cds-root .cds-pill-out { animation: auto ease 0s 1 normal none running none; }
}
.cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-in-own, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-in-quiet, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-pop, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-dip, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-roll-in-up, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-roll-in-down, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-roll-out-up::before, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-roll-out-down::before, .cds-root:where([data-reduce-motion="true"], [data-reduce-motion="true"] *) .cds-pill-out { animation: auto ease 0s 1 normal none running none; }
@media screen {
.cds-root[data-window-active="false"], [data-window-active="false"] .cds-root { --cds-role-accent-50: var(--cds-gray-50); --cds-role-accent-100: var(--cds-gray-100); --cds-role-accent-250: var(--cds-gray-250); --cds-role-accent-300: var(--cds-gray-300); --cds-role-accent-400: var(--cds-gray-400); --cds-role-accent-450: var(--cds-gray-450); --cds-role-accent-600: var(--cds-gray-600); --cds-role-accent-700: var(--cds-gray-700); --cds-role-accent-800: var(--cds-gray-750); --cds-role-accent-850: var(--cds-gray-800); --cds-role-accent-fill: var(--cds-role-accent-450); --cds-role-accent-fill-hover: var(--cds-role-accent-400); }
[data-window-active="false"] :is([data-cds="Button"], [data-cds="ButtonGroup"], [data-cds="SplitDropdownButton"]) { --cds-fill-brand: var(--cds-gray-450); --cds-fill-brand-hover: var(--cds-gray-400); --cds-fill-primary: var(--cds-gray-450); --cds-fill-primary-hover: var(--cds-gray-400); }
[data-window-active="false"] [data-cds]:not(:where([data-cds-theme], [data-cds-theme] *)) { --cds-fill-accent-hover: var(--cds-role-accent-fill-hover); }
}
@property --cds-outset-x { syntax: "<length-percentage>"; inherits: false; initial-value: 0; }
@property --cds-outset-y { syntax: "<length-percentage>"; inherits: false; initial-value: 0; }
:root { --cds-radius: .25rem; --cds-border: currentColor; --cds-shadow-sm: 0 1px 2px 0 #0000000d; --cds-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --cds-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --cds-shadow-drop-ring: inset 0 0 0 2px var(--cds-role-accent-fill); --cds-shadow-drop-ring-danger: inset 0 0 0 2px var(--cds-role-danger-fill); --cds-shadow-drop-glow: inset 0 0 24px -2px hsl(from var(--cds-role-accent-fill) h s l / 20%); --cds-shadow-drop-glow-danger: inset 0 0 24px -2px hsl(from var(--cds-role-danger-fill) h s l / 20%); --cds-font-mono: var(--cds-font-mono-override,) ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --cds-font-mono-ui: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --cds-font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif; --cds-font-sans: var(--cds-font-system); --cds-font-sans-display: var(--cds-font-sans); --cds-ease-out: cubic-bezier(0, 0, .2, 1); --cds-black: #000; --cds-oncolor-200: #f8f8f7bf; --cds-oncolor-300: #f8f8f780; --cds-clay: #d97757; --cds-clay-emphasized: #c6613f; --cds-heather: #cbcadb; --cds-plum: #827dbd; --cds-cactus: #bcd1ca; --cds-mineral: #629987; --cds-pictogram-highlight-default: var(--cds-gray-80); --cds-pictogram-highlight-heather: var(--cds-heather); --cds-pictogram-highlight-cactus: var(--cds-cactus); --cds-font-weight-regular: 400; --cds-font-weight-medium: 500; --cds-font-weight-semibold: 580; --cds-font-weight-bold: 600; --cds-font-grad-semibold: 180; --cds-font-grad-bold: 200; --cds-opacity-icon-secondary: .4; }
@media screen {
[data-mode="dark"] { --cds-pictogram-highlight-default: var(--cds-gray-650); --cds-pictogram-highlight-heather: var(--cds-plum); --cds-pictogram-highlight-cactus: var(--cds-mineral); }
}
@media screen and (prefers-color-scheme: dark) {
:root:not([data-mode="light"]) { --cds-pictogram-highlight-default: var(--cds-gray-650); --cds-pictogram-highlight-heather: var(--cds-plum); --cds-pictogram-highlight-cactus: var(--cds-mineral); }
}
:where(:root, :host) { --cds-theme-api: 1; --cds-gray-0: #fff; --cds-gray-10: #fcfcfb; --cds-gray-20: #f9f9f7; --cds-gray-30: #f6f6f4; --cds-gray-40: #f3f3f0; --cds-gray-50: #f0efec; --cds-gray-60: #edece8; --cds-gray-70: #eae9e4; --cds-gray-80: #e7e6e1; --cds-gray-90: #e4e3dd; --cds-gray-100: #e1e0d9; --cds-gray-150: #d2d1c7; --cds-gray-200: #c3c2b7; --cds-gray-250: #b4b3a8; --cds-gray-300: #a5a49a; --cds-gray-350: #97958d; --cds-gray-400: #898781; --cds-gray-450: #7b7974; --cds-gray-500: #6d6b67; --cds-gray-550: #5f5e5a; --cds-gray-600: #52514e; --cds-gray-650: #454442; --cds-gray-700: #383835; --cds-gray-750: #2c2c2a; --cds-gray-800: #20201f; --cds-gray-810: #1e1e1d; --cds-gray-820: #1c1c1b; --cds-gray-830: #1a1a19; --cds-gray-840: #181817; --cds-gray-850: #151515; --cds-gray-860: #131313; --cds-gray-870: #111; --cds-gray-880: #0f0f0f; --cds-gray-890: #0d0d0d; --cds-gray-900: #0b0b0b; --cds-red-0: #fff; --cds-red-10: #fffbfb; --cds-red-20: #fef7f7; --cds-red-30: #fef3f3; --cds-red-40: #fdefef; --cds-red-50: #fbebeb; --cds-red-60: #fae7e7; --cds-red-70: #fae3e3; --cds-red-80: #fadfdf; --cds-red-90: #fadada; --cds-red-100: #fad6d6; --cds-red-150: #f7c1c1; --cds-red-200: #f4abab; --cds-red-250: #f09595; --cds-red-300: #ec7e7e; --cds-red-350: #e66767; --cds-red-400: #e34948; --cds-red-450: #d03b3b; --cds-red-500: #b93535; --cds-red-550: #a32c2c; --cds-red-600: #8e2626; --cds-red-650: #791e1e; --cds-red-700: #641919; --cds-red-750: #511212; --cds-red-800: #3c0e0e; --cds-red-810: #380d0d; --cds-red-820: #340c0c; --cds-red-830: #310b0b; --cds-red-840: #2d0a0a; --cds-red-850: #280a0a; --cds-red-860: #230b0a; --cds-red-870: #1d0b0a; --cds-red-880: #170c0b; --cds-red-890: #110c0b; --cds-red-900: #0b0b0b; --cds-orange-0: #fff; --cds-orange-10: #fefbfa; --cds-orange-20: #fdf7f5; --cds-orange-30: #fcf4f0; --cds-orange-40: #faf0ec; --cds-orange-50: #f9ece7; --cds-orange-60: #f8e9e2; --cds-orange-70: #f7e5dd; --cds-orange-80: #f7e1d7; --cds-orange-90: #f7dcd1; --cds-orange-100: #f7d8cb; --cds-orange-150: #f3c5b2; --cds-orange-200: #f4ae94; --cds-orange-250: #f09978; --cds-orange-300: #ec835a; --cds-orange-350: #eb6834; --cds-orange-400: #d95926; --cds-orange-450: #c25124; --cds-orange-500: #ae461c; --cds-orange-550: #993d19; --cds-orange-600: #863311; --cds-orange-650: #712b0f; --cds-orange-700: #5d230b; --cds-orange-750: #4b1b08; --cds-orange-800: #371407; --cds-orange-810: #341307; --cds-orange-820: #301106; --cds-orange-830: #2d1006; --cds-orange-840: #290f06; --cds-orange-850: #240e07; --cds-orange-860: #1f0e08; --cds-orange-870: #1a0e09; --cds-orange-880: #150d0a; --cds-orange-890: #100c0b; --cds-orange-900: #0b0b0b; --cds-yellow-0: #fff; --cds-yellow-10: #fefcf8; --cds-yellow-20: #fcf8f1; --cds-yellow-30: #fbf5ea; --cds-yellow-40: #f9f2e4; --cds-yellow-50: #f9eeda; --cds-yellow-60: #faebce; --cds-yellow-70: #fae7c2; --cds-yellow-80: #fae3b8; --cds-yellow-90: #f9e0b0; --cds-yellow-100: #f9dca4; --cds-yellow-150: #f9c868; --cds-yellow-200: #fab219; --cds-yellow-250: #eda100; --cds-yellow-300: #db9300; --cds-yellow-350: #c98500; --cds-yellow-400: #b77700; --cds-yellow-450: #a66a00; --cds-yellow-500: #945d00; --cds-yellow-550: #835100; --cds-yellow-600: #734500; --cds-yellow-650: #623900; --cds-yellow-700: #512e00; --cds-yellow-750: #412400; --cds-yellow-800: #311a00; --cds-yellow-810: #2e1800; --cds-yellow-820: #2b1700; --cds-yellow-830: #271500; --cds-yellow-840: #231402; --cds-yellow-850: #1f1204; --cds-yellow-860: #1b1106; --cds-yellow-870: #171007; --cds-yellow-880: #130e09; --cds-yellow-890: #0f0d0a; --cds-yellow-900: #0b0b0b; --cds-green-0: #fff; --cds-green-10: #fafdfa; --cds-green-20: #f5fbf4; --cds-green-30: #f0f9ef; --cds-green-40: #ebf7e9; --cds-green-50: #e5f4e4; --cds-green-60: #e0f2de; --cds-green-70: #dbf0d8; --cds-green-80: #d5eed3; --cds-green-90: #d0eccd; --cds-green-100: #caeac7; --cds-green-150: #aee0a9; --cds-green-200: #91d68b; --cds-green-250: #73cb6d; --cds-green-300: #55bf50; --cds-green-350: #35b231; --cds-green-400: #0ca30c; --cds-green-450: #009300; --cds-green-500: #008300; --cds-green-550: #007300; --cds-green-600: #006300; --cds-green-650: #005400; --cds-green-700: #074506; --cds-green-750: #0f350d; --cds-green-800: #11260f; --cds-green-810: #10230f; --cds-green-820: #10210f; --cds-green-830: #101e0f; --cds-green-840: #101b0f; --cds-green-850: #0f180e; --cds-green-860: #0e160e; --cds-green-870: #0e130d; --cds-green-880: #0d100d; --cds-green-890: #0c0e0c; --cds-green-900: #0b0b0b; --cds-aqua-0: #fff; --cds-aqua-10: #f9fdfb; --cds-aqua-20: #f3fbf8; --cds-aqua-30: #edf9f4; --cds-aqua-40: #e8f7f1; --cds-aqua-50: #e2f4ed; --cds-aqua-60: #dcf2ea; --cds-aqua-70: #d5f0e6; --cds-aqua-80: #ceefe2; --cds-aqua-90: #c7eddf; --cds-aqua-100: #bfebdb; --cds-aqua-150: #a0e1c9; --cds-aqua-200: #7ad7b4; --cds-aqua-250: #5acba0; --cds-aqua-300: #3bbd8c; --cds-aqua-350: #1baf7a; --cds-aqua-400: #199e70; --cds-aqua-450: #138e65; --cds-aqua-500: #0f7e5c; --cds-aqua-550: #0e6e53; --cds-aqua-600: #065f49; --cds-aqua-650: #095040; --cds-aqua-700: #034235; --cds-aqua-750: #02342b; --cds-aqua-800: #022720; --cds-aqua-810: #02241e; --cds-aqua-820: #02221c; --cds-aqua-830: #021f1a; --cds-aqua-840: #031c18; --cds-aqua-850: #051a16; --cds-aqua-860: #071713; --cds-aqua-870: #081411; --cds-aqua-880: #0a110f; --cds-aqua-890: #0b0e0d; --cds-aqua-900: #0b0b0b; --cds-blue-0: #fff; --cds-blue-10: #fafcff; --cds-blue-20: #f5f9fe; --cds-blue-30: #f0f7fe; --cds-blue-40: #ebf4fc; --cds-blue-50: #e7f1fb; --cds-blue-60: #e2eefa; --cds-blue-70: #ddebfa; --cds-blue-80: #d7e8fa; --cds-blue-90: #d2e5fa; --cds-blue-100: #cde2fb; --cds-blue-150: #b7d3f6; --cds-blue-200: #9ec5f4; --cds-blue-250: #86b6ef; --cds-blue-300: #6da7ec; --cds-blue-350: #5598e7; --cds-blue-400: #3987e5; --cds-blue-450: #2a78d6; --cds-blue-500: #256abf; --cds-blue-550: #1c5cab; --cds-blue-600: #184f95; --cds-blue-650: #104281; --cds-blue-700: #0d366b; --cds-blue-750: #062b57; --cds-blue-800: #032042; --cds-blue-810: #031e3d; --cds-blue-820: #021c39; --cds-blue-830: #021a36; --cds-blue-840: #021831; --cds-blue-850: #03162c; --cds-blue-860: #051426; --cds-blue-870: #07121f; --cds-blue-880: #091018; --cds-blue-890: #0a0d11; --cds-blue-900: #0b0b0b; --cds-violet-0: #fff; --cds-violet-10: #fcfbff; --cds-violet-20: #f8f8ff; --cds-violet-30: #f5f4ff; --cds-violet-40: #f2f1ff; --cds-violet-50: #efedff; --cds-violet-60: #ebeafe; --cds-violet-70: #e8e6fe; --cds-violet-80: #e5e2fd; --cds-violet-90: #e2dffd; --cds-violet-100: #dfdbfd; --cds-violet-150: #cfcafb; --cds-violet-200: #bfb9f5; --cds-violet-250: #b0a7f2; --cds-violet-300: #a096eb; --cds-violet-350: #9085e9; --cds-violet-400: #8173e3; --cds-violet-450: #7161e0; --cds-violet-500: #6250d6; --cds-violet-550: #5645be; --cds-violet-600: #4a3aa7; --cds-violet-650: #3e318e; --cds-violet-700: #322777; --cds-violet-750: #271e60; --cds-violet-800: #1d1649; --cds-violet-810: #1b1544; --cds-violet-820: #19133f; --cds-violet-830: #17123b; --cds-violet-840: #151036; --cds-violet-850: #130f32; --cds-violet-860: #110e2b; --cds-violet-870: #0f0e23; --cds-violet-880: #0e0d1b; --cds-violet-890: #0c0c13; --cds-violet-900: #0b0b0b; --cds-magenta-0: #fff; --cds-magenta-10: #fefbfc; --cds-magenta-20: #fef6f9; --cds-magenta-30: #fdf2f6; --cds-magenta-40: #fbeff3; --cds-magenta-50: #faebf0; --cds-magenta-60: #f9e6ed; --cds-magenta-70: #f9e2eb; --cds-magenta-80: #f9dee8; --cds-magenta-90: #f9d9e5; --cds-magenta-100: #f9d4e2; --cds-magenta-150: #f3c0d3; --cds-magenta-200: #f3a8c3; --cds-magenta-250: #ed93b4; --cds-magenta-300: #e87ba4; --cds-magenta-350: #e46191; --cds-magenta-400: #d55181; --cds-magenta-450: #c04873; --cds-magenta-500: #ad3d66; --cds-magenta-550: #993458; --cds-magenta-600: #862a4c; --cds-magenta-650: #722340; --cds-magenta-700: #5e1c34; --cds-magenta-750: #4c1429; --cds-magenta-800: #390f1f; --cds-magenta-810: #360d1c; --cds-magenta-820: #320c1a; --cds-magenta-830: #2f0b18; --cds-magenta-840: #2b0a16; --cds-magenta-850: #270a14; --cds-magenta-860: #220a12; --cds-magenta-870: #1c0b11; --cds-magenta-880: #170b0f; --cds-magenta-890: #110b0d; --cds-magenta-900: #0b0b0b; --cds-role-accent-50: var(--cds-blue-50); --cds-role-accent-100: var(--cds-blue-100); --cds-role-accent-250: var(--cds-blue-250); --cds-role-accent-300: var(--cds-blue-300); --cds-role-accent-400: var(--cds-blue-400); --cds-role-accent-450: var(--cds-blue-450); --cds-role-accent-600: var(--cds-blue-600); --cds-role-accent-700: var(--cds-blue-700); --cds-role-accent-800: var(--cds-blue-800); --cds-role-accent-850: var(--cds-blue-850); --cds-role-accent-fill: var(--cds-role-accent-450); --cds-role-accent-fill-hover: var(--cds-role-accent-400); --cds-role-accent-on: var(--cds-gray-0); --cds-role-danger-100: var(--cds-red-100); --cds-role-danger-250: var(--cds-red-250); --cds-role-danger-300: var(--cds-red-300); --cds-role-danger-400: var(--cds-red-400); --cds-role-danger-450: var(--cds-red-450); --cds-role-danger-600: var(--cds-red-600); --cds-role-danger-700: var(--cds-red-700); --cds-role-danger-800: var(--cds-red-800); --cds-role-danger-fill: var(--cds-role-danger-450); --cds-role-danger-fill-hover: var(--cds-role-danger-400); --cds-role-danger-on: var(--cds-gray-0); --cds-role-success-100: var(--cds-green-100); --cds-role-success-250: var(--cds-green-250); --cds-role-success-400: var(--cds-green-400); --cds-role-success-450: var(--cds-green-450); --cds-role-success-600: var(--cds-green-600); --cds-role-success-700: var(--cds-green-700); --cds-role-success-800: var(--cds-green-800); --cds-role-success-fill: var(--cds-role-success-450); --cds-role-success-fill-hover: var(--cds-role-success-400); --cds-role-success-on: var(--cds-gray-900); --cds-role-warning-100: var(--cds-yellow-100); --cds-role-warning-200: var(--cds-yellow-200); --cds-role-warning-250: var(--cds-yellow-250); --cds-role-warning-300: var(--cds-yellow-300); --cds-role-warning-600: var(--cds-yellow-600); --cds-role-warning-700: var(--cds-yellow-700); --cds-role-warning-800: var(--cds-yellow-800); --cds-role-warning-fill: var(--cds-role-warning-200); --cds-role-warning-fill-hover: var(--cds-role-warning-250); --cds-role-warning-on: var(--cds-gray-900); --cds-role-pro-100: var(--cds-violet-100); --cds-role-pro-250: var(--cds-violet-250); --cds-role-pro-300: var(--cds-violet-300); --cds-role-pro-400: var(--cds-violet-400); --cds-role-pro-450: var(--cds-violet-450); --cds-role-pro-600: var(--cds-violet-600); --cds-role-pro-700: var(--cds-violet-700); --cds-role-pro-800: var(--cds-violet-800); --cds-role-pro-fill: var(--cds-role-pro-450); --cds-role-pro-fill-hover: var(--cds-role-pro-400); --cds-role-pro-on: var(--cds-gray-0); --cds-role-tooltip-bg: var(--cds-gray-900); --cds-role-tooltip-fg: var(--cds-gray-0); }
:where(:root, :host, .cds-root[data-mode], [data-mode] .cds-root:not([data-mode])) { --cds-fill-git-added: #1a8633; --cds-fill-git-added-hover: #1e9b3b; --cds-fill-git-removed-hover: #de295f; --cds-fill-git-modified: #8b751c; --cds-fill-git-modified-hover: #a08720; --cds-fill-git-merged: #855fd6; --cds-fill-git-merged-hover: #9473db; --cds-fill-git-closed: #ed0b00; --cds-fill-git-closed-hover: #ff1307; --cds-fill-git-conflicting: #b85b19; --cds-fill-git-conflicting-hover: #c5621b; --cds-fill-git-draft-hover: gray; --cds-text-git-added: #1e9e3c; --cds-text-git-removed: #cd2054; --cds-text-git-modified: #98801f; --cds-text-git-merged: #8e6bd9; --cds-text-git-closed: #ff3a30; --cds-text-git-conflicting: #c5621b; --cds-text-git-draft: #737373; }
@media screen {
:where([data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"], .cds-dark-scope[data-mode="dark"]) { --cds-fill-git-added: var(--cds-text-git-added); --cds-fill-git-added-hover: #27c840; --cds-fill-git-removed-hover: #ff1342; --cds-fill-git-modified: var(--cds-text-git-modified); --cds-fill-git-modified-hover: #fac800; --cds-fill-git-merged: var(--cds-text-git-merged); --cds-fill-git-merged-hover: #a67dff; --cds-fill-git-closed: var(--cds-text-git-closed); --cds-fill-git-closed-hover: #ff4940; --cds-fill-git-conflicting: var(--cds-text-git-conflicting); --cds-fill-git-conflicting-hover: #f97a1f; --cds-fill-git-draft-hover: #999; --cds-text-git-added: #32d74b; --cds-text-git-removed: #ff2c56; --cds-text-git-modified: #ffd014; --cds-text-git-merged: #b796ff; --cds-text-git-closed: #ff6159; --cds-text-git-conflicting: #fa832e; --cds-text-git-draft: #a6a6a6; }
}
@media screen and (prefers-color-scheme: dark) {
:where([data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *)) { --cds-fill-git-added: var(--cds-text-git-added); --cds-fill-git-added-hover: #27c840; --cds-fill-git-removed-hover: #ff1342; --cds-fill-git-modified: var(--cds-text-git-modified); --cds-fill-git-modified-hover: #fac800; --cds-fill-git-merged: var(--cds-text-git-merged); --cds-fill-git-merged-hover: #a67dff; --cds-fill-git-closed: var(--cds-text-git-closed); --cds-fill-git-closed-hover: #ff4940; --cds-fill-git-conflicting: var(--cds-text-git-conflicting); --cds-fill-git-conflicting-hover: #f97a1f; --cds-fill-git-draft-hover: #999; --cds-text-git-added: #32d74b; --cds-text-git-removed: #ff2c56; --cds-text-git-modified: #ffd014; --cds-text-git-merged: #b796ff; --cds-text-git-closed: #ff6159; --cds-text-git-conflicting: #fa832e; --cds-text-git-draft: #a6a6a6; }
}
.cds-root { --cds-radius: calc(.375rem * var(--cds-rem-scale,1)); --cds-radius-composer: calc(.75rem * var(--cds-rem-scale,1)); --cds-h-control: calc(1.5rem * var(--cds-rem-scale,1)); --cds-h-control-nested: calc(1.125rem * var(--cds-rem-scale,1)); --cds-icon: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-xs: calc(.25rem * var(--cds-rem-scale,1)); --cds-pad-sm: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-md: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-lg: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-xl: calc(1.25rem * var(--cds-rem-scale,1)); --cds-gap-xs: calc(.375rem * var(--cds-rem-scale,1)); --cds-gap-sm: calc(.5rem * var(--cds-rem-scale,1)); --cds-gap-md: calc(.75rem * var(--cds-rem-scale,1)); --cds-gap-lg: calc(1.25rem * var(--cds-rem-scale,1)); --cds-gap-xl: calc(2rem * var(--cds-rem-scale,1)); --cds-border: var(--cds-alpha-2); --cds-border-line: initial; --cds-border-accent: var(--cds-role-accent-250); --cds-border-danger: var(--cds-role-danger-250); --cds-border-success: var(--cds-role-success-250); --cds-border-warning: var(--cds-role-warning-250); --cds-border-pro: var(--cds-role-pro-250); --cds-border-editor-comment: var(--cds-yellow-400); --cds-border-editor-comment-open: var(--cds-yellow-450); --cds-border-editor-comment-target: var(--cds-yellow-450); --cds-border-git-added: var(--cds-text-git-added); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-border-git-added: color-mix(in srgb, var(--cds-text-git-added) 40%, transparent); }
}
.cds-root { --cds-border-git-removed: var(--cds-text-git-removed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-border-git-removed: color-mix(in srgb, var(--cds-text-git-removed) 40%, transparent); }
}
.cds-root { --cds-border-git-modified: var(--cds-text-git-modified); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-border-git-modified: color-mix(in srgb, var(--cds-text-git-modified) 40%, transparent); }
}
.cds-root { --cds-border-git-merged: var(--cds-text-git-merged); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-border-git-merged: color-mix(in srgb, var(--cds-text-git-merged) 40%, transparent); }
}
.cds-root { --cds-border-git-closed: var(--cds-text-git-closed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-border-git-closed: color-mix(in srgb, var(--cds-text-git-closed) 40%, transparent); }
}
.cds-root { --cds-border-git-conflicting: var(--cds-text-git-conflicting); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-border-git-conflicting: color-mix(in srgb, var(--cds-text-git-conflicting) 40%, transparent); }
}
.cds-root { --cds-border-git-draft: var(--cds-text-git-draft); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-border-git-draft: color-mix(in srgb, var(--cds-text-git-draft) 40%, transparent); }
}
.cds-root { --cds-border-git-opened: var(--cds-border-git-added); --cds-border-git-queued: var(--cds-border-git-modified); --cds-border-strong: var(--cds-alpha-3); --cds-border-stronger: hsl(from var(--cds-neutral-900) h s l / 40%); --cds-shadow-sm: 0 1px 2px 0 hsl(from var(--cds-gray-900) h s l / 6%), 0 2px 8px 0 var(--cds-shadow-color); --cds-shadow-md: 0 2px 4px 0 hsl(from var(--cds-gray-900) h s l / 7%), 0 6px 16px 0 var(--cds-shadow-color); --cds-shadow-lg: 0 4px 8px 0 hsl(from var(--cds-gray-900) h s l / 8%), 0 12px 28px -2px var(--cds-shadow-color); --cds-shadow-color: hsl(from var(--cds-gray-900) h s l / 8%); --cds-shadow-popover: 0 8px 24px #0000001f, 0 2px 6px #00000014; --cds-shadow-drop-ring: inset 0 0 0 2px var(--cds-fill-accent); --cds-shadow-drop-ring-danger: inset 0 0 0 2px var(--cds-fill-danger); --cds-shadow-drop-glow: inset 0 0 24px -2px hsl(from var(--cds-fill-accent) h s l / 20%); --cds-shadow-drop-glow-danger: inset 0 0 24px -2px hsl(from var(--cds-fill-danger) h s l / 20%); --cds-ring-outer: 1px; --cds-ring-inner: 0px; --cds-ring-color: var(--cds-border); --cds-ring-hairline: 1px; --cds-focus-shadow: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-accent), 0 0 6px 1px var(--cds-bg-accent); --cds-focus-shadow-danger: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-danger), 0 0 6px 1px var(--cds-bg-danger); --cds-font-mono: var(--cds-font-mono-override,) var(--font-anthropic-mono,"SF Mono"), "SF Mono", ui-monospace, Menlo, Consolas, monospace; --cds-font-mono-ui: var(--font-anthropic-mono,"SF Mono"), "SF Mono", ui-monospace, Menlo, Consolas, monospace; --cds-font-sans: var(--font-anthropic-sans,var(--cds-font-system)), var(--cds-font-system); --cds-font-sans-display: var(--font-anthropic-sans-display,var(--cds-font-sans)), var(--cds-font-sans); --cds-font-voice: var(--font-anthropic-serif,ui-serif), ui-serif, Georgia, "Times New Roman", serif; --cds-ease-out: cubic-bezier(.165, .84, .44, 1); --cds-ease-snap: cubic-bezier(.32, .72, 0, 1); --cds-ease-overshoot: cubic-bezier(.34, 1.3, .64, 1); --cds-dur-fast: 60ms; --cds-dur-snap: .12s; --cds-dur-base: .2s; --cds-dur-sheet: .3s; --cds-dur-slow: .45s; --cds-btn-spring: linear(0, .2459, .6526, .9468, 1.0764, 1.0915, 1.0585, 1.0219, .9993, .9914, .9921, .9957, .9988, 1.0004, 1); --cds-clay: #d97757; --cds-clay-emphasized: #c6613f; --cds-heather: #cbcadb; --cds-plum: #827dbd; --cds-cactus: #bcd1ca; --cds-mineral: #629987; --cds-pictogram-highlight-default: var(--cds-gray-80); --cds-pictogram-highlight-heather: var(--cds-heather); --cds-pictogram-highlight-cactus: var(--cds-cactus); --cds-cursor-interactive: pointer; --cds-neutral-0: var(--cds-gray-0); --cds-neutral-10: var(--cds-gray-10); --cds-neutral-20: var(--cds-gray-20); --cds-neutral-30: var(--cds-gray-30); --cds-neutral-40: var(--cds-gray-40); --cds-neutral-50: var(--cds-gray-50); --cds-neutral-60: var(--cds-gray-60); --cds-neutral-70: var(--cds-gray-70); --cds-neutral-80: var(--cds-gray-80); --cds-neutral-90: var(--cds-gray-90); --cds-neutral-100: var(--cds-gray-100); --cds-neutral-150: var(--cds-gray-150); --cds-neutral-200: var(--cds-gray-200); --cds-neutral-250: var(--cds-gray-250); --cds-neutral-300: var(--cds-gray-300); --cds-neutral-350: var(--cds-gray-350); --cds-neutral-400: var(--cds-gray-400); --cds-neutral-450: var(--cds-gray-450); --cds-neutral-500: var(--cds-gray-500); --cds-neutral-550: var(--cds-gray-550); --cds-neutral-600: var(--cds-gray-600); --cds-neutral-650: var(--cds-gray-650); --cds-neutral-700: var(--cds-gray-700); --cds-neutral-750: var(--cds-gray-750); --cds-neutral-800: var(--cds-gray-800); --cds-neutral-810: var(--cds-gray-810); --cds-neutral-820: var(--cds-gray-820); --cds-neutral-830: var(--cds-gray-830); --cds-neutral-840: var(--cds-gray-840); --cds-neutral-850: var(--cds-gray-850); --cds-neutral-860: var(--cds-gray-860); --cds-neutral-870: var(--cds-gray-870); --cds-neutral-880: var(--cds-gray-880); --cds-neutral-890: var(--cds-gray-890); --cds-neutral-900: var(--cds-gray-900); --cds-alpha-0: hsl(from var(--cds-neutral-900) h s l / 0%); --cds-alpha-1: hsl(from var(--cds-neutral-900) h s l / 5%); --cds-alpha-2: hsl(from var(--cds-neutral-900) h s l / 10%); --cds-alpha-3: hsl(from var(--cds-neutral-900) h s l / 20%); --cds-alpha-4: hsl(from var(--cds-neutral-900) h s l / 35%); --cds-alpha-5: hsl(from var(--cds-neutral-900) h s l / 50%); --cds-alpha-6: hsl(from var(--cds-neutral-900) h s l / 60%); --cds-alpha-7: hsl(from var(--cds-neutral-900) h s l / 70%); --cds-alpha-8: hsl(from var(--cds-neutral-900) h s l / 85%); --cds-alpha-9: hsl(from var(--cds-neutral-900) h s l / 95%); --cds-surface-0: var(--cds-gray-20); --cds-surface-1: var(--cds-gray-10); --cds-surface-2: var(--cds-gray-0); --cds-surface-3: var(--cds-gray-0); --cds-surface-popover: var(--cds-surface-3); --cds-surface-panel: var(--cds-surface-2); --cds-page-bg: var(--cds-surface-0); --cds-fill-accent: var(--cds-role-accent-fill); --cds-fill-accent-hover: var(--cds-role-accent-fill-hover); --cds-fill-danger: var(--cds-role-danger-fill); --cds-fill-danger-hover: var(--cds-role-danger-fill-hover); --cds-fill-success: var(--cds-role-success-fill); --cds-fill-success-hover: var(--cds-role-success-fill-hover); --cds-fill-warning: var(--cds-role-warning-fill); --cds-fill-warning-hover: var(--cds-role-warning-fill-hover); --cds-fill-pro: var(--cds-role-pro-fill); --cds-fill-pro-hover: var(--cds-role-pro-fill-hover); --cds-fill-git-removed: var(--cds-text-git-removed); --cds-fill-git-draft: var(--cds-text-git-draft); --cds-fill-git-opened: var(--cds-fill-git-added); --cds-fill-git-opened-hover: var(--cds-fill-git-added-hover); --cds-fill-git-queued: var(--cds-fill-git-modified); --cds-fill-git-queued-hover: var(--cds-fill-git-modified-hover); --cds-fill-brand: var(--cds-clay-emphasized); --cds-fill-brand-hover: var(--cds-clay); --cds-fill-primary: var(--cds-neutral-900); --cds-fill-primary-hover: var(--cds-neutral-750); --cds-fill-primary-layer: initial; --cds-fill-secondary: #ffffff1a; --cds-fill-secondary-hover: var(--cds-alpha-1); --cds-fill-secondary-layer: initial; --cds-fill-secondary-ring: var(--cds-border); --cds-fill-secondary-pressed-ring: var(--cds-border); --cds-fill-field: #ffffff80; --cds-fill-field-ring: var(--cds-border); --cds-fill-tint-red: initial; --cds-fill-tint-orange: initial; --cds-fill-tint-yellow: initial; --cds-fill-tint-green: initial; --cds-fill-tint-aqua: initial; --cds-fill-tint-blue: initial; --cds-fill-tint-violet: initial; --cds-fill-tint-magenta: initial; --cds-fill-ghost-hover: var(--cds-alpha-1); --cds-fill-ghost-selected: var(--cds-alpha-2); --cds-fill-button-ghost-hover: initial; --cds-fill-button-layer: initial; --cds-fill-disabled: var(--cds-alpha-1); --cds-fill-control: var(--cds-alpha-2); --cds-fill-control-hover: var(--cds-alpha-3); --cds-bg-accent: var(--cds-role-accent-100); --cds-bg-accent-chip: var(--cds-bg-accent); --cds-bg-accent-muted: var(--cds-fill-accent); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-accent-muted: color-mix(in srgb, var(--cds-fill-accent) 10%, transparent); }
}
.cds-root { --cds-bg-accent-layer: initial; --cds-bg-danger: var(--cds-role-danger-100); --cds-bg-danger-chip: var(--cds-bg-danger); --cds-bg-danger-layer: initial; --cds-bg-success: var(--cds-role-success-100); --cds-bg-success-chip: var(--cds-bg-success); --cds-bg-warning: var(--cds-role-warning-100); --cds-bg-warning-chip: var(--cds-bg-warning); --cds-bg-pro: var(--cds-role-pro-100); --cds-bg-pro-chip: var(--cds-bg-pro); --cds-bg-tint-red: rgb(from var(--cds-red-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-red-opaque: var(--cds-red-100); --cds-bg-tint-orange: rgb(from var(--cds-orange-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-orange-opaque: var(--cds-orange-100); --cds-bg-tint-yellow: rgb(from var(--cds-yellow-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-yellow-opaque: var(--cds-yellow-100); --cds-bg-tint-green: rgb(from var(--cds-green-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-green-opaque: var(--cds-green-100); --cds-bg-tint-aqua: rgb(from var(--cds-aqua-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-aqua-opaque: var(--cds-aqua-100); --cds-bg-tint-blue: rgb(from var(--cds-blue-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-blue-opaque: var(--cds-blue-100); --cds-bg-tint-violet: rgb(from var(--cds-violet-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-violet-opaque: var(--cds-violet-100); --cds-bg-tint-magenta: rgb(from var(--cds-magenta-100) calc((r - 163.8) / .35) calc((g - 163.8) / .35) calc((b - 163.15) / .35) / 35%); --cds-bg-tint-magenta-opaque: var(--cds-magenta-100); --cds-bg-git-added: var(--cds-text-git-added); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-git-added: color-mix(in srgb, var(--cds-text-git-added) 20%, transparent); }
}
.cds-root { --cds-bg-git-removed: var(--cds-text-git-removed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-git-removed: color-mix(in srgb, var(--cds-text-git-removed) 20%, transparent); }
}
.cds-root { --cds-bg-git-modified: var(--cds-text-git-modified); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-git-modified: color-mix(in srgb, var(--cds-text-git-modified) 20%, transparent); }
}
.cds-root { --cds-bg-git-merged: var(--cds-text-git-merged); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-git-merged: color-mix(in srgb, var(--cds-text-git-merged) 20%, transparent); }
}
.cds-root { --cds-bg-git-closed: var(--cds-text-git-closed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-git-closed: color-mix(in srgb, var(--cds-text-git-closed) 20%, transparent); }
}
.cds-root { --cds-bg-git-conflicting: var(--cds-text-git-conflicting); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-git-conflicting: color-mix(in srgb, var(--cds-text-git-conflicting) 20%, transparent); }
}
.cds-root { --cds-bg-git-draft: var(--cds-text-git-draft); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-git-draft: color-mix(in srgb, var(--cds-text-git-draft) 20%, transparent); }
}
.cds-root { --cds-bg-git-opened: var(--cds-bg-git-added); --cds-bg-git-queued: var(--cds-bg-git-modified); --cds-bg-highlight: var(--cds-fill-warning); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-highlight: color-mix(in srgb, var(--cds-fill-warning) 33%, transparent); }
}
.cds-root { --cds-bg-editor-canvas: var(--cds-neutral-60); --cds-bg-editor-claude-pending: var(--cds-clay); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-claude-pending: color-mix(in srgb, var(--cds-clay) 22%, transparent); }
}
.cds-root { --cds-bg-editor-highlight-yellow: var(--cds-bg-highlight); --cds-bg-editor-highlight-green: var(--cds-green-300); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-highlight-green: color-mix(in srgb, var(--cds-green-300) 33%, transparent); }
}
.cds-root { --cds-bg-editor-highlight-blue: var(--cds-blue-300); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-highlight-blue: color-mix(in srgb, var(--cds-blue-300) 33%, transparent); }
}
.cds-root { --cds-bg-editor-highlight-magenta: var(--cds-magenta-300); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-highlight-magenta: color-mix(in srgb, var(--cds-magenta-300) 33%, transparent); }
}
.cds-root { --cds-bg-editor-highlight-violet: var(--cds-violet-300); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-highlight-violet: color-mix(in srgb, var(--cds-violet-300) 33%, transparent); }
}
.cds-root { --cds-bg-editor-highlight-gray: var(--cds-gray-300); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-highlight-gray: color-mix(in srgb, var(--cds-gray-300) 33%, transparent); }
}
.cds-root { --cds-bg-editor-collaborator-1: var(--cds-editor-collaborator-1); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-collaborator-1: color-mix(in srgb, var(--cds-editor-collaborator-1) 22%, transparent); }
}
.cds-root { --cds-bg-editor-collaborator-2: var(--cds-editor-collaborator-2); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-collaborator-2: color-mix(in srgb, var(--cds-editor-collaborator-2) 22%, transparent); }
}
.cds-root { --cds-bg-editor-collaborator-3: var(--cds-editor-collaborator-3); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-collaborator-3: color-mix(in srgb, var(--cds-editor-collaborator-3) 22%, transparent); }
}
.cds-root { --cds-bg-editor-collaborator-4: var(--cds-editor-collaborator-4); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-collaborator-4: color-mix(in srgb, var(--cds-editor-collaborator-4) 22%, transparent); }
}
.cds-root { --cds-bg-editor-collaborator-5: var(--cds-editor-collaborator-5); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-collaborator-5: color-mix(in srgb, var(--cds-editor-collaborator-5) 22%, transparent); }
}
.cds-root { --cds-bg-editor-collaborator-6: var(--cds-editor-collaborator-6); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-collaborator-6: color-mix(in srgb, var(--cds-editor-collaborator-6) 22%, transparent); }
}
.cds-root { --cds-bg-editor-comment: var(--cds-fill-warning); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-comment: color-mix(in srgb, var(--cds-fill-warning) 20%, transparent); }
}
.cds-root { --cds-bg-editor-comment-active: var(--cds-fill-warning); }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-bg-editor-comment-active: color-mix(in srgb, var(--cds-fill-warning) 45%, transparent); }
}
.cds-root { --cds-bg-neutral: var(--cds-alpha-1); --cds-bg-neutral-hover: var(--cds-alpha-2); --cds-bg-neutral-chip: var(--cds-bg-neutral); --cds-bg-neutral-chip-hover: var(--cds-bg-neutral-hover); --cds-bg-user-message: var(--cds-bg-neutral); --cds-bg-user-message-personal: var(--cds-bg-tint-blue); --cds-backdrop: #0006; --cds-text-accent: var(--cds-role-accent-600); --cds-text-danger: var(--cds-role-danger-600); --cds-text-success: var(--cds-role-success-600); --cds-text-warning: var(--cds-role-warning-600); --cds-text-pro: var(--cds-role-pro-600); --cds-text-tint-red: var(--cds-red-600); --cds-text-tint-orange: var(--cds-orange-600); --cds-text-tint-yellow: var(--cds-yellow-600); --cds-text-tint-green: var(--cds-green-600); --cds-text-tint-aqua: var(--cds-aqua-600); --cds-text-tint-blue: var(--cds-blue-600); --cds-text-tint-violet: var(--cds-violet-600); --cds-text-tint-magenta: var(--cds-magenta-600); --cds-text-user-message-personal: var(--cds-text-tint-blue); --cds-text-git-opened: var(--cds-text-git-added); --cds-text-git-queued: var(--cds-text-git-modified); --cds-text-primary: var(--cds-neutral-900); --cds-text-secondary: var(--cds-neutral-600); --cds-text-muted: var(--cds-neutral-400); --cds-text-stays-secondary: initial; --cds-text-disabled: var(--cds-alpha-4); --cds-text-button-disabled: initial; --cds-font-size-caption: calc(.6875rem * var(--cds-rem-scale,1)); --cds-font-size-footnote: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-code: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-body: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-prose: .875rem; --cds-font-size-heading: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-title: calc(1.25rem * var(--cds-rem-scale,1)); --cds-font-weight-regular: 400; --cds-font-weight-medium: 500; --cds-font-weight-semibold: 580; --cds-font-weight-bold: 600; --cds-font-weight-body: initial; --cds-font-weight-control: initial; --cds-font-weight-header: initial; --cds-font-weight-badge: initial; --cds-font-wght-regular: normal; --cds-font-wght-medium: normal; --cds-font-wght-semibold: normal; --cds-font-wght-bold: normal; --cds-font-wght-body: initial; --cds-font-wght-control: initial; --cds-font-wght-header: initial; --cds-font-wght-badge: initial; --cds-font-axis-wght-regular: ; --cds-font-axis-wght-medium: ; --cds-font-axis-wght-semibold: ; --cds-font-axis-wght-bold: ; --cds-font-axis-wght-body: initial; --cds-font-axis-wght-control: initial; --cds-font-axis-wght-header: initial; --cds-font-axis-wght-badge: initial; --cds-font-grad-semibold: 180; --cds-font-grad-bold: 200; --cds-leading-caption: calc(1.0625rem * var(--cds-rem-scale,1)); --cds-leading-footnote: calc(.9375rem * var(--cds-rem-scale,1)); --cds-leading-code: calc(1.0625rem * var(--cds-rem-scale,1)); --cds-leading-body: calc(1.1875rem * var(--cds-rem-scale,1)); --cds-leading-prose: 1.25rem; --cds-leading-heading: calc(1.125rem * var(--cds-rem-scale,1)); --cds-leading-title: calc(1.5625rem * var(--cds-rem-scale,1)); --cds-on-primary: var(--cds-neutral-0); --cds-on-accent: var(--cds-role-accent-on); --cds-on-danger: var(--cds-role-danger-on); --cds-on-success: var(--cds-role-success-on); --cds-on-warning: var(--cds-role-warning-on); --cds-on-pro: var(--cds-role-pro-on); --cds-on-git-added: var(--cds-gray-0); --cds-on-git-removed: var(--cds-gray-0); --cds-on-git-modified: var(--cds-gray-0); --cds-on-git-merged: var(--cds-gray-0); --cds-on-git-closed: var(--cds-gray-0); --cds-on-git-conflicting: var(--cds-gray-0); --cds-on-git-draft: var(--cds-gray-0); --cds-on-git-opened: var(--cds-on-git-added); --cds-on-git-queued: var(--cds-on-git-modified); --cds-on-brand: #fff; --cds-chart-categorical-1: var(--cds-blue-450); --cds-chart-categorical-2: var(--cds-orange-350); --cds-chart-categorical-3: var(--cds-aqua-350); --cds-chart-categorical-4: var(--cds-yellow-250); --cds-chart-categorical-5: var(--cds-magenta-300); --cds-chart-categorical-6: var(--cds-green-500); --cds-chart-categorical-7: var(--cds-violet-500); --cds-chart-categorical-8: var(--cds-red-400); --cds-chart-sequential-1: var(--cds-blue-100); --cds-chart-sequential-2: var(--cds-blue-200); --cds-chart-sequential-3: var(--cds-blue-300); --cds-chart-sequential-4: var(--cds-blue-400); --cds-chart-sequential-5: var(--cds-blue-500); --cds-chart-sequential-6: var(--cds-blue-600); --cds-chart-sequential-7: var(--cds-blue-700); --cds-chart-diverging-1: var(--cds-blue-500); --cds-chart-diverging-2: var(--cds-blue-350); --cds-chart-diverging-3: var(--cds-blue-200); --cds-chart-diverging-4: var(--cds-gray-50); --cds-chart-diverging-5: var(--cds-red-200); --cds-chart-diverging-6: var(--cds-red-350); --cds-chart-diverging-7: var(--cds-red-500); --cds-chart-status-good: var(--cds-green-400); --cds-chart-status-warning: var(--cds-yellow-200); --cds-chart-status-serious: var(--cds-orange-300); --cds-chart-status-critical: var(--cds-red-450); --cds-chart-muted: var(--cds-gray-200); --cds-chart-reference: var(--cds-gray-400); --cds-chart-reference-tint: hsl(from var(--cds-gray-400) h s l / 15%); --cds-chart-grid: var(--cds-alpha-2); --cds-chart-axis: var(--cds-gray-200); --cds-chart-baseline: var(--cds-gray-200); --cds-editor-collaborator-1: var(--cds-violet-450); --cds-editor-collaborator-2: var(--cds-magenta-450); --cds-editor-collaborator-3: var(--cds-aqua-500); --cds-editor-collaborator-4: var(--cds-green-500); --cds-editor-collaborator-5: var(--cds-yellow-500); --cds-editor-collaborator-6: var(--cds-gray-500); --cds-opacity-disabled: .4; --cds-opacity-icon-secondary: .4; --cds-z-modal: 40; --cds-z-coachmark: 35; --cds-z-popover: 50; --cds-z-tooltip: 50; --cds-z-toast: 60; --cds-avatar-xs: calc(1rem * var(--cds-rem-scale,1)); --cds-avatar-sm: calc(1.25rem * var(--cds-rem-scale,1)); --cds-avatar-md: calc(1.75rem * var(--cds-rem-scale,1)); --cds-avatar-lg: calc(2.25rem * var(--cds-rem-scale,1)); --cds-avatar-text-xs: calc(.5rem * var(--cds-rem-scale,1)); --cds-banner-neutral-tint: initial; --cds-banner-neutral-ring: initial; --cds-button-pad-max: initial; --cds-button-radius-add: calc(0rem * var(--cds-rem-scale,1)); --cds-button-on-content: #fff9; --cds-button-on-content-hover: #ffffffb3; --cds-button-on-content-ring: #ffffff59; --cds-checkbox: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-radius: calc(.25rem * var(--cds-rem-scale,1)); --cds-checkbox-xxs: calc(.75rem * var(--cds-rem-scale,1)); --cds-checkbox-xxs-glyph: calc(.75rem * var(--cds-rem-scale,1)); --cds-checkbox-xxs-radius: calc(.1875rem * var(--cds-rem-scale,1)); --cds-menu-gutter: initial; --cds-page-header-title-size: calc(1.5rem * var(--cds-rem-scale,1)); --cds-page-header-title-leading: calc(2rem * var(--cds-rem-scale,1)); --cds-panel-radius: calc(.625rem * var(--cds-rem-scale,1)); --cds-panel-shadow: 0 0 0 1px var(--cds-border), var(--cds-shadow-sm); --cds-panel-inset: calc(.5rem * var(--cds-rem-scale,1)); --cds-panel-gap: calc(.5rem * var(--cds-rem-scale,1)); --cds-panel-line: 0px; --cds-panel-header-pad-block: calc(.25rem * var(--cds-rem-scale,1)); --cds-panel-header-pad-inline: calc(.25rem * var(--cds-rem-scale,1)); --cds-panel-header-line: 0px; --cds-prose-weight-heading-serif: 520; --cds-prose-axis-wght-heading-serif: ; --cds-radio-group-card-selected: var(--cds-role-accent-50); --cds-segmented-control-thumb: var(--cds-surface-popover); --cds-segmented-control-thumb-shadow: initial; --cds-segmented-control-track: var(--cds-alpha-1); --cds-shortcut-cap-ink: var(--cds-gray-500); --cds-shortcut-cap-fill: transparent; --cds-shortcut-cap-line: currentColor; }
@supports (color:color-mix(in lab, red, red)) {
.cds-root { --cds-shortcut-cap-line: color-mix(in srgb, currentColor 18%, transparent); }
}
.cds-root { --cds-skeleton-base: var(--cds-alpha-1); --cds-skeleton-sheen: var(--cds-alpha-1); --cds-slider-track: var(--cds-alpha-2); --cds-slider-fill: var(--cds-alpha-3); --cds-slider-handle: var(--cds-gray-0); --cds-slider-handle-shadow-outer: hsl(from var(--cds-gray-900) h s l / 4%); --cds-slider-handle-shadow-depth: hsl(from var(--cds-gray-900) h s l / 6%); --cds-slider-stop-dot: hsl(from var(--cds-gray-900) h s l / 25%); --cds-switch-knob: var(--cds-gray-0); --cds-switch-track: var(--cds-alpha-3); --cds-switch-track-hover: var(--cds-alpha-4); --cds-switch-h: calc(1rem * var(--cds-rem-scale,1)); --cds-toolbar-pad-block: calc(.25rem * var(--cds-rem-scale,1)); --cds-toolbar-pad-inline: calc(0rem * var(--cds-rem-scale,1)); --cds-toolbar-title-pad: calc(.25rem * var(--cds-rem-scale,1)); --cds-toolbar-icon-box: calc(0rem * var(--cds-rem-scale,1)); --cds-toolbar-line: 0px; --cds-toolbar-strip: 0px; --cds-tooltip-bg: var(--cds-role-tooltip-bg); --cds-tooltip-fg: var(--cds-role-tooltip-fg); }
@media screen {
[data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"] { --cds-border-accent: var(--cds-role-accent-700); --cds-border-danger: var(--cds-role-danger-700); --cds-border-success: var(--cds-role-success-700); --cds-border-warning: var(--cds-role-warning-700); --cds-border-pro: var(--cds-role-pro-700); --cds-border-editor-comment: var(--cds-yellow-300); --cds-border-editor-comment-open: var(--cds-yellow-200); --cds-shadow-color: #0000003d; --cds-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003; --cds-ring-outer: 0px; --cds-ring-inner: 1px; --cds-ring-color: var(--cds-alpha-2); --cds-focus-shadow: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-accent), 0 0 6px 1px hsl(from var(--cds-role-accent-600) h s l / 60%); --cds-focus-shadow-danger: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-danger), 0 0 6px 1px hsl(from var(--cds-role-danger-600) h s l / 60%); --cds-pictogram-highlight-default: var(--cds-gray-650); --cds-pictogram-highlight-heather: var(--cds-plum); --cds-pictogram-highlight-cactus: var(--cds-mineral); --cds-neutral-0: var(--cds-gray-900); --cds-neutral-10: var(--cds-gray-890); --cds-neutral-20: var(--cds-gray-880); --cds-neutral-30: var(--cds-gray-870); --cds-neutral-40: var(--cds-gray-860); --cds-neutral-50: var(--cds-gray-850); --cds-neutral-60: var(--cds-gray-840); --cds-neutral-70: var(--cds-gray-830); --cds-neutral-80: var(--cds-gray-820); --cds-neutral-90: var(--cds-gray-810); --cds-neutral-100: var(--cds-gray-800); --cds-neutral-150: var(--cds-gray-750); --cds-neutral-200: var(--cds-gray-700); --cds-neutral-250: var(--cds-gray-650); --cds-neutral-300: var(--cds-gray-600); --cds-neutral-350: var(--cds-gray-550); --cds-neutral-400: var(--cds-gray-500); --cds-neutral-450: var(--cds-gray-450); --cds-neutral-500: var(--cds-gray-400); --cds-neutral-550: var(--cds-gray-350); --cds-neutral-600: var(--cds-gray-300); --cds-neutral-650: var(--cds-gray-250); --cds-neutral-700: var(--cds-gray-200); --cds-neutral-750: var(--cds-gray-150); --cds-neutral-800: var(--cds-gray-100); --cds-neutral-810: var(--cds-gray-90); --cds-neutral-820: var(--cds-gray-80); --cds-neutral-830: var(--cds-gray-70); --cds-neutral-840: var(--cds-gray-60); --cds-neutral-850: var(--cds-gray-50); --cds-neutral-860: var(--cds-gray-40); --cds-neutral-870: var(--cds-gray-30); --cds-neutral-880: var(--cds-gray-20); --cds-neutral-890: var(--cds-gray-10); --cds-neutral-900: var(--cds-gray-0); --cds-surface-0: var(--cds-gray-900); --cds-surface-1: var(--cds-gray-850); --cds-surface-2: var(--cds-gray-830); --cds-surface-3: var(--cds-gray-800); --cds-fill-primary-hover: var(--cds-gray-100); --cds-fill-secondary: var(--cds-alpha-2); --cds-fill-secondary-hover: hsl(from var(--cds-neutral-900) h s l / 14%); --cds-fill-secondary-ring: transparent; --cds-fill-field: var(--cds-alpha-1); --cds-fill-ghost-hover: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-fill-ghost-selected: hsl(from var(--cds-neutral-900) h s l / 15%); --cds-bg-accent: var(--cds-role-accent-800); --cds-bg-danger: var(--cds-role-danger-800); --cds-bg-success: var(--cds-role-success-800); --cds-bg-warning: var(--cds-role-warning-800); --cds-bg-pro: var(--cds-role-pro-800); --cds-bg-tint-red: rgb(from var(--cds-red-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-red-opaque: var(--cds-red-800); --cds-bg-tint-orange: rgb(from var(--cds-orange-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-orange-opaque: var(--cds-orange-800); --cds-bg-tint-yellow: rgb(from var(--cds-yellow-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-yellow-opaque: var(--cds-yellow-800); --cds-bg-tint-green: rgb(from var(--cds-green-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-green-opaque: var(--cds-green-800); --cds-bg-tint-aqua: rgb(from var(--cds-aqua-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-aqua-opaque: var(--cds-aqua-800); --cds-bg-tint-blue: rgb(from var(--cds-blue-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-blue-opaque: var(--cds-blue-800); --cds-bg-tint-violet: rgb(from var(--cds-violet-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-violet-opaque: var(--cds-violet-800); --cds-bg-tint-magenta: rgb(from var(--cds-magenta-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-magenta-opaque: var(--cds-magenta-800); --cds-backdrop: #00000080; --cds-text-accent: var(--cds-role-accent-300); --cds-text-danger: var(--cds-role-danger-300); --cds-text-success: var(--cds-role-success-400); --cds-text-warning: var(--cds-role-warning-300); --cds-text-pro: var(--cds-role-pro-300); --cds-text-tint-red: var(--cds-red-300); --cds-text-tint-orange: var(--cds-orange-300); --cds-text-tint-yellow: var(--cds-yellow-300); --cds-text-tint-green: var(--cds-green-300); --cds-text-tint-aqua: var(--cds-aqua-300); --cds-text-tint-blue: var(--cds-blue-300); --cds-text-tint-violet: var(--cds-violet-300); --cds-text-tint-magenta: var(--cds-magenta-300); --cds-text-primary: var(--cds-gray-50); --cds-text-secondary: var(--cds-gray-200); --cds-text-muted: var(--cds-gray-400); --cds-text-stays-secondary: initial; --cds-font-wght-regular: "wght" 360; --cds-font-wght-medium: "wght" 460; --cds-font-wght-semibold: "wght" 540; --cds-font-wght-bold: "wght" 560; --cds-font-axis-wght-regular: var(--cds-font-wght-regular),; --cds-font-axis-wght-medium: var(--cds-font-wght-medium),; --cds-font-axis-wght-semibold: var(--cds-font-wght-semibold),; --cds-font-axis-wght-bold: var(--cds-font-wght-bold),; --cds-font-axis-wght-body: var(--cds-font-wght-body),; --cds-font-axis-wght-control: var(--cds-font-wght-control),; --cds-font-axis-wght-header: var(--cds-font-wght-header),; --cds-font-axis-wght-badge: var(--cds-font-wght-badge),; --cds-on-git-added: var(--cds-gray-900); --cds-on-git-removed: var(--cds-gray-900); --cds-on-git-modified: var(--cds-gray-900); --cds-on-git-merged: var(--cds-gray-900); --cds-on-git-closed: var(--cds-gray-900); --cds-on-git-conflicting: var(--cds-gray-900); --cds-on-git-draft: var(--cds-gray-900); --cds-chart-categorical-1: var(--cds-blue-400); --cds-chart-categorical-2: var(--cds-orange-400); --cds-chart-categorical-3: var(--cds-aqua-400); --cds-chart-categorical-4: var(--cds-yellow-350); --cds-chart-categorical-5: var(--cds-magenta-400); --cds-chart-categorical-6: var(--cds-green-500); --cds-chart-categorical-7: var(--cds-violet-350); --cds-chart-categorical-8: var(--cds-red-350); --cds-chart-sequential-1: var(--cds-blue-700); --cds-chart-sequential-2: var(--cds-blue-600); --cds-chart-sequential-3: var(--cds-blue-500); --cds-chart-sequential-4: var(--cds-blue-400); --cds-chart-sequential-5: var(--cds-blue-300); --cds-chart-sequential-6: var(--cds-blue-200); --cds-chart-sequential-7: var(--cds-blue-100); --cds-chart-diverging-1: var(--cds-blue-300); --cds-chart-diverging-2: var(--cds-blue-450); --cds-chart-diverging-3: var(--cds-blue-600); --cds-chart-diverging-4: var(--cds-gray-700); --cds-chart-diverging-5: var(--cds-red-600); --cds-chart-diverging-6: var(--cds-red-450); --cds-chart-diverging-7: var(--cds-red-300); --cds-chart-status-good: var(--cds-green-400); --cds-chart-status-warning: var(--cds-yellow-200); --cds-chart-status-serious: var(--cds-orange-300); --cds-chart-status-critical: var(--cds-red-450); --cds-chart-muted: var(--cds-gray-550); --cds-chart-reference: var(--cds-gray-350); --cds-chart-reference-tint: hsl(from var(--cds-gray-350) h s l / 15%); --cds-chart-axis: var(--cds-gray-700); --cds-chart-baseline: var(--cds-gray-700); --cds-button-on-content: #0000008c; --cds-button-on-content-hover: #000000a6; --cds-button-on-content-ring: transparent; --cds-prose-axis-wght-heading-serif: "wght" 480,; --cds-radio-group-card-selected: var(--cds-role-accent-850); --cds-segmented-control-thumb: var(--cds-alpha-2); --cds-shortcut-cap-ink: var(--cds-gray-300); --cds-shortcut-cap-line: currentColor; }
@supports (color:color-mix(in lab, red, red)) {
[data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"] { --cds-shortcut-cap-line: color-mix(in srgb, currentColor 22%, transparent); }
}
[data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"] { --cds-skeleton-base: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-skeleton-sheen: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-slider-fill: var(--cds-alpha-4); --cds-slider-handle-shadow-outer: hsl(from var(--cds-gray-0) h s l / 0%); --cds-slider-handle-shadow-depth: hsl(from var(--cds-gray-900) h s l / 24%); --cds-slider-stop-dot: hsl(from var(--cds-gray-0) h s l / 25%); --cds-switch-track: var(--cds-alpha-2); --cds-switch-track-hover: var(--cds-alpha-3); --cds-tooltip-bg: var(--cds-surface-3); --cds-tooltip-fg: var(--cds-text-primary); }
}
@media screen and (prefers-color-scheme: dark) {
[data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *) { --cds-border-accent: var(--cds-role-accent-700); --cds-border-danger: var(--cds-role-danger-700); --cds-border-success: var(--cds-role-success-700); --cds-border-warning: var(--cds-role-warning-700); --cds-border-pro: var(--cds-role-pro-700); --cds-border-editor-comment: var(--cds-yellow-300); --cds-border-editor-comment-open: var(--cds-yellow-200); --cds-shadow-color: #0000003d; --cds-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003; --cds-ring-outer: 0px; --cds-ring-inner: 1px; --cds-ring-color: var(--cds-alpha-2); --cds-focus-shadow: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-accent), 0 0 6px 1px hsl(from var(--cds-role-accent-600) h s l / 60%); --cds-focus-shadow-danger: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-danger), 0 0 6px 1px hsl(from var(--cds-role-danger-600) h s l / 60%); --cds-pictogram-highlight-default: var(--cds-gray-650); --cds-pictogram-highlight-heather: var(--cds-plum); --cds-pictogram-highlight-cactus: var(--cds-mineral); --cds-neutral-0: var(--cds-gray-900); --cds-neutral-10: var(--cds-gray-890); --cds-neutral-20: var(--cds-gray-880); --cds-neutral-30: var(--cds-gray-870); --cds-neutral-40: var(--cds-gray-860); --cds-neutral-50: var(--cds-gray-850); --cds-neutral-60: var(--cds-gray-840); --cds-neutral-70: var(--cds-gray-830); --cds-neutral-80: var(--cds-gray-820); --cds-neutral-90: var(--cds-gray-810); --cds-neutral-100: var(--cds-gray-800); --cds-neutral-150: var(--cds-gray-750); --cds-neutral-200: var(--cds-gray-700); --cds-neutral-250: var(--cds-gray-650); --cds-neutral-300: var(--cds-gray-600); --cds-neutral-350: var(--cds-gray-550); --cds-neutral-400: var(--cds-gray-500); --cds-neutral-450: var(--cds-gray-450); --cds-neutral-500: var(--cds-gray-400); --cds-neutral-550: var(--cds-gray-350); --cds-neutral-600: var(--cds-gray-300); --cds-neutral-650: var(--cds-gray-250); --cds-neutral-700: var(--cds-gray-200); --cds-neutral-750: var(--cds-gray-150); --cds-neutral-800: var(--cds-gray-100); --cds-neutral-810: var(--cds-gray-90); --cds-neutral-820: var(--cds-gray-80); --cds-neutral-830: var(--cds-gray-70); --cds-neutral-840: var(--cds-gray-60); --cds-neutral-850: var(--cds-gray-50); --cds-neutral-860: var(--cds-gray-40); --cds-neutral-870: var(--cds-gray-30); --cds-neutral-880: var(--cds-gray-20); --cds-neutral-890: var(--cds-gray-10); --cds-neutral-900: var(--cds-gray-0); --cds-surface-0: var(--cds-gray-900); --cds-surface-1: var(--cds-gray-850); --cds-surface-2: var(--cds-gray-830); --cds-surface-3: var(--cds-gray-800); --cds-fill-primary-hover: var(--cds-gray-100); --cds-fill-secondary: var(--cds-alpha-2); --cds-fill-secondary-hover: hsl(from var(--cds-neutral-900) h s l / 14%); --cds-fill-secondary-ring: transparent; --cds-fill-field: var(--cds-alpha-1); --cds-fill-ghost-hover: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-fill-ghost-selected: hsl(from var(--cds-neutral-900) h s l / 15%); --cds-bg-accent: var(--cds-role-accent-800); --cds-bg-danger: var(--cds-role-danger-800); --cds-bg-success: var(--cds-role-success-800); --cds-bg-warning: var(--cds-role-warning-800); --cds-bg-pro: var(--cds-role-pro-800); --cds-bg-tint-red: rgb(from var(--cds-red-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-red-opaque: var(--cds-red-800); --cds-bg-tint-orange: rgb(from var(--cds-orange-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-orange-opaque: var(--cds-orange-800); --cds-bg-tint-yellow: rgb(from var(--cds-yellow-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-yellow-opaque: var(--cds-yellow-800); --cds-bg-tint-green: rgb(from var(--cds-green-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-green-opaque: var(--cds-green-800); --cds-bg-tint-aqua: rgb(from var(--cds-aqua-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-aqua-opaque: var(--cds-aqua-800); --cds-bg-tint-blue: rgb(from var(--cds-blue-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-blue-opaque: var(--cds-blue-800); --cds-bg-tint-violet: rgb(from var(--cds-violet-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-violet-opaque: var(--cds-violet-800); --cds-bg-tint-magenta: rgb(from var(--cds-magenta-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-magenta-opaque: var(--cds-magenta-800); --cds-backdrop: #00000080; --cds-text-accent: var(--cds-role-accent-300); --cds-text-danger: var(--cds-role-danger-300); --cds-text-success: var(--cds-role-success-400); --cds-text-warning: var(--cds-role-warning-300); --cds-text-pro: var(--cds-role-pro-300); --cds-text-tint-red: var(--cds-red-300); --cds-text-tint-orange: var(--cds-orange-300); --cds-text-tint-yellow: var(--cds-yellow-300); --cds-text-tint-green: var(--cds-green-300); --cds-text-tint-aqua: var(--cds-aqua-300); --cds-text-tint-blue: var(--cds-blue-300); --cds-text-tint-violet: var(--cds-violet-300); --cds-text-tint-magenta: var(--cds-magenta-300); --cds-text-primary: var(--cds-gray-50); --cds-text-secondary: var(--cds-gray-200); --cds-text-muted: var(--cds-gray-400); --cds-text-stays-secondary: initial; --cds-font-wght-regular: "wght" 360; --cds-font-wght-medium: "wght" 460; --cds-font-wght-semibold: "wght" 540; --cds-font-wght-bold: "wght" 560; --cds-font-axis-wght-regular: var(--cds-font-wght-regular),; --cds-font-axis-wght-medium: var(--cds-font-wght-medium),; --cds-font-axis-wght-semibold: var(--cds-font-wght-semibold),; --cds-font-axis-wght-bold: var(--cds-font-wght-bold),; --cds-font-axis-wght-body: var(--cds-font-wght-body),; --cds-font-axis-wght-control: var(--cds-font-wght-control),; --cds-font-axis-wght-header: var(--cds-font-wght-header),; --cds-font-axis-wght-badge: var(--cds-font-wght-badge),; --cds-on-git-added: var(--cds-gray-900); --cds-on-git-removed: var(--cds-gray-900); --cds-on-git-modified: var(--cds-gray-900); --cds-on-git-merged: var(--cds-gray-900); --cds-on-git-closed: var(--cds-gray-900); --cds-on-git-conflicting: var(--cds-gray-900); --cds-on-git-draft: var(--cds-gray-900); --cds-chart-categorical-1: var(--cds-blue-400); --cds-chart-categorical-2: var(--cds-orange-400); --cds-chart-categorical-3: var(--cds-aqua-400); --cds-chart-categorical-4: var(--cds-yellow-350); --cds-chart-categorical-5: var(--cds-magenta-400); --cds-chart-categorical-6: var(--cds-green-500); --cds-chart-categorical-7: var(--cds-violet-350); --cds-chart-categorical-8: var(--cds-red-350); --cds-chart-sequential-1: var(--cds-blue-700); --cds-chart-sequential-2: var(--cds-blue-600); --cds-chart-sequential-3: var(--cds-blue-500); --cds-chart-sequential-4: var(--cds-blue-400); --cds-chart-sequential-5: var(--cds-blue-300); --cds-chart-sequential-6: var(--cds-blue-200); --cds-chart-sequential-7: var(--cds-blue-100); --cds-chart-diverging-1: var(--cds-blue-300); --cds-chart-diverging-2: var(--cds-blue-450); --cds-chart-diverging-3: var(--cds-blue-600); --cds-chart-diverging-4: var(--cds-gray-700); --cds-chart-diverging-5: var(--cds-red-600); --cds-chart-diverging-6: var(--cds-red-450); --cds-chart-diverging-7: var(--cds-red-300); --cds-chart-status-good: var(--cds-green-400); --cds-chart-status-warning: var(--cds-yellow-200); --cds-chart-status-serious: var(--cds-orange-300); --cds-chart-status-critical: var(--cds-red-450); --cds-chart-muted: var(--cds-gray-550); --cds-chart-reference: var(--cds-gray-350); --cds-chart-reference-tint: hsl(from var(--cds-gray-350) h s l / 15%); --cds-chart-axis: var(--cds-gray-700); --cds-chart-baseline: var(--cds-gray-700); --cds-button-on-content: #0000008c; --cds-button-on-content-hover: #000000a6; --cds-button-on-content-ring: transparent; --cds-prose-axis-wght-heading-serif: "wght" 480,; --cds-radio-group-card-selected: var(--cds-role-accent-850); --cds-segmented-control-thumb: var(--cds-alpha-2); --cds-shortcut-cap-ink: var(--cds-gray-300); --cds-shortcut-cap-line: currentColor; }
@supports (color:color-mix(in lab, red, red)) {
[data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *) { --cds-shortcut-cap-line: color-mix(in srgb, currentColor 22%, transparent); }
}
[data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *) { --cds-skeleton-base: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-skeleton-sheen: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-slider-fill: var(--cds-alpha-4); --cds-slider-handle-shadow-outer: hsl(from var(--cds-gray-0) h s l / 0%); --cds-slider-handle-shadow-depth: hsl(from var(--cds-gray-900) h s l / 24%); --cds-slider-stop-dot: hsl(from var(--cds-gray-0) h s l / 25%); --cds-switch-track: var(--cds-alpha-2); --cds-switch-track-hover: var(--cds-alpha-3); --cds-tooltip-bg: var(--cds-surface-3); --cds-tooltip-fg: var(--cds-text-primary); }
}
.cds-root[data-font="system"] { --cds-font-sans: var(--cds-font-system); --cds-font-sans-display: var(--cds-font-sans); --cds-leading-footnote: calc(1rem * var(--cds-rem-scale,1)); }
.cds-root[data-platform="desktop"] { --cds-cursor-interactive: default; }
.cds-root[data-density="comfortable"] { --cds-radius: calc(.5rem * var(--cds-rem-scale,1)); --cds-radius-composer: calc(.875rem * var(--cds-rem-scale,1)); --cds-h-control: calc(2rem * var(--cds-rem-scale,1)); --cds-h-control-nested: calc(1.375rem * var(--cds-rem-scale,1)); --cds-icon: calc(1.25rem * var(--cds-rem-scale,1)); --cds-pad-xs: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-sm: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-md: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-lg: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-xl: calc(1.5rem * var(--cds-rem-scale,1)); --cds-gap-xs: calc(.5rem * var(--cds-rem-scale,1)); --cds-gap-sm: calc(.75rem * var(--cds-rem-scale,1)); --cds-gap-md: calc(1rem * var(--cds-rem-scale,1)); --cds-gap-lg: calc(1.75rem * var(--cds-rem-scale,1)); --cds-gap-xl: calc(2.5rem * var(--cds-rem-scale,1)); --cds-font-size-caption: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-footnote: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-code: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-body: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-prose: 1rem; --cds-font-size-heading: calc(.9375rem * var(--cds-rem-scale,1)); --cds-font-size-title: calc(1.375rem * var(--cds-rem-scale,1)); --cds-leading-caption: calc(1.0625rem * var(--cds-rem-scale,1)); --cds-leading-footnote: calc(1.0625rem * var(--cds-rem-scale,1)); --cds-leading-code: calc(1.1875rem * var(--cds-rem-scale,1)); --cds-leading-body: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-prose: 1.5rem; --cds-leading-heading: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-title: calc(1.75rem * var(--cds-rem-scale,1)); --cds-avatar-xs: calc(1.25rem * var(--cds-rem-scale,1)); --cds-avatar-sm: calc(1.5rem * var(--cds-rem-scale,1)); --cds-avatar-md: calc(2rem * var(--cds-rem-scale,1)); --cds-avatar-lg: calc(2.5rem * var(--cds-rem-scale,1)); --cds-avatar-text-xs: calc(.5625rem * var(--cds-rem-scale,1)); --cds-checkbox: calc(1.25rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-radius: calc(.3125rem * var(--cds-rem-scale,1)); --cds-panel-radius: calc(.75rem * var(--cds-rem-scale,1)); --cds-switch-h: calc(1.25rem * var(--cds-rem-scale,1)); }
@media (min-resolution: 2x) {
.cds-root { --cds-ring-hairline: .5px; }
}
@media (min-resolution: 3x) {
.cds-root { --cds-ring-hairline: calc(1px / 3); }
}
@media (min-resolution: 4x) {
.cds-root { --cds-ring-hairline: calc(1px / 4); }
}
.cds-root [data-step="1"] { --cds-radius: calc(.3125rem * var(--cds-rem-scale,1)); --cds-h-control: calc(1.25rem * var(--cds-rem-scale,1)); --cds-h-control-nested: calc(1rem * var(--cds-rem-scale,1)); --cds-icon: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-xs: calc(.125rem * var(--cds-rem-scale,1)); --cds-pad-sm: calc(.25rem * var(--cds-rem-scale,1)); --cds-pad-md: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-lg: calc(.625rem * var(--cds-rem-scale,1)); --cds-pad-xl: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-caption: calc(.625rem * var(--cds-rem-scale,1)); --cds-font-size-body: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-prose: .8125rem; --cds-leading-body: calc(1.0625rem * var(--cds-rem-scale,1)); --cds-leading-prose: 1.1875rem; --cds-checkbox: calc(.875rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph: calc(.875rem * var(--cds-rem-scale,1)); --cds-checkbox-radius: calc(.25rem * var(--cds-rem-scale,1)); --cds-switch-h: calc(.875rem * var(--cds-rem-scale,1)); }
.cds-root [data-step="2"] { --cds-radius: calc(.375rem * var(--cds-rem-scale,1)); --cds-h-control: calc(1.5rem * var(--cds-rem-scale,1)); --cds-h-control-nested: calc(1.125rem * var(--cds-rem-scale,1)); --cds-icon: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-xs: calc(.25rem * var(--cds-rem-scale,1)); --cds-pad-sm: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-md: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-lg: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-xl: calc(1.25rem * var(--cds-rem-scale,1)); --cds-font-size-caption: calc(.6875rem * var(--cds-rem-scale,1)); --cds-font-size-body: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-prose: .875rem; --cds-leading-body: calc(1.1875rem * var(--cds-rem-scale,1)); --cds-leading-prose: 1.25rem; --cds-checkbox: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-radius: calc(.25rem * var(--cds-rem-scale,1)); --cds-switch-h: calc(1rem * var(--cds-rem-scale,1)); }
.cds-root [data-step="3"] { --cds-radius: calc(.4375rem * var(--cds-rem-scale,1)); --cds-h-control: calc(1.75rem * var(--cds-rem-scale,1)); --cds-h-control-nested: calc(1.25rem * var(--cds-rem-scale,1)); --cds-icon: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-xs: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-sm: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-md: calc(.625rem * var(--cds-rem-scale,1)); --cds-pad-lg: calc(.875rem * var(--cds-rem-scale,1)); --cds-pad-xl: calc(1.375rem * var(--cds-rem-scale,1)); --cds-font-size-caption: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-body: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-prose: .9375rem; --cds-leading-body: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-prose: 1.375rem; --cds-checkbox: calc(1.125rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-radius: calc(.3125rem * var(--cds-rem-scale,1)); --cds-switch-h: calc(1.125rem * var(--cds-rem-scale,1)); }
.cds-root [data-step="4"] { --cds-radius: calc(.5rem * var(--cds-rem-scale,1)); --cds-h-control: calc(2rem * var(--cds-rem-scale,1)); --cds-h-control-nested: calc(1.375rem * var(--cds-rem-scale,1)); --cds-icon: calc(1.25rem * var(--cds-rem-scale,1)); --cds-pad-xs: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-sm: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-md: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-lg: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-xl: calc(1.5rem * var(--cds-rem-scale,1)); --cds-font-size-caption: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-body: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-prose: 1rem; --cds-leading-body: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-prose: 1.5rem; --cds-checkbox: calc(1.25rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-radius: calc(.3125rem * var(--cds-rem-scale,1)); --cds-switch-h: calc(1.25rem * var(--cds-rem-scale,1)); }
.cds-root [data-step="5"] { --cds-radius: calc(.625rem * var(--cds-rem-scale,1)); --cds-h-control: calc(2.5rem * var(--cds-rem-scale,1)); --cds-h-control-nested: calc(1.75rem * var(--cds-rem-scale,1)); --cds-icon: calc(1.5rem * var(--cds-rem-scale,1)); --cds-pad-xs: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-sm: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-md: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-lg: calc(1.25rem * var(--cds-rem-scale,1)); --cds-pad-xl: calc(1.75rem * var(--cds-rem-scale,1)); --cds-font-size-caption: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-body: calc(.9375rem * var(--cds-rem-scale,1)); --cds-font-size-prose: 1.125rem; --cds-leading-body: calc(1.375rem * var(--cds-rem-scale,1)); --cds-leading-prose: 1.6875rem; --cds-checkbox: calc(1.5rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph: calc(1.25rem * var(--cds-rem-scale,1)); --cds-checkbox-radius: calc(.375rem * var(--cds-rem-scale,1)); --cds-switch-h: calc(1.5rem * var(--cds-rem-scale,1)); }
@media screen {
.cds-dark-scope[data-mode="dark"] { --cds-border-accent: var(--cds-role-accent-700); --cds-border-danger: var(--cds-role-danger-700); --cds-border-success: var(--cds-role-success-700); --cds-border-warning: var(--cds-role-warning-700); --cds-border-pro: var(--cds-role-pro-700); --cds-border-editor-comment: var(--cds-yellow-300); --cds-border-editor-comment-open: var(--cds-yellow-200); --cds-shadow-color: #0000003d; --cds-shadow-popover: 0 8px 24px #00000052, 0 2px 6px #0003; --cds-ring-outer: 0px; --cds-ring-inner: 1px; --cds-ring-color: var(--cds-alpha-2); --cds-focus-shadow: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-accent), 0 0 6px 1px hsl(from var(--cds-role-accent-600) h s l / 60%); --cds-focus-shadow-danger: inset 0 0 0 1px var(--cds-page-bg), 0 0 0 1px var(--cds-fill-danger), 0 0 6px 1px hsl(from var(--cds-role-danger-600) h s l / 60%); --cds-pictogram-highlight-default: var(--cds-gray-650); --cds-pictogram-highlight-heather: var(--cds-plum); --cds-pictogram-highlight-cactus: var(--cds-mineral); --cds-neutral-0: var(--cds-gray-900); --cds-neutral-10: var(--cds-gray-890); --cds-neutral-20: var(--cds-gray-880); --cds-neutral-30: var(--cds-gray-870); --cds-neutral-40: var(--cds-gray-860); --cds-neutral-50: var(--cds-gray-850); --cds-neutral-60: var(--cds-gray-840); --cds-neutral-70: var(--cds-gray-830); --cds-neutral-80: var(--cds-gray-820); --cds-neutral-90: var(--cds-gray-810); --cds-neutral-100: var(--cds-gray-800); --cds-neutral-150: var(--cds-gray-750); --cds-neutral-200: var(--cds-gray-700); --cds-neutral-250: var(--cds-gray-650); --cds-neutral-300: var(--cds-gray-600); --cds-neutral-350: var(--cds-gray-550); --cds-neutral-400: var(--cds-gray-500); --cds-neutral-450: var(--cds-gray-450); --cds-neutral-500: var(--cds-gray-400); --cds-neutral-550: var(--cds-gray-350); --cds-neutral-600: var(--cds-gray-300); --cds-neutral-650: var(--cds-gray-250); --cds-neutral-700: var(--cds-gray-200); --cds-neutral-750: var(--cds-gray-150); --cds-neutral-800: var(--cds-gray-100); --cds-neutral-810: var(--cds-gray-90); --cds-neutral-820: var(--cds-gray-80); --cds-neutral-830: var(--cds-gray-70); --cds-neutral-840: var(--cds-gray-60); --cds-neutral-850: var(--cds-gray-50); --cds-neutral-860: var(--cds-gray-40); --cds-neutral-870: var(--cds-gray-30); --cds-neutral-880: var(--cds-gray-20); --cds-neutral-890: var(--cds-gray-10); --cds-neutral-900: var(--cds-gray-0); --cds-surface-0: var(--cds-gray-900); --cds-surface-1: var(--cds-gray-850); --cds-surface-2: var(--cds-gray-830); --cds-surface-3: var(--cds-gray-800); --cds-fill-primary-hover: var(--cds-gray-100); --cds-fill-secondary: var(--cds-alpha-2); --cds-fill-secondary-hover: hsl(from var(--cds-neutral-900) h s l / 14%); --cds-fill-secondary-ring: transparent; --cds-fill-field: var(--cds-alpha-1); --cds-fill-ghost-hover: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-fill-ghost-selected: hsl(from var(--cds-neutral-900) h s l / 15%); --cds-bg-accent: var(--cds-role-accent-800); --cds-bg-danger: var(--cds-role-danger-800); --cds-bg-success: var(--cds-role-success-800); --cds-bg-warning: var(--cds-role-warning-800); --cds-bg-pro: var(--cds-role-pro-800); --cds-bg-tint-red: rgb(from var(--cds-red-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-red-opaque: var(--cds-red-800); --cds-bg-tint-orange: rgb(from var(--cds-orange-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-orange-opaque: var(--cds-orange-800); --cds-bg-tint-yellow: rgb(from var(--cds-yellow-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-yellow-opaque: var(--cds-yellow-800); --cds-bg-tint-green: rgb(from var(--cds-green-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-green-opaque: var(--cds-green-800); --cds-bg-tint-aqua: rgb(from var(--cds-aqua-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-aqua-opaque: var(--cds-aqua-800); --cds-bg-tint-blue: rgb(from var(--cds-blue-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-blue-opaque: var(--cds-blue-800); --cds-bg-tint-violet: rgb(from var(--cds-violet-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-violet-opaque: var(--cds-violet-800); --cds-bg-tint-magenta: rgb(from var(--cds-magenta-800) calc((r - 5.25) / .75) calc((g - 5.25) / .75) calc((b - 5.25) / .75) / 75%); --cds-bg-tint-magenta-opaque: var(--cds-magenta-800); --cds-backdrop: #00000080; --cds-text-accent: var(--cds-role-accent-300); --cds-text-danger: var(--cds-role-danger-300); --cds-text-success: var(--cds-role-success-400); --cds-text-warning: var(--cds-role-warning-300); --cds-text-pro: var(--cds-role-pro-300); --cds-text-tint-red: var(--cds-red-300); --cds-text-tint-orange: var(--cds-orange-300); --cds-text-tint-yellow: var(--cds-yellow-300); --cds-text-tint-green: var(--cds-green-300); --cds-text-tint-aqua: var(--cds-aqua-300); --cds-text-tint-blue: var(--cds-blue-300); --cds-text-tint-violet: var(--cds-violet-300); --cds-text-tint-magenta: var(--cds-magenta-300); --cds-text-primary: var(--cds-gray-50); --cds-text-secondary: var(--cds-gray-200); --cds-text-muted: var(--cds-gray-400); --cds-text-stays-secondary: initial; --cds-font-wght-regular: "wght" 360; --cds-font-wght-medium: "wght" 460; --cds-font-wght-semibold: "wght" 540; --cds-font-wght-bold: "wght" 560; --cds-font-axis-wght-regular: var(--cds-font-wght-regular),; --cds-font-axis-wght-medium: var(--cds-font-wght-medium),; --cds-font-axis-wght-semibold: var(--cds-font-wght-semibold),; --cds-font-axis-wght-bold: var(--cds-font-wght-bold),; --cds-font-axis-wght-body: var(--cds-font-wght-body),; --cds-font-axis-wght-control: var(--cds-font-wght-control),; --cds-font-axis-wght-header: var(--cds-font-wght-header),; --cds-font-axis-wght-badge: var(--cds-font-wght-badge),; --cds-on-git-added: var(--cds-gray-900); --cds-on-git-removed: var(--cds-gray-900); --cds-on-git-modified: var(--cds-gray-900); --cds-on-git-merged: var(--cds-gray-900); --cds-on-git-closed: var(--cds-gray-900); --cds-on-git-conflicting: var(--cds-gray-900); --cds-on-git-draft: var(--cds-gray-900); --cds-chart-categorical-1: var(--cds-blue-400); --cds-chart-categorical-2: var(--cds-orange-400); --cds-chart-categorical-3: var(--cds-aqua-400); --cds-chart-categorical-4: var(--cds-yellow-350); --cds-chart-categorical-5: var(--cds-magenta-400); --cds-chart-categorical-6: var(--cds-green-500); --cds-chart-categorical-7: var(--cds-violet-350); --cds-chart-categorical-8: var(--cds-red-350); --cds-chart-sequential-1: var(--cds-blue-700); --cds-chart-sequential-2: var(--cds-blue-600); --cds-chart-sequential-3: var(--cds-blue-500); --cds-chart-sequential-4: var(--cds-blue-400); --cds-chart-sequential-5: var(--cds-blue-300); --cds-chart-sequential-6: var(--cds-blue-200); --cds-chart-sequential-7: var(--cds-blue-100); --cds-chart-diverging-1: var(--cds-blue-300); --cds-chart-diverging-2: var(--cds-blue-450); --cds-chart-diverging-3: var(--cds-blue-600); --cds-chart-diverging-4: var(--cds-gray-700); --cds-chart-diverging-5: var(--cds-red-600); --cds-chart-diverging-6: var(--cds-red-450); --cds-chart-diverging-7: var(--cds-red-300); --cds-chart-status-good: var(--cds-green-400); --cds-chart-status-warning: var(--cds-yellow-200); --cds-chart-status-serious: var(--cds-orange-300); --cds-chart-status-critical: var(--cds-red-450); --cds-chart-muted: var(--cds-gray-550); --cds-chart-reference: var(--cds-gray-350); --cds-chart-reference-tint: hsl(from var(--cds-gray-350) h s l / 15%); --cds-chart-axis: var(--cds-gray-700); --cds-chart-baseline: var(--cds-gray-700); --cds-button-on-content: #0000008c; --cds-button-on-content-hover: #000000a6; --cds-button-on-content-ring: transparent; --cds-prose-axis-wght-heading-serif: "wght" 480,; --cds-radio-group-card-selected: var(--cds-role-accent-850); --cds-segmented-control-thumb: var(--cds-alpha-2); --cds-shortcut-cap-ink: var(--cds-gray-300); --cds-shortcut-cap-line: currentColor; }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-shortcut-cap-line: color-mix(in srgb, currentColor 22%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-skeleton-base: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-skeleton-sheen: hsl(from var(--cds-neutral-900) h s l / 7.5%); --cds-slider-fill: var(--cds-alpha-4); --cds-slider-handle-shadow-outer: hsl(from var(--cds-gray-0) h s l / 0%); --cds-slider-handle-shadow-depth: hsl(from var(--cds-gray-900) h s l / 24%); --cds-slider-stop-dot: hsl(from var(--cds-gray-0) h s l / 25%); --cds-switch-track: var(--cds-alpha-2); --cds-switch-track-hover: var(--cds-alpha-3); --cds-tooltip-bg: var(--cds-surface-3); --cds-tooltip-fg: var(--cds-text-primary); --cds-border: var(--cds-alpha-2); --cds-border-git-added: var(--cds-text-git-added); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-border-git-added: color-mix(in srgb, var(--cds-text-git-added) 40%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-border-git-removed: var(--cds-text-git-removed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-border-git-removed: color-mix(in srgb, var(--cds-text-git-removed) 40%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-border-git-modified: var(--cds-text-git-modified); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-border-git-modified: color-mix(in srgb, var(--cds-text-git-modified) 40%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-border-git-merged: var(--cds-text-git-merged); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-border-git-merged: color-mix(in srgb, var(--cds-text-git-merged) 40%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-border-git-closed: var(--cds-text-git-closed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-border-git-closed: color-mix(in srgb, var(--cds-text-git-closed) 40%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-border-git-conflicting: var(--cds-text-git-conflicting); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-border-git-conflicting: color-mix(in srgb, var(--cds-text-git-conflicting) 40%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-border-git-draft: var(--cds-text-git-draft); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-border-git-draft: color-mix(in srgb, var(--cds-text-git-draft) 40%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-border-git-opened: var(--cds-border-git-added); --cds-border-git-queued: var(--cds-border-git-modified); --cds-border-strong: var(--cds-alpha-3); --cds-border-stronger: hsl(from var(--cds-neutral-900) h s l / 40%); --cds-shadow-sm: 0 1px 2px 0 hsl(from var(--cds-gray-900) h s l / 6%), 0 2px 8px 0 var(--cds-shadow-color); --cds-shadow-md: 0 2px 4px 0 hsl(from var(--cds-gray-900) h s l / 7%), 0 6px 16px 0 var(--cds-shadow-color); --cds-shadow-lg: 0 4px 8px 0 hsl(from var(--cds-gray-900) h s l / 8%), 0 12px 28px -2px var(--cds-shadow-color); --cds-alpha-0: hsl(from var(--cds-neutral-900) h s l / 0%); --cds-alpha-1: hsl(from var(--cds-neutral-900) h s l / 5%); --cds-alpha-2: hsl(from var(--cds-neutral-900) h s l / 10%); --cds-alpha-3: hsl(from var(--cds-neutral-900) h s l / 20%); --cds-alpha-4: hsl(from var(--cds-neutral-900) h s l / 35%); --cds-alpha-5: hsl(from var(--cds-neutral-900) h s l / 50%); --cds-alpha-6: hsl(from var(--cds-neutral-900) h s l / 60%); --cds-alpha-7: hsl(from var(--cds-neutral-900) h s l / 70%); --cds-alpha-8: hsl(from var(--cds-neutral-900) h s l / 85%); --cds-alpha-9: hsl(from var(--cds-neutral-900) h s l / 95%); --cds-surface-popover: var(--cds-surface-3); --cds-surface-panel: var(--cds-surface-2); --cds-page-bg: var(--cds-surface-0); --cds-fill-git-removed: var(--cds-text-git-removed); --cds-fill-git-draft: var(--cds-text-git-draft); --cds-fill-git-opened: var(--cds-fill-git-added); --cds-fill-git-opened-hover: var(--cds-fill-git-added-hover); --cds-fill-git-queued: var(--cds-fill-git-modified); --cds-fill-git-queued-hover: var(--cds-fill-git-modified-hover); --cds-fill-primary: var(--cds-neutral-900); --cds-fill-secondary-pressed-ring: var(--cds-border); --cds-fill-field-ring: var(--cds-border); --cds-fill-disabled: var(--cds-alpha-1); --cds-fill-control: var(--cds-alpha-2); --cds-fill-control-hover: var(--cds-alpha-3); --cds-bg-accent-chip: var(--cds-bg-accent); --cds-bg-danger-chip: var(--cds-bg-danger); --cds-bg-success-chip: var(--cds-bg-success); --cds-bg-warning-chip: var(--cds-bg-warning); --cds-bg-pro-chip: var(--cds-bg-pro); --cds-bg-git-added: var(--cds-text-git-added); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-added: color-mix(in srgb, var(--cds-text-git-added) 20%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-removed: var(--cds-text-git-removed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-removed: color-mix(in srgb, var(--cds-text-git-removed) 20%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-modified: var(--cds-text-git-modified); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-modified: color-mix(in srgb, var(--cds-text-git-modified) 20%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-merged: var(--cds-text-git-merged); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-merged: color-mix(in srgb, var(--cds-text-git-merged) 20%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-closed: var(--cds-text-git-closed); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-closed: color-mix(in srgb, var(--cds-text-git-closed) 20%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-conflicting: var(--cds-text-git-conflicting); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-conflicting: color-mix(in srgb, var(--cds-text-git-conflicting) 20%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-draft: var(--cds-text-git-draft); }
@supports (color:color-mix(in lab, red, red)) {
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-draft: color-mix(in srgb, var(--cds-text-git-draft) 20%, transparent); }
}
.cds-dark-scope[data-mode="dark"] { --cds-bg-git-opened: var(--cds-bg-git-added); --cds-bg-git-queued: var(--cds-bg-git-modified); --cds-bg-editor-canvas: var(--cds-neutral-60); --cds-bg-neutral: var(--cds-alpha-1); --cds-bg-neutral-hover: var(--cds-alpha-2); --cds-bg-neutral-chip: var(--cds-bg-neutral); --cds-bg-neutral-chip-hover: var(--cds-bg-neutral-hover); --cds-bg-user-message: var(--cds-bg-neutral); --cds-bg-user-message-personal: var(--cds-bg-tint-blue); --cds-text-user-message-personal: var(--cds-text-tint-blue); --cds-text-git-opened: var(--cds-text-git-added); --cds-text-git-queued: var(--cds-text-git-modified); --cds-text-disabled: var(--cds-alpha-4); --cds-on-primary: var(--cds-neutral-0); --cds-on-git-opened: var(--cds-on-git-added); --cds-on-git-queued: var(--cds-on-git-modified); --cds-chart-grid: var(--cds-alpha-2); --cds-panel-shadow: 0 0 0 1px var(--cds-border), var(--cds-shadow-sm); --cds-segmented-control-track: var(--cds-alpha-1); --cds-slider-track: var(--cds-alpha-2); }
}
.cds-root { --cds-radius--xs: calc(.3125rem * var(--cds-rem-scale,1)); --cds-radius--sm: calc(.3125rem * var(--cds-rem-scale,1)); --cds-radius--lg: calc(.4375rem * var(--cds-rem-scale,1)); --cds-h-control--xs: calc(1.25rem * var(--cds-rem-scale,1)); --cds-h-control--sm: calc(1.25rem * var(--cds-rem-scale,1)); --cds-h-control--lg: calc(1.75rem * var(--cds-rem-scale,1)); --cds-h-control-nested--xs: calc(1rem * var(--cds-rem-scale,1)); --cds-h-control-nested--sm: calc(1rem * var(--cds-rem-scale,1)); --cds-h-control-nested--lg: calc(1.25rem * var(--cds-rem-scale,1)); --cds-icon--xs: calc(.75rem * var(--cds-rem-scale,1)); --cds-icon--sm: calc(.75rem * var(--cds-rem-scale,1)); --cds-icon--lg: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-xs--xs: calc(.125rem * var(--cds-rem-scale,1)); --cds-pad-xs--sm: calc(.125rem * var(--cds-rem-scale,1)); --cds-pad-xs--lg: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-sm--xs: calc(.25rem * var(--cds-rem-scale,1)); --cds-pad-sm--sm: calc(.25rem * var(--cds-rem-scale,1)); --cds-pad-sm--lg: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-md--xs: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-md--sm: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-md--lg: calc(.625rem * var(--cds-rem-scale,1)); --cds-pad-lg--xs: calc(.625rem * var(--cds-rem-scale,1)); --cds-pad-lg--sm: calc(.625rem * var(--cds-rem-scale,1)); --cds-pad-lg--lg: calc(.875rem * var(--cds-rem-scale,1)); --cds-pad-xl--xs: calc(.875rem * var(--cds-rem-scale,1)); --cds-pad-xl--sm: calc(.875rem * var(--cds-rem-scale,1)); --cds-pad-xl--lg: calc(1.375rem * var(--cds-rem-scale,1)); --cds-font-size-caption--xs: calc(.625rem * var(--cds-rem-scale,1)); --cds-font-size-caption--sm: calc(.625rem * var(--cds-rem-scale,1)); --cds-font-size-caption--lg: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-body--xs: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-body--sm: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-body--lg: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-prose--xs: .8125rem; --cds-font-size-prose--sm: .8125rem; --cds-font-size-prose--lg: .9375rem; --cds-leading-body--xs: calc(1.0625rem * var(--cds-rem-scale,1)); --cds-leading-body--sm: calc(1.0625rem * var(--cds-rem-scale,1)); --cds-leading-body--lg: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-prose--xs: 1.1875rem; --cds-leading-prose--sm: 1.1875rem; --cds-leading-prose--lg: 1.375rem; --cds-checkbox--xs: calc(.875rem * var(--cds-rem-scale,1)); --cds-checkbox--sm: calc(.875rem * var(--cds-rem-scale,1)); --cds-checkbox--lg: calc(1.125rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph--xs: calc(.875rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph--sm: calc(.875rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph--lg: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-radius--xs: calc(.25rem * var(--cds-rem-scale,1)); --cds-checkbox-radius--sm: calc(.25rem * var(--cds-rem-scale,1)); --cds-checkbox-radius--lg: calc(.3125rem * var(--cds-rem-scale,1)); --cds-switch-h--xs: calc(.875rem * var(--cds-rem-scale,1)); --cds-switch-h--sm: calc(.875rem * var(--cds-rem-scale,1)); --cds-switch-h--lg: calc(1.125rem * var(--cds-rem-scale,1)); }
.cds-root[data-density="comfortable"] { --cds-radius--xs: calc(.375rem * var(--cds-rem-scale,1)); --cds-radius--sm: calc(.4375rem * var(--cds-rem-scale,1)); --cds-radius--lg: calc(.625rem * var(--cds-rem-scale,1)); --cds-h-control--xs: calc(1.5rem * var(--cds-rem-scale,1)); --cds-h-control--sm: calc(1.75rem * var(--cds-rem-scale,1)); --cds-h-control--lg: calc(2.5rem * var(--cds-rem-scale,1)); --cds-h-control-nested--xs: calc(1.125rem * var(--cds-rem-scale,1)); --cds-h-control-nested--sm: calc(1.25rem * var(--cds-rem-scale,1)); --cds-h-control-nested--lg: calc(1.75rem * var(--cds-rem-scale,1)); --cds-icon--xs: calc(1rem * var(--cds-rem-scale,1)); --cds-icon--sm: calc(1rem * var(--cds-rem-scale,1)); --cds-icon--lg: calc(1.5rem * var(--cds-rem-scale,1)); --cds-pad-xs--xs: calc(.25rem * var(--cds-rem-scale,1)); --cds-pad-xs--sm: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-xs--lg: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-sm--xs: calc(.375rem * var(--cds-rem-scale,1)); --cds-pad-sm--sm: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-sm--lg: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-md--xs: calc(.5rem * var(--cds-rem-scale,1)); --cds-pad-md--sm: calc(.625rem * var(--cds-rem-scale,1)); --cds-pad-md--lg: calc(1rem * var(--cds-rem-scale,1)); --cds-pad-lg--xs: calc(.75rem * var(--cds-rem-scale,1)); --cds-pad-lg--sm: calc(.875rem * var(--cds-rem-scale,1)); --cds-pad-lg--lg: calc(1.25rem * var(--cds-rem-scale,1)); --cds-pad-xl--xs: calc(1.25rem * var(--cds-rem-scale,1)); --cds-pad-xl--sm: calc(1.375rem * var(--cds-rem-scale,1)); --cds-pad-xl--lg: calc(1.75rem * var(--cds-rem-scale,1)); --cds-font-size-caption--xs: calc(.6875rem * var(--cds-rem-scale,1)); --cds-font-size-caption--sm: calc(.75rem * var(--cds-rem-scale,1)); --cds-font-size-caption--lg: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-body--xs: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-body--sm: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-body--lg: calc(.9375rem * var(--cds-rem-scale,1)); --cds-font-size-prose--xs: .875rem; --cds-font-size-prose--sm: .9375rem; --cds-font-size-prose--lg: 1.125rem; --cds-leading-body--xs: calc(1.1875rem * var(--cds-rem-scale,1)); --cds-leading-body--sm: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-body--lg: calc(1.375rem * var(--cds-rem-scale,1)); --cds-leading-prose--xs: 1.25rem; --cds-leading-prose--sm: 1.375rem; --cds-leading-prose--lg: 1.6875rem; --cds-checkbox--xs: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox--sm: calc(1.125rem * var(--cds-rem-scale,1)); --cds-checkbox--lg: calc(1.5rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph--xs: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph--sm: calc(1rem * var(--cds-rem-scale,1)); --cds-checkbox-glyph--lg: calc(1.25rem * var(--cds-rem-scale,1)); --cds-checkbox-radius--xs: calc(.25rem * var(--cds-rem-scale,1)); --cds-checkbox-radius--sm: calc(.3125rem * var(--cds-rem-scale,1)); --cds-checkbox-radius--lg: calc(.375rem * var(--cds-rem-scale,1)); --cds-switch-h--xs: calc(1rem * var(--cds-rem-scale,1)); --cds-switch-h--sm: calc(1.125rem * var(--cds-rem-scale,1)); --cds-switch-h--lg: calc(1.5rem * var(--cds-rem-scale,1)); }
.cds-root { --cds-font-size-body--textsm: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-body--textmd: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-body--textlg: calc(.9375rem * var(--cds-rem-scale,1)); --cds-font-size-body--own: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-prose--textsm: .8125rem; --cds-font-size-prose--xs--textsm: .8125rem; --cds-font-size-prose--sm--textsm: .8125rem; --cds-font-size-prose--lg--textsm: .875rem; --cds-font-size-prose--textlg: .9375rem; --cds-font-size-prose--xs--textlg: .875rem; --cds-font-size-prose--sm--textlg: .875rem; --cds-font-size-prose--lg--textlg: 1rem; --cds-font-size-heading--textsm: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-heading--textlg: calc(.9375rem * var(--cds-rem-scale,1)); --cds-leading-body--textsm: calc(1.1875rem * var(--cds-rem-scale,1)); --cds-leading-body--textmd: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-body--textlg: calc(1.375rem * var(--cds-rem-scale,1)); --cds-leading-body--own: calc(1.1875rem * var(--cds-rem-scale,1)); --cds-leading-prose--textsm: 1.1875rem; --cds-leading-prose--xs--textsm: 1.1875rem; --cds-leading-prose--sm--textsm: 1.1875rem; --cds-leading-prose--lg--textsm: 1.25rem; --cds-leading-prose--textlg: 1.375rem; --cds-leading-prose--xs--textlg: 1.25rem; --cds-leading-prose--sm--textlg: 1.25rem; --cds-leading-prose--lg--textlg: 1.5rem; --cds-leading-heading--textsm: calc(1.125rem * var(--cds-rem-scale,1)); --cds-leading-heading--textlg: calc(1.375rem * var(--cds-rem-scale,1)); }
.cds-root[data-density="comfortable"] { --cds-font-size-body--textsm: calc(.8125rem * var(--cds-rem-scale,1)); --cds-font-size-body--textmd: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-body--textlg: calc(.9375rem * var(--cds-rem-scale,1)); --cds-font-size-body--own: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-prose--textsm: .9375rem; --cds-font-size-prose--xs--textsm: .8125rem; --cds-font-size-prose--sm--textsm: .875rem; --cds-font-size-prose--lg--textsm: 1rem; --cds-font-size-prose--textlg: 1.125rem; --cds-font-size-prose--xs--textlg: .9375rem; --cds-font-size-prose--sm--textlg: 1rem; --cds-font-size-prose--lg--textlg: 1.125rem; --cds-font-size-heading--textsm: calc(.875rem * var(--cds-rem-scale,1)); --cds-font-size-heading--textlg: calc(1rem * var(--cds-rem-scale,1)); --cds-leading-body--textsm: calc(1.1875rem * var(--cds-rem-scale,1)); --cds-leading-body--textmd: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-body--textlg: calc(1.375rem * var(--cds-rem-scale,1)); --cds-leading-body--own: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-prose--textsm: 1.375rem; --cds-leading-prose--xs--textsm: 1.1875rem; --cds-leading-prose--sm--textsm: 1.25rem; --cds-leading-prose--lg--textsm: 1.5rem; --cds-leading-prose--textlg: 1.6875rem; --cds-leading-prose--xs--textlg: 1.375rem; --cds-leading-prose--sm--textlg: 1.5rem; --cds-leading-prose--lg--textlg: 1.6875rem; --cds-leading-heading--textsm: calc(1.25rem * var(--cds-rem-scale,1)); --cds-leading-heading--textlg: calc(1.5rem * var(--cds-rem-scale,1)); }
.cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size="sm"] { --cds-font-size-body: var(--cds-font-size-body--textsm); --cds-font-size-prose: var(--cds-font-size-prose--textsm); --cds-font-size-prose--xs: var(--cds-font-size-prose--xs--textsm); --cds-font-size-prose--sm: var(--cds-font-size-prose--sm--textsm); --cds-font-size-prose--lg: var(--cds-font-size-prose--lg--textsm); --cds-font-size-heading: var(--cds-font-size-heading--textsm); --cds-leading-body: var(--cds-leading-body--textsm); --cds-leading-prose: var(--cds-leading-prose--textsm); --cds-leading-prose--xs: var(--cds-leading-prose--xs--textsm); --cds-leading-prose--sm: var(--cds-leading-prose--sm--textsm); --cds-leading-prose--lg: var(--cds-leading-prose--lg--textsm); --cds-leading-heading: var(--cds-leading-heading--textsm); }
.cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size="md"] { --cds-font-size-body: var(--cds-font-size-body--textmd); --cds-leading-body: var(--cds-leading-body--textmd); }
.cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size="lg"] { --cds-font-size-body: var(--cds-font-size-body--textlg); --cds-font-size-prose: var(--cds-font-size-prose--textlg); --cds-font-size-prose--xs: var(--cds-font-size-prose--xs--textlg); --cds-font-size-prose--sm: var(--cds-font-size-prose--sm--textlg); --cds-font-size-prose--lg: var(--cds-font-size-prose--lg--textlg); --cds-font-size-heading: var(--cds-font-size-heading--textlg); --cds-leading-body: var(--cds-leading-body--textlg); --cds-leading-prose: var(--cds-leading-prose--textlg); --cds-leading-prose--xs: var(--cds-leading-prose--xs--textlg); --cds-leading-prose--sm: var(--cds-leading-prose--sm--textlg); --cds-leading-prose--lg: var(--cds-leading-prose--lg--textlg); --cds-leading-heading: var(--cds-leading-heading--textlg); }
.cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size] :where(button):not(:where([data-size], [data-step], [data-text-size] [data-size] *, [data-text-size] [data-step] *, [data-cds="TurnStatusStep"] > *)), .cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size] :where(input):not(:where([data-size], [data-step], [data-text-size] [data-size] *, [data-text-size] [data-step] *, [data-cds="TurnStatusStep"] > *)), .cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size] :where(textarea):not(:where([data-size], [data-step], [data-text-size] [data-size] *, [data-text-size] [data-step] *, [data-cds="TurnStatusStep"] > *)), .cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size] :where(select):not(:where([data-size], [data-step], [data-text-size] [data-size] *, [data-text-size] [data-step] *, [data-cds="TurnStatusStep"] > *)), .cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size] :where(a.cds-reset):not(:where([data-size], [data-step], [data-text-size] [data-size] *, [data-text-size] [data-step] *, [data-cds="TurnStatusStep"] > *)), .cds-root :where([data-cds="AssistantMessage"], [data-cds="UserMessage"], [data-cds="ChatComposerQueuedMessages"])[data-text-size] :where([role="toolbar"]):not(:where([data-size], [data-step], [data-text-size] [data-size] *, [data-text-size] [data-step] *, [data-cds="TurnStatusStep"] > *)) { --cds-font-size-body: var(--cds-font-size-body--own); --cds-leading-body: var(--cds-leading-body--own); }
.cds-root [data-size="xs"] { --cds-radius: var(--cds-radius--xs); --cds-h-control: var(--cds-h-control--xs); --cds-h-control-nested: var(--cds-h-control-nested--xs); --cds-icon: var(--cds-icon--xs); --cds-pad-xs: var(--cds-pad-xs--xs); --cds-pad-sm: var(--cds-pad-sm--xs); --cds-pad-md: var(--cds-pad-md--xs); --cds-pad-lg: var(--cds-pad-lg--xs); --cds-pad-xl: var(--cds-pad-xl--xs); --cds-font-size-caption: var(--cds-font-size-caption--xs); --cds-font-size-body: var(--cds-font-size-body--xs); --cds-font-size-prose: var(--cds-font-size-prose--xs); --cds-leading-body: var(--cds-leading-body--xs); --cds-leading-prose: var(--cds-leading-prose--xs); --cds-checkbox: var(--cds-checkbox--xs); --cds-checkbox-glyph: var(--cds-checkbox-glyph--xs); --cds-checkbox-radius: var(--cds-checkbox-radius--xs); --cds-switch-h: var(--cds-switch-h--xs); }
.cds-root [data-size="sm"] { --cds-radius: var(--cds-radius--sm); --cds-h-control: var(--cds-h-control--sm); --cds-h-control-nested: var(--cds-h-control-nested--sm); --cds-icon: var(--cds-icon--sm); --cds-pad-xs: var(--cds-pad-xs--sm); --cds-pad-sm: var(--cds-pad-sm--sm); --cds-pad-md: var(--cds-pad-md--sm); --cds-pad-lg: var(--cds-pad-lg--sm); --cds-pad-xl: var(--cds-pad-xl--sm); --cds-font-size-caption: var(--cds-font-size-caption--sm); --cds-font-size-body: var(--cds-font-size-body--sm); --cds-font-size-prose: var(--cds-font-size-prose--sm); --cds-leading-body: var(--cds-leading-body--sm); --cds-leading-prose: var(--cds-leading-prose--sm); --cds-checkbox: var(--cds-checkbox--sm); --cds-checkbox-glyph: var(--cds-checkbox-glyph--sm); --cds-checkbox-radius: var(--cds-checkbox-radius--sm); --cds-switch-h: var(--cds-switch-h--sm); }
.cds-root [data-size="lg"] { --cds-radius: var(--cds-radius--lg); --cds-h-control: var(--cds-h-control--lg); --cds-h-control-nested: var(--cds-h-control-nested--lg); --cds-icon: var(--cds-icon--lg); --cds-pad-xs: var(--cds-pad-xs--lg); --cds-pad-sm: var(--cds-pad-sm--lg); --cds-pad-md: var(--cds-pad-md--lg); --cds-pad-lg: var(--cds-pad-lg--lg); --cds-pad-xl: var(--cds-pad-xl--lg); --cds-font-size-caption: var(--cds-font-size-caption--lg); --cds-font-size-body: var(--cds-font-size-body--lg); --cds-font-size-prose: var(--cds-font-size-prose--lg); --cds-leading-body: var(--cds-leading-body--lg); --cds-leading-prose: var(--cds-leading-prose--lg); --cds-checkbox: var(--cds-checkbox--lg); --cds-checkbox-glyph: var(--cds-checkbox-glyph--lg); --cds-checkbox-radius: var(--cds-checkbox-radius--lg); --cds-switch-h: var(--cds-switch-h--lg); }
.cds-root { color-scheme: light; }
@media screen {
[data-mode="dark"] .cds-root:not([data-mode="light"]):not([data-mode="system"]), .cds-root[data-mode="dark"] { color-scheme: dark; }
}
@media screen and (prefers-color-scheme: dark) {
[data-mode="system"] .cds-root:not([data-mode="light"]):not([data-mode="dark"]), .cds-root[data-mode="system"], .cds-root:not([data-mode]):not([data-mode] *) { color-scheme: dark; }
}
@media screen {
.cds-dark-scope[data-mode="dark"] { color-scheme: dark; }
}
@property --cds-scroll-fade-size { syntax: "<length>"; inherits: false; initial-value: 28px; }
@property --cds-scroll-fade-top { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-bottom { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-left { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-right { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-top-raw { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-bottom-raw { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-left-raw { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-right-raw { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-y-active { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-x-active { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-top-on { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cds-scroll-fade-bottom-on { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cds-scroll-fade-left-on { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --cds-scroll-fade-right-on { syntax: "<number>"; inherits: false; initial-value: 1; }
@keyframes cds-scroll-fade-top {
0% { --cds-scroll-fade-top-raw: 0px; }
100% { --cds-scroll-fade-top-raw: var(--cds-scroll-fade-size); }
}
@keyframes cds-scroll-fade-bottom {
0% { --cds-scroll-fade-bottom-raw: var(--cds-scroll-fade-size); }
100% { --cds-scroll-fade-bottom-raw: 0px; }
}
@keyframes cds-scroll-fade-left {
0% { --cds-scroll-fade-left-raw: 0px; }
100% { --cds-scroll-fade-left-raw: var(--cds-scroll-fade-size); }
}
@keyframes cds-scroll-fade-right {
0% { --cds-scroll-fade-right-raw: var(--cds-scroll-fade-size); }
100% { --cds-scroll-fade-right-raw: 0px; }
}
@keyframes cds-scroll-fade-y-active {
0%, 100% { --cds-scroll-fade-y-active: 1; }
}
@keyframes cds-scroll-fade-x-active {
0%, 100% { --cds-scroll-fade-x-active: 1; }
}
@property --cds-scroll-fade-strip-raw { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --cds-scroll-fade-strip-active { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes cds-scroll-fade-strip-in {
0% { --cds-scroll-fade-strip-raw: 0; }
100% { --cds-scroll-fade-strip-raw: 1; }
}
@keyframes cds-scroll-fade-strip-out {
0% { --cds-scroll-fade-strip-raw: 1; }
100% { --cds-scroll-fade-strip-raw: 0; }
}
@keyframes cds-scroll-fade-strip-active {
0%, 100% { --cds-scroll-fade-strip-active: 1; }
}
@property --cds-sticky-edge-start { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cds-sticky-edge-end { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cds-sticky-edge-active { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes cds-sticky-edge-start {
0% { --cds-sticky-edge-start: 0; }
100% { --cds-sticky-edge-start: 1; }
}
@keyframes cds-sticky-edge-end {
0% { --cds-sticky-edge-end: 1; }
100% { --cds-sticky-edge-end: 0; }
}
@keyframes cds-sticky-edge-active {
0%, 100% { --cds-sticky-edge-active: 1; }
}
@keyframes cds-editor-comment-working {
50% { background-color: var(--cds-bg-editor-comment-active); }
}
@property --_cds-font-weight-role { syntax: "*"; inherits: false; }
@property --_cds-font-axis-wght-role { syntax: "*"; inherits: false; }
:root { --t-bg: var(--cds-page-bg); --t-panel: var(--cds-surface-panel); --t-bg-warm: var(--cds-neutral-900); }
@supports (color:color-mix(in lab, red, red)) {
:root { --t-bg-warm: color-mix(in srgb, var(--cds-neutral-900) 3%, var(--cds-page-bg)); }
}
:root { --t-strip: var(--cds-neutral-900); }
@supports (color:color-mix(in lab, red, red)) {
:root { --t-strip: color-mix(in srgb, var(--cds-neutral-900) 6%, var(--cds-page-bg)); }
}
:root { --t-fg: var(--cds-text-primary); --t-fg-secondary: var(--cds-text-secondary); --t-fg-muted: var(--cds-text-muted); --t-border: var(--cds-border); --t-border-strong: var(--cds-border-strong); --t-wash-1: var(--cds-alpha-1); --t-wash-2: var(--cds-alpha-2); --t-wash-3: var(--cds-alpha-3); --t-ink: var(--cds-fill-primary); --t-ink-hover: var(--cds-fill-primary-hover); --t-ink-fg: var(--cds-on-primary); --t-blue: var(--cds-fill-accent); --t-blue-text: var(--cds-text-accent); --t-blue-tint: var(--cds-bg-accent); --t-ok: var(--cds-text-success); --t-good: var(--cds-fill-success); --t-bad: var(--cds-text-danger); --t-warn: var(--cds-text-warning); --t-sync-pending: var(--cds-fill-warning); --t-shimmer-a: var(--cds-alpha-1); --t-shimmer-b: var(--cds-alpha-2); --t-accent: var(--cds-clay); --t-accent-fg: var(--cds-on-brand); --t-clay-text: var(--cds-clay-emphasized); --t-heather: var(--cds-heather); --t-plum: var(--cds-plum); --t-cactus: var(--cds-cactus); --t-mineral: var(--cds-mineral); --t-oat: #e3dacc; --t-orchid: #e5cada; --t-fig: #c46686; --t-coral: #ebcccc; --t-poppy: #de6262; --t-matcha: #ced6bf; --t-olive: #788c5d; --t-cloud: #c5d3e0; --t-sky: #6a9bcc; --t-pencil: #f0ac54; --t-app-accent: var(--t-blue); --t-app-accent-fg: var(--cds-on-accent); --t-measure: var(--cds-fill-danger); --mc-foot-inset: env(safe-area-inset-bottom,0px); --mc-composer-inset: 0px; }
.cds-root { --cds-cursor-interactive: default; }
[data-appifact-content] :is(b, strong) { font-variation-settings: normal; font-weight: 700; }
[data-appifact-content] { font-variation-settings: normal; }
.cds-root { font-synthesis: initial; }
[data-appifact-content] { --cds-font-sans: var(--cds-font-system); --cds-font-sans-display: var(--cds-font-sans); font-family: var(--cds-font-sans); }
[data-appifact-content] [data-mc-chrome] { --cds-font-sans: var(--font-anthropic-sans,var(--cds-font-system)); --cds-font-sans-display: var(--cds-font-sans); font-family: var(--cds-font-sans); }
.mc-tabbar { background: var(--cds-page-bg); border-bottom: 1px solid var(--cds-border); flex: 0 0 auto; justify-content: center; align-items: center; min-width: 0px; height: 48px; padding: 0px 12px; display: flex; }
.cds-root [data-kit="thumb-actions"] [data-cds="Button"]::before { content: ""; position: absolute; inset: -4px; }
@media (pointer: coarse) {
.cds-root [data-cds="Button"], .cds-root [data-cds="TextInput"], .cds-root [data-cds="NumberInput"], .cds-root [data-cds="SegmentedControl"], .cds-root [data-kit="PropertySelect"], .cds-root .mc-tabbar [role="tab"], .cds-root [data-cds="Menu"] [role^="menuitem"], .cds-root [data-kit="MenuItem"] { min-height: 40px; }
.cds-root [data-cds="Button"] { min-width: 40px; }
.cds-root [data-cds="Menu"] [data-cds-sheet-control]:not(:focus-visible):not([data-highlighted]):not([data-cds-sheet-control-held]) { min-height: 0px; }
.cds-root [data-cds="Button"][data-video-play] { min-width: 0px; min-height: 0px; }
.cds-root [data-cds="TextInput"]:has([data-kit="list-search"]) { isolation: isolate; min-height: 0px; position: relative; }
.cds-root [data-cds="TextInput"]:has([data-kit="list-search"])::before { content: ""; z-index: -1; position: absolute; inset: -8px 0px; }
.cds-root [data-kit="list-search"] { transform-origin: 0px center; transform: scale(0.8125); }
.cds-root [data-cds="TextInput"]:has([data-kit="list-search"]) [data-cds="Button"] { min-width: 0px; min-height: 0px; }
.cds-root [data-cds="TextInput"]:has([data-kit="list-search"]) [data-cds="Button"]::before { content: ""; position: absolute; inset: -11px -8px -11px -14px; }
[data-mc-surface="popover"] :is([data-cds="Button"], [data-cds="TextInput"], [data-cds="NumberInput"]) { min-width: 0px; min-height: 0px; }
[data-mc-surface="popover"] [data-mc-item]::before { content: ""; position: absolute; inset: -4px; }
[data-mc-surface="popover"] [data-mc-group] { row-gap: 8px; }
[data-mc-surface="popover"] :is([data-cds="TextInput"], [data-cds="NumberInput"]) { isolation: isolate; position: relative; }
[data-mc-surface="popover"] :is([data-cds="TextInput"], [data-cds="NumberInput"])::before { content: ""; z-index: -1; position: absolute; inset: -4px 0px; }
.cds-root [data-cds="SplitDropdownButton"] [data-cds="Button"]:last-child::before { content: ""; position: absolute; inset: 0px -16px 0px 0px; }
.tb-root [data-cds="Button"] { min-width: 42px; min-height: 0px; }
.tb-root [data-cds="Button"]::before { content: ""; position: absolute; inset: -9px 0px; }
.tb-root [data-tb-paddle] [data-cds="Button"] { min-width: 0px; }
.tb-root [data-tb-paddle] [data-cds="Button"]::before { content: none; }
.tb-root[data-touch-targets="square"]:not([data-tb-overlay]), .tb-root[data-touch-targets="square"] .tb-card, .tb-root[data-touch-targets="square"] .tb-scroll, .tb-root[data-touch-targets="square"] .tb-slot, .tb-root[data-touch-targets="square"] .tb-tail, .tb-root[data-touch-targets="square"] .tb-publish, .tb-root[data-touch-targets="square"] [data-tb-cluster] { gap: 4px; }
.tb-root[data-touch-targets="square"] .tb-scroll { --tb-strip-pad: 2px; padding-inline: var(--tb-strip-pad); }
.tb-root[data-touch-targets="square"] [data-cds="Button"]::before { inset: -4px 0px; }
.tb-root[data-touch-targets="square"] [data-tb-icon] { margin-inline: 2px; }
.tb-root[data-touch-targets="square"] [data-tb-icon] [data-cds="Button"] { min-width: 0px; }
.tb-root[data-touch-targets="square"] [data-tb-icon] [data-cds="Button"]::before { inset: -4px; }
.tb-root[data-touch-targets="square"] [data-tb-readout] [data-cds="Button"] { padding-inline: 8px; }
.cds-root [data-cds="ChatComposerActions"] [data-cds="Button"] { min-width: 0px; min-height: 0px; }
.cds-root [data-cds="ChatComposerActions"] [data-cds="Button"]::before { content: ""; position: absolute; inset: -4px; }
[data-kit="panel-header"] [data-cds="Button"] { min-width: 0px; min-height: 0px; }
[data-kit="panel-header"] [data-cds="Button"]::before { content: ""; position: absolute; inset: -8px; }
[data-kit="panel-header"] [role="tab"]::after { content: ""; position: absolute; inset: -8px 0px; }
.cds-root [data-kit="thumb-actions"] [data-cds="Button"] { min-width: 0px; min-height: 0px; }
.cds-root [data-kit="thumb-actions"] [data-cds="Button"]::before { inset: -8px; }
.cds-root [data-kit="gap-add"] [data-cds="Button"], .cds-root [data-kit="strip-action"] [data-cds="Button"] { min-width: 0px; min-height: 0px; }
.cds-root [data-kit="gap-add"] [data-cds="Button"]::before { content: ""; inset: calc(-1 * var(--gap-add-slop,8px)); position: absolute; }
.cds-root [data-kit="strip-action"] [data-cds="Button"]::before { content: ""; position: absolute; inset: -10px -10px -10px -8px; }
.cds-root [data-kit="row-reset"] { width: 20px; min-width: 0px; height: 20px; min-height: 0px; margin-left: 6px; }
.cds-root [data-kit="row-reset"]::before { content: ""; position: absolute; inset: -10px; }
.cds-root [data-cds="Switch"]::after { content: ""; position: absolute; inset: -10px -2px; }
}
@keyframes mc-drop-ring-in {
0% { opacity: 0; transform: scale(1.005); }
}
@keyframes mc-drop-icon-rise {
0% { opacity: 0; transform: translateY(12px); }
}
.kit-rn, .kit-rn-in { box-sizing: content-box; max-width: 100%; font: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap; border: 0px; border-radius: 6px; outline: 0px; margin: -3px -6px; padding: 3px 6px; }
.kit-rn { text-overflow: ellipsis; vertical-align: middle; min-width: 0px; display: inline-block; overflow: hidden; }
.kit-rn-editable:hover { background: var(--t-wash-1); }
.kit-rn-editable:focus-visible { box-shadow: var(--cds-focus-shadow); }
@media (forced-colors: active) {
.kit-rn-editable:focus-visible, .kit-rn-in:focus-visible { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
}
@media (pointer: coarse) {
.kit-rn-editable { margin-block: -10px; padding-block: 10px; }
}
.kit-rn-on { vertical-align: middle; min-width: 0px; max-width: 100%; font: inherit; letter-spacing: inherit; color: inherit; align-items: center; margin: 0px; padding: 0px; display: inline-flex; overflow: visible; }
.kit-rn-in { field-sizing: content; width: auto; min-width: var(--kit-rn-min-w,2ch); max-width: var(--kit-rn-max-w,100%); background: var(--t-panel); color: var(--t-fg); box-shadow: 0 0 0 1px var(--t-app-accent); }
.kit-rn-in::placeholder { color: var(--cds-text-muted); }
[data-mc-surface="popover"] [data-mc-item]:focus-visible { z-index: 1; }
@media (pointer: fine) {
[data-mc-surface="popover"] [data-mc-group] [data-mc-item]::before { content: ""; inset-block: calc(var(--mc-strip-pad) * -1); inset-inline: calc(var(--mc-group-gap) / -2); position: absolute; }
[data-mc-surface="popover"] [data-mc-item][data-mc-bordered]::before { margin: -1px; }
[data-mc-surface="popover"] [data-mc-item]:not([data-mc-group] *, [data-link-mode] *)::before { content: ""; inset-block: calc(var(--mc-strip-pad) * -1); inset-inline: calc(var(--mc-strip-gap) / -2); position: absolute; }
[data-mc-surface="popover"][data-mc-wrapped] [data-mc-item]:not([data-mc-group] *, [data-link-mode] *)::before, [data-mc-surface="popover"][data-mc-wrapped] [data-mc-group] [data-mc-item]::before { inset-block: -2px; }
[data-mc-surface="popover"] [data-mc-group] > [data-mc-item]:first-child::before, [data-mc-surface="popover"] [data-mc-group] > :first-child [data-mc-item]::before { inset-inline-start: calc(var(--mc-strip-gap) / -2); }
[data-mc-surface="popover"] [data-mc-group] > [data-mc-item]:last-child::before, [data-mc-surface="popover"] [data-mc-group] > :last-child [data-mc-item]::before { inset-inline-end: calc(var(--mc-strip-gap) / -2); }
[data-mc-surface="popover"] [data-mc-divider] + [data-mc-group] > [data-mc-item]:first-child::before, [data-mc-surface="popover"] [data-mc-divider] + [data-mc-group] > :first-child [data-mc-item]::before { inset-inline-start: calc(var(--mc-strip-gap) * -1 - .5px); }
[data-mc-surface="popover"] [data-mc-group]:has(+ [data-mc-divider]) > [data-mc-item]:last-child::before, [data-mc-surface="popover"] [data-mc-group]:has(+ [data-mc-divider]) > :last-child [data-mc-item]::before { inset-inline-end: calc(var(--mc-strip-gap) * -1 - .5px); }
[data-mc-surface="popover"] [data-mc-group]:first-child > [data-mc-item]:first-child::before, [data-mc-surface="popover"] [data-mc-group]:first-child > :first-child [data-mc-item]::before { inset-inline-start: calc(var(--mc-strip-pad) * -1); }
[data-mc-surface="popover"] [data-mc-group]:last-child > [data-mc-item]:last-child::before, [data-mc-surface="popover"] [data-mc-group]:last-child > :last-child [data-mc-item]::before { inset-inline-end: calc(var(--mc-strip-pad) * -1); }
}
[data-mc-through], [data-mc-through] * { pointer-events: none !important; }
[data-mc-strip] { --tb-plane: var(--cds-page-bg); --tb-fade-solid: 30%; }
[data-mc-strip] [data-tb-fade] { display: none; }
[data-mc-strip] [data-tb-fade="start"] { border-start-start-radius: inherit; border-end-start-radius: inherit; }
[data-mc-strip] [data-tb-fade="end"] { border-start-end-radius: inherit; border-end-end-radius: inherit; }
[data-mc-strip][data-mc-more-start] [data-tb-fade="start"], [data-mc-strip][data-mc-more-end] [data-tb-fade="end"] { display: block; }
[data-mc-row] { scroll-padding-inline: 48px; }
[data-mc-row]::-webkit-scrollbar { display: none; }
.tb-root { --tb-plane: var(--tb-bg,var(--t-bg)); container: tb / inline-size; }
.tb-root:not([data-tb-overlay]) { background-color: var(--tb-plane); }
.tb-root:not([data-tb-overlay]) .tb-card { align-self: stretch; }
.tb-root[data-tb-overlay] { pointer-events: none; }
.tb-root[data-tb-overlay] .tb-card { --tb-plane: var(--cds-page-bg); pointer-events: auto; }
[data-tb-overlay-clear]:has(> [data-mc-chrome]:not(:empty), > [data-tb-clear-above]:not(:empty)) { padding-top: var(--tb-overlay-h,0px); background-color: var(--tb-row-bg,transparent); }
[data-tb-overlay-clear]:has(> [data-mc-chrome]:not(:empty), > [data-tb-clear-above]:not(:empty)) ~ [data-appifact-content] { --tb-overlay-h: 0px; }
.tb-root[data-tb-overlay] .tb-card { --tb-ring-inside: calc(var(--cds-radius) + 3px); height: calc(var(--cds-h-control) + 10px); margin-block: 12px 8px; padding: 1px 5px; }
.tb-root[data-tb-overlay] .tb-card-start { margin-inline: 12px 8px; }
.tb-root[data-tb-overlay] .tb-card-end { margin-inline-end: 12px; }
@container tb (max-width: 25rem) {
.tb-root[data-tb-overlay] .tb-card-start { margin-inline: 8px 6px; }
.tb-root[data-tb-overlay] .tb-card-end { margin-inline-end: 8px; }
}
@media (pointer: coarse) {
.tb-root[data-tb-overlay] .tb-card { height: 48px; }
}
.tb-card-start { flex-shrink: 1000; overflow: clip; }
.tb-end-strip { flex-shrink: 1000; }
.tb-root .tb-card-end > .tb-end-strip > .tb-scroll { --tb-strip-pad: 0px; }
.tb-root:not([data-tb-overlay]) .tb-card-end > .tb-end-strip > .tb-scroll { margin-inline: -4px; padding-inline: 4px; scroll-padding-inline: 4px; }
.tb-root:not([data-tb-overlay]) .tb-end-strip > [data-tb-paddle]::before { content: ""; background: inherit; width: 4px; position: absolute; inset-block: 0px; }
.tb-root:not([data-tb-overlay]) .tb-end-strip > [data-tb-paddle]:not(:last-child)::before { left: -4px; }
.tb-root:not([data-tb-overlay]) .tb-end-strip > [data-tb-paddle]:last-child::before { right: -4px; }
.tb-root[data-tb-overlay] .tb-scroll { padding-inline: calc(4px + var(--tb-strip-pad,0px)); scroll-padding-inline: calc(4px + var(--tb-strip-pad,0px)); clip-path: inset(0 round var(--tb-ring-inside)); margin-inline: -4px; }
@container tb (min-width: 20rem) {
.tb-card-start[data-tb-floor] { min-width: 88px; }
.tb-card-start[data-tb-hug] { min-width: var(--tb-lead-floor,0px); }
}
@media (pointer: coarse) {
@container tb (min-width: 20rem) {
.tb-card-start[data-tb-floor] { min-width: 92px; }
.tb-root[data-touch-targets="square"] .tb-card-start[data-tb-floor] { min-width: 118px; }
}
@container tb (min-width: 23rem) {
.tb-root:not([data-touch-targets="square"]) .tb-card-start[data-tb-floor] { min-width: 140px; }
}
}
.tb-card-end, .tb-card-end .tb-tail, .tb-card-end .tb-tail > .tb-slot { flex-shrink: 1; min-width: 0px; }
.tb-card-end :is(.tb-slot, .tb-slot > .contents) > :is(input, :is(div, span, label, form):is([data-cds="TextInput"], [data-cds="NumberInput"], [data-cds="SegmentedControl"], :has(> input))) { min-width: min(100%, 3rem); }
@container tb (max-width: 25rem) {
.tb-card-end :is(.tb-slot, .tb-slot > .contents) > :is(input, :is(div, span, label, form):is([data-cds="TextInput"], [data-cds="NumberInput"], [data-cds="SegmentedControl"], :has(> input))) { min-width: min(100%, 2.5rem); }
}
.tb-root[data-tb-overlay] .tb-card-end > .tb-end-strip:first-child > .tb-scroll > .tb-slot:first-child > :is(input, :is(div, span, label, form):is([data-cds="TextInput"], [data-cds="NumberInput"], [data-cds="SegmentedControl"], :has(> input))):first-child, .tb-root[data-tb-overlay] .tb-card-end > .tb-tail:first-child > .tb-slot:first-child > :is(input, :is(div, span, label, form):is([data-cds="TextInput"], [data-cds="NumberInput"], [data-cds="SegmentedControl"], :has(> input))):first-child, .tb-root[data-tb-overlay] .tb-card-end > .tb-tail:first-child > .tb-slot:first-child > .contents:first-child > :is(input, :is(div, span, label, form):is([data-cds="TextInput"], [data-cds="NumberInput"], [data-cds="SegmentedControl"], :has(> input))):first-child { margin-inline-start: 4px; }
.tb-root[data-tb-overlay] .tb-card-end > :is(.tb-end-strip, .tb-tail):not(:has(~ :not([data-tb-empty]))) :is(input, :is(div, span, label, form):is([data-cds="TextInput"], [data-cds="NumberInput"], [data-cds="SegmentedControl"], :has(> input))):last-child { margin-inline-end: 4px; }
.tb-root:not([data-tb-overlay]) .tb-lock:first-child { margin-inline-start: 4px; }
@media (pointer: coarse) {
.tb-root:not([data-tb-overlay]) .tb-lock:first-child { margin-inline-start: 0px; }
}
.tb-root :is(.tb-card, .tb-slot, .tb-end-strip, .tb-tail, .tb-publish)[data-tb-empty], .tb-scroll > .tb-slot + .tb-slot > .tb-divider:first-child { display: none; }
.tb-scroll > .tb-slot:not([data-tb-empty]) + .tb-slot:not([data-tb-empty])::before, .tb-root[data-tb-overlay] .tb-card-end > .tb-end-strip:not([data-tb-empty]) + .tb-tail:not([data-tb-empty], [data-tb-only-dot])::before, .tb-root[data-tb-overlay] .tb-card-end > :is(.tb-end-strip, .tb-tail):not([data-tb-empty]) ~ .tb-publish[data-tb-has-save]::before { content: ""; background-color: var(--t-border); flex: 0 0 auto; align-self: center; width: 1px; height: 18px; margin-inline: 2px; }
.tb-root [data-tb-paddle] { background-color: var(--tb-plane); }
.tb-root[data-tb-overlay] [data-tb-paddle]::before { content: ""; background: inherit; width: 4px; position: absolute; inset-block: 0px; }
.tb-root[data-tb-overlay] [data-tb-paddle]:not(:last-child)::before { left: -4px; }
.tb-root[data-tb-overlay] [data-tb-paddle]:last-child::before { right: -4px; }
.tb-root[data-tb-overlay] [data-tb-paddle]:not(:last-child) { clip-path: inset(0 -8px 0 -4px round var(--tb-ring-inside) 0 0 var(--tb-ring-inside)); }
.tb-root[data-tb-overlay] [data-tb-paddle]:last-child { clip-path: inset(0 -4px 0 -8px round 0 var(--tb-ring-inside) var(--tb-ring-inside) 0); }
:is(.tb-root, [data-mc-strip]) [data-tb-fade="start"] { background-image: linear-gradient(to right, var(--tb-plane) var(--tb-fade-solid,0%), transparent); }
:is(.tb-root, [data-mc-strip]) [data-tb-fade="end"] { background-image: linear-gradient(to left, var(--tb-plane) var(--tb-fade-solid,0%), transparent); }
.tb-scroll { scrollbar-width: none; }
.tb-scroll::-webkit-scrollbar { display: none; }
@container tb (max-width: 26rem) {
.tb-status-text, .tb-scroll:not([data-tb-lock-words]) .tb-lock-words { display: none; }
.tb-scroll[data-tb-lock-words="yield"] > .tb-slot { min-width: 0px; }
.tb-scroll[data-tb-lock-words="yield"] .tb-yields { text-overflow: ellipsis; white-space: nowrap; min-width: 0px; overflow: hidden; }
}
.tb-root[data-pin-fixed] .tb-pin-scroll { display: none; }
.tb-sync-dot { width: 22px; height: var(--cds-h-control); border-radius: var(--cds-radius); cursor: default; background: 0px 0px; border: 0px; flex-shrink: 0; justify-content: center; align-items: center; display: inline-flex; }
.tb-sync-dot[data-quiet] { display: none; }
.tb-sync-dot:not([aria-disabled="true"]):hover { background: var(--cds-fill-ghost-hover); }
.tb-sync-dot:focus-visible { box-shadow: var(--cds-focus-shadow); outline: none; }
@media (forced-colors: active) {
.tb-sync-dot:focus-visible { outline-offset: 2px; outline: rgba(0, 0, 0, 0) solid 2px; }
}
@media (pointer: coarse) {
.tb-sync-dot { width: 42px; height: 42px; }
.tb-root .tb-sync-dot { height: var(--cds-h-control); position: relative; }
.tb-root .tb-sync-dot::before { content: ""; position: absolute; inset: -9px 0px; }
.tb-root[data-touch-targets="square"] .tb-sync-dot { width: 28px; }
.tb-root[data-touch-targets="square"] .tb-sync-dot::before { inset: -4px -8px -4px -4px; }
}
.tb-sync-dot-mark { background: var(--cds-text-muted); border-radius: 9999px; width: 8px; height: 8px; }
@supports (color:color-mix(in lab, red, red)) {
.tb-sync-dot-mark { background: color-mix(in srgb, var(--cds-text-muted) 55%, transparent); }
}
.tb-sync-dot-mark { transition: background-color 0.16s; }
.tb-sync-dot[data-sync="pending"] .tb-sync-dot-mark { background: var(--cds-fill-warning); }
.tb-sync-dot[data-sync="error"] .tb-sync-dot-mark { background: var(--cds-fill-danger); }
.tb-sync-dot[data-sync="loading"] .tb-sync-dot-mark { box-shadow: inset 0 0 0 1.5px var(--cds-text-muted); background: 0px 0px; }
@media (prefers-reduced-motion: reduce) {
.tb-sync-dot-mark { transition: none; }
}
@keyframes mc-shimmer {
0% { background-position: -200px 0px; }
100% { background-position: 200px 0px; }
}
.mc-shimmer { background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; color: rgba(0, 0, 0, 0); pointer-events: none; user-select: none; background-size: 400px 100%; border-radius: 6px; animation: 1.4s linear 0s infinite normal none running mc-shimmer; }
@media (prefers-reduced-motion: reduce) {
.mc-shimmer { animation: auto ease 0s 1 normal none running none; }
}
@keyframes mc-spin {
100% { transform: rotate(360deg); }
}
.mc-spinner { border: 2px solid var(--t-fg-muted); border-radius: 9999px; width: 12px; height: 12px; display: inline-block; }
@supports (color:color-mix(in lab, red, red)) {
.mc-spinner { border: 2px solid color-mix(in srgb, var(--t-fg-muted) 30%, transparent); }
}
.mc-spinner { border-top-color: var(--t-fg-muted); animation: 0.9s linear 0s infinite normal none running mc-spin; }
@media (prefers-reduced-motion: reduce) {
.mc-spinner { animation: auto ease 0s 1 normal none running none; }
}
.kit-scrollbar { scrollbar-width: thin; scrollbar-color: var(--cds-alpha-3) transparent; }
.kit-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.kit-scrollbar::-webkit-scrollbar-track { background: 0px 0px; }
.kit-scrollbar::-webkit-scrollbar-thumb { background: var(--cds-alpha-3); border-radius: 3px; }
.kit-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--cds-alpha-4); }
.mc-peer-cursors { pointer-events: none; z-index: 40; position: absolute; inset: 0px; overflow: visible; }
.mc-peer-cursor { will-change: transform; transition: transform 80ms linear, opacity 0.2s; position: absolute; top: 0px; left: 0px; }
.mc-peer-cursor[data-idle="true"] { opacity: 0.55; }
.mc-peer-cursor-arrow { filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 1px 1px); display: block; }
.mc-peer-tag { color: rgb(255, 255, 255); position: absolute; top: 14px; left: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; }
.mc-peer-cursor-label { border-radius: 9999px; padding: 1px 6px; font-size: 11px; line-height: 16px; }
.mc-peer-tag-name { white-space: nowrap; text-overflow: ellipsis; max-width: 24ch; overflow: hidden; }
.mc-cursor-chat { color: rgb(255, 255, 255); white-space: pre; border-radius: 3px 16px 16px; padding: 6px 12px; font-size: 13px; line-height: 18px; display: inline-block; box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px; }
.mc-peer-tag-name, .mc-peer-tag-line { animation: 0.12s ease-out 0.11s 1 normal both running mc-chat-content-in; display: block; }
.mc-peer-tag[data-beat="0"] { animation: mc-cursor-chat-fade-0 var(--mc-chat-fade,.6s) ease-in-out var(--mc-chat-hold,5s) forwards; }
.mc-peer-tag[data-beat="1"] { animation: mc-cursor-chat-fade-1 var(--mc-chat-fade,.6s) ease-in-out var(--mc-chat-hold,5s) forwards; }
@keyframes mc-chat-content-in {
0% { opacity: 0; }
}
@keyframes mc-cursor-chat-fade-0 {
100% { opacity: 0; }
}
@keyframes mc-cursor-chat-fade-1 {
100% { opacity: 0; }
}
.mc-cursor-chat-self { z-index: 2147483000; pointer-events: none; transition: opacity var(--mc-chat-fade,.6s) ease-in-out; position: fixed; top: 0px; left: 0px; }
.mc-cursor-chat-self[data-fading="true"] { opacity: 0; }
.mc-cursor-chat-self .mc-cursor-chat { transform-origin: 0px 0px; transition: transform var(--mc-chat-exit,.15s) ease-in, opacity var(--mc-chat-exit,.15s) ease-in; animation: 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0s 1 normal none running mc-chat-in; position: relative; }
.mc-cursor-chat-self[data-leaving="true"] .mc-cursor-chat { opacity: 0; transform: scale(0.6); }
@keyframes mc-chat-in {
0% { opacity: 0; transform: scale(0.6); }
}
.mc-cursor-chat-sizer { visibility: hidden; min-width: 2px; display: block; }
.mc-cursor-chat-input { width: calc(100% - 22px); height: 18px; color: inherit; font: inherit; caret-color: currentcolor; background: 0px 0px; border: 0px; outline: 0px; margin: 0px; padding: 0px; position: absolute; top: 6px; left: 12px; }
.mc-cursor-chat-least { height: 0px; overflow: hidden; }
.mc-cursor-chat-input::placeholder { color: inherit; opacity: 0.75; }
.mc-cursor-chat-below { transition: opacity var(--mc-chat-exit,.15s) ease-in; }
.mc-cursor-chat-self[data-leaving="true"] .mc-cursor-chat-below { opacity: 0; }
.mc-claude-empty-idle { transition: opacity 0.26s; }
.mc-claude-empty-working { transition: opacity 0.26s, visibility 0.26s; }
.mc-claude-empty[data-working] .mc-claude-empty-idle { opacity: 0; pointer-events: none; user-select: none; }
.mc-claude-empty-working { pointer-events: none; user-select: none; opacity: 0; visibility: hidden; height: max(100% + 68px, 156px); position: absolute; inset: auto 0px -12px; overflow: clip; }
.mc-claude-empty[data-working] .mc-claude-empty-working { opacity: 1; visibility: visible; transition-delay: 0s; }
.mc-claude-empty-working .mc-peer-cursor { will-change: auto; transition: none; }
@media (prefers-reduced-motion: reduce) {
.mc-claude-empty-idle, .mc-claude-empty-working, .mc-peer-cursor { transition: none; }
.mc-cursor-chat-self .mc-cursor-chat { animation-name: mc-chat-content-in; }
.mc-cursor-chat-self[data-leaving="true"] .mc-cursor-chat { transform: none; }
}
.mc-claude-cursor { pointer-events: none; user-select: none; position: absolute; top: 0px; left: 0px; }
.mc-claude-cursor[data-glide] { will-change: transform; transition: transform var(--mc-claude-glide,0s) cubic-bezier(.2, 0, 0, 1), opacity var(--cds-dur-base,.2s) ease; }
.mc-claude-cursor[data-hidden] { opacity: 0; }
.mc-claude-cursor-unit { vertical-align: top; display: inline-block; position: relative; }
.mc-claude-cursor-arrow { position: absolute; top: 0px; left: 0px; }
.mc-claude-tag-name { white-space: nowrap; }
.mc-claude-cursor[data-flow] { display: inline-block; position: relative; }
.mc-claude-cursor[data-flow] .mc-peer-tag, .mc-claude-cursor[data-align="centre"] .mc-peer-tag { margin: 14px 0px 0px 12px; display: inline-block; position: relative; top: auto; left: auto; }
.mc-claude-cursor[data-align="centre"] .mc-claude-cursor-unit { transform: translate(calc(-50% - 6px)); }
.mc-tip-fade { vertical-align: top; height: 18px; transition-property: width; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); display: inline-block; position: relative; overflow: hidden; }
.mc-tip-sizer { visibility: hidden; white-space: pre; pointer-events: none; position: absolute; }
.mc-tip-line { white-space: pre; opacity: 0; transition-property: opacity; transition-timing-function: ease-in; position: absolute; top: 0px; left: 0px; }
.mc-tip-line[data-front] { opacity: 1; transition-timing-function: ease-out; }
.mc-tip-shimmer, .mc-claude-sheen { animation-duration: 1.45s; animation-timing-function: linear; animation-iteration-count: infinite; }
.mc-tip-shimmer { --mc-tip-rest: var(--cds-on-accent,#fff); --mc-tip-band: var(--cds-on-accent,#fff); }
@supports (color:color-mix(in lab, red, red)) {
.mc-tip-shimmer { --mc-tip-band: color-mix(in srgb, var(--cds-on-accent,#fff) 62%, transparent); }
}
.mc-tip-shimmer { background-image: linear-gradient(120deg, var(--mc-tip-rest) 37.5%, var(--mc-tip-band) 50%, var(--mc-tip-rest) 62.5%); -webkit-text-fill-color: transparent; background-position: 83.333% 0px; background-repeat: no-repeat; background-size: 400% 100%; background-clip: text; animation-name: mc-tip-shine; }
@keyframes mc-tip-shine {
0%, 5.172% { background-position: 83.333% 0px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
94.828%, 100% { background-position: 16.667% 0px; }
}
.mc-claude-box { border-radius: inherit; background-image: linear-gradient(var(--mc-claude-face,var(--cds-skeleton-base)), var(--mc-claude-face,var(--cds-skeleton-base))); }
.mc-claude-box.mc-claude-sheen { background-image: linear-gradient(90deg, transparent 33.333%, var(--mc-claude-band,var(--cds-skeleton-sheen)) 50%, transparent 66.667%), linear-gradient(var(--mc-claude-face,var(--cds-skeleton-base)), var(--mc-claude-face,var(--cds-skeleton-base))); background-position: 100% 0px, 0px 0px; background-repeat: no-repeat; background-size: 300% 100%, auto; animation-name: mc-claude-sheen; }
@keyframes mc-claude-sheen {
0%, 5.172% { background-position: 100% 0px, 0px 0px; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
94.828%, 100% { background-position: 0px 0px, 0px 0px; }
}
@media (prefers-reduced-motion: reduce) {
.mc-claude-cursor[data-glide] { will-change: auto; transition: none; }
.mc-tip-fade, .mc-tip-line { transition: none !important; }
.mc-tip-shimmer { -webkit-text-fill-color: currentcolor; background-image: none; animation: auto ease 0s 1 normal none running none; }
.mc-claude-box.mc-claude-sheen { background-image: linear-gradient(var(--mc-claude-face,var(--cds-skeleton-base)), var(--mc-claude-face,var(--cds-skeleton-base))); animation: auto ease 0s 1 normal none running none; }
}
@media (forced-colors: active) {
.mc-tip-shimmer { -webkit-text-fill-color: canvastext; background-image: none; animation: auto ease 0s 1 normal none running none; }
.mc-claude-box, .mc-claude-box.mc-claude-sheen { box-sizing: border-box; background-image: none; border: 1px solid canvastext; animation: auto ease 0s 1 normal none running none; }
}
.mc-follow { z-index: 29; pointer-events: none; position: absolute; inset: 0px; }
.mc-follow[data-framed] { box-shadow: inset 0 0 0 3px var(--mc-follow); animation: 0.16s ease-out 0s 1 normal none running mc-follow-in; }
.mc-follow-note { top: calc(var(--mc-follow-top,12px) + env(safe-area-inset-top,0px)); width: max-content; max-width: calc(100% - 2 * var(--mc-follow-side,12px)); pointer-events: auto; color: var(--t-fg); align-items: center; gap: 8px; margin-inline: auto; padding: 5px 5px 5px 12px; font-size: 13px; animation: 0.16s ease-out 0s 1 normal none running mc-follow-in; display: flex; position: absolute; left: 0px; right: 0px; }
.mc-follow-dot { background: var(--mc-follow); border-radius: 50%; flex: 0 0 auto; width: 10px; height: 10px; }
.mc-follow-tip, .mc-follow-words { min-width: 0px; }
.mc-follow-words { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.mc-follow[data-leading] .mc-follow-words { width: 14.5em; }
@keyframes mc-follow-in {
0% { opacity: 0; }
}
@media (pointer: coarse) {
.mc-follow-note button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.mc-follow[data-framed], .mc-follow-note { animation: auto ease 0s 1 normal none running none; }
}
body { background: var(--t-bg); color: var(--t-fg); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
[data-text-path] b, [data-text-path] strong { font-weight: 700; }
:root[data-gesture-cursor], :root[data-gesture-cursor] * { cursor: var(--gesture-cursor) !important; }
@keyframes slides-lift-in {
100% { opacity: var(--slides-lift-fade,.75); }
}
@keyframes slides-lift-out {
0% { opacity: var(--slides-lift-fade,.75); }
}
@keyframes slides-lift-still {
0%, 100% { opacity: var(--slides-lift-fade,.75); }
}
.slides-lift { animation: 0.14s cubic-bezier(0.2, 0, 0, 1) 0s 1 normal forwards running slides-lift-in; }
.slides-lift.slides-lift-held { animation-delay: -140ms; }
.slides-lift-out { animation: 0.14s cubic-bezier(0.2, 0, 0, 1) 0s 1 normal none running slides-lift-out; }
@media (prefers-reduced-motion: reduce) {
.slides-lift { animation: 1s linear 0s infinite normal none running slides-lift-still; }
.slides-lift-out { animation: auto ease 0s 1 normal none running none; }
}
@keyframes slides-uploading {
0%, 100% { opacity: 0.12; }
50% { opacity: 0.42; }
}
.slides-uploading { animation: 1.6s ease-in-out 0s infinite normal none running slides-uploading; }
@media (prefers-reduced-motion: reduce) {
.slides-uploading { opacity: 0.28; animation: auto ease 0s 1 normal none running none; }
}
[data-free-group] [data-overlay-layer] { pointer-events: auto; }
.tb-root { --tb-bg: var(--cds-surface-3); }
[data-tb-overlay-clear] { --tb-row-bg: var(--cds-bg-editor-canvas); }
:root:not([data-mc-presentation="sheet"]) [data-mc-paned]:has([data-slides-rail-panel]) .tb-root[data-tb-overlay], [data-mc-paned]:has([data-slides-top-row]) .tb-root[data-tb-overlay] { padding-inline-start: 12rem; }
body { background: var(--cds-bg-editor-canvas); }
:root { --sl-safe-b: var(--mc-foot-inset,0px); }
.sl-panel-peek { animation: sl-panel-peek-fade var(--cds-dur-snap) ease, sl-panel-peek-slide var(--cds-dur-base) var(--cds-ease-snap); }
@keyframes sl-panel-peek-fade {
0% { opacity: 0; }
}
@keyframes sl-panel-peek-slide {
0% { translate: -0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.sl-panel-peek { animation: auto ease 0s 1 normal none running none; }
}
.sl-creation-box { --mc-claude-face: var(--cds-alpha-2); --mc-claude-band: var(--cds-surface-panel); }
@supports (color:color-mix(in lab, red, red)) {
.sl-creation-box { --mc-claude-band: color-mix(in srgb, var(--cds-surface-panel) 70%, transparent); }
}
.cds-root[data-mode="dark"] .sl-creation-box { --mc-claude-band: var(--cds-alpha-3); }
@media (prefers-color-scheme: dark) {
.cds-root:not([data-mode]):not([data-mode] *) .sl-creation-box { --mc-claude-band: var(--cds-alpha-3); }
}
.sl-creation-sheet { transition-property: background-color, opacity; transition-timing-function: ease; }
.sl-creation-sheet > .mc-claude-box { transition: opacity 0.2s; }
.sl-creation-shadow, .sl-creation-title { transition-property: opacity; transition-timing-function: ease; }
.sl-creation-title.mc-tip-shimmer { --mc-tip-rest: var(--cds-text-primary); --mc-tip-band: var(--cds-text-muted); }
@keyframes sl-creation-in {
0% { opacity: 0; }
}
.sl-creation-grow { animation: 0.18s ease-out 0s 1 normal both running sl-creation-in; }
.sl-creation-empty, .sl-creation-arrive { animation: 0.26s ease 0s 1 normal both running sl-creation-in; }
@keyframes sl-creation-out {
100% { opacity: 0; }
}
.sl-creation-empty-out { pointer-events: none; animation: 0.26s ease 0s 1 normal both running sl-creation-out; }
.sl-creation-fresh > :not(.sl-creation-under) { animation: 0.3s ease-out 0s 1 normal both running sl-creation-in; }
.sl-creation-under { animation: 1ms linear 0.3s 1 normal both running sl-creation-under-gone; }
@keyframes sl-creation-under-gone {
100% { visibility: hidden; }
}
.sl-creation-leave { opacity: 0; transition: opacity 0.3s; }
@media (prefers-reduced-motion: reduce) {
.sl-creation-sheet, .sl-creation-sheet > .mc-claude-box, .sl-creation-title, .sl-creation-leave { transition: none; }
.sl-creation-grow, .sl-creation-fresh > :not(.sl-creation-under), .sl-creation-empty, .sl-creation-arrive { animation: auto ease 0s 1 normal none running none; }
.sl-creation-under { animation-delay: 0s; }
.sl-creation-empty-out { opacity: 0; animation: auto ease 0s 1 normal none running none; }
}
@media (forced-colors: active) {
.sl-creation-sheet { border: 1px solid canvastext; }
}
[data-cds-fizzy-lake~="icons"] svg.sl-shape-mark { display: none; }
[data-cds-fizzy-lake~="icons"] svg.sl-shape-drawing { display: block !important; }
[data-cds-fizzy-lake~="icons"] svg.sl-shape-coarse { display: none !important; }
@media (pointer: coarse) {
[data-cds-fizzy-lake~="icons"] svg.sl-shape-fine { display: none !important; }
[data-cds-fizzy-lake~="icons"] svg.sl-shape-coarse { display: block !important; }
}
#root > [data-placeholder] { --tb-overlay-h: 54px; }
@media (pointer: coarse) {
#root > [data-placeholder] { --tb-overlay-h: 68px; }
}
@media not all and (min-width: 640px) and (min-height: 460px) {
#root > [data-placeholder] > [data-rail="open"] { display: none; }
}
@media (min-width: 640px) and (min-height: 460px) {
#root > [data-placeholder] > [data-rail="closed"] { display: none; }
}
#root > [data-placeholder]:not([data-revealed]) .mc-shimmer { animation-play-state: paused; }
html[data-frame-capture] #root > [data-placeholder] { display: none !important; }
.mc-follow { --mc-follow-side: 240px; }
@media (max-width: 900px) {
.mc-follow { --mc-follow-side: 12px; --mc-follow-top: var(--tb-overlay-h,56px); }
[data-mc-find] ~ .mc-follow { --mc-follow-top: calc(var(--tb-overlay-h,56px) + 52px); }
}
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-rotate-x { syntax: "*"; inherits: false; }
@property --tw-rotate-y { syntax: "*"; inherits: false; }
@property --tw-rotate-z { syntax: "*"; inherits: false; }
@property --tw-skew-x { syntax: "*"; inherits: false; }
@property --tw-skew-y { syntax: "*"; inherits: false; }
@property --tw-pan-x { syntax: "*"; inherits: false; }
@property --tw-pan-y { syntax: "*"; inherits: false; }
@property --tw-pinch-zoom { syntax: "*"; inherits: false; }
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-gradient-position { syntax: "*"; inherits: false; }
@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-via-stops { syntax: "*"; inherits: false; }
@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-ordinal { syntax: "*"; inherits: false; }
@property --tw-slashed-zero { syntax: "*"; inherits: false; }
@property --tw-numeric-figure { syntax: "*"; inherits: false; }
@property --tw-numeric-spacing { syntax: "*"; inherits: false; }
@property --tw-numeric-fraction { syntax: "*"; inherits: false; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color { syntax: "*"; inherits: false; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-blur { syntax: "*"; inherits: false; }
@property --tw-brightness { syntax: "*"; inherits: false; }
@property --tw-contrast { syntax: "*"; inherits: false; }
@property --tw-grayscale { syntax: "*"; inherits: false; }
@property --tw-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-invert { syntax: "*"; inherits: false; }
@property --tw-opacity { syntax: "*"; inherits: false; }
@property --tw-saturate { syntax: "*"; inherits: false; }
@property --tw-sepia { syntax: "*"; inherits: false; }
@property --tw-drop-shadow { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }
@property --tw-backdrop-blur { syntax: "*"; inherits: false; }
@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }
@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }
@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }
@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }
@property --tw-backdrop-invert { syntax: "*"; inherits: false; }
@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }
@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }
@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }
@property --tw-ease { syntax: "*"; inherits: false; }
@property --tw-content { syntax: "*"; inherits: false; initial-value: ""; }
@property --tw-contain-size { syntax: "*"; inherits: false; }
@property --tw-contain-layout { syntax: "*"; inherits: false; }
@property --tw-contain-paint { syntax: "*"; inherits: false; }
@property --tw-contain-style { syntax: "*"; inherits: false; }
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes pulse {
50% { opacity: 0.5; }
}
:root { --font-anthropic-sans: "Anthropic Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
[data-cds-fizzy-lake~="icons"] [data-cds="Icon"]:not(svg) { font-family: "Anthropicons-FizzyLake", var(--font-anthropicons, Anthropicons-Variable); }
[data-cds-fizzy-lake~="icons"] [data-cds="Icon"]:not(svg)[style*="font-size: calc(1.125rem * var(--cds-rem-scale"], [data-cds-fizzy-lake~="icons"] [data-cds="Icon"]:not(svg)[style*="font-size:calc(1.125rem * var(--cds-rem-scale"] { font-variation-settings: "opsz" 20; font-weight: 492.6 !important; }
[data-cds-fizzy-lake~="icons"] [data-cds="Icon"]:not(svg)[style*="font-size: calc(1.125rem * var(--cds-rem-scale"][style*="font-weight: 700"], [data-cds-fizzy-lake~="icons"] [data-cds="Icon"]:not(svg)[style*="font-size:calc(1.125rem * var(--cds-rem-scale"][style*="font-weight:700"] { font-weight: 640.7 !important; }
[data-cds-fizzy-lake~="icons"] [data-cds="Icon"]:not(svg)[style*="font-size: calc(1.5rem * var(--cds-rem-scale"], [data-cds-fizzy-lake~="icons"] [data-cds="Icon"]:not(svg)[style*="font-size:calc(1.5rem * var(--cds-rem-scale"] { font-variation-settings: "opsz" 24; font-weight: 433.3 !important; }
@font-face { font-family: mc-anthropicons; src: url("data:font/woff2;base64,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") format("woff2"); font-display: block; }
[data-local-words], [data-local-glyph] { position: relative; }
[data-local-words]::before { content: attr(data-local-words); }
[data-local-words] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-local-hold]::before { position: absolute; inset: 0px; overflow: hidden; }
[data-local-hold] > span { position: static; width: auto; height: auto; overflow: visible; }
[data-local-glyph] { color: transparent; }
[data-local-glyph]::before { content: attr(data-local-glyph); position: absolute; inset: 0px; color: var(--drawn-ink,CanvasText); }
@media (forced-colors: active) {
[data-local-glyph], [data-local-glyph]::before { forced-color-adjust: none; }
[data-local-glyph]::before { color: canvastext; }
}
[data-local-words], [data-local-glyph] { user-select: none; }
[data-local-hold]::before { white-space: nowrap; text-overflow: ellipsis; text-decoration: inherit; }
.slides-card-title[data-local-hold]::before { bottom: auto; z-index: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; background: var(--card-ground); }
@page { size: 1920px 1080px; margin: 0px; }
.slides-print-sheet { display: none; }
@media print {
#root { display: none !important; }
[data-mc-chrome] { display: none !important; }
.slides-print-sheet { display: block !important; }
.slides-print-slide { break-after: page; break-inside: avoid; }
.slides-print-slide:last-child { break-after: auto; }
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("data:font/woff2;base64,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") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("data:font/woff2;base64,d09GMgABAAAAAHpsABIAAAABMqgAAHoCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoE4G4caHIGacgZgP1NUQVSBICceAIUiL0wRCAqB3DiBrC4LhhYAMIGcXgE2AiQDjBoEIAWHRgejDFtJFnGBsU2lnge5WVVyxx2bn8k4NuF2FGQmX4ZnRm0XabU42f//JyUdMjTEGqDSdar2O+SQccghITKCZESYriN72BqZaY6RUJB0uPlEx4STwvdgyWM3TuN0dmkHp1ih39djHtzlZcqjBEH+ukP3Wz2Jw710mcz4TFNrmNOowSgzl/nbXWIQYdApTKZOe7tkuslj1O5nl5Xxs02ucpl/GRe5jCSh2wdn5w+vLRqoQQaS6d12/ahE1x4WOtXW1XwVGLvMRqwTlb7w/3yd/a99zq1bSbrwIKT7UWk++xPjPwI01EzUCEbn5/nc7M+97xFCjCGFmCITMY0pRowMpimlfMpHmvIj5TNphjI0EylFDBH5lOIWaUSkacSIkV1gEFn2MtRPcUPcMhQ3xI1mKFKLqY2UobhhGkN4GZ50818CCAFBBURmCFmEBBISMhbJXcYlZJDjSCCcIWGEESCwBRWqiFoVa504Fiq1RXeljtVhqzhmFSsdnzpWrdphh/bDTzn1e29IoxGMbEt2HHAA24+4TCe87h5ueIw86QLdbnvdfCBK2rrg/sQFk+xItobn+R9r3fcHk9CHUCw0KhFCo4qeLhoivhvNQ9tsWj0Tx/68Ou1VoBykd00hBcoRbR+ngZaNZzf/87D9t9PG0BQo5KZBO7YkWwaZKLk0R2tlVQ08vAQB4tG2emAvYRWLTwgu6oV9y9c2CSF51opjTMS9cn8I9KQeiRD1rYt5dfo57Q8ZJMeWQbYsO5aTuBCCjzD9d/MN8y1DXX2axgMabwaCMuSg/ewIGGRTk20/oZ1EgCgaw2qh9rsFV+OziO75Z2b3vr8iigLNck+8o3XN1d2Ly7daI+KHolRhtbf/vVtf90JL1T3QOl75quSzQTbyhIYvDV/HvAcSSOlUbNSjXY/WKx8bzLPJSYXd+Ss9re+Qpqnx59x/f5Y46W3C5aT0AHuXgB2zUCjXoyRQO6tIEStiC/8v6rSgOLIFxqTkAfO758Bv3tArKLOBa+k/koGuxad8VfWVF/WjTr9nUJo6bdMPSDcMm+0eTOMN661AUHIhSW0nkuFZ0hP8valW6X9okGqS2i1AWgOOhXbPQDNnMLtBQpm95RnrUv+7+wPd/RsgGw2IagCUBIDSqglJNw1QBqBmrgjHAWh2SY7TOM/xvgHKgGMht8Mz1mWaM8Zk66LgwgsvDZxJLwjSS8KrC9LzP02tUuADuHlNDM6t0xZnJztjw41dn/epD7IPNnpIqZujLwLScL3O+nhND9dpxDOU5rzOWU0SXnphfvD8u9fZd6E5J4Et64nEqNaKT08YSfs6lkfIMV27w5jaDilxWIGV/O/UpJYdZ3SMiUhyr4CVEZ+/lH+25Dhda+tLNxy1m7Xs+BEw+/hYbPOJSQHgBXDC11X0eRFkXbIPIZUxRittfP+wLGv9Tvz/f2uNtwvt/Y2j9xfVV1UxRl5ERGxR+/1+vr/fV/VNQEq77JM2lGApCio6s4/33w7j8v/nePeFEYVUWyFpHez/P/b76mJm82mO7/N1nbeO8ZSQQ4SEpIhE7P6v1WZUEXtBXmHl48UIel8IAj8f8q+AWYYAnSgD0XKGYDvFNE4ZvVPO4kyU61RwOlVwp5rXuVWNM1uTc7sW504d8ot2IpwOpC0ZEKBMVI1zG6p36tAcRwHqPhcIYJgzg1ZPwB81cRkcINABDeHg3a8hJEDsirPYQcRxn7XWgwhIALoZ/9OwFYQAgQYJktYfCI/CrUC0cZhsbUQSsXoOAHYIdvHfeHyOtgMjZD+CobVEDBbLBaxgY3rl6rOq+IwoBZ5hVDn6FgQbgBWYxJ85iVh8naFxAP2ghytvA8bTRsdkY8RrpfHrAp3VGfWpB9C1x3MCgOAL+WUAQVoAlz2cxcwwB75BTGYArjIK4+6G5BTO1H4LZoL8X4QHeIi7mp1y1bZmo8KOloUxQut5gw4Ay5qQ83468KgSduX1ZwAGJWYf1nObUxzDrjsFWooJYVIZFqNmYAZhDAzK5DE442LKmHImM1MrAuCAgV2wZdkBqxNIAOiBBixu7xH24wSxvCrxb3ZxGMAeE2xj8kjB0pa25UqvQ/6LkzQbDn0emn/5mvL1aTnehjyfGLFzg50CyEuYmQKmNqgt3BACr4Ahwe0mTqCD0w79rK4VQMvl/kYgfRv7v794KyBYaSivA+kK07WSBWYb5OimjE4B4Lxv/+rFCx9YvCbKdDPESUBGRZeKLR2XgIiMgoqGnpGZFSqfQyGcW4kylXxq+TVq0aZDp/fMV8TgAJMSR5SpdFSdese1aNepW49v9TnljAHnXTZk2DUjRt12j9WEn/zsoV/YTZs155l5f3BZDNCyaoa0PVYJVXeDC+NyOKfr/fnz99//NHQQRiYWuVAYuwJOOBe3EmUaDGIuMCtND00jpmGT02SSezjneM4eYf6eAMb7xtvGTmOZcarhL4PKQEduIceRSsSiv6+/rT+vL9AbyT2ve6i7pEN0Qo5K+7X2U+2ANkbzn6ZVUwb/Dj+ER5K7EJ4FV0P/QM/FLevVUAcUDU1S/6Neop4DhyNU9bolFaYSqpjZR7O3ZK9QPlbeVnqV2D2p+EKxU1aoQiz/Sf61XCnnfknIzsoOwS1rSOZx6pDLQyqHYMn0lNtJSDIGYyxJTN1f1IvrOdX47WFlrZQVNIrZea6zssO1vbgnOvQd9Y31w9LuTD+1l7TntX3XdqFN3sZtvd3aO9LcGtLKx5/hdbaYEvHieYB7y13BbeVSudHcSRnVGQsfExnRGUTlpFenF3B+5zx8JzgWDlWpwCvJHi37+VYoSlXxo5goiotdRWTRneUYt+WleVHul3+z/iv2Z8aMm/4JS9JdK+Uf2uuOXYw4K8yh28xtk2osl4s2kVyypKmT3Ph5PB6nx3ZZUGH997/MaFPk3txaan8K1b3ulof5ISscmDwYdAfKQBeI/cf+GV/uyxde3wLvizfq6b365t/NuHkxfiBRr2tGrlAu/dR6itIdyfhLspfzRsvG6rkYFN2OSJF38zO83RzGfXae1feSmIRxeopWUiPlkj/lApJLQPxypNktcOv4X07NzX6q5dRQZ8yxOEpHiC/iBmrEkThEF1E1NSIZEgwaK6+VnWVSCuup5kVZ0Vr6lzzIl+Wqxee/vJmVUYV+Q9d3umPvd/v35m6mf3LBb9npSZXv9IXmi6WI9GHupIr0+ku7FY9HDc3i9ZaPJY1emBcgvwgm4h/6Dz3ppV7qekJKsIlEPPbc57vQccMVCoLkEIJa+xBhQeNgsGmvZTtxArid+wnXDkwwSVZFC4Y2bAiFsieCg0Dougp0PBCUoF0IDHKAYY5TquZqVbQ4DS/2K7Z3gJnD6q8voiJ9JYO+llEHVGzexgNh3AIewaM7pnwC8BsJOgqI4EELACwRLTjf9anyOG0eGIINVdj9F25ETagZtaBW1IZmeTlUII8TWwSEbTDUz6ojgAjaEgnst/nB4Qo5GDKgjbArF82C4DT2jEKEIz0OIkSUsxtGMJPHFQjQ/HGm2PPYRGXGxC9nqWyq0ezYHUuAQqKxXaauHhE91Cfbo31NDzd46LGhAcQeMiSRSFeyXr97HoBNlAlRyq8LEPFjOqaDJaSykKKbOu3XfQrgnlDi28l2cEf3/PmBgGD2rY67p8L1lrsA+WvmfBDQ/Zx41mFgVrTK/fBGiPuApM/UQX5ZJ5XehO5Q3wiiA9GdExpMeyC6GbLClRa9S09cMWOzz08Z3jZ7JZTFzx3s9ovCYW73fD9Ug8ytSYverCfPLbZxD+qUqWS/kEF70VUdFjjdXiWRBXa36AVy2gJr/uyjaSHfPImOEHWvc/p3Xdrc7Y6jRfNEI7sbnUNbXVGEkDbU/TNxGnD1rXpyFy9J93ONCnRm+0WBeidb98zpsDvRKZeFjrQ2fYSettAubuL4Y1TgkZntKiYgsdvRMXkJPkrpGGGGjd+OOGbmJh+0CR1m3yikregYDY0ct1VlSUOdFr1KT2skJObuH3/cRgtMqdms012B3Vy1U7PsJJT2OeU/u4rmtw9Zy4PldD/HRlPcE/1fIbthn/CHkp1NQvHbenJ2ADPXSnjXBKACvW8xd7Us+DJ3V2PiHWkxv6HHVHe2QCj+NDaCCQF89djZWYHdaadjoq6lr7d7xL5jz39w4c4fLAAB9lIwrHbpdHoe0X4QHM2w+a7Getg1n3aqPRV2P62B3WF7JHUmodgmPTk1wmlrrIdt81ZGKzp6MNSusDliKrc28xo5jitOV3M9LH2s1/xtNKM9BP3gk2U0S7vF8ZjPop2h14ca4pcpIesnPYeonXwUnsCq8RZ6zycxNKJlhyTQjhAu8e9ujXqTnBzfF2ep8RaSekVSj+ZsELA9FC186damD5TT+JM4a8234Pkx+zOl1KIxgct9TKdWGrGZEE+1LbjskF7efyRkduh5RGK85zCMGm+AFz46RA7/OkTbrAPDEi13QsFxOTnqhMup8Qa45TGfBHcG1FsBBwQutzbzbXKcRZyp5hugZIwI7i0C7CHqtz48SxC7YSaEeywA+mF9i+zcPlofnZ/+Z+LCS9yFMt+c9IekEghkfgGLFmBpapjvtgsAX+bPJKHA1jx/Ar8diSwpffophZEPKky/NITmYclsWBpg5yGdvrSUpqSVdJwbSxyopNapq+Ij7fRtDjNHFYe2R26OMkjb3bTod+hGmwUVOXXSlMy3ss0sJQx1ys1SfKnPukXPlpPrkwVy6WfwIKkVRCsr13eCZmBxP6LF183UJosbmwn1fNuGWMeWeqUScyymwqfV7U8XM3iGluCxD611PiZQHYvFIUbaOlp3bUXR2j/bUGtmAUksrcm6EenIiaFuur8b/vdInhK55Jgip735od8fGUtuLzQVi/pKcknjpact8aKGjse8x4ud+gPzngMiqdFXp3sBoJ7aMaIBVzeqS5zs8KpmdoG6pUYNC6LG9SIOuLqYG1tS1hz8PEtRnpSZMI/biAccrnHl1yTk+5yeZ6u0vOzE0WpSuPeOt/ByB3k8DdUmMKnGz3IdcfHW4553mFyzmBY6TaV9qjRdCpnehncrhGveOHXW+WTxcCBV+juTrDxsMOHmtLa6hi+zq4ck5KtQmQ+tqm4ZVc0WbI/G83hVbnqlxTzkbwWmnyU54rJsj63zcK6vkknIW7X+G55NlQx3mxGwNTLNcamRLT0NqMHdXrZEjVAr97tmwhZpG1zUiy0YCfkSr0vixtGAo/HMu8E5TGOSpmhgtMooaUQjxswUZkI6YzWmmkVqRUKejLrEqVxDmnAzwPphjQII8eWqk7idWkhWN9uVOrTyByYxkBSRNCPW7U28H/SisEoBmmkDyujWkxO9KrTKLNWeGi+4XB/D3MlK4rglAqp9FBGXW2QzIXIsx8V8CKWrgbYkWq/0HwcFwb94FHzRgeBvAi4H5qYAGyNU4moJ4LYtAC4wX51kAgh1L9P3Cs7OBWhAwgEwY9UgRkU3BaHn49zrQVJHnWipi7UUZ9NlEMb4v5zz78Utuiyd8u0gHjXKm1BWSeBbJQbvBoSxnUL0876UvmRrDhO83n7BayXMmJWYfbIuiWHcgwxU9e2ZZD2rQsDzfWimD2zSEErtB5z7FaGgpQ317CxnT6EnZ6lpwNWP6GZI9KDl+t3VWYCrY+WUB9oj9cAZfaDTTlJNR9y83cGlssWOqbXuEqiIG/baUslL9SJ1wG0BjW8N0iGK9OtVk824ZsLabzPYSbY0Niox2+tUdrSxGr2MXkNC2Orxqkr66BsunVjjvC2iN7lUhgk2x70plaxBm9VSy5VcVqYG8GKwBg/LuFiOGxiogisLBszLzA8mDLMWYqlfDONIyItJl3gY1pAmcq2MUQhLEruLa38BHm6fW5YYRoN+BJSczYlHr+VFoLAE8Ei8wK19R6PChRq7wcGBeZ7ZHDIrs5t5wu7mtci99arZqcCerEZkHkyOnBd2FiJVZ7puz+1RL6vAvcSn545P3y4F1I88zMJsUvF44hTANIn4jTBgs8aIdiZ3eeXpks5KHY0qx5eKGvlY7DLz9gQjeIVTFmb6aLk7Aqeckh2P/gIvghNLt0xTm93mTNeoGplGNTD3fVQdSGXIkEIDcuA4XQ0yo6CXchxLxEW5l0okA8+slpqruDIwNICP0zX4mAJkzqeBeaE02/PkiYR5PlM2E8an9jnGSZmjNysxj9d1abPYz+S56BgB37szlaNQmBE8xWH24tHvIjzBES4d4V5wcHiKVTcVM7xGyYt+eO1oDBvB7zgUYgxKmwR4mYzMJBQv1Z+PbtwCgumEZxEwgcXVkP6DA6/ACEZoRg50MwEK7W+AbPaEiRlQ1Hbj3iR3A+7wa8izGcAyirIRPMZaiShJmwSAhsuR768AMEtkJ6GAAt2IkPafAo15wZlSTH6F0ANj86vivgS86BGmg8AUU9yHgW78JsC9Ozf6wJGtHIENSw9sUdokoHOIzU1C6ex6mk2rHWOtUYGu1/unaip11n3/AHYKnUn8SFqbPl83/CCQcffA2FpdNHRyryrpAeaJoIrsA3TCLZVrK9tQc2ZpaQ17UjeUomgf187CH5+yfQAdpb2OCE1iVof2jL2Ptp3hSjxoqzkw+pvqAoh8TqHWsLga0o+YHKVWMkLjMtnMhDra/ht1CHvCxFwHUBFWImL8YU0DhFgbCQY/XzEz0Dff74QNFTMmEfoBkyYYix2DOcFwJYMD08hB9L8pxkLosFhiCL8MAO7GVzjEAHsHkcaUVMBeKMQ42hIj2Jm40tGulYMq1s/XElQWQqu3YrqFUR9soL2FUCiWnqmhyr1ncCphn6Ybw7T8LSwE/mSmJF7rzE3FCFrjbirWZZ0kbsFTomVJKH5OT9bSZt3l98Bnc7OH72cv4iiM4AaiCb5xNIhGcF3iro7HoxyAKQm8jodrPwYeOg1VgEQvNfBRUbEOehb2Ouy2MLnHXNU0xfMqna5IeC4mqER7BW6eh1WUnNnZqFykSANWkFxD2CHher3Io+8RjEGk2e/hTCIS1Vr0+bopokU3br+xnk1Tw8WxMw8F/QuBByfx3EGWrUBn0gO3WQscg5EZo5WIIR7WySr8NLK1Q9nJrLsK3ErnYX5LgZoxFLaT4cosm3QJXg9bzsosGXRRvMbxKT5nHiP6wsOEV0g8nwgBmCYxWbPA4QKLbl12UVSUtcHAJ97k0WtcqxIUNTw5MIMG4SZRGHybT+fEXW0mtBp7DoWaLQGmxFzEUxFPDaCXYp4bn4aZCjwoGI/KC7Rt6CxcImS3reisuMjE4wrtWbDRV8kiCvXMBvU8LHPJy2cuXW98rO4fYIVeSuk07HCQAnsaTL0l2eR4G+qEA2ha91G6KZ52rDMI4cm0wVgsroZ0ElZZqIsR6hcbbSZQu/0O9C57wsRML1EZ63pj1P3fviUQ/f/bD9ff4hMvA0f+FVEJFMEZhPBEtgtlaYR6MSQF4rb/BJlhDvQUQCYYrsQDcp2DUnuScuxokiB1vlHRN+inQiO334DskiY8bfxeoxtNMDxqfvCbKtwzrelS+sCSXZfyEyZzix7LBpPCg8I1RjIHfNvr4a5jUdyg+20HcI/o5iQUXK9Fl4eVLtopWVc0SlDaGlTdQsvHWKmM1IauGjjaaym1SlcUJmi+bYVmCuZuVmJWLl0aJj3gl9UUtBn/D29gZIcyKCXYA68goYZ5epk8NaPjFNWHLwOAJvOXwxoIqsE2QpkYrq/iYWCjdTs6JD+VCVMaHlbrsEuiIrKGPEMk3FOcooQSoQa0O4Lys8eggDmoKD0cyqfAKPK1HMgpDOC/l6e8fJsOTOT/VvaHTOSXrf+Y7ASEH5H+gcb5VXwX2KTjbxgA40uZ2qodgk/shMpMqoyCG8MKl+okW1qkTPdx4VkdrqVHcn16qF+DXUGQeEyGBaZaNAqQPi/mqGarifJHBDFhayCGhZg2r8Qs+nWJic7DWibXTXDXHEQ2FoW8kKpQj1Yi22RTtdQDibgUWwVCXwgZEjJ26NKERM/kvyI8CX8Fv3MUVnSMggc0QhWo4wLutOXA1UxcyWrXyBVPOnPnwyiDAk7wvJhKYcYD32VLgUXCMzoZVTypC1iTcU/XTS67+/y2frD9xjr3+1odozOMYax26IVkhomHSvMmlw6LCU885mrawzByURGbPa3AiS6JCvb1h5Gj8l+MqcH2RAS32QfsoUOVHlR3/Uc1HRLdGSZ8FNlDFXcvuwfUk5D5jDIfUDPAVUH+morxFrxfypk0oGLoiFJaNUIHRQvNhNJii8F1Uvby1f7PYaM1O/WYFnGiS2Jp0sBRBUz6byknH6BmAuezM1kEMkK1gjN9Gdt9vd0uvf9aKMCUK7sqOyA8N6jGGCGMun7V7ibetNaiGy6qal+M0FdQvFAM2K9Q5UnRuadmO+kDL68M4KdX6rWieN6O/fbbdez17KRnbsbTa7Hf4Xk37YcsDrzG7sdeIdyYZI9Sk/cxDRceQrIJMxry4JtkdLBLcW4PwMPhfs3bmKd1GXmD3VWPqmkfxGRABrsPu1ZBeUkou0o9GaXjanip3i1N7FI846m9qavuMwbsXuykW9RZfNWGWnjXdF+65szG03rpSf15ehW3gPJZlrYzciuLqyF9CT5dcgsjlC98zEzIe+0e5HXsCRNzXkyFWUPjM+cgq46SKyXS7TbXmnkMdnZtKpa0E6qJILacB2EO15cswBwwSkMgirkWv4Ke2567JngCoQcy6DtaxbX2GZ/YiTxqpx2oBoAqn7EpdCb711CRryPz1YKiweePko9J4t3YmjLYDSnfbWzFnLr/iMSnB71rneqRyAvZOR0H5aFiI8/22Qx9IaW7mZBZ7RfIZWxJ/1LrppNQkX3vQ4vOWPKB8PPe25b/jDIDpmetObtWyx0XyDrOklJ1Naf1dcbTkD6XUtlMyMQ2B6hukQUgIaNiXeKMplU0pz+MFkUBJXhGo2wUDwKdt9lAIqE22hpUQqCAK/fMgui6SS01RbQivWGsI+cBbPO01GRprSuwWRW+cHt2z68K7tWTqfrF0Id1UAhw/piKnJwywahCOYiQVthMM4GCzQSOFjLLTo/Sp40W70yw9dMF6pKQq1p1XyLDTUJ4MYSvyQUxsQFtBksF2cHDakhbhMmJTzup2ghlLJhEoudy2s34MhQiYUL+ytWHAbKAvkFc9Vrmxf/9W8tqAMrQL0cB2Q86GP36EFk+lNDB0q/BTAg6ezCK54eJPXhJyMWUnoeTsYA5ccqaFIrGcWYNkeZAJURm8U6ZA2dsM8Fn3IEq4zCrcysttFIpPz4r9qFbQUUEOI2VgIfdkPajb3spWIzQPulbbibkLrsXuZ09YWLOx6gwa8BxPsDH/ytFp5qTkRRTdIS+Ub4EsBtV3+ArvwA933W81APRX13yKRDq7O3sKw0LE187ak1hFWK6BCRPu1G4bl1f3TBMvMsActIjox3oYwpI7I6NbOrVUcluyxQ3Mpu5pBoeZOXeSLNNBQQ9d9tUzj2a0lifytN0u/bch7fVaFnduMiC3qDMICKJSNqMshFlopg7050lLk18CWR2bai2sEbljthXzOebR8IfHYYsmXhA2iJ1ffoNonCS3Rp2WJ201nu/AIAWvViuGtAGlFBMrRHaKMWsmWByuwEtMQuTorXvQnVJNIEG5hV3XdR5FWoUjw5q3mua1qHID7LO1x2/9m2whohtQ33prv4sR5+Yte4pntwIoUoCRFZL5+Fcf/CNIrB2pR0Nu7zlNwjS4C/VVLC0wlyyblmdTdRC2BmRQWuQ96LG9WLQasnrmgk47GpU56JnNiXm6iQ1HtTff0acYq9GF1u7DNWSN8CoUCH1IGeB3DFZaqhnK3P6/xSSGKGVi8w2M4Fo24Oq9EuEYqH13fH1GwEEilabfdNy47LhwwytVZJPBNk4yOgj1IVMhRDmKxbqlCzOTKj02k4EOo/Q65SY3UGFN+QSnMUn+W1c8GEW14Qj2tEyWbyPzIiGtFw1c9EbLrICbmJP2Bp3Oioia8hfT4X/B2dQgHgMKx6pEVqGFmVwkV0K5zJf9f4ECDVtRuskB+aQVUPg/PvfpPKgFbALHhktRs0akNjFG1bXr4uZZIoLFbeA4jjrco1oYXE1pIWoZZfYywgtkFqKmRDr7HxEI3vCxBx3UBFZA/5pVMGHwe9MgPRkS4zQCM1F9VGIwXYOIoeJK1ldJTmY/zSx8jw4w1VikkbSx+ZqSLNQzStJAyM0U6qpZkJisjOQ7GJPmJiTDCoia1hk07rmjyMDErFPgFpRmQthzrYioV8Ok0kIglPCiBI0CNMhDKqeHMbXFM6v6g3rJWB/7Khad1+oQD23XIRUH0xmuk5wOju9CpG7mqqbl+xo4Uyxp541ZxaT1pMO02QfxuLzuhH4hfxTy4feZ6sWfBgHma68/zYlxmhKlTbqaBNNUyUtScSF2CmV63a4SMiuUWZGesXt5t3iP/AwdkbXQJOQ8radrAHQxK2U7k0ParcTYfOM4OpK9lBhZbZHbZov2W6LwqeoHiMe3xS1L5RhlV4SGo9YFMS342G5l8RCLEAtLG1NKKbQDeZwFouA31ZZTDCcNKCxiKzOtAGN2Upc/G2Qy46G7MzkkZg1RoVZz2CT0xc/DR7t4SMfk4FnkHilalNNI6vE4Ax2BJTHM61hS0FqJq7kYTeB183+Vd6LyFPj393gId6FNAwJDu734mHPjubrEA/21Jz/0Mfjr4a8XaAhCNXBetwQ1ShWlxbzUj3OZGMu3dYU+H8qNCunVwkdKVNxMvWgQQiCgMkOgk5cQ5ddV6vqrpG+415qw4UEd1TnXAh3riMpz8EsuU5xjJJxF1ZnDmJ4FdIAeMq02foB2MBeEQWrroL7U41GiOORUT/YbEBi+4GnzPQX9vXUfafu0/gXsdg1qAYudk1VmXBvg1w4HW4Fd7sknRFdGbVrcjNXjasul/rcbTKsu6CicmGhH58JW1ruw9VYLsRTc5b/txcfb+gzGYgfsKFsnsmjIeVQJ5TMYjWkrOmqjyDFyITUspB+ZoJCbA3isBMTs4DKJxzeD87wyMbuB0aju1FQBWIWBhChNP1Fgfu0w0ZQzp48EjOF1PhGhb+B5P6/vSVGCm+P4S33r3XVVHW4bFZHfGCsQdRQBPG+aviFEVJFzg6e6gy2ZNx6ruxYhvcB0lLQSrwAO+/djVo7j60DQBAIgAFVPiw7BRypeoxahc+2Zh4AHre01/qsvA3g/2E6HxCu+fAuAJuERwHGCAKlBe3NJo01AfGEzOpWAgD+ZRE1wpRrtewg6RLrKUFrFxtABhO4TyNRac0eZrYcpQTf+yF64TaNR+tt157gtATNr9eT6AbjrNcB3IBMNns9Thg8tY+ouUzA2IQA5HzL+xWs0wPNHP+YF/RDkfNnMu+ZQILWo3x82oZt1H5wAkESPsQqfjQlnkKmUClMShZFTtFR9qVQU1alrKFGUqePTzSHAHL4Msn1X65gywHhBH1lFCWWkrg6AUWWflawnykATbRrgN57sB82wUaoGq8GoHdhbDUA+GhHqBH+J7wv6ART99fue902/hmPR/4ABLAcYI/7AHQlH6SuDVGXqBL8XvpRmT41XmYSYsB3jmlwlMthLUrUMjsSgF4euDw+gGCwhKX4wjFdjBkSJSFLRkHFli4DF08mETEJKbkd6jSHhI58AQpaOggjq1w2qEJFcDO5uFWq5lOjjl+zFq3adNgef+gPhqfKvfCHec5Eo8koF4XDHgdCQGtYaBeaighgdCB5KAgtgarshkXyHWRy0CGVaGBI6HjhjQ9M/E01TaQEseLEi+ANTDR0LAz/WU2ITyCLDEctNaVsMBWIhp5FDhOzAph8dgbFyniU8Cr1f5s1qdeg0SxV2qWpSAXywz7/1KnbN7oggD6IIDgCYbSVtzIa0RbHEeg2IYTz1DJsoBm2Z0PTSvuVD9tTa1X8sLdplbJW571VfcALWW3AqIKpjw0kowb8SpaHrflhPWtbvuJOqo80xEm7vJY/8KP9NHzhwAtwTkA/q+zBpW+WzJmX1AvfWlL4UdhiKJ25TqEnPOmQC77BVQhf9OihF81OBt/mD4MkhEV8USFd4W5bILxNi1Q4uGtxKpHEB0w3NSPhNHXSj3my8LMsoU6rxOZxBGywUnB3VyQGtAJi4BvJWpqcBW2FtPgGTckl4pqsmIi1/E3SE/bHj4bgY7QBsrWreZUdsGO3yZzELKWkkHRVxaqdqrcHmGRr6t0SXbGd6HJenui6zF1Z0YlT8bu9yiOnezdtYBLksTP3R0c5yUqiuqSSkhXTYpU3eraL6i1pVmFJQRm4NiywrCIbC53KjxlMHznn3V1EaDc2sPLoPRPh6i4c87dSfYVEL/I9JUptYVIfZSvlVt5rMWGvGtXkNejhReWxff9nv7sqLMNZRuMHwlHLG2ET8XSHjsBbLoBIWDYy5xN3yn1/prtE8BRSqgkSWVxjbs9DtU16x82OOgfM/PHshy1/sELGCWKpE1fwtQkb/ZKKZHHA4ueiMVujxntp+C4mfZQHESfDwCl+G3CCeE84MSqwsMPVEWkkGDMmtFPfrjONvjgur3707Rr/YRDTVhJxzzkLaJpLjcCPNH//j2+l3LeOVTGiIph7S8xoomDdJyGQOCCPK5/PFVQxnAFNtxH+f/5RQ81m75VQLKHCID8ulxGCW6x367CV3TqrnADL5yYZ51kHIz33Fmrx1cPrGSA8VRIJNLHtZ4NRN73ziH0KoCyqIY8UOWOyspnaycIgKkfnwEVFXHHAqAr7JBXQvQgBaMhl/YqQmCIEPQmBGxYV7pWn565c8kZ7m/tVsHgkBxLenCmo11YXg3P50NochbwQ9mnBlcjT3cnOMLDNVY6mXelMgqeLIX1mHCthj3bQBLcy5JPN4rijxRWCdI3NMnqAsdlbAoj2HEadiv0pdiHUuAoQpEoLp6rYNAECgaBD6NhERJoPv4T5q3gVFSD8YKq7ht7dOW650iKsLBZYnZM1mNIN7fqVnbayImsLqs5GRFWsIAqh52YxZmvttOhmYXWGIRRco/Xm2Ko2QmMHfMpjn3Z90iVTw2HgYniEE4W/kYAJy/5czhI3qQ5Qj+NLkdVdgBTZ1/0SS/uHbYBQXkZaqyqmvNsBjcyMd0FKGZMry/FbUAnzaKGPhaQKUviooBUEOkQsnBXUQpQWc08BqVwCGpZP+cg8vQAP82t8AIZREZZPAZlHJzWimHgBo9ga/GBJ6T/fArXDhl4DRdgbugPAo9TRJvfNJDfChysMkUnUhBNYSzTNIkqxlQ9vRZ5Ce2C4TW34xKtlH0logInKaWCiKd8BERL1UQlNyajHhHzmCDRVYlA/KRwoxiR2Ah/9kP6QVW0ArqaQGjMUnKgwVcXSuyM7hV3bTNSntMp8TrkWdzYU1XV7uF9zRQgroUp0JZosBZWxqVy9bshWPpW/7UARBEESdhUGgRHgcYuM+TNsW0soqqUNYUaKLDJkUdGWolC/OAqtxmzhlMiYFb5CmDEKZkokfzO7cRfONf9DTAJ70+3yjXjBzlmW14rRAisSLjg2YkRgDNgxuhzn7AT7KhCitF2Tdo1tB206dliOJ0NlIuR2GzZ8AlDli1C08zelQJ4qLjcPzy5V5dCh8X57AHmXO10VmXW9sKye2TUelpAXNiap2MLsAtvX7wW80b2XWMyufAmI5x8SUcvtBsUzwRzOHu9gkzTG2OgFuGl8aO7ykShRwJsHzHvfQt8nK0Kw93lMFjdJUmGnPFqVgytog4X2jwmi3Vwn00pwg3LDLnKq/No1Gu178h+rsPrAzCAinprJcI8aOSiKPLZFxwPiYqSlCrRz1iVGFR/wR+wUhvCYCDuF3X6z/aNuZb+PmhegaYxBFxk8UsgR8nJwtjYqRXsskSp5aeT1NLaobA+KUpSvLQNndTx584MRgp1oogjcvk7SJIpLjSW9V1WwsxW1sCbeOx8yKFAdbWa25gg9WitDbktr7DIikziHjtr4V/ZtBgZN7UQgENg4Dwon92NTaOyyfvB9j6In01j9MD3R/QuurTAoZ5pi7zS/OK1WDw5Dtj3j8ia1Mgtr5YpOBf6ayHsXVBcJK1aOshfWGQZxiuuxoRwqpH8mM5O4o9e8FNRVH0EY4iwdotn71WntrC3m3mpJXuCRpN++CeXhbFc3nmFngURLNu86iaq3FdrbL0EMUdSd8s4ozPruRCFdXyi1B7l+SGseJP8+7HKTdEjHEQJvKouBkRvGQmnv6twb1kArj8AUmxk7hkEQYhLxRIMt4nJKgFe6jl4gdgrzlLMJxLTb4KaLWpWzxW1q7lZ0uMsVR8E+1/lE88ShDVOdZ6EOH9XWVJK/QYTR4W7lwvW4eU7RHg8Lw6eCftwTyfX6tgtzIdRR69d98mp+5hdWMBWe7G/5dwoTJIAyxjp4ucvvkHnjccwnkSPhmAbaMEGoGxUq8qaQm+1JUh3L5GBZ8XghEuJXvXSTGup0kdNI24qLL2NytlTbMPxY53Q3E/ZpQPldlSyMmlgCtQ0tIWxyKkaTXNeOMtB7NMqc2P1uOn8h/TtT0sroBq+McVkmbTpFDQ/ZKDMiUKWlXQqNFbPpnMWfsNFU/Z3XENLRl2g5ZoPXacuFMlOeK0uQR6IELRKLxohTiCfsyEP8Ltm13wMiCadvPRFMmpKqnGTlpMWYNyzQr2g6tH4Ul9EcbVLarO/gYrq/z0WhRTrhNp3VxswMg5QzUiGT+tiuLlBf2ekuEt5h2nKD6w+4WUetSae5S/E0dRPAJMrNg8Pmx+3EVMfswlMKX2uO68fnsOGHParmLOSO0MmwPUcodtdCy8cXgLZXS/ndUoC817sf+C8pBr0NP4cGMX3/MGwn/n+ktHifcX/0agJ6Lz8ujHff7OtL4SQOksjHkXTHWoTx8/EcofDW80bERAXvI8XM2SrZdYPu07YFoP33IhvRjZad3cZkj1lzXNujSh8xqLVqVteGBX9fNdacqOcSOmXqPwjIOLTHYJCV4EjoETszGwWPcQYFqrGz87Fbm6IN9hjMitCTcBFMX18Euup0C9uEUWeZDNEa1Y6XL6QUNxacwYYzk/3DiE/8rcHVguYy+la8EZN5pjEZk1CJE9ZPt5sKteU3CILpX1/MfxbC1f7HRsV4ghkM9S+7EPNB0XDvfvs2Wrph36swZseHWm591hRy161t9gJi3phhyzMPDPQ+d4NPa9aOH3wTGTc3OMtfyC4Dl7evNjrIAS/0aH+m6OH1y+/f2+hhvlGKndg8SpaQb0UbgaGQ8ilZSlWFMgu6UxB3FEp15d2N4t21AjcYwWYwVOgCwQ4NSeReXOEvaml6POdyuIUjXNAxd8YQJWbCaUpaDTxtQlsYs77R1Z/Zz3SC8nUdtciFs6LT7o/Pst1nfJsu2s9WjC5vnbVvjBvxt3daObBntoSBxhaXn6qoSV7w5k3hdndqtbxhHU6TGk5aBWUeoehCXhak/F7kmWqK/bqnoVpj9vfHAzQQyqh9yAt0nnce53ySObbrKb37UaboRzxjge7Nzg5x9qnDemWH0j56KZM8+HCWnSls8s3b/v3GXJ+DyYoW9Fe1ecIepeUCmPBOcElcs7FSCj4kp3B2ilu+ZCGOfIYmS4My4yJ3aQBi+XwW8EBrUwHgNy8Van1Pf5ljHnyIsR3ucijq7WvWVPAIRfx82vBnx/qy0O5PulB9WJXma7oKI3VOCXJuzBPJkfAZOs/nKL1M4h+7Gcpyo2goT1j2It4jSBKVZOV9ZZrwEx0BpEIfg7Tal1+RUars7DjGUi2xAA9kNAIpVqC7MxPoFBo+UchYdeuEm+SLtJSoL7LNaU3fPkrJzev4+cghUXNmVlnpi3wJNVPdfJDsaKndXE7WOCxR1a/0I8kXaFAO0g3dQr7PmP9bTGcHvMx+m92aafTb9v2kfbb443rxmTBBD59Pns6463IW+Da1idhLVJaSY3LjLJ8rGgKhoWglJwmcURZBmXC3zWScAomirD2JRNXCuxusSf1qLZYLlI4a7YopTtwS2l8WfMLTlMZGOYuVpE7Pi/isP6+oBUDKNPncFxjqk8vPv7pai8fP19o8vb6zvYXh8GjTCXQLkPholXUvU/0CKcbFChMRs8o5LA2q7Voa0/YiC0RQdxCfwuD0QbEgIMOUt7P38/9+5DiFVLldVOUD96t8MZV7ePwLz5R07VaBgOjVO629+1LggdQKvIwHG7aPsvG4fzTKcrJliIM9McJCQ+M8/iNzswqjTx6Ir3Iuys+oU5HV7cinffLMYk97UKjYe58ZnLJe1Shbo5BpoNctlM7XYtQpx28AG+6oqnlZ2piNTxqNvEDCQ5zPnM7DPp06vuT4RrjHWe+Hd0VL/ZdqKhlTRsVAZ2ciKmMEMgWeEe/4lsXW+lZg7muzGV7tWq+2jI8OjBbz0xXqiUWeDgRn7s0+fW8m78sfBws4/LhkbIJyJCbqr6xxQF55rxc7+nArthUcxSZf/iD1kmj6vGYpKB697m0sLxKk5VhS0Skr7Rlch0KVNdOTqV2EdqqNGrnSaFJ35s6Sa7JFIjhb3g54JE0JX+iGTRphcQlfo/EIsophXAVpFAoNrDKrNBEvDBUOZbnzf3kDNy9JkJjd4dN8AqpbZlndkh9PhTPFIV90t3aNnjFUiqSlWppWWsZ1DGW2co0pR0OD/VNfDkgPc6z5m9zmvyi9owOY+T4rjxVgxoDn+wNYwR9KTK47DdAi7da12Mt9fJiLR3Hpcyn+Wgh9jgIftk68Dlv8zxqEB772tkpcixghSH+Ga48exEghlR1twDWKy+p2SMuG3GfnVA3m+TDQMoovMWHAMjrL/MtBciY0vtLwfNaok5Qe1EBqDa2RtNV5ZtUhpMrg5qAmPgngox0/NcYGGokofVPhaMePjTMC5tGMTYBD0rj5As6dgmI394mhmuENphwYVag0KpPKxxRy9Q9GBkhNeBBj18tuKKmN5VekTH0G3SFvVtDt/O3OpP2wgRaEkrDDjzdgG8YPYyQ0iLrxB5KN/TarOest+8oauEZ/0ZULxR4NLC6xP3y6VeldqxSIMVuFGBSrAD6K923UlPBFRcqZbXXlG4cCN8phSCLVqGUbwUdHag6tC/wiRFsmFJUUdI3IwwmtrlRIrWggrazc2PrFz/8qkJxsSIUYFUgYVVB2Mgxco/fh4/8XvVhtsvjgqA3qml5Rm/j9JVItIldo9dIlgEcyVvIkReG4xKTWqpFsSToXPl1GNsWgtTkKYYEnEy5pqQFOXAwpFXJIIsjgwVfLk40xNr9JKSny8sHEucPYc2x4KeCQKmsbSyPxSKVcn61U6JWReGRZTQN4eepe8dxX56Y5xeKpznNzXs087aV7cPzivQJxAhlVDExaM8tqVfHIBDtrari/JpFI1byF95qyGXR6FRb2wRLmOAv2bm4/X1XdeHc+UzWNOX/H3fLzpTfbqzqfzGd+OJ0x//BT0CTte4uVnDOPG6+/u/nBsunNMAVgsQM3Zuiw7bgxIx8D70iF5U6LtbzQsUeSdV7Kh1kaPARpyS/0+Evtc5y+KS+VLr0YgfLUgtxPMvgc7kMwSFIZzZBShRkRkyn9b1piSpJDbbQoU2UDlEDKWhJDZ3GYVv3kY1jJlLwkh9pmgRlxCymBlNu+GAuli+EzJkeSlUkpRwlLzUxLSrKSCcwkXZ5RHR3pw0fxfkJndLQKy9Hml/s9O9zl/karDNZCfRCslUkgvapPBekBj6Qp44vccJ9GVFzG13haKoiFOB2SShV6jWq9Sq9VSCEZDScWtlSAG6sJIo1P5299WIB5/e4dnnJ/vi4vRxUdTejsx0dxX2S0Os/IsErVHGHfJ+XxRxiwSboqibRCqxWWucXqpJv/1kbI/hyC8J1mtF1iKKv+fI0O9WVaGz8XfgAhsupKmd4GWWxwOhV6wFFFCVZrwCHBJVlCt7oPEhaDwjmjGCotED1+luqyhX968RBdK5qqYcCQXpUN6+GkIPDD1n6s3wPnmYw7sB3Jk5M8P2M/bwX9R7CD7AoWQiiPjFDa9FpHab271V3qd2htemXENF+R3IQ78uj0E2B8SKX6IM+boP8zGvJF0WEros8vrXA249UKFSSWQnrIDRzYuQV7sMDbJzBgP5LfrdJpsj97jEHBpe1NFcAziq+v2X6/6njQqWTf9j9r34D2TAMjVc/79QQWpaYWUA5iQMO0aSLvcoPYXL5W9RE7lctgC6VWaGf+Luo3iQkPqQPGXbSHiYlD1AHgYuIsyC8NaFOcYI3HEMNqm4flC9U18AbHHNimgGFoNeRjCrkGYFwQZBytnXms9kCUIVujz77eZFNqdNl9Rtcqlaqr+rKTFsERktZakPPWZHVoWWlrQeBtYRpLa75lpr6fvExlcrxN5thqNkpZaQunBoK1aUmWZCXzbTZEcY2G6/gEthqZsh0EM48oy4tiRl1+WZ1nhzp9JsqXavNVKdXxtwxSHOxjMgkcYTwjQcHgI/zRuu16EdlxBGVVXo4uv2S7p7QOaz/j5t+KalMh1fE2MJ2+6YlQkQW3FFbWFafgcbBKJ5dN8S+q+GApRp1ixl1wOlskp9OejuSEoeG5RsRUjLqZNk/ONrxoPI2Z9YhJnbc7J8wZjpqNlpKCMuCKUWW53AII8rCFmFLAtuZyPIWfKdmiYo8Q1mBSpR6Ry3VwdnouW6rSi+QTDwkMy2NAtSHXrNduxjZvxjf/gP2gVSv7MMAmeZoaS924W6XWSaSQTvVupbSlEbw6xnDNbupPzIQSV85qmpk0B3MLGah4EaNs6tQFDOWiAiVsC/4BkS6yzGSUy+cq1icnt5uz5wLBV/FHQ2vqBmsuSlIv1vgHfUfDvoyraTtSc8UofTFn1hFw+Ah653KAd15+yVm1+izanl8acQ/geNbsdGwVLputx0DreUnA8hlscrwoRaC/yBf9j31uVWCGOzW1i1/Bqoi/MD0mLjH1SHJYRthmHuCcFj7jobxnwq9hSVJWEqoEXCXgkM5eErwxlwk1FqXR0qnZxuBP8xQvEwiJCSBh+N5MJAAcO5/9zRrvwJy5S3ZiwOX66cXyLHd6tkYvh4wGNU6ApSXeLK2mxFF5DhU822Q9csKKAQpJU2b9LPBsnS5bpTXIhf5HTKsy40MHWVgP/tXpMG9bU4lQLS4uF4JN/aYPKPvKWJ+zXn+KD4A0UlHTTJIVN41L1CqtyqD6+AWSuuFLPHDNfCyN+PviBM8kUjtBWX25obSpEaSTkGq5zIdIyL6xo0zvNbOAAyelKQslvAoEkfkq5YgNstoRxGqHvhcEJwLfj67Dz15w/tctlh9OrqhQASPFFnoJd4inTct8IhY/zWRxtT0lGTa6wa0pmlXttWUjKhEnQz/g4dqYhiK1lJ83k6NWKyaTVG1wYqzShXvSdWwxogan6LMK56hKvUFWXSXX87e82jDn5GJmfkVsWgv1sGcX2EoQj68aAh+tLdzR4Vkew9xEo21iIkTYZoV0VgtMSzOY5rlHIZCwTGczQ3raRgZtKY3WQSNrXc5j0Gtba32ixmpQQTYzwL331N57QAG162ismCRB0mBSRumyxVL9dgqSLy92ZYXuWBfjFySsFcx6IY4evIPolY6oWsHY2la1SbATKBUcWIscRLsO6BefntpSpLz5FUbt2JN194dyvYynjLMmk61xrxNLIstQ1RbBXUkNFinRyng8vazjwy5L5pCYlxmpV5nMq6mMy2Bgu028oFsMOBsZ31Gp3zGYwzhwmLErFwGD9fmpspSNKZQ9lGjlprrgGSnmTBwSdyZmxv7H7P1rCmt+nAPCftHLOmo6nsPc7+OnxTc6OWmMcyPjwV9HuqIXQ3hf06WqSuInJKiTopNUCYn8JHDrypAAMiEKhQmBuxxdSKVQ6tHIeLhd1OxT3uzhOfMHDZUCiRuScQvtWQt8eKdVsEJu0szR7SKZy/lTqNUKRVqNLkGjEQk1WjBUbOCLrF8Joe+ZKX+GIoXJSZgmkOFNvxwveqh1hsfpmdF6CNO+WzaMOPOYrMShf26X/ALRD4utlzBaO+zPyAvOy/B/CfLpFxxwKe1CGVw/SUhL+z+LHyYyQ/ppfSYw+WOy9nl0I9j/+DPtYfsH1K1X1w2VGbct9s+McYwX27O6bENWQZcbGwfN7UVQRDEm6LIO2bK6iu3jDlfMIr9xW9nQuq1XwR2/ws7kmGikXXQ3XI/Ww266VTk5GbMiA83gxccnuQGQ3gIFqRFrxB1eSbzSFmD3w3EXUgftihHNIPXaHHoHVO+kcUwLgyv+fW/QzZM3o2Cd/9v8Zh/oTUEhSLYnOn5QKupEgaLcPGYGcrVRxEAHmTeMhL6V6giX17hxxBupF18Nv6q5+uvV37BfFQQXUq8vvfQd9GNRCLjqsBtVefnXa7+Bdalf1HdwKFC3P+wmXoqH3pz+rQLCpv66vtK+0HUgPQXNYju6QVUQMaXPoB4AHnlWFz+1UfOY+YTpO/OStjHFDQGUX13WAx0YX2rfhe7qxLWNC1XRlqHLhLN1oKFZcB5Fj4ZPPL9D5/Zgbtbqzhof64ClzQvj3/x8b/jymjqyWgiBTas3/ob+pnxFkmQfKALwtPx7HkJLuYSGB1HLk+Pr2L3L2TwdjQmlKx1KioOSUCfv7QSKUf7UW9AWXHquoX34PqDz7+tGUyenogcLfe5x29Q2H4ylXM3yc+WV2NENf/DpOwyfGTioGv8/SbhQtJ41uak7MUS0Ad8/4s1vohqL2VG78u+sBdq9iG0jykSzYDH9FIN+kj4kGKdonBEv0Cl0Knry2aOjZiDwNdiM7q7cHo7CjQdw1tvQQdKnorqcNcjmF/bOQXbndr5BUrzeiGxZSnmtYy7y8bK//nACvVfosjYFCz32Cj2OCla+Zq6VrWoDP6f2Kzr0CzPlDQmZlZaEqbiCrOhydrGat75qVUyCTcqaajHzAIXcmOurYzUC3ACCHg4shxumwdEJL/kU9sHHr67w95y7cvpxfAPf/JT+g0M2ENUqBp+sMKPmndvo7BzHaqKy2clCtOW6pqDDsjwm6ZOH8eNzQKxaQWZy9k/iTBpneq81EbrAnJpvjkiWxbTXDNaly4q+j9+Rk9MdR06aP95aC+JHA0mUcwzvS4ZbNXJPrTAnp1YkL9Nmc4vzJWu8+EEBbMjRwLkmPWIzqJWTaBea4C5SF+y8k6RKTOAnRVuhiwdP+Oh/nZVbJ5KTvlzhl/p6GnheJ1djTx6RVY5WOAiKYCN4xaKbBr5GQGZ6sWD824isoFg2VlZulAdsX6LH0WP/+msNujE86il+uYQTl48/Mm3srVm+w39zzaX93vQJtJxSF6W0aPbo5EH2WPhzXfmvzDNvEjq8aBCloNdfoTfQ7NUhDkE9+Rd70KISgNpLXut2gHp3VivPvIYlQftU0d79I7iojxXa1B0ae/9p0BDYOIg2ogJwfgsFhckEqd9/eQLZY17zomA8eJEZJJSbpWYwo1elVNG6901++F42FhQU15OT6/12+49Y/l+kZErs3w7Hy8JCfzFZPZ6ffwXDnvydnBzyxG4HasbOBCYzYSeD8SkHx8H5FET29hQH11QTHDh/f8Gkjy+7HRdaVpUfvFDZgwWXV4E8nBd6/p/OC24NsOrawpCe28EzMy/SHfqIIif8aBBHqEaOA3VYNczKg/O8GmCFV0elKuZKC+pwh04pUeoNatZH8EdemFhqnSFbkjEceJ20YL8lYPY2R7PiOKpz16VMWRbmSddo6Hsoyx7mEcAKifwfUbLq8pdRmkwO1UjvakYvZ6LVKFCEm8fM/1tnLy6xff9tv4kDzn2Ofn7O+WmAze/Tlov5A+oHy1eupDk8SlmLxwXlTPNK882bxmB21KzHPGDfiB5A97/yVwrskC0IEbsXfoytOh8gyMmfabb480kEQOOIwoDIGTJk5N/oGXMTEMdiEDEoimxM7w8/OH1lQTt65Raw5X+6yH5oUV4DoeXrNNntnmYCKDoyinuVUkillkFKL+4t8dV6eFCs1hZImOOdErobRPwfm4Zsb6DabFDD1/6fTJUO1sBamK5CM2ZrwDn+9fuFAqgwFYCJClNODt12/vhWH/Uvyhvfia3YXn1oYnpMCGCTiu5TotDJSgmvWp6e+F9VoDvi6EJ0C5x2HOru0NstfrncbzlgkCTSmNsyYV2upcOiy4Uzt6XejiXpg2QMqzFVjJe3VNu9Nc3FiDkwLa1U2MCrTWN18jp4neARCXMVWrtEYiPX9yzBQM9MN6BMsdyelmEW4UmzP0tO6LHHx+Wk7X2BvOduPN/aX64qyClx26gvCldfevgkpYv1Aowfee6oLrag1mqXA12Br0BXgMSNYidTquvyzP+OTZadTaVz42ZG6sLznXJZTp43OGHTeyJTdYGbbKuzkSBPXU8qOauXSeHeK4pEIvIc2XKjTRn8xauDWbl+vCwCu3N5CY02xMyJuHNpEZW5OwZw/JZmhbrW2GdU1zYrLNamJ9TUjK8s4vIdsj4Z317EUyoVBz6SHIUcyC7VqYQLhF6XSrUxD04A8QkgYYEa8SABFq7LJvnUhfeqN2RrNrxX1Pfi/CJ3s/hpZuZTsXj5WXH8D/HDD5sYNDeJvYJAgVf8fjWaUmFdlpRUY6VU5FZLfoyKFYbl32IlVWZRqlg38xPorKgfAedLLWaDYY1qdXkB4/l0grQoNicqjRXAYQeAgWChaNCgjfvd1czxLzvxziKeHwSR5TOkPfDTypQXxYuMUYkt8HPgmR8QPuovrDHnMmDY2oftd7qtcfqyB4O0r8ucRjS96Bm3q+voXHnYFCSCfTw1I3N2/yCczJ2GPtg4naH15RwmSQ+QPPnEQfR7FDjtWrxzF7qrHWjGaLn4hD4Egi5xU8atH/QEdz/aEs5KLaXyAO2eP2GFf2OEZ7rsmu6nZZxHz7eHhGEtkK50GP5PItLzYk1erK76dHixd83aStfpaXgQKPerMoHbKeifzB7ZnMld6K5+Ckycxtb339UsPgYcEu/ev5uPQGoI+SD/yO8HQEdgiinW8y+8hX+YZ2itIu+2EZzZl/ZfUzcp5Hedr+0+l/ZRLJe0WsXf7UBI8dwWVvvqRqa/+Q397Y3zc04oylLlxW5EU9DK+a8Rorwy4UiRh6/Qvf3C8A29RClFcSnj4+qIoIy9Iyn4rGsqCgP8MgBCGENuSUAj3Yu/u+afOxI4Ra1Z7KQA1EWRadI1FaBrn8iFxs1stOZusw9lQ6HhDQVon3MdWlA6zM9tovoWl6MMle1bZ6De2RfQ1xwI7hfS+Qe3obcqt8tQf3Dq2IHecSrRxpl/UHvz7RhsBbobNEjXVdmV7BD6lF3eeaK1zHX4s4+DHpUElzwKerbHWTrmLf0Cf1G842M8ZzxPrfEt7lctaUey+ZORnWC3HSobEExFGXVh/Hf09+HxdTkBU4Ti8zEUjTwqRySaN7Z2BoPKxinNRedkzRGeeA4kYzSIyU0BZncJQlsKiqm5TROh1m7tBxfHb8KXxlHJ3/aCEnAJdoMCFFysyd4xPO57zHjMotyfHSguGeDPFWaNMGtFzonnYBxNQVein6N4o1lR/i6sCtDnVte4X8rRfq9Dzu68ZO2Zcz4oWk7H+tyO1XmxJlxbVNV4epqrcu0abzFot69NpSqZ9HJqmqx01J6eovCuWVuhOD29ymZ4pasasPozOPeKozmOgQE7+/Q0f9ccfA4I+PZ82RCHxP/K2e+bBWEzvj73qSu6NPjjnJi8GpPv3rvO/Ml48L6p63p0Ts+rRZWPt0i5iGaL1eBCqdxZMOl1s4Z4b2i/OEf+ULs07kOrL45nfTHxnYVWEqgBYc0Pxm3uDVHjXlPYBFsrGj0tc51+0jGNXXWnMTjkji4r/bmlP8918RwQwG1CaHDka5/+/ENAmVsnrmV4uzEbXcfEI8Wf4YaxdU3M8X1ktt8AUC6MjoXPVbuR6O6rLgzluCYbZPf7FvueMJ6YAbod0P7nnB3KXGAM1uXf+sC5k72w0joo29bG399b3WbcG1s3FtocC79oin7EdZ68Rvtyqa+M37JK0qsFV7FFlTsa3YxyG9Lk+MKYtm+39o2Jw5aN3SJzrB1av/OVXfb1zsWauZmg517Frx9SrIW5fNIURYp6SkkZPY+mtqg5KOf34OQJv/PaIzjvM8RO7hEhINL6xIB33D83Ka4X+0FmMoFfQ1JEyyjqgv6P1Sy9nl4+XTD7/NznslfXY5bbrIDn0kMVAgF/hg+z65X6zH5ijds12V825sH+Ar1PHVzKv06FXHmU8Cqkn8Lk6hsod8rJx/EBzf9ehZwB5d+ndS5T1CUkV1CUDmU6E9LTuOzlyzh18ZRCclAkepOip4M28XbqWATGdHEOr5DrlObkpGcxnhWMDIp3JeJAhOKrZ5g5OZwCQYE2x82BN2kTuL3rBqeonz1sY55Yfz1SRFlxTIZMPCIGdvckK7nBIGc5WAm9MdEp91dJTEsiR2NBGYMZSD57e3ropF+ZyntdAPcjOdcDp6i/MqIy7+6KnHFGFHuQWVTWoV7MuBIqsHvMva+FJ3bfYq/F8xsvFNs3hR9EH80aW7M/JubqrrljtFdJPzqzsdq0JCkliUxNSqKSY/W7wgCcJSl57MJSUrCmeYC1sLnX6+8F3y709ZbWh5OdtXBZb35vb3me1WYFHI8YVmVlwSrxKteeABITCQkJhOY4AGhaSrZvbp0WDiLJMDljGgt1Rbz+myCA3q1myAwIH/Kt8GgKCvuYj2mUoBbAuU158is33twsEHeEz/hg5Bp2ZwfDR3Z6YPCbnTaNPMcwFtpgQ+rEmDYl1QDPVxtwWhRdDq724CleGqM/tSo1TZ2iXPv2qv2amWGUt4GaGEI7FeIkIABE5QcVvfTQ88ueul57bL32AlPATOmVL+n1JaenrnOPIziDvg9Emj1n9JxRTaFTTW3Wk9qT2pPak9ozs2dmz8yemdVSYBQztKuKXlu9em7plfm4V5YXs40x9tIG9doKPbd0ZtqYvF4a3y7tOoJIFYEp+OJ2Zj4LOJHt42oXKz3dbW4fiNDmHgPMtmp/sza/D0To6a9uw+1vq3ekUKKrgPDmqh4EANo+ZBFaNugwS2mUTbjqUo/SBeo7a4JUO7pfNndD/SSs1rpvS6dR8gyw7aNChX0Qrs4I8Hyzo70epRu6VgzmE6jAhPoc7MfSSYmv6P5THTY/g0j7dYWALaUYrCWQrawFEicPSJxUPUmZRExOSRkttU0EP8GzfTIk8PyhefBDKsyR+Kruw6Sz7M3KNb2Ij1bytMv8Fv9kwrjt09D6dgd44UhvREPge8k1at8vnbUCGxnHBY96TZFg9BrSwB81M9vDGFw9PZVAX7E0cK0zUUOny3/x4fBEmQHfmkjz25Iyd+cwe8dp4oNz4Jm/Y9ONsyHYLFiHB3oHcBRZvJWodg+wC3eFCvtjZUBhiDoJT4yW2cpkMduYbOZzRsfsYfKZL5m9TAHa961esfv6tXt+h+2Ljn+Cpv0cQBhCXw489m8rRGQB+lN9ILukAQJPAZqwAk8JswGbRBzNTLgOl/P7VSyDVSjSwdv6aP0I+WFgqqQ3XZZS/zJgQogQeaqqxg1IR8tXATYv2OCaBi4ShLppk+HjqgWYoOADuwGbnnKEgImlbk+14DA8tSBd+oe+uHxQxuTBNQ3lJHRKUi0sBSJc/mMC0T60pxmHmufQ66hC0FtREgG6omb4qJZgO6xnzw0dd29ozJ3nMxEh1H/Zasc9mvrWnogHWzofgiWwxuV6nE91j77YJnpdYE8h0EzvTZx5ONN9cQ0/40YdyEi3ZVJHIOlO2fYYsfbDO1kJ8ukM6hv7TIqjZB0ybsKsSWnJOzPiv5tRagkn8OJ84jJMj178wyOqlKrKUnNHeVVcRaLaJk9t6gGqVlSp0ppPpHZrS9G6zMNVFBtAuWv5bj+AS0AQqyRDymYktPCG0JmjgK6yVPedBKfK1yr21+D2BxyHdni42FBJQwMug+XFpBGf/IEavkX2jJu1r00E6mrw0fd+mFONELTETzH2AdthN/xs7i8UDrjtDtv4M67hCOS+fw2F/85xdBnAtI7+W5NBElGxcAnJQYos0O5nrsSiVJSBspAMqZEVtaAFKtNRHVOLunRZ3+onTZAEJ2AYG7AV5+Mi3G0H7JTdshc+gxASFUQTsdSPeJX/w5u8z+/7vyyC5JA0Mpe0kzhZQlaSdWQzeTacZ59MKmmMb7bPxSlNbdojTh91GJALF8pRgyZ0YB4WYxP24UsYnErzdC7lhIjQwlbO4Rk+UUbZKlSvzuhb6XJ0qheerA6wxA5Xu96t7vEBX3GyYm365m3Z9u7h/WIHR493uddw7bfnrpyfXFZk9WjSlN7sztUEef5Avum1v3nv/bfirXsH3oUXlJVXRbXNKVa8Za1uczu7uMu7utu6v8d7rrWK1Rt9aXvn+7ovxzenDMuL5awcLkfKF+UfgYIy1IIGo1FoAjIhFBUiN9qPrqPbyIomkQ25STJOcRPuxOtwAz6Lh/AitThznBPOCwbV5tVG3A/cRnej+4N735113eU0wkhJWslwMv7u+6qabCfjdGlMJF1AceqjDXQBbad9dJhO0FnGZpI1sKmsa/Uf7LPMIQixSbyBL+dn+BAf4Vb+gE8LkTghV8m10i8Xyn5pkVelVT5RsDRDpWqCKlLb1HdqVM3pZXqUnqLtul4v0b36hv5Vu+o4L/RSb5i3zCvxWr0PvAqvwzvnjXg/eXPeyybF3+5f8R/6znZa0BnsC84Hzi42nBgWhQ3hgrA2PBFeCR+Gj0NnH5HCiZZFh2NBPCReES+I/52sSJYl55KJxJa4HIn+mhHGmLpZZDym1fSYY6bFdJlvzUlzzlw2V8xN86v53bz0YHuaTex4a7EltsG22bm22x6wh22FrbW1YwBAgA5WUQDYT95uL3/zRRA+hqYroSdARZ7p/BUEtD4u/PbZb1/xeTwg/h71fYFCdgQ+IJIjzCTod1qpZT6e8bgujU3qPpxdeiR81gLTP2rYKD660MiQRvGr+NgqIQxJY2PEXyU09l1KjWxx2wr0bRrSFXE4b+xIDFtikqZ2L8aKXdz4f9EghmI64xrZOgihIcI+k7UnFWYrmowTunp9LQCd/sQK+5K7KhsodTM8LgXJA6JkfKCtZjiRIVBBXrBAk6Dqss02hDZksNhGoQst53R4XrScTRh1ksiLauVTm6GxRrb8TGMOoWZVKmOP2Y2CZKW9mycqyQ6oQWjm8Aqas8MYq4e27usplYbRkrdy1oupz1P7NNxV2P+3oOQbgHRKbXoXeZaorBniRgQ/VUneS+18Pwr2xXuzK08kj/zDnK0TrJvepN3O2C8W/gbV6P05k1gilCvIxPG3mlRq98kHj1ZFW5zhX5NrW0srS1tzsJbi9ZrfErqIZD2cvf978M4zfpBI9z0gG+HstwX3XTbLMe2Q40gWS9YLtdpue4WXgMRFPGsI16St8vNf5zrw3WFcmDfYogmQFK+gD+rRUo0S5vbo3cvu45McocimsDjmbxQklrrvV9vhWDz50jDSt6+D/naYRgniVSTCTXL4PXtxzob4W61WOfiHJBLmQdGB2VNsr4243dpKecFnfpfF03dKGut7xAt/vvTk0x1/6P0DgFZ9OhQTWYUK8Pyg2wN/LaKY/otw1KDAPnE59FyhH3fg8KIwKPA/D2Jnz70YAu3QixPhIC/h2pVNDyg5vbwkEITVCEFkJEoRHcmSS/s+UmZXmQadSOxwzzDjU7CLcdOccDw9IW/yD+e2HglC1If8dMeMJdGUMFoTCXyi/JdvH0XiX/ftxVga3d/477+2n9lhiXgQx0fcMStofQJGPdol8kENiQM6e45D0vZUzHu8qbQ7lPCHYKHlkmG+8HEE/1tn94nU0xaKpsJqLgEL49Usmwqjv7sdiPaWoBgC50ASzgvjsmFJxBzpwFsPWSt1UYSkphsaXYIgMY+vSWZ/EpMHYegv5274UOmMeZO30qruYa4Yf8wDTa68FktKfgefWB6YDZVMcqyUWhySmE4MR0tkxeOG+WdLi0ZNJAG9OYEGWs7EvUwqtTzYWUm2lBt1aPnGk7tAPCoepmv0pgmLfFU2g4itMaofF6QdZ9qafHH4SQarE5RPCkbrg5pw69WqYCI6Yar0SgePBg+mGLoHqgiB5nCJ3AaC4iVL3M0y3qjNy3fNuerowWi1G+y67FxmfejYGBmtW+cAERbNSXp57Jy3Dyps3joV8/CF0QybGV3oJe+H4ObwvS9bUqvwm86C9NjHPd58mJMMFqX6/WaIfu1r64DTc7K0TNXj3cHZQXeUAM67v1EpF8vlk2YgWDTtQProVAHhrvowQ+l5NPT8uTFFK99BJxpqu2geESI8aPbJX+vfCZUPfgreenmFEsPNhVGYPIjaQ6nm/E+chQOb+/oib4KNjb0wChadlQa8crwYzs45Il23mNfrAvEyW0jos13zdAjtC1TKNSZqxtK/KaPC2K1q/3UkeJ28bQywmQ7pPCTnBcwvrGdBFtyydqaq2KGCjm71ouMcEzNHAeJweNNKMlwLQSYJ45yRdmCqIAxj5AClRHtemqXDONAnMkK+hySMs1yVVyKDRB9go2lXE3teYxjelLdDP0RsnDszg91uN9AbS4EmoggvgEpxQFl5hhMB0od9MTs8lV0oTFZ6ugnRw0sb1wS5RuyDJbIs2KO8CV2xfB5YdQ0yGkzFVIj9IvE2hdTBVh9qKXPIaMbvcG2z/XnfM8dPPFwarUiy9ASmfDoi/4NdmeR5CFVFnl92Am6TZHi8R922DzePAZjIhZepDIsmBXUhD/lHHhwhsX0VNhtHcHIG0bLAtQTNw6UnDo2g/6ezogZBVVml4rYlHBZuLQqC1lsqZqBUUDHQUmUsqMf14dpaMR3X5SHcvewRQ1GPDRkq5kK2sZgN6cCHgzvxTCRGErg1TIh6AzrY5RYU2lH81lvayEdJHZVJm03mEts2adTg7YjKAXJ61rotlDAWYyGsNVVdEvQzsJcTGk04VclTS07y2f9CLMwd8w6p59wbL33mDdQZh+7w/zuQPSsISVjGnJekGbcqv8IbnxWCl9eAoVO+A6/p2gnRlBUnAXysMpxUedzQkuS+pp09CQ622OTXIKajPs16g4RPXYd5Urrd3IDBexwMV82ZSFWvcwx8hSgC0HQCvlfUMkz0K+f2vO3Rr8CjIGJd1KU2BStNSUHXeU+cfXrqrnBST5wCAy/tM+iyC2Ct8VyZJz6c7xs/g8gRW9N7nKE3vglSzcftWDIKtYnCW4m/Ohn1vWZffHIARWt7byhpnaiqoasgbBRrOjIRBtpz+ZZFaOwyLKwvxBs+aIzNZE4vOUhJqiZVFyE9jExJqMPamxxel9eOfc9OkFipcQ8+GKCVWrMgOVmlF+DZbrcDetOAZl26L1ZOpRD4M2cYO7R8e7+3Uo/LdK/heLzSsvA+j1mTaFuwDqVD8qBaFCFDrKuDClig5sYTWCTjQkoJUNmBEKNpjgtpLHDhY2ZpyK6VDbrdWoXS0hhgt8/nM0yY2UfYnZos+kgq1Kq93DCZGfvbZ1Gcd3bw4crd12XJFhvGo2ylm/0wFHAo3GAKZPVCOhPTPpG0jTxMs8z0r62Aj/R9p/p5lVKVuga/o3drUYh4NHfmJkV3NIprDz/ihJMhG1WI/ZJxzItVUeyFgQKPeL7DKkLLjpF4BZClGPI2d9RYZpg3O8kgbYeiauKr+qIVtwk/rEbCcYIOJqvggDGq7aysaFg4vX4En1ofypdttpEBLDd8Rm4b4aSdq0fD5ra7JJlBZVW4i7CQtOpKs/xQ6UZVjCmTeqZCx+3KtAIKZdVooSLOQotC5esIuHiuOjeN0iXyIK5iie9JdFHpBepl5ucTj2SnGX5oPRnFhC2DAJjrs1seZUmOQ6+chadH8GTVXS5LnK9Q2nVWC7WN0HS7dngKEDq1HOXu22EBKVyH9lR0ymL2FcNfz/Xt10SB/VNC2y6Agz203KeCutoF9eHtIWB5fXEJ57KkLeZ6bzU0ia9cyz6nkhKiVWFaXSRpwOJNuTNNzsi6Ef7Ota1xdPaEfO1CTpaqv3Dp3Fy8O1onZtC4KN4zaeDBG6NlP8ZmzRrw/4F65/9T3Xyz8UFJsd8TwCLKRDAh7BkVKRQI5UpEfNjRN9hztlKEIHP+7edo+83ftRmkNdtIlkOvnuIMlVKoxL2LuSu0XU9p9nkzo4oOYt0G49OOkgao+F5uFYJTQycqnVMljmxATws9ClR8mggvK0/dzls9qVifvDOweYaEMJS7gHmVSPEfCElTkUacQ3YisoRQ3UidiZkVMhaUheaRccKySxEbdT6zndAMKU9fbE4QcTLte5KoOJrjSpmcD4aG+3B6m+tWYIZMNSd4QeAWYwTeXsgW85MTpc8W+sW+mZwjjrDRX5iIbO53+mGcu//D0zEIA4B3TbMTzTtqSEM62N6p7io0Ah4MbU3AV1WVU/JABEd8/whSpzuCqzNdOp8tg/EM3q+7dspuaT6YNnNZQQsFo4L+8dorjTNsIBUU11T6NEnq5C4Jcvi/19iHNcZ82ryyzQWPIwOBuf6II6SxiXHAekRO7Lr8IGE103xgPzbYgTe7JBcA+P18fl5zKLWCHXXJ9gPm+y7OvSUT84jSuON2s/zOX82cmKX4+gljEDy+DDMzyYHf6QCBkC/kFGL3QxqnlqrafHezhCyCLcuyxvvp9TnBKnLTTcJA9EppG8A6yw6TFJg3K2zrae3b/flL+0dHDLzxAUCeQacnJRa3hp6vELmoGVphnRK4FHh64Jadb7iuBwlBNXw3O6+5QVOVx1PMkZ7HFB0suIr8oPGaFyvCuWQQem9Zy541MGoFH7y1Ey54EwwVqwQN7jmKVCumJ0I4dzIxpsqyRVXcjpyuWFZJZT+s81B7jrBgVsFMelwVvj+iRKrE4cLntEj2tQEkAG+bJsPWF1JGuVhF6mlHc6+UJrtL5jInKEFK19ckBeOp+LYqrUZ5oXbPt9WIfMF5ogS4cXzP94Ou2/ArJYW9mYkTwrlbcxUdVnrZig7TsWMRhyKgj+S90fhlvlWGTaYjBZ2nfbJyY93Ez1QgPS2OgO2qZTtKzrWFKM6tc9F6WVVXuWSbkSvSs4qaRSmUmRMud8USIVjURGvODkFYn0pxCjxiGaJqlq0YjrOnB4Iu4BCecVusV9gle1uGSJu0fU4KEJNUKI7PzEfNFbmHm5JUI8wSwRDuBRlpjb2WcNN4cmlajeCtaFKFSrRpEWRJimqWOne+APo+nDngQoA/JchNl6LFcPRziiYaLyYR5hEkHYCgzuySLIa3EjSaruCKwanMzENxDEZ0oO7IjE9FCRnj6vqlsQ96UGAVtWSoMF8yVCocLRvEQYOOXIh+Kvg4td8mYq8VXuiyS1kmOqHgSKkMpqm1v/iYgLX5/oYsLzu2MHXdMpV8UWlzbK0y2FlPLFcRkk3QpSMFWqdCdV5VllzoGZruwTC1qOKGys0VMSec6navvejTls9VeWvZtKPDpae75BVNu2TCT7CnIXM+rmW3EfQ69ph3uY2HLizcOHpwH4p8kHSRPsiNHVmzgPAmDuK11v5Yy3Oyl0E5nLlDJzIck6HyOCZs9nIl79EjuGTQfEwSZlxvolycdeJJdB15bYMOpmwiXlg6mn9wpLivpkJI0Np5DoOzHulbh5PRYb2tRmTUosHGow5xyVpqSkHzP1OBYJSFTfpkfE/NKjDhNmoz+njM2gIJljofjzZObeXtTMtBVXMB1fOMiVoYJ/leqOcYlzUa6PvJILVJ01xUV0e/NfXnp7eXTTYvzsbrYekIXlPqnl1LHnKgjnSEQL2EIemfi8xy0h04wQu63UoQSOMZp3irMoop+N2aXLmdXJaJ5TO/kLdt8JoHhelg0z6CkCSp21BWV4JUy4S+YrNwQIWkFqwmOPyUtYDdrl+6zLFTUU/O0nPoSaq8BbXEkfjapbrqvFbsv/9AoW0kkgBJw3s7hMhDGk9kyCxsbs6AKQX+myKhyCbMESHBwhR2KMJqqolAa15G6naUlS8kWF4P8mZEVSu3z6M6JTucIfQ4SBTkIimBqN9exN/YZnnPElXcfMOUpLy0t6zbZV1EtH5c8mxBvHaKomt84qGVPbShBoQlS339rjagRwPiIL7wKvSzq6SuzMvNsac/lsG5t3hnna7mgQh2IkYMYbqjFwz3SmKSsg6HcSjREDF/0wKd4dO93xspZW58LCRRWAD7+fzno8fpR+Brzg+XD8v8TpWNeyJ4PPoofOj4B+dRed8Q2B2wagRLR8tP/X9mzkumhTGbdPaHj29mmK0bQWcD8Oq3/Dl+w2IxR79rXAnzKQ8M7N33HzIwMvnhO7qRnDS/wkSqgKmdPyiYMcIBduTi0Y8FCaw8xuKFPkFTr+3e/fHut28HyMeDPQtJDz+Ge8xLSojvAbJkkITjzeNEoCn7yServXs3QAf3dv3y6esT42KRtDkY9nrt2jWr371baaxb/9l/v/13Pmvo1MlTn+39OvOr+d8uuHDSL78Dz7wSKzIItKw99Wn/3YPnU5zlrNA6GrDd2U1cAU+5hdW/R/3Ojr97d9wDiv8Atwb7u8VvZF8hBVnW+kgQOk4+eoawrDkaqDEnFnyW6pc4P9Ax7mpIDEqJimFhkVDU2nrs2rqiKhEepKgHj2pkcVC7oBiCixPnMrgJXmy1RIKRjajDh4VgqY6LhjIfV3PCkId735n2xat9fOHVeWcx7ntQTXbUO36co/RpeA6f/ninrpp7tdr6oDTvHZaL1nGtZRlQZSu/hDlmSNv8PvD00x8XPjKPZ8D/Oz143wc7GSK+KZ9OaIMCX1tlTmn1Bvv6SPGAUruDaou6R48rZ+1i6ThuTamiP5lqqGQOLEpGKS9lrsMLLNzhWwkNvagBwhInt92hc1FwLGKehzv3CAOEpb94Pdll7JSGpMHUamHSSi7evjBZKtKAp25BFjjE2Cv1k2omnv/9JT7JurmxT1Ld17FmebebddxBfMx4fMDgrSLDR3vLrQTV+QTpIifd//gTqiZaceBnIER/4D0z3hAZHBasjo/vuLLVks8GLVUtIe1GfJ4JM6cvpjrDi7HBhAOecYqfuDQzzCUTkShLAjYjVr9GKfi0Cfudtx4GDRzse2zoOGrs4IUUi9fl5Vvm1RoJPIku+7OudvvGBN4fZFbkg7hWvfwKGk1fxckWE9B2RrD5RjlE68Ues8na2+y5CkLJfhU9Prlo1896VtiIqQyb5use2hh3cEVK5zDUYO17drtie9XEeflBViCzcbD4gU2wV1JMIlge5elp+7QsywSqJqypsTMzvaJoaJUoxA7p6tHlsgJbe9tAaxluZeUx0TbxmUASeiVg17u0INfx2qdU0/6rKLj/2EJeoe23R8ZfKLx6YSyAnRqdOQO1CLKZRSgqszPD207PVaozWjokqpvIPVC0SoD9Cdl/MZ28JcjLiApT0XYUM7dagtJSLemqTK896RXWk5bLOfvkzwve6q8NbrkYKtWF4QqLy6M4vp6qQ01VPy5leOhTd7Rnc1p1rJFocqq9mSC4lYE4vgCXI1wvzIX6jAylVnrd3q5K4oIcJjzLdUnuyQNhxQ9FOzExHoMgomB6cAKiHKB9wppypQwUMkJhWnGXSnet8AGNKIBCECUI1lcnHcs4w7QW5b1zcNrz7spqGQynloIXPZxx/3zeUj/dXjuDW+B6OjxcufPrK8f1MgfjyomIJlxxVJozSJzm1jyvL7dmpw+UHjaGtn95saxWw6LahNjhtbLOpJniUF3g8ymfIpb8lMVUVne9UlU/voVlA4QHOKnx9Ky2m3IYV68ec0nyPGsCQrO0rz6Foy59IK7sQfTRkr1AtsOtjxEEJPH+VkLz51n23tO/FCNA0nkPrtPLeSs/VSRDrpbSe7zR80sn9m1EezHwPqIrIHaiMQ9v0pfrc96Ydif53HYDlhKn5NH7cDiU4bxB7N3ZPpXWxhdMr48lAI2VL631EHFOi2DVTuZEISEIbuHDdCNKygS8WowxEnBqDiX0vGHVkquSSqtHjMFrUUsVoJnlF4ocEC5YRX+hAZKEZdiae3LcrySSY3IQbmaSVMS0Xt9JOoRIJqkIqh3u6N4Pfx8Ly0ENDSWIUqnVfm/htqZY/H7YxM7OVuOZrPM2zR5supKalbdfbnd1jWSzqQCQbhy10UKQSDQ8NBHUGIK1Cl1VYvCXEREVqESuaTiH6xVfMTGhUtkv/DSOj0AwzycLCOtHQuFPGia/UFtD2jlFqV0UInxk2ixyftKFtRIB102yIdp2Y1FcXrkSJ9xiG6+1/D6Fp7tlhEqFEoXgMptOl5S2i0g3Td+7ht4UdC9cEHohuM8+rJ146/YjapmAqshtSIWueIlYzV/9y+Hhhria7axnW6t9LLSiFfAL6yW8NPHlWj84GDX+i3Se7FlHK73pFwesQEy4nS/yLUeagKG6pjhapwuEWO5Aog9N/Swcx4pFn711wQpGN7eyC7CyQeiLn8ptoVMtWdNzmTAVHINDdV32A61KEDXakLXIgKPnJpQ4y6767SJIct0pTu0p3YJbWefcQlZoHt3nR112ycIH4XmS8xIFXWsgg6vvJVGgrLVo0PE2YaESJE9RpKFfEpdKLSdIPuMgM+r0vuBiZN3carRbKz1xA/3W09YFjO/xTr3D1ngGWw7xCXOOGEMZpeej+poLqTzFuasjzBuVsK6YmJFgLC907keYIRInYeDO6SsjK2lfcZQV2dHunGrXX9/lPBdGtJvlk13m13xZWjY9EO98FpQpJ3ANVerTcAr6Pzgr3AeN0CdAlJ8BdGjKK045Ghw56vths4hrCkWqoimrhxnUisGNsSpnwqTq9sGLj1EyAhE8wQU2d8ygJ9pGKphp5nJMF3N254CD2wEMt7wydbMAHux2DqDCuuEAbdLySQkVVO81b+/mYWz7UXQ6uCR2WIzFm92ne1cboDOIQ35bSSYr0rrFo4/j8XrL/K2p2p3OslzUhtS6kBNv8AhL/J0E8jR8Afb2Ss8XWHWe7sa0FFYsDeNsFdPimpygwbq2FuwKiyhv/fCM3ZEvl6KHYBga5HKNPp1veZtqFNS4Bncmi5LQo4yx6wWeamqvjKs9D7cf+1VTk3kEXcbchUSvImRIu1l2x5vuZOCsQ63KD+KZqgTyonEQadAT346K7LucMmJ93RTzvqkNTfMDJiONbRSaDIPtDBQal5/BCAkKhGWsMqbUDJP9IN6Ghhwre0AsCvdbrWY4GEclyrRfTGdyQ2VAlaLAKPCWBXJuTKGJoAnnCOgvKuAqlaacq5oWzPTP5EuVVpmoit5WcxWeRaV1njJkGMK+SHXBHbAZ2B3+/49/d9zqx9OXXUP8r71ChOrvYUAJo7kINA3PxCjsUto3CXThMlpQ7/fu+eBdrVPoL/Xwk5/a3EDbru/0SNtJD9drG17fOnMDT842V9vSPYMl646rhKCmOIxnu6OR5FVp3ECjC/IovG6gnpxbUP9i2GtLS2rLXLjGyTvhqHaOTdY8yERlYq739r/9XI+/iDpge3IY53JxyP5WR2V26VXPkfgsXQZ3NavjqwtQ69hjtUa3mxNBk011h1Ln0rWkh3ESx+PgQMpA2/YwNKIvVGWDMpUfXCgdWFv1gMFRFi/kY74/7LrQ2metVXgzXWb43oML1KK/Gi8HeSOWnBWx/DzjA/DpjkdghOjauARHSNLTH+kHdc9PaXz6Y6u+moPD/VmEBPfMDqzpG+n6d3AsXjVxvb4tIwhl9TG/7uu74ClPUmKx+4JobaCVkO6sZ1oZYsK0hOzgTVv5e7tP7yEUx2siz3Eivsc3pCbiMoaACjIMgLdoKmzl9a36zQl5jzCuTOxr773//nsPmsGDvMFNdi854kCz+fbjYVo++MUTkodYyaL8rLNBRTvgSobc3saBAAbvwX/h9lpznzZbXVHoNDkjIZp6y0Xk4U0//YM4SgET03V7axRgOrVDZG6PDtbKCOcv1YvFiThTOBeRvGJ+i423/O7TO5SLBFHXDuUzrLS44zOSkZFrFpJcCTB9GXag+DIxQ++YAC+LDFfXhp+kBUuRYqCDFqowKbAlUdxAPaG4DSmiDxrraAKPmbIpNCcgLkXHtkByIjHv5YCbFMEj7bNgYWMudkkemzjhhKcpMAH1dNHNsS3d9L+UF2AnQSv/PgXgnwdsdaa6DyBOi1e/+YeUqU1wEvg4kHRgesT1p+smxx7i22Ts/+6iwLwNyL7s2t0fLY/3W0+R796tvYJV+vPFgliw3jH48qS+kq7093UyvB/wG9iuVNGQhhQ0KR6sArG5/68rlHrfqlfyYFUUHT2Fd0lDkr35IHg3ipdvOnb2zNnjB65E/REU9KLWM58ZbX9AHyFY8PZvc2jr3jWqU9LpwSkffTw4DqTAn0DVkkYSaFelcnn4BvjfsVMHLz3dwrhd+Pfz+VN5BAICQh5b9vr/t8nBAUiI2KP85zSHqYPECipsaTOaRXwVdbJ0oCjhjYCVtCCTTgkKemPDqyaGGxJeJYZ8vhBYo/Sn5xkUlBBuCQoauyftx5GCVMQu9GDAymNMfypeS5zOIrw78O+fFDgkPT2kFSvIFCKIyMzHiB/niwQFpW1yYhroSgCBRvbqq6lQ1d58ATcL7wFBBwTx4lGsVfLKwECoFtdk9fQQgoIgh3vbYtuv/sFuqik+j8RQTPs/oFDWbBkWHaI3P7R6fdZ/8ZxrMLbfbEUuASdz4GsrBUICNS3Xwel5XQ6kwtNaOYwvYivWWq4UQTePWaIIyKu7J+x8hLJIRRzF6uEEurMp8DQ4u/0yrTTAYo/XJQvnygSg9xF5Ijqs1/D1H2ZV6IoXmcE//KPRxqnqQSfXe1+xgVvU5AbvE8Km9fvsonNlXrLxAniyMG+e+sRHT6j0sPqCR++imOvsIMQ2Kom9zqvwnrRspD9EbjkcG4iqE2IB79aqSFm1g74jU/x6RCIdNqOvQf1k9GRBeNZrtQUhntQk2Gdx5VT3ovoWmeD3clzTiWoVOFnrvVlVJD542dz73tslQS96W2BLzhZV/Y/n/yzL/dXeippmMl2KTHI86sZOp7PQqKOxWzG+s47T08np5doHUJm1KCiqVZfBTIP+dGWq+1L9/JomcfGSGfZN86IViRpns5AxSOUgkjwJ2ungWD/5HZw8SS+BozMDzQsFxIwpT3ZP6wMo/XGjXOzYWbP55LIYca4IbX7auvG3kmQ7557wzraYPsjKsCcKVbsIlPQ7oY9MsPtUTyl13Z8SVXm6IbbErMru7eLI8e3s9NeVFUIqF64sIX5jUXiPcZQTyvn9Tw+n11ewihYCCvxy8NRfezS9/uRGz3Nok3E1VmzcIr4/n3k87y+D5H23MrP8V2MGeh8GBDOVbyzCSLR++P3X0wK5rnuapml5mG/jH573d1MN8Xn41TQ/+PnXI99qF0D8/rzPpp/+z7bY3X9HHu1Xg2p/wG1Pm0fG7kKGYGqRnoxYD96ZPCTQIGWa/ag+SP7BfMj0dyW85ReewGcIVtGq1lSbUb/m1HrltX1qvyOSST4b/cBgq5d2t62stzuN6fpsjXkIuuDCRvClrqBukxUUJmYQYbd01QoccwMdIZvW6p2Lt6x5eeCsaZfHmaiUscyDK4h0Y4uuKoVZZuk8axu4eK0pB2iGDSo1QAQEbRa7uZBeUDNdCvSsYah0YiHFwRz7rpioJuMuh7ydPRNRKxh3N9cA0p7aVx/kQZuxMSO3a18t5IiTbkyfnso0hQnrsw92e/3Rxau08KrynOBlfmOqWokYpWXfDFsWdrCh6YYOlSPImzOcy2apk/TOsRz1n1FNUOkFYHWUXzIwDQJKqD4O8Vk822y1Luk5vEYsmgUi9NwVerFzzZBEimy9iDhzQTN6J42rLv2mZLLBqIkBkQUIvyV5B7vNdtRp+thvdv79O0M5BffLDLh0KcjPfOiBT1pRZeBqUJvOe7ybteCJmDWz+SlwmLecXToRqvIWkHiu7E2iSQ7nPiveUz/KgtB1h3jLDGaldliZG9ZUYyn7+jqr9EK35ipzFJQSaJ6sXhp7ISIcV/mh1lXDdrBNwRTFpqGpmX1FaWzAqHdN3rYTgEW06ug1s09NAlYtDyUmFrC0P+mTkJnjQbd2lBRJ2ktuKJ8QPGuiBi7p1W9ffeP9L4psEyrUcpqBQq9ieZQQaouC7lFr5el9oqGpMFQC/hAV4prnbK16VuKdWfloNgtsQxdvmYZ+fpHd/XRDgDxQehF254Arobbo2MAXFqdjw3JIWJmuCxKfs4JpVGXEVIucIXjsfJxdUimNFxKwOLStdLGnI43vup0Ow9OIiJhULl9X0RYN+sXugKVp1gosck3Cp03KNQG09vvb73386X//7xb29o+K1XqzWa/VG9pqrdERsSRhmSiKZrqDVlL7vBe01YLrsLnsBF9alrm9JyMButY6rQ7Pd+ps5bx+US2XS6eHu39/gMC7zt2DqfGm6UqrBaULtTQ6262dVVP0tG2eoRbl30affN6nO7KtvVD0CmLFWJfJjPHu1dPjk5PTqntc2k+MRLN8z7NwQh4topqrH0jGgM0noyhSJ0dPxT04e07reFwr8BqR8BkdYYv4yq8Xt1xgHVHdwGv2f25iOpj+2YKkK5FKGjlBGuF2sHtmklRejh0bOwjeMREvrXV54WabLEIpOeARN6yZa0vtNiOqnsXSlLSqeT5IWtQUlXlBVPC8XiYTjy1kvc+FALJeqVzBCIWWPdD6XcI54Q6/5+r1x7KoYO1Q2Rdk+tKIIxlExFy8Lv6B9pp8MJLLv1fMLdFLfQgCePa0JJmFP7/TgD9/+Dv3ZTbPPK6zuYLAWxBKkOr/NRwFeUwLoKt13UsrKfaB8Fm1Ud7qERr0nyBnnWA87xoDMv2LMvk8AGONzCeXjDrD9kxRvgwJIKYBePfjl5tevv6z7P4rm+CYk7gPEMEAIOB/JFqUigM7nmyBMJZ3dHqIM+J+jkAhU2ycuAit5MWjzrOP+aAZV2nBojgqOZW2Kus8uKKCcUUyTRBo3BWlAUe1sNJi5g6AVHKgbDnPzgk8kNGUXNNRoh370EILGhK+nTVdJNAagm/HCs5BTigaYjQIDtXRoGxmvS45q2Qhnnv60coelPozeF/r9/OhvCczy0CzqX/xkbekzFX66ssZCFClDQ41rzzO+/3oGqVP/rKU0C38ILst5bKL/3+z8BE71DTQyin76j9HrUAl3zr3h9LoqG5cctO5L0bdhyOS7ihMu8FO+cYu/mMX+jepdZRKoV3YnBaP4v+p5rI86y6sas4RuoWW+h8+Q8x6jL9d58JboiIVeTgEoBYOcwMHI1GYoYErnFd8mTfv4y2RI/VBhIYqGSo5xqoZYEreV57GBAaLd3JtzsWPP9zSU5QH1j3Qd11cP3KPHBMllLQQJ42mHzTkeLyUgXE5cfJLj+Q9LkWvh4mNoH23P6fF/2SM4WznlVbx5Z0h2WDd7c71Ho9jsB46e9y8fjXsHceJQuWG2PrGbnUoeGm8yUlv8RlDncQ+JVkeTwEnDp9zL29zAnebC/TNo1rL0MVRbtOeDbVQIQsmxXj0gjg1FFXUwVeGapPojM6jDP14iPbU+J6DAfp7jgAFHwAeLvxvHsErgR7DksMTROWkJxFnhfciMK2eRkhMeyzCE70PAWSiZ2S8NvJ62sTtaUBn3nuDn/t+CUgd8EyQ6PRLIVSuZ0GEmOiLYRDK7Pd7PrBFA79S9XK0KlXHp5xJhVYazUr51Gth1aBew1kjg17HD4SHrHm4Fup4r4znSXzKFa37tPV4nAZMriq57j5Js0NxLYgKhfhKV6nWqlx5Nmohx+New+Wa+Q65dcncifrUWW54kKu+3UUbhMVXcTdywU1uNuMbphDgjsyvEtf7KdNaKGMvyIp1bWkozAuD8g1l7eiNZj+LmeG9KpkSpbAfUFGB5yiq+SXXfFfKr8ZhbRnm/nW/Bpxys7K9rYrvcEubspblZb0dz+BOeelmaUPiLpq/X8haZzr6gjoPYIKLIcIV6fbb7IBSb2LySvWMSIVh192wBhtHuituGnXLeuE356skcMMdmb5V5lsnvOVXUruGR7rtB1oj3iWvM5V+8R6dWO2L1ajn1+8DiAYGz8k1miNrshn4Sou7dpilXSd2sibQGuKR8nTAzDZXZ7/bDnsd9lcvJXEosNTfOL1nvv322U187IUBm+w2zv2tMuYWDf+/SJCYIERD3jBo3ksOr5nCCmR7kbQQ2OlfDlgKDT/qhCAfWAKTVCVUIFMTCn2+E+tr3+t30imndel2wUVeMPRmSst2XEJZUVZcSKVN3bRdP1jnQxyneVkPx9P5krbr7f54/vj56/efv//+g2lo6ejDfQZGVGGh87y1ERapTjxE8MRTZ/ClSLbGZwZsiBlClICsQEOimNEhJiV+tp5wbOHxVLw8mHx2DgUKORXBzeRSzM2jRKky5bwqVKpSzafm6+cdDc0N2r+gfghzder6jvpfD0wgksgUKo3OYLLYHC6PLxCKxBKpTK5QIipUrdHqYgWtD3wHR5MWvHqD0WS2WG12h9Pl9nh9flZ4GrCWkIIM7QMvxN7/71s/D+yjkyzJcvaR5jo8WX+qeCMiw06oAJatdzf/fxviDniYs50O39NWHVlQq0XUH7BNJOEWsAtZ+JQC6iFYryH0dky4QyEpHMLY7RIwqOc0IOTHQCm27cz2dFJfS2t+m4h9JYHKUxZ/3CVZs6t9PuUkuFsCYjRwqLZD7Wcr105EMzeKog2sVgvAQ8kCdiGg9IztNd1BAa2QAkdZ8GICd9JFBua8QDjWa5rOWmKoAodCGg6KkZnRpvASwFwcF1Pi2ySuOd/5pMIe8lcLKCtqqwvvEAgdarFpIwWZMRSaaySbK0M0XV57EzUp8WmGe1WFsDJH85ozQDv13so61NrxoFaexI6PHTMIRymW6xVxbGG/wtFsaQApwKLYpfktyH3j6erc79tjrOqRPXI9hyamaaAezV6Iw4Tcfo9uMp9kCtlwWCQkdQVFfqDTSjTuPWTDAZZ7I80Ys7iRRk8z5qYgo0a6uOXuPWrd/W6OPj48PnYcmBY3D5yc8EXX8yi0UZLZV+bRsNyjt+uDnj8+VM8pHU+kUSZ2j4j86N6DCvlqDcPGHXtwhdUznoC/i1z7CwJquBCaN9AiadhvqmpyuyUsBvG+KKa0G9ARyLXAGofNyKHDXRrDhzT53JHiJjGxNz/S1YwH811K+hRlULwi4+1SCTTzda4IT1PCa6w2iNQkFrxRpvSANT5OOcV43GcME9k3DoWkw0zasRzwjAa5QShObg60bEiyNR+YDlsaUY5FRaj24gUEjEKOdx0jUMjS152iOKAi6znN5ClY6+aQGyg/PmzqAppe/TplnFb8KaaqRSFIlDk7YDUIXBwkk7bzRe6U8VZufX2Us2C8eHJ+lwrxATkSNdSQUPNF4pwDVKYv2Pr1LO4dn6JR/Jn+eoq7ltPCnngDq88an2NdKoXqdm0GGBl9oD+iCgJquEFpPPT4IlJVxt2bVNyhnIDb79BtuqmL0/UC4p84EzV3O04zpcu2hHTvclQQHPraEFXLbC3gTNBbCw81EPB6YbgVhi7SQq59Ez3MnLKitWcJJJOl9CMpn2ngu6AGy9lEF+k1iAM4nyWBwIEwpxODYS0qRUgMnuo2+S0bUJGj9PBNnBZeVsBozZ/wB2g69LwLrOVINXQ3jP3/Vw71ve2/7zs=") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<!--
The font files embedded in this page (the data: URLs in the @font-face rules above, each in place of a fonts.gstatic.com address) are the files Google Fonts served when the page was saved, byte for byte. Google Fonts serves subsets of a family, one file per range of characters, so they may not be a family’s complete files. The license of each family follows; each family stays under its own license. If you pass this file on, keep this comment in it.
JetBrains Mono
Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
-->
<style>
html{background:#000;color-scheme:dark}
html.deck-js{overflow:hidden auto;scroll-snap-type:y mandatory;scrollbar-width:none}
html.deck-js::-webkit-scrollbar{display:none}
body{margin:0;background:#000;overflow:visible}
main{color-scheme:light}
.deck-slide{display:block;width:1920px;height:1080px}
.deck-fit{position:relative;width:1920px;height:1080px;overflow:hidden}
.deck-scaler{width:1920px;height:1080px}
.deck-js .deck-slide{width:auto;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.deck-js .deck-fit{flex:none;width:calc(1920px*var(--deck-s));height:calc(1080px*var(--deck-s))}
.deck-js .deck-scaler{transform:scale(var(--deck-s));transform-origin:0 0}
.deck-pager{position:fixed;z-index:3;right:16px;bottom:16px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff;font:12px/1.5 system-ui,sans-serif;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s;pointer-events:none}
.deck-pager[data-on]{opacity:1}
@media (max-aspect-ratio:1/1){html.deck-js{scroll-snap-type:y proximity}.deck-js .deck-slide{height:auto;padding:6px 0;scroll-snap-stop:normal}.deck-js .deck-slide:first-child{padding-top:0}}
@media screen{html.deck-stage{overflow:hidden}.deck-stage body{overflow:hidden}.deck-stage main{position:fixed;inset:0}.deck-stage .deck-slide{position:absolute;inset:0;height:auto;padding:0;z-index:1}.deck-stage .deck-slide[data-off]{opacity:0;pointer-events:none;z-index:0}.deck-stage .deck-slide[data-leaving]{z-index:2;pointer-events:none}.deck-stage [data-build-hidden],.deck-stage [data-magic-hidden],.deck-stage [data-embed-under],.deck-stage [data-embed-dead] [data-embed-pic]{visibility:hidden}.deck-stage [data-embed-dead-label]{display:flex}}
[data-embed-dead-label]{display:none}
@page{size:1920px 1080px;margin:0}
@media print{html,html.deck-js,body{background:none;overflow:visible;height:auto;color-scheme:light}:root .deck-slide{display:block;height:auto;padding:0;break-after:page;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact}:root .deck-slide:last-child{break-after:auto;page-break-after:auto}:root .deck-fit{width:auto;height:auto}:root .deck-scaler{transform:none}.deck-pager{display:none}iframe{display:none!important}}
</style>
<script type="application/json" id="deck-motion">{"w":1920,"h":1080,"buildMs":380,"exitEasing":"cubic-bezier(0.45, 0, 0.85, 0.6)","effects":{"fade":{"transform":"","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)"},"rise":{"transform":"translateY(48px)","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)"},"drop":{"transform":"translateY(-48px)","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)"},"left":{"transform":"translateX(-72px)","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)"},"right":{"transform":"translateX(72px)","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)"},"scale":{"transform":"scale(0.8)","easing":"cubic-bezier(0.2, 0.7, 0.2, 1)"},"pop":{"transform":"scale(0.5)","easing":"cubic-bezier(0.34, 1.56, 0.64, 1)"}},"transMs":{"fade":320,"push":420,"magic":480},"transEase":"cubic-bezier(0.33, 0.01, 0.2, 1)","live":true,"slides":[{"transition":"fade","bg":"#0e1a2b","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#0e1a2b","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"bg":"#f5f7f6","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#0e1a2b","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]}]}</script>
<script>(function gon(e){var t=document,n=t.documentElement;n.classList.add("deck-js");var r=1;function o(){var s=Math.min(n.clientWidth/e.w,n.clientHeight/e.h);r=s>0?s:1,n.style.setProperty("--deck-s",String(r))}o();function i(){var s=Array.prototype.slice.call(t.querySelectorAll(".deck-slide")),a=s.length;if(a===0)return;var c=s.map(function(se){return se.querySelector(".deck-scaler > *")||se}),l=t.querySelector(".deck-pager"),d=typeof window.matchMedia==="function"?window.matchMedia("(max-aspect-ratio: 1/1)"):null,u={index:0,step:0},f=!1,p=[],m=0,g=0,b=0,h=null,A=[],v=!1,w=!0,y=-1,C=!1;function x(){return typeof window.matchMedia==="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}function S(se){return e.slides[se]?e.slides[se].steps.length-1:0}function E(se,ve){return c[se].querySelector('[data-frame-id="'+ve.replace(/["\\]/g,"")+'"]')}function I(se){return Array.prototype.slice.call(c[se].querySelectorAll("[data-frame-id]"))}function N(se){try{window.history.replaceState(null,"","#"+String(se+1))}catch(ve){}}function k(se){if(l===null)return;l.textContent=String(se+1)+" / "+String(a),l.setAttribute("data-on",""),clearTimeout(g),g=window.setTimeout(function(){if(l!==null)l.removeAttribute("data-on")},1600)}function R(){var se=n.scrollTop,ve=0;for(var re=1;re<a;re++)if(Math.abs(s[re].offsetTop-se)<Math.abs(s[ve].offsetTop-se))ve=re;return ve}function T(se){se=Math.max(0,Math.min(a-1,se)),u={index:se,step:0},s[se].scrollIntoView(),N(se),k(se)}function B(se,ve){var re=e.slides[se],ue=re&&re.steps[ve]?re.steps[ve].hidden:[],ge=I(se);for(var de=0;de<ge.length;de++){var De=ge[de].getAttribute("data-frame-id")||"";if(ue.indexOf(De)>=0)ge[de].setAttribute("data-build-hidden","");else ge[de].removeAttribute("data-build-hidden")}}function P(){for(var se=0;se<p.length;se++)p[se].cancel();p=[]}function M(se,ve){var re=e.slides[se],ue=re&&re.steps[ve]?re.steps[ve].events:[];for(var ge=0;ge<ue.length;ge++){var de=ue[ge],De=E(se,de.id),Ee=e.effects[de.effect];if(De===null||Ee===void 0||typeof De.animate!=="function")continue;var Te=De.style.transform!==""&&De.style.transform!=="none"?De.style.transform:"",Ze={transform:(Te+" "+Ee.transform).trim()||"none",opacity:0},We={transform:Te===""?"none":Te,opacity:1};if(De.removeAttribute("data-build-hidden"),de.dir==="in")p.push(De.animate([Ze,We],{duration:e.buildMs,easing:Ee.easing,fill:"none"}));else{var ze=De.animate([We,Ze],{duration:e.buildMs,easing:e.exitEasing,fill:"none"});(function(xt,Qt){Qt.finished.then(function(){xt.setAttribute("data-build-hidden","")},function(){})})(De,ze),p.push(ze)}}}var F="position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:transparent",L="position:absolute;inset:0;box-sizing:border-box;align-items:center;justify-content:center;text-align:center;background:rgba(115,114,108,0.12);border:2px dashed rgba(115,114,108,0.4);color:#73726C;font:24px system-ui,sans-serif";function D(se,ve){if(se.iframe.parentNode!==null)se.iframe.parentNode.removeChild(se.iframe);se.host.setAttribute("data-embed-dead","");var re=t.createElement("div");re.setAttribute("data-embed-dead-label",""),re.setAttribute("style",L),re.textContent=ve,se.host.appendChild(re)}function Y(se){v=!0;var ve=A;A=[];for(var re=0;re<ve.length;re++)D(ve[re],se)}function W(){var se=A;A=[];for(var ve=0;ve<se.length;ve++){if(se[ve].iframe.parentNode!==null)se[ve].iframe.parentNode.removeChild(se[ve].iframe);var re=se[ve].host.querySelector("[data-embed-under]");if(re!==null)re.removeAttribute("data-embed-under")}}function _(se){if(!e.live||v)return;var ve=e.slides[se]?e.slides[se].embeds:[];for(var re=0;re<ve.length;re++){var ue=E(se,ve[re].id);if(ue===null||ue.hasAttribute("data-embed-dead"))continue;var ge=ue.firstElementChild;if(ge!==null)ge.setAttribute("data-embed-under",""),ge.setAttribute("data-embed-pic","");var de=t.createElement("iframe");de.setAttribute("sandbox","allow-scripts"),de.setAttribute("inert",""),de.setAttribute("tabindex","-1"),de.setAttribute("referrerpolicy","no-referrer"),de.setAttribute("title","Embedded web content (sandboxed)"),de.setAttribute("style",F);var De={iframe:de,host:ue};(function(Ee){var Te=0;Ee.iframe.addEventListener("load",function(){if(Te+=1,Te>1)A=A.filter(function(Ze){return Ze!==Ee}),D(Ee,"Web embed disabled. It navigated away from its content.")})})(De),de.srcdoc=ve[re].srcdoc,A.push(De),ue.appendChild(de)}}function H(){C=!0}window.addEventListener("beforeunload",H),window.addEventListener("pagehide",H),window.addEventListener("pageshow",function(se){if(C=!1,se.persisted&&f)W(),_(u.index)}),window.addEventListener("message",function(se){if(C)return;var ve=null;for(var re=0;re<A.length;re++)if(se.source!==null&&A[re].iframe.contentWindow===se.source)ve=A[re];if(ve===null||se.origin!=="null")return;var ue=se.data;if(typeof ue!=="object"||ue===null)return;if(ue.type==="appifact-embed:navigating")A=A.filter(function(ge){return ge!==ve}),D(ve,"Web embed disabled. It navigated away from its content.");else if(ue.type==="appifact-embed:ready"&&ve.iframe.contentWindow!==null)ve.iframe.contentWindow.postMessage({type:"appifact-embed:update",t:0,playing:!1,selected:!1,props:{}},"*")}),window.addEventListener("blur",function(){window.setTimeout(function(){var se=t.activeElement;if(A.length>0&&(t.hasFocus()||se!==null&&se.tagName==="IFRAME")){if(Y("Web embed disabled. It tried to take keyboard focus."),se!==null&&se.tagName==="IFRAME")se.blur();window.focus()}},0)});function V(se,ve){var re=se.getBoundingClientRect();return{x:(re.left-ve.left)/r,y:(re.top-ve.top)/r,w:re.width/r,h:re.height/r}}function j(se){return{left:String(se.x)+"px",top:String(se.y)+"px",right:"auto",bottom:"auto",width:String(se.w)+"px",height:String(se.h)+"px",transform:"none"}}function Q(se,ve){return Math.abs(se.x-ve.x)<0.5&&Math.abs(se.y-ve.y)<0.5&&Math.abs(se.w-ve.w)<0.5&&Math.abs(se.h-ve.h)<0.5}function Z(se){return(e.slides[se]?e.slides[se].embeds:[]).map(function(ve){return ve.id})}function U(se,ve,re,ue){var ge=s[re.index],de=c[re.index],De=c[ue.index],Ee=e.transMs[se]||0,Te={duration:Ee,easing:e.transEase,fill:"forwards"},Ze=[],We=null,ze=[],xt=de.style.background;ge.removeAttribute("data-off"),ge.setAttribute("data-leaving","");var Qt=e.slides[re.index].steps[re.step]?e.slides[re.index].steps[re.step].hidden:[],Nt=e.slides[ue.index].steps[ue.step]?e.slides[ue.index].steps[ue.step].hidden:[],ot=Z(re.index),dt=I(re.index);for(var at=0;at<dt.length;at++){var Ye=dt[at].getAttribute("data-frame-id")||"";if(ot.indexOf(Ye)>=0)dt[at].setAttribute("data-magic-hidden",""),ze.push(dt[at])}var Xe=typeof ge.animate==="function";if(Xe&&se==="fade")Ze.push(ge.animate([{opacity:1},{opacity:0}],Te));else if(Xe&&se==="push"){var St=ve?-e.w:e.w;Ze.push(de.animate([{transform:"translateX(0px)"},{transform:"translateX("+String(-St)+"px)"}],Te)),Ze.push(De.animate([{transform:"translateX("+String(St)+"px)"},{transform:"translateX(0px)"}],Te))}else if(Xe){if(de.style.background="transparent",e.slides[re.index].bg!==e.slides[ue.index].bg)We=t.createElement("div"),We.setAttribute("style","position:absolute;inset:0;background:"+e.slides[re.index].bg),De.insertBefore(We,De.firstChild),Ze.push(We.animate([{opacity:1},{opacity:0}],Te));var Ht=de.getBoundingClientRect(),kt=De.getBoundingClientRect(),tn=[];for(var Kn=0;Kn<dt.length;Kn++){var Pn=dt[Kn],yn=Pn.getAttribute("data-frame-id")||"";if(Qt.indexOf(yn)>=0)continue;var Lt=Nt.indexOf(yn)>=0?null:E(ue.index,yn);if(Lt===null){if(ot.indexOf(yn)<0)Ze.push(Pn.animate([{opacity:1},{opacity:0}],Te));continue}tn.push(yn),Pn.setAttribute("data-magic-hidden",""),ze.push(Pn);var Wn=V(Pn,Ht),ar=V(Lt,kt);if(!Q(Wn,ar))Ze.push(Lt.animate([j(Wn),j(ar)],Te))}var bo=I(ue.index);for(var ko=0;ko<bo.length;ko++){var _r=bo[ko].getAttribute("data-frame-id")||"";if(tn.indexOf(_r)>=0||Nt.indexOf(_r)>=0)continue;Ze.push(bo[ko].animate([{opacity:0},{opacity:1}],Te))}}var fo=!1;function yr(){if(fo)return;fo=!0,clearTimeout(He),h=null,ge.setAttribute("data-off",""),ge.removeAttribute("data-leaving");for(var Me=0;Me<Ze.length;Me++)Ze[Me].cancel();if(We!==null&&We.parentNode!==null)We.parentNode.removeChild(We);de.style.background=xt;for(var tt=0;tt<ze.length;tt++)ze[tt].removeAttribute("data-magic-hidden")}var He=window.setTimeout(yr,Ee+250);Promise.all(Ze.map(function(Me){return Me.finished.then(function(){return null},function(){return null})})).then(yr),h={cleanup:yr}}function le(se,ve){var re=u;if(u=se,P(),clearTimeout(m),se.index!==re.index){W();for(var ue=0;ue<a;ue++)if(ue===se.index)s[ue].removeAttribute("data-off"),s[ue].removeAttribute("aria-hidden"),s[ue].removeAttribute("inert");else s[ue].setAttribute("data-off",""),s[ue].setAttribute("aria-hidden","true"),s[ue].setAttribute("inert","");if(re.index>=0&&re.index<a)B(re.index,re.step);if(B(se.index,se.step),ve.kind!==void 0&&ve.from!==void 0)U(ve.kind,ve.back===!0,ve.from,se);if(_(se.index),re.index>=0)N(se.index);k(se.index)}else if(B(se.index,se.step),se.step===re.step+1&&!x())M(se.index,se.step);var ge=se.index===re.index&&se.step<re.step,de=se.step+1,De=e.slides[se.index];if(!ge&&De!==void 0&&de<=S(se.index)&&De.steps[de].auto){var Ee=se.index===re.index?e.buildMs+140:600,Te=se;m=window.setTimeout(function(){if(f&&u.index===Te.index&&u.step===Te.step)le({index:Te.index,step:de},{})},Ee)}}function ie(se){if(!f){T(R()+(se>0?1:-1));return}if(h!==null)h.cleanup();var ve=u;if(se>0){if(ve.step<S(ve.index)){le({index:ve.index,step:ve.step+1},{});return}if(ve.index>=a-1)return;var re=e.slides[ve.index]?e.slides[ve.index].transition:void 0;le({index:ve.index+1,step:0},re!==void 0&&!x()?{kind:re,back:!1,from:ve}:{})}else{if(ve.step>0){le({index:ve.index,step:ve.step-1},{});return}if(ve.index<=0)return;var ue=e.slides[ve.index-1]?e.slides[ve.index-1].transition:void 0;le({index:ve.index-1,step:S(ve.index-1)},ue!==void 0&&!x()?{kind:ue,back:!0,from:ve}:{})}}function O(se){if(se=Math.max(0,Math.min(a-1,se)),!f){T(se);return}if(h!==null)h.cleanup();if(u.index===se&&u.step===0){k(se);return}le({index:se,step:0},{})}function K(se){if(se===f)return;if(f=se,se){var ve=w||u.index<0?R():u.index;n.classList.add("deck-stage"),n.scrollTop=0,u={index:-1,step:0},le({index:ve,step:0},{})}else{if(h!==null)h.cleanup();P(),clearTimeout(m),W();for(var re=0;re<a;re++){s[re].removeAttribute("data-off"),s[re].removeAttribute("aria-hidden");var ue=I(re);for(var ge=0;ge<ue.length;ge++)ue[ge].removeAttribute("data-build-hidden")}for(var de=0;de<a;de++)s[de].removeAttribute("inert");n.classList.remove("deck-stage"),s[Math.max(0,u.index)].scrollIntoView(),y=n.scrollTop,w=!1}}function J(){o(),K(d===null||!d.matches)}window.addEventListener("resize",J),window.addEventListener("beforeprint",function(){W()}),window.addEventListener("afterprint",function(){if(f)_(u.index)}),window.addEventListener("scroll",function(){if(f)return;var se=R();if(Math.abs(n.scrollTop-y)>2)w=!0;k(se),clearTimeout(b),b=window.setTimeout(function(){N(se)},150)},{passive:!0});var X=0,oe=0,pe=!1;window.addEventListener("wheel",function(se){if(se.ctrlKey||!f||Math.abs(se.deltaX)>Math.abs(se.deltaY))return;if(se.preventDefault(),clearTimeout(oe),oe=window.setTimeout(function(){pe=!1,X=0},250),pe)return;if(X+=se.deltaMode?se.deltaY>0?60:se.deltaY<0?-60:0:se.deltaY,Math.abs(X)>=60)pe=!0,ie(X>0?1:-1),X=0},{passive:!1}),t.addEventListener("click",function(se){var ve=se.target,re=t.getSelection();if(se.button!==0||!f||ve===null||ve.closest("a,[data-text-path],[data-cell]")!==null||re!==null&&String(re)!=="")return;ie(se.clientX<n.clientWidth/2?-1:1)});var Ie=0,be=0,he=0;t.addEventListener("touchstart",function(se){if(se.touches.length!==1){he=0;return}Ie=se.touches[0].clientX,be=se.touches[0].clientY,he=Date.now()},{passive:!0}),t.addEventListener("touchcancel",function(){he=0}),t.addEventListener("touchend",function(se){if(!f||se.changedTouches.length!==1)return;var ve=se.changedTouches[0].clientX-Ie,re=se.changedTouches[0].clientY-be;if(Date.now()-he>700||Math.abs(ve)<40||Math.abs(ve)<Math.abs(re)*1.2)return;ie(ve<0?1:-1)},{passive:!0}),window.addEventListener("keydown",function(se){if(se.metaKey||se.ctrlKey||se.altKey)return;var ve=se.key;if(ve===" "&&se.shiftKey||ve==="ArrowLeft"||ve==="ArrowUp"||ve==="PageUp")se.preventDefault(),ie(-1);else if(ve==="ArrowRight"||ve==="ArrowDown"||ve==="PageDown"||ve===" ")se.preventDefault(),ie(1);else if(ve==="Home")se.preventDefault(),O(0);else if(ve==="End")se.preventDefault(),O(a-1);else if(/^[1-9]$/.test(ve)&&Number(ve)<=a)O(Number(ve)-1);else if(ve==="f"||ve==="F"){if(t.fullscreenElement)t.exitFullscreen();else if(n.requestFullscreen)n.requestFullscreen()}}),window.addEventListener("hashchange",function(){var se=/^#(\d+)$/.exec(window.location.hash);if(se!==null&&Number(se[1])-1!==u.index)O(Number(se[1])-1)});var Ae=/^#(\d+)$/.exec(window.location.hash),Ce=Ae!==null?Math.max(0,Math.min(a-1,Number(Ae[1])-1)):0;if(J(),f)if(Ce!==u.index)O(Ce);else k(Ce);else if(Ae!==null)T(Ce);else k(R())}if(t.readyState==="loading")t.addEventListener("DOMContentLoaded",i);else i()})(JSON.parse(document.getElementById("deck-motion").textContent));</script>
</head>
<body>
<main data-appifact-content style="font:16px / 24px ui-sans-serif, system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;PingFang SC&quot;, &quot;PingFang TC&quot;, &quot;Hiragino Sans&quot;, &quot;Apple SD Gothic Neo&quot;, sans-serif;color:rgb(11, 11, 11)">
<section class="deck-slide" id="1" aria-roledescription="slide" aria-label="Slide 1 of 27" data-document-role="page" data-label="프런트엔드 · 백엔드 · 저장소" data-speaker-notes="바이브 코딩으로 서비스를 만들면 AI가 거의 항상 프런트엔드, 백엔드, 데이터베이스로 나눈 구조를 제안합니다. 오늘은 그 구조가 왜 생겼는지, 각 층에 무엇을 쓰는지, 데이터를 어디에 저장하고 어떻게 관측하며, 마지막으로 Docker Compose로 한 번에 띄우는 것까지 한 흐름으로 봅니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(14, 26, 43); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1ftwghs" style="position: absolute; left: 0px; width: 20px; top: 0px; height: 1080px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; width: 100%; height: 100%; background-color: rgb(79, 209, 193);"></div></div><div data-frame-id="e1-1ftwghs" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 40px; width: 100%; height: 100%; padding: 128px; box-sizing: border-box;"><div data-text-path="0" data-node-path="0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(79, 209, 193); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 4px; overflow-y: visible;">바이브 코딩 실전 아키텍처</div><div data-text-path="1" data-node-path="1" role="heading" aria-level="1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 96px; font-weight: 900; line-height: 1.15; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">프런트엔드 · 백엔드 · 저장소</div><div data-text-path="2" data-node-path="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 400; line-height: 1.4; color: rgb(191, 210, 208); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">왜 나누었고, 무엇으로 만들고, 어떻게 한 번에 띄우는가</div><div data-node-path="3" style="display: flex; flex-flow: wrap; align-items: stretch; gap: 16px; min-width: 1500px; min-height: 0px; max-width: 1500px;"><div data-text-path="3.0" data-node-path="3.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">Streamlit</div><div data-text-path="3.1" data-node-path="3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">TypeScript</div><div data-text-path="3.2" data-node-path="3.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">FastAPI</div><div data-text-path="3.3" data-node-path="3.3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">Go</div><div data-text-path="3.4" data-node-path="3.4" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">n8n</div><div data-text-path="3.5" data-node-path="3.5" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">PostgreSQL</div><div data-text-path="3.6" data-node-path="3.6" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">InfluxDB</div><div data-text-path="3.7" data-node-path="3.7" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">MongoDB</div><div data-text-path="3.8" data-node-path="3.8" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">Prometheus</div><div data-text-path="3.9" data-node-path="3.9" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">Grafana</div><div data-text-path="3.10" data-node-path="3.10" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(26, 43, 64); padding: 8px 24px; border-radius: 24px; overflow-y: visible; box-sizing: border-box;">Docker Compose</div></div></div></div><div data-frame-id="e2-1ftwghs" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(143, 166, 164); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">AI 애플리케이션 개발 과정 · 보충 강의</div></div></div></div></div></section>
<section class="deck-slide" id="2" aria-roledescription="slide" aria-label="Slide 2 of 27" data-document-role="page" data-label="다섯 단계로 따라가는 서비스 구조" data-speaker-notes="역사에서 출발해 구조, 기술 선택, 관측, 배포 순으로 갑니다. 각 단계마다 &quot;이걸 AI에게 어떻게 지시할까&quot;를 함께 생각해 보세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1d6uhhx" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">오늘의 흐름</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">다섯 단계로 따라가는 서비스 구조</div></div><div data-node-path="1" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: row; align-items: center; gap: 40px; min-width: 0px; min-height: 0px; padding: 20px 0px 0px; border-width: 1px 0px 0px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 80px; min-height: 0px; max-width: 80px; overflow-y: visible;">01</div><div data-text-path="1.0.1" data-node-path="1.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 340px; min-height: 0px; max-width: 340px; overflow-y: visible;">배경과 역사</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">한 덩어리였던 웹은 왜 둘로 나뉘었나</div></div><div data-node-path="1.1" style="display: flex; flex-direction: row; align-items: center; gap: 40px; min-width: 0px; min-height: 0px; padding: 20px 0px 0px; border-width: 1px 0px 0px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 80px; min-height: 0px; max-width: 80px; overflow-y: visible;">02</div><div data-text-path="1.1.1" data-node-path="1.1.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 340px; min-height: 0px; max-width: 340px; overflow-y: visible;">구성도</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Presentation · Domain Logic · Storage, 세 층의 책임</div></div><div data-node-path="1.2" style="display: flex; flex-direction: row; align-items: center; gap: 40px; min-width: 0px; min-height: 0px; padding: 20px 0px 0px; border-width: 1px 0px 0px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 80px; min-height: 0px; max-width: 80px; overflow-y: visible;">03</div><div data-text-path="1.2.1" data-node-path="1.2.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 340px; min-height: 0px; max-width: 340px; overflow-y: visible;">구성 환경</div><div data-text-path="1.2.2" data-node-path="1.2.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Streamlit · TypeScript / FastAPI · Go · n8n / PostgreSQL · InfluxDB · MongoDB</div></div><div data-node-path="1.3" style="display: flex; flex-direction: row; align-items: center; gap: 40px; min-width: 0px; min-height: 0px; padding: 20px 0px 0px; border-width: 1px 0px 0px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.3.0" data-node-path="1.3.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 80px; min-height: 0px; max-width: 80px; overflow-y: visible;">04</div><div data-text-path="1.3.1" data-node-path="1.3.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 340px; min-height: 0px; max-width: 340px; overflow-y: visible;">모니터링</div><div data-text-path="1.3.2" data-node-path="1.3.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Prometheus · InfluxDB · Grafana로 메트릭 수집과 시각화</div></div><div data-node-path="1.4" style="display: flex; flex-direction: row; align-items: center; gap: 40px; min-width: 0px; min-height: 0px; padding: 20px 0px 0px; border-width: 1px 0px 0px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.4.0" data-node-path="1.4.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 80px; min-height: 0px; max-width: 80px; overflow-y: visible;">05</div><div data-text-path="1.4.1" data-node-path="1.4.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 340px; min-height: 0px; max-width: 340px; overflow-y: visible;">배포</div><div data-text-path="1.4.2" data-node-path="1.4.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Docker Compose 한 파일로 전체 서비스 띄우기</div></div><div data-node-path="1.5" style="display: flex; flex-direction: row; align-items: center; gap: 40px; min-width: 0px; min-height: 0px; padding: 20px 0px 0px; border-width: 1px 0px 0px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.5.0" data-node-path="1.5.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 80px; min-height: 0px; max-width: 80px; overflow-y: visible;">06</div><div data-text-path="1.5.1" data-node-path="1.5.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 340px; min-height: 0px; max-width: 340px; overflow-y: visible;">협업</div><div data-text-path="1.5.2" data-node-path="1.5.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">계약 · 규칙 파일 · Git 흐름으로 여럿이 함께 바이브 코딩</div></div></div></div></div><div data-frame-id="e1-1d6uhhx" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1d6uhhx" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">02 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="3" aria-roledescription="slide" aria-label="Slide 3 of 27" data-document-role="page" data-label="분리 이전: 한 파일에 모든 것이 섞여 있던 시대" data-speaker-notes="초창기 웹은 서버가 HTML 문자열을 만들어 보내는 구조였습니다. 오른쪽 코드 한 화면 안에 DB 접속, SQL, 부가세 계산이라는 업무 규칙, 그리고 표를 그리는 HTML이 모두 들어 있습니다. 부가세율이 바뀌면 화면 파일을 고쳐야 하고, 모바일 앱이 같은 데이터를 원하면 이 로직을 또 만들어야 했습니다. 바이브 코딩에서도 &quot;한 파일에 다 넣어줘&quot;라고 하면 이 구조로 돌아갑니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1r0uqgx" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">01 · 배경과 역사</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">분리 이전: 한 파일에 모든 것이 섞여 있던 시대</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 64px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 28px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-node-path="1.0.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; padding: 0px 0px 0px 24px; border-width: 0px 0px 0px 4px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.0.0.0" data-node-path="1.0.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>서버가 HTML을 통째로 생성</b></font>
CGI · PHP · ASP · JSP — 1990년대 ~ 2000년대 초</div></div><div data-node-path="1.0.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; padding: 0px 0px 0px 24px; border-width: 0px 0px 0px 4px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.0.1.0" data-node-path="1.0.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>화면 · 규칙 · DB 접근이 한 파일에</b></font>
디자이너와 개발자가 같은 파일을 고치며 충돌</div></div><div data-node-path="1.0.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; padding: 0px 0px 0px 24px; border-width: 0px 0px 0px 4px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.0.2.0" data-node-path="1.0.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>클릭 한 번 = 페이지 전체 새로고침</b></font>
작은 변화에도 HTML 전체를 다시 받아 그림</div></div><div data-node-path="1.0.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; padding: 0px 0px 0px 24px; border-width: 0px 0px 0px 4px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.0.3.0" data-node-path="1.0.3.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>새 클라이언트 = 로직 재작성</b></font>
모바일 앱이 생기면 같은 규칙을 또 구현</div></div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 880px; min-height: 0px; max-width: 880px;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">전형적인 PHP 페이지 (요약)</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px 28px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">&lt;?php
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">$db = mysqli_connect("localhost", "root", "pw");</font>
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">$rows = mysqli_query($db,</font>
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">&nbsp;&nbsp;"SELECT * FROM orders WHERE user=" . $_GET['u']);</font>
?&gt;
&lt;table&gt;
&lt;?php while ($r = mysqli_fetch_assoc($rows)) { ?&gt;
&nbsp;&nbsp;&lt;tr&gt;&lt;td&gt;&lt;?= $r['item'] ?&gt;&lt;/td&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;&lt;?= $r['price'] <font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">* 1.1</font> ?&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;?php } ?&gt;
&lt;/table&gt;</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#b85a16" style="color: rgb(184, 90, 22); -webkit-text-fill-color: currentcolor;">주황</font> = DB 접근 · <font color="#157a6e" style="color: rgb(21, 122, 110); -webkit-text-fill-color: currentcolor;">청록</font> = 업무 규칙(부가세 10%) · 나머지 = 화면
문자열을 이어 붙인 쿼리는 SQL 인젝션 위험까지 안고 있다</div></div></div></div></div><div data-frame-id="e1-1r0uqgx" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1r0uqgx" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">03 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="4" aria-roledescription="slide" aria-label="Slide 4 of 27" data-document-role="page" data-label="전환점: 무엇이 분리를 이끌었나" data-speaker-notes="분리는 한 번에 일어나지 않았습니다. 2000년 REST라는 설계 원칙, 2004년 Gmail과 2005년 AJAX라는 이름, 2007년 아이폰 이후 웹 밖 클라이언트의 폭증, Node.js와 SPA 프레임워크, 그리고 컨테이너. 이 흐름이 모여 화면과 로직이 API 계약으로만 이야기하는 구조가 기본값이 되었습니다. Compose는 2013년 Fig라는 이름으로 시작해 2014년 Docker Compose가 되었습니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-esy2nx" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">01 · 배경과 역사</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">전환점: 무엇이 분리를 이끌었나</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; padding: 24px 0px 0px; border-width: 4px 0px 0px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">2000</div><div data-text-path="1.0.1" data-node-path="1.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">REST</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">로이 필딩의 박사 논문 — 자원은 URL로, 동작은 HTTP 메서드로</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; padding: 24px 0px 0px; border-width: 4px 0px 0px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">2005</div><div data-text-path="1.1.1" data-node-path="1.1.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">AJAX</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">페이지 이동 없이 데이터만 주고받는 방식에 이름이 붙음</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; padding: 24px 0px 0px; border-width: 4px 0px 0px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">2007</div><div data-text-path="1.2.1" data-node-path="1.2.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">스마트폰</div><div data-text-path="1.2.2" data-node-path="1.2.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">브라우저 밖 클라이언트 폭증 — 앱도 같은 데이터를 요청</div></div><div data-node-path="1.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; padding: 24px 0px 0px; border-width: 4px 0px 0px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.3.0" data-node-path="1.3.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">2009</div><div data-text-path="1.3.1" data-node-path="1.3.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Node.js</div><div data-text-path="1.3.2" data-node-path="1.3.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">JavaScript로 서버 작성 — JSON API가 표준처럼 확산</div></div><div data-node-path="1.4" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; padding: 24px 0px 0px; border-width: 4px 0px 0px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.4.0" data-node-path="1.4.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">2010–14</div><div data-text-path="1.4.1" data-node-path="1.4.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">SPA 프레임워크</div><div data-text-path="1.4.2" data-node-path="1.4.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">AngularJS · React · Vue — 화면은 브라우저가 직접 그림</div></div><div data-node-path="1.5" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; padding: 24px 0px 0px; border-width: 4px 0px 0px; border-style: solid; border-color: rgb(21, 122, 110); box-sizing: border-box;"><div data-text-path="1.5.0" data-node-path="1.5.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">2013–14</div><div data-text-path="1.5.1" data-node-path="1.5.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Docker · Compose</div><div data-text-path="1.5.2" data-node-path="1.5.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">층마다 컨테이너로 묶어 함께 실행하는 길이 열림</div></div></div><div data-node-path="2" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; background-color: rgb(221, 239, 236); padding: 32px 40px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.0" data-node-path="2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><b>결과:</b> 화면을 그리는 쪽(프런트엔드)과 데이터 · 규칙을 다루는 쪽(백엔드)이 <b>HTTP + JSON이라는 계약(API)</b>으로만 대화하게 되었다.</div></div></div></div><div data-frame-id="e1-esy2nx" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-esy2nx" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">04 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="5" aria-roledescription="slide" aria-label="Slide 5 of 27" data-document-role="page" data-label="분리 이후: 무엇이 나아졌나" data-speaker-notes="분리로 얻은 다섯 가지와 치른 대가 하나입니다. 1인 개발자에게 특히 큰 이점은 클라이언트 재사용과 기술 선택의 자유입니다. Streamlit으로 시작한 화면을 나중에 React로 바꿔도 백엔드 API는 그대로 쓸 수 있습니다. 대신 서버가 여러 개가 되므로, 오늘 후반부의 Docker Compose가 그 대가를 줄여 주는 도구입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-ua0ri4" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">01 · 배경과 역사</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">분리 이후: 무엇이 나아졌나</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.0.0" data-node-path="1.0.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 44px; height: 44px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#157a6e"></text></svg><div data-text-path="1.0.1" data-node-path="1.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">역할 분리</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">화면 담당과 로직 담당이 API 명세만 합의하고 동시에 개발</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.1.0" data-node-path="1.1.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 44px; height: 44px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#157a6e"></text></svg><div data-text-path="1.1.1" data-node-path="1.1.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">클라이언트 재사용</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">웹 · 모바일 · n8n · 다른 서버가 같은 API를 호출</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.2.0" data-node-path="1.2.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 44px; height: 44px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#157a6e"></text></svg><div data-text-path="1.2.1" data-node-path="1.2.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">독립 배포</div><div data-text-path="1.2.2" data-node-path="1.2.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">화면 문구만 바꿔도 백엔드는 그대로 — 배포 단위가 작아짐</div></div><div data-node-path="1.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.3.0" data-node-path="1.3.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 44px; height: 44px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#157a6e"></text></svg><div data-text-path="1.3.1" data-node-path="1.3.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">독립 확장</div><div data-text-path="1.3.2" data-node-path="1.3.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">요청이 몰리는 백엔드만 컨테이너를 늘림</div></div><div data-node-path="1.4" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.4.0" data-node-path="1.4.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 44px; height: 44px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#157a6e"></text></svg><div data-text-path="1.4.1" data-node-path="1.4.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">기술 선택의 자유</div><div data-text-path="1.4.2" data-node-path="1.4.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">화면은 TypeScript, AI 로직은 Python, 수집기는 Go</div></div><div data-node-path="1.5" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(251, 241, 232); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(235, 201, 168); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.5.0" data-node-path="1.5.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 44px; height: 44px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#a04e10"></text></svg><div data-text-path="1.5.1" data-node-path="1.5.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">대가도 있다</div><div data-text-path="1.5.2" data-node-path="1.5.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(90, 58, 32); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">네트워크 왕복 · CORS · API 버전 관리 · 배포 대상 증가</div></div></div><div data-text-path="2" data-node-path="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">그래서 <font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>구성도(누가 무엇을 하나)</b></font>와 <font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>배포 도구(어떻게 함께 띄우나)</b></font>가 필요해졌다.</div></div></div><div data-frame-id="e1-ua0ri4" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-ua0ri4" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">05 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="6" aria-roledescription="slide" aria-label="Slide 6 of 27" data-document-role="page" data-label="세 개의 층, 두 개의 계약" data-speaker-notes="세 층과 그 사이의 두 계약입니다. 프런트엔드와 백엔드 사이의 계약은 HTTP와 JSON, 즉 API 명세입니다. 백엔드와 저장소 사이의 계약은 SQL이나 DB 드라이버입니다. 가장 중요한 규칙은 프런트엔드가 DB에 직접 붙지 않는다는 것입니다. Streamlit은 파이썬이라 DB 드라이버를 바로 쓸 수 있어서 바이브 코딩 중에 AI가 이 규칙을 자주 깹니다. 처음부터 프롬프트에 명시하세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1cu0udl" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">02 · 구성도</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">세 개의 층, 두 개의 계약</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(252, 253, 252); border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; overflow: hidden; box-sizing: border-box;"><div data-node-path="1.0.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(21, 122, 110); padding: 20px 28px; box-sizing: border-box;"><div data-text-path="1.0.0.0" data-node-path="1.0.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(221, 243, 239); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Presentation Layer</div><div data-text-path="1.0.0.1" data-node-path="1.0.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(252, 253, 252); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">프런트엔드</div></div><div data-node-path="1.0.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; padding: 24px 28px; box-sizing: border-box;"><div data-text-path="1.0.1.0" data-node-path="1.0.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>화면 그리기 · 입력 받기</li><li>입력 형식 1차 검사</li><li>결과 · 로딩 · 오류 표시</li></ul></div><div data-text-path="1.0.1.1" data-node-path="1.0.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">예: Streamlit, React(TS)</div></div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 170px; min-height: 0px; max-width: 170px;"><svg data-node-path="1.1.0" data-shape="arrow-right" viewBox="0 0 96 48" preserveAspectRatio="none" style="width: 96px; height: 48px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,14.40 57.60,14.40 57.60,4.80 96.00,24.00 57.60,43.20 57.60,33.60 0.00,33.60" fill="#5e6d7e" stroke-linejoin="round"></polygon></svg><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: center; min-width: 0px; min-height: 0px; overflow-y: visible;">HTTP
JSON</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(252, 253, 252); border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; overflow: hidden; box-sizing: border-box;"><div data-node-path="1.2.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 20px 28px; box-sizing: border-box;"><div data-text-path="1.2.0.0" data-node-path="1.2.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(191, 210, 208); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Domain Logic</div><div data-text-path="1.2.0.1" data-node-path="1.2.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(252, 253, 252); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">백엔드</div></div><div data-node-path="1.2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; padding: 24px 28px; box-sizing: border-box;"><div data-text-path="1.2.1.0" data-node-path="1.2.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>업무 규칙 · 계산 · 권한</li><li>입력 재검증 · 트랜잭션</li><li>LLM · 외부 API 호출</li></ul></div><div data-text-path="1.2.1.1" data-node-path="1.2.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">예: FastAPI, Go, n8n</div></div></div><div data-node-path="1.3" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 170px; min-height: 0px; max-width: 170px;"><svg data-node-path="1.3.0" data-shape="arrow-right" viewBox="0 0 96 48" preserveAspectRatio="none" style="width: 96px; height: 48px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,14.40 57.60,14.40 57.60,4.80 96.00,24.00 57.60,43.20 57.60,33.60 0.00,33.60" fill="#5e6d7e" stroke-linejoin="round"></polygon></svg><div data-text-path="1.3.1" data-node-path="1.3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: center; min-width: 0px; min-height: 0px; overflow-y: visible;">SQL
드라이버</div></div><div data-node-path="1.4" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(252, 253, 252); border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; overflow: hidden; box-sizing: border-box;"><div data-node-path="1.4.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(160, 78, 16); padding: 20px 28px; box-sizing: border-box;"><div data-text-path="1.4.0.0" data-node-path="1.4.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(251, 227, 207); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Storage</div><div data-text-path="1.4.0.1" data-node-path="1.4.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(252, 253, 252); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">저장소</div></div><div data-node-path="1.4.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; padding: 24px 28px; box-sizing: border-box;"><div data-text-path="1.4.1.0" data-node-path="1.4.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>데이터 영속화</li><li>데이터 모양별 DB 선택</li><li>백업 · 보존 정책</li></ul></div><div data-text-path="1.4.1.1" data-node-path="1.4.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">예: PostgreSQL, InfluxDB, MongoDB</div></div></div></div><div data-node-path="2" style="display: flex; flex-direction: row; align-items: center; gap: 20px; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 28px 36px; border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="2.0" data-node-path="2.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 40px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#4fd1c1"></text></svg><div data-text-path="2.1" data-node-path="2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(229, 236, 235); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;"><b>규칙 하나:</b></font> 프런트엔드는 DB를 직접 만지지 않는다. 모든 데이터는 백엔드 API를 지난다.</div></div></div></div><div data-frame-id="e1-1cu0udl" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1cu0udl" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">06 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="7" aria-roledescription="slide" aria-label="Slide 7 of 27" data-document-role="page" data-label="층별 책임: 해야 할 일과 하지 말아야 할 일" data-speaker-notes="각 층의 책임을 표로 정리했습니다. 특히 &quot;프런트엔드 검증만 믿기&quot;는 흔한 실수입니다. 브라우저의 검증은 사용자 편의를 위한 것이고, 진짜 검증은 백엔드에서 다시 해야 합니다. 오른쪽 열은 바이브 코딩할 때 프롬프트에 그대로 넣을 수 있는 문장입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1skwe2i" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">02 · 구성도</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">층별 책임: 해야 할 일과 하지 말아야 할 일</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 14fr 29fr 27fr 30fr; width: 100%; box-sizing: border-box; min-width: 0px; min-height: 0px; align-self: flex-start; font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(34, 48, 63); border-top: 2px solid rgba(20, 20, 19, 0.22); border-left: 2px solid rgba(20, 20, 19, 0.22);"><div data-cell="0.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">층</div><div data-cell="0.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">해야 할 일</div><div data-cell="0.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">하지 말아야 할 일</div><div data-cell="0.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">AI에게 줄 한 줄</div><div data-cell="1.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">프런트엔드</div><div data-cell="1.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">화면 상태 관리, 입력 형식 검사, 로딩 · 오류 표시</div><div data-cell="1.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">DB 접속 정보 보관, 가격 · 권한 계산, API 키 노출</div><div data-cell="1.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">“DB에는 접근하지 말고 백엔드 API만 호출해”</div><div data-cell="2.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">백엔드</div><div data-cell="2.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">업무 규칙, 권한 확인, 입력 재검증, 트랜잭션, LLM 호출</div><div data-cell="2.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">화면 문구 · 레이아웃 결정, 프런트엔드 검증만 믿기</div><div data-cell="2.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">“엔드포인트별 요청 · 응답 스키마를 Pydantic으로 먼저 정의해”</div><div data-cell="3.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">저장소</div><div data-cell="3.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">제약조건으로 정합성 보장, 인덱스, 백업</div><div data-cell="3.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">업무 로직을 저장 프로시저에 몰아넣기, 비밀번호 평문 저장</div><div data-cell="3.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 16px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">“스키마와 마이그레이션 파일을 분리하고 초기 데이터를 넣어줘”</div></div></div></div><div data-frame-id="e1-1skwe2i" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1skwe2i" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">07 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="8" aria-roledescription="slide" aria-label="Slide 8 of 27" data-document-role="page" data-label="Python Streamlit, 또는 TypeScript" data-speaker-notes="두 코드는 똑같은 일을 합니다. 질문을 받아 백엔드의 /ask를 호출하고 답을 표시합니다. 중요한 점은 둘 다 DB를 모르고 API만 안다는 것입니다. 그래서 Streamlit으로 시작해서 나중에 React로 바꿔도 백엔드는 손대지 않아도 됩니다. 비전공 수강생이라면 Streamlit으로 시작하길 권합니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-4fb4jx" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">03 · 구성 환경 — 프런트엔드</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Python Streamlit, 또는 TypeScript</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-text-path="1.0.0" data-node-path="1.0.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Streamlit · Python</div><div data-text-path="1.0.1" data-node-path="1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>Python 한 언어로 화면까지 — 백엔드 개발자가 바로 UI 작성</li><li>상호작용마다 스크립트를 위에서 아래로 다시 실행하는 단순한 모델</li><li>적합: 사내 대시보드 · AI 데모 · PoC / 한계: 세밀한 UI, 대규모 공개 서비스</li></ul></div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px 28px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">import requests
import streamlit as st
q = st.text_input("질문")
if st.button("보내기"):
&nbsp;&nbsp;&nbsp;&nbsp;r = requests.post(f"{API}/ask", json={"q": q})
&nbsp;&nbsp;&nbsp;&nbsp;st.write(r.json()["answer"])</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-text-path="1.1.0" data-node-path="1.1.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">React · Next.js · TypeScript</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>React + Vite(SPA) 또는 Next.js(서버 렌더링 포함)</li><li>컴포넌트 · 상태로 복잡한 화면을 쪼개고, 타입으로 API 응답 구조를 검사</li><li>적합: 대외 서비스 · 복잡한 UI / 한계: 빌드 도구 · 학습량</li></ul></div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px 28px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">const res = await fetch(`${API}/ask`, {
&nbsp;&nbsp;method: "POST",
&nbsp;&nbsp;headers: { "Content-Type": "application/json" },
&nbsp;&nbsp;body: JSON.stringify({ q }),
});
const { answer } = await res.json();
setAnswer(answer);</div></div></div></div></div><div data-frame-id="e1-4fb4jx" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-4fb4jx" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">08 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="9" aria-roledescription="slide" aria-label="Slide 9 of 27" data-document-role="page" data-label="백엔드: 로직을 무엇으로 만들까" data-speaker-notes="셋 중 하나를 고르는 문제가 아니라 조합의 문제입니다. 이 과정의 수강생에게는 FastAPI를 기본 백엔드로 권합니다. 타입 힌트만 쓰면 입력 검증과 API 문서가 자동으로 생기기 때문에 AI가 만든 코드를 검토하기도 쉽습니다. Go는 1.22부터 표준 라이브러리 라우팅이 강화되어 프레임워크 없이도 쓸 만합니다. n8n은 앞 단원에서 배운 그대로 백엔드의 한 부품으로 들어갑니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-mtmgkp" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">03 · 구성 환경 — 백엔드</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">백엔드: 로직을 무엇으로 만들까</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><div data-node-path="1.0.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0.0.0" data-node-path="1.0.0.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">FastAPI</div><div data-text-path="1.0.0.1" data-node-path="1.0.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Python</div></div><div data-text-path="1.0.1" data-node-path="1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>강점</b></font> 타입 힌트 → Pydantic 자동 검증, /docs에 OpenAPI 문서 자동 생성, async 지원</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>적합</b></font> AI · RAG · 데이터 처리 API — LangChain, LiteLLM 등 Python 생태계와 직결</div><div data-text-path="1.0.3" data-node-path="1.0.3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>주의</b></font> CPU를 오래 쓰는 작업은 워커 · 큐로 분리</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><div data-node-path="1.1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Go</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Gin · Echo · 표준 net/http</div></div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>강점</b></font> 단일 실행 파일 배포, 고루틴 기반 높은 동시성, 적은 메모리</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>적합</b></font> API 게이트웨이, 센서 · 로그 수집기, 트래픽 많은 API</div><div data-text-path="1.1.3" data-node-path="1.1.3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>주의</b></font> AI 라이브러리는 Python보다 적음 → AI 처리는 Python 서비스에 맡기기</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><div data-node-path="1.2.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px;"><div data-text-path="1.2.0.0" data-node-path="1.2.0.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">n8n</div><div data-text-path="1.2.0.1" data-node-path="1.2.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">AI 워크플로우</div></div><div data-text-path="1.2.1" data-node-path="1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>강점</b></font> 노드 연결로 LLM · RAG · SaaS 연동, Webhook 노드로 API처럼 호출</div><div data-text-path="1.2.2" data-node-path="1.2.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>적합</b></font> 자주 바뀌는 AI 흐름, 알림 · 연동 자동화, 비개발자와 협업</div><div data-text-path="1.2.3" data-node-path="1.2.3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>주의</b></font> 권한 · 결제 같은 핵심 로직은 코드 백엔드에 두기</div></div></div><div data-text-path="2" data-node-path="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">조합이 일반적이다: <font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>FastAPI가 관문</b></font>이 되고, 자주 바뀌는 AI 흐름은 n8n에, 고성능 수집은 Go에 맡긴다.</div></div></div><div data-frame-id="e1-mtmgkp" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-mtmgkp" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">09 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="10" aria-roledescription="slide" aria-label="Slide 10 of 27" data-document-role="page" data-label="백엔드 로직 안에서 n8n AI 워크플로우 쓰기" data-speaker-notes="n8n을 백엔드에 넣는 가장 단순하고 안전한 패턴입니다. 프런트엔드가 n8n Webhook을 직접 부르면 주소가 브라우저에 노출되고 누구나 호출할 수 있습니다. FastAPI가 관문 역할을 하면서 인증, 비용 한도 확인, 결과 저장을 맡고, 자주 바뀌는 AI 흐름만 n8n에 둡니다. 3단원에서 다룬 입력 검증과 출력 필터링도 이 관문에서 적용합니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-14yapyt" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">03 · 구성 환경 — 백엔드</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">백엔드 로직 안에서 n8n AI 워크플로우 쓰기</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 700px; min-height: 0px; max-width: 700px;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 24px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; overflow-y: visible; box-sizing: border-box;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>① 프런트엔드</b></font> · POST /ask 요청</div><svg data-node-path="1.0.1" data-shape="arrow-down" viewBox="0 0 24 32" preserveAspectRatio="none" style="width: 24px; height: 32px; min-width: 0px; min-height: 0px; align-self: center; display: block;"><polygon points="7.20,0.00 7.20,19.20 2.40,19.20 12.00,32.00 21.60,19.20 16.80,19.20 16.80,0.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 24px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; overflow-y: visible; box-sizing: border-box;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>② FastAPI</b></font> · 인증 · 입력 검증 · 비용 한도</div><svg data-node-path="1.0.3" data-shape="arrow-down" viewBox="0 0 24 32" preserveAspectRatio="none" style="width: 24px; height: 32px; min-width: 0px; min-height: 0px; align-self: center; display: block;"><polygon points="7.20,0.00 7.20,19.20 2.40,19.20 12.00,32.00 21.60,19.20 16.80,19.20 16.80,0.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-text-path="1.0.4" data-node-path="1.0.4" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(46, 74, 71); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(227, 242, 239); padding: 16px 24px; border-width: 1px; border-style: solid; border-color: rgb(159, 211, 203); border-radius: 12px; overflow-y: visible; box-sizing: border-box;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>③ n8n Webhook 노드</b></font> · 요청 수신</div><svg data-node-path="1.0.5" data-shape="arrow-down" viewBox="0 0 24 32" preserveAspectRatio="none" style="width: 24px; height: 32px; min-width: 0px; min-height: 0px; align-self: center; display: block;"><polygon points="7.20,0.00 7.20,19.20 2.40,19.20 12.00,32.00 21.60,19.20 16.80,19.20 16.80,0.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-text-path="1.0.6" data-node-path="1.0.6" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(46, 74, 71); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(227, 242, 239); padding: 16px 24px; border-width: 1px; border-style: solid; border-color: rgb(159, 211, 203); border-radius: 12px; overflow-y: visible; box-sizing: border-box;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>④ AI Agent 노드</b></font> · LLM + RAG + 도구</div><svg data-node-path="1.0.7" data-shape="arrow-down" viewBox="0 0 24 32" preserveAspectRatio="none" style="width: 24px; height: 32px; min-width: 0px; min-height: 0px; align-self: center; display: block;"><polygon points="7.20,0.00 7.20,19.20 2.40,19.20 12.00,32.00 21.60,19.20 16.80,19.20 16.80,0.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-text-path="1.0.8" data-node-path="1.0.8" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 24px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; overflow-y: visible; box-sizing: border-box;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>⑤ Respond to Webhook</b></font> → FastAPI 저장 · 응답</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px 28px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">@app.post("/ask")
async def ask(req: AskReq, user=Depends(auth)):
&nbsp;&nbsp;&nbsp;&nbsp;async with httpx.AsyncClient(timeout=60) as c:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r = await c.post(f"{N8N_URL}/webhook/ask",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;json={"q": req.q, "user": user.id})
&nbsp;&nbsp;&nbsp;&nbsp;r.raise_for_status()
&nbsp;&nbsp;&nbsp;&nbsp;result = r.json()
&nbsp;&nbsp;&nbsp;&nbsp;await save_log(user.id, req.q, result)
&nbsp;&nbsp;&nbsp;&nbsp;return result</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>왜 백엔드를 거칠까?</b></font> n8n 주소와 LLM 키를 숨기고, 권한 · 비용 한도 · 로그를 한 곳에서 관리하기 위해서.</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">참고: 편집기 테스트 주소는 /webhook-test/…, 운영 주소 /webhook/…는 워크플로우를 활성화해야 동작</div></div></div></div></div><div data-frame-id="e1-14yapyt" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-14yapyt" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">10 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="11" aria-roledescription="slide" aria-label="Slide 11 of 27" data-document-role="page" data-label="데이터의 모양과 쓰임이 다르면, 맞는 저장소도 다르다" data-speaker-notes="저장소를 셋으로 나누는 이유를 한 문장으로 정리하면 이것입니다. 데이터의 모양과 쓰임이 다르다. 처음에는 PostgreSQL 하나로 시작해도 괜찮습니다. 하지만 센서 값이 초당 수천 건씩 들어오거나, 설정 항목이 매주 바뀌기 시작하면 그때 맞는 저장소로 옮기는 것이 정석입니다. 오늘은 그 판단 기준을 가져가세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(14, 26, 43); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1bpax91" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(79, 209, 193); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">03 · 구성 환경 — 저장소</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">데이터의 모양과 쓰임이 다르면,
맞는 저장소도 다르다</div><div data-text-path="0.2" data-node-path="0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(191, 210, 208); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">DB 하나로 모든 것을 해결하려 하면 어딘가에서 성능이나 유연성을 잃는다 — 이를 폴리글랏 퍼시스턴스(Polyglot Persistence)라 부른다.</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(22, 38, 58); padding: 32px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(242, 166, 90); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">구조가 고정된 레코드</div><div data-text-path="1.0.1" data-node-path="1.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">RDB · PostgreSQL</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">회원 · 설비 · 주문처럼 관계가 있고, 정확한 수정(CRUD)과 트랜잭션이 중요</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(22, 38, 58); padding: 32px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(242, 166, 90); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">시간 + 숫자</div><div data-text-path="1.1.1" data-node-path="1.1.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">시계열 DB · InfluxDB</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">센서 · 메트릭처럼 초 단위로 계속 쌓이고, 기간별 평균 · 최대로 조회</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(22, 38, 58); padding: 32px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(242, 166, 90); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">자주 바뀌는 구조</div><div data-text-path="1.2.1" data-node-path="1.2.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">NoSQL 문서 · MongoDB</div><div data-text-path="1.2.2" data-node-path="1.2.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.45; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">설정 · 메타데이터처럼 키가 수시로 추가 · 변경되는 JSON 문서</div></div></div></div></div><div data-frame-id="e1-1bpax91" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(143, 166, 164); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1bpax91" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(143, 166, 164); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">11 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="12" aria-roledescription="slide" aria-label="Slide 12 of 27" data-document-role="page" data-label="세 저장소 비교: 무엇을, 왜" data-speaker-notes="PostgreSQL은 구조가 변하지 않는 레코드를 계속 만들고 고치고 지우는 데 강합니다. InfluxDB는 시간에 따라 들어오는 정수와 실수를 쌓고, 기간별로 묶어 보는 데 특화되어 있으며 보존 정책으로 오래된 데이터를 자동으로 지웁니다. MongoDB는 키가 자주 바뀌는 설정 같은 데이터를 ALTER TABLE 없이 담습니다. 마지막 줄의 주의 사항이 곧 &quot;다른 DB를 함께 쓰는 이유&quot;입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-nrikf4" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">03 · 구성 환경 — 저장소</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">세 저장소 비교: 무엇을, 왜</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 14fr 28fr 30fr 28fr; width: 100%; box-sizing: border-box; min-width: 0px; min-height: 0px; align-self: flex-start; font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(34, 48, 63); border-top: 2px solid rgba(20, 20, 19, 0.22); border-left: 2px solid rgba(20, 20, 19, 0.22);"><div data-cell="0.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">구분</div><div data-cell="0.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">PostgreSQL · RDB</div><div data-cell="0.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">InfluxDB · 시계열</div><div data-cell="0.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">MongoDB · 문서 NoSQL</div><div data-cell="1.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">데이터 모양</div><div data-cell="1.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">고정 스키마 테이블 + 관계(외래 키)</div><div data-cell="1.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">시간 + 태그 + 정수 · 실수 필드</div><div data-cell="1.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">JSON 문서, 문서마다 키가 달라도 됨</div><div data-cell="2.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">주된 작업</div><div data-cell="2.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">레코드 CRUD · JOIN · 트랜잭션</div><div data-cell="2.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">계속 추가(append) · 기간 집계</div><div data-cell="2.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">문서 단위 읽기 · 쓰기, 중첩 구조 저장</div><div data-cell="3.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">왜 이 DB인가</div><div data-cell="3.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">ACID 트랜잭션 · 제약조건으로 정합성</div><div data-cell="3.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">시간순 압축, 보존 정책으로 자동 삭제</div><div data-cell="3.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">ALTER 없이 새 키를 바로 추가</div><div data-cell="4.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">예시</div><div data-cell="4.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">설비 마스터 · 사용자 · 작업 지시</div><div data-cell="4.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">센서 온도 · 진동, API 응답 시간</div><div data-cell="4.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">장비별 임계값, 프롬프트 템플릿</div><div data-cell="5.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(160, 78, 16); background: rgb(252, 253, 252);">주의</div><div data-cell="5.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">초당 수천 건 시계열 적재엔 부담</div><div data-cell="5.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">행 수정 · JOIN 같은 관계 연산에 약함</div><div data-cell="5.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">스키마 검증 책임이 앱으로 이동</div></div></div></div><div data-frame-id="e1-nrikf4" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-nrikf4" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">12 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="13" aria-roledescription="slide" aria-label="Slide 13 of 27" data-document-role="page" data-label="설비 “press-01”을 세 저장소에 담으면" data-speaker-notes="같은 설비 하나를 세 저장소에 나눠 담은 모습입니다. 설비가 무엇인지는 PostgreSQL에, 지금 몇 도인지는 InfluxDB에, 몇 도에서 알람을 보낼지는 MongoDB에 둡니다. 세 저장소는 eq 값 press-01로 연결됩니다. 이 슬라이드가 &quot;노드 안을 들여다본다&quot;는 우리 과정의 원칙을 저장소에 적용한 예입니다. 각 저장소 안에서 데이터가 실제로 어떤 모양으로 들어가는지 보세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1vmjgbl" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">03 · 구성 환경 — 들여다보기</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">설비 “press-01”을 세 저장소에 담으면</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 488px 640px 488px; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">PostgreSQL · 설비 마스터</div><div data-text-path="1.0.1" data-node-path="1.0.1" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">CREATE TABLE equipment (
&nbsp;&nbsp;id&nbsp;&nbsp;&nbsp;SERIAL PRIMARY KEY,
&nbsp;&nbsp;name TEXT NOT NULL,
&nbsp;&nbsp;line TEXT NOT NULL
);
INSERT INTO equipment
&nbsp;&nbsp;(name, line)
VALUES ('press-01', 'A');</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">스키마가 먼저 — 규칙에 어긋난 값은 DB가 거절한다(NOT NULL)</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">InfluxDB · 센서 값 (Line Protocol)</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># 측정이름,태그 필드 [타임스탬프]</font>
machine,eq=press-01 temp=71.3,vib=0.42
machine,eq=press-01 temp=71.9,vib=0.45
machine,eq=press-01 temp=72.4,vib=0.51
<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># 최근 1시간, 5분 평균 (Flux 일부)</font>
|&gt; range(start: -1h)
|&gt; aggregateWindow(every: 5m, fn: mean)</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">한 줄 = 한 시점의 측정값. 타임스탬프를 생략하면 서버 수신 시각이 들어간다</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">MongoDB · 장비 설정</div><div data-text-path="1.2.1" data-node-path="1.2.1" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">db.config.insertOne({
&nbsp;&nbsp;eq: "press-01",
&nbsp;&nbsp;threshold: { temp: 85 },
&nbsp;&nbsp;model: "lstm-v3",
&nbsp;&nbsp;alerts: ["slack", "sms"]
})
&nbsp;</div><div data-text-path="1.2.2" data-node-path="1.2.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">문서마다 구조가 달라도 됨 — 새 키(alerts)는 그냥 넣으면 끝</div></div></div></div></div><div data-frame-id="e1-1vmjgbl" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1vmjgbl" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">13 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="14" aria-roledescription="slide" aria-label="Slide 14 of 27" data-document-role="page" data-label="수집 → 저장 → 시각화" data-speaker-notes="모니터링도 같은 세 층 구조입니다. 수집, 저장, 시각화. 핵심 차이는 Pull과 Push입니다. Prometheus는 각 서비스의 /metrics 주소를 주기적으로 긁어 갑니다. 그래서 서비스는 숫자만 노출하면 됩니다. 센서처럼 스스로 데이터를 보내는 쪽은 Telegraf나 앱이 InfluxDB에 직접 씁니다. Grafana는 저장하지 않고 두 곳에 질의해서 보여 주기만 합니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1jw2tx8" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">04 · 모니터링</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">수집 → 저장 → 시각화</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 420px 150px 440px 150px 1fr; gap: 0px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 14px 24px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.0.0.0" data-node-path="1.0.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">FastAPI 백엔드</div><div data-text-path="1.0.0.1" data-node-path="1.0.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">/metrics · 요청 수 · 응답 시간</div></div><div data-node-path="1.0.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 14px 24px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.0.1.0" data-node-path="1.0.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Go 수집 서비스</div><div data-text-path="1.0.1.1" data-node-path="1.0.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">/metrics · 처리량 · 큐 길이</div></div><div data-node-path="1.0.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 14px 24px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.0.2.0" data-node-path="1.0.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">node_exporter</div><div data-text-path="1.0.2.1" data-node-path="1.0.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">서버 CPU · 메모리 · 디스크</div></div><div data-node-path="1.0.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0px; min-height: 0px; background-color: rgb(251, 241, 232); padding: 14px 24px; border-width: 1px; border-style: solid; border-color: rgb(235, 201, 168); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.0.3.0" data-node-path="1.0.3.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">센서 게이트웨이 · Telegraf</div><div data-text-path="1.0.3.1" data-node-path="1.0.3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(90, 58, 32); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">설비 온도 · 진동 값</div></div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 0px; min-width: 0px; min-height: 0px;"><div data-node-path="1.1.0" style="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0px; min-height: 0px;"><svg data-node-path="1.1.0.0" data-shape="arrow-right" viewBox="0 0 80 40" preserveAspectRatio="none" style="width: 80px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,12.00 48.00,12.00 48.00,4.00 80.00,20.00 48.00,36.00 48.00,28.00 0.00,28.00" fill="#157a6e" stroke-linejoin="round"></polygon></svg><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Pull</div></div><div data-node-path="1.1.1" style="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0px; min-height: 0px;"><svg data-node-path="1.1.1.0" data-shape="arrow-right" viewBox="0 0 80 40" preserveAspectRatio="none" style="width: 80px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,12.00 48.00,12.00 48.00,4.00 80.00,20.00 48.00,36.00 48.00,28.00 0.00,28.00" fill="#a04e10" stroke-linejoin="round"></polygon></svg><div data-text-path="1.1.1.1" data-node-path="1.1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Push</div></div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.2.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 24px 28px; border-width: 2px; border-style: solid; border-color: rgb(21, 122, 110); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.2.0.0" data-node-path="1.2.0.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Prometheus</div><div data-text-path="1.2.0.1" data-node-path="1.2.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">설정한 주기(예: 15초)마다 대상의 /metrics를 가져감</div><div data-text-path="1.2.0.2" data-node-path="1.2.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">서비스 · 시스템 메트릭, 보존 기간 짧게(기본 15일)</div></div><div data-node-path="1.2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 24px 28px; border-width: 2px; border-style: solid; border-color: rgb(160, 78, 16); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.2.1.0" data-node-path="1.2.1.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">InfluxDB</div><div data-text-path="1.2.1.1" data-node-path="1.2.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">앱 · Telegraf가 직접 써 넣음</div><div data-text-path="1.2.1.2" data-node-path="1.2.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">센서 · 비즈니스 시계열, 보존 정책으로 장기 보관</div></div></div><div data-node-path="1.3" style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0px; min-height: 0px;"><svg data-node-path="1.3.0" data-shape="arrow-right" viewBox="0 0 80 40" preserveAspectRatio="none" style="width: 80px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,12.00 48.00,12.00 48.00,4.00 80.00,20.00 48.00,36.00 48.00,28.00 0.00,28.00" fill="#5e6d7e" stroke-linejoin="round"></polygon></svg><div data-text-path="1.3.1" data-node-path="1.3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: center; min-width: 0px; min-height: 0px; overflow-y: visible;">PromQL
Flux/SQL</div></div><div data-node-path="1.4" style="display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0px; min-width: 0px; min-height: 0px;"><div data-node-path="1.4.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 32px; border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.4.0.0" data-node-path="1.4.0.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 48px; height: 48px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#4fd1c1"></text></svg><div data-text-path="1.4.0.1" data-node-path="1.4.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Grafana</div><div data-text-path="1.4.0.2" data-node-path="1.4.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>두 저장소를 데이터 소스로 연결</li><li>대시보드 · 패널 구성</li><li>임계값 알림 → Slack · 메일</li></ul></div></div></div></div><div data-text-path="2" data-node-path="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Prometheus는 <font color="#157a6e" style="color: rgb(21, 122, 110); -webkit-text-fill-color: currentcolor;"><b>“서버가 아픈가”</b></font>, InfluxDB는 <font color="#a04e10" style="color: rgb(160, 78, 16); -webkit-text-fill-color: currentcolor;"><b>“설비가 아픈가”</b></font>를 본다 — Grafana는 둘을 한 화면에.</div></div></div><div data-frame-id="e1-1jw2tx8" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1jw2tx8" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">14 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="15" aria-roledescription="slide" aria-label="Slide 15 of 27" data-document-role="page" data-label="어떤 메트릭을 구할까: RED와 USE" data-speaker-notes="무엇을 볼지 모르면 대시보드는 그래프 박물관이 됩니다. 서비스는 RED, 서버 자원은 USE 두 가지 틀이면 대부분 충분합니다. 오른쪽은 Grafana 패널에 그대로 넣는 PromQL입니다. rate는 카운터를 초당 증가율로 바꾸고, histogram_quantile은 버킷에서 백분위 응답 시간을 계산합니다. 평균 응답 시간보다 p95를 보는 이유는 느린 5%의 사용자가 평균에 가려지기 때문입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1g1qwuh" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">04 · 모니터링</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">어떤 메트릭을 구할까: RED와 USE</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 680px; min-height: 0px; max-width: 680px;"><div data-node-path="1.0.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 28px 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.0.0.0" data-node-path="1.0.0.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">RED · 서비스(API) 관점</div><div data-text-path="1.0.0.1" data-node-path="1.0.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>R</b></font>ate — 초당 요청 수
<font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>E</b></font>rrors — 오류 비율
<font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>D</b></font>uration — 응답 시간(p95 · p99)</div></div><div data-node-path="1.0.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 28px 32px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.0.1.0" data-node-path="1.0.1.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">USE · 자원(서버) 관점</div><div data-text-path="1.0.1.1" data-node-path="1.0.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>U</b></font>tilization — CPU · 메모리 사용률
<font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>S</b></font>aturation — 포화(대기열 · 부하)
<font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>E</b></font>rrors — 디스크 · 네트워크 오류</div></div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px 28px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># 초당 요청 수 (최근 5분 기준)</font>
sum(rate(http_requests_total[5m]))
<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># 5xx 오류 비율</font>
sum(rate(http_requests_total{status=~"5.."}[5m]))
&nbsp;&nbsp;/ sum(rate(http_requests_total[5m]))
<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># p95 응답 시간(초)</font>
histogram_quantile(0.95, sum by (le)
&nbsp;&nbsp;(rate(http_request_duration_seconds_bucket[5m])))</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">FastAPI에 prometheus-fastapi-instrumentator를 붙이면 /metrics가 열리고 위 지표들이 자동으로 생긴다.</div></div></div></div></div><div data-frame-id="e1-1g1qwuh" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1g1qwuh" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">15 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="16" aria-roledescription="slide" aria-label="Slide 16 of 27" data-document-role="page" data-label="왜 Docker Compose인가" data-speaker-notes="오늘 구성에는 프런트엔드, 백엔드, n8n, PostgreSQL, MongoDB, InfluxDB, Prometheus, Grafana까지 8개 서비스가 있습니다. 이것을 손으로 띄우는 것은 사실상 불가능합니다. Compose는 이 전체를 한 파일로 선언하고 한 줄로 띄웁니다. 오른쪽 여섯 줄이면 일상 운영의 대부분을 합니다. 마지막 down -v는 데이터베이스 데이터까지 지우므로 실습 중에도 조심하세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1e81fto" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">05 · 배포</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">왜 Docker Compose인가</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 680px; min-height: 0px; max-width: 680px;"><div data-node-path="1.0.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(251, 241, 232); padding: 28px 32px; border-width: 1px; border-style: solid; border-color: rgb(235, 201, 168); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.0.0.0" data-node-path="1.0.0.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">직접 하나씩 실행하면</div><div data-text-path="1.0.0.1" data-node-path="1.0.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(90, 58, 32); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>서비스 8개를 각각 설치 · 실행</li><li>포트 · 환경변수 · 버전을 사람이 기억</li><li>“내 PC에선 되는데 서버에선 안 돼요”</li></ul></div></div><div data-node-path="1.0.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(227, 242, 239); padding: 28px 32px; border-width: 1px; border-style: solid; border-color: rgb(159, 211, 203); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.0.1.0" data-node-path="1.0.1.0" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">compose.yaml 하나로</div><div data-text-path="1.0.1.1" data-node-path="1.0.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(46, 74, 71); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; padding-left: 40px; overflow-y: visible; box-sizing: border-box;"><ul data-css-list="" style="margin: 0px; list-style-type: disc; padding-inline-start: 0px; box-sizing: border-box;"><li>서비스 · 네트워크 · 볼륨을 한 파일에 선언</li><li>노트북 · 사내 서버 어디서나 같은 결과</li><li>서비스 이름으로 서로 통신(내부 DNS)</li></ul></div></div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 0px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-node-path="1.1.0" style="display: flex; flex-direction: row; align-items: center; gap: 24px; min-width: 0px; min-height: 0px; padding: 16px 0px; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 560px; min-height: 0px; max-width: 560px; overflow-y: visible;">docker compose up -d</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; overflow-y: visible;">전체를 백그라운드로 기동</div></div><div data-node-path="1.1.1" style="display: flex; flex-direction: row; align-items: center; gap: 24px; min-width: 0px; min-height: 0px; padding: 16px 0px; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 560px; min-height: 0px; max-width: 560px; overflow-y: visible;">docker compose ps</div><div data-text-path="1.1.1.1" data-node-path="1.1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; overflow-y: visible;">상태 · 헬스체크 확인</div></div><div data-node-path="1.1.2" style="display: flex; flex-direction: row; align-items: center; gap: 24px; min-width: 0px; min-height: 0px; padding: 16px 0px; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.1.2.0" data-node-path="1.1.2.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 560px; min-height: 0px; max-width: 560px; overflow-y: visible;">docker compose logs -f backend</div><div data-text-path="1.1.2.1" data-node-path="1.1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; overflow-y: visible;">백엔드 로그 따라가기</div></div><div data-node-path="1.1.3" style="display: flex; flex-direction: row; align-items: center; gap: 24px; min-width: 0px; min-height: 0px; padding: 16px 0px; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.1.3.0" data-node-path="1.1.3.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 560px; min-height: 0px; max-width: 560px; overflow-y: visible;">docker compose up -d --build backend</div><div data-text-path="1.1.3.1" data-node-path="1.1.3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; overflow-y: visible;">코드 수정 후 백엔드만 다시 빌드</div></div><div data-node-path="1.1.4" style="display: flex; flex-direction: row; align-items: center; gap: 24px; min-width: 0px; min-height: 0px; padding: 16px 0px; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(213, 222, 219); box-sizing: border-box;"><div data-text-path="1.1.4.0" data-node-path="1.1.4.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 560px; min-height: 0px; max-width: 560px; overflow-y: visible;">docker compose down</div><div data-text-path="1.1.4.1" data-node-path="1.1.4.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; overflow-y: visible;">중지 · 삭제 (볼륨 데이터는 유지)</div></div><div data-node-path="1.1.5" style="display: flex; flex-direction: row; align-items: center; gap: 24px; min-width: 0px; min-height: 0px; padding: 16px 0px; box-sizing: border-box;"><div data-text-path="1.1.5.0" data-node-path="1.1.5.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 560px; min-height: 0px; max-width: 560px; overflow-y: visible;">docker compose down -v</div><div data-text-path="1.1.5.1" data-node-path="1.1.5.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; overflow-y: visible;"><b>주의:</b> 볼륨까지 삭제 — 데이터 소멸</div></div></div></div></div></div><div data-frame-id="e1-1e81fto" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1e81fto" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">16 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="17" aria-roledescription="slide" aria-label="Slide 17 of 27" data-document-role="page" data-label="앱 서비스: 프런트엔드 · 백엔드 · n8n" data-speaker-notes="compose.yaml의 앞부분, 앱 서비스입니다. 청록색으로 표시한 주소를 보세요. 컨테이너 안에서 localhost는 자기 자신이라서, 다른 컨테이너는 서비스 이름으로 부릅니다. Streamlit은 서버 쪽에서 백엔드를 부르기 때문에 backend:8000이 동작합니다. 백엔드는 ports가 없어서 외부에서는 보이지 않고 내부망에서만 접근됩니다. 예전 파일의 version 항목은 이제 쓰지 않아도 됩니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-18js5wp" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">05 · 배포 — compose.yaml ①</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">앱 서비스: 프런트엔드 · 백엔드 · n8n</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0" data-node-path="1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 1000px; min-height: 0px; max-width: 1000px; background-color: rgb(14, 26, 43); padding: 24px 32px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">services:
&nbsp;&nbsp;frontend:
&nbsp;&nbsp;&nbsp;&nbsp;build: ./frontend&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># Streamlit</font>
&nbsp;&nbsp;&nbsp;&nbsp;ports: ["8501:8501"]
&nbsp;&nbsp;&nbsp;&nbsp;environment:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;API_URL: <font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">http://backend:8000</font>
&nbsp;&nbsp;&nbsp;&nbsp;depends_on: [backend]
&nbsp;&nbsp;backend:
&nbsp;&nbsp;&nbsp;&nbsp;build: ./backend&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># FastAPI</font>
&nbsp;&nbsp;&nbsp;&nbsp;env_file: .env
&nbsp;&nbsp;&nbsp;&nbsp;environment:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;N8N_URL: <font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">http://n8n:5678</font>
&nbsp;&nbsp;&nbsp;&nbsp;depends_on:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;postgres: { condition: <font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">service_healthy</font> }
&nbsp;&nbsp;n8n:
&nbsp;&nbsp;&nbsp;&nbsp;image: n8nio/n8n
&nbsp;&nbsp;&nbsp;&nbsp;ports: ["5678:5678"]
&nbsp;&nbsp;&nbsp;&nbsp;volumes: [n8ndata:/home/node/.n8n]</div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-node-path="1.1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">① 서비스 이름 = 주소</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">컨테이너끼리는 localhost가 아니라 http://backend:8000처럼 이름으로 호출</div></div><div data-node-path="1.1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">② build와 image</div><div data-text-path="1.1.1.1" data-node-path="1.1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">내가 만든 코드는 build(Dockerfile), 남이 만든 소프트웨어는 image</div></div><div data-node-path="1.1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.2.0" data-node-path="1.1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">③ depends_on + condition</div><div data-text-path="1.1.2.1" data-node-path="1.1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">DB 헬스체크가 통과한 뒤에야 백엔드가 시작</div></div><div data-node-path="1.1.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.3.0" data-node-path="1.1.3.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">④ ports = 외부 공개</div><div data-text-path="1.1.3.1" data-node-path="1.1.3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">브라우저가 직접 들어오는 Streamlit · n8n 편집기만 연다</div></div></div></div></div></div><div data-frame-id="e1-18js5wp" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-18js5wp" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">17 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="18" aria-roledescription="slide" aria-label="Slide 18 of 27" data-document-role="page" data-label="저장소와 모니터링 서비스" data-speaker-notes="뒷부분은 저장소와 모니터링입니다. 각 DB는 named volume에 데이터를 둡니다. 볼륨이 없으면 컨테이너를 다시 만들 때 데이터가 사라집니다. 비밀번호는 compose 파일에 직접 쓰지 않고 .env에서 읽어 옵니다. Prometheus는 오른쪽 아래 설정처럼 backend:8000의 /metrics를 긁어 가는데, 여기서도 서비스 이름이 곧 주소입니다. Grafana에서는 데이터 소스로 http://prometheus:9090과 http://influxdb:8086을 등록하면 됩니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1sr9ibu" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">05 · 배포 — compose.yaml ②</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">저장소와 모니터링 서비스</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0" data-node-path="1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 1000px; min-height: 0px; max-width: 1000px; background-color: rgb(14, 26, 43); padding: 24px 32px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">&nbsp;&nbsp;postgres:
&nbsp;&nbsp;&nbsp;&nbsp;image: postgres:17
&nbsp;&nbsp;&nbsp;&nbsp;environment: { POSTGRES_PASSWORD: <font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">"${PG_PASSWORD}"</font> }
&nbsp;&nbsp;&nbsp;&nbsp;volumes: [<font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">pgdata</font>:/var/lib/postgresql/data]
&nbsp;&nbsp;&nbsp;&nbsp;healthcheck:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test: ["CMD-SHELL", "pg_isready -U postgres"]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interval: 5s
&nbsp;&nbsp;mongo:&nbsp;&nbsp;&nbsp;&nbsp;{ image: mongo:8, volumes: [<font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">mongodata</font>:/data/db] }
&nbsp;&nbsp;influxdb:
&nbsp;&nbsp;&nbsp;&nbsp;image: influxdb:2
&nbsp;&nbsp;&nbsp;&nbsp;volumes: [<font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">influxdata</font>:/var/lib/influxdb2]
&nbsp;&nbsp;prometheus:
&nbsp;&nbsp;&nbsp;&nbsp;image: prom/prometheus
&nbsp;&nbsp;&nbsp;&nbsp;volumes: [./prometheus.yml:/etc/prometheus/prometheus.yml]
&nbsp;&nbsp;grafana:
&nbsp;&nbsp;&nbsp;&nbsp;image: grafana/grafana
&nbsp;&nbsp;&nbsp;&nbsp;ports: ["3000:3000"]
volumes: {pgdata: {}, mongodata: {}, influxdata: {}, n8ndata: {}}</div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-node-path="1.1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">named volume</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">컨테이너를 지워도 데이터 유지 — down -v는 볼륨까지 삭제</div></div><div data-node-path="1.1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">${PG_PASSWORD}</div><div data-text-path="1.1.1.1" data-node-path="1.1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">값은 .env 파일에, .env는 .gitignore에</div></div><div data-node-path="1.1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.2.0" data-node-path="1.1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">healthcheck</div><div data-text-path="1.1.2.1" data-node-path="1.1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">pg_isready 성공 = “DB 준비 완료” 신호</div></div><div data-text-path="1.1.3" data-node-path="1.1.3" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(22, 38, 58); padding: 20px 24px; border-radius: 12px; overflow-y: visible; box-sizing: border-box;"><font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># prometheus.yml</font>
scrape_configs:
&nbsp;&nbsp;- job_name: backend
&nbsp;&nbsp;&nbsp;&nbsp;static_configs:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- targets: ["backend:8000"]</div></div></div></div></div><div data-frame-id="e1-1sr9ibu" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1sr9ibu" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">18 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="19" aria-roledescription="slide" aria-label="Slide 19 of 27" data-document-role="page" data-label="바이브 코딩에서 자주 막히는 지점" data-speaker-notes="수강생들이 실제로 가장 많이 막히는 여섯 가지입니다. 첫째와 둘째 줄의 차이가 중요합니다. Streamlit은 파이썬 서버가 백엔드를 부르므로 서비스 이름이 동작하지만, React SPA의 fetch는 사용자의 브라우저에서 실행되므로 도커 내부 이름을 모릅니다. 이 경우 백엔드 포트를 공개하거나 Nginx 같은 리버스 프록시로 같은 출처를 만들어야 합니다. 에러 메시지를 AI에게 그대로 붙여 넣기 전에 이 표에서 먼저 찾아보세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1wksx98" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">05 · 배포</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">바이브 코딩에서 자주 막히는 지점</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 30fr 32fr 38fr; width: 100%; box-sizing: border-box; min-width: 0px; min-height: 0px; align-self: flex-start; font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(34, 48, 63); border-top: 2px solid rgba(20, 20, 19, 0.22); border-left: 2px solid rgba(20, 20, 19, 0.22);"><div data-cell="0.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">증상</div><div data-cell="0.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">원인</div><div data-cell="0.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">해결</div><div data-cell="1.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">프런트엔드 → 백엔드 연결 거부</div><div data-cell="1.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">컨테이너 안의 localhost는 자기 자신</div><div data-cell="1.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">서비스 이름 사용: http://backend:8000</div><div data-cell="2.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">React 화면에서만 backend:8000 실패</div><div data-cell="2.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">브라우저는 도커 내부 이름을 모름</div><div data-cell="2.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">공개 포트 또는 리버스 프록시 주소 사용</div><div data-cell="3.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">백엔드가 뜨자마자 DB 연결 실패</div><div data-cell="3.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">DB가 준비되기 전에 백엔드 시작</div><div data-cell="3.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">healthcheck + service_healthy, 재시도</div><div data-cell="4.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">재시작했더니 데이터가 사라짐</div><div data-cell="4.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">볼륨 미선언, 또는 down -v 실행</div><div data-cell="4.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">named volume 선언, -v는 신중하게</div><div data-cell="5.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">브라우저 콘솔에 CORS 오류</div><div data-cell="5.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">다른 출처(포트)의 API 호출</div><div data-cell="5.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">FastAPI CORSMiddleware에 허용 출처 명시</div><div data-cell="6.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">API 키가 Git에 올라감</div><div data-cell="6.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">compose.yaml에 비밀값 직접 작성</div><div data-cell="6.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">.env로 분리 + .gitignore 등록</div></div></div></div><div data-frame-id="e1-1wksx98" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1wksx98" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">19 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="20" aria-roledescription="slide" aria-label="Slide 20 of 27" data-document-role="page" data-label="각자 AI에게 시키면 생기는 일" data-speaker-notes="혼자 바이브 코딩할 때는 AI가 앞뒤를 맞춰 줍니다. 그런데 네 명이 각자 자기 AI에게 &quot;백엔드 만들어 줘&quot;, &quot;화면 만들어 줘&quot;라고 하면, 각 AI는 서로를 모르기 때문에 이름, 테이블, 포트를 제각각 정합니다. 통합하는 날 모든 것이 깨집니다. 이 섹션의 핵심은 하나입니다. 사람이 계약을 먼저 합의하고, AI는 그 계약을 읽고 구현하게 만든다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1wfjnmr" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">06 · 여럿이 함께 바이브 코딩</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">각자 AI에게 시키면 생기는 일</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 28px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.0.0" data-node-path="1.0.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 40px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#a04e10"></text></svg><div data-text-path="1.0.1" data-node-path="1.0.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">이름 불일치</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">프런트엔드는 userName, 백엔드는 user_name을 주고받는다</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 28px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.1.0" data-node-path="1.1.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 40px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#a04e10"></text></svg><div data-text-path="1.1.1" data-node-path="1.1.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">테이블 중복</div><div data-text-path="1.1.2" data-node-path="1.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">같은 개념인데 users와 members 테이블이 따로 생긴다</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 28px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.2.0" data-node-path="1.2.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 40px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#a04e10"></text></svg><div data-text-path="1.2.1" data-node-path="1.2.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">환경 불일치</div><div data-text-path="1.2.2" data-node-path="1.2.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">포트 8000과 8080, requests와 httpx가 섞인다</div></div><div data-node-path="1.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 28px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 16px; box-sizing: border-box;"><svg data-icon-path="1.3.0" data-node-path="1.3.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width: 40px; height: 40px; min-width: 0px; min-height: 0px; display: block;"><text x="50" y="54" text-anchor="middle" dominant-baseline="central" font-family="mc-anthropicons" font-size="90" fill="#a04e10"></text></svg><div data-text-path="1.3.1" data-node-path="1.3.1" role="heading" aria-level="3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">남의 파일 수정</div><div data-text-path="1.3.2" data-node-path="1.3.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">AI가 “고치는 김에” 다른 사람 폴더까지 바꾼다</div></div></div><div data-node-path="2" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 36px 44px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.0" data-node-path="2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.35; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">AI는 빠르지만, 각자 <font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">다른 방향으로</font> 빠르다.</div><div data-text-path="2.1" data-node-path="2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">해법은 하나 — <font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;"><b>코드보다 계약을 먼저 합의</b></font>하고, 모든 팀원의 AI가 같은 규칙과 같은 계약을 읽게 한다.</div></div></div></div><div data-frame-id="e1-1wfjnmr" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1wfjnmr" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">20 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="21" aria-roledescription="slide" aria-label="Slide 21 of 27" data-document-role="page" data-label="역할은 층을 따라, 소유는 폴더 단위로" data-speaker-notes="4~5명 팀 기준의 역할 분담입니다. 앞에서 본 세 층을 그대로 따라 나누고, 각자 소유한 폴더 밖은 원칙적으로 고치지 않습니다. 이렇게 하면 Git 충돌이 크게 줄고, AI에게도 &quot;frontend 폴더만 수정해&quot;라고 범위를 정해 줄 수 있습니다. 1인 창업을 준비하는 분들도 마찬가지입니다. 한 AI 세션에 모든 것을 시키지 말고, 백엔드 작업 세션과 화면 작업 세션을 나눠서 같은 계약을 읽게 하세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-q98lpc" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">06 · 여럿이 함께 바이브 코딩</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">역할은 층을 따라, 소유는 폴더 단위로</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 18fr 24fr 30fr 28fr; width: 100%; box-sizing: border-box; min-width: 0px; min-height: 0px; align-self: flex-start; font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(34, 48, 63); border-top: 2px solid rgba(20, 20, 19, 0.22); border-left: 2px solid rgba(20, 20, 19, 0.22);"><div data-cell="0.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">역할</div><div data-cell="0.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">소유 폴더</div><div data-cell="0.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">책임</div><div data-cell="0.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">지키는 계약</div><div data-cell="1.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">프런트엔드</div><div data-cell="1.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">frontend/</div><div data-cell="1.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">Streamlit 화면, API 연동, 오류 표시</div><div data-cell="1.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">openapi.yaml (사용하는 쪽)</div><div data-cell="2.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">백엔드</div><div data-cell="2.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">backend/</div><div data-cell="2.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">FastAPI 엔드포인트, 업무 규칙, 권한</div><div data-cell="2.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">openapi.yaml (만드는 쪽)</div><div data-cell="3.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">데이터 · 인프라</div><div data-cell="3.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">contracts/db/, monitoring/, compose.yaml</div><div data-cell="3.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">스키마 · 마이그레이션, 배포, 대시보드</div><div data-cell="3.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">DB 스키마, compose.yaml</div><div data-cell="4.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">AI 워크플로우</div><div data-cell="4.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">workflows/</div><div data-cell="4.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">n8n 흐름, 프롬프트, RAG 문서</div><div data-cell="4.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 14px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">Webhook 입출력 JSON</div></div><div data-node-path="2" style="display: flex; flex-direction: row; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="2.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(227, 242, 239); padding: 24px 32px; border-width: 1px; border-style: solid; border-color: rgb(159, 211, 203); border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.0.0" data-node-path="2.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">통합 담당(팀장)</div><div data-text-path="2.0.1" data-node-path="2.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(46, 74, 71); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">계약 변경 승인과 main 머지를 책임진다. 역할과 겸해도 된다.</div></div><div data-node-path="2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(251, 241, 232); padding: 24px 32px; border-width: 1px; border-style: solid; border-color: rgb(235, 201, 168); border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.1.0" data-node-path="2.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">1인 개발이라면</div><div data-text-path="2.1.1" data-node-path="2.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(90, 58, 32); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">네 개의 모자를 순서대로 쓴다 — AI 세션도 역할별로 나눈다.</div></div></div></div></div><div data-frame-id="e1-q98lpc" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-q98lpc" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">21 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="22" aria-roledescription="slide" aria-label="Slide 22 of 27" data-document-role="page" data-label="계약 우선: 하나의 저장소, 하나의 진실" data-speaker-notes="팀이 함께 쓰는 하나의 저장소 구조입니다. 청록색 contracts 폴더가 앞에서 본 두 계약, 주황색 compose.yaml과 .env.example이 실행 환경의 계약입니다. 계약 파일은 코드보다 먼저 만들고, 바뀔 때는 영향받는 사람 모두가 확인합니다. openapi.yaml은 손으로 써도 되고, FastAPI로 먼저 뼈대를 만든 뒤 자동 생성된 스키마를 내보내 커밋해도 됩니다. 중요한 것은 저장소 안에 하나의 기준 파일이 있다는 점입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1ctqtup" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">06 · 여럿이 함께 바이브 코딩</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">계약 우선: 하나의 저장소, 하나의 진실</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0" data-node-path="1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.35; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 820px; min-height: 0px; max-width: 820px; background-color: rgb(14, 26, 43); padding: 24px 32px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;">project/
├─ AGENTS.md&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># AI 공통 규칙</font>
├─ docs/
│&nbsp;&nbsp;├─ architecture.md&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># 오늘의 구성도</font>
│&nbsp;&nbsp;└─ adr/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># 결정 기록</font>
├─ <font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">contracts/</font>
│&nbsp;&nbsp;├─ <font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">openapi.yaml</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># FE ↔ BE</font>
│&nbsp;&nbsp;└─ <font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;">db/migrations/</font>&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># BE ↔ DB</font>
├─ frontend/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># Streamlit</font>
├─ backend/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># FastAPI</font>
├─ workflows/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># n8n JSON export</font>
├─ monitoring/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># prometheus.yml</font>
├─ <font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">compose.yaml</font>
└─ <font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">.env.example</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># 키 이름만, 값은 X</font></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-node-path="1.1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">openapi.yaml — 화면과 로직의 계약</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">엔드포인트와 요청 · 응답 필드. FastAPI가 만든 /openapi.json을 내보내 커밋해도 된다</div></div><div data-node-path="1.1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">db/migrations — 로직과 저장소의 계약</div><div data-text-path="1.1.1.1" data-node-path="1.1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">테이블 변경은 Alembic 같은 마이그레이션 파일로만</div></div><div data-node-path="1.1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.2.0" data-node-path="1.1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">compose.yaml + .env.example</div><div data-text-path="1.1.2.1" data-node-path="1.1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">서비스 이름 · 포트 · 환경변수 키의 단일 기준</div></div><div data-node-path="1.1.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.3.0" data-node-path="1.1.3.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">docs/adr — 왜 그렇게 정했나</div><div data-text-path="1.1.3.1" data-node-path="1.1.3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">짧은 결정 기록은 사람에게도, AI에게도 맥락이 된다</div></div></div></div></div></div><div data-frame-id="e1-1ctqtup" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-1ctqtup" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">22 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="23" aria-roledescription="slide" aria-label="Slide 23 of 27" data-document-role="page" data-label="모든 팀원의 AI가 같은 규칙을 읽게" data-speaker-notes="계약이 &quot;무엇을 만들지&quot;라면 규칙 파일은 &quot;어떻게 일할지&quot;입니다. 저장소 최상단에 두면 코딩 에이전트가 작업을 시작할 때 자동으로 읽습니다. 수업에서 쓰는 도구들은 읽는 파일 이름이 조금씩 다르므로, AGENTS.md를 원본으로 두고 CLAUDE.md에서는 그것을 불러오도록 하면 내용이 갈라지지 않습니다. 규칙은 처음부터 완벽할 필요가 없습니다. 통합하다 깨진 지점이 생길 때마다 한 줄씩 늘려 가는 살아 있는 문서입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-689v3f" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">06 · 여럿이 함께 바이브 코딩</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">모든 팀원의 AI가 같은 규칙을 읽게</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0" data-node-path="1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 940px; min-height: 0px; max-width: 940px; background-color: rgb(14, 26, 43); padding: 24px 32px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#4fd1c1" style="color: rgb(79, 209, 193); -webkit-text-fill-color: currentcolor;"># AGENTS.md — 모든 AI 공통 규칙</font>
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## 구조</font>
- frontend는 backend API만 호출한다 (DB 접근 금지)
- API를 바꾸려면 contracts/openapi.yaml부터 수정
- DB 변경은 마이그레이션 파일로만
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## 저장소</font>
- 마스터 PostgreSQL · 센서 InfluxDB · 설정 MongoDB
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## 금지</font>
- 비밀값 하드코딩 금지 → .env에서 읽기
- 작업 범위로 지정된 폴더 밖 파일 수정 금지
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## 완료 조건</font>
- docker compose up 후 /health 200
- 테스트 통과, 변경한 계약은 PR 본문에 명시</div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-node-path="1.1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">원본은 하나</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">도구마다 읽는 파일이 다르다. Codex는 AGENTS.md, Claude Code는 CLAUDE.md — CLAUDE.md에 @AGENTS.md 한 줄로 원본을 불러온다</div></div><div data-node-path="1.1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">실수는 규칙으로 쌓는다</div><div data-text-path="1.1.1.1" data-node-path="1.1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">AI가 같은 실수를 반복하면(예: 화면 코드에서 또 DB 직접 접속) 프롬프트로 매번 말하지 말고 AGENTS.md에 금지 규칙을 한 줄 적는다. 팀 전체 AI가 읽는 파일이므로 혼자 고치지 않고 PR로 올려 함께 확인한다</div></div><div data-node-path="1.1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.2.0" data-node-path="1.1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">첫 프롬프트 습관</div><div data-text-path="1.1.2.1" data-node-path="1.1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">“AGENTS.md와 contracts/를 먼저 읽고, backend/ 안에서만 작업해”</div></div></div></div></div></div><div data-frame-id="e1-689v3f" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-689v3f" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">23 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="24" aria-roledescription="slide" aria-label="Slide 24 of 27" data-document-role="page" data-label="작업 한 건의 흐름: 이슈에서 머지까지" data-speaker-notes="작업 한 건이 흘러가는 일곱 단계입니다. 바이브 코딩이 들어가는 곳은 3번 하나뿐이고, 나머지는 사람이 지키는 절차입니다. PR 템플릿에서 가장 중요한 칸은 &quot;계약 변경&quot;입니다. 체크된 PR은 영향받는 담당자가 반드시 확인합니다. 또 &quot;AI 사용&quot; 칸에 프롬프트를 요약해 두면 리뷰어가 의도를 이해하기 쉽고, 나중에 같은 작업을 재현할 수도 있습니다. 수업 첫날 설치한 lazygit으로 브랜치와 커밋을 관리하면 됩니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-g1r299" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">06 · 여럿이 함께 바이브 코딩</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">작업 한 건의 흐름: 이슈에서 머지까지</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 12px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 18px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">① 이슈</div><div data-text-path="1.0.1" data-node-path="1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">작업 단위 하나</div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 18px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">② 브랜치</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">feat/be-ask</div></div><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(227, 242, 239); padding: 16px 18px; border-width: 1px; border-style: solid; border-color: rgb(159, 211, 203); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">③ AI 구현</div><div data-text-path="1.2.1" data-node-path="1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(46, 74, 71); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">규칙 · 계약 참조</div></div><div data-node-path="1.3" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 18px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.3.0" data-node-path="1.3.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">④ 로컬 검증</div><div data-text-path="1.3.1" data-node-path="1.3.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">compose up · 테스트</div></div><div data-node-path="1.4" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 18px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.4.0" data-node-path="1.4.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">⑤ PR</div><div data-text-path="1.4.1" data-node-path="1.4.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">템플릿 작성</div></div><div data-node-path="1.5" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(252, 253, 252); padding: 16px 18px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.5.0" data-node-path="1.5.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">⑥ 리뷰 · CI</div><div data-text-path="1.5.1" data-node-path="1.5.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">사람 1명 + AI</div></div><div data-node-path="1.6" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 16px 18px; border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.6.0" data-node-path="1.6.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">⑦ 머지</div><div data-text-path="1.6.1" data-node-path="1.6.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(191, 210, 208); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">main은 보호</div></div></div><div data-node-path="2" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-node-path="2.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 820px; min-height: 0px; max-width: 820px;"><div data-text-path="2.0.0" data-node-path="2.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">PR 템플릿 예시</div><div data-text-path="2.0.1" data-node-path="2.0.1" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px 32px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## 무엇을</font>
- /ask 엔드포인트에 사용자별 비용 한도 추가
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## 계약 변경</font>
- [x] openapi.yaml&nbsp;&nbsp;[ ] DB&nbsp;&nbsp;[ ] compose
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## AI 사용</font>
- 도구 · 핵심 프롬프트 요약
<font color="#f2a65a" style="color: rgb(242, 166, 90); -webkit-text-fill-color: currentcolor;">## 확인</font>
- [x] compose up 후 /health 200
- [x] pytest 통과</div></div><div data-node-path="2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; padding: 36px 0px 0px; box-sizing: border-box;"><div data-text-path="2.1.0" data-node-path="2.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>main 직접 push 금지</b></font> — 브랜치 보호 규칙으로 막는다</div><div data-text-path="2.1.1" data-node-path="2.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>PR은 작게</b></font> — 하루 안에 리뷰할 수 있는 크기</div><div data-text-path="2.1.2" data-node-path="2.1.2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>설명할 수 있어야 머지</b></font> — AI가 쓴 코드도 작성자가 리뷰어에게 설명</div><div data-text-path="2.1.3" data-node-path="2.1.3" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#0e1a2b" style="color: rgb(14, 26, 43); -webkit-text-fill-color: currentcolor;"><b>CI 자동 실행</b></font> — PR마다 compose 빌드 + 테스트</div></div></div></div></div><div data-frame-id="e1-g1r299" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-g1r299" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">24 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="25" aria-roledescription="slide" aria-label="Slide 25 of 27" data-document-role="page" data-label="CI/CD: 검사와 배포는 사람 대신 기계가" data-speaker-notes="CI는 지속적 통합, CD는 지속적 배포입니다. 앞 장의 Git 흐름에서 사람이 하던 확인을 기계가 대신합니다. CI는 PR이 올라올 때마다 compose로 전체를 띄우고 테스트를 돌려, 깨진 코드가 main에 들어가지 못하게 막습니다. 비밀번호는 저장소가 아니라 Secrets에서 주입합니다. CD는 main에 머지되면 이미지를 만들어 서버에 배포합니다. 배포 후에는 앞서 만든 Grafana 대시보드로 확인하고, 문제가 생기면 이전 이미지 태그로 되돌립니다. 바이브 코딩은 코드를 빨리 만들기 때문에 이 자동 검사가 더 중요합니다. 처음에는 CI만 붙이고, 익숙해지면 CD를 더하세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-3bwl5c" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">06 · 여럿이 함께 바이브 코딩</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">CI/CD: 검사와 배포는 사람 대신 기계가</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(252, 253, 252); padding: 16px 20px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">① PR 생성</div><div data-text-path="1.0.1" data-node-path="1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">push하면 시작</div></div><svg data-node-path="1.1" data-shape="arrow-right" viewBox="0 0 40 20" preserveAspectRatio="none" style="width: 40px; height: 20px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,6.00 24.00,6.00 24.00,2.00 40.00,10.00 24.00,18.00 24.00,14.00 0.00,14.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-node-path="1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(227, 242, 239); padding: 16px 20px; border-width: 1px; border-style: solid; border-color: rgb(159, 211, 203); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">② CI</div><div data-text-path="1.2.1" data-node-path="1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(46, 74, 71); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">빌드 · 테스트</div></div><svg data-node-path="1.3" data-shape="arrow-right" viewBox="0 0 40 20" preserveAspectRatio="none" style="width: 40px; height: 20px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,6.00 24.00,6.00 24.00,2.00 40.00,10.00 24.00,18.00 24.00,14.00 0.00,14.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-node-path="1.4" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(252, 253, 252); padding: 16px 20px; border-width: 1px; border-style: solid; border-color: rgb(213, 222, 219); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.4.0" data-node-path="1.4.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">③ 머지</div><div data-text-path="1.4.1" data-node-path="1.4.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">통과 + 리뷰 후</div></div><svg data-node-path="1.5" data-shape="arrow-right" viewBox="0 0 40 20" preserveAspectRatio="none" style="width: 40px; height: 20px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,6.00 24.00,6.00 24.00,2.00 40.00,10.00 24.00,18.00 24.00,14.00 0.00,14.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-node-path="1.6" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(251, 241, 232); padding: 16px 20px; border-width: 1px; border-style: solid; border-color: rgb(235, 201, 168); border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.6.0" data-node-path="1.6.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">④ CD</div><div data-text-path="1.6.1" data-node-path="1.6.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(90, 58, 32); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">서버에 배포</div></div><svg data-node-path="1.7" data-shape="arrow-right" viewBox="0 0 40 20" preserveAspectRatio="none" style="width: 40px; height: 20px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,6.00 24.00,6.00 24.00,2.00 40.00,10.00 24.00,18.00 24.00,14.00 0.00,14.00" fill="#9aa8b5" stroke-linejoin="round"></polygon></svg><div data-node-path="1.8" style="display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(14, 26, 43); padding: 16px 20px; border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.8.0" data-node-path="1.8.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">⑤ 관측</div><div data-text-path="1.8.1" data-node-path="1.8.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(191, 210, 208); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Grafana · 롤백</div></div></div><div data-node-path="2" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-node-path="2.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 980px; min-height: 0px; max-width: 980px;"><div data-text-path="2.0.0" data-node-path="2.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">CI — PR마다 자동 검사 (GitHub Actions 예시)</div><div data-text-path="2.0.1" data-node-path="2.0.1" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.3; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; background-color: rgb(14, 26, 43); padding: 24px 32px; border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#8fb5b0" style="color: rgb(143, 181, 176); -webkit-text-fill-color: currentcolor;"># .github/workflows/ci.yml</font>
on: [pull_request]
jobs:
&nbsp;&nbsp;test:
&nbsp;&nbsp;&nbsp;&nbsp;runs-on: ubuntu-latest
&nbsp;&nbsp;&nbsp;&nbsp;steps:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- uses: actions/checkout@v4
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- run: echo "PG_PASSWORD=${{ secrets.PG_PASSWORD }}" &gt; .env
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- run: docker compose up -d --build --wait
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- run: docker compose exec -T backend pytest
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- run: docker compose down -v</div></div><div data-node-path="2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%;"><div data-node-path="2.1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="2.1.0.0" data-node-path="2.1.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">CD — main에 들어가면 배포</div><div data-text-path="2.1.0.1" data-node-path="2.1.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">이미지를 빌드해 레지스트리에 올리고(태그 = 커밋 해시), 서버에서 compose pull 후 up -d</div></div><div data-node-path="2.1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="2.1.1.0" data-node-path="2.1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">배포 뒤엔 관측</div><div data-text-path="2.1.1.1" data-node-path="2.1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Grafana에서 오류율 · p95 확인, 이상하면 이전 태그로 롤백</div></div><div data-node-path="2.1.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0px; min-height: 0px;"><div data-text-path="2.1.2.0" data-node-path="2.1.2.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">시작은 CI부터</div><div data-text-path="2.1.2.1" data-node-path="2.1.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(70, 86, 106); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">자동 테스트 없는 자동 배포는 위험하다. 사내 Gitea Actions도 거의 같은 문법</div></div></div></div></div></div><div data-frame-id="e1-3bwl5c" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-3bwl5c" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">25 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="26" aria-roledescription="slide" aria-label="Slide 26 of 27" data-document-role="page" data-label="계약이 있으면 기다리지 않고 동시에 만든다" data-speaker-notes="계약을 먼저 정하면 서로 기다릴 필요가 없습니다. Day 0에는 전원이 모여 구성도, openapi 초안, 스키마, compose 골격을 함께 만듭니다. 그 뒤로는 각자 병렬로 진행합니다. 프런트엔드는 백엔드가 아직 없어도 Prism 같은 mock 서버가 openapi.yaml을 읽고 가짜 응답을 돌려주므로 화면을 먼저 만들 수 있습니다. 그리고 하루에 한 번은 main에 머지하고 compose up으로 전체를 띄워 봅니다. 통합을 미룰수록 깨진 곳을 찾기 어려워집니다. 계약을 바꿔야 할 때는 오른쪽 절차를 따릅니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(245, 247, 246); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-i9rz0w" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 40px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(21, 122, 110); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">06 · 여럿이 함께 바이브 코딩</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(14, 26, 43); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">계약이 있으면 기다리지 않고 동시에 만든다</div></div><div data-node-path="1" style="display: grid; grid-template-columns: 16fr 27fr 30fr 27fr; width: 100%; box-sizing: border-box; min-width: 0px; min-height: 0px; align-self: flex-start; font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(34, 48, 63); border-top: 2px solid rgba(20, 20, 19, 0.22); border-left: 2px solid rgba(20, 20, 19, 0.22);"><div data-cell="0.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">역할</div><div data-cell="0.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">Day 0 · 함께</div><div data-cell="0.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">구현 · 각자 병렬</div><div data-cell="0.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(242, 245, 244); font-weight: 600; background: rgb(14, 26, 43);">매일 통합</div><div data-cell="1.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">프런트엔드</div><div data-cell="1.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">화면 목록, 필요한 API 정리</div><div data-cell="1.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">mock 서버로 화면 개발</div><div data-cell="1.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">실제 백엔드 주소로 전환</div><div data-cell="2.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">백엔드</div><div data-cell="2.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">openapi.yaml 초안</div><div data-cell="2.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">엔드포인트 구현, 계약 테스트</div><div data-cell="2.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">main 머지, /docs 확인</div><div data-cell="3.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(252, 253, 252);">데이터 · 인프라</div><div data-cell="3.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">스키마, compose 골격</div><div data-cell="3.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">마이그레이션, 시드 데이터, 대시보드</div><div data-cell="3.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(252, 253, 252);">compose up 통합 점검</div><div data-cell="4.0" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(21, 122, 110); background: rgb(237, 242, 240);">AI 워크플로우</div><div data-cell="4.1" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">Webhook 입출력 정의</div><div data-cell="4.2" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">n8n 흐름, 프롬프트, RAG 문서</div><div data-cell="4.3" style="border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 12px 20px; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(237, 242, 240);">워크플로우 JSON export 커밋</div></div><div data-node-path="2" style="display: flex; flex-direction: row; align-items: stretch; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="2.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(14, 26, 43); padding: 24px 32px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.0.0" data-node-path="2.0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(79, 209, 193); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">백엔드 없이 화면부터 — mock 서버</div><div data-text-path="2.0.1" data-node-path="2.0.1" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(214, 226, 224); margin: 0px; white-space: pre; overflow-wrap: normal; min-width: 0px; min-height: 0px; overflow-y: visible;">npx @stoplight/prism-cli mock contracts/openapi.yaml</div></div><div data-node-path="2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 640px; min-height: 0px; max-width: 640px; background-color: rgb(251, 241, 232); padding: 24px 32px; border-width: 1px; border-style: solid; border-color: rgb(235, 201, 168); border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.1.0" data-node-path="2.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(160, 78, 16); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">계약 변경 절차</div><div data-text-path="2.1.1" data-node-path="2.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.45; color: rgb(90, 58, 32); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">제안 PR → 영향 담당자 승인 → 계약 먼저 머지 → 각자 구현 수정</div></div></div></div></div><div data-frame-id="e1-i9rz0w" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-i9rz0w" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(94, 109, 126); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">26 / 27</div></div></div></div></div></section>
<section class="deck-slide" id="27" aria-roledescription="slide" aria-label="Slide 27 of 27" data-document-role="page" data-label="AI에게 구조를 먼저 말하면, 코드가 덜 흔들린다" data-speaker-notes="바이브 코딩의 품질은 첫 프롬프트에서 구조를 얼마나 분명히 말했는지에 크게 좌우됩니다. 오른쪽 프롬프트는 오늘 배운 세 가지, 즉 층 분리, 저장소 선택, 관측과 배포를 모두 담고 있습니다. 실습으로 이 프롬프트를 그대로 넣어 보고, AI가 만든 결과가 오늘의 구성도와 어디가 다른지 찾아보게 하면 좋습니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(14, 26, 43); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-ev4z7o" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 48px; width: 100%; height: 100%; padding: 128px 128px 160px; box-sizing: border-box;"><div data-node-path="0" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(79, 209, 193); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; letter-spacing: 2px; overflow-y: visible;">정리</div><div data-text-path="0.1" data-node-path="0.1" role="heading" aria-level="2" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.2; color: rgb(242, 245, 244); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">AI에게 구조를 먼저 말하면, 코드가 덜 흔들린다</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 28px; min-width: 640px; min-height: 0px; max-width: 640px;"><div data-node-path="1.0.0" style="display: flex; flex-direction: row; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0.0.0" data-node-path="1.0.0.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(79, 209, 193); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">1</div><div data-text-path="1.0.0.1" data-node-path="1.0.0.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#f2f5f4" style="color: rgb(242, 245, 244); -webkit-text-fill-color: currentcolor;"><b>층을 나눈다</b></font>
화면 · 규칙 · 저장을 섞지 않는다</div></div><div data-node-path="1.0.1" style="display: flex; flex-direction: row; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0.1.0" data-node-path="1.0.1.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(79, 209, 193); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">2</div><div data-text-path="1.0.1.1" data-node-path="1.0.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#f2f5f4" style="color: rgb(242, 245, 244); -webkit-text-fill-color: currentcolor;"><b>데이터 모양으로 저장소를 고른다</b></font>
레코드 · 시계열 · 문서</div></div><div data-node-path="1.0.2" style="display: flex; flex-direction: row; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0.2.0" data-node-path="1.0.2.0" style="font-family: &quot;JetBrains Mono&quot;, &quot;Courier New&quot;, ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 600; line-height: 1.4; color: rgb(79, 209, 193); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">3</div><div data-text-path="1.0.2.1" data-node-path="1.0.2.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.5; color: rgb(201, 214, 212); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;"><font color="#f2f5f4" style="color: rgb(242, 245, 244); -webkit-text-fill-color: currentcolor;"><b>처음부터 관측하고, 한 파일로 띄운다</b></font>
/metrics + compose.yaml</div></div></div><div data-node-path="1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(22, 38, 58); padding: 36px 40px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(242, 166, 90); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">프롬프트 예시</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.6; color: rgb(229, 236, 235); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">“프런트엔드는 Streamlit, 백엔드는 FastAPI로 분리해 줘. 프런트엔드는 백엔드 API만 호출한다. 설비 정보는 PostgreSQL, 센서 값은 InfluxDB, 장비 설정은 MongoDB에 저장한다. 백엔드는 /metrics를 노출하고, Prometheus · Grafana까지 포함한 compose.yaml을 만들어 줘. 비밀값은 .env로 분리해 줘.”</div></div></div></div></div><div data-frame-id="e1-ev4z7o" style="position: absolute; left: 128px; width: 1200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(143, 166, 164); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">프런트엔드 · 백엔드 구성</div></div><div data-frame-id="e2-ev4z7o" style="position: absolute; right: 128px; width: 200px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: &quot;Noto Sans KR&quot;, Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(143, 166, 164); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; text-align: right; overflow-y: visible;">27 / 27</div></div></div></div></div></section>
</main>
<div class="deck-pager" aria-hidden="true"></div>
</body>
</html>