3460 lines
505 KiB
HTML
3460 lines
505 KiB
HTML
<!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=Noto+Sans+KR:wght@400;500;700;900&display=swap">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,400&display=swap">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,500&display=swap">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,700&display=swap">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:ital,wght@1,900&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-\[calc\(1rem\+var\(--mc-foot-cover\,0px\)\)\] { bottom: calc(1rem + var(--mc-foot-cover,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); }
|
|
.mr-\[-0\.8px\] { margin-right: -0.8px; }
|
|
.mr-\[calc\(min\(calc\(0\.1875rem\*var\(--cds-rem-scale\,1\)\)\,\(var\(--cds-h-control-nested\)-calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\)\/2\)-var\(--cds-pad-sm\)\)\] { margin-right: calc(min(calc(.1875rem * var(--cds-rem-scale,1)), (var(--cds-h-control-nested) - calc(.75rem * var(--cds-rem-scale,1))) / 2) - var(--cds-pad-sm)); }
|
|
.-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-0\.5 { margin-left: calc(var(--spacing) * -.5); }
|
|
.-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-\[calc\(\(var\(--cds-h-control-nested\)-calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\)\/2-var\(--cds-pad-sm\)\+1px\)\] { margin-left: calc((var(--cds-h-control-nested) - calc(.75rem * var(--cds-rem-scale,1))) / 2 - var(--cds-pad-sm) + 1px); }
|
|
.ml-\[calc\(\(var\(--cds-h-control-nested\)-calc\(1\.25rem\*var\(--cds-rem-scale\,1\)\)\)\/2-var\(--cds-pad-sm\)\+1px\)\] { margin-left: calc((var(--cds-h-control-nested) - calc(1.25rem * var(--cds-rem-scale,1))) / 2 - var(--cds-pad-sm) + 1px); }
|
|
.ml-\[calc\(\(var\(--cds-h-control-nested\)-calc\(1rem\*var\(--cds-rem-scale\,1\)\)\)\/2-var\(--cds-pad-sm\)\+1px\)\] { margin-left: calc((var(--cds-h-control-nested) - calc(1rem * var(--cds-rem-scale,1))) / 2 - var(--cds-pad-sm) + 1px); }
|
|
.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-\[max\(calc\(var\(--cds-h-control-nested\)-calc\(0\.375rem\*var\(--cds-rem-scale\,1\)\)\)\,calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\)\] { width: max(calc(var(--cds-h-control-nested) - calc(.375rem * var(--cds-rem-scale,1))), calc(.75rem * var(--cds-rem-scale,1))); height: max(calc(var(--cds-h-control-nested) - calc(.375rem * var(--cds-rem-scale,1))), calc(.75rem * var(--cds-rem-scale,1))); }
|
|
.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-pad-xs\)\)\] { min-height: calc(var(--cds-h-control) + 2 * var(--cds-pad-xs)); }
|
|
.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-control-nested { width: var(--cds-h-control-nested); }
|
|
.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-h-control-nested\)\/4-min\(calc\(0\.1875rem\*var\(--cds-rem-scale\,1\)\)\,\(var\(--cds-h-control-nested\)-calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\)\/2\)\)\] { border-radius: calc(var(--cds-h-control-nested) / 4 - min(calc(.1875rem * var(--cds-rem-scale,1)), (var(--cds-h-control-nested) - calc(.75rem * var(--cds-rem-scale,1))) / 2)); }
|
|
.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-chip { border-radius: calc(var(--cds-h-control-nested) / 4); }
|
|
.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-aqua-500 { background-color: var(--cds-aqua-500); }
|
|
.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-blue-500 { background-color: var(--cds-blue-500); }
|
|
.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-gray-700 { background-color: var(--cds-gray-700); }
|
|
.bg-green-500 { background-color: var(--cds-green-500); }
|
|
.bg-magenta-450 { background-color: var(--cds-magenta-450); }
|
|
.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-orange-450 { background-color: var(--cds-orange-450); }
|
|
.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-red-450 { background-color: var(--cds-red-450); }
|
|
.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-tint-aqua { background-color: var(--cds-bg-tint-aqua); }
|
|
.bg-tint-blue { background-color: var(--cds-bg-tint-blue); }
|
|
.bg-tint-green { background-color: var(--cds-bg-tint-green); }
|
|
.bg-tint-magenta { background-color: var(--cds-bg-tint-magenta); }
|
|
.bg-tint-orange { background-color: var(--cds-bg-tint-orange); }
|
|
.bg-tint-red { background-color: var(--cds-bg-tint-red); }
|
|
.bg-tint-violet { background-color: var(--cds-bg-tint-violet); }
|
|
.bg-tint-yellow { background-color: var(--cds-bg-tint-yellow); }
|
|
.bg-transparent { background-color: rgba(0, 0, 0, 0); }
|
|
.bg-violet-450 { background-color: var(--cds-violet-450); }
|
|
.bg-warning { background-color: var(--cds-bg-warning); }
|
|
.bg-wash-1 { background-color: var(--t-wash-1); }
|
|
.bg-white { background-color: var(--color-white); }
|
|
.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-yellow-500 { background-color: var(--cds-yellow-500); }
|
|
.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\.5 { padding-inline: calc(var(--spacing) * .5) !important; }
|
|
.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-\[0\.05em\] { padding-bottom: 0.05em; }
|
|
.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\(1\.25rem\+var\(--mc-foot-inset\,0px\)\)\] { padding-bottom: calc(1.25rem + var(--mc-foot-inset,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\(--mc-foot-inset\,0px\)\] { padding-bottom: var(--mc-foot-inset,0px); }
|
|
.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-\[calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\] { --tw-leading: calc(.75rem * var(--cds-rem-scale,1)); line-height: calc(.75rem * var(--cds-rem-scale,1)); }
|
|
.leading-\[round\(1\.25em\,1px\)\] { --tw-leading: round(1.25em, 1px); line-height: round(1.25em, 1px); }
|
|
.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-current { color: currentcolor; }
|
|
.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-pro { color: var(--cds-text-pro); }
|
|
.text-secondary { color: var(--cds-text-secondary); }
|
|
.text-tint-aqua { color: var(--cds-text-tint-aqua); }
|
|
.text-tint-blue { color: var(--cds-text-tint-blue); }
|
|
.text-tint-green { color: var(--cds-text-tint-green); }
|
|
.text-tint-magenta { color: var(--cds-text-tint-magenta); }
|
|
.text-tint-orange { color: var(--cds-text-tint-orange); }
|
|
.text-tint-red { color: var(--cds-text-tint-red); }
|
|
.text-tint-violet { color: var(--cds-text-tint-violet); }
|
|
.text-tint-yellow { color: var(--cds-text-tint-yellow); }
|
|
.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; }
|
|
.accent-bg { accent-color: var(--t-bg); }
|
|
.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-\[color\,background-color\,box-shadow\,--cds-badge-x-wght\] { transition-property: color, background-color, box-shadow, --cds-badge-x-wght; 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-badge { --_cds-font-weight-role: var(--cds-font-weight-badge); --_cds-font-axis-wght-role: var(--cds-font-axis-wght-badge); }
|
|
.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-badge-x-wght\:577\.8\] { --cds-badge-x-wght: 577.8; }
|
|
.\[--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\:top-1\/2::before { content: var(--tw-content); top: 50%; }
|
|
.before\:left-\[-2px\]::before { content: var(--tw-content); left: -2px; }
|
|
.before\:-z-\[1\]::before { content: var(--tw-content); z-index: calc(-1); }
|
|
.before\:h-0::before { content: var(--tw-content); height: 0px; }
|
|
.before\:h-\[max\(24px\,100\%\)\]::before { content: var(--tw-content); height: max(24px, 100%); }
|
|
.before\:w-\[max\(24px\,calc\(100\%\+2px\)\)\]::before { content: var(--tw-content); width: max(24px, 100% + 2px); }
|
|
.before\:min-w-0::before { content: var(--tw-content); min-width: 0px; }
|
|
.before\:-translate-y-1\/2::before { content: var(--tw-content); --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
|
|
.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-\[color-mix\(in_srgb\,currentColor_10\%\,transparent\)\]:hover { background-color: currentcolor; }
|
|
@supports (color:color-mix(in lab, red, red)) {
|
|
.hover\:bg-\[color-mix\(in_srgb\,currentColor_10\%\,transparent\)\]:hover { background-color: color-mix(in srgb, currentcolor 10%, transparent); }
|
|
}
|
|
.hover\:bg-\[color-mix\(in_srgb\,currentColor_20\%\,transparent\)\]:hover { background-color: currentcolor; }
|
|
@supports (color:color-mix(in lab, red, red)) {
|
|
.hover\:bg-\[color-mix\(in_srgb\,currentColor_20\%\,transparent\)\]:hover { background-color: color-mix(in srgb, currentcolor 20%, transparent); }
|
|
}
|
|
.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\:\[--cds-badge-x-wght\:700\]:hover { --cds-badge-x-wght: 700; }
|
|
.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\: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\:bg-gray-550:where([data-mode="dark"], [data-mode="dark"] *) { background-color: var(--cds-gray-550); }
|
|
}
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
.dark\:bg-gray-550: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\:bg-gray-550:where(.cds-root, .cds-root *):not(:where([data-mode], [data-mode] *)) { background-color: var(--cds-gray-550); }
|
|
}
|
|
@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-\[46px\] { width: 46px; }
|
|
.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-0\.5:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-start: calc(var(--spacing) * -.5); }
|
|
.\[\&\: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\)\)\]\:ms-\[calc\(\(var\(--cds-h-control-nested\)-calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\)\/2-var\(--cds-pad-sm\)\+1px\)\]:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-start: calc((var(--cds-h-control-nested) - calc(.75rem * var(--cds-rem-scale,1))) / 2 - var(--cds-pad-sm) + 1px); }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:ms-\[calc\(\(var\(--cds-h-control-nested\)-calc\(1\.25rem\*var\(--cds-rem-scale\,1\)\)\)\/2-var\(--cds-pad-sm\)\+1px\)\]:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-start: calc((var(--cds-h-control-nested) - calc(1.25rem * var(--cds-rem-scale,1))) / 2 - var(--cds-pad-sm) + 1px); }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:ms-\[calc\(\(var\(--cds-h-control-nested\)-calc\(1rem\*var\(--cds-rem-scale\,1\)\)\)\/2-var\(--cds-pad-sm\)\+1px\)\]:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-start: calc((var(--cds-h-control-nested) - calc(1rem * var(--cds-rem-scale,1))) / 2 - var(--cds-pad-sm) + 1px); }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:me-0:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-end: 0px; }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:me-\[-0\.8px\]:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-end: -0.8px; }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:me-\[calc\(min\(calc\(0\.1875rem\*var\(--cds-rem-scale\,1\)\)\,\(var\(--cds-h-control-nested\)-calc\(0\.75rem\*var\(--cds-rem-scale\,1\)\)\)\/2\)-var\(--cds-pad-sm\)\)\]:where(:root[dir="rtl"] :dir(rtl)) { margin-inline-end: calc(min(calc(.1875rem * var(--cds-rem-scale,1)), (var(--cds-h-control-nested) - calc(.75rem * var(--cds-rem-scale,1))) / 2) - var(--cds-pad-sm)); }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:flex-row-reverse:where(:root[dir="rtl"] :dir(rtl)) { flex-direction: row-reverse; }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:before\:start-\[-2px\]:where(:root[dir="rtl"] :dir(rtl))::before { content: var(--tw-content); inset-inline-start: -2px; }
|
|
.\[\&\:where\(\:root\[dir\=rtl\]_\:dir\(rtl\)\)\]\:before\:end-auto:where(:root[dir="rtl"] :dir(rtl))::before { content: var(--tw-content); inset-inline-end: auto; }
|
|
.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-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&_\[data-cds-part\=paint\]\]\:\!\[transition-property\:box-shadow\,color\] [data-cds-part="paint"] { transition-property: box-shadow, color !important; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\:is\(\:hover\:not\(\[data-disabled\]\)\,\[data-popup-open\]\)_button\:not\(\[aria-pressed\=true\]\)_\[data-cds-part\=paint\]\]\:\[background-color\:var\(--cds-fill-button-ghost-hover\,var\(--cds-fill-ghost-hover\)\)\]:is(:hover:not([data-disabled]), [data-popup-open]) button:not([aria-pressed="true"]) [data-cds-part="paint"] { background-color: var(--cds-fill-button-ghost-hover,var(--cds-fill-ghost-hover)); }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\:not\(\[data-disabled\]\)_button\:hover\:not\(\[aria-pressed\=true\]\)_\[data-cds-part\=paint\]\]\:\[background-image\:linear-gradient\(var\(--cds-fill-button-layer\,var\(--cds-fill-ghost-hover\)\)_0_0\)\]:not([data-disabled]) button:hover:not([aria-pressed="true"]) [data-cds-part="paint"] { background-image: linear-gradient(var(--cds-fill-button-layer,var(--cds-fill-ghost-hover)) 0 0); }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:first-child_button\]\:after\:absolute > [data-cds-segment]:first-child button::after { content: var(--tw-content); position: absolute; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:first-child_button\]\:after\:inset-0 > [data-cds-segment]:first-child button::after { content: var(--tw-content); inset: 0px; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:first-child_button\]\:after\:rounded-s-\[inherit\] > [data-cds-segment]:first-child button::after { content: var(--tw-content); border-start-start-radius: inherit; border-end-start-radius: inherit; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:last-child_\[data-cds-part\=paint\]\]\:\!p-0 > [data-cds-segment]:last-child [data-cds-part="paint"] { padding: 0px !important; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:last-child_button\]\:\!ms-px > [data-cds-segment]:last-child button { margin-inline-start: 1px !important; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:last-child_button\]\:\!px-px > [data-cds-segment]:last-child button { padding-inline: 1px !important; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:last-child_button\]\:after\:\!-start-0\.5 > [data-cds-segment]:last-child button::after { content: var(--tw-content); inset-inline-start: calc(var(--spacing) * -.5) !important; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=\"icons\"\]_\&\>\[data-cds-segment\]\:last-child_button\[aria-expanded\=true\]_\[data-cds-part\=paint\]\]\:\[background-image\:linear-gradient\(var\(--cds-fill-button-layer\,var\(--cds-fill-ghost-hover\)\)_0_0\)\] > [data-cds-segment]:last-child button[aria-expanded="true"] [data-cds-part="paint"] { background-image: linear-gradient(var(--cds-fill-button-layer,var(--cds-fill-ghost-hover)) 0 0); }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=icons\]_\&\]\:contents { display: contents; }
|
|
[data-cds-fizzy-lake~="icons"] .\[\[data-cds-fizzy-lake\~\=icons\]_\&\]\:hidden { display: none; }
|
|
[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; --mc-keyboard-inset: 0px; --mc-foot-cover: max(var(--mc-foot-inset), var(--mc-keyboard-inset)); }
|
|
:root[data-mc-keyboard] [data-cds="Dialog"].top-1\/2 { top: max(6rem, calc((100dvh - var(--mc-keyboard-inset)) / 2)); max-height: max(11rem, calc(100dvh - var(--mc-keyboard-inset) - 1rem)); }
|
|
.mc-dialog-foot { bottom: calc(-1 * var(--cds-pad-xl)); z-index: 1; margin: var(--cds-pad-lg) calc(-1 * var(--cds-pad-xl)) calc(-1 * var(--cds-pad-xl)); padding: 0 var(--cds-pad-xl) var(--cds-pad-xl); background: var(--cds-page-bg); position: sticky; }
|
|
.mc-dialog-foot::before { content: ""; height: var(--cds-pad-lg); background: linear-gradient(to top, var(--cds-page-bg), transparent); pointer-events: none; z-index: -1; position: absolute; inset: auto 0px 100%; }
|
|
.scroll-fade-y:has(> .mc-dialog-foot), .scroll-fade-y:has(> form > .mc-dialog-foot) { --cds-scroll-fade-bottom-on: 0; margin: var(--cds-ring-inner,0px); scroll-padding-bottom: 5.5rem; }
|
|
@media not all and (min-width: 40rem) {
|
|
.scroll-fade-y:has(> .mc-dialog-foot), .scroll-fade-y:has(> form > .mc-dialog-foot) { scroll-padding-bottom: 8.5rem; }
|
|
:root[data-mc-keyboard] .mc-dialog-foot { position: static; }
|
|
:root[data-mc-keyboard] .mc-dialog-foot::before { content: none; }
|
|
:root[data-mc-keyboard] .scroll-fade-y:has(> .mc-dialog-foot), :root[data-mc-keyboard] .scroll-fade-y:has(> form > .mc-dialog-foot) { --cds-scroll-fade-bottom-on: 1; scroll-padding-bottom: var(--cds-scroll-fade-size); }
|
|
}
|
|
@media not all and (min-height: 13rem), (not (min-height: 17.5rem)) and (not (min-width: 40rem)) {
|
|
[data-cds="Dialog"]:has(:read-write:not([aria-hidden="true"])) .mc-dialog-foot { position: static; }
|
|
[data-cds="Dialog"]:has(:read-write:not([aria-hidden="true"])) .mc-dialog-foot::before { content: none; }
|
|
[data-cds="Dialog"]:has(:read-write:not([aria-hidden="true"])) .scroll-fade-y:has(> .mc-dialog-foot), [data-cds="Dialog"]:has(:read-write:not([aria-hidden="true"])) .scroll-fade-y:has(> form > .mc-dialog-foot) { --cds-scroll-fade-bottom-on: 1; scroll-padding-bottom: var(--cds-scroll-fade-size); }
|
|
}
|
|
.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 { min-width: 28px; 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[data-presenting] body { background: rgb(0, 0, 0); }
|
|
: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 (pointer: coarse) {
|
|
@media not all and (min-height: 640px) {
|
|
#root > [data-placeholder] > [data-rail="open"] { display: none; }
|
|
}
|
|
}
|
|
@media (min-width: 640px) and (min-height: 460px) {
|
|
@media not all and (pointer: coarse) {
|
|
#root > [data-placeholder] > [data-rail="closed"] { display: none; }
|
|
}
|
|
}
|
|
@media (min-width: 640px) and (min-height: 640px) {
|
|
#root > [data-placeholder] > [data-rail="closed"] { display: none; }
|
|
}
|
|
html[data-took-over] #root > [data-placeholder]:not([data-revealed]) { display: none !important; }
|
|
#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; }
|
|
[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; }
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
<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":"#0f1b2d","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#f3f5f2","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#f3f5f2","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#f3f5f2","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#f3f5f2","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#f3f5f2","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#0f1b2d","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#f3f5f2","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#f3f5f2","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]},{"transition":"fade","bg":"#2bb3a3","steps":[{"hidden":[],"events":[],"auto":false}],"embeds":[]}]}</script>
|
|
<script>(function fan(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(le){return le.querySelector(".deck-scaler > *")||le}),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,A=0,h=null,b=[],v=!1,w=!0,y=-1,S=!1;function x(){return typeof window.matchMedia==="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}function C(le){return e.slides[le]?e.slides[le].steps.length-1:0}function E(le,be){return c[le].querySelector('[data-frame-id="'+be.replace(/["\\]/g,"")+'"]')}function I(le){return Array.prototype.slice.call(c[le].querySelectorAll("[data-frame-id]"))}function N(le){try{window.history.replaceState(null,"","#"+String(le+1))}catch(be){}}function k(le){if(l===null)return;l.textContent=String(le+1)+" / "+String(a),l.setAttribute("data-on",""),clearTimeout(g),g=window.setTimeout(function(){if(l!==null)l.removeAttribute("data-on")},1600)}function T(){var le=n.scrollTop,be=0;for(var j=1;j<a;j++)if(Math.abs(s[j].offsetTop-le)<Math.abs(s[be].offsetTop-le))be=j;return be}function R(le){le=Math.max(0,Math.min(a-1,le)),u={index:le,step:0},s[le].scrollIntoView(),N(le),k(le)}function B(le,be){var j=e.slides[le],ue=j&&j.steps[be]?j.steps[be].hidden:[],ce=I(le);for(var pe=0;pe<ce.length;pe++){var ve=ce[pe].getAttribute("data-frame-id")||"";if(ue.indexOf(ve)>=0)ce[pe].setAttribute("data-build-hidden","");else ce[pe].removeAttribute("data-build-hidden")}}function M(){for(var le=0;le<p.length;le++)p[le].cancel();p=[]}function P(le,be){var j=e.slides[le],ue=j&&j.steps[be]?j.steps[be].events:[];for(var ce=0;ce<ue.length;ce++){var pe=ue[ce],ve=E(le,pe.id),Re=e.effects[pe.effect];if(ve===null||Re===void 0||typeof ve.animate!=="function")continue;var Le=ve.style.transform!==""&&ve.style.transform!=="none"?ve.style.transform:"",Oe={transform:(Le+" "+Re.transform).trim()||"none",opacity:0},We={transform:Le===""?"none":Le,opacity:1};if(ve.removeAttribute("data-build-hidden"),pe.dir==="in")p.push(ve.animate([Oe,We],{duration:e.buildMs,easing:Re.easing,fill:"none"}));else{var je=ve.animate([We,Oe],{duration:e.buildMs,easing:e.exitEasing,fill:"none"});(function(Et,wt){wt.finished.then(function(){Et.setAttribute("data-build-hidden","")},function(){})})(ve,je),p.push(je)}}}var F="position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:transparent",D="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 L(le,be){if(le.iframe.parentNode!==null)le.iframe.parentNode.removeChild(le.iframe);le.host.setAttribute("data-embed-dead","");var j=t.createElement("div");j.setAttribute("data-embed-dead-label",""),j.setAttribute("style",D),j.textContent=be,le.host.appendChild(j)}function W(le){v=!0;var be=b;b=[];for(var j=0;j<be.length;j++)L(be[j],le)}function G(){var le=b;b=[];for(var be=0;be<le.length;be++){if(le[be].iframe.parentNode!==null)le[be].iframe.parentNode.removeChild(le[be].iframe);var j=le[be].host.querySelector("[data-embed-under]");if(j!==null)j.removeAttribute("data-embed-under")}}function Q(le){if(!e.live||v)return;var be=e.slides[le]?e.slides[le].embeds:[];for(var j=0;j<be.length;j++){var ue=E(le,be[j].id);if(ue===null||ue.hasAttribute("data-embed-dead"))continue;var ce=ue.firstElementChild;if(ce!==null)ce.setAttribute("data-embed-under",""),ce.setAttribute("data-embed-pic","");var pe=t.createElement("iframe");pe.setAttribute("sandbox","allow-scripts"),pe.setAttribute("inert",""),pe.setAttribute("tabindex","-1"),pe.setAttribute("referrerpolicy","no-referrer"),pe.setAttribute("title","Embedded web content (sandboxed)"),pe.setAttribute("style",F);var ve={iframe:pe,host:ue};(function(Re){var Le=0;Re.iframe.addEventListener("load",function(){if(Le+=1,Le>1)b=b.filter(function(Oe){return Oe!==Re}),L(Re,"Web embed disabled. It navigated away from its content.")})})(ve),pe.srcdoc=be[j].srcdoc,b.push(ve),ue.appendChild(pe)}}function H(){S=!0}window.addEventListener("beforeunload",H),window.addEventListener("pagehide",H),window.addEventListener("pageshow",function(le){if(S=!1,le.persisted&&f)G(),Q(u.index)}),window.addEventListener("message",function(le){if(S)return;var be=null;for(var j=0;j<b.length;j++)if(le.source!==null&&b[j].iframe.contentWindow===le.source)be=b[j];if(be===null||le.origin!=="null")return;var ue=le.data;if(typeof ue!=="object"||ue===null)return;if(ue.type==="appifact-embed:navigating")b=b.filter(function(ce){return ce!==be}),L(be,"Web embed disabled. It navigated away from its content.");else if(ue.type==="appifact-embed:ready"&&be.iframe.contentWindow!==null)be.iframe.contentWindow.postMessage({type:"appifact-embed:update",t:0,playing:!1,selected:!1,props:{}},"*")}),window.addEventListener("blur",function(){window.setTimeout(function(){var le=t.activeElement;if(b.length>0&&(t.hasFocus()||le!==null&&le.tagName==="IFRAME")){if(W("Web embed disabled. It tried to take keyboard focus."),le!==null&&le.tagName==="IFRAME")le.blur();window.focus()}},0)});function z(le,be){var j=le.getBoundingClientRect();return{x:(j.left-be.left)/r,y:(j.top-be.top)/r,w:j.width/r,h:j.height/r}}function X(le){return{left:String(le.x)+"px",top:String(le.y)+"px",right:"auto",bottom:"auto",width:String(le.w)+"px",height:String(le.h)+"px",transform:"none"}}function V(le,be){return Math.abs(le.x-be.x)<0.5&&Math.abs(le.y-be.y)<0.5&&Math.abs(le.w-be.w)<0.5&&Math.abs(le.h-be.h)<0.5}function Y(le){return(e.slides[le]?e.slides[le].embeds:[]).map(function(be){return be.id})}function U(le,be,j,ue){var ce=s[j.index],pe=c[j.index],ve=c[ue.index],Re=e.transMs[le]||0,Le={duration:Re,easing:e.transEase,fill:"forwards"},Oe=[],We=null,je=[],Et=pe.style.background;ce.removeAttribute("data-off"),ce.setAttribute("data-leaving","");var wt=e.slides[j.index].steps[j.step]?e.slides[j.index].steps[j.step].hidden:[],on=e.slides[ue.index].steps[ue.step]?e.slides[ue.index].steps[ue.step].hidden:[],ft=Y(j.index),mt=I(j.index);for(var Ke=0;Ke<mt.length;Ke++){var ze=mt[Ke].getAttribute("data-frame-id")||"";if(ft.indexOf(ze)>=0)mt[Ke].setAttribute("data-magic-hidden",""),je.push(mt[Ke])}var Ze=typeof ce.animate==="function";if(Ze&&le==="fade")Oe.push(ce.animate([{opacity:1},{opacity:0}],Le));else if(Ze&&le==="push"){var vt=be?-e.w:e.w;Oe.push(pe.animate([{transform:"translateX(0px)"},{transform:"translateX("+String(-vt)+"px)"}],Le)),Oe.push(ve.animate([{transform:"translateX("+String(vt)+"px)"},{transform:"translateX(0px)"}],Le))}else if(Ze){if(pe.style.background="transparent",e.slides[j.index].bg!==e.slides[ue.index].bg)We=t.createElement("div"),We.setAttribute("style","position:absolute;inset:0;background:"+e.slides[j.index].bg),ve.insertBefore(We,ve.firstChild),Oe.push(We.animate([{opacity:1},{opacity:0}],Le));var Lt=pe.getBoundingClientRect(),Vt=ve.getBoundingClientRect(),ln=[];for(var Jt=0;Jt<mt.length;Jt++){var $n=mt[Jt],Wn=$n.getAttribute("data-frame-id")||"";if(wt.indexOf(Wn)>=0)continue;var zn=on.indexOf(Wn)>=0?null:E(ue.index,Wn);if(zn===null){if(ft.indexOf(Wn)<0)Oe.push($n.animate([{opacity:1},{opacity:0}],Le));continue}ln.push(Wn),$n.setAttribute("data-magic-hidden",""),je.push($n);var Qn=z($n,Lt),gr=z(zn,Vt);if(!V(Qn,gr))Oe.push(zn.animate([X(Qn),X(gr)],Le))}var Dr=I(ue.index);for(var sr=0;sr<Dr.length;sr++){var wo=Dr[sr].getAttribute("data-frame-id")||"";if(ln.indexOf(wo)>=0||on.indexOf(wo)>=0)continue;Oe.push(Dr[sr].animate([{opacity:0},{opacity:1}],Le))}}var En=!1;function Ao(){if(En)return;En=!0,clearTimeout(gt),h=null,ce.setAttribute("data-off",""),ce.removeAttribute("data-leaving");for(var Ye=0;Ye<Oe.length;Ye++)Oe[Ye].cancel();if(We!==null&&We.parentNode!==null)We.parentNode.removeChild(We);pe.style.background=Et;for(var Ve=0;Ve<je.length;Ve++)je[Ve].removeAttribute("data-magic-hidden")}var gt=window.setTimeout(Ao,Re+250);Promise.all(Oe.map(function(Ye){return Ye.finished.then(function(){return null},function(){return null})})).then(Ao),h={cleanup:Ao}}function ae(le,be){var j=u;if(u=le,M(),clearTimeout(m),le.index!==j.index){G();for(var ue=0;ue<a;ue++)if(ue===le.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(j.index>=0&&j.index<a)B(j.index,j.step);if(B(le.index,le.step),be.kind!==void 0&&be.from!==void 0)U(be.kind,be.back===!0,be.from,le);if(Q(le.index),j.index>=0)N(le.index);k(le.index)}else if(B(le.index,le.step),le.step===j.step+1&&!x())P(le.index,le.step);var ce=le.index===j.index&&le.step<j.step,pe=le.step+1,ve=e.slides[le.index];if(!ce&&ve!==void 0&&pe<=C(le.index)&&ve.steps[pe].auto){var Re=le.index===j.index?e.buildMs+140:600,Le=le;m=window.setTimeout(function(){if(f&&u.index===Le.index&&u.step===Le.step)ae({index:Le.index,step:pe},{})},Re)}}function re(le){if(!f){R(T()+(le>0?1:-1));return}if(h!==null)h.cleanup();var be=u;if(le>0){if(be.step<C(be.index)){ae({index:be.index,step:be.step+1},{});return}if(be.index>=a-1)return;var j=e.slides[be.index]?e.slides[be.index].transition:void 0;ae({index:be.index+1,step:0},j!==void 0&&!x()?{kind:j,back:!1,from:be}:{})}else{if(be.step>0){ae({index:be.index,step:be.step-1},{});return}if(be.index<=0)return;var ue=e.slides[be.index-1]?e.slides[be.index-1].transition:void 0;ae({index:be.index-1,step:C(be.index-1)},ue!==void 0&&!x()?{kind:ue,back:!0,from:be}:{})}}function O(le){if(le=Math.max(0,Math.min(a-1,le)),!f){R(le);return}if(h!==null)h.cleanup();if(u.index===le&&u.step===0){k(le);return}ae({index:le,step:0},{})}function J(le){if(le===f)return;if(f=le,le){var be=w||u.index<0?T():u.index;n.classList.add("deck-stage"),n.scrollTop=0,u={index:-1,step:0},ae({index:be,step:0},{})}else{if(h!==null)h.cleanup();M(),clearTimeout(m),G();for(var j=0;j<a;j++){s[j].removeAttribute("data-off"),s[j].removeAttribute("aria-hidden");var ue=I(j);for(var ce=0;ce<ue.length;ce++)ue[ce].removeAttribute("data-build-hidden")}for(var pe=0;pe<a;pe++)s[pe].removeAttribute("inert");n.classList.remove("deck-stage"),s[Math.max(0,u.index)].scrollIntoView(),y=n.scrollTop,w=!1}}function ne(){o(),J(d===null||!d.matches)}window.addEventListener("resize",ne),window.addEventListener("beforeprint",function(){G()}),window.addEventListener("afterprint",function(){if(f)Q(u.index)}),window.addEventListener("scroll",function(){if(f)return;var le=T();if(Math.abs(n.scrollTop-y)>2)w=!0;k(le),clearTimeout(A),A=window.setTimeout(function(){N(le)},150)},{passive:!0});var K=0,te=0,de=!1;window.addEventListener("wheel",function(le){if(le.ctrlKey||!f||Math.abs(le.deltaX)>Math.abs(le.deltaY))return;if(le.preventDefault(),clearTimeout(te),te=window.setTimeout(function(){de=!1,K=0},250),de)return;if(K+=le.deltaMode?le.deltaY>0?60:le.deltaY<0?-60:0:le.deltaY,Math.abs(K)>=60)de=!0,re(K>0?1:-1),K=0},{passive:!1}),t.addEventListener("click",function(le){var be=le.target,j=t.getSelection();if(le.button!==0||!f||be===null||be.closest("a,[data-text-path],[data-cell]")!==null||j!==null&&String(j)!=="")return;re(le.clientX<n.clientWidth/2?-1:1)});var Te=0,Se=0,he=0;t.addEventListener("touchstart",function(le){if(le.touches.length!==1){he=0;return}Te=le.touches[0].clientX,Se=le.touches[0].clientY,he=Date.now()},{passive:!0}),t.addEventListener("touchcancel",function(){he=0}),t.addEventListener("touchend",function(le){if(!f||le.changedTouches.length!==1)return;var be=le.changedTouches[0].clientX-Te,j=le.changedTouches[0].clientY-Se;if(Date.now()-he>700||Math.abs(be)<40||Math.abs(be)<Math.abs(j)*1.2)return;re(be<0?1:-1)},{passive:!0}),window.addEventListener("keydown",function(le){if(le.metaKey||le.ctrlKey||le.altKey)return;var be=le.key;if(be===" "&&le.shiftKey||be==="ArrowLeft"||be==="ArrowUp"||be==="PageUp")le.preventDefault(),re(-1);else if(be==="ArrowRight"||be==="ArrowDown"||be==="PageDown"||be===" ")le.preventDefault(),re(1);else if(be==="Home")le.preventDefault(),O(0);else if(be==="End")le.preventDefault(),O(a-1);else if(/^[1-9]$/.test(be)&&Number(be)<=a)O(Number(be)-1);else if(be==="f"||be==="F"){if(t.fullscreenElement)t.exitFullscreen();else if(n.requestFullscreen)n.requestFullscreen()}}),window.addEventListener("hashchange",function(){var le=/^#(\d+)$/.exec(window.location.hash);if(le!==null&&Number(le[1])-1!==u.index)O(Number(le[1])-1)});var xe=/^#(\d+)$/.exec(window.location.hash),Ae=xe!==null?Math.max(0,Math.min(a-1,Number(xe[1])-1)):0;if(ne(),f)if(Ae!==u.index)O(Ae);else k(Ae);else if(xe!==null)R(Ae);else k(T())}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, "Segoe UI", Roboto, "PingFang SC", "PingFang TC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif;color:rgb(11, 11, 11)">
|
|
<section class="deck-slide" id="1" aria-roledescription="slide" aria-label="Slide 1 of 10" data-document-role="page" data-label="개발자는 코딩을 해야 하나?" data-speaker-notes="지금까지 본 네 편은 비개발자가 AI로 무언가를 만들어 낸 이야기였습니다. 오늘은 반대편, 수십 년 코딩을 해 온 개발자의 시선입니다. 클린코드로 잘 알려진 백명석 님이 쓴 글로, AI 에이전트가 코딩을 맡게 된 지금 개발자는 무엇을 해야 하는가를 다룹니다. 결론을 먼저 말하면, 코드 한 줄 한 줄에서는 손을 떼되 설계와 명세, 그리고 AI를 묶어 둘 장벽은 사람이 쥐어야 한다는 것입니다. 바이브코딩으로 창업하려는 수강생에게는 '프로토타입 다음'을 보여 주는 글입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(15, 27, 45); 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: 24px; 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(43, 179, 163);"></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 128px 160px; box-sizing: border-box;"><div data-text-path="0" data-node-path="0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.4; color: rgb(43, 179, 163); 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="1" data-node-path="1" role="heading" aria-level="1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 120px; font-weight: 900; line-height: 1.15; color: rgb(243, 245, 242); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 400; line-height: 1.4; color: rgb(184, 199, 204); 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-frame-id="e2-1ftwghs" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(126, 143, 160); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」, 브런치 @cleancode (2026.10.27)</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="2" aria-roledescription="slide" aria-label="Slide 2 of 10" data-document-role="page" data-label="코딩은 개발 일정의 6분의 1이었다" data-speaker-notes="글은 오래된 숫자 하나로 시작합니다. 50년 전 브룩스는 소프트웨어 일정에서 코딩이 6분의 1밖에 안 된다고 했습니다. 계획이 3분의 1, 테스트가 절반입니다. 즉 개발자의 일은 원래부터 코드 타이핑보다 훨씬 넓었고, AI는 그중 가장 작은 조각을 가져간 것입니다. 최근 코딩을 안 하게 돼서 상실감을 느끼는 개발자들이 많다는 이야기로 글이 시작되는데, 이 숫자가 그 불안을 조금 다르게 보게 해 줍니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(243, 245, 242); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1o4db9d" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 56px; 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">코딩은 개발 일정의 6분의 1이었다</div></div><div data-node-path="1" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px;"><div data-text-path="1.0" data-node-path="1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.4; color: rgb(62, 74, 87); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">프레드 브룩스가 제시한 개발 일정 배분 (『The Mythical Man-Month』, 1975)</div><div data-node-path="1.1" style="display: flex; flex-direction: row; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px;"><div data-node-path="1.1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px; flex-grow: 4; flex-basis: 0%; background-color: rgb(143, 163, 176); padding: 32px; border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 900; line-height: 1.4; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">1/3</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.4; color: rgb(15, 27, 45); 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.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px; flex-grow: 2; flex-basis: 0%; background-color: rgb(181, 84, 26); padding: 32px; border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 900; line-height: 1.4; color: rgb(251, 251, 248); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">1/6</div><div data-text-path="1.1.1.1" data-node-path="1.1.1.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.4; color: rgb(251, 251, 248); 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.2" style="display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0px; min-height: 0px; flex-grow: 3; flex-basis: 0%; background-color: rgb(43, 179, 163); padding: 32px; border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.1.2.0" data-node-path="1.1.2.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 900; line-height: 1.4; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">1/4</div><div data-text-path="1.1.2.1" data-node-path="1.1.2.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.4; color: rgb(15, 27, 45); 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: 8px; min-width: 0px; min-height: 0px; flex-grow: 3; flex-basis: 0%; background-color: rgb(19, 122, 112); padding: 32px; border-radius: 12px; box-sizing: border-box;"><div data-text-path="1.1.3.0" data-node-path="1.1.3.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 900; line-height: 1.4; color: rgb(251, 251, 248); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">1/4</div><div data-text-path="1.1.3.1" data-node-path="1.1.3.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.4; color: rgb(251, 251, 248); 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><div data-node-path="2" style="display: flex; flex-direction: row; align-items: stretch; gap: 32px; 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: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(251, 251, 248); padding: 36px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.0.0" data-node-path="2.0.0" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(15, 27, 45); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(62, 74, 87); 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="2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(251, 251, 248); padding: 36px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 16px; box-sizing: border-box;"><div data-text-path="2.1.0" data-node-path="2.1.0" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">그 1/6도 줄어 왔다</div><div data-text-path="2.1.1" data-node-path="2.1.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(62, 74, 87); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">IDE 자동 완성, 이제는 AI 에이전트가 코딩을 맡는다</div></div></div></div></div><div data-frame-id="e1-1o4db9d" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10) · Frederick P. Brooks, 『The Mythical Man-Month』 (1975)</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="3" aria-roledescription="slide" aria-label="Slide 3 of 10" data-document-role="page" data-label="할 줄은 알아야 하고, 직접 칠 필요는 없다" data-speaker-notes="이 슬라이드가 글의 중심 논리입니다. '코딩을 해야 하나'라는 질문을 둘로 나눕니다. 할 줄은 알아야 한다, 그러나 직접 칠 필요는 없다. 예시가 우리 수업과 바로 맞닿아 있습니다. 첫날 설치한 tmux의 pane 사이 메시지 전달을 알고 있으면, AI에게 에이전트 간 메시징을 만들어 달라고 정확히 요청할 수 있습니다. 모르면 상상력으로 때워야 합니다. 그리고 하단 문장은 앞의 성공 사례들과 균형을 잡아 줍니다. 주말에 만든 프로토타입과 배포·운영 가능한 제품 사이에는 엔지니어링이라는 큰 간격이 있습니다. 복근 앱이 두 달 만든 첫 버전을 버린 이야기를 떠올리게 해 주세요."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(243, 245, 242); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1w9ohx" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 56px; 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(15, 27, 45); 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: 32px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(251, 251, 248); padding: 48px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.4; color: rgb(62, 74, 87); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 96px; font-weight: 900; line-height: 1.1; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(62, 74, 87); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">개념을 알아야 AI에게 정확히 시킬 수 있다. tmux의 pane 간 메시지 전달을 알면 “에이전트끼리 메시지를 주고받게 해 줘”라고 요청할 수 있다</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%; background-color: rgb(15, 27, 45); padding: 48px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.4; color: rgb(184, 199, 204); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 96px; font-weight: 900; line-height: 1.1; color: rgb(242, 153, 74); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); 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-text-path="2" data-node-path="2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.4; color: rgb(15, 27, 45); 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="#b5541a" style="color: rgb(181, 84, 26); -webkit-text-fill-color: currentcolor;">운영 가능한 제품으로 만드는 데는 약 9배</font>의 비용이 든다 (브룩스)</div></div></div><div data-frame-id="e1-1w9ohx" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10) · 마틴 파울러, 「Is Design Dead?」</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="4" aria-roledescription="slide" aria-label="Slide 4 of 10" data-document-role="page" data-label="우리는 늘 아래 단계를 보지 않게 됐다" data-speaker-notes="글의 두 번째 근거는 역사입니다. 종이테이프에 구멍을 뚫던 시절엔 실수를 막으려고 눈으로 일일이 검사했습니다. 어셈블러가 나오자 테이프를 안 보게 됐고, 고급 언어가 나오자 처음엔 컴파일러를 못 믿다가 결국 어셈블리를 안 보게 됐습니다. TypeScript를 쓰면 생성된 JavaScript는 안 봅니다. 엉클 밥은 이제 사람이 쓰는 텍스트 명세가 소스 코드이고, AI가 만든 Java나 Ruby는 컴파일러 출력과 같다고 말합니다. 글의 핵심 관찰은 단계가 바뀌어도 바뀐 건 의도를 표현하는 수단 하나뿐이라는 것입니다. 우리가 이번 과정에서 프롬프트와 명세를 강조하는 이유이기도 합니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(243, 245, 242); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-3rvl5" 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(15, 27, 45); 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: flex-end; gap: 16px; 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; flex-grow: 1; flex-basis: 0%; background-color: rgb(227, 232, 230); padding: 28px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(107, 118, 130); 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.1" data-node-path="1.0.1" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(15, 27, 45); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(62, 74, 87); 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: 12px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-color: rgb(210, 221, 218); padding: 28px 28px 64px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(107, 118, 130); 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.1.1" data-node-path="1.1.1" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(15, 27, 45); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(62, 74, 87); 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; flex-grow: 1; flex-basis: 0%; background-color: rgb(185, 211, 206); padding: 28px 28px 104px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(62, 74, 87); 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.2.1" data-node-path="1.2.1" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(15, 27, 45); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(42, 53, 66); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">FORTRAN, COBOL, C</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; flex-grow: 1; flex-basis: 0%; background-color: rgb(127, 201, 190); padding: 28px 28px 144px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.3.0" data-node-path="1.3.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">4단계</div><div data-text-path="1.3.1" data-node-path="1.3.1" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(15, 27, 45); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">TypeScript → JS</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; flex-grow: 1; flex-basis: 0%; background-color: rgb(15, 27, 45); padding: 28px 28px 184px; border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.4.0" data-node-path="1.4.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(43, 179, 163); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">5단계 · 지금</div><div data-text-path="1.4.1" data-node-path="1.4.1" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(243, 245, 242); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(184, 199, 204); 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-text-path="2" data-node-path="2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.4; color: rgb(15, 27, 45); 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="#137a70" style="color: rgb(19, 122, 112); -webkit-text-fill-color: currentcolor;">의도를 표현하는 수단</font>이다. 구멍 → 어셈블리 → C → 시나리오</div></div></div><div data-frame-id="e1-3rvl5" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10) · 5단계는 엉클 밥(Robert C. Martin)의 주장으로 소개됨</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="5" aria-roledescription="slide" aria-label="Slide 5 of 10" data-document-role="page" data-label="즐거움은 타이핑이 아니라 풀이에 있었다" data-speaker-notes="저자도 코딩을 좋아합니다. 튜토리얼을 따라 치고, 설계한 대로 돌아가는 걸 보면 기쁘고, 집중해서 코딩하는 게 스트레스 해소이기도 하다고 말합니다. 그런데 솔직한 고백이 이어집니다. 최근 몇 년은 구현을 끝까지 하는 게 귀찮았다고요. 초기 방향을 잡고 실험하는 건 재미있지만 뻔한 구현은 지루했다는 겁니다. 즉 즐거움은 만드는 손에 있던 게 아니라 문제를 이해하고 쪼개고 푸는 머리에 있었습니다. 그래서 구현은 AI에게 넘기되, 조건이 두 개 있습니다. 필요하면 이해할 수 있어야 하고, 검증이 가능해야 합니다. 이 두 번째 조건이 뒤의 '장벽' 이야기로 이어집니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(243, 245, 242); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1o5uayl" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 56px; 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(15, 27, 45); 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: center; 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; flex-grow: 1; flex-basis: 0%; background-color: rgb(251, 251, 248); padding: 44px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(107, 118, 130); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; color: rgb(62, 74, 87); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(62, 74, 87); 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.1" 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="#f2994a" stroke-linejoin="round"></polygon></svg><div data-node-path="1.2" 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(15, 27, 45); padding: 44px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(43, 179, 163); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; color: rgb(243, 245, 242); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); 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: 16px; min-width: 0px; min-height: 0px; background-color: rgb(251, 251, 248); padding: 40px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 20px; box-sizing: border-box;"><div data-text-path="2.0" data-node-path="2.0" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.2; color: rgb(15, 27, 45); 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-node-path="2.1" style="display: flex; flex-direction: row; align-items: stretch; gap: 48px; min-width: 0px; min-height: 0px;"><div data-text-path="2.1.0" data-node-path="2.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(42, 53, 66); 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;"><font color="#137a70" style="color: rgb(19, 122, 112); -webkit-text-fill-color: currentcolor;"><b>1.</b></font> 필요할 때 그 코드를 이해할 수 있을 것</div><div data-text-path="2.1.1" data-node-path="2.1.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(42, 53, 66); 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;"><font color="#137a70" style="color: rgb(19, 122, 112); -webkit-text-fill-color: currentcolor;"><b>2.</b></font> 기능 검증에 문제가 없을 것</div></div></div></div></div><div data-frame-id="e1-1o5uayl" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10) · 브룩스, 『The Mythical Man-Month』 1장 “The Tar Pit”</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="6" aria-roledescription="slide" aria-label="Slide 6 of 10" data-document-role="page" data-label="줄은 놓고, 코드의 형태는 쥔다" data-speaker-notes="엉클 밥은 "코드에서 손을 떼고 에이전트를 관리하라"고 말합니다. 저자는 여기서 손을 떼는 대상을 정확히 짚습니다. 문법, 즉 함수 바디 안의 줄들입니다. 대신 설계와 모듈 구조, 함수의 이름과 크기와 역할, 호출 관계는 계속 지켜야 하고, 저자는 이것을 '코드의 형태'라고 부릅니다. 줄을 읽지 않아도 익숙한 형태가 유지되면 IDE의 구조 보기만으로 코드를 이해할 수 있습니다. 글은 세 가지 태도를 비교합니다. AI가 짠 코드를 AI가 쓴 테스트로 돌렸으니 괜찮다고 믿는 쪽, AI 코드를 전부 읽고 이해하려는 쪽, 그리고 저자의 제3의 길인 '줄에서는 손을 떼고 형태를 보며 검증은 장벽에 맡기는' 방식입니다. 하단의 지혜·야망·통찰은 AI를 관리하는 사람의 무기로 저자가 정리한 것입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(243, 245, 242); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1898iqa" 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(15, 27, 45); 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: 32px; 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: 560px; min-height: 0px; max-width: 560px; background-color: rgb(251, 251, 248); padding: 44px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(107, 118, 130); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; color: rgb(62, 74, 87); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(62, 74, 87); 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.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(15, 27, 45); padding: 44px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(43, 179, 163); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">계속 지켜야 하는 것 · 코드의 형태(shape)</div><div data-text-path="1.1.1" data-node-path="1.1.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.6; color: rgb(220, 230, 232); 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>함수와 컴포넌트 사이의 호출 관계</li><li>생성자와 함수의 인자</li></ul></div></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-text-path="2.0" data-node-path="2.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.4; color: rgb(15, 27, 45); 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%; background-color: rgb(251, 251, 248); padding: 24px 32px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#137a70" style="color: rgb(19, 122, 112); -webkit-text-fill-color: currentcolor;"><b>지혜</b></font> 하지 말아야 할 것을 아는 경험</div><div data-text-path="2.1" data-node-path="2.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.4; color: rgb(15, 27, 45); 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%; background-color: rgb(251, 251, 248); padding: 24px 32px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#137a70" style="color: rgb(19, 122, 112); -webkit-text-fill-color: currentcolor;"><b>야망</b></font> 잘하고 싶은 내적 동기</div><div data-text-path="2.2" data-node-path="2.2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.4; color: rgb(15, 27, 45); 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%; background-color: rgb(251, 251, 248); padding: 24px 32px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 16px; overflow-y: visible; box-sizing: border-box;"><font color="#137a70" style="color: rgb(19, 122, 112); -webkit-text-fill-color: currentcolor;"><b>통찰</b></font> 지식이 아닌 경험에서 온 판단</div></div></div></div><div data-frame-id="e1-1898iqa" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10) · 엉클 밥 “DISENGAGE FROM CODE! MANAGE THE AGENTS INSTEAD!” · 하단 세 가지는 저자가 정리한 사람의 강점</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="7" aria-roledescription="slide" aria-label="Slide 7 of 10" data-document-role="page" data-label="AI는 규칙은 어겨도 벽은 못 넘는다" data-speaker-notes="그렇다면 줄을 안 읽고 어떻게 AI를 믿을 수 있을까요? 엉클 밥의 답은 물리적 장벽입니다. 우리 수강생에게 특히 중요한 대목이 있습니다. 프롬프트나 CLAUDE.md에 적은 규칙은 장벽이 아니라는 것. AI는 그걸 지침으로 받아들여 자주 어기고, 대화가 길어져 컨텍스트가 압축되면 아예 잊어버립니다. 진짜 장벽은 도구입니다. 테스트가 실패하면 다음으로 못 넘어가고, 사람이 소유한 인수 테스트는 AI가 못 고치게 막습니다. 인수 테스트가 왜 중요한지는 노트를 이어서: 에이전트는 단위 테스트를 통과시키려고 테스트 자체를 고치기도 합니다. 그래서 엉클 밥은 Given-When-Then 시나리오를 프로젝트의 헌법으로 두고, 에이전트가 손대지 못하게 하며, 파서로 자동 실행되는 테스트로 바꿔 돌립니다. 데이브 팔리가 말해 온 '실행 가능한 명세'와 같은 생각입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(15, 27, 45); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-h1f2jk" 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(43, 179, 163); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(243, 245, 242); 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" data-node-path="1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">프롬프트나 CLAUDE.md의 규칙은 ‘지침’으로 취급돼 자주 어겨지고, 컨텍스트가 압축되면 빠진다</div><div data-node-path="2" style="display: grid; grid-template-columns: 36fr 64fr; width: 100%; box-sizing: border-box; min-width: 0px; min-height: 0px; align-self: flex-start; font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.4; color: rgb(220, 230, 232); background-color: rgb(22, 38, 61); border-width: 2px 1px 1px 2px; border-style: solid; border-color: rgba(250, 249, 245, 0.22) rgb(42, 61, 87) rgb(42, 61, 87) rgba(250, 249, 245, 0.22); border-radius: 16px;"><div data-cell="0.0" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(15, 27, 45); font-weight: 600; background: rgb(43, 179, 163);">물리적 장벽</div><div data-cell="0.1" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; color: rgb(15, 27, 45); font-weight: 600; background: rgb(43, 179, 163);">하는 일</div><div data-cell="1.0" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip;">단위 테스트 + 높은 커버리지</div><div data-cell="1.1" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip;">실패하면 통과할 때까지 다음 단계로 못 넘어감</div><div data-cell="2.0" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(28, 47, 72);">인수 테스트 (Gherkin)</div><div data-cell="2.1" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(28, 47, 72);">사람이 소유하는 명세. AI는 허가 없이 수정 불가</div><div data-cell="3.0" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip;">돌연변이 테스트</div><div data-cell="3.1" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip;">커버리지가 놓치는 assertion의 구멍을 찾아냄</div><div data-cell="4.0" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(28, 47, 72);">CRAP, 의존성 검사, lint</div><div data-cell="4.1" style="border-right: 2px solid rgba(250, 249, 245, 0.22); border-bottom: 2px solid rgba(250, 249, 245, 0.22); padding: 0.35em 0.6em; white-space: pre-wrap; overflow-wrap: break-word; min-width: 0px; box-sizing: content-box; min-height: 1lh; overflow-y: clip; background: rgb(28, 47, 72);">함수 크기, 의존 방향, 기본 품질을 측정</div></div></div></div><div data-frame-id="e1-h1f2jk" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(126, 143, 160); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10) · 엉클 밥, 「Clean AI: Agentic Discipline」 강의</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="8" aria-roledescription="slide" aria-label="Slide 8 of 10" data-document-role="page" data-label="에이전트 여섯이 두 시간, 남은 버그 열 개" data-speaker-notes="장벽이 있다고 사람이 빠져도 되는 건 아닙니다. 엉클 밥이 에이전트 여섯 개로 두 시간 동안 게임을 만들었는데 버그가 열 개쯤 남았습니다. 그중 다섯 개는 에이전트가 쓴 명세를 사람이 제대로 안 봐서 생겼고, 나머지는 에이전트가 화면을 보지도 게임을 해 보지도 않아서 무엇을 기대해야 하는지 몰랐기 때문입니다. 엉클 밥은 직접 플레이하며 찾았습니다. 또 하나, 에이전트는 컨텍스트를 많이 갖고 있으면 '이미 다 안다'고 가정하고 잘못 판단하기도 합니다. 지난 시간 AI 사업일지 제작기에서 본 '사람이 최종 승인한다'는 원칙과 같은 이야기입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(243, 245, 242); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1pkudm3" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 56px; 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(15, 27, 45); 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-node-path="1.0" style="display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; min-width: 520px; min-height: 0px; max-width: 520px;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 200px; font-weight: 900; line-height: 1; color: rgb(181, 84, 26); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">~10</div><div data-text-path="1.0.1" data-node-path="1.0.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(62, 74, 87); 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: 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: 12px; min-width: 0px; min-height: 0px; background-color: rgb(251, 251, 248); padding: 40px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.1.0.0" data-node-path="1.1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">약 5개 · 명세 검토 실패</div><div data-text-path="1.1.0.1" data-node-path="1.1.0.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(42, 53, 66); 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.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(251, 251, 248); padding: 40px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 16px; box-sizing: border-box;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(42, 53, 66); 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><div data-text-path="2" data-node-path="2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.35; color: rgb(15, 27, 45); 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="#137a70" style="color: rgb(19, 122, 112); -webkit-text-fill-color: currentcolor;">명세에 없는 기대는 사람만 안다</font></div></div></div><div data-frame-id="e1-1pkudm3" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10)에 소개된 엉클 밥의 사례</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="9" aria-roledescription="slide" aria-label="Slide 9 of 10" data-document-role="page" data-label="10분짜리 결과물과 두 시간짜리 결과물" data-speaker-notes="앞의 버그 열 개 이야기를 들으면 두 시간에 버그 열 개면 별로라고 생각할 수 있습니다. 저자의 비교가 여기서 나옵니다. 같은 일을 에이전트 하나에게 시켰으면 10분이면 끝났을 겁니다. 하지만 그 결과물엔 테스트도, 품질 점검도, 리팩터링도 없습니다. 두 시간짜리는 완벽하진 않아도 모든 측면에서 검증된 엔지니어링 결과물입니다. 10분은 실제로 해 본 숫자가 아니라 저자가 가정해서 든 비교라는 점도 짚어 주세요. 그래서 '개발을 잘한다'의 의미가 코드를 잘 쓰는 것에서 문제를 이해하고 쪼개고 팀을 돕는 것으로 바뀐다고 말합니다. 리더라면 특히 생산성과 경제성을 함께 봐야 한다는 말도 덧붙입니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(243, 245, 242); overflow: clip; contain: paint;" class="slide" data-canvas-width="1920" data-canvas-height="1080"><div data-frame-id="e0-1xgxm1k" style="position: absolute; inset: 0px; box-sizing: border-box;"><div data-node-path="" style="display: flex; flex-direction: column; align-items: stretch; gap: 56px; 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(19, 122, 112); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 700; line-height: 1.15; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">10분짜리 결과물과 두 시간짜리 결과물</div></div><div data-node-path="1" style="display: flex; flex-direction: row; align-items: stretch; gap: 32px; 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; flex-grow: 1; flex-basis: 0%; background-color: rgb(251, 251, 248); padding: 48px; border-width: 1px; border-style: solid; border-color: rgb(220, 226, 223); border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(107, 118, 130); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 96px; font-weight: 900; line-height: 1.1; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">10분</div><div data-text-path="1.0.2" data-node-path="1.0.2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(62, 74, 87); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">빨리 끝난다. 하지만 단위 테스트, 인수 테스트, QA, 하드닝, 리팩터링이 없다</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(15, 27, 45); padding: 48px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(43, 179, 163); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 96px; font-weight: 900; line-height: 1.1; color: rgb(243, 245, 242); 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.1.2" data-node-path="1.1.2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); 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: row; align-items: center; gap: 32px; min-width: 0px; min-height: 0px;"><div data-text-path="2.0" data-node-path="2.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.5; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: max-content; min-height: 0px; overflow-y: visible;">예전: 코드를 잘 쓰는 사람</div><svg data-node-path="2.1" data-shape="arrow-right" viewBox="0 0 64 32" preserveAspectRatio="none" style="width: 64px; height: 32px; min-width: 0px; min-height: 0px; display: block;"><polygon points="0.00,9.60 38.40,9.60 38.40,3.20 64.00,16.00 38.40,28.80 38.40,22.40 0.00,22.40" fill="#f2994a" stroke-linejoin="round"></polygon></svg><div data-text-path="2.2" data-node-path="2.2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.4; color: rgb(15, 27, 45); 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><div data-frame-id="e1-1xgxm1k" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(107, 118, 130); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10) · 10분은 저자가 단일 에이전트일 때를 가정해 든 비교</div></div></div></div></div></section>
|
|
<section class="deck-slide" id="10" aria-roledescription="slide" aria-label="Slide 10 of 10" data-document-role="page" data-label="즐거움의 위치가 한 단계 올라간다" data-speaker-notes="저자의 결론은 이렇습니다. 종이 구멍과 어셈블리를 안 보게 된 것처럼, 이제 함수 안의 줄도 안 보게 됩니다. 하지만 코딩 능력이 필요 없어지는 게 아니라, 설계와 이름 짓기와 구조와 문제 해결은 그대로 남고, 의도를 명세로 쓰고 장벽을 도구로 세우는 일이 더해집니다. 코딩은 여전히 즐겁고, 즐거움의 위치가 한 단계 올라갈 뿐이라는 거죠. 네 가지 실천 항목은 글의 결론을 수업용으로 정리한 것입니다. 과제 연결 제안: 지금 구상 중인 rusync 과제에 바로 적용할 수 있습니다. rsync의 핵심 동작을 Given-When-Then 시나리오로 먼저 쓰게 하고, 그 인수 테스트는 AI가 수정하지 못하게 한 상태에서 구현을 맡기는 겁니다. 그리고 CLAUDE.md에 규칙을 적는 것과 테스트로 막는 것의 차이를 직접 체감하게 하면 좋습니다."><div class="deck-fit"><div class="deck-scaler"><div style="width: 1920px; height: 1080px; position: relative; background: rgb(43, 179, 163); 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; justify-content: space-between; 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: 16px; min-width: 0px; min-height: 0px;"><div data-text-path="0.0" data-node-path="0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: rgb(15, 27, 45); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 900; line-height: 1.15; color: rgb(15, 27, 45); 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; gap: 24px; min-width: 0px; min-height: 0px;"><div data-node-path="1.0" style="display: flex; flex-direction: row; align-items: flex-start; gap: 32px; min-width: 0px; min-height: 0px; background-color: rgb(15, 27, 45); padding: 40px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.0.0" data-node-path="1.0.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 900; line-height: 1; color: rgb(43, 179, 163); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: max-content; min-height: 0px; overflow-y: visible;">01</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;"><div data-text-path="1.0.1.0" data-node-path="1.0.1.0" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; color: rgb(243, 245, 242); 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.1" data-node-path="1.0.1.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); 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="1.1" style="display: flex; flex-direction: row; align-items: flex-start; gap: 32px; min-width: 0px; min-height: 0px; background-color: rgb(15, 27, 45); padding: 40px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.1.0" data-node-path="1.1.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 900; line-height: 1; color: rgb(43, 179, 163); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: max-content; min-height: 0px; overflow-y: visible;">02</div><div data-node-path="1.1.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="1.1.1.0" data-node-path="1.1.1.0" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; color: rgb(243, 245, 242); 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: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: 0px; min-height: 0px; overflow-y: visible;">Given-When-Then 시나리오를 먼저 쓰고, AI가 못 고치게 한다</div></div></div><div data-node-path="1.2" style="display: flex; flex-direction: row; align-items: flex-start; gap: 32px; min-width: 0px; min-height: 0px; background-color: rgb(15, 27, 45); padding: 40px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.2.0" data-node-path="1.2.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 900; line-height: 1; color: rgb(242, 153, 74); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: max-content; min-height: 0px; overflow-y: visible;">03</div><div data-node-path="1.2.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="1.2.1.0" data-node-path="1.2.1.0" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; color: rgb(243, 245, 242); 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.1" data-node-path="1.2.1.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); 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: row; align-items: flex-start; gap: 32px; min-width: 0px; min-height: 0px; background-color: rgb(15, 27, 45); padding: 40px; border-radius: 20px; box-sizing: border-box;"><div data-text-path="1.3.0" data-node-path="1.3.0" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 72px; font-weight: 900; line-height: 1; color: rgb(242, 153, 74); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; min-width: max-content; min-height: 0px; overflow-y: visible;">04</div><div data-node-path="1.3.1" style="display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px;"><div data-text-path="1.3.1.0" data-node-path="1.3.1.0" role="heading" aria-level="3" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.2; color: rgb(243, 245, 242); 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.1" data-node-path="1.3.1.1" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; color: rgb(184, 199, 204); 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><div data-text-path="2" data-node-path="2" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.35; color: rgb(15, 27, 45); 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-frame-id="e1-ev4z7o" style="position: absolute; left: 128px; width: 1664px; bottom: 64px; box-sizing: border-box;"><div data-text-path="" data-node-path="" style="font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.4; color: rgb(15, 27, 45); margin: 0px; white-space: pre-wrap; overflow-wrap: break-word; text-wrap-style: pretty; overflow-y: visible;">출처: 백명석, 「개발자는 코딩을 해야 하나?」 (2026.10)의 결론을 강의용 실천 항목으로 정리</div></div></div></div></div></section>
|
|
</main>
|
|
<div class="deck-pager" aria-hidden="true"></div>
|
|
</body>
|
|
</html>
|