2026-10-25 19:43:56 +09:00
<!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" >
2026-10-27 06:29:33 +09:00
< title > 사람 1명 + AI 직원 10명</ title >
2026-10-25 19:43:56 +09:00
< 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 : 0 px ; --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 : 0 px ; --cds-outset-y : 0 px ; --cds-scroll-fade-size : 28 px ; --cds-scroll-fade-top : 0 px ; --cds-scroll-fade-bottom : 0 px ; --cds-scroll-fade-left : 0 px ; --cds-scroll-fade-right : 0 px ; --cds-scroll-fade-top-raw : 0 px ; --cds-scroll-fade-bottom-raw : 0 px ; --cds-scroll-fade-left-raw : 0 px ; --cds-scroll-fade-right-raw : 0 px ; --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 : .25 rem ; --container-sm : 24 rem ; --container-md : 28 rem ; --container-3xl : 48 rem ; --text-xs : .75 rem ; --text-xs--line-height : calc ( 1 / .75 ); --text-sm : .875 rem ; --text-sm--line-height : calc ( 1.25 / .875 ); --text-base : 1 rem ; --text-base--line-height : calc ( 1.5 / 1 ); --text-3xl : 1.875 rem ; --text-3xl--line-height : calc ( 2.25 / 1.875 ); --tracking-wide : .025 em ; --leading-tight : 1.25 ; --leading-snug : 1.375 ; --leading-relaxed : 1.625 ; --radius-sm : .25 rem ; --radius-md : .375 rem ; --radius-lg : .5 rem ; --radius-xl : .75 rem ; --ease-in : cubic-bezier ( .4 , 0 , 1 , 1 ); --ease-in-out : cubic-bezier ( .4 , 0 , .2 , 1 ); --animate-pulse : pulse 2 s cubic-bezier ( .4 , 0 , .6 , 1 ) infinite ; --blur-md : 12 px ; --aspect-video : 16 / 9 ; --default-transition-duration : .15 s ; --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 : 0 px solid ; margin : 0 px ; padding : 0 px ; }
:: file-selector-button { box-sizing : border-box ; border : 0 px solid ; margin : 0 px ; padding : 0 px ; }
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 : 0 px ; color : inherit ; border-top-width : 1 px ; }
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 : 1 em ; }
small { font-size : 80 % ; }
sub , sup { vertical-align : baseline ; font-size : 75 % ; line-height : 0 ; position : relative ; }
sub { bottom : -0.25 em ; }
sup { top : -0.5 em ; }
table { text-indent : 0 px ; 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 : 0 px ; }
:: file-selector-button { font : inherit ; letter-spacing : inherit ; color : inherit ; opacity : 1 ; background-color : rgba ( 0 , 0 , 0 , 0 ); border-radius : 0 px ; }
: where ( select : is ([ multiple ], [ size ])) optgroup { font-weight : bolder ; }
: where ( select : is ([ multiple ], [ size ])) optgroup option { padding-inline-start : 20 px ; }
:: file-selector-button { margin-inline-end : 4 px ; }
:: 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 : 1 lh ; text-align : inherit ; }
:: -webkit-datetime-edit { display : inline-flex ; }
:: -webkit-datetime-edit-fields-wrapper { padding : 0 px ; }
:: -webkit-datetime-edit { padding-block : 0 px ; }
:: -webkit-datetime-edit-year-field { padding-block : 0 px ; }
:: -webkit-datetime-edit-month-field { padding-block : 0 px ; }
:: -webkit-datetime-edit-day-field { padding-block : 0 px ; }
:: -webkit-datetime-edit-hour-field { padding-block : 0 px ; }
:: -webkit-datetime-edit-minute-field { padding-block : 0 px ; }
:: -webkit-datetime-edit-second-field { padding-block : 0 px ; }
:: -webkit-datetime-edit-millisecond-field { padding-block : 0 px ; }
:: -webkit-datetime-edit-meridiem-field { padding-block : 0 px ; }
:: -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 : 0 px 0 px ; border : 0 px ; border-radius : 0 px ; outline : none ; padding : 0 px ; }
: 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 : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
: where ( . cds-root ) . cds-reset : focus , : where ( . cds-root ) . cds-reset : focus-visible { outline : none ; }
: where ( . cds-root ) . cds-reset : focus-visible { outline-offset : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
: where ( . cds-root ) . cds-text-link { color : var ( -- cds - text - accent ); --_text-link-line : currentColor ; border-radius : 2 px ; 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 , 60 ms ); 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 : 2 px ; box-shadow : var ( -- cds - focus - shadow , 0 0 0 2 px Highlight ); outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
: where ( . cds-root ) . cds-text-link-underline { text-underline-offset : 3 px ; 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 , 60 ms ); 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 : 2 px ; 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 , 60 ms ); transition-timing-function : var ( -- cds - ease-out ); text-underline-offset : 3 px ; 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 : 2 px ; box-shadow : var ( -- cds - focus - shadow , 0 0 0 2 px Highlight ); outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
: 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 : 0 px ; width : 1 px ; height : 1 px ; margin : -1 px ; padding : 0 px ; position : absolute ; overflow : hidden ; }
. not-sr-only { clip-path : none ; white-space : normal ; width : auto ; height : auto ; margin : 0 px ; padding : 0 px ; 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 : 0 px ; }
. inset-3 \ . 5 { inset : calc ( var ( -- spacing ) * 3.5 ); }
. inset- \ [ 0 \ . 5px \ ] { inset : 0.5 px ; }
. inset-x-0 { inset-inline : 0 px ; }
. inset-y-0 { inset-block : 0 px ; }
. inset-y-1 \ / 4 { inset-block : 25 % ; }
. inset-y-px { inset-block : 1 px ; }
. 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 ( -6 px - ( var ( -- cds - ring - outer , 0 px ) - var ( -- cds - ring - inner , 0 px )) / 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 ( -6 px - ( var ( -- cds - ring - outer , 0 px ) - var ( -- cds - ring - inner , 0 px )) / 2 ); }
. -top-0 \ . 5 { top : calc ( var ( -- spacing ) * -.5 ); }
. -top-1 \ . 5 { top : calc ( var ( -- spacing ) * -1.5 ); }
. top-0 { top : 0 px ; }
. 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 ( -6 px - ( var ( -- cds - ring - outer , 0 px ) - var ( -- cds - ring - inner , 0 px )) / 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 , 0 px ) + 1 rem ); }
. top-full { top : 100 % ; }
. top-px { top : 1 px ; }
. -right-0 \ . 5 { right : calc ( var ( -- spacing ) * -.5 ); }
. -right- \ [ 7px \ ] { right : -7 px ; }
. right-0 { right : 0 px ; }
. 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 : 1 px ; }
. bottom-0 { bottom : 0 px ; }
. 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 ( -6 px - ( var ( -- cds - ring - outer , 0 px ) - var ( -- cds - ring - inner , 0 px )) / 2 ); }
. bottom- \ [ calc \ ( 1 \ . 25rem \ + var \ ( --sl-safe-b \ , 0px \ ) \ ) \ ] { bottom : calc ( 1.25 rem + var ( -- sl - safe - b , 0 px )); }
. bottom-full { bottom : 100 % ; }
. bottom-px { bottom : 1 px ; }
. -left-1 \ . 5 { left : calc ( var ( -- spacing ) * -1.5 ); }
. left-0 { left : 0 px ; }
. 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 : 1 px ; }
. 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 : 40 rem !important ; }
}
@ media ( min-width : 48rem ) {
. \ ! container { max-width : 48 rem !important ; }
}
@ media ( min-width : 64rem ) {
. \ ! container { max-width : 64 rem !important ; }
}
@ media ( min-width : 80rem ) {
. \ ! container { max-width : 80 rem !important ; }
}
@ media ( min-width : 96rem ) {
. \ ! container { max-width : 96 rem !important ; }
}
. container { width : 100 % ; }
@ media ( min-width : 40rem ) {
. container { max-width : 40 rem ; }
}
@ media ( min-width : 48rem ) {
. container { max-width : 48 rem ; }
}
@ media ( min-width : 64rem ) {
. container { max-width : 64 rem ; }
}
@ media ( min-width : 80rem ) {
. container { max-width : 80 rem ; }
}
@ media ( min-width : 96rem ) {
. container { max-width : 96 rem ; }
}
. -m-2 { margin : calc ( var ( -- spacing ) * -2 ); }
. m-0 { margin : 0 px ; }
. 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 , .25 rem ) * -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.15 em ; }
. mx-auto { margin-inline : auto ; }
. mx-outset { margin-inline : calc ( var ( -- cds - outset - x , 0 px ) * -1 ); }
. -my-1 { margin-block : calc ( var ( -- spacing ) * -1 ); }
. -my- \ [ 0 \ . 125em \ ] { margin-block : -0.125 em ; }
. 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 (( 1 lh - var ( -- cds - h - control )) / 2 ); }
. my-auto { margin-block : auto ; }
. -ms-1 { margin-inline-start : calc ( var ( -- spacing ) * -1 ); }
. -ms- \ [ 2px \ ] { margin-inline-start : -2 px ; }
. -ms- \ [ 4px \ ] { margin-inline-start : -4 px ; }
. -ms- \ [ 6px \ ] { margin-inline-start : -6 px ; }
. ms-1 { margin-inline-start : var ( -- spacing ); }
. ms- \ [ 4px \ ] { margin-inline-start : 4 px ; }
. ms- \ [ 6px \ ] { margin-inline-start : 6 px ; }
. 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 , 0 px ) * -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 : -2 px ; }
. -me- \ [ 4px \ ] { margin-inline-end : -4 px ; }
. -me- \ [ calc \ ( var \ ( --cds-pad-md \ ) -2px \ ) \ ] { margin-inline-end : calc ( calc ( var ( -- cds - pad - md ) - 2 px ) * -1 ); }
. -me- \ [ calc \ ( var \ ( --cds-pad-md \ ) -6px \ ) \ ] { margin-inline-end : calc ( calc ( var ( -- cds - pad - md ) - 6 px ) * -1 ); }
. -me-pad-sm { margin-inline-end : calc ( var ( -- cds - pad - sm ) * -1 ); }
. -me-px { margin-inline-end : -1 px ; }
. me-0 \ . 5 { margin-inline-end : calc ( var ( -- spacing ) * .5 ); }
. me- \ [ 2px \ ] { margin-inline-end : 2 px ; }
. 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 ) - 1 em - 6 px ) / 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 ) - 1 em - 6 px ) / 2 - var ( -- cds - pad - md )); }
. me- \ [ calc \ ( 6px-var \ ( --cds-pad-md \ ) \ ) \ ] { margin-inline-end : calc ( 6 px - var ( -- cds - pad - md )); }
. me- \ [ calc \ ( 8px-var \ ( --cds-pad-md \ ) \ ) \ ] { margin-inline-end : calc ( 8 px - var ( -- cds - pad - md )); }
. me-outset { margin-inline-end : calc ( var ( -- cds - outset - x , 0 px ) * -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 , .25 rem ) * -1 ); }
. -mt-pad-sm { margin-top : calc ( var ( -- cds - pad - sm ) * -1 ); }
. -mt-px { margin-top : -1 px ; }
. 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 (( 1 lh - var ( -- cds - checkbox , 1 rem )) / 2 ); }
. mt- \ [ var \ ( --cds-menu-gutter \ , 0 \ . 25rem \ ) \ ] { margin-top : var ( -- cds - menu - gutter , .25 rem ); }
. mt- \ [ var \ ( --tb-overlay-h \ , 0px \ ) \ ] { margin-top : var ( -- tb - overlay - h , 0 px ); }
. mt-pad-lg { margin-top : var ( -- cds - pad - lg ); }
. mt-pad-md { margin-top : var ( -- cds - pad - md ); }
. mt-px { margin-top : 1 px ; }
. mt-xs { margin-top : var ( -- cds - gap - xs ); }
. -mr-1 { margin-right : calc ( var ( -- spacing ) * -1 ); }
. -mr- \ [ 5px \ ] { margin-right : -5 px ; }
. mr-0 \ . 5 { margin-right : calc ( var ( -- spacing ) * .5 ); }
. mr-1 \ . 5 { margin-right : calc ( var ( -- spacing ) * 1.5 ); }
. -mb-1 { margin-bottom : calc ( var ( -- spacing ) * -1 ); }
. mb-1 { margin-bottom : var ( -- spacing ); }
. mb-2 { margin-bottom : calc ( var ( -- spacing ) * 2 ); }
. mb-3 \ . 5 { margin-bottom : calc ( var ( -- spacing ) * 3.5 ); }
. mb- \ [ -1px \ ] { margin-bottom : -1 px ; }
. mb- \ [ 8 \ . 5px \ ] { margin-bottom : 8.5 px ; }
. mb- \ [ calc \ ( -1 \ * var \ ( --cs-bottom \ , 16px \ ) \ ) \ ] { margin-bottom : calc ( -1 * var ( -- cs - bottom , 16 px )); }
. mb-pad-md { margin-bottom : var ( -- cds - pad - md ); }
. mb-pad-xl { margin-bottom : var ( -- cds - pad - xl ); }
. -ml-1 { margin-left : calc ( var ( -- spacing ) * -1 ); }
. -ml- \ [ 5px \ ] { margin-left : -5 px ; }
. -ml-pad-md { margin-left : calc ( var ( -- cds - pad - md ) * -1 ); }
. ml-0 \ . 5 { margin-left : calc ( var ( -- spacing ) * .5 ); }
. ml-1 { margin-left : var ( -- spacing ); }
. ml-2 { margin-left : calc ( var ( -- spacing ) * 2 ); }
. ml-3 \ . 5 { margin-left : calc ( var ( -- spacing ) * 3.5 ); }
. ml-14 { margin-left : calc ( var ( -- spacing ) * 14 ); }
. ml-auto { margin-left : auto ; }
. ml-md { margin-left : var ( -- cds - gap - md ); }
. ml-xs { margin-left : var ( -- cds - gap - xs ); }
. box-border { box-sizing : border-box ; }
. line-clamp-2 { -webkit- line-clamp : 2 ; -webkit- box-orient : vertical ; display : -webkit- box ; overflow : hidden ; }
. line-clamp- \ [ var \ ( --cds-menu-description-lines \ ) \ ] { -webkit- line-clamp : var ( -- cds - menu - description - lines ); -webkit- box-orient : vertical ; display : -webkit- box ; overflow : hidden ; }
. \ ! hidden { display : none !important ; }
. \ [ display \ : inherit \ ] { display : inherit ; }
. block { display : block ; }
. block \ ! { display : block !important ; }
. contents { display : contents ; }
. flex { display : flex ; }
. flow-root { display : flow - root ; }
. grid { display : grid ; }
. hidden { display : none ; }
. hidden \ ! { display : none !important ; }
. inline { display : inline ; }
. inline-block { display : inline-block ; }
. inline-flex { display : inline-flex ; }
. inline-grid { display : inline - grid ; }
. inline-table { display : inline-table ; }
. list-item { display : list-item ; }
. table { display : table ; }
. table \ ! { display : table !important ; }
. table-caption { display : table-caption ; }
. table-cell { display : table-cell ; }
. table-column { display : table-column ; }
. table-column-group { display : table-column-group ; }
. table-footer-group { display : table-footer-group ; }
. table-header-group { display : table-header-group ; }
. table-row { display : table-row ; }
. table-row-group { display : table-row-group ; }
. aspect- \ [ 3 \ / 2 \ ] { aspect-ratio : 3 / 2 ; }
. aspect-square { aspect-ratio : 1 / 1 ; }
. aspect-video { aspect-ratio : var ( -- aspect - video ); }
. \ ! size- \ [ var \ ( --fhn \ ) \ ] { width : var ( -- fhn ) !important ; height : var ( -- fhn ) !important ; }
. size-0 { width : 0 px ; height : 0 px ; }
. 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 ( .375 rem * var ( -- cds - rem - scale , 1 )); height : calc ( .375 rem * var ( -- cds - rem - scale , 1 )); }
. size- \ [ calc \ ( var \ ( --cds-checkbox \ , 1rem \ ) -calc \ ( 0 \ . 625rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ) \ ] { width : calc ( var ( -- cds - checkbox , 1 rem ) - calc ( .625 rem * var ( -- cds - rem - scale , 1 ))); height : calc ( var ( -- cds - checkbox , 1 rem ) - calc ( .625 rem * var ( -- cds - rem - scale , 1 ))); }
. size- \ [ calc \ ( var \ ( --cds-switch-h \ , 1 \ . 25rem \ ) -4px \ ) \ ] { width : calc ( var ( -- cds - switch - h , 1.25 rem ) - 4 px ); height : calc ( var ( -- cds - switch - h , 1.25 rem ) - 4 px ); }
. 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 : 0 px ; }
. 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 : 1 em ; }
. h- \ [ 1lh \ ] { height : 1 lh ; }
. h- \ [ 3px \ ] { height : 3 px ; }
. h- \ [ 18px \ ] { height : 18 px ; }
. h- \ [ 30vh \ ] { height : 30 vh ; }
. h- \ [ 38px \ ] { height : 38 px ; }
. h- \ [ calc \ ( 1em \ + 6px \ ) \ ] { height : calc ( 1 em + 6 px ); }
. h- \ [ calc \ ( 3 \ . 375rem \ + var \ ( --sl-safe-b \ , 0px \ ) \ ) \ ] { height : calc ( 3.375 rem + var ( -- sl - safe - b , 0 px )); }
. 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 : 100 dvh ; }
. h-full { height : 100 % ; }
. h-px { height : 1 px ; }
. h-screen { height : 100 vh ; }
. max-h-12 { max-height : calc ( var ( -- spacing ) * 12 ); }
. max-h-32 { max-height : calc ( var ( -- spacing ) * 32 ); }
. max-h- \ [ 60vh \ ] { max-height : 60 vh ; }
. 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 ( 100 dvh - max ( 2 rem , 2 * var ( -- desktop - titlebar - inset , 0 px )) - 2 * max ( env ( safe - area - inset - top , 0 px ), env ( safe - area - inset - bottom , 0 px ))); }
. max-h- \ [ inherit \ ] { max-height : inherit ; }
. max-h- \ [ min \ ( 18rem \ , max \ ( 6rem \ , calc \ ( var \ ( --available-height \ , 100vh \ ) _-_7 \ . 5rem \ ) \ ) \ ) \ ] { max-height : min ( 18 rem , max ( 6 rem , calc ( var ( -- available - height , 100 vh ) - 7.5 rem ))); }
. max-h- \ [ min \ ( 24rem \ , max \ ( 6rem \ , calc \ ( var \ ( --available-height \ , 100vh \ ) _-_8rem \ ) \ ) \ ) \ ] { max-height : min ( 24 rem , max ( 6 rem , calc ( var ( -- available - height , 100 vh ) - 8 rem ))); }
. max-h- \ [ min \ ( 70vh \ , 640px \ ) \ ] { max-height : min ( 70 vh , 640 px ); }
. max-h- \ [ min \ ( 75dvh \ , 42rem \ ) \ ] { max-height : min ( 75 dvh , 42 rem ); }
. 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 : 0 px ; }
. 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 : 1 lh ; }
. min-h- \ [ 13px \ ] { min-height : 13 px ; }
. min-h- \ [ calc \ ( 1 \ . 5rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { min-height : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )); }
. min-h- \ [ calc \ ( var \ ( --cds-h-control \ ) _ \ + _2_ \ * _var \ ( --cds-toolbar-pad-block \ ) \ ) \ ] { min-height : calc ( var ( -- cds - h - control ) + 2 * var ( -- cds - toolbar - pad - block )); }
. min-h- \ [ var \ ( --prop-row-h \ , 32px \ ) \ ] { min-height : var ( -- prop - row - h , 32 px ); }
. min-h-control { min-height : var ( -- cds - h - control ); }
. w-0 { width : 0 px ; }
. 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.75 rem ; }
. w- \ [ 3px \ ] { width : 3 px ; }
. w- \ [ 4 \ . 5rem \ ] { width : 4.5 rem ; }
. w- \ [ 4 \ . 75rem \ ] { width : 4.75 rem ; }
. w- \ [ 14 \ . 5rem \ ] { width : 14.5 rem ; }
. w- \ [ 18 \ % \ ] { width : 18 % ; }
. w- \ [ 30 \ % \ ] { width : 30 % ; }
. w- \ [ 34px \ ] { width : 34 px ; }
. w- \ [ 48 \ % \ ] { width : 48 % ; }
. w- \ [ 68px \ ] { width : 68 px ; }
. w- \ [ 70 \ % \ ] { width : 70 % ; }
. w- \ [ 76px \ ] { width : 76 px ; }
. w- \ [ 184px \ ] { width : 184 px ; }
. w- \ [ 360px \ ] { width : 360 px ; }
. w- \ [ 400px \ ] { width : 400 px ; }
. w- \ [ calc \ ( 1em \ + 6px \ ) \ ] { width : calc ( 1 em + 6 px ); }
. w- \ [ calc \ ( 100 \ % \ + 0 \ . 75rem \ ) \ ] { width : calc ( 100 % + 0.75 rem ); }
. w- \ [ calc \ ( 100vw_-_2rem_-_2 \ * max \ ( env \ ( safe-area-inset-left \ , 0px \ ) \ , env \ ( safe-area-inset-right \ , 0px \ ) \ ) \ ) \ ] { width : calc ( 100 vw - 2 rem - 2 * max ( env ( safe - area - inset - left , 0 px ), env ( safe - area - inset - right , 0 px ))); }
. w- \ [ calc \ ( var \ ( --anchor-width \ ) \ + 1 \ . 375rem \ ) \ ] { width : calc ( var ( -- anchor - width ) + 1.375 rem ); }
. w- \ [ calc \ ( var \ ( --cds-switch-h \ , 1 \ . 25rem \ ) \ * 1 \ . 8 \ ) \ ] { width : calc ( var ( -- cds - switch - h , 1.25 rem ) * 1.8 ); }
. w- \ [ var \ ( --anchor-width \ ) \ ] { width : var ( -- anchor - width ); }
. w- \ [ var \ ( --cds-spark-size \ ) \ ] { width : var ( -- cds - spark - size ); }
. w- \ [ var \ ( --mc-side-w \ ) \ ] { width : var ( -- mc - side - w ); }
. w- \ [ var \ ( --pp-iconcol \ , auto \ ) \ ] { width : var ( -- pp - iconcol , auto ); }
. w- \ [ var \ ( --resize-line \ ) \ ] { width : var ( -- resize - line ); }
. w-auto { width : auto ; }
. w-control { width : var ( -- cds - h - control ); }
. w-fit { width : fit-content ; }
. w-full { width : 100 % ; }
. w-icon { width : var ( -- cds - icon ); }
. w-max { width : max-content ; }
. w-px { width : 1 px ; }
. w-screen { width : 100 vw ; }
. max-w-3xl { max-width : var ( -- container -3 xl ); }
. 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 : 45 rem ; }
. max-w- \ [ 70 \ % \ ] { max-width : 70 % ; }
. max-w- \ [ 160px \ ] { max-width : 160 px ; }
. max-w- \ [ 240px \ ] { max-width : 240 px ; }
. max-w- \ [ 320px \ ] { max-width : 320 px ; }
. max-w- \ [ 400px \ ] { max-width : 400 px ; }
. max-w- \ [ 480px \ ] { max-width : 480 px ; }
. max-w- \ [ 520px \ ] { max-width : 520 px ; }
. max-w- \ [ 720px \ ] { max-width : 720 px ; }
. max-w- \ [ 880px \ ] { max-width : 880 px ; }
. max-w- \ [ 1024px \ ] { max-width : 1024 px ; }
. max-w- \ [ 1152px \ ] { max-width : 1152 px ; }
. max-w- \ [ calc \ ( 100vw-2rem \ ) \ ] { max-width : calc ( -2 rem + 100 vw ); }
. max-w- \ [ calc \ ( 100vw-16px \ ) \ ] { max-width : calc ( -16 px + 100 vw ); }
. max-w- \ [ var \ ( --preview-card-max-w \ , 360px \ ) \ ] { max-width : var ( -- preview - card - max - w , 360 px ); }
. 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 : 0 px ; }
. min-w-0 \ ! { min-width : 0 px !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.5 rem ; }
. min-w- \ [ 12rem \ ] { min-width : 12 rem ; }
. min-w- \ [ 128px \ ] { min-width : 128 px ; }
. min-w- \ [ 180px \ ] { min-width : 180 px ; }
. min-w- \ [ 200px \ ] { min-width : 200 px ; }
. min-w- \ [ calc \ ( 0 \ . 5rem \ + var \ ( --cds-h-control \ ) \ + 1 \ . 25rem \ ) \ ] { min-width : calc ( .5 rem + var ( -- cds - h - control ) + 1.25 rem ); }
. min-w- \ [ calc \ ( 1em \ + 6px \ ) \ ] { min-width : calc ( 1 em + 6 px ); }
. min-w- \ [ calc \ ( 100 \ % -0 \ . 5rem \ ) \ ] { min-width : calc ( 100 % - 0.5 rem ); }
. min-w- \ [ calc \ ( var \ ( --cds-h-control \ ) \ * 3 \ ) \ ] { min-width : calc ( var ( -- cds - h - control ) * 3 ); }
. min-w- \ [ min \ ( 20ch \ , 100 \ % \ ) \ ] { min-width : min ( 20 ch , 100 % ); }
. min-w- \ [ min \ ( 40ch \ , 100 \ % \ ) \ ] { min-width : min ( 40 ch , 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 , 200 px ); }
. 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 : 0 px 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 : -90 deg ; }
. -rotate- \ [ 14deg \ ] { rotate : -14 deg ; }
. rotate-0 { rotate : 0 deg ; }
. rotate-45 { rotate : 45 deg ; }
. rotate-90 { rotate : 90 deg ; }
. rotate- \ [ 14deg \ ] { rotate : 14 deg ; }
. \ [ 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 : 1 s linear 0 s 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 , #000000 0 d calc ( var ( -- cds - scroll - fade - top ) * .15 ), #000000 26 calc ( var ( -- cds - scroll - fade - top ) * .3 ), #000000 4 d calc ( var ( -- cds - scroll - fade - top ) * .45 ), #000000 80 calc ( var ( -- cds - scroll - fade - top ) * .6 ), #000000 b3 calc ( var ( -- cds - scroll - fade - top ) * .75 ), #000000 d9 calc ( var ( -- cds - scroll - fade - top ) * .87 ), #000 var ( -- cds - scroll - fade - top ), #000 calc ( 100 % - var ( -- cds - scroll - fade - bottom )), #000000 d9 calc ( 100 % - var ( -- cds - scroll - fade - bottom ) * .87 ), #000000 b3 calc ( 100 % - var ( -- cds - scroll - fade - bottom ) * .75 ), #000000 80 calc ( 100 % - var ( -- cds - scroll - fade - bottom ) * .6 ), #000000 4 d calc ( 100 % - var ( -- cds - scroll - fade - bottom ) * .45 ), #000000 26 calc ( 100 % - var ( -- cds - scroll - fade - bottom ) * .3 ), #000000 0 d 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 : 0 px var ( -- cds - scroll - fade - size ), calc ( 100 % - var ( -- cds - scroll - fade - size )) 100 % , 0 px 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 , #000000 0 d calc ( var ( -- cds - scroll - fade - left ) * .15 ), #000000 26 calc ( var ( -- cds - scroll - fade - left ) * .3 ), #000000 4 d calc ( var ( -- cds - scroll - fade - left ) * .45 ), #000000 80 calc ( var ( -- cds - scroll - fade - left ) * .6 ), #000000 b3 calc ( var ( -- cds - scroll - fade - left ) * .75 ), #000000 d9 calc ( var ( -- cds - scroll - fade - left ) * .87 ), #000 var ( -- cds - scroll - fade - left ), #000 calc ( 100 % - var ( -- cds - scroll - fade - right )), #000000 d9 calc ( 100 % - var ( -- cds - scroll - fade - right ) * .87 ), #000000 b3 calc ( 100 % - var ( -- cds - scroll - fade - right ) * .75 ), #000000 80 calc ( 100 % - var ( -- cds - scroll - fade - right ) * .6 ), #000000 4 d calc ( 100 % - var ( -- cds - scroll - fade - right ) * .45 ), #000000 26 calc ( 100 % - var ( -- cds - scroll - fade - right ) * .3 ), #000000 0 d 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 : 0 px var ( -- cds - scroll - fade - size ), calc ( 100 % - var ( -- cds - scroll - fade - size )) 100 % , 0 px 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 ( 0 px , 1 fr )); }
. grid-cols-4 { grid-template-columns : repeat ( 4 , minmax ( 0 px , 1 fr )); }
. grid-cols- \ [ 1fr_1fr_auto \ ] { grid-template-columns : 1 fr 1 fr auto ; }
. grid-cols- \ [ minmax \ ( 0 \ , 1fr \ ) \ ] { grid-template-columns : minmax ( 0 px , 1 fr ); }
. grid-cols- \ [ var \ ( --pp-label-w \ , 80px \ ) _minmax \ ( 0 \ , 1fr \ ) \ ] { grid-template-columns : var ( -- pp - label - w , 80 px ) minmax ( 0 , 1 fr ); }
. 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 : 0 px ; }
. 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.15 em ; }
. gap- \ [ 0 \ . 25em \ ] { gap : 0.25 em ; }
. gap- \ [ 1px \ ] { gap : 1 px ; }
. gap- \ [ 2px \ ] { gap : 2 px ; }
. gap- \ [ 6 \ % \ ] { gap : 6 % ; }
. gap- \ [ var \ ( --cds-pad-sm \ , 6px \ ) \ ] { gap : var ( -- cds - pad - sm , 6 px ); }
. 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 : 2 px ; }
. gap-x- \ [ var \ ( --mc-group-gap \ , 4px \ ) \ ] { column-gap : var ( -- mc - group - gap , 4 px ); }
. 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 ( 1 px * var ( -- tw - divide - x - reverse )); border-inline-end-width : calc ( 1 px * 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 ( 1 px * var ( -- tw - divide - y - reverse )); border-bottom-width : calc ( 1 px * 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 : 3 px ; }
. rounded- \ [ 4px \ ] { border-radius : 4 px ; }
. rounded- \ [ calc \ ( 0 \ . 375rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { border-radius : calc ( .375 rem * var ( -- cds - rem - scale , 1 )); }
. rounded- \ [ calc \ ( var \ ( --cds-radius \ ) \ + var \ ( --cds-button-radius-add \ , 0px \ ) \ ) \ ] { border-radius : calc ( var ( -- cds - radius ) + var ( -- cds - button - radius - add , 0 px )); }
. 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 ( .25 rem * var ( -- cds - rem - scale , 1 )))); }
. rounded- \ [ calc \ ( var \ ( --cds-radius \ ) -1px \ ) \ ] { border-radius : calc ( var ( -- cds - radius ) - 1 px ); }
. rounded- \ [ calc \ ( var \ ( --cds-radius \ ) -2px \ ) \ ] { border-radius : calc ( var ( -- cds - radius ) - 2 px ); }
. 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 , 4 px ); }
. rounded-card { border-radius : calc ( var ( -- cds - radius ) + calc ( .25 rem * var ( -- cds - rem - scale , 1 ))); }
. rounded-composer { border-radius : var ( -- cds - radius - composer ); }
. rounded-full { border-radius : 3.40282 e +38 px ; }
. rounded-lg { border-radius : var ( -- radius - lg ); }
. rounded-md { border-radius : var ( -- radius - md ); }
. rounded-none { border-radius : 0 px ; }
. 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 : 0 px ; border-end-start-radius : 0 px ; }
. 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 , 0 px )); border-end-end-radius : calc ( var ( -- cds - radius ) + var ( -- cds - button - radius - add , 0 px )); }
. rounded-e-none { border-start-end-radius : 0 px ; border-end-end-radius : 0 px ; }
. 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 ( .25 rem * var ( -- cds - rem - scale , 1 ))); border-top-right-radius : calc ( var ( -- cds - radius ) + calc ( .25 rem * 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 : 0 px ; border-bottom-left-radius : 0 px ; }
. 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 : 1 px ; }
. border \ ! { border-style : var ( -- tw - border - style ) !important ; border-width : 1 px !important ; }
. border-0 { border-style : var ( -- tw - border - style ); border-width : 0 px ; }
. border-2 { border-style : var ( -- tw - border - style ); border-width : 2 px ; }
. border-100 { border-style : var ( -- tw - border - style ); border-width : 100 px ; }
. border- \ [ 1 \ . 5px \ ] { border-style : var ( -- tw - border - style ); border-width : 1.5 px ; }
. border-x { border-inline-style : var ( -- tw - border - style ); border-inline-width : 1 px ; }
. border-y { border-block-style : var ( -- tw - border - style ); border-block-width : 1 px ; }
. border-s { border-inline-start-style : var ( -- tw - border - style ); border-inline-start-width : 1 px ; }
. border-e { border-inline-end-style : var ( -- tw - border - style ); border-inline-end-width : 1 px ; }
. border-bs { border-block-start-style : var ( -- tw - border - style ); border-block-start-width : 1 px ; }
. border-be { border-block-end-style : var ( -- tw - border - style ); border-block-end-width : 1 px ; }
. border-t { border-top-style : var ( -- tw - border - style ); border-top-width : 1 px ; }
. border-t-2 { border-top-style : var ( -- tw - border - style ); border-top-width : 2 px ; }
. border-r { border-right-style : var ( -- tw - border - style ); border-right-width : 1 px ; }
. border-b { border-bottom-style : var ( -- tw - border - style ); border-bottom-width : 1 px ; }
. border-b- \ [ 0 \ . 5px \ ] { border-bottom-style : var ( -- tw - border - style ); border-bottom-width : 0.5 px ; }
. 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 : 1 px ; }
. border-dashed { --tw-border-style : dashed ; border-style : dashed ; }
. \ ! border-transparent { border-color : rgba ( 0 , 0 , 0 , 0 ) !important ; }
. border- \ [ color \ : var \ ( --cds-shortcut-cap-line \ ) \ ] { border-color : var ( -- cds - shortcut - cap - line ); }
. border-alpha-2 { border-color : var ( -- cds - alpha -2 ); }
. border-alpha-3 { border-color : var ( -- cds - alpha -3 ); }
. border-app-accent , . border-app-accent \ / 70 { border-color : var ( -- t - app - accent ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. border-app-accent \ / 70 { border-color : color-mix ( in oklab , var ( -- t - app - accent ) 70 % , transparent ); }
}
. border-border-line { border-color : var ( -- t - border ); }
. border-border-strong { border-color : var ( -- t - border - strong ); }
. border-editor-comment-target { border-color : var ( -- cds - border - editor - comment - target ); }
. border-strong { border-color : var ( -- cds - border - strong ); }
. border-stronger { border-color : var ( -- cds - border - stronger ); }
. border-transparent { border-color : rgba ( 0 , 0 , 0 , 0 ); }
. border-white { border-color : var ( -- color - white ); }
. \ ! bg-transparent { background-color : rgba ( 0 , 0 , 0 , 0 ) !important ; }
. bg- \ [ color \ : var \ ( --cds-shortcut-cap-fill \ ) \ ] { background-color : var ( -- cds - shortcut - cap - fill ); }
. bg- \ [ var \ ( --cds-button-on-content \ ) \ ] { background-color : var ( -- cds - button - on - content ); }
. bg- \ [ var \ ( --cds-on-accent \ ) \ ] { background-color : var ( -- cds - on - accent ); }
. bg- \ [ var \ ( --cds-on-brand \ ) \ ] { background-color : var ( -- cds - on - brand ); }
. bg- \ [ var \ ( --cds-on-danger \ ) \ ] { background-color : var ( -- cds - on - danger ); }
. bg- \ [ var \ ( --cds-on-primary \ ) \ ] { background-color : var ( -- cds - on - primary ); }
. bg- \ [ var \ ( --cds-page-bg \ ) \ ] { background-color : var ( -- cds - page - bg ); }
. bg- \ [ var \ ( --cds-scroll-fade-strip-color \ , var \ ( --cds-page-bg \ ) \ ) \ ] { background-color : var ( -- cds - scroll - fade - strip - color , var ( -- cds - page - bg )); }
. bg- \ [ var \ ( --cds-segmented-control-thumb \ ) \ ] { background-color : var ( -- cds - segmented - control - thumb ); }
. bg- \ [ var \ ( --cds-segmented-control-track \ ) \ ] { background-color : var ( -- cds - segmented - control - track ); }
. bg- \ [ var \ ( --cds-skeleton-base \ ) \ ] { background-color : var ( -- cds - skeleton - base ); }
. bg- \ [ var \ ( --cds-switch-knob \ ) \ ] { background-color : var ( -- cds - switch - knob ); }
. bg- \ [ var \ ( --cds-switch-track \ ) \ ] { background-color : var ( -- cds - switch - track ); }
. bg- \ [ var \ ( --cds-tooltip-bg \ ) \ ] { background-color : var ( -- cds - tooltip - bg ); }
. bg-accent { background-color : var ( -- cds - bg - accent ); }
. bg-accent-muted { background-color : var ( -- cds - bg - accent - muted ); }
. bg-alpha-2 { background-color : var ( -- cds - alpha -2 ); }
. bg-alpha-3 { background-color : var ( -- cds - alpha -3 ); }
. bg-app-accent , . bg-app-accent \ / 5 { background-color : var ( -- t - app - accent ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-app-accent \ / 5 { background-color : color-mix ( in oklab , var ( -- t - app - accent ) 5 % , transparent ); }
}
. bg-backdrop { background-color : var ( -- cds - backdrop ); }
. bg-bad \ / 10 { background-color : var ( -- t - bad ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-bad \ / 10 { background-color : color-mix ( in oklab , var ( -- t - bad ) 10 % , transparent ); }
}
. bg-bad \ / 15 { background-color : var ( -- t - bad ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-bad \ / 15 { background-color : color-mix ( in oklab , var ( -- t - bad ) 15 % , transparent ); }
}
. bg-bg { background-color : var ( -- t - bg ); }
. bg-bg-warm { background-color : var ( -- t - bg - warm ); }
. bg-black , . bg-black \ / 40 { background-color : var ( -- cds - black ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-black \ / 40 { background-color : color-mix ( in oklab , var ( -- cds - black ) 40 % , transparent ); }
}
. bg-black \ / 85 { background-color : var ( -- cds - black ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-black \ / 85 { background-color : color-mix ( in oklab , var ( -- cds - black ) 85 % , transparent ); }
}
. bg-border { background-color : var ( -- cds - border ); }
. bg-border-line { background-color : var ( -- t - border ); }
. bg-border-strong { background-color : var ( -- t - border - strong ); }
. bg-current { background-color : currentcolor ; }
. bg-danger { background-color : var ( -- cds - bg - danger ); }
. bg-editor-canvas { background-color : var ( -- cds - bg - editor - canvas ); }
. bg-fg-muted { background-color : var ( -- t - fg - muted ); }
. bg-fill-accent { background-color : var ( -- cds - fill - accent ); }
. bg-fill-brand { background-color : var ( -- cds - fill - brand ); }
. bg-fill-control { background-color : var ( -- cds - fill - control ); }
. bg-fill-danger { background-color : var ( -- cds - fill - danger ); }
. bg-fill-field { background-color : var ( -- cds - fill - field ); }
. bg-fill-ghost-hover { background-color : var ( -- cds - fill - ghost - hover ); }
. bg-fill-primary { background-color : var ( -- cds - fill - primary ); }
. bg-fill-pro { background-color : var ( -- cds - fill - pro ); }
. bg-fill-secondary { background-color : var ( -- cds - fill - secondary ); }
. bg-fill-success { background-color : var ( -- cds - fill - success ); }
. bg-fill-warning { background-color : var ( -- cds - fill - warning ); }
. bg-green-500 { background-color : var ( -- cds - green -500 ); }
. bg-neutral { background-color : var ( -- cds - bg - neutral ); }
. bg-ok \ / 15 { background-color : var ( -- t - ok ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-ok \ / 15 { background-color : color-mix ( in oklab , var ( -- t - ok ) 15 % , transparent ); }
}
. bg-page { background-color : var ( -- cds - page - bg ); }
. bg-panel , . bg-panel \ / 90 { background-color : var ( -- t - panel ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-panel \ / 90 { background-color : color-mix ( in oklab , var ( -- t - panel ) 90 % , transparent ); }
}
. bg-surface-1 { background-color : var ( -- cds - surface -1 ); }
. bg-surface-2 { background-color : var ( -- cds - surface -2 ); }
. bg-surface-3 { background-color : var ( -- cds - surface -3 ); }
. bg-surface-panel { background-color : var ( -- cds - surface - panel ); }
. bg-surface-popover { background-color : var ( -- cds - surface - popover ); }
. bg-transparent { background-color : rgba ( 0 , 0 , 0 , 0 ); }
. bg-warning { background-color : var ( -- cds - bg - warning ); }
. bg-wash-1 { background-color : var ( -- t - wash -1 ); }
. bg-white \ / 20 { background-color : rgba ( 255 , 255 , 255 , 0.2 ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. bg-white \ / 20 { background-color : color-mix ( in oklab , var ( -- color - white ) 20 % , transparent ); }
}
. bg-gradient-to-l { --tw-gradient-position : to left in oklab ; background-image : linear-gradient ( var ( -- tw - gradient - stops )); }
. bg-gradient-to-r { --tw-gradient-position : to right in oklab ; background-image : linear-gradient ( var ( -- tw - gradient - stops )); }
. \ [ background-image \ : linear-gradient \ ( 0deg \ , var \ ( --cds-bg-danger \ ) \ , var \ ( --cds-bg-danger \ ) \ ) \ ] { background-image : linear-gradient ( 0 deg , 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 ( 0 deg , 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 ( 90 deg , 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 : 8 px 8 px ; }
. 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 : 0 px ; }
. 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 : 2 px ; }
. p- \ [ var \ ( --cds-menu-gutter \ , 0 \ . 25rem \ ) \ ] { padding : var ( -- cds - menu - gutter , .25 rem ); }
. 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 : 1 px ; }
. p-sm { padding : var ( -- cds - pad - sm ); }
. p-xl { padding : var ( -- cds - pad - xl ); }
. p-xs { padding : var ( -- cds - pad - xs ); }
. px-0 { padding-inline : 0 px ; }
. 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 : 2 px ; }
. px- \ [ 3px \ ] { padding-inline : 3 px ; }
. px- \ [ 5px \ ] { padding-inline : 5 px ; }
. 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 , .25 rem ); }
. 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 : 0 px ; }
. 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.125 em ; }
. 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 ) - 1 lh ) / 2 ); }
. py- \ [ calc \ ( 0 \ . 1875rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { padding-block : calc ( .1875 rem * var ( -- cds - rem - scale , 1 )); }
. py- \ [ calc \ ( var \ ( --cds-pad-md \ ) \ + 2px \ ) \ ] { padding-block : calc ( var ( -- cds - pad - md ) + 2 px ); }
. 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 : 1 px ; }
. 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 + 2 px ); }
. 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 : 0 px ; }
. 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 : 17 px ; }
. pt- \ [ calc \ ( 1 \ . 5rem \ + var \ ( --tb-overlay-h \ , 0px \ ) \ ) \ ] { padding-top : calc ( 1.5 rem + var ( -- tb - overlay - h , 0 px )); }
. pt- \ [ calc \ ( 2rem \ + 42px \ ) \ ] { padding-top : calc ( 42 px + 2 rem ); }
. pt- \ [ calc \ ( var \ ( --cds-pad-md \ ) -2px \ ) \ ] { padding-top : calc ( var ( -- cds - pad - md ) - 2 px ); }
. pt- \ [ var \ ( --cds-gap-sm \ ) \ ] { padding-top : var ( -- cds - gap - sm ); }
. pt- \ [ var \ ( --cds-menu-gutter \ , 0 \ . 25rem \ ) \ ] { padding-top : var ( -- cds - menu - gutter , .25 rem ); }
. pt- \ [ var \ ( --tb-overlay-h \ , 0px \ ) \ ] { padding-top : var ( -- tb - overlay - h , 0 px ); }
. pt-md { padding-top : var ( -- cds - pad - md ); }
. pt-sm { padding-top : var ( -- cds - pad - sm ); }
. pr-0 { padding-right : 0 px ; }
. 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 , -4 px ) + 4 px ); }
. pr- \ [ env \ ( safe-area-inset-right \ , 0px \ ) \ ] { padding-right : env ( safe - area - inset - right , 0 px ); }
. pr- \ [ var \ ( --pp-gutter-r \ , var \ ( --cds-pad-md \ ) \ ) \ ] { padding-right : var ( -- pp - gutter - r , var ( -- cds - pad - md )); }
. pr-md { padding-right : var ( -- cds - pad - md ); }
. pr-sm { padding-right : var ( -- cds - pad - sm ); }
. pr-xs { padding-right : var ( -- cds - pad - xs ); }
. pb-1 { padding-bottom : var ( -- spacing ); }
. pb-1 \ . 5 { padding-bottom : calc ( var ( -- spacing ) * 1.5 ); }
. pb-2 { padding-bottom : calc ( var ( -- spacing ) * 2 ); }
. pb-4 { padding-bottom : calc ( var ( -- spacing ) * 4 ); }
. pb- \ [ 5px \ ] { padding-bottom : 5 px ; }
. 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 ( .5 rem + var ( -- mc - foot - inset , 0 px )); }
. pb- \ [ calc \ ( 0 \ . 5rem \ + var \ ( --sl-safe-b \ , 0px \ ) \ ) \ ] { padding-bottom : calc ( .5 rem + var ( -- sl - safe - b , 0 px )); }
. pb- \ [ calc \ ( 1rem \ + var \ ( --sl-safe-b \ , 0px \ ) \ ) \ ] { padding-bottom : calc ( 1 rem + var ( -- sl - safe - b , 0 px )); }
. pb- \ [ max \ ( env \ ( safe-area-inset-bottom \ ) \ , 0 \ . 5rem \ ) \ ] { padding-bottom : max ( env ( safe - area - inset - bottom ), .5 rem ); }
. pb- \ [ var \ ( --cds-menu-gutter \ , 0 \ . 25rem \ ) \ ] { padding-bottom : var ( -- cds - menu - gutter , .25 rem ); }
. pb- \ [ var \ ( --cs-bottom \ , 16px \ ) \ ] { padding-bottom : var ( -- cs - bottom , 16 px ); }
. pb- \ [ var \ ( --sl-safe-b \ , 0px \ ) \ ] { padding-bottom : var ( -- sl - safe - b , 0 px ); }
. 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 : 17 px ; }
. 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 , 0 px ); }
. 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 -3 xl ); line-height : var ( -- tw - leading , var ( -- text -3 xl -- line - height )); }
. text- \ [ calc \ ( 0 \ . 6875rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] \ / \ [ calc \ ( 0 \ . 875rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { font-size : calc ( .6875 rem * var ( -- cds - rem - scale , 1 )); line-height : calc ( .875 rem * 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 ( .8125 rem * var ( -- cds - rem - scale , 1 )); line-height : calc ( 1.125 rem * 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.9 em ; }
. text- \ [ 9px \ ] { font-size : 9 px ; }
. text- \ [ 10px \ ] { font-size : 10 px ; }
. text- \ [ 11px \ ] { font-size : 11 px ; }
. text- \ [ 12px \ ] { font-size : 12 px ; }
. text- \ [ 13px \ ] { font-size : 13 px ; }
. text- \ [ 15px \ ] { font-size : 15 px ; }
. text- \ [ 16px \ ] { font-size : 16 px ; }
. text- \ [ calc \ ( 0 \ . 75rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { font-size : calc ( .75 rem * var ( -- cds - rem - scale , 1 )); }
. text- \ [ calc \ ( 0 \ . 5625rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { font-size : calc ( .5625 rem * 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 : 18 px ; line-height : 18 px ; }
. 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 : .6 px ; letter-spacing : 0.6 px ; }
. tracking-wide { --tw-tracking : var ( -- tracking - wide ); letter-spacing : var ( -- tracking - wide ); }
. text-balance { text-wrap : balance ; }
. text-pretty { text-wrap : pretty ; }
. text-wrap { text-wrap : wrap ; }
. break-words , . wrap-break-word { overflow-wrap : break-word ; }
. break-all { word-break : break-all ; }
. text-clip { text-overflow : clip ; }
. text-ellipsis { text-overflow : ellipsis ; }
. whitespace-normal { white-space : normal ; }
. whitespace-nowrap { white-space : nowrap ; }
. whitespace-pre { white-space : pre ; }
. whitespace-pre-wrap { white-space : pre-wrap ; }
. tab-1 { tab-size : 1 ; }
. tab-2 { tab-size : 2 ; }
. tab-3 { tab-size : 3 ; }
. tab-4 { tab-size : 4 ; }
. tab-9 { tab-size : 9 ; }
. \ [ color \ : var \ ( --cds-shortcut-cap-ink \ ) \ ] { color : var ( -- cds - shortcut - cap - ink ); }
. text- \ [ color-mix \ ( in_srgb \ , currentColor_85 \ % \ , transparent \ ) \ ] { color : currentcolor ; }
@ supports ( color : color-mix ( in lab , red , red )) {
. text- \ [ color-mix \ ( in_srgb \ , currentColor_85 \ % \ , transparent \ ) \ ] { color : color-mix ( in srgb , currentcolor 85 % , transparent ); }
}
. text- \ [ color \ : var \ ( --cds-text-stays-secondary \ , var \ ( --cds-text-muted \ ) \ ) \ ] { color : var ( -- cds - text - stays - secondary , var ( -- cds - text - muted )); }
. text- \ [ var \ ( --cds-tooltip-fg \ ) \ ] { color : var ( -- cds - tooltip - fg ); }
. text-accent { color : var ( -- cds - text - accent ); }
. text-app-accent { color : var ( -- t - app - accent ); }
. text-bad { color : var ( -- t - bad ); }
. text-blue-text { color : var ( -- t - blue - text ); }
. text-danger { color : var ( -- cds - text - danger ); }
. text-disabled { color : var ( -- cds - text - disabled ); }
. text-fg { color : var ( -- t - fg ); }
. text-fg-muted { color : var ( -- t - fg - muted ); }
. text-fg-secondary { color : var ( -- t - fg - secondary ); }
. text-gray-0 { color : var ( -- cds - gray -0 ); }
. text-inherit { color : inherit ; }
. text-muted { color : var ( -- cds - text - muted ); }
. text-ok { color : var ( -- t - ok ); }
. text-on-accent , . text-on-accent \ / 50 { color : var ( -- cds - on - accent ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. text-on-accent \ / 50 { color : color-mix ( in oklab , var ( -- cds - on - accent ) 50 % , transparent ); }
}
. text-on-accent \ / 60 { color : var ( -- cds - on - accent ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. text-on-accent \ / 60 { color : color-mix ( in oklab , var ( -- cds - on - accent ) 60 % , transparent ); }
}
. text-on-brand { color : var ( -- cds - on - brand ); }
. text-on-danger { color : var ( -- cds - on - danger ); }
. text-on-primary { color : var ( -- cds - on - primary ); }
. text-on-pro { color : var ( -- cds - on - pro ); }
. text-primary { color : var ( -- cds - text - primary ); }
. text-secondary { color : var ( -- cds - text - secondary ); }
. text-warning { color : var ( -- cds - text - warning ); }
. text-white { color : var ( -- color - white ); }
. text-white \ / 50 { color : rgba ( 255 , 255 , 255 , 0.5 ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. text-white \ / 50 { color : color-mix ( in oklab , var ( -- color - white ) 50 % , transparent ); }
}
. text-yellow-750 { color : var ( -- cds - yellow -750 ); }
. capitalize { text-transform : capitalize ; }
. lowercase { text-transform : lowercase ; }
. normal-case { text-transform : none ; }
. uppercase { text-transform : uppercase ; }
. \ ! italic { font-style : italic !important ; }
. italic { font-style : italic ; }
. italic \ ! { font-style : italic !important ; }
. not-italic { font-style : normal ; }
. diagonal-fractions { --tw-numeric-fraction : diagonal-fractions ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. lining-nums { --tw-numeric-figure : lining-nums ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. oldstyle-nums { --tw-numeric-figure : oldstyle-nums ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. ordinal { --tw-ordinal : ordinal ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. proportional-nums { --tw-numeric-spacing : proportional-nums ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. slashed-zero { --tw-slashed-zero : slashed-zero ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. stacked-fractions { --tw-numeric-fraction : stacked-fractions ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. tabular-nums { --tw-numeric-spacing : tabular-nums ; font-variant-numeric : var ( -- tw - ordinal ,) var ( -- tw - slashed - zero ,) var ( -- tw - numeric - figure ,) var ( -- tw - numeric - spacing ,) var ( -- tw - numeric - fraction ,); }
. normal-nums { font-variant-numeric : normal ; }
. \ ! underline { text-decoration-line : underline !important ; }
. line-through { text-decoration-line : line-through ; }
. no-underline { text-decoration-line : none ; }
. overline { text-decoration-line : overline ; }
. underline { text-decoration-line : underline ; }
. underline \ ! { text-decoration-line : underline !important ; }
. underline-offset-2 { text-underline-offset : 2 px ; }
. antialiased { -webkit- font-smoothing : antialiased ; }
. subpixel-antialiased { -webkit- font-smoothing : auto ; }
. opacity-0 { opacity : 0 ; }
. opacity-25 { opacity : 0.25 ; }
. opacity-40 { opacity : 0.4 ; }
. opacity-45 { opacity : 0.45 ; }
. opacity-50 { opacity : 0.5 ; }
. opacity-60 { opacity : 0.6 ; }
. opacity-80 { opacity : 0.8 ; }
. opacity-90 { opacity : 0.9 ; }
. opacity-100 { opacity : 1 ; }
. opacity- \ [ var \ ( --cds-resize-pill-force \ , 0 \ ) \ ] { opacity : var ( -- cds - resize - pill - force , 0 ); }
. opacity-disabled { opacity : var ( -- cds - opacity - disabled ); }
. \ ! shadow-none { --tw-shadow : 0 0 #0000 !important ; box-shadow : var ( -- tw - inset - shadow ), var ( -- tw - inset - ring - shadow ), var ( -- tw - ring - offset - shadow ), var ( -- tw - ring - shadow ), var ( -- tw - shadow ) !important ; }
. shadow { --tw-shadow : 0 1 px 3 px 0 var ( -- tw - shadow - color , #000000 1 a ), 0 1 px 2 px -1 px var ( -- tw - shadow - color , #000000 1 a ); 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 1 px 3 px 0 var ( -- tw - shadow - color , #000000 1 a ), 0 1 px 2 px -1 px var ( -- tw - shadow - color , #000000 1 a ) !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 1 px var ( -- tw - shadow - color , #000000 4 d ); 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 4 px 16 px var ( -- tw - shadow - color , #000000 1 a ), 0 1 px 4 px var ( -- tw - shadow - color , #000000 0 f ); 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 -1 px 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 1 px 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 1 px 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 2 px 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 24 px 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 24 px 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 1 px var ( -- tw - shadow - color , var ( -- cds - fill - secondary - ring )), 0 1 px 2 px 0 var ( -- tw - shadow - color , #000000 0 d ); 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 1 px 2 px 0 var ( -- tw - shadow - color , #000000 0 d ); 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 1 px 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 1 px 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 1 px 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 1 px 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 20 px 25 px -5 px var ( -- tw - shadow - color , #000000 1 a ), 0 8 px 10 px -6 px var ( -- tw - shadow - color , #000000 1 a ); 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 ( 1 px + 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 ( 2 px + 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 ( 6 px + 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 1 px 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 2 px var ( -- cds - page - bg ); }
. \ [ box-shadow \ : inset_0_0_0_1px_var \ ( --cds-border \ ) \ ] { box-shadow : inset 0 0 0 1 px 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 1 px var ( -- cds - border ), 0 1 px 2 px 0 #000000 0 d ); }
. 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 : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
}
. outline , . outline-1 { outline-style : var ( -- tw - outline - style ); outline-width : 1 px ; }
. outline-2 { outline-style : var ( -- tw - outline - style ); outline-width : 2 px ; }
. outline-3 { outline-style : var ( -- tw - outline - style ); outline-width : 3 px ; }
. -outline-offset-1 { outline-offset : calc ( -1 px ); }
. -outline-offset-2 { outline-offset : calc ( -2 px ); }
. outline-offset-1 { outline-offset : 1 px ; }
. outline-offset-2 { outline-offset : 2 px ; }
. outline-offset-4 { outline-offset : 4 px ; }
. 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 ( 8 px ); 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 ( 8 px ) !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.5 px ); 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 1 px 2 px var ( -- tw - drop - shadow - color , #000000 1 a )) drop-shadow ( 0 1 px 1 px var ( -- tw - drop - shadow - color , #000000 0 f )); --tw-drop-shadow : drop-shadow ( 0 1 px 2 px #000000 1 a ) drop-shadow ( 0 1 px 1 px #000000 0 f ); 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 ( 8 px ); 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 ( 12 px ); backdrop-filter : var ( -- tw - backdrop - blur ,) var ( -- tw - backdrop - brightness ,) var ( -- tw - backdrop - contrast ,) var ( -- tw - backdrop - grayscale ,) var ( -- tw - backdrop - hue - rotate ,) var ( -- tw - backdrop - invert ,) var ( -- tw - backdrop - opacity ,) var ( -- tw - backdrop - saturate ,) var ( -- tw - backdrop - sepia ,); }
. backdrop-blur-md { --tw-backdrop-blur : blur ( var ( -- blur - md )); backdrop-filter : var ( -- tw - backdrop - blur ,) var ( -- tw - backdrop - brightness ,) var ( -- tw - backdrop - contrast ,) var ( -- tw - backdrop - grayscale ,) var ( -- tw - backdrop - hue - rotate ,) var ( -- tw - backdrop - invert ,) var ( -- tw - backdrop - opacity ,) var ( -- tw - backdrop - saturate ,) var ( -- tw - backdrop - sepia ,); }
. backdrop-grayscale { --tw-backdrop-grayscale : grayscale ( 100 % ); backdrop-filter : var ( -- tw - backdrop - blur ,) var ( -- tw - backdrop - brightness ,) var ( -- tw - backdrop - contrast ,) var ( -- tw - backdrop - grayscale ,) var ( -- tw - backdrop - hue - rotate ,) var ( -- tw - backdrop - invert ,) var ( -- tw - backdrop - opacity ,) var ( -- tw - backdrop - saturate ,) var ( -- tw - backdrop - sepia ,); }
. backdrop-invert { --tw-backdrop-invert : invert ( 100 % ); backdrop-filter : var ( -- tw - backdrop - blur ,) var ( -- tw - backdrop - brightness ,) var ( -- tw - backdrop - contrast ,) var ( -- tw - backdrop - grayscale ,) var ( -- tw - backdrop - hue - rotate ,) var ( -- tw - backdrop - invert ,) var ( -- tw - backdrop - opacity ,) var ( -- tw - backdrop - saturate ,) var ( -- tw - backdrop - sepia ,); }
. backdrop-saturate-150 { --tw-backdrop-saturate : saturate ( 150 % ); backdrop-filter : var ( -- tw - backdrop - blur ,) var ( -- tw - backdrop - brightness ,) var ( -- tw - backdrop - contrast ,) var ( -- tw - backdrop - grayscale ,) var ( -- tw - backdrop - hue - rotate ,) var ( -- tw - backdrop - invert ,) var ( -- tw - backdrop - opacity ,) var ( -- tw - backdrop - saturate ,) var ( -- tw - backdrop - sepia ,); }
. backdrop-sepia { --tw-backdrop-sepia : sepia ( 100 % ); backdrop-filter : var ( -- tw - backdrop - blur ,) var ( -- tw - backdrop - brightness ,) var ( -- tw - backdrop - contrast ,) var ( -- tw - backdrop - grayscale ,) var ( -- tw - backdrop - hue - rotate ,) var ( -- tw - backdrop - invert ,) var ( -- tw - backdrop - opacity ,) var ( -- tw - backdrop - saturate ,) var ( -- tw - backdrop - sepia ,); }
. backdrop-filter { backdrop-filter : var ( -- tw - backdrop - blur ,) var ( -- tw - backdrop - brightness ,) var ( -- tw - backdrop - contrast ,) var ( -- tw - backdrop - grayscale ,) var ( -- tw - backdrop - hue - rotate ,) var ( -- tw - backdrop - invert ,) var ( -- tw - backdrop - opacity ,) var ( -- tw - backdrop - saturate ,) var ( -- tw - backdrop - sepia ,); }
. transition { transition-property : color , background-color , border-color , outline-color , text - decoration-color , fill , stroke , -- tw-gradient-from , -- tw-gradient-via , -- tw-gradient-to , opacity , box-shadow , transform , translate , scale , rotate , filter , -webkit- backdrop-filter , backdrop-filter , display , content - visibility , overlay , pointer - events ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition \ ! { transition-property : color , background-color , border-color , outline-color , text - decoration-color , fill , stroke , -- tw-gradient-from , -- tw-gradient-via , -- tw-gradient-to , opacity , box-shadow , transform , translate , scale , rotate , filter , -webkit- backdrop-filter , backdrop-filter , display , content - visibility , overlay , pointer - events !important ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )) !important ; transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )) !important ; }
. transition- \ [ background-color \ , box-shadow \ , color \ ] { transition-property : background-color , box-shadow , color ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ box-shadow \ ] { transition-property : box-shadow ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ clip-path \ ] { transition-property : clip - path ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ height \ ] { transition-property : height ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ left \ , top \ ] { transition-property : left , top ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ opacity \ , color \ , background-color \ ] { transition-property : opacity , color , background-color ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ opacity \ , scale \ , filter \ ] { transition-property : opacity , scale , filter ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ opacity \ , scale \ ] { transition-property : opacity , scale ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ opacity \ , translate \ ] { transition-property : opacity , translate ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ opacity \ , visibility \ ] { transition-property : opacity , visibility ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ outline-color \ ] { transition-property : outline-color ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ top \ ] { transition-property : top ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ transform \ , opacity \ ] { transition-property : transform , opacity ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ translate \ , height \ , scale \ ] { transition-property : translate , height , scale ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ translate \ ] { transition-property : translate ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ width \ , background-color \ , border-color \ ] { transition-property : width , background-color , border-color ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition- \ [ width \ ] { transition-property : width ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition-colors { transition-property : color , background-color , border-color , outline-color , text - decoration-color , fill , stroke , -- tw-gradient-from , -- tw-gradient-via , -- tw-gradient-to ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition-opacity { transition-property : opacity ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition-shadow { transition-property : box-shadow ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. transition-transform { transition-property : transform , translate , scale , rotate ; transition-timing-function : var ( -- tw - ease , var ( -- default - transition - timing - function )); transition-duration : var ( -- tw - duration , var ( -- default - transition - duration )); }
. \ [ transition-property \ : text-decoration-color \ , box-shadow \ ] { transition-property : text - decoration-color , box-shadow ; }
. \ [ transition-property \ : text-decoration-color \ ] { transition-property : text - decoration-color ; }
. transition-none { transition-property : none ; }
. delay-100 { transition-delay : 0.1 s ; }
. delay-200 { transition-delay : 0.2 s ; }
. duration-150 { --tw-duration : .15 s ; transition-duration : 0.15 s ; }
. duration-300 { --tw-duration : .3 s ; transition-duration : 0.3 s ; }
. duration-base { --tw-duration : var ( -- cds - dur - base ); transition-duration : var ( -- cds - dur - base ); }
. duration-fast { --tw-duration : var ( -- cds - dur - fast ); transition-duration : var ( -- cds - dur - fast ); }
. duration-sheet { --tw-duration : var ( -- cds - dur - sheet ); transition-duration : var ( -- cds - dur - sheet ); }
. duration-snap { --tw-duration : var ( -- cds - dur - snap ); transition-duration : var ( -- cds - dur - snap ); }
. ease-in { --tw-ease : var ( -- ease-in ); transition-timing-function : var ( -- ease-in ); }
. ease-in-out { --tw-ease : var ( -- ease-in-out ); transition-timing-function : var ( -- ease-in-out ); }
. ease-out { --tw-ease : var ( -- cds - ease-out ); transition-timing-function : var ( -- cds - ease-out ); }
. ease-overshoot { --tw-ease : var ( -- cds - ease - overshoot ); transition-timing-function : var ( -- cds - ease - overshoot ); }
. ease-snap { --tw-ease : var ( -- cds - ease - snap ); transition-timing-function : var ( -- cds - ease - snap ); }
. forced-color-adjust-none { forced-color-adjust : none ; }
. draggable-none { app-region : no-drag ; }
. font-control { --_cds-font-weight-role : var ( -- cds - font - weight - control ); --_cds-font-axis-wght-role : var ( -- cds - font - axis - wght - control ); }
. font-header { --_cds-font-weight-role : var ( -- cds - font - weight - header ); --_cds-font-axis-wght-role : var ( -- cds - font - axis - wght - header ); }
. outline-none { --tw-outline-style : none ; outline-style : none ; }
. outline-solid { --tw-outline-style : solid ; outline-style : solid ; }
. select-all { user-select : all ; }
. select-none { user-select : none ; }
. select-text { user-select : text ; }
. \ [ --btn-dot-r \ : calc \ ( 0 \ . 1875rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { --btn-dot-r : calc ( .1875 rem * var ( -- cds - rem - scale , 1 )); }
. \ [ --btn-dot-x \ : calc \ ( 100 \ % _-_var \ ( --btn-dot-r \ ) _ \ + _1px \ ) \ ] { --btn-dot-x : calc ( 100 % - var ( -- btn - dot - r ) + 1 px ); }
. \ [ --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 : 0 px ; }
. \ [ --cds-ring-outer \ : 1px \ ] { --cds-ring-outer : 1 px ; }
. \ [ --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 : .5 rem ; }
. \ [ --cds-stack-chip-pad \ : 0 \ . 25rem \ ] { --cds-stack-chip-pad : .25 rem ; }
. \ [ --cds-stack-chip-pad \ : 0 \ . 75rem \ ] { --cds-stack-chip-pad : .75 rem ; }
. \ [ --cds-stack-chip-pad \ : 0 \ . 375rem \ ] { --cds-stack-chip-pad : .375 rem ; }
. \ [ --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 : 45 rem ; }
. \ [ --kit-rn-min-w \ : 10rem \ ] { --kit-rn-min-w : 10 rem ; }
. \ [ --mc-group-gap \ : 2px \ ] { --mc-group-gap : 2 px ; }
. \ [ --mc-group-gap \ : 4px \ ] { --mc-group-gap : 4 px ; }
. \ [ --mc-strip-gap \ : 2px \ ] { --mc-strip-gap : 2 px ; }
. \ [ --mc-strip-gap \ : 4px \ ] { --mc-strip-gap : 4 px ; }
. \ [ --mc-strip-pad \ : 4px \ ] { --mc-strip-pad : 4 px ; }
. \ [ --mc-strip-pad \ : 5px \ ] { --mc-strip-pad : 5 px ; }
. \ [ --more-shift \ : 1 \ . 5rem \ ] { --more-shift : 1.5 rem ; }
. \ [ --pp-gutter-l \ : 0px \ ] { --pp-gutter-l : 0 px ; }
. \ [ --pp-gutter-r \ : 0px \ ] { --pp-gutter-r : 0 px ; }
. \ [ --pp-iconcol \ : var \ ( --cds-h-control \ ) \ ] { --pp-iconcol : var ( -- cds - h - control ); }
. \ [ --pp-label-w \ : 3rem \ ] { --pp-label-w : 3 rem ; }
. \ [ --pp-label-w \ : 66px \ ] { --pp-label-w : 66 px ; }
. \ [ --pp-label-w \ : 72px \ ] { --pp-label-w : 72 px ; }
. \ [ --preview-card-min-w \ : 0px \ ] { --preview-card-min-w : 0 px ; }
. \ [ --prop-row-h \ : 0px \ ] { --prop-row-h : 0 px ; }
. \ [ --prop-row-h \ : 32px \ ] { --prop-row-h : 32 px ; }
. \ [ --resize-line \ : 2px \ ] { --resize-line : 2 px ; }
. \ [ --seg-dot-r \ : calc \ ( 0 \ . 1875rem \ * var \ ( --cds-rem-scale \ , 1 \ ) \ ) \ ] { --seg-dot-r : calc ( .1875 rem * var ( -- cds - rem - scale , 1 )); }
. \ [ --seg-dot-x \ : calc \ ( 100 \ % _-_var \ ( --seg-dot-r \ ) _ \ + _1px \ ) \ ] { --seg-dot-x : calc ( 100 % - var ( -- seg - dot - r ) + 1 px ); }
. \ [ --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 ) * -14 px ); }
. \ [ clip-path \ : inset \ ( 0_0_-200vh_0 \ ) \ ] { clip-path : inset ( 0 px 0 px -200 vh ); }
. \ [ clip-path \ : inset \ ( 0_1px \ ) \ ] { clip-path : inset ( 0 px 1 px ); }
. \ [ clip-path \ : inset \ ( 0_100 \ % _0_0 \ ) \ ] { clip-path : inset ( 0 px 100 % 0 px 0 px ); }
. \ [ 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 : .074 em ; 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 1 px 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 1 px 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 2 px 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 ( 0 px + 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.40282 e +38 px ; }
. 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 : 0 s ; }
. group-focus-visible \ / resize \ : \ [ --resize-line \ : 3px \ ] : is ( : where ( . group \ / resize ) : focus-visible *) { --resize-line : 3 px ; }
. 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 : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
}
@ 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 1 px var ( -- tw - shadow - color , var ( -- cds - fill - secondary - pressed - ring )), 0 1 px 2 px 0 var ( -- tw - shadow - color , #000000 0 d ); 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 1 px 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 , 0 px )) * -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 ( 0 px ); }
@ 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 : 0 px ; }
. 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 ( 0 px ); }
@ 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 : 90 deg ; }
. 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 1 px 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 1 px 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 : -10 px ; }
. before \ : inset-x-px :: before { content : var ( -- tw - content ); inset-inline : 1 px ; }
. before \ : inset-y-0 :: before { content : var ( -- tw - content ); inset-block : 0 px ; }
. before \ : -z- \ [ 1 \ ] :: before { content : var ( -- tw - content ); z-index : calc ( -1 ); }
. before \ : h-0 :: before { content : var ( -- tw - content ); height : 0 px ; }
. before \ : min-w-0 :: before { content : var ( -- tw - content ); min-width : 0 px ; }
. 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 : 0 px ; }
. after \ : inset- \ [ min \ ( 0px \ , calc \ ( \ ( var \ ( --cds-h-control \ ) -1 \ . 5rem \ ) \ / 2 \ ) \ ) \ ] :: after { content : var ( -- tw - content ); inset : min ( 0 px , calc (( var ( -- cds - h - control ) - 1.5 rem ) / 2 )); }
. after \ : inset-x-0 :: after { content : var ( -- tw - content ); inset-inline : 0 px ; }
. after \ : inset-y-0 :: after { content : var ( -- tw - content ); inset-block : 0 px ; }
. after \ : -start- \ [ 2px \ ] :: after { content : var ( -- tw - content ); inset-inline-start : -2 px ; }
. 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 ) - 1 px ); }
. 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 : -9 px ; }
. after \ : -end- \ [ calc \ ( 3px \ + var \ ( --cds-split-caret-tuck \ ) \ ) \ ] :: after { content : var ( -- tw - content ); inset-inline-end : calc ( calc ( 3 px + 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 : 0 px ; }
. after \ : z-50 :: after { content : var ( -- tw - content ); z-index : 50 ; }
. after \ : h- \ [ 100dvh \ ] :: after { content : var ( -- tw - content ); height : 100 dvh ; }
. 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 : 2 s linear 0 s 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 ( 90 deg , 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 1 px 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 : 0 px var ( -- spacing ), 0 px 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 : 0 px ; }
. last \ : me- \ [ calc \ ( var \ ( --cds-pad-xl \ ) _-_var \ ( --cds-toolbar-pad-block \ ) \ ) \ ] : last-child { margin-inline-end : calc ( var ( -- cds - pad - xl ) - var ( -- cds - toolbar - pad - block )); }
. empty \ : hidden : empty { display : none ; }
. focus-within \ : w-auto : focus-within { width : auto ; }
. focus-within \ : overflow-visible : focus-within { overflow : visible ; }
. focus-within \ : shadow-focus : focus-within { --tw-shadow : var ( -- cds - focus - shadow ); box-shadow : var ( -- tw - inset - shadow ), var ( -- tw - inset - ring - shadow ), var ( -- tw - ring - offset - shadow ), var ( -- tw - ring - shadow ), var ( -- tw - shadow ); }
@ media ( hover : hover ) {
. hover \ : border-strong : hover { border-color : var ( -- cds - border - strong ); }
. hover \ : bg- \ [ var \ ( --cds-switch-track-hover \ ) \ ] : hover { background-color : var ( -- cds - switch - track - hover ); }
. hover \ : bg-alpha-1 : hover { background-color : var ( -- cds - alpha -1 ); }
. hover \ : bg-alpha-4 : hover { background-color : var ( -- cds - alpha -4 ); }
. hover \ : bg-bg-warm : hover , . hover \ : bg-bg-warm \ / 60 : hover { background-color : var ( -- t - bg - warm ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. hover \ : bg-bg-warm \ / 60 : hover { background-color : color-mix ( in oklab , var ( -- t - bg - warm ) 60 % , transparent ); }
}
. hover \ : bg-fill-accent : hover { background-color : var ( -- cds - fill - accent ); }
. hover \ : bg-fill-ghost-hover : hover { background-color : var ( -- cds - fill - ghost - hover ); }
. hover \ : bg-transparent : hover { background-color : rgba ( 0 , 0 , 0 , 0 ); }
. hover \ : bg-wash-1 : hover { background-color : var ( -- t - wash -1 ); }
. hover \ : text-primary : hover { color : var ( -- cds - text - primary ); }
. hover \ : shadow- \ [ inset_0_0_0_calc \ ( 1px \ * var \ ( --inv \ ) \ ) _var \ ( --t-border-strong \ ) \ ] : hover { --tw-shadow : inset 0 0 0 calc ( 1 px * var ( -- inv )) var ( -- tw - shadow - color , var ( -- t - border - strong )); box-shadow : var ( -- tw - inset - shadow ), var ( -- tw - inset - ring - shadow ), var ( -- tw - ring - offset - shadow ), var ( -- tw - ring - shadow ), var ( -- tw - shadow ); }
. hover \ : not-focus-within \ : shadow-field-hover : hover : not ( : focus-within ) { --tw-shadow : inset 0 0 0 1 px 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 : 2 px ; }
. 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 2 px var ( -- tw - shadow - color , var ( -- cds - gray -0 )), 0 0 0 4 px 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 ( 1 px + 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 ( 2 px + 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 : #ffffff 4 d ; }
@ 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 : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
}
. focus-visible \ : outline-2 : focus-visible { outline-style : var ( -- tw - outline - style ); outline-width : 2 px ; }
. focus-visible \ : outline-offset-4 : focus-visible { outline-offset : 4 px ; }
. 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 1 px 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 ) - 1 px ), transparent calc ( var ( -- seg - dot - r ) + 2 px ), black calc ( var ( -- seg - dot - r ) + 2.5 px )); }
. 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 ) - 1 px ), transparent calc ( var ( -- btn - dot - r ) + 2 px ), black calc ( var ( -- btn - dot - r ) + 2.5 px )); }
}
. 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 1 px 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 2 px 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 ( -8 px -100 vw 0 px ); }
. 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.25 rem ) * .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 : 0 px ; }
. data- \ [ ending-style \ ] \ : translate-y- \ [ calc \ ( 100 \ % \ + 1 \ . 5rem \ ) \ ][ data-ending-style ] { --tw-translate-y : calc ( 100 % + 1.5 rem ); 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 ( -8 px -100 vw 0 px ); }
. 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 : 0 s ; transition-duration : 0 s ; }
. data- \ [ invalid \ ] \ : shadow-field-invalid [ data-invalid ] { --tw-shadow : inset 0 0 0 1 px 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 ( 2 px ); 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 : 0 px ; }
. data- \ [ starting-style \ ] \ : translate-y- \ [ calc \ ( 100 \ % \ + 1 \ . 5rem \ ) \ ][ data-starting-style ] { --tw-translate-y : calc ( 100 % + 1.5 rem ); 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 ( -8 px -100 vw 0 px ); }
. 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.2 s cubic-bezier ( 0.215 , 0.61 , 0.355 , 1 ) 80 ms 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.15 s cubic-bezier ( 0.215 , 0.61 , 0.355 , 1 ) 0 s 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 .22 s cubic-bezier ( .215 , .61 , .355 , 1 ) var ( -- rise - delay , 0 s ) 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.15 s cubic-bezier ( 0.215 , 0.61 , 0.355 , 1 ) 0 s 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 : 0 px ; 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 : 0 px ; translate : var ( -- tw - translate - x ) var ( -- tw - translate - y ); }
@ media ( prefers-reduced-motion : reduce ) {
. motion-reduce \ : animate-none { animation : auto ease 0 s 1 normal none running none ; }
}
. motion-reduce \ : animate-none : where ([ data-reduce-motion = "true" ], [ data-reduce-motion = "true" ] *) { animation : auto ease 0 s 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 , 0 px ); }
. max-md \ : right-0 { right : 0 px ; }
. max-md \ : bottom-0 { bottom : 0 px ; }
. 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 ( 50 dvh , calc ( 24 rem + var ( -- mc - foot - inset , 0 px )))); }
. max-md \ : max-h- \ [ 85dvh \ ] { max-height : 85 dvh ; }
. max-md \ : w-full { width : 100 % ; }
. max-md \ : shrink-0 { flex-shrink : 0 ; }
. max-md \ : rotate-90 { rotate : 90 deg ; }
. max-md \ : flex-col { flex-direction : column ; }
. max-md \ : border-t { border-top-style : var ( -- tw - border - style ); border-top-width : 1 px ; }
. max-md \ : border-l-0 { border-left-style : var ( -- tw - border - style ); border-left-width : 0 px ; }
. max-md \ : border-border-line { border-color : var ( -- t - border ); }
. max-md \ : pb- \ [ var \ ( --mc-foot-inset \ , 0px \ ) \ ] { padding-bottom : var ( -- mc - foot - inset , 0 px ); }
. max-md \ : shadow-xl { --tw-shadow : 0 20 px 25 px -5 px var ( -- tw - shadow - color , #000000 1 a ), 0 8 px 10 px -6 px var ( -- tw - shadow - color , #000000 1 a ); 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 , 0 px ); }
. md \ : right-0 { right : 0 px ; }
. md \ : bottom-0 { bottom : 0 px ; }
. md \ : hidden { display : none ; }
. md \ : shadow-xl { --tw-shadow : 0 20 px 25 px -5 px var ( -- tw - shadow - color , #000000 1 a ), 0 8 px 10 px -6 px var ( -- tw - shadow - color , #000000 1 a ); 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 : 90 deg ; }
. 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 , 0 px )); translate : var ( -- tw - translate - x ) var ( -- tw - translate - y ); }
@ media screen {
. dark \ : bg- \ [ color-mix \ ( in_srgb \ , var \ ( --cds-fill-accent \ ) _35 \ % \ , transparent \ ) \ ] : where ([ data-mode = "dark" ], [ data-mode = "dark" ] *) { background-color : var ( -- cds - fill - accent ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. dark \ : bg- \ [ color-mix \ ( in_srgb \ , var \ ( --cds-fill-accent \ ) _35 \ % \ , transparent \ ) \ ] : where ([ data-mode = "dark" ], [ data-mode = "dark" ] *) { background-color : color-mix ( in srgb , var ( -- cds - fill - accent ) 35 % , transparent ); }
}
}
@ media screen and ( prefers-color-scheme : dark ) {
. dark \ : bg- \ [ color-mix \ ( in_srgb \ , var \ ( --cds-fill-accent \ ) _35 \ % \ , transparent \ ) \ ] : where ([ data-mode = "system" ], [ data-mode = "system" ] *) : not ( : where ([ data-mode = "system" ] : is ([ data-mode = "light" ], [ data-mode = "dark" ]), [ data-mode = "system" ] : is ([ data-mode = "light" ], [ data-mode = "dark" ]) *)) { background-color : var ( -- cds - fill - accent ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. dark \ : bg- \ [ color-mix \ ( in_srgb \ , var \ ( --cds-fill-accent \ ) _35 \ % \ , transparent \ ) \ ] : where ([ data-mode = "system" ], [ data-mode = "system" ] *) : not ( : where ([ data-mode = "system" ] : is ([ data-mode = "light" ], [ data-mode = "dark" ]), [ data-mode = "system" ] : is ([ data-mode = "light" ], [ data-mode = "dark" ]) *)) { background-color : color-mix ( in srgb , var ( -- cds - fill - accent ) 35 % , transparent ); }
}
. dark \ : bg- \ [ color-mix \ ( in_srgb \ , var \ ( --cds-fill-accent \ ) _35 \ % \ , transparent \ ) \ ] : where ( . cds-root , . cds-root *) : not ( : where ([ data-mode ], [ data-mode ] *)) { background-color : var ( -- cds - fill - accent ); }
@ supports ( color : color-mix ( in lab , red , red )) {
. dark \ : bg- \ [ color-mix \ ( in_srgb \ , var \ ( --cds-fill-accent \ ) _35 \ % \ , transparent \ ) \ ] : where ( . cds-root , . cds-root *) : not ( : where ([ data-mode ], [ data-mode ] *)) { background-color : color-mix ( in srgb , var ( -- cds - fill - accent ) 35 % , transparent ); }
}
}
@ media screen {
. dark \ : shadow-panel-sm : where ([ data-mode = "dark" ], [ data-mode = "dark" ] *) { --tw-shadow : inset 0 0 0 var ( -- cds - ring - inner ) var ( -- cds - ring - color ), 0 0 0 var ( -- cds - ring - outer ) var ( -- cds - ring - color ), var ( -- cds - shadow - sm ); box-shadow : var ( -- tw - inset - shadow ), var ( -- tw - inset - ring - shadow ), var ( -- tw - ring - offset - shadow ), var ( -- tw - ring - shadow ), var ( -- tw - shadow ); }
}
@ media screen and ( prefers-color-scheme : dark ) {
. dark \ : shadow-panel-sm : where ([ data-mode = "system" ], [ data-mode = "system" ] *) : not ( : where ([ data-mode = "system" ] : is ([ data-mode = "light" ], [ data-mode = "dark" ]), [ data-mode = "system" ] : is ([ data-mode = "light" ], [ data-mode = "dark" ]) *)), . dark \ : shadow-panel-sm : where ( . cds-root , . cds-root *) : not ( : where ([ data-mode ], [ data-mode ] *)) { --tw-shadow : inset 0 0 0 var ( -- cds - ring - inner ) var ( -- cds - ring - color ), 0 0 0 var ( -- cds - ring - outer ) var ( -- cds - ring - color ), var ( -- cds - shadow - sm ); box-shadow : var ( -- tw - inset - shadow ), var ( -- tw - inset - ring - shadow ), var ( -- tw - ring - offset - shadow ), var ( -- tw - ring - shadow ), var ( -- tw - shadow ); }
}
@ starting-style {
. starting \ : scale- \ [ 0 \ . 98 \ ] { scale : 0.98 ; }
. starting \ : opacity-0 { opacity : 0 ; }
}
@ media print {
. print \ : hidden { display : none ; }
}
@ media ( forced-colors : active ) {
. forced-colors \ : border { border-style : var ( -- tw - border - style ); border-width : 1 px ; }
. forced-colors \ : border-2 { border-style : var ( -- tw - border - style ); border-width : 2 px ; }
. forced-colors \ : border-b-0 { border-bottom-style : var ( -- tw - border - style ); border-bottom-width : 0 px ; }
. 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 : 1 px ; }
. 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 ( -1 px ); }
. forced-colors \ : focus-visible \ : -outline-offset-2 : focus-visible { outline-offset : calc ( -2 px ); }
. 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.25 rem ; }
. 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 : 0 px ; }
. 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.875 rem + 40 px + var ( -- sl - safe - b , 0 px )); }
. 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 , 40 px ); }
. 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 : 17 rem ; }
. 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 , 80 px ) * 13 / 12 ) minmax ( 0 , 1 fr ); }
. 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 , -8 px ) + 8 px ); }
. 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 : 8 px ; }
. pointer-coarse \ : \ [ --mc-strip-gap \ : 8px \ ] { --mc-strip-gap : 8 px ; }
. pointer-coarse \ : \ [ --mc-strip-pad \ : 6px \ ] { --mc-strip-pad : 6 px ; }
. pointer-coarse \ : \ [ --more-shift \ : 2 \ . 5rem \ ] { --more-shift : 2.5 rem ; }
. pointer-coarse \ : \ [ --prop-row-h \ : 40px \ ] { --prop-row-h : 40 px ; }
. pointer-coarse \ : before \ : inset- \ [ -13px \ ] :: before { content : var ( -- tw - content ); inset : -13 px ; }
}
@ 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 : 0 px ; }
. 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 : -2 px ; }
. comfortable \ : -ms- \ [ 4px \ ] : where ([ data-density = "comfortable" ], [ data-density = "comfortable" ] *) { margin-inline-start : -4 px ; }
. comfortable \ : ms- \ [ 2px \ ] : where ([ data-density = "comfortable" ], [ data-density = "comfortable" ] *) { margin-inline-start : 2 px ; }
. comfortable \ : ms- \ [ 4px \ ] : where ([ data-density = "comfortable" ], [ data-density = "comfortable" ] *) { margin-inline-start : 4 px ; }
. comfortable \ : -me- \ [ 4px \ ] : where ([ data-density = "comfortable" ], [ data-density = "comfortable" ] *) { margin-inline-end : -4 px ; }
. comfortable \ : me- \ [ calc \ ( 4px-var \ ( --cds-pad-md \ ) \ ) \ ] : where ([ data-density = "comfortable" ], [ data-density = "comfortable" ] *) { margin-inline-end : calc ( 4 px - var ( -- cds - pad - md )); }
. comfortable \ : me- \ [ calc \ ( 5px-var \ ( --cds-pad-md \ ) \ ) \ ] : where ([ data-density = "comfortable" ], [ data-density = "comfortable" ] *) { margin-inline-end : calc ( 5 px - 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 : -4 px ; }
. compact \ : -ms- \ [ 6px \ ] : where ([ data-density = "compact" ], [ data-density = "compact" ] *) { margin-inline-start : -6 px ; }
. compact \ : ms- \ [ 4px \ ] : where ([ data-density = "compact" ], [ data-density = "compact" ] *) { margin-inline-start : 4 px ; }
. compact \ : ms- \ [ 6px \ ] : where ([ data-density = "compact" ], [ data-density = "compact" ] *) { margin-inline-start : 6 px ; }
. compact \ : -me- \ [ 2px \ ] : where ([ data-density = "compact" ], [ data-density = "compact" ] *) { margin-inline-end : -2 px ; }
. compact \ : me- \ [ calc \ ( 6px-var \ ( --cds-pad-md \ ) \ ) \ ] : where ([ data-density = "compact" ], [ data-density = "compact" ] *) { margin-inline-end : calc ( 6 px - var ( -- cds - pad - md )); }
. compact \ : me- \ [ calc \ ( 8px-var \ ( --cds-pad-md \ ) \ ) \ ] : where ([ data-density = "compact" ], [ data-density = "compact" ] *) { margin-inline-end : calc ( 8 px - 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 : -90 deg ; }
. \ [ \ & _ \ * \ ] \ : 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 : .2 s ; transition-duration : 0.2 s ; }
@ 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 : 0 px ; }
. \ [ \ & _ \ [ 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 : 0 px ; }
. \ [ \ & _ \ [ data-cds \ = SegmentedControl \ ] \ ] \ : p-0 [ data-cds = "SegmentedControl" ] { padding : 0 px ; }
. \ [ \ & _ \ [ data-mc-divider \ ] \ ] \ : mx-0 [ data-mc-divider ] { margin-inline : 0 px ; }
. \ [ \ & _ \ [ role \ = radio \ ] \ ] \ : min-w- \ [ calc \ ( var \ ( --cds-h-control \ ) _-_2px \ ) \ ] [ role = "radio" ] { min-width : calc ( var ( -- cds - h - control ) - 2 px ); }
. \ [ \ & _ \ [ role \ = radio \ ] \ ] \ : min-w- \ [ var \ ( --cds-h-control \ ) \ ] [ role = "radio" ] { min-width : var ( -- cds - h - control ); }
. \ [ \ & _ \ [ role \ = radio \ ] \ ] \ : px-0 [ role = "radio" ] { padding-inline : 0 px ; }
. \ [ \ & _ \ [ role \ = separator \ ] \ ] \ : -mx-1 [ role = "separator" ] { margin-inline : calc ( var ( -- spacing ) * -1 ); }
. \ [ \ & _ \ [ role \ = separator \ ] \ ] \ : mt-0 [ role = "separator" ] { margin-top : 0 px ; }
. \ [ \ & _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 ) - 1 px ); }
. \ [ \ & \ : dir \ ( rtl \ ) \ ] \ : \ [ --seg-dot-x \ : calc \ ( var \ ( --seg-dot-r \ ) _-_1px \ ) \ ] : dir ( rtl ) { --seg-dot-x : calc ( var ( -- seg - dot - r ) - 1 px ); }
. \ [ \ & \ : 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 1 px 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 1 px 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 : 1 px ; }
. \ [ \ & \ : 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 : 0 px ; width : 1 px ; height : 1 px ; margin : -1 px ; padding : 0 px ; 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 % + 6 px ); }
. \ [ \ & \ : not \ ( \ : focus-visible \ ) \ > \ [ data-cds-part \ = resize-pill \ ] \ ] \ : opacity-0 : not ( : focus-visible ) > [ data-cds-part = "resize-pill" ] { opacity : 0 ; }
. \ [ \ & \ : not \ ( \ : hover \ , \ : focus-visible \ ) \ ] \ : \ [ --_text-link-line \ : color-mix \ ( in_srgb \ , currentColor \ , transparent_35 \ % \ ) \ ] : not ( : hover , : focus-visible ) { --_text-link-line : currentColor ; }
@ supports ( color : color-mix ( in lab , red , red )) {
. \ [ \ & \ : not \ ( \ : hover \ , \ : focus-visible \ ) \ ] \ : \ [ --_text-link-line \ : color-mix \ ( in_srgb \ , currentColor \ , transparent_35 \ % \ ) \ ] : not ( : hover , : focus-visible ) { --_text-link-line : color-mix ( in srgb , currentColor , transparent 35 % ); }
}
@ media ( hover : hover ) {
. \ [ \ & \ : not \ ( \ [ data-active \ ] \ ) \ : not \ ( \ [ data-disabled \ ] \ ) \ ] \ : hover \ : text-secondary : not ([ data-active ]) : not ([ data-disabled ]) : hover { color : var ( -- cds - text - secondary ); }
. \ [ \ & \ : not \ ( \ [ data-active \ ] \ ) \ : not \ ( \ [ data-disabled \ ] \ ) \ ] \ : hover \ : before \ : bg-fill-ghost-hover : not ([ data-active ]) : not ([ data-disabled ]) : hover :: before { content : var ( -- tw - content ); background-color : var ( -- cds - fill - ghost - hover ); }
. \ [ \ & \ : not \ ( \ [ data-checked \ ] \ ) \ : not \ ( \ [ data-disabled \ ] \ ) \ ] \ : hover \ : bg-fill-ghost-hover : not ([ data-checked ]) : not ([ data-disabled ]) : hover { background-color : var ( -- cds - fill - ghost - hover ); }
. \ [ \ & \ : not \ ( \ [ data-disabled \ ] \ ) \ ] \ : hover \ : text-primary : not ([ data-disabled ]) : hover { color : var ( -- cds - text - primary ); }
. \ [ \ & \ : not \ ( \ [ data-disabled \ ] \ ) \ ] \ : hover \ : \ [ --cds-split-ring \ : var \ ( --cds-border \ ) \ ] : not ([ data-disabled ]) : hover { --cds-split-ring : var ( -- cds - border ); }
}
. \ [ \ & \ : not \ ( \ [ data-disabled \ ] \ ) \ ] \ : has- \ [ \ [ aria-pressed \ = true \ ] \ ] \ : \ [ --cds-split-ring \ : var \ ( --cds-border \ ) \ ] : not ([ data-disabled ]) : has ([ aria-pressed = "true" ]) { --cds-split-ring : var ( -- cds - border ); }
. \ [ \ & \ : where \ ( \ : root \ [ dir \ = rtl \ ] _ \ : dir \ ( rtl \ ) \ ) \ ] \ : right-auto : where ( : root [ dir = "rtl" ] : dir ( rtl )) { right : auto ; }
. \ [ \ & \ : where \ ( \ : root \ [ dir \ = rtl \ ] _ \ : dir \ ( rtl \ ) \ ) \ ] \ : left-4 : where ( : root [ dir = "rtl" ] : dir ( rtl )) { left : calc ( var ( -- spacing ) * 4 ); }
. \ [ \ & \ : where \ ( \ : root \ [ dir \ = rtl \ ] _ \ : dir \ ( rtl \ ) \ ) \ ] \ : -ms-pad-md : where ( : root [ dir = "rtl" ] : dir ( rtl )) { margin-inline-start : calc ( var ( -- cds - pad - md ) * -1 ); }
. \ [ \ & \ : where \ ( \ : root \ [ dir \ = rtl \ ] _ \ : dir \ ( rtl \ ) \ ) \ ] \ : me-0 : where ( : root [ dir = "rtl" ] : dir ( rtl )) { margin-inline-end : 0 px ; }
. \ [ \ & \ : where \ ( \ : root \ [ dir \ = rtl \ ] _ \ : dir \ ( rtl \ ) \ ) \ ] \ : flex-row-reverse : where ( : root [ dir = "rtl" ] : dir ( rtl )) { flex-direction : row-reverse ; }
. data- \ [ checked \ ] \ : \ [ \ & \ : where \ ( \ : root \ [ dir \ = rtl \ ] _ \ : dir \ ( rtl \ ) \ ) \ ] \ : -translate-x- \ [ calc \ ( var \ ( --cds-switch-h \ , 1 \ . 25rem \ ) \ * 0 \ . 8 \ ) \ ][ data-checked ] : where ( : root [ dir = "rtl" ] : dir ( rtl )) { --tw-translate-x : calc ( calc ( var ( -- cds - switch - h , 1.25 rem ) * .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 : 0 px !important ; }
. \ [ \ & \ > \ [ data-cds-segment \ ] \ : first-child_ \ [ data-cds-part \ = paint \ ] \ ] \ : pe-0 > [ data-cds-segment ] : first-child [ data-cds-part = "paint" ] { padding-inline-end : 0 px ; }
. \ [ \ & \ > \ [ data-cds-segment \ ] \ : last-child_ \ [ data-cds-part \ = paint \ ] \ ] \ : \ ! px-0 > [ data-cds-segment ] : last-child [ data-cds-part = "paint" ] { padding-inline : 0 px !important ; }
. \ [ \ & \ > \ [ data-cds-segment \ ] \ : last-child_ \ [ data-cds-part \ = paint \ ] \ ] \ : ps-0 > [ data-cds-segment ] : last-child [ data-cds-part = "paint" ] { padding-inline-start : 0 px ; }
. \ [ \ & \ > \ [ data-cds-segment \ ] \ : last-child_button \ ] \ : \ ! ms-0 > [ data-cds-segment ] : last-child button { margin-inline-start : 0 px !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 : 0 px ; }
. \ [ \ & \ [ 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.5 rem ); 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 2 px var ( -- tw - shadow - color , var ( -- cds - gray -0 )), 0 0 0 4 px 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 : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
}
: 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 : 0 px ; }
: root [ data-mc-presentation = "sheet" ] . \ [ \ : root \ [ data-mc-presentation \ = sheet \ ] _ \ & \ ] \ : pb-2 { padding-bottom : calc ( var ( -- spacing ) * 2 ); }
: where ([ data-cds-tall-window ]) . \ [ \ : where \ ( \ [ data-cds-tall-window \ ] \ ) _ \ & \ ] \ : top- \ [ calc \ ( -1_ \ * _var \ ( --cds-pad-xl \ ) \ ) \ ] { top : calc ( -1 * var ( -- cds - pad - xl )); }
: where ([ data-cds-tall-window ]) . \ [ \ : where \ ( \ [ data-cds-tall-window \ ] \ ) _ \ & \ ] \ : scroll-pt- \ [ calc \ ( var \ ( --cds-h-control \ ) _ \ + _3_ \ * _var \ ( --cds-toolbar-pad-block \ ) \ ) \ ] { scroll-padding-top : calc ( var ( -- cds - h - control ) + 3 * var ( -- cds - toolbar - pad - block )); }
: where ([ data-cds-tall-window ]) . \ [ \ : where \ ( \ [ data-cds-tall-window \ ] \ ) _ \ & \ ] \ : after \ : border-b- \ [ length \ : var \ ( --cds-toolbar-line \ ) \ ] :: after { content : var ( -- tw - content ); border-bottom-style : var ( -- tw - border - style ); border-bottom-width : var ( -- cds - toolbar - line ); }
: where ([ data-cds-tall-window ]) . \ [ \ : where \ ( \ [ data-cds-tall-window \ ] \ ) _ \ & \ ] \ : has- \ [ \ [ data-cds-part \ = band \ ] \ ] \ : scroll-fade-hide-top : has ([ data-cds-part = "band" ]) { --cds-scroll-fade-top-on : 0 ; }
[ data-cds-part = "band" ] + . \ [ \ [ data-cds-part \ = band \ ] \ + \ & \ ] \ : mt-0 { margin-top : 0 px ; }
[ 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 : 1 em ; height : 1 em ; 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 : 0 deg ; 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 : 1 em ; margin-inline-end : -1 em ; }
@ 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 : 2 px ; }
. 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 : 0 s ; --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 ( .25 rem * 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 ( .25 rem * 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 : 4 px ; --cds-assistant-message-text-stop : clamp ( 0 px , ( 100 % - 384 px ) * .175 , 56 px ); }
. 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 : 0 px ; --cds-assistant-message-text-stop : 0 px ; }
. 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 ( 1 em + .125 rem ); --_prose-h1-leading : calc ( var ( -- _prose - leading ) + .1875 rem ); --_prose-h2-size : var ( -- _prose - h1 - size ); --_prose-h2-leading : var ( -- _prose - h1 - leading ); --_prose-h3-size : 1 em ; --_prose-h3-leading : var ( -- _prose - leading ); --_prose-h4-size : 1 em ; --_prose-h4-leading : var ( -- _prose - leading ); --_prose-h5-size : 1 em ; --_prose-h5-leading : var ( -- _prose - leading ); --_prose-h6-size : 1 em ; --_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 : 0 px ; border-radius : 0 px ; }
. 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 : 0 px 0 px ; border-radius : 0 px ; padding-block : calc ( 0.4375 em + 1 px ); padding-inline : 0 px ; }
. 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.5 em ; }
. 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 : 0 px ; border-radius : 0 px ; }
. 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 : 0 px ; border-inline-start : var ( -- cds - assistant - message - text - inset , 0 px ) solid transparent ; border-radius : 0 px ; }
. 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 ( .25 rem * 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 : 0 px ; --cds-message-bubble-stack-gap : 2 px ; --cds-message-bubble-item-gap : 0 px ; }
. 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 : 0 px ; --cds-assistant-message-text-stop : 0 px ; }
. 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 : 0 px ; border-radius : 4 px ; padding : 1 px 4 px ; }
}
@ 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 : .1 s ; --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 : 0 s ; --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 0 s 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 : 0 s ; 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" ) 0 px 0 px / 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 : 16 px ; }
. 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 , 0 px ), var ( -- cds - font - size - body )); }
. cds-root textarea , . cds-root . cds-text-entry-floored { line-height : var ( -- cmp - leading , max ( 1.375 em , var ( -- cds - leading - body ))); }
. cds-root [ contenteditable ] : where ( : not ([ contenteditable = "false" ])) { font-size : max ( var ( -- cds - font - size - text - entry - floor , 0 px ), 1 em ); }
}
@ 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 ( .1875 rem * var ( -- cds - rem - scale , 1 )); height : calc ( .1875 rem * var ( -- cds - rem - scale , 1 )); background : var ( -- cds - alpha -7 ); opacity : 0.2857 ; border-radius : 9999 px ; animation : 1.8 s linear 0 s infinite normal none running cds-dot-pulse ; }
. cds-root . cds-dot : nth-child ( 2 ) { animation-delay : 0.2 s ; }
. cds-root . cds-dot : nth-child ( 3 ) { animation-delay : 0.4 s ; }
@ media ( prefers-reduced-motion : reduce ) {
. cds-root . cds-dot { animation : auto ease 0 s 1 normal none running none ; }
}
. cds-root : where ([ data-reduce-motion = "true" ], [ data-reduce-motion = "true" ] *) . cds-dot { animation : auto ease 0 s 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.5 s ease-in-out 0 s infinite normal none running cds-working-dot-halo ; }
@ keyframes cds-working-dot-lands {
0 % { clip-path : circle ( calc ( .25 rem * 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 : 9999 px ; position : absolute ; inset : 0 px ; }
@ 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 0 s 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 0 s 1 normal none running none ; }
@ keyframes cds-flipbook {
0 % { transform : translate ( 0 px ); }
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 0 s 1 normal none running none ; }
}
. cds-root : where ([ data-reduce-motion = "true" ], [ data-reduce-motion = "true" ] *) . cds-flipbook { animation : auto ease 0 s 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 : 0 s ; --cds-skel-i : 0 ; --cds-skel-settled : 0 s ; --cds-skel-reveal-end : calc ( var ( -- placeholder - reveal - delay , .5 s ) + .15 s - var ( -- cds - skel - elapsed )); }
. cds-root [ data-cds = "SkeletonGroup" ][ data-hold = "none" ] { --cds-skel-reveal-end : calc ( 0 s - var ( -- cds - skel - elapsed )); }
. cds-root [ data-cds = "SkeletonGroup" ][ data-hold = "delayed" ] { animation : cds-placeholder-reveal .15 s ease-out calc ( var ( -- placeholder - reveal - delay , .5 s ) - var ( -- cds - skel - elapsed ) - var ( -- cds - skel - settled )) backwards ; }
. cds-root [ data-cds = "SkeletonGroup" ][ data-motion = "lockstep" ][ data-hold = "none" ] { animation : cds-skeleton-breathe 2 s ease-in-out var ( -- cds - skel - reveal - end ) infinite ; }
. cds-root [ data-cds = "SkeletonGroup" ][ data-motion = "lockstep" ][ data-hold = "delayed" ] { animation : cds-skeleton-breathe 2 s ease-in-out var ( -- cds - skel - reveal - end ) infinite , cds-placeholder-reveal .15 s ease-out calc ( var ( -- placeholder - reveal - delay , .5 s ) - 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 : 0 px ; overflow : hidden ; }
. cds-root . cds-skel-sweep-band { background : linear-gradient ( 105 deg , transparent 35 % , var ( -- cds - skeleton - sheen ), transparent 65 % ); animation : cds-skeleton-sweep 2 s linear var ( -- cds - skel - reveal - end , 0 s ) infinite backwards ; position : absolute ; inset : 0 px ; }
. cds-root . cds-skel-sweep-clip : where ( : root [ dir = "rtl" ] : dir ( rtl )) . cds-skel-sweep-band { background-image : linear-gradient ( 255 deg , 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 2 s ease-in-out calc ( var ( -- cds - skel - reveal - end , 0 s ) + var ( -- cds - skel - i , 0 ) * 90 ms ) 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.01 ms ; 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.01 ms ; 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 % 0 px ; animation-timing-function : cubic-bezier ( 0.714 , 0.121 , 0.211 , 0.888 ); }
85 %, 100 % { background-position : 16.667 % 0 px ; }
}
@ keyframes cds-shimmer-text-shine-rtl {
0 %, 15 % { background-position : 16.667 % 0 px ; animation-timing-function : cubic-bezier ( 0.714 , 0.121 , 0.211 , 0.888 ); }
85 %, 100 % { background-position : 83.333 % 0 px ; }
}
@ keyframes cds-shimmer-text-shine-strong {
0 %, 5 % { background-position : 83.333 % 0 px ; animation-timing-function : cubic-bezier ( 0.4 , 0.15 , 0.6 , 0.85 ); }
95 %, 100 % { background-position : 16.667 % 0 px ; }
}
@ keyframes cds-shimmer-text-shine-strong-rtl {
0 %, 5 % { background-position : 16.667 % 0 px ; animation-timing-function : cubic-bezier ( 0.4 , 0.15 , 0.6 , 0.85 ); }
95 %, 100 % { background-position : 83.333 % 0 px ; }
}
@ 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 ) 0 px , rgb ( 0 , 0 , 0 ) 0 px ); mask-clip : text ; display : block ; position : absolute ; inset : 0 px ; overflow : clip ; }
. cds-root [ data-cds-shimmer-clone ] :: after { content : "" ; background-image : linear-gradient ( 120 deg , 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 : 3 s ; 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 , 0 s ); animation-play-state : var ( -- cds - shimmer - text - play - state , running ); position : absolute ; inset : 0 px -300 % 0 px 0 px ; translate : -62.5 % ; }
. cds-root [ data-cds-shimmer-clone ] : where ( : root [ dir = "rtl" ] : dir ( rtl )) :: after { background-image : linear-gradient ( 240 deg , 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 ( 4 px ); }
100 % { opacity : 1 ; transform : none ; }
}
@ keyframes cds-reveal-out {
0 % { opacity : 1 ; transform : none ; }
100 % { opacity : 0 ; transform : translateY ( 4 px ); }
}
@ keyframes cds-fade-in {
0 % { opacity : 0 ; }
}
@ keyframes cds-slide-in-end {
0 % { opacity : 0 ; transform : translate ( 12 px ); }
}
@ keyframes cds-slide-in-start {
0 % { opacity : 0 ; transform : translate ( -12 px ); }
}
@ keyframes cds-page-title-leaves {
0 % { opacity : 1 ; transform : none ; }
0 . 001 %, 100 % { opacity : 0 ; transform : translateY ( 20 px ) 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 : 0 px ; }
}
@ 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 : 0 px 2.8 e +06 px ; }
[ data-cds-tabs-arrive ] { --cds-page-header-tabs-pull : 0 px ; --cds-page-header-tabs-travel : 1 px ; }
[ 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 : 0 px 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 : 0 px ; }
@ 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 ( 12 px ); }
@ 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 ( 3 px ); }
}
. cds-root [ data-cds-row-cut ] { text-overflow : clip ; mask-image : linear-gradient ( 90 deg , rgb ( 0 , 0 , 0 ) calc ( 100 % - 24 px ), rgba ( 0 , 0 , 0 , 0 )); mask-clip : no-clip ; }
. cds-root [ data-cds-row-cut ] : dir ( rtl ) { mask-image : linear-gradient ( 270 deg , rgb ( 0 , 0 , 0 ) calc ( 100 % - 24 px ), 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 ( 12 px ); }
}
@ keyframes cds-grid-rows-in {
0 % { grid-template-rows : 0 fr ; }
}
. cds-root { --cds-chip-in-base-delay : 50 ms ; }
@ keyframes cds-chip-in {
0 % { opacity : 0 ; filter : blur ( 2 px ); 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 , 50 ms ) + min ( sibling-index () - 1 , 8 ) * 30 ms ); }
@ media ( prefers-reduced-motion : reduce ) {
. cds-root . cds-chip-in { animation : auto ease 0 s 1 normal none running none ; }
}
. cds-root : where ([ data-reduce-motion = "true" ], [ data-reduce-motion = "true" ] *) . cds-chip-in { animation : auto ease 0 s 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 , 0 px ) * -1 ); }
}
. cds-root [ data-cds-composer-attachments ] : has ([ data-cds-attachment ]) { transition : opacity 0.2 s cubic-bezier ( 0.215 , 0.61 , 0.355 , 1 ), transform 0.2 s 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 : 0 px center ; view-transition-class : cds-attachment ; transition : transform 0.18 s cubic-bezier ( 0.215 , 0.61 , 0.355 , 1 ), opacity 0.18 s 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.18 s ; 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 ( -8 px ); }
. cds-root [ data-cds-composer-attachments ] [ data-cds-attachment ] : not ([ data-cds-attachment-restored ]) { opacity : 0 ; transform : scale ( 0.92 ) translateY ( 4 px ); }
}
: root : active-view-transition-type ( cds-attachments ) { view-transition-name : none ; }
: root : active-view-transition-type ( cds-attachments ) :: view-transition-group ( root ) { animation-duration : 0 s ; }
: root : active-view-transition-type ( cds-attachments ) :: view-transition-group (* . cds-attachment ) { animation-duration : 0.18 s ; 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.13 s cubic-bezier ( 0.55 , 0.055 , 0.675 , 0.19 ) 0 s 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 % , 480 px ); }
. cds-root : is ([ data-cds = "MessageAttachmentsImage" ], [ data-cds = "MessageAttachmentsVideo" ])[ data-fit = "natural" ] [ data-cds-tile-media ] { width : 120 px ; height : 120 px ; }
. 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 : 120 px ; height : auto ; min-height : 120 px ; }
. 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 : 320 px ; }
. cds-root [ data-cds = "MessageAttachments" ][ data-thumbnail-height ] : is ([ data-cds = "MessageAttachmentsImage" ], [ data-cds = "MessageAttachmentsVideo" ])[ data-fit = "natural" ] { max-width : min ( 100 % , 288 px ); }
. 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 : 80 px ; }
. 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 : 120 px ; }
. 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 % , 240 px , 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 : 160 px ; }
. 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 : 0 px ; }
. 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 : 0 px ; }
@ 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 : -2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
: 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 : -2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
}
. 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.5 px ; 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 : 52 px ; 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 0 s 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 0 s 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 ) + 40 ms ) / 2 ) var ( -- cds - ease-out ), cds-pill-dip-up calc (( var ( -- cds - dur - snap ) + 40 ms ) / 2 ) var ( -- cds - ease-out ) calc (( var ( -- cds - dur - snap ) + 40 ms ) / 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 : 0 px ; position : absolute ; top : 0 px ; }
. 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 0 s 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 0 s 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 : .25 rem ; --cds-border : currentColor ; --cds-shadow-sm : 0 1 px 2 px 0 #000000 0 d ; --cds-shadow-md : 0 4 px 6 px -1 px #000000 1 a , 0 2 px 4 px -2 px #000000 1 a ; --cds-shadow-lg : 0 10 px 15 px -3 px #000000 1 a , 0 4 px 6 px -4 px #000000 1 a ; --cds-shadow-drop-ring : inset 0 0 0 2 px var ( -- cds - role - accent - fill ); --cds-shadow-drop-ring-danger : inset 0 0 0 2 px var ( -- cds - role - danger - fill ); --cds-shadow-drop-glow : inset 0 0 24 px -2 px hsl ( from var ( -- cds - role - accent - fill ) h s l / 20 % ); --cds-shadow-drop-glow-danger : inset 0 0 24 px -2 px 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 : #f8f8f7 bf ; --cds-oncolor-300 : #f8f8f7 80 ; --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 ;
: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 ( .375 rem * var ( -- cds - rem - scale , 1 )); --cds-radius-composer : calc ( .75 rem * var ( -- cds - rem - scale , 1 )); --cds-h-control : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )); --cds-h-control-nested : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )); --cds-icon : calc ( 1 rem * var ( -- cds - rem - scale , 1 )); --cds-pad-xs : calc ( .25 rem * var ( -- cds - rem - scale , 1 )); --cds-pad-sm : calc ( .375 rem * var ( -- cds - rem - scale , 1 )); --cds-pad-md : calc ( .5 rem * var ( -- cds - rem - scale , 1 )); --cds-pad-lg : calc ( .75 rem * var ( -- cds - rem - scale , 1 )); --cds-pad-xl : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )); --cds-gap-xs : calc ( .375 rem * var ( -- cds - rem - scale , 1 )); --cds-gap-sm : calc ( .5 rem * var ( -- cds - rem - scale , 1 )); --cds-gap-md : calc ( .75 rem * var ( -- cds - rem - scale , 1 )); --cds-gap-lg : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )); --cds-gap-xl : calc ( 2 rem * 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 1 px 2 px 0 hsl ( from var ( -- cds - gray -900 ) h s l / 6 % ), 0 2 px 8 px 0 var ( -- cds - shadow - color ); --cds-shadow-md : 0 2 px 4 px 0 hsl ( from var ( -- cds - gray -900 ) h s l / 7 % ), 0 6 px 16 px 0 var ( -- cds - shadow - color ); --cds-shadow-lg : 0 4 px 8 px 0 hsl ( from var ( -- cds - gray -900 ) h s l / 8 % ), 0 12 px 28 px -2 px var ( -- cds - shadow - color ); --cds-shadow-color : hsl ( from var ( -- cds - gray -900 ) h s l / 8 % ); --cds-shadow-popover : 0 8 px 24 px #000000 1 f , 0 2 px 6 px #000000 14 ; --cds-shadow-drop-ring : inset 0 0 0 2 px var ( -- cds - fill - accent ); --cds-shadow-drop-ring-danger : inset 0 0 0 2 px var ( -- cds - fill - danger ); --cds-shadow-drop-glow : inset 0 0 24 px -2 px hsl ( from var ( -- cds - fill - accent ) h s l / 20 % ); --cds-shadow-drop-glow-danger : inset 0 0 24 px -2 px hsl ( from var ( -- cds - fill - danger ) h s l / 20 % ); --cds-ring-outer : 1 px ; --cds-ring-inner : 0 px ; --cds-ring-color : var ( -- cds - border ); --cds-ring-hairline : 1 px ; --cds-focus-shadow : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - accent ), 0 0 6 px 1 px var ( -- cds - bg - accent ); --cds-focus-shadow-danger : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - danger ), 0 0 6 px 1 px 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 : 60 ms ; --cds-dur-snap : .12 s ; --cds-dur-base : .2 s ; --cds-dur-sheet : .3 s ; --cds-dur-slow : .45 s ; --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 % ); --cd
@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 ( .6875 rem * var ( -- cds - rem - scale , 1 )); --cds-font-size-footnote : calc ( .75 rem * var ( -- cds - rem - scale , 1 )); --cds-font-size-code : calc ( .75 rem * var ( -- cds - rem - scale , 1 )); --cds-font-size-body : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )); --cds-font-size-prose : .875 rem ; --cds-font-size-heading : calc ( .875 rem * var ( -- cds - rem - scale , 1 )); --cds-font-size-title : calc ( 1.25 rem * 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.0625 rem * var ( -- cds - rem - scale , 1 )); --cds-leading-footnote : calc ( .9375 rem * var ( -- cds - rem - scale , 1 )); --cds-leading-code : calc ( 1.0625 rem * var ( -- cds - rem - scale , 1 )); --cds-leading-body : calc ( 1.1875 rem * var ( -- cds - rem - scale , 1 )); --cds-leading-prose : 1.25 rem ; --cds-leading-heading : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )); --cds-leading-title : calc ( 1.5625 rem * 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 (
@ 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 ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - toolbar - pad - block : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - toolbar - pad - inline : calc ( 0 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - toolbar - title - pad : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - toolbar - icon - box : calc ( 0 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - toolbar - line : 0 px ; -- cds - toolbar - strip : 0 px ; -- 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 : #000000 3 d ; -- cds - shadow - popover : 0 8 px 24 px #000000 52 , 0 2 px 6 px #0003 ; -- cds - ring - outer : 0 px ; -- cds - ring - inner : 1 px ; -- cds - ring - color : var ( -- cds - alpha -2 ) ; -- cds - focus - shadow : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - accent ), 0 0 6 px 1 px hsl ( from var ( -- cds - role - accent -600 ) h s l / 60 % ) ; -- cds - focus - shadow - danger : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - danger ), 0 0 6 px 1 px 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
@ 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 : #000000 3 d ; -- cds - shadow - popover : 0 8 px 24 px #000000 52 , 0 2 px 6 px #0003 ; -- cds - ring - outer : 0 px ; -- cds - ring - inner : 1 px ; -- cds - ring - color : var ( -- cds - alpha -2 ) ; -- cds - focus - shadow : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - accent ), 0 0 6 px 1 px hsl ( from var ( -- cds - role - accent -600 ) h s l / 60 % ) ; -- cds - focus - shadow - danger : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - danger ), 0 0 6 px 1 px 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 -
@ 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 ( 1 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root [ data - platform = "desktop" ] { -- cds - cursor - interactive : default ; }
. cds - root [ data - density = "comfortable" ] { -- cds - radius : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - radius - composer : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control : calc ( 2 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - gap - xs : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - gap - sm : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - gap - md : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - gap - lg : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - gap - xl : calc ( 2.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - footnote : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - code : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose : 1 rem ; -- cds - font - size - heading : calc ( .9375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - title : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - caption : calc ( 1.0625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - footnote : calc ( 1.0625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - code : calc ( 1.1875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose : 1.5 rem ; -- cds - leading - heading : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - title : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - avatar - xs : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - avatar - sm : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - avatar - md : calc ( 2 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - avatar - lg : calc ( 2.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - avatar - text - xs : calc ( .5625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius : calc ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - panel - radius : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; }
@ media ( min - resolution : 2 x ) {
. cds - root { -- cds - ring - hairline : .5 px ; }
}
@ media ( min - resolution : 3 x ) {
. cds - root { -- cds - ring - hairline : calc ( 1 px / 3 ) ; }
}
@ media ( min - resolution : 4 x ) {
. cds - root { -- cds - ring - hairline : calc ( 1 px / 4 ) ; }
}
. cds - root [ data - step = "1" ] { -- cds - radius : calc ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs : calc ( .125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose : .8125 rem ; -- cds - leading - body : calc ( 1.0625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose : 1.1875 rem ; -- cds - checkbox : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root [ data - step = "2" ] { -- cds - radius : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption : calc ( .6875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose : .875 rem ; -- cds - leading - body : calc ( 1.1875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose : 1.25 rem ; -- cds - checkbox : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root [ data - step = "3" ] { -- cds - radius : calc ( .4375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose : .9375 rem ; -- cds - leading - body : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose : 1.375 rem ; -- cds - checkbox : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius : calc ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root [ data - step = "4" ] { -- cds - radius : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control : calc ( 2 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose : 1 rem ; -- cds - leading - body : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose : 1.5 rem ; -- cds - checkbox : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius : calc ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root [ data - step = "5" ] { -- cds - radius : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control : calc ( 2.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body : calc ( .9375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose : 1.125 rem ; -- cds - leading - body : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose : 1.6875 rem ; -- cds - checkbox : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h : calc ( 1.5 rem * 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 : #000000 3 d ; -- cds - shadow - popover : 0 8 px 24 px #000000 52 , 0 2 px 6 px #0003 ; -- cds - ring - outer : 0 px ; -- cds - ring - inner : 1 px ; -- cds - ring - color : var ( -- cds - alpha -2 ) ; -- cds - focus - shadow : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - accent ), 0 0 6 px 1 px hsl ( from var ( -- cds - role - accent -600 ) h s l / 60 % ) ; -- cds - focus - shadow - danger : inset 0 0 0 1 px var ( -- cds - page - bg ), 0 0 0 1 px var ( -- cds - fill - danger ), 0 0 6 px 1 px 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
@ 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 1 px 2 px 0 hsl ( from var ( -- cds - gray -900 ) h s l / 6 % ), 0 2 px 8 px 0 var ( -- cds - shadow - color ) ; -- cds - shadow - md : 0 2 px 4 px 0 hsl ( from var ( -- cds - gray -900 ) h s l / 7 % ), 0 6 px 16 px 0 var ( -- cds - shadow - color ) ; -- cds - shadow - lg : 0 4 px 8 px 0 hsl ( from var ( -- cds - gray -900 ) h s l / 8 % ), 0 12 px 28 px -2 px 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 1 px 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 ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - radius -- sm : calc ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - radius -- lg : calc ( .4375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control -- xs : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control -- sm : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control -- lg : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested -- xs : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested -- sm : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested -- lg : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon -- xs : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon -- sm : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon -- lg : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs -- xs : calc ( .125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs -- sm : calc ( .125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs -- lg : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm -- xs : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm -- sm : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm -- lg : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md -- xs : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md -- sm : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md -- lg : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg -- xs : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg -- sm : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg -- lg : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl -- xs : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl -- sm : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl -- lg : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption -- xs : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption -- sm : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption -- lg : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- xs : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- sm : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- lg : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose -- xs : .8125 rem ; -- cds - font - size - prose -- sm : .8125 rem ; -- cds - font - size - prose -- lg : .9375 rem ; -- cds - leading - body -- xs : calc ( 1.0625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- sm : calc ( 1.0625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- lg : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose -- xs : 1.1875 rem ; -- cds - leading - prose -- sm : 1.1875 rem ; -- cds - leading - prose -- lg : 1.375 rem ; -- cds - checkbox -- xs : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox -- sm : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox -- lg : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph -- xs : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph -- sm : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph -- lg : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius -- xs : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius -- sm : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius -- lg : calc ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h -- xs : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h -- sm : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h -- lg : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root [ data - density = "comfortable" ] { -- cds - radius -- xs : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - radius -- sm : calc ( .4375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - radius -- lg : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control -- xs : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control -- sm : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control -- lg : calc ( 2.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested -- xs : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested -- sm : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - h - control - nested -- lg : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon -- xs : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon -- sm : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - icon -- lg : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs -- xs : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs -- sm : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xs -- lg : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm -- xs : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm -- sm : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - sm -- lg : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md -- xs : calc ( .5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md -- sm : calc ( .625 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - md -- lg : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg -- xs : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg -- sm : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - lg -- lg : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl -- xs : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl -- sm : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - pad - xl -- lg : calc ( 1.75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption -- xs : calc ( .6875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption -- sm : calc ( .75 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - caption -- lg : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- xs : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- sm : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- lg : calc ( .9375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose -- xs : .875 rem ; -- cds - font - size - prose -- sm : .9375 rem ; -- cds - font - size - prose -- lg : 1.125 rem ; -- cds - leading - body -- xs : calc ( 1.1875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- sm : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- lg : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose -- xs : 1.25 rem ; -- cds - leading - prose -- sm : 1.375 rem ; -- cds - leading - prose -- lg : 1.6875 rem ; -- cds - checkbox -- xs : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox -- sm : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox -- lg : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph -- xs : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph -- sm : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - glyph -- lg : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius -- xs : calc ( .25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius -- sm : calc ( .3125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - checkbox - radius -- lg : calc ( .375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h -- xs : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h -- sm : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - switch - h -- lg : calc ( 1.5 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root { -- cds - font - size - body -- textsm : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- textmd : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- textlg : calc ( .9375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- own : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose -- textsm : .8125 rem ; -- cds - font - size - prose -- xs -- textsm : .8125 rem ; -- cds - font - size - prose -- sm -- textsm : .8125 rem ; -- cds - font - size - prose -- lg -- textsm : .875 rem ; -- cds - font - size - prose -- textlg : .9375 rem ; -- cds - font - size - prose -- xs -- textlg : .875 rem ; -- cds - font - size - prose -- sm -- textlg : .875 rem ; -- cds - font - size - prose -- lg -- textlg : 1 rem ; -- cds - font - size - heading -- textsm : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - heading -- textlg : calc ( .9375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- textsm : calc ( 1.1875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- textmd : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- textlg : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- own : calc ( 1.1875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose -- textsm : 1.1875 rem ; -- cds - leading - prose -- xs -- textsm : 1.1875 rem ; -- cds - leading - prose -- sm -- textsm : 1.1875 rem ; -- cds - leading - prose -- lg -- textsm : 1.25 rem ; -- cds - leading - prose -- textlg : 1.375 rem ; -- cds - leading - prose -- xs -- textlg : 1.25 rem ; -- cds - leading - prose -- sm -- textlg : 1.25 rem ; -- cds - leading - prose -- lg -- textlg : 1.5 rem ; -- cds - leading - heading -- textsm : calc ( 1.125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - heading -- textlg : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; }
. cds - root [ data - density = "comfortable" ] { -- cds - font - size - body -- textsm : calc ( .8125 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- textmd : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- textlg : calc ( .9375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - body -- own : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - prose -- textsm : .9375 rem ; -- cds - font - size - prose -- xs -- textsm : .8125 rem ; -- cds - font - size - prose -- sm -- textsm : .875 rem ; -- cds - font - size - prose -- lg -- textsm : 1 rem ; -- cds - font - size - prose -- textlg : 1.125 rem ; -- cds - font - size - prose -- xs -- textlg : .9375 rem ; -- cds - font - size - prose -- sm -- textlg : 1 rem ; -- cds - font - size - prose -- lg -- textlg : 1.125 rem ; -- cds - font - size - heading -- textsm : calc ( .875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - font - size - heading -- textlg : calc ( 1 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- textsm : calc ( 1.1875 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- textmd : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- textlg : calc ( 1.375 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - body -- own : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - prose -- textsm : 1.375 rem ; -- cds - leading - prose -- xs -- textsm : 1.1875 rem ; -- cds - leading - prose -- sm -- textsm : 1.25 rem ; -- cds - leading - prose -- lg -- textsm : 1.5 rem ; -- cds - leading - prose -- textlg : 1.6875 rem ; -- cds - leading - prose -- xs -- textlg : 1.375 rem ; -- cds - leading - prose -- sm -- textlg : 1.5 rem ; -- cds - leading - prose -- lg -- textlg : 1.6875 rem ; -- cds - leading - heading -- textsm : calc ( 1.25 rem * var ( -- cds - rem - scale , 1 )) ; -- cds - leading - heading -- textlg : calc ( 1.5 rem * 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 : 28 px ; }
@ 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 : 0 px ; }
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 : 0 px ; }
}
@ keyframes cds - scroll - fade - left {
0 % { -- cds - scroll - fade - left - raw : 0 px ; }
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 : 0 px ; }
}
@ 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 , 0 px ) ; -- mc - composer - inset : 0 px ; }
. 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 : 1 px solid var ( -- cds - border ) ; flex : 0 0 auto ; justify - content : center ; align - items : center ; min - width : 0 px ; height : 48 px ; padding : 0 px 12 px ; display : flex ; }
. cds - root [ data - kit = "thumb-actions" ] [ data - cds = "Button" ]:: before { content : "" ; position : absolute ; inset : -4 px ; }
@ 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 : 40 px ; }
. cds - root [ data - cds = "Button" ] { min - width : 40 px ; }
. cds - root [ data - cds = "Menu" ] [ data - cds - sheet - control ]: not ( : focus - visible ) : not ( [ data - highlighted ] ) : not ( [ data - cds - sheet - control - held ] ) { min - height : 0 px ; }
. cds - root [ data - cds = "Button" ][ data - video - play ] { min - width : 0 px ; min - height : 0 px ; }
. cds - root [ data - cds = "TextInput" ]: has ( [ data - kit = "list-search" ] ) { isolation : isolate ; min - height : 0 px ; position : relative ; }
. cds - root [ data - cds = "TextInput" ]: has ( [ data - kit = "list-search" ] ) :: before { content : "" ; z - index : -1 ; position : absolute ; inset : -8 px 0 px ; }
. cds - root [ data - kit = "list-search" ] { transform - origin : 0 px center ; transform : scale ( 0.8125 ) ; }
. cds - root [ data - cds = "TextInput" ]: has ( [ data - kit = "list-search" ] ) [ data - cds = "Button" ] { min - width : 0 px ; min - height : 0 px ; }
. cds - root [ data - cds = "TextInput" ]: has ( [ data - kit = "list-search" ] ) [ data - cds = "Button" ]:: before { content : "" ; position : absolute ; inset : -11 px -8 px -11 px -14 px ; }
[ data - mc - surface = "popover" ] : is ( [ data - cds = "Button" ] , [ data - cds = "TextInput" ] , [ data - cds = "NumberInput" ] ) { min - width : 0 px ; min - height : 0 px ; }
[ data - mc - surface = "popover" ] [ data - mc - item ]:: before { content : "" ; position : absolute ; inset : -4 px ; }
[ data - mc - surface = "popover" ] [ data - mc - group ] { row - gap : 8 px ; }
[ 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 : -4 px 0 px ; }
. cds - root [ data - cds = "SplitDropdownButton" ] [ data - cds = "Button" ]: last - child :: before { content : "" ; position : absolute ; inset : 0 px -16 px 0 px 0 px ; }
. tb - root [ data - cds = "Button" ] { min - width : 42 px ; min - height : 0 px ; }
. tb - root [ data - cds = "Button" ]:: before { content : "" ; position : absolute ; inset : -9 px 0 px ; }
. tb - root [ data - tb - paddle ] [ data - cds = "Button" ] { min - width : 0 px ; }
. 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 : 4 px ; }
. tb - root [ data - touch - targets = "square" ] . tb - scroll { -- tb - strip - pad : 2 px ; padding - inline : var ( -- tb - strip - pad ) ; }
. tb - root [ data - touch - targets = "square" ] [ data - cds = "Button" ]:: before { inset : -4 px 0 px ; }
. tb - root [ data - touch - targets = "square" ] [ data - tb - icon ] { margin - inline : 2 px ; }
. tb - root [ data - touch - targets = "square" ] [ data - tb - icon ] [ data - cds = "Button" ] { min - width : 0 px ; }
. tb - root [ data - touch - targets = "square" ] [ data - tb - icon ] [ data - cds = "Button" ]:: before { inset : -4 px ; }
. tb - root [ data - touch - targets = "square" ] [ data - tb - readout ] [ data - cds = "Button" ] { padding - inline : 8 px ; }
. cds - root [ data - cds = "ChatComposerActions" ] [ data - cds = "Button" ] { min - width : 0 px ; min - height : 0 px ; }
. cds - root [ data - cds = "ChatComposerActions" ] [ data - cds = "Button" ]:: before { content : "" ; position : absolute ; inset : -4 px ; }
[ data - kit = "panel-header" ] [ data - cds = "Button" ] { min - width : 0 px ; min - height : 0 px ; }
[ data - kit = "panel-header" ] [ data - cds = "Button" ]:: before { content : "" ; position : absolute ; inset : -8 px ; }
[ data - kit = "panel-header" ] [ role = "tab" ]:: after { content : "" ; position : absolute ; inset : -8 px 0 px ; }
. cds - root [ data - kit = "thumb-actions" ] [ data - cds = "Button" ] { min - width : 0 px ; min - height : 0 px ; }
. cds - root [ data - kit = "thumb-actions" ] [ data - cds = "Button" ]:: before { inset : -8 px ; }
. cds - root [ data - kit = "gap-add" ] [ data - cds = "Button" ] , . cds - root [ data - kit = "strip-action" ] [ data - cds = "Button" ] { min - width : 0 px ; min - height : 0 px ; }
. cds - root [ data - kit = "gap-add" ] [ data - cds = "Button" ]:: before { content : "" ; inset : calc ( -1 * var ( -- gap - add - slop , 8 px )) ; position : absolute ; }
. cds - root [ data - kit = "strip-action" ] [ data - cds = "Button" ]:: before { content : "" ; position : absolute ; inset : -10 px -10 px -10 px -8 px ; }
. cds - root [ data - kit = "row-reset" ] { width : 20 px ; min - width : 0 px ; height : 20 px ; min - height : 0 px ; margin - left : 6 px ; }
. cds - root [ data - kit = "row-reset" ]:: before { content : "" ; position : absolute ; inset : -10 px ; }
. cds - root [ data - cds = "Switch" ]:: after { content : "" ; position : absolute ; inset : -10 px -2 px ; }
}
@ keyframes mc - drop - ring - in {
0 % { opacity : 0 ; transform : scale ( 1.005 ) ; }
}
@ keyframes mc - drop - icon - rise {
0 % { opacity : 0 ; transform : translateY ( 12 px ) ; }
}
. kit - rn , . kit - rn - in { box - sizing : content-box ; max - width : 100 % ; font : inherit ; letter - spacing : inherit ; color : inherit ; white - space : nowrap ; border : 0 px ; border - radius : 6 px ; outline : 0 px ; margin : -3 px -6 px ; padding : 3 px 6 px ; }
. kit - rn { text - overflow : ellipsis ; vertical - align : middle ; min - width : 0 px ; 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 : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
}
@ media ( pointer : coarse ) {
. kit - rn - editable { margin - block : -10 px ; padding - block : 10 px ; }
}
. kit - rn - on { vertical - align : middle ; min - width : 0 px ; max - width : 100 % ; font : inherit ; letter - spacing : inherit ; color : inherit ; align - items : center ; margin : 0 px ; padding : 0 px ; display : inline-flex ; overflow : visible ; }
. kit - rn - in { field - sizing : content ; width : auto ; min - width : var ( -- kit - rn - min - w , 2 ch ) ; max - width : var ( -- kit - rn - max - w , 100 % ) ; background : var ( -- t - panel ) ; color : var ( -- t - fg ) ; box - shadow : 0 0 0 1 px 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 : -1 px ; }
[ 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 : -2 px ; }
[ 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 - .5 px ) ; }
[ 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 - .5 px ) ; }
[ 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 : 48 px ; }
[ 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 , 0 px ) ; 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 : 0 px ; }
. tb - root [ data - tb - overlay ] . tb - card { -- tb - ring - inside : calc ( var ( -- cds - radius ) + 3 px ) ; height : calc ( var ( -- cds - h - control ) + 10 px ) ; margin - block : 12 px 8 px ; padding : 1 px 5 px ; }
. tb - root [ data - tb - overlay ] . tb - card - start { margin - inline : 12 px 8 px ; }
. tb - root [ data - tb - overlay ] . tb - card - end { margin - inline - end : 12 px ; }
@ container tb ( max - width : 25 rem ) {
. tb - root [ data - tb - overlay ] . tb - card - start { margin - inline : 8 px 6 px ; }
. tb - root [ data - tb - overlay ] . tb - card - end { margin - inline - end : 8 px ; }
}
@ media ( pointer : coarse ) {
. tb - root [ data - tb - overlay ] . tb - card { height : 48 px ; }
}
. 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 : 0 px ; }
. tb - root : not ( [ data - tb - overlay ] ) . tb - card - end > . tb - end - strip > . tb - scroll { margin - inline : -4 px ; padding - inline : 4 px ; scroll - padding - inline : 4 px ; }
. tb - root : not ( [ data - tb - overlay ] ) . tb - end - strip > [ data - tb - paddle ]:: before { content : "" ; background : inherit ; width : 4 px ; position : absolute ; inset - block : 0 px ; }
. tb - root : not ( [ data - tb - overlay ] ) . tb - end - strip > [ data - tb - paddle ]: not ( : last - child ) :: before { left : -4 px ; }
. tb - root : not ( [ data - tb - overlay ] ) . tb - end - strip > [ data - tb - paddle ]: last - child :: before { right : -4 px ; }
. tb - root [ data - tb - overlay ] . tb - scroll { padding - inline : calc ( 4 px + var ( -- tb - strip - pad , 0 px )) ; scroll - padding - inline : calc ( 4 px + var ( -- tb - strip - pad , 0 px )) ; clip - path : inset ( 0 round var ( -- tb - ring - inside )) ; margin - inline : -4 px ; }
@ container tb ( min - width : 20 rem ) {
. tb - card - start [ data - tb - floor ] { min - width : 88 px ; }
. tb - card - start [ data - tb - hug ] { min - width : var ( -- tb - lead - floor , 0 px ) ; }
}
@ media ( pointer : coarse ) {
@ container tb ( min - width : 20 rem ) {
. tb - card - start [ data - tb - floor ] { min - width : 92 px ; }
. tb - root [ data - touch - targets = "square" ] . tb - card - start [ data - tb - floor ] { min - width : 118 px ; }
}
@ container tb ( min - width : 23 rem ) {
. tb - root : not ( [ data - touch - targets = "square" ] ) . tb - card - start [ data - tb - floor ] { min - width : 140 px ; }
}
}
. tb - card - end , . tb - card - end . tb - tail , . tb - card - end . tb - tail > . tb - slot { flex - shrink : 1 ; min - width : 0 px ; }
. 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 % , 3 rem ) ; }
@ container tb ( max - width : 25 rem ) {
. 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.5 rem ) ; }
}
. 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 : 4 px ; }
. 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 : 4 px ; }
. tb - root : not ( [ data - tb - overlay ] ) . tb - lock : first - child { margin - inline - start : 4 px ; }
@ media ( pointer : coarse ) {
. tb - root : not ( [ data - tb - overlay ] ) . tb - lock : first - child { margin - inline - start : 0 px ; }
}
. 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 : 1 px ; height : 18 px ; margin - inline : 2 px ; }
. tb - root [ data - tb - paddle ] { background - color : var ( -- tb - plane ) ; }
. tb - root [ data - tb - overlay ] [ data - tb - paddle ]:: before { content : "" ; background : inherit ; width : 4 px ; position : absolute ; inset - block : 0 px ; }
. tb - root [ data - tb - overlay ] [ data - tb - paddle ]: not ( : last - child ) :: before { left : -4 px ; }
. tb - root [ data - tb - overlay ] [ data - tb - paddle ]: last - child :: before { right : -4 px ; }
. tb - root [ data - tb - overlay ] [ data - tb - paddle ]: not ( : last - child ) { clip - path : inset ( 0 -8 px 0 -4 px 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 -4 px 0 -8 px 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 : 26 rem ) {
. 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 : 0 px ; }
. tb - scroll [ data - tb - lock - words = "yield" ] . tb - yields { text - overflow : ellipsis ; white - space : nowrap ; min - width : 0 px ; overflow : hidden ; }
}
. tb - root [ data - pin - fixed ] . tb - pin - scroll { display : none ; }
. tb - sync - dot { width : 22 px ; height : var ( -- cds - h - control ) ; border - radius : var ( -- cds - radius ) ; cursor : default ; background : 0 px 0 px ; border : 0 px ; 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 : 2 px ; outline : rgba ( 0 , 0 , 0 , 0 ) solid 2 px ; }
}
@ media ( pointer : coarse ) {
. tb - sync - dot { width : 42 px ; height : 42 px ; }
. tb - root . tb - sync - dot { height : var ( -- cds - h - control ) ; position : relative ; }
. tb - root . tb - sync - dot :: before { content : "" ; position : absolute ; inset : -9 px 0 px ; }
. tb - root [ data - touch - targets = "square" ] . tb - sync - dot { width : 28 px ; }
. tb - root [ data - touch - targets = "square" ] . tb - sync - dot :: before { inset : -4 px -8 px -4 px -4 px ; }
}
. tb - sync - dot - mark { background : var ( -- cds - text - muted ) ; border - radius : 9999 px ; width : 8 px ; height : 8 px ; }
@ 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.16 s ; }
. 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.5 px var ( -- cds - text - muted ) ; background : 0 px 0 px ; }
@ media ( prefers - reduced - motion : reduce ) {
. tb - sync - dot - mark { transition : none ; }
}
@ keyframes mc - shimmer {
0 % { background - position : -200 px 0 px ; }
100 % { background - position : 200 px 0 px ; }
}
. 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 : 400 px 100 % ; border - radius : 6 px ; animation : 1.4 s linear 0 s infinite normal none running mc - shimmer ; }
@ media ( prefers - reduced - motion : reduce ) {
. mc - shimmer { animation : auto ease 0 s 1 normal none running none ; }
}
@ keyframes mc - spin {
100 % { transform : rotate ( 360 deg ) ; }
}
. mc - spinner { border : 2 px solid var ( -- t - fg - muted ) ; border - radius : 9999 px ; width : 12 px ; height : 12 px ; display : inline-block ; }
@ supports ( color : color-mix ( in lab , red , red )) {
. mc - spinner { border : 2 px solid color-mix ( in srgb , var ( -- t - fg - muted ) 30 % , transparent ) ; }
}
. mc - spinner { border - top - color : var ( -- t - fg - muted ) ; animation : 0.9 s linear 0 s infinite normal none running mc - spin ; }
@ media ( prefers - reduced - motion : reduce ) {
. mc - spinner { animation : auto ease 0 s 1 normal none running none ; }
}
. kit - scrollbar { scrollbar - width : thin ; scrollbar - color : var ( -- cds - alpha -3 ) transparent ; }
. kit - scrollbar :: -webkit- scrollbar { width : 6 px ; height : 6 px ; }
. kit - scrollbar :: -webkit- scrollbar - track { background : 0 px 0 px ; }
. kit - scrollbar :: -webkit- scrollbar - thumb { background : var ( -- cds - alpha -3 ) ; border - radius : 3 px ; }
. kit - scrollbar :: -webkit- scrollbar - thumb : hover { background : var ( -- cds - alpha -4 ) ; }
. mc - peer - cursors { pointer - events : none ; z - index : 40 ; position : absolute ; inset : 0 px ; overflow : visible ; }
. mc - peer - cursor { will - change : transform ; transition : transform 80 ms linear , opacity 0.2 s ; position : absolute ; top : 0 px ; left : 0 px ; }
. mc - peer - cursor [ data - idle = "true" ] { opacity : 0.55 ; }
. mc - peer - cursor - arrow { filter : drop-shadow ( rgba ( 0 , 0 , 0 , 0.25 ) 0 px 1 px 1 px ) ; display : block ; }
. mc - peer - tag { color : rgb ( 255 , 255 , 255 ) ; position : absolute ; top : 14 px ; left : 12 px ; box - shadow : rgba ( 0 , 0 , 0 , 0.2 ) 0 px 1 px 2 px ; }
. mc - peer - cursor - label { border - radius : 9999 px ; padding : 1 px 6 px ; font - size : 11 px ; line - height : 16 px ; }
. mc - peer - tag - name { white - space : nowrap ; text - overflow : ellipsis ; max - width : 24 ch ; overflow : hidden ; }
. mc - cursor - chat { color : rgb ( 255 , 255 , 255 ) ; white - space : pre ; border - radius : 3 px 16 px 16 px ; padding : 6 px 12 px ; font - size : 13 px ; line - height : 18 px ; display : inline-block ; box - shadow : rgba ( 0 , 0 , 0 , 0.25 ) 0 px 1 px 3 px ; }
. mc - peer - tag - name , . mc - peer - tag - line { animation : 0.12 s ease-out 0.11 s 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 , .6 s ) ease-in-out var ( -- mc - chat - hold , 5 s ) forwards ; }
. mc - peer - tag [ data - beat = "1" ] { animation : mc - cursor - chat - fade -1 var ( -- mc - chat - fade , .6 s ) ease-in-out var ( -- mc - chat - hold , 5 s ) 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 , .6 s ) ease-in-out ; position : fixed ; top : 0 px ; left : 0 px ; }
. mc - cursor - chat - self [ data - fading = "true" ] { opacity : 0 ; }
. mc - cursor - chat - self . mc - cursor - chat { transform - origin : 0 px 0 px ; transition : transform var ( -- mc - chat - exit , .15 s ) ease-in , opacity var ( -- mc - chat - exit , .15 s ) ease-in ; animation : 0.18 s cubic-bezier ( 0.2 , 0.9 , 0.3 , 1.15 ) 0 s 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 : 2 px ; display : block ; }
. mc - cursor - chat - input { width : calc ( 100 % - 22 px ) ; height : 18 px ; color : inherit ; font : inherit ; caret - color : currentcolor ; background : 0 px 0 px ; border : 0 px ; outline : 0 px ; margin : 0 px ; padding : 0 px ; position : absolute ; top : 6 px ; left : 12 px ; }
. mc - cursor - chat - least { height : 0 px ; overflow : hidden ; }
. mc - cursor - chat - input :: placeholder { color : inherit ; opacity : 0.75 ; }
. mc - cursor - chat - below { transition : opacity var ( -- mc - chat - exit , .15 s ) ease-in ; }
. mc - cursor - chat - self [ data - leaving = "true" ] . mc - cursor - chat - below { opacity : 0 ; }
. mc - claude - empty - idle { transition : opacity 0.26 s ; }
. mc - claude - empty - working { transition : opacity 0.26 s , visibility 0.26 s ; }
. 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 % + 68 px , 156 px ) ; position : absolute ; inset : auto 0 px -12 px ; overflow : clip ; }
. mc - claude - empty [ data - working ] . mc - claude - empty - working { opacity : 1 ; visibility : visible ; transition - delay : 0 s ; }
. 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 : 0 px ; left : 0 px ; }
. mc - claude - cursor [ data - glide ] { will - change : transform ; transition : transform var ( -- mc - claude - glide , 0 s ) cubic-bezier ( .2 , 0 , 0 , 1 ), opacity var ( -- cds - dur - base , .2 s ) 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 : 0 px ; left : 0 px ; }
. 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 : 14 px 0 px 0 px 12 px ; display : inline-block ; position : relative ; top : auto ; left : auto ; }
. mc - claude - cursor [ data - align = "centre" ] . mc - claude - cursor - unit { transform : translate ( calc ( -50 % - 6 px )) ; }
. mc - tip - fade { vertical - align : top ; height : 18 px ; 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 : 0 px ; left : 0 px ; }
. mc - tip - line [ data - front ] { opacity : 1 ; transition - timing - function : ease-out ; }
. mc - tip - shimmer , . mc - claude - sheen { animation - duration : 1.45 s ; 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 ( 120 deg , 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 % 0 px ; 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 % 0 px ; animation - timing - function : cubic-bezier ( 0.37 , 0 , 0.63 , 1 ) ; }
94.828 % , 100 % { background - position : 16.667 % 0 px ; }
}
. 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 ( 90 deg , 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 % 0 px , 0 px 0 px ; background - repeat : no-repeat ; background - size : 300 % 100 % , auto ; animation - name : mc - claude - sheen ; }
@ keyframes mc - claude - sheen {
0 % , 5.172 % { background - position : 100 % 0 px , 0 px 0 px ; animation - timing - function : cubic-bezier ( 0.37 , 0 , 0.63 , 1 ) ; }
94.828 % , 100 % { background - position : 0 px 0 px , 0 px 0 px ; }
}
@ 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 0 s 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 0 s 1 normal none running none ; }
}
@ media ( forced - colors : active ) {
. mc - tip - shimmer { -webkit- text - fill - color : canvastext ; background - image : none ; animation : auto ease 0 s 1 normal none running none ; }
. mc - claude - box , . mc - claude - box . mc - claude - sheen { box - sizing : border-box ; background - image : none ; border : 1 px solid canvastext ; animation : auto ease 0 s 1 normal none running none ; }
}
. mc - follow { z - index : 29 ; pointer - events : none ; position : absolute ; inset : 0 px ; }
. mc - follow [ data - framed ] { box - shadow : inset 0 0 0 3 px var ( -- mc - follow ) ; animation : 0.16 s ease-out 0 s 1 normal none running mc - follow - in ; }
. mc - follow - note { top : calc ( var ( -- mc - follow - top , 12 px ) + env ( safe - area - inset - top , 0 px )) ; width : max - content ; max - width : calc ( 100 % - 2 * var ( -- mc - follow - side , 12 px )) ; pointer - events : auto ; color : var ( -- t - fg ) ; align - items : center ; gap : 8 px ; margin - inline : auto ; padding : 5 px 5 px 5 px 12 px ; font - size : 13 px ; animation : 0.16 s ease-out 0 s 1 normal none running mc - follow - in ; display : flex ; position : absolute ; left : 0 px ; right : 0 px ; }
. mc - follow - dot { background : var ( -- mc - follow ) ; border - radius : 50 % ; flex : 0 0 auto ; width : 10 px ; height : 10 px ; }
. mc - follow - tip , . mc - follow - words { min - width : 0 px ; }
. mc - follow - words { white - space : nowrap ; text - overflow : ellipsis ; overflow : hidden ; }
. mc - follow [ data - leading ] . mc - follow - words { width : 14.5 em ; }
@ keyframes mc - follow - in {
0 % { opacity : 0 ; }
}
@ media ( pointer : coarse ) {
. mc - follow - note button { min - height : 40 px ; }
}
@ media ( prefers - reduced - motion : reduce ) {
. mc - follow [ data - framed ] , . mc - follow - note { animation : auto ease 0 s 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.14 s cubic-bezier ( 0.2 , 0 , 0 , 1 ) 0 s 1 normal forwards running slides - lift - in ; }
. slides - lift . slides - lift - held { animation - delay : -140 ms ; }
. slides - lift - out { animation : 0.14 s cubic-bezier ( 0.2 , 0 , 0 , 1 ) 0 s 1 normal none running slides - lift - out ; }
@ media ( prefers - reduced - motion : reduce ) {
. slides - lift { animation : 1 s linear 0 s infinite normal none running slides - lift - still ; }
. slides - lift - out { animation : auto ease 0 s 1 normal none running none ; }
}
@ keyframes slides - uploading {
0 % , 100 % { opacity : 0.12 ; }
50 % { opacity : 0.42 ; }
}
. slides - uploading { animation : 1.6 s ease-in-out 0 s infinite normal none running slides - uploading ; }
@ media ( prefers - reduced - motion : reduce ) {
. slides - uploading { opacity : 0.28 ; animation : auto ease 0 s 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 : 12 rem ; }
body { background : var ( -- cds - bg - editor - canvas ) ; }
: root { -- sl - safe - b : var ( -- mc - foot - inset , 0 px ) ; }
. 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.25 rem ; }
}
@ media ( prefers - reduced - motion : reduce ) {
. sl - panel - peek { animation : auto ease 0 s 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.2 s ; }
. 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.18 s ease-out 0 s 1 normal both running sl - creation - in ; }
. sl - creation - empty , . sl - creation - arrive { animation : 0.26 s ease 0 s 1 normal both running sl - creation - in ; }
@ keyframes sl - creation - out {
100 % { opacity : 0 ; }
}
. sl - creation - empty - out { pointer - events : none ; animation : 0.26 s ease 0 s 1 normal both running sl - creation - out ; }
. sl - creation - fresh > : not ( . sl - creation - under ) { animation : 0.3 s ease-out 0 s 1 normal both running sl - creation - in ; }
. sl - creation - under { animation : 1 ms linear 0.3 s 1 normal both running sl - creation - under - gone ; }
@ keyframes sl - creation - under - gone {
100 % { visibility : hidden ; }
}
. sl - creation - leave { opacity : 0 ; transition : opacity 0.3 s ; }
@ 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 0 s 1 normal none running none ; }
. sl - creation - under { animation - delay : 0 s ; }
. sl - creation - empty - out { opacity : 0 ; animation : auto ease 0 s 1 normal none running none ; }
}
@ media ( forced - colors : active ) {
. sl - creation - sheet { border : 1 px 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 : 54 px ; }
@ media ( pointer : coarse ) {
#root > [ data - placeholder ] { -- tb - overlay - h : 68 px ; }
}
@ media not all and ( min - width : 640 px ) and ( min - height : 460 px ) {
#root > [ data - placeholder ] > [ data - rail = "open" ] { display : none ; }
}
@ media ( min - width : 640 px ) and ( min - height : 460 px ) {
#root > [ data - placeholder ] > [ data - rail = "closed" ] { display : none ; }
}
#root > [ data - placeholder ]: not ( [ data - revealed ] ) . mc - shimmer { animation - play - state : paused ; }
html [ data - frame - capture ] #root > [ data - placeholder ] { display : none ! important ; }
. mc - follow { -- mc - follow - side : 240 px ; }
@ media ( max - width : 900 px ) {
. mc - follow { -- mc - follow - side : 12 px ; -- mc - follow - top : var ( -- tb - overlay - h , 56 px ) ; }
[ data - mc - find ] ~ . mc - follow { -- mc - follow - top : calc ( var ( -- tb - overlay - h , 56 px ) + 52 px ) ; }
}
@ 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 ( 360 deg ) ; }
}
@ 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 : 1 px ; height : 1 px ; overflow : hidden ; clip - path : inset ( 50 % ) ; }
[ data - local - hold ]:: before { position : absolute ; inset : 0 px ; 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 : 0 px ; 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 : 1920 px 1080 px ; margin : 0 px ; }
. 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 : 1920 px ; height : 1080 px }
. deck-fit { position : relative ; width : 1920 px ; height : 1080 px ; overflow : hidden }
. deck-scaler { width : 1920 px ; height : 1080 px }
. deck-js . deck-slide { width : auto ; height : 100 vh ; height : 100 dvh ; 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 ( 1920 px * var ( -- deck - s )); height : calc ( 1080 px * var ( -- deck - s ))}
. deck-js . deck-scaler { transform : scale ( var ( -- deck - s )); transform-origin : 0 0 }
. deck-pager { position : fixed ; z-index : 3 ; right : 16 px ; bottom : 16 px ; padding : 4 px 10 px ; border-radius : 999 px ; background : rgba ( 0 , 0 , 0 , .7 ); color : #fff ; font : 12 px / 1.5 system-ui , sans-serif ; font-variant-numeric : tabular-nums ; opacity : 0 ; transition : opacity .3 s ; 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 : 6 px 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" : "#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" : "#2bb3a3" , "steps" : [{ "hidden" : [], "events" : [], "auto" : false }], "embeds" : []}]}</ script >
2026-10-27 06:29:33 +09:00
< script > (function won(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(ae){return ae.querySelector(".deck-scaler > *")||ae}),l=t.querySelector(".deck-pager"),d=typeof window.matchMedia==="function"?window.matchMedia("(max-aspect-ratio: 1/1)"):null,u={index:0,step:0},f=!1,p=[],m=0,g=0,b=0,h=null,A=[],v=!1,C=!0,y=-1,w=!1;function x(){return typeof window.matchMedia==="function"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}function S(ae){return e.slides[ae]?e.slides[ae].steps.length-1:0}function E(ae,Ae){return c[ae].querySelector('[data-frame-id="'+Ae.replace(/["\\]/g,"")+'"]')}function I(ae){return Array.prototype.slice.call(c[ae].querySelectorAll("[data-frame-id]"))}function N(ae){try{window.history.replaceState(null,"","#"+String(ae+1))}catch(Ae){}}function k(ae){if(l===null)return;l.textContent=String(ae+1)+" / "+String(a),l.setAttribute("data-on",""),clearTimeout(g),g=window.setTimeout(function(){if(l!==null)l.removeAttribute("data-on")},1600)}function R(){var ae=n.scrollTop,Ae=0;for(var K=1;K<a;K++)if(Math.abs(s[K].offsetTop-ae)<Math.abs(s[Ae].offsetTop-ae))Ae=K;return Ae}function T(ae){ae=Math.max(0,Math.min(a-1,ae)),u={index:ae,step:0},s[ae].scrollIntoView(),N(ae),k(ae)}function B(ae,Ae){var K=e.slides[ae],ue=K&&K.steps[Ae]?K.steps[Ae].hidden:[],fe=I(ae);for(var le=0;le<fe.length;le++){var Me=fe[le].getAttribute("data-frame-id")||"";if(ue.indexOf(Me)>=0)fe[le].setAttribute("data-build-hidden","");else fe[le].removeAttribute("data-build-hidden")}}function P(){for(var ae=0;ae<p.length;ae++)p[ae].cancel();p=[]}function M(ae,Ae){var K=e.slides[ae],ue=K&&K.steps[Ae]?K.steps[Ae].events:[];for(var fe=0;fe<ue.length;fe++){var le=ue[fe],Me=E(ae,le.id),xe=e.effects[le.effect];if(Me===null||xe===void 0||typeof Me.animate!=="function")continue;var Te=Me.style.transform!==""&&Me.style.transform!=="none"?Me.style.transform:"",Ze={transform:(Te+" "+xe.transform).trim()||"none",opacity:0},We={transform:Te===""?"none":Te,opacity:1};if(Me.removeAttribute("data-build-hidden"),le.dir==="in")p.push(Me.animate([Ze,We],{duration:e.buildMs,easing:xe.easing,fill:"none"}));else{var ze=Me.animate([We,Ze],{duration:e.buildMs,easing:e.exitEasing,fill:"none"});(function(xt,Qt){Qt.finished.then(function(){xt.setAttribute("data-build-hidden","")},function(){})})(Me,ze),p.push(ze)}}}var F="position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:transparent",L="position:absolute;inset:0;box-sizing:border-box;align-items:center;justify-content:center;text-align:center;background:rgba(115,114,108,0.12);border:2px dashed rgba(115,114,108,0.4);color:#73726C;font:24px system-ui,sans-serif";function D(ae,Ae){if(ae.iframe.parentNode!==null)ae.iframe.parentNode.removeChild(ae.iframe);ae.host.setAttribute("data-embed-dead","");var K=t.createElement("div");K.setAttribute("data-embed-dead-label",""),K.setAttribute("style",L),K.textContent=Ae,ae.host.appendChild(K)}function V(ae){v=!0;var Ae=A;A=[];for(var K=0;K<Ae.length;K++)D(Ae[K],ae)}function W(){var ae=A;A=[];for(var Ae=0;Ae<ae.length;Ae++){if(ae[Ae].iframe.parentNode!==null)ae[Ae].iframe.parentNode.removeChild(ae[Ae].iframe);var K=ae[Ae].host.querySelector("[data-embed-under]");if(K!==null)K.removeAttribute("data-embed-under")}}function _(ae){if(!e.live||v)return;var Ae=e.slides[ae]?e.slides[ae].embeds:[];for(var K=0;K<Ae.length;K++){var ue=E(ae,Ae[K].id);if(ue===null||ue.hasAttribute("data-embed-dead"))continue;var fe=ue.firstElementChild;if(fe!==null)fe.setAttribute("data-embed-under",""),fe.setAttribute("data-embed-pic","");var le=t.createElement("iframe");le.setAttribute("sandbox","allow-scripts"),le.setAttribute("inert",""),le.setAttribute("tabindex","-1"),le.setAttribute("referrerpolicy","no-referrer"),le.setAttribute("title","Embedded web content (sandboxed)"),le
2026-10-25 19:43:56 +09:00
</ 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)" >
2026-10-27 06:29:33 +09:00
< section class = "deck-slide" id = "1" aria-roledescription = "slide" aria-label = "Slide 1 of 10" data-document-role = "page" data-label = "사람 1명 + AI 직원, 17시간 만에 채널을 열다" data-speaker-notes = "네 번째는 성격이 조금 다릅니다. 지금까지 본 세 편의 영상을 만든 'AI 사업일지' 채널이, 그 채널과 첫 영상을 어떻게 만들었는지 공개한 제작기입니다. 사람 한 명이 AI 툴에 역할을 나눠 맡겨 17시간 만에 채널을 열었습니다. 그리고 그 첫 영상이 바로 우리가 첫 번째로 본 지도 게임 영상입니다. 이번 자료는 영상 설명과 챕터만 공개돼 있어서, 공개되지 않은 세부 내용은 지어내지 않고 비워 두었습니다." >< 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(242, 153, 74);" ></ 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(242, 153, 74); 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;" > 바이브코딩 케이스 스터디 #4 · 제작기</ 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;" > 사람 1명 + AI 직원,
17시간 만에 채널을 열다</ 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;" > 코드 0줄로 유튜브 채널과 첫 영상을 만든 하루,
핵심은 속도가 아니라 ‘AI가 AI를 검토하는 구조’</ 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;" > 출처: AI 사업일지 「실전기 #1」 영상 설명·챕터(2026.10)</ 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 = "숫자 네 개로 보는 하루" data-speaker-notes = "결론부터 보면, 새벽 4시 32분에 시작해 밤 9시 37분에 첫 영상 업로드 준비를 마쳤습니다. 약 17시간입니다. 사람이 짠 코드는 0줄이고, 역할을 나눠 맡은 AI 직원이 10명, 사람은 1명입니다. 단, 대본은 전부 사람이 읽고 승인했습니다. 영상 속 시각과 숫자는 감이 아니라 작업 파일의 생성 시각과 작업 지시 로그에서 가져왔다고 밝힌 점도 짚어 주세요. 기록을 남기는 습관 자체가 교훈입니다." >< 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-19xwch5" style = "position: absolute; inset: 0px; box-sizing: border-box;" >< div data-node-path = "" style = "display: flex; flex-direction: column; align-items: stretch; gap: 64px; 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: 12px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; 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 = "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: 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;" > 17시간</ 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.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;" > 새벽 4시 32분 시작, 밤 9시 37분 첫 업로드 준비</ 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: rg
<section class=" deck-slide " id = "3" aria-roledescription = "slide" aria-label = "Slide 3 of 10" data-document-role = "page" data-label = "그날 만든 첫 영상, 우리가 이미 봤다" data-speaker-notes = "이 영상 설명란에 1편과 2편 링크가 붙어 있습니다. 1편이 우리가 첫 시간에 본 GeoSports 지도 게임 영상, 2편이 복근 앱 영상입니다. 즉 지금까지 본 성공담 영상 자체가 AI 팀으로 만든 결과물입니다. 수강생에게 질문해 보세요. 앞서 본 영상들이 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-1rciku5" 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;" > 새벽 4시 32분</ 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(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;" > 04:32 시작</ 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(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: 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 64 32" preserveAspectRatio = "none" style = "width: 64px; height: 32px; min-width: 0px; min-height: 0px; display: block;" >< polygon points = "0.00,9.6
<section class=" deck-slide " id = "4" aria-roledescription = "slide" aria-label = "Slide 4 of 10" data-document-role = "page" data-label = "AI에게 이름표를 붙여 일을 나눴다" data-speaker-notes = "설명란에 나온 역할은 리서치, 대본 초안, 팩트체크, 편집입니다. 영상에서는 10명의 AI 직원이라고 하는데, 열 개 역할의 구체적인 이름은 공개 자료에 없어서 슬라이드에는 확인된 단계만 넣었습니다. 영상을 함께 보신다면 02:06 챕터에서 실제 역할 이름을 확인해 이 슬라이드에 채워 넣으셔도 좋습니다. 구조의 핵심은 두 가지입니다. 사람이 양 끝, 즉 방향과 최종 승인을 쥐고 있다는 것, 그리고 검토를 만든 AI가 아닌 다른 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-1mma2kj" 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;" > 직원 10명, 사람 1명</ 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;" > AI에게 이름표를 붙여 일을 나눴다</ div ></ div >< div data-node-path = "1" style = "display: flex; flex-direction: row; align-items: center; 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(15, 27, 45); padding: 32px; border-radius: 16px; box-sizing: border-box;" >< div data-text-path = "1.0.0" data-node-path = "1.0.0" style = "font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; 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.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(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 >< svg data-node-path = "1.1" data-shape = "arrow-right" viewBox = "0 0 48 24" preserveAspectRatio = "none" style = "width: 48px; height: 24px; min-width: 0px; min-height: 0px; display: block;" >< polygon points = "0.00,7.20 28.80,7.20 28.80,2.40 48.00,12.00 28.80,21.60 28.80,16.80 0.00,16.80" fill = "#8fa3b0" stroke-linejoin = "round" ></ polygon ></ svg >< 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%;
<section class=" deck-slide " id = "5" aria-roledescription = "slide" aria-label = "Slide 5 of 10" data-document-role = "page" data-label = "영상 태그에 이름을 올린 도구들" data-speaker-notes = "태그에 Claude, Claude Code, ElevenLabs가 올라 있습니다. 설명란에서 직접 확인되는 건 'Claude 등이 리서치, 대본 초안, 팩트체크, 편집을 맡았다'는 정도이고, 도구별 정확한 분담은 나와 있지 않습니다. ElevenLabs는 음성 합성 서비스라 내레이션에 썼을 가능성이 높지만 추정입니다. 수강생에게 강조할 점은 아래 두 카드입니다. AI 직원 열 명은 AI 열 개를 산 게 아니라 역할을 열 개로 나눴다는 뜻에 가깝고, Claude Code 같은 코딩 도구도 영상 제작 같은 비개발 업무에 쓸 수 있다는 것. 이 두 카드는 제 해석이라는 점을 함께 말씀해 주세요." >< 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-1ue1hlo" 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: grid; grid-template-columns: 24fr 40fr 36fr; 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(42, 53, 66); background-color: rgb(251, 251, 248); border-width: 2px 1px 1px 2px; border-style: solid; border-color: rgba(20, 20, 19, 0.22) rgb(220, 226, 223) rgb(220, 226, 223) rgba(20, 20, 19, 0.22); border-radius: 16px;" >< div data-cell = "0.0" style = "border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 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(243, 245, 242); font-weight: 600; background: rgb(15, 27, 45);" > 도구</ div >< div data-cell = "0.1" style = "border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 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(243, 245, 242); font-weight: 600; background: rgb(15, 27, 45);" > 어떤 도구인가</ div >< div data-cell = "0.2" style = "border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 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(243, 245, 242); font-weight: 600; background: rgb(15, 27, 45);" > 우리 수업과의 연결</ div >< div data-cell = "1.0" style = "bor
<section class=" deck-slide " id = "6" aria-roledescription = "slide" aria-label = "Slide 6 of 10" data-document-role = "page" data-label = "진짜 교훈은 속도가 아니었다" data-speaker-notes = "이 영상이 스스로 꼽은 핵심 교훈입니다. 17시간이라는 속도보다, 첫 AI가 틀려도 다른 AI가 잡아내게 만든 구조가 중요했다는 것. 오른쪽 카드는 왜 그 구조가 효과적인지에 대한 강의용 설명입니다. 같은 대화 안에서 쓴 AI에게 다시 검토를 시키면 자기 논리에 끌려가기 쉽습니다. 그래서 만드는 과정을 모르는 별도의 검토자가 원본 출처와 대본을 대조하게 합니다. 우리 과정 3~4단원에서 다룬 평가 노드, 품질 검증 단계와 같은 원리입니다." >< 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-9j1141" 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(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;" > AI가 AI를 잡았다</ 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;" > 진짜 교훈은 속도가 아니었다</ 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: 24px; min-width: 700px; min-height: 0px; max-width: 700px;" >< div data-text-path = "1.0.0" data-node-path = "1.0.0" style = "font-family: "Noto Sans KR", Arial, ui-sans-serif, system-ui, sans-serif; font-size: 44px; font-weight: 700; line-height: 1.4; 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의 실수를
다른 AI 검수 단계가
잡도록 짠 구조</ 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: 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; 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(22, 38, 61); padding: 40px; 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(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;" > 왜 다른 AI인가</ 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(220, 230, 232); 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.1" style = "display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0px; min-height: 0px; background-color: rgb(22, 38, 61); padding: 40px; 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(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.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(220, 230, 232); 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 ></ div >< div data-frame-id = "e1-9j1141" 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;" > 출처: 「실전기 #1」 영상 설명 · 오른쪽 두 카드는 강의용 설명</ 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 = "사람은 만들지 않고, 정하고 책임졌다" data-speaker-notes = "04:50 챕터 '사람이 한 일'에 해당합니다. 설명란 기준으로 사람이 한 일은 세 가지입니다. 주제와 방향을 고르고, 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-vfr7ne" 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: 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: 72px; font-weight: 900; line-height: 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;" > 01</ 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(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: 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: 16px; min-width: 0px; min-height: 0px; flex-grow: 1; flex-basis: 0%; background-c
<section class=" deck-slide " id = "8" aria-roledescription = "slide" aria-label = "Slide 8 of 10" data-document-role = "page" data-label = "100만 달러, 그 숫자는 무엇이었나" data-speaker-notes = "06:29 챕터 '팩트체커가 뒤집은 숫자'입니다. 영상 설명에는 팩트체커가 100만 달러 숫자를 바로잡았다는 사실만 있고, 무엇이 어떻게 틀렸는지는 나와 있지 않습니다. 다만 2편 복근 앱 영상 설명에 '100만 달러는 판매자 제시가이지 실제 거래가가 아니다'라는 단서가 붙어 있어서, 이 구분이 바로 그 수정이었을 가능성이 있습니다. 확인된 사실은 아니라는 점을 꼭 밝혀 주세요. 영상을 함께 보신다면 06:29 부분에서 실제 내용을 확인해 이 슬라이드를 보완하시면 됩니다." >< 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-j3hcgh" 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;" > 100만 달러, 그 숫자는 무엇이었나</ 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: 560px; min-height: 0px; max-width: 560px;" >< 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: 160px; 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;" > $1M</ 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;" > 영상은 팩트체커 AI가 100만 달러 숫자를 바로잡은 실제 사례를 보여 준다고 밝힌다</ 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
<section class=" deck-slide " id = "9" aria-roledescription = "slide" aria-label = "Slide 9 of 10" data-document-role = "page" data-label = "이 강의 자료를 만들며 잡아낸 숫자들" data-speaker-notes = "이 슬라이드는 영상 내용이 아니라 우리 수업 자료를 만들면서 실제로 발견한 것들입니다. 앞의 세 덱 역시 AI로 조사하고 작성했는데, 영상 제목의 숫자를 원본 인터뷰와 공개 매출 기록에 대조해 보니 이런 차이가 있었습니다. 영상이 거짓말을 했다기보다 제목을 눈에 띄게 다듬은 결과에 가깝습니다. 핵심은 이 영상이 말하는 구조, 즉 만든 것과 다른 눈으로 원본과 대조하는 단계가 실제로 필요하다는 것을 우리가 직접 경험했다는 점입니다. 수강생에게 '여러분의 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-z10yv2" 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: grid; grid-template-columns: 18fr 30fr 52fr; 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: 26px; font-weight: 400; line-height: 1.4; color: rgb(42, 53, 66); background-color: rgb(251, 251, 248); border-width: 2px 1px 1px 2px; border-style: solid; border-color: rgba(20, 20, 19, 0.22) rgb(220, 226, 223) rgb(220, 226, 223) rgba(20, 20, 19, 0.22); border-radius: 16px;" >< div data-cell = "0.0" style = "border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 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(243, 245, 242); font-weight: 600; background: rgb(15, 27, 45);" > 사례</ div >< div data-cell = "0.1" style = "border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 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(243, 245, 242); font-weight: 600; background: rgb(15, 27, 45);" > 영상 제목·설명의 표현</ div >< div data-cell = "0.2" style = "border-right: 2px solid rgba(20, 20, 19, 0.22); border-bottom: 2px solid rgba(20, 20, 19, 0.22); padding: 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(243, 245, 242); font-weight: 600; background: rgb(15, 27, 45);" > 원본 출처와 대조한 결과</ div >< div data
< section class = "deck-slide" id = "10" aria-roledescription = "slide" aria-label = "Slide 10 of 10" data-document-role = "page" data-label = "나만의 AI 팀을 만드는 공식 4가지" data-speaker-notes = "마무리입니다. 이 영상은 사실상 멀티에이전트 워크플로우의 실전 사례입니다. 역할별 노드로 나누고, 별도의 검토 노드를 두고, 사람이 최종 승인하는 휴먼 인 더 루프 구조, 그리고 로그를 남기는 관측 가능성까지. 우리 과정 5단원의 슈퍼바이저 패턴과 2부 프로젝트에서 다루는 구조와 그대로 겹칩니다. 과제 제안: 각자 진행 중인 바이브코딩 과제에 '검토 전용 AI'를 하나 붙여 보게 하세요. 코드를 짠 세션과 다른 세션에서, 원래 요구사항과 결과물을 대조하게 하고 무엇을 잡아냈는지 기록해 오게 하면 됩니다." >< 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-xq8rq5" 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;" > 나만의 AI 팀을 만드는 공식 4가지</ 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;"
2026-10-25 19:43:56 +09:00
</ main >
< div class = "deck-pager" aria-hidden = "true" ></ div >
</ body >
</ html >
