/*! Oatbase v0.1.0 includes @knadh/oat (MIT); THIRD_PARTY_NOTICES.md */
@layer theme,base,components,animations,utilities;@layer base{*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}*{margin:0}html{tab-size:4}body,dialog,[popover]{font-family:var(--font-sans);font-size:var(--text-regular);line-height:var(--leading-normal);color:var(--foreground)}body{background-color:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}main{padding-block-start:var(--space-8)}img,picture,video,canvas,svg{max-width:100%}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:1.25;&:first-child{margin-block-start:0}}h1{font-size:var(--text-1);margin:var(--space-10) 0 var(--space-6)}h2{font-size:var(--text-2);margin:var(--space-8) 0 var(--space-5)}h3{font-size:var(--text-3);margin:var(--space-6) 0 var(--space-4)}h4{font-size:var(--text-4);margin:var(--space-5) 0 var(--space-3)}h5{font-size:var(--text-5);margin:var(--space-4) 0 var(--space-2)}h6{font-size:var(--text-regular);margin:var(--space-4) 0 var(--space-2)}p{margin-block-end:var(--space-4);&:last-child{margin-block-end:0}}a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;transition:color var(--transition-fast);&:hover{color:rgb(from var(--primary) r g b / .8)}}strong,b{font-weight:var(--font-semibold)}em,i{font-style:italic}small{font-size:var(--text-7)}code{font-family:var(--font-mono);font-size:.875em;padding:calc(var(--space-1) / 2) var(--space-1);background-color:var(--faint);border-radius:var(--radius-small)}pre{font-family:var(--font-mono);padding:var(--space-4);background-color:var(--faint);border-radius:var(--radius-medium);overflow-x:auto;margin-block-end:var(--space-4);code{padding:0;background:none;border-radius:0}}blockquote{border-inline-start:4px solid var(--border);padding-inline-start:var(--space-4);margin:var(--space-4) 0;color:var(--muted-foreground);font-style:italic}hr{border:none;border-top:1px solid var(--border);margin:var(--space-8) 0}ul,ol{padding-inline-start:var(--space-6);margin-block-end:var(--space-4)}ul{list-style-type:disc}ol{list-style-type:decimal}li{margin-block-end:var(--space-1)}mark{background-color:rgb(from var(--warning) r g b / .3);padding:calc(var(--space-1) / 2) var(--space-1);border-radius:var(--radius-small)}[hidden]{display:none}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}:disabled,[aria-disabled=true]{cursor:not-allowed;opacity:.5}}@layer theme{:root{color-scheme:light dark;--background: light-dark(#fff, #09090b);--foreground: light-dark(#09090b, #fafafa);--card: light-dark(#fff, #18181b);--card-foreground: light-dark(#09090b, #fafafa);--primary: light-dark(#574747, #fafafa);--primary-foreground: light-dark(#fafafa, #18181b);--secondary: light-dark(#f4f4f5, #27272a);--secondary-foreground: light-dark(#574747, #fafafa);--muted: light-dark(#f4f4f5, #27272a);--muted-foreground: light-dark(#71717a, #a1a1aa);--faint: light-dark(#fafafa, #1e1e21);--faint-foreground: light-dark(#a1a1aa, #71717a);--accent: light-dark(#f4f4f5, #27272a);--danger: light-dark(#d32f2f, #f4807b);--danger-foreground: light-dark(#fafafa, #18181b);--success: light-dark(#008032, #6cc070);--success-foreground: light-dark(#fafafa, #18181b);--warning: light-dark(#a65b00, #f0a030);--warning-foreground: #09090b;--border: light-dark(#d4d4d8, #52525b);--input: light-dark(#d4d4d8, #52525b);--ring: light-dark(#574747, #d4d4d8);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-14: 3.5rem;--space-16: 4rem;--space-18: 4.5rem;--radius-small: .125rem;--radius-medium: .375rem;--radius-large: .75rem;--radius-full: 9999px;--bar-height: .5rem;--font-sans: system-ui, sans-serif;--font-mono: ui-monospace, Consolas, monospace;--text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);--text-2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);--text-3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);--text-4: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);--text-5: 1.125rem;--text-6: 1rem;--text-7: .875rem;--text-8: .75rem;--text-regular: var(--text-6);--leading-normal: 1.5;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 600;--shadow-small: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-medium: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-large: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition: .2s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 50;--z-modal: 200}[data-variant=success]{--_variant-color: var(--success)}[data-variant=warning]{--_variant-color: var(--warning)}:is([data-variant=danger],[data-variant=error]){--_variant-color: var(--danger)}}@layer animations{@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}dialog::backdrop{opacity:1;transition:opacity .15s cubic-bezier(.4,0,.2,1);@starting-style{opacity:0}}@keyframes fade-in-up{0%{opacity:.6;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}}@layer components{figure[data-variant=avatar]:not([role=group]){display:inline-flex;align-items:center;justify-content:center;width:var(--sz, 2.5rem);height:var(--sz, 2.5rem);color:var(--primary);background-color:var(--muted);border-radius:var(--radius-full);font-weight:var(--font-medium);overflow:hidden;>img{width:100%;height:100%;object-fit:cover}&.small{--sz: 2rem}&.large{--sz: 3.25rem}}figure[data-variant=avatar][role=group]{display:inline-flex;align-items:center;margin:0;& figure[data-variant=avatar]{isolation:isolate;margin-inline-end:calc(var(--space-5) * -1);border:2px solid var(--background);&:last-child{margin-inline-end:0}}&.small{--sz: 2rem;& figure[data-variant=avatar]{margin-inline-end:calc(var(--space-4) * -.8);border-width:1px}}&.large{--sz: 3.25rem;& figure[data-variant=avatar]{margin-inline-end:calc(var(--space-6) * -1)}}}}@layer base{:is(button,[type=submit],[type=reset],[type=button],a.button),::file-selector-button{--_hov: color-mix(in srgb, var(--primary), white 25%);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-7);font-weight:var(--font-medium);line-height:var(--leading-normal);white-space:nowrap;text-decoration:none;background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-medium);border:1px solid;border-color:rgb(255 255 255 / .15) rgb(0 0 0 / .2) rgb(0 0 0 / .2) rgb(255 255 255 / .15);transition:background-color var(--transition-fast),opacity var(--transition-fast),transform var(--transition-fast);&:not(:disabled){cursor:pointer}&:hover:not(:disabled){background-color:var(--_hov)}&:active:not(:disabled){transform:translate(1px,1px)}&[data-variant=secondary]{--_hov: color-mix(in srgb, var(--secondary), black 10%);background-color:var(--secondary);color:var(--secondary-foreground);border-color:rgb(255 255 255 / .5) rgb(0 0 0 / .1) rgb(0 0 0 / .1) rgb(255 255 255 / .5)}&[data-variant=danger]{--_hov: color-mix(in srgb, var(--danger), black 15%);background-color:var(--danger);color:var(--danger-foreground)}&:is(.outline,.ghost){--_hov: var(--accent);background-color:transparent;color:var(--foreground);&[data-variant=danger]{--_hov: color-mix(in srgb, var(--danger), transparent 90%);color:var(--danger)}&[data-variant=secondary]{--_hov: color-mix(in srgb, var(--secondary), transparent 80%);color:var(--secondary-foreground)}}&.outline{border-color:var(--border);&[data-variant=danger]{border-color:var(--danger)}&[data-variant=secondary]{border-color:var(--secondary)}}&.ghost{border-color:transparent}&.small{padding:var(--space-1) var(--space-3);font-size:var(--text-8)}&.large{height:3rem;padding:0 var(--space-6);font-size:var(--text-regular)}&.icon{width:2.5rem;padding:0;&.small{width:2rem}&.large{width:3rem}}}::file-selector-button{background-color:transparent;color:var(--foreground);border:1px solid var(--border)}::file-selector-button:hover{background-color:var(--accent)}}@layer components{menu.buttons{list-style-type:none;padding-inline-start:0;display:inline-flex;>li{&:first-child>*{border-start-start-radius:var(--radius-medium);border-end-start-radius:var(--radius-medium)}&:last-child>*{border-start-end-radius:var(--radius-medium);border-end-end-radius:var(--radius-medium)}>*{border-radius:0}&:not(:last-child)>*{border-inline-end:1px solid rgb(from var(--primary-foreground) r g b / .2)}}}}@layer base{label{display:block;font-size:var(--text-7);font-weight:var(--font-medium);&:has(input:where([type=checkbox],[type=radio])){display:inline-flex;align-items:center;gap:var(--space-2);row-gap:0;font-weight:var(--font-normal)}}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),textarea,select){font-family:var(--font-sans);width:100%;margin-block-start:var(--space-1);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:var(--leading-normal);background-color:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius-medium);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);&::placeholder{color:var(--muted-foreground)}&:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgb(from var(--ring) r g b / .2);z-index:1}&:disabled{background-color:var(--muted)}&:is([aria-invalid=true],:user-invalid){border-color:var(--danger);&:focus{box-shadow:0 0 0 2px rgb(from var(--danger) r g b / .2)}}}textarea{height:auto;min-height:5rem;padding:var(--space-3);resize:vertical}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-2) center;padding-inline-end:var(--space-6)}input:where([type=checkbox],[type=radio]){appearance:none;width:1rem;height:1rem;margin:0;position:relative;background-color:var(--background);border:1px solid var(--input);transition:background-color var(--transition-fast),border-color var(--transition-fast);&:checked{background-color:var(--primary);border-color:var(--primary);&:after{content:"";position:absolute;inset:0;background-color:var(--primary-foreground);mask-position:center;mask-repeat:no-repeat;mask-size:100%}}}input[type=checkbox]{border-radius:var(--radius-small);&:checked:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}&[role=switch]{--switch-height: calc(var(--bar-height) * 3);--switch-inset: 2px;--switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);width:calc(var(--switch-height) * 2);height:var(--switch-height);border-radius:var(--radius-full);background-color:var(--input);&:before{content:"";position:absolute;top:50%;left:var(--switch-inset);transform:translateY(-50%);width:var(--switch-thumb);height:var(--switch-thumb);background-color:var(--background);border-radius:var(--radius-full);transition:transform var(--transition);box-shadow:var(--shadow-small)}&:checked{background-color:var(--primary);&:after{content:none}&:before{transform:translateY(-50%) translate(var(--switch-height))}}}}input[type=radio]{border-radius:var(--radius-full);&:checked:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E")}}:where(input:where([type=checkbox],[type=radio],[type=range]),select):not(:disabled),label:has(input:where([type=checkbox],[type=radio]):not(:disabled)){cursor:pointer}input[type=range]{width:100%;height:var(--bar-height);appearance:none;background:var(--muted);border-radius:var(--radius-full);&::-webkit-slider-thumb{appearance:none;width:1.25rem;height:1.25rem;background:var(--primary);border-radius:var(--radius-full);transition:transform var(--transition-fast);&:hover{transform:scale(1.1)}}&::-moz-range-thumb{width:1.25rem;height:1.25rem;background:var(--primary);border:none;border-radius:var(--radius-full)}}fieldset{border:1px solid var(--border);border-radius:var(--radius-medium);padding:var(--space-4);margin-block-end:var(--space-4)}legend{font-size:var(--text-7);font-weight:var(--font-medium);padding:0 var(--space-2)}}@layer components{fieldset.group{display:flex;align-items:stretch;border:none;padding:0;>:is(input,textarea,select){flex:1;margin-block-start:0;&:not(:focus):not(:last-child){border-inline-end-color:transparent}}>:is(input,textarea,select,button){border-radius:0;&:first-child{border-radius:var(--radius-medium) 0 0 var(--radius-medium)}&:last-child{border-radius:0 var(--radius-medium) var(--radius-medium) 0}}>legend{float:inline-start;display:inline-flex;align-items:center;padding:0 var(--space-3);line-height:var(--leading-normal);font-weight:var(--font-normal);color:var(--muted-foreground);background-color:var(--muted);border:1px solid var(--input);border-inline-end:none;border-radius:var(--radius-medium) 0 0 var(--radius-medium)}}[data-field]{margin-block-end:var(--space-4);flex-wrap:wrap;[data-hint],.error{font-size:var(--text-8);font-weight:var(--font-normal);color:var(--muted-foreground);margin-block-start:var(--space-1);display:block;flex-basis:100%;min-inline-size:100%}.error{display:none}&:is([aria-invalid=true],:has([aria-invalid=true])) .error{display:block;color:var(--danger)}}}@layer base{.table{min-width:320px;width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:var(--text-7)}thead{border-bottom:1px solid var(--border)}tfoot{border-top:1px solid var(--border)}th,td{overflow-wrap:break-word}th{padding:var(--space-3) var(--space-2);text-align:start;font-weight:var(--font-medium);color:var(--muted-foreground)}td{padding:var(--space-3) var(--space-2)}tbody tr{border-bottom:1px solid var(--border);transition:background-color var(--transition-fast);&:last-child{border-bottom:none}&:hover{background-color:rgb(from var(--muted) r g b / .5)}}}@layer base{progress,meter{appearance:none;width:100%;height:var(--bar-height);border:none;border-radius:var(--radius-full);overflow:hidden;background:var(--muted)}progress{&::-webkit-progress-bar{background-color:var(--muted);border-radius:var(--radius-full)}&::-webkit-progress-value{background-color:var(--primary);border-radius:var(--radius-full);transition:width var(--transition)}&::-moz-progress-bar{background-color:var(--primary);border-radius:var(--radius-full)}}meter{&::-webkit-meter-bar{background:var(--muted);border:none;border-radius:var(--radius-full);height:var(--bar-height)}&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{border-radius:var(--radius-full)}&::-webkit-meter-optimum-value{background:var(--success)}&::-webkit-meter-suboptimum-value{background:var(--warning)}&::-webkit-meter-even-less-good-value{background:var(--danger)}&::-moz-meter-bar{background:var(--success);border-radius:var(--radius-full)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--warning)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--danger)}}}@layer components{[aria-busy=true]{&:before{content:"";display:inline-block;width:1.5rem;height:1.5rem;border:2px solid var(--muted);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}&[data-spinner~=small]:before{width:1rem;height:1rem}&[data-spinner~=large]:before{width:2rem;height:2rem;border-width:3px}&[data-spinner~=overlay]{position:relative;>*{opacity:.3;pointer-events:none}&:before{position:absolute;inset:0;margin:auto;z-index:1}}}@keyframes spin{to{transform:rotate(360deg)}}}@layer components{:root{--grid-cols: 12;--grid-gap: 1.5rem;--container-max: 1280px;--container-pad: 1rem}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}.row{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap);width:100%}.col,[class*=col-]{grid-column-end:span calc(var(--span, var(--grid-cols)) + var(--offset, 0))}.col-1{--span: 1}.col-2{--span: 2}.col-3{--span: 3}.col-4{--span: 4}.col-5{--span: 5}.col-6{--span: 6}.col-7{--span: 7}.col-8{--span: 8}.col-9{--span: 9}.col-10{--span: 10}.col-11{--span: 11}.col-12{--span: 12}.offset-1{--offset: 1}.offset-2{--offset: 2}.offset-3{--offset: 3}.offset-4{--offset: 4}.offset-5{--offset: 5}.offset-6{--offset: 6}[class*=offset-]{margin-inline-start:calc(var(--offset) * (100% + var(--grid-gap)) / (var(--span) + var(--offset)))}.col-end{grid-column-start:span var(--span, 1);grid-column-end:-1}@media(max-width:768px){.row{--grid-cols: 4;--grid-gap: 1rem}.col,[class*=col-]{--span: 4}[class*=offset-]{--offset: 0;margin-inline-start:0}}}@layer components{.card{background-color:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);padding:var(--space-6)}}@layer components{[role=alert]{position:relative;display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-6);background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);font-size:var(--text-7);&[data-variant]{border:none}&:is([data-variant=error],[data-variant=danger],[data-variant=success],[data-variant=warning]){color:var(--_variant-color);background-color:light-dark(color-mix(in srgb,var(--_variant-color) 8%,transparent),color-mix(in srgb,var(--_variant-color) 20%,transparent));& a{color:var(--_variant-color)}}}}@layer components{.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-1) var(--space-4);font-size:var(--text-8);font-weight:var(--font-medium);text-wrap:nowrap;line-height:var(--leading-normal);background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-full);&.outline{background-color:transparent;color:var(--foreground);border:1px solid var(--border)}&[data-variant=secondary]{background-color:var(--secondary);color:var(--secondary-foreground)}&:is([data-variant=success],[data-variant=warning],[data-variant=danger]){color:var(--_variant-color);background-color:light-dark(color-mix(in srgb,var(--_variant-color) 10%,transparent),color-mix(in srgb,var(--_variant-color) 30%,transparent))}position:relative;button{all:unset;position:absolute;right:0;padding-inline:var(--space-3) var(--space-2);cursor:pointer;opacity:0;pointer-events:none;border-start-end-radius:inherit;border-end-end-radius:inherit;background-color:color-mix(in srgb,var(--muted) 60%,transparent);transition:opacity var(--transition-fast)}&:hover button,button:focus-visible{opacity:1;pointer-events:auto}}}@layer components{details{border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;+details{margin-top:-1px;border-start-start-radius:0;border-start-end-radius:0}&:has(+details){border-end-start-radius:0;border-end-end-radius:0}&[open] summary{border-bottom:1px solid var(--border)}}summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4);font-weight:var(--font-medium);cursor:pointer;user-select:none;transition:background-color var(--transition-fast);&:hover{background-color:var(--muted)}&::-webkit-details-marker,&::marker{display:none}&:after{content:"";width:1em;height:1em;flex-shrink:0;background-color:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition-fast)}details[open] &:after{transform:rotate(180deg)}}details>*:not(summary){margin:var(--space-4)}details[open]>*:not(summary){animation:fade-in-up .3s both}}@layer components{[role=tablist]{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background-color:var(--muted);border-radius:var(--radius-medium)}[role=tab]{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-3);font-size:var(--text-7);font-weight:var(--font-medium);white-space:nowrap;background-color:transparent;color:var(--foreground);border:none;border-radius:calc(var(--radius-medium) - 2px);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast);&:hover{color:var(--muted-foreground)}&[aria-selected=true]{background-color:var(--background);box-shadow:var(--shadow-small)}}[role=tabpanel]{padding:var(--space-4) 0;&:focus-visible{outline:none}&:not([hidden]){animation:fade-in-up .3s both}}}@layer components{dialog{position:fixed;inset:0;z-index:var(--z-modal);width:min(100% - 2rem,32rem);max-height:85vh;margin:auto;padding:0;background-color:var(--card);border:1px solid var(--border);border-radius:var(--radius-large);box-shadow:var(--shadow-large);overflow:hidden;opacity:0;transform:scale(.95);transition:opacity .15s ease,transform .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete;&:is([open],:popover-open){opacity:1;transform:scale(1)}@starting-style{&:is([open],:popover-open){opacity:0;transform:scale(.95)}}&::backdrop{background-color:#0000;transition:background-color .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete}&:is([open],:popover-open)::backdrop{background-color:#00000080}@starting-style{&:is([open],:popover-open)::backdrop{background-color:#0000}}>header,>form>header{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6);padding-block-end:0;>:is(h1,h2,h3,h4,h5,h6){margin-block-end:0}>p{font-size:var(--text-7);color:var(--muted-foreground);margin-block-end:0}}:is(&,&>form)>:is(p,div,section){padding:var(--space-6);overflow-y:auto}>footer,>form>footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-6);padding-block-start:0}}}@layer components{ot-dropdown{[popover]{position:fixed;margin:0;min-width:12rem;background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);opacity:0;transform:translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete;&:popover-open{opacity:1;transform:translateY(0)}@starting-style{&:popover-open{opacity:0;transform:translateY(-4px)}}hr{margin:var(--space-1) 0}}[role=menuitem]{display:flex;width:100%;padding:var(--space-2) var(--space-3);justify-content:start;cursor:pointer;&:hover,&:focus{background-color:var(--accent);outline:none}}}}@layer components{.toast-container{position:fixed;display:flex;flex-direction:column;pointer-events:none;margin:0;padding:0;border:none;background:transparent;overflow:visible;&::backdrop{display:none}&[data-placement^=top]{inset:var(--space-4) auto auto auto}&[data-placement^=bottom]{inset:auto auto var(--space-4) auto;flex-direction:column-reverse}&[data-placement$=left]{left:var(--space-4)}&[data-placement$=center]{left:50%;transform:translate(-50%)}&[data-placement$=right]{right:var(--space-4)}}.toast{--transition: .3s;--transition-in: calc(var(--transition) - 50ms);padding:var(--space-5) var(--space-4);max-width:28rem;min-width:20rem;pointer-events:auto;background-color:var(--card);border:1px solid var(--border);border-inline-start-width:var(--space-1);border-inline-start-style:solid;border-inline-start-color:var(--_variant-color, var(--border));border-radius:var(--radius-medium);box-shadow:var(--shadow-small);transition:opacity var(--transition-in),transform var(--transition-in),margin var(--transition-in);line-height:1;.toast-title{font-weight:600;margin:0 0 var(--space-3) 0;color:var(--_variant-color, inherit)}.toast-message{color:var(--muted-foreground)}>[data-close]{margin-inline-start:auto;background:none;border:none;padding:0;cursor:pointer;opacity:.5;&:hover{opacity:1}}margin:var(--space-2) 0;&[data-entering]{opacity:0;transform:translateY(-1rem)}&[data-exiting]{opacity:0;margin:0;padding-block:0;max-height:0;overflow:hidden;transition:opacity var(--transition),margin var(--transition),padding var(--transition),max-height var(--transition)}}}@layer components{:root{--sidebar-width: 15rem}[data-sidebar-layout]{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:auto 1fr;height:100dvh;>main{grid-row:2;min-width:0;overflow-y:auto}>aside[data-sidebar]{grid-row:2;min-height:0;z-index:1;background-color:var(--background);border-inline-end:1px solid var(--border);box-shadow:var(--shadow-medium);display:flex;flex-direction:column;>:is(header,footer){flex-shrink:0;padding:var(--space-3)}>footer{margin-block-start:auto}>nav{flex:1;min-height:0;overflow-y:auto;padding:var(--space-3) var(--space-2);font-size:var(--text-7);ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-1);li{margin:0}}a{display:flex;gap:var(--space-2);padding:var(--space-1) var(--space-3);color:var(--foreground);text-decoration:none;border-radius:var(--radius-small);transition:background-color var(--transition-fast);&:is(:hover,[aria-current]){background-color:var(--accent)}}details{border:none;overflow:visible;+details{margin-top:0}&[open] summary{border-bottom:none}>ul{margin-inline-start:var(--space-4);padding:var(--space-1) 0}}summary{justify-content:flex-start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-small);&:after{width:.75rem;height:.75rem;margin-inline-start:auto}}}}>nav[data-topnav]{grid-column:1 / -1}}nav[data-topnav]{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background-color:var(--background);border-bottom:1px solid var(--border);box-shadow:var(--shadow-small);a{text-decoration:none}}:is([data-sidebar-toggle],[data-sidebar-header]){display:none}[data-sidebar-toggle]{padding:0 var(--space-1);background:none;border:1px solid var(--border);border-radius:var(--radius-small)}@media(min-width:769px){[data-sidebar-layout=always]{transition:grid-template-columns var(--transition);[data-sidebar-toggle]{display:inline-block}>aside[data-sidebar]{transform:translate(0);opacity:1;transition:transform var(--transition),opacity var(--transition),visibility var(--transition)}&[data-sidebar-open]{grid-template-columns:0px 1fr;gap:0;>aside[data-sidebar]{overflow:hidden;min-width:0;transform:translate(-100%);opacity:0;visibility:hidden;border-inline-end:none}}}}@media(max-width:768px){[data-sidebar-layout]{grid-template-columns:1fr;>main{grid-column:1}>aside[data-sidebar]{grid-column:1;z-index:2;width:min(var(--sidebar-width),100vw);transform:translate(-100%);transition:transform var(--transition);box-shadow:var(--shadow-large)}&[data-sidebar-open]>aside[data-sidebar]{transform:translate(0)}}[data-sidebar-toggle]{display:inline-block}[data-sidebar-header]{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}}}@layer components{ot-taginput{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--background);border:1px solid var(--input);border-radius:var(--radius-medium);cursor:text;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%;min-height:calc(1lh + var(--space-5));&:focus-within{border-color:var(--ring);box-shadow:0 0 0 2px rgb(from var(--ring) r g b / .2)}&[aria-disabled=true]{cursor:not-allowed;.badge button{opacity:0;pointer-events:none}}input{flex:1;min-width:8ch;margin:0;padding:0;border:none;background:none;&:focus{box-shadow:none}}}}@layer components{[role=status].skeleton{--_c: light-dark( color-mix(in srgb, var(--muted) 15%, white), color-mix(in srgb, var(--muted) 90%, var(--foreground)) );margin-block-end:var(--space-3);background:var(--muted);border-radius:var(--radius-medium);animation:anim 2s infinite;background-size:200% 100%;background-image:linear-gradient(90deg,var(--muted) 0%,var(--_c) 50%,var(--muted) 100%);&.box{width:4rem;height:4rem}&.line{height:1rem;width:100%}}[role=status].skeleton:last-child{margin-block-end:0}@keyframes anim{0%{background-position:200% 0}to{background-position:-200% 0}}}@layer components{[data-tooltip]{position:relative;--_c: translateX(-50%);--_o: translateY(4px);&:before,&:after{position:absolute;inset-inline-start:50%;transform:var(--_c) var(--_o);opacity:0;visibility:hidden;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);pointer-events:none;z-index:calc(var(--z-modal) + 10)}&:after{content:attr(data-tooltip);inset-block-end:calc(100% + 10px);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:1;white-space:nowrap;background:var(--foreground);color:var(--background);border-radius:var(--radius-medium)}&:before{content:"";inset-block-end:calc(100% - 5px);border:8px solid transparent;border-top-color:var(--foreground)}&[data-tooltip-placement=bottom]{--_o: translateY(-4px);&:before,&:after{inset-block-start:calc(100% + 10px);inset-block-end:auto}&:before{inset-block-start:calc(100% - 5px);border-color:transparent;border-bottom-color:var(--foreground)}}&:is([data-tooltip-placement=left],[data-tooltip-placement=right]){--_c: translateY(-50%);&:before,&:after{inset-block-start:50%;inset-block-end:auto}&:before{border-color:transparent}}&[data-tooltip-placement=left]{--_o: translateX(4px);&:before,&:after{inset-inline-start:auto}&:after{inset-inline-end:calc(100% + 10px)}&:before{inset-inline-end:calc(100% - 5px);border-inline-start-color:var(--foreground)}}&[data-tooltip-placement=right]{--_o: translateX(-4px);&:after{inset-inline-start:calc(100% + 10px)}&:before{inset-inline-start:calc(100% - 5px);border-inline-end-color:var(--foreground)}}&:is(:hover,:focus-visible){--_o: translateY(0);&:before,&:after{opacity:1;visibility:visible;transition-delay:.7s}}}}@layer components{ot-upload{cursor:pointer;width:100%;&[data-drag]{border-color:var(--ring);box-shadow:0 0 0 2px rgb(from var(--ring) r g b / .2)}.badge{text-overflow:ellipsis;max-width:20ch;overflow:hidden;display:inline-block}}}@layer utilities{.align-left{text-align:start}.align-center{text-align:center}.align-right{text-align:end}.text-light{color:var(--muted-foreground)}.text-lighter{color:var(--faint-foreground)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.hstack{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;align-content:flex-start;height:auto;>*{margin:0}}.vstack{display:flex;flex-direction:column;gap:var(--space-3)}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.mt-2{margin-block-start:var(--space-2)}.mt-4{margin-block-start:var(--space-4)}.mt-6{margin-block-start:var(--space-6)}.mt-8{margin-block-start:var(--space-8)}.mb-2{margin-block-end:var(--space-2)}.mb-4{margin-block-end:var(--space-4)}.mb-6{margin-block-end:var(--space-6)}.mb-8{margin-block-end:var(--space-8)}.p-4{padding:var(--space-4)}.w-100{width:100%}:is(ul,ol).unstyled{list-style:none;text-decoration:none;padding:0}a.unstyled{color:inherit;text-decoration:none;&:hover{color:var(--primary)}}}
/* src/css/components/item.css */
@layer components {
  .item-group {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .item {
    display: flex;
    align-items:  center;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--foreground);
    text-decoration: none;
    border-radius: var(--radius-medium);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    border: 1px solid #0000;
    min-width: 0;
  }

  .item > :where(section, div):not([data-slot]) {
    flex: 1;
    min-width: 0;
  }

  .item :where(h2, h3, h4, p) {
    margin: 0;
  }

  .item :where(p, [data-description]) {
    color: var(--muted-foreground);
    font-size: var(--text-7);
  }

  .item [data-slot="media"] {
    display: grid;
    width: calc(var(--space-8)  + var(--space-1));
    height: calc(var(--space-8)  + var(--space-1));
    color: var(--muted-foreground);
    background: var(--muted);
    border-radius: var(--radius-medium);
    flex: none;
    place-items:  center;
  }

  .item [data-slot="actions"] {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  .item [data-slot="meta"] {
    color: var(--muted-foreground);
    font-size: var(--text-8);
    white-space: nowrap;
  }

  .item[aria-current="page"], .item[aria-selected="true"], .item[data-unread] {
    color: var(--foreground);
    background: var(--accent);
  }

  .item[data-unread] > :where(section, div):not([data-slot]):before {
    content: "";
    display: inline-block;
    width: var(--space-2);
    height: var(--space-2);
    background: var(--primary);
    border-radius: var(--radius-full);
    margin-inline-end: var(--space-2);
  }

  .item[aria-disabled="true"], .item[aria-busy="true"] {
    opacity: .6;
    pointer-events: none;
  }

  .item[data-variant="outline"] {
    border-color: var(--border);
    background: var(--card);
  }

  .item[data-interactive]:hover {
    color: var(--foreground);
    background: var(--accent);
  }

  :-webkit-any(a, button).item:hover {
    color: var(--foreground);
    background: var(--accent);
  }

  :-moz-any(a, button).item:hover {
    color: var(--foreground);
    background: var(--accent);
  }

  :is(a, button).item:hover {
    color: var(--foreground);
    background: var(--accent);
  }

  .item-group[data-connected] {
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    overflow: clip;
    gap: 0;
  }

  .item-group[data-connected] .item {
    border: 0;
    border-radius: 0;
  }

  .item-group[data-connected] > :not(:last-child) .item, .item-group[data-connected] > .item:not(:last-child) {
    border-block-end: 1px solid var(--border);
  }

  .item-group[data-divided] {
    gap: 0;
  }

  .item-group[data-divided] > :not(:last-child) .item, .item-group[data-divided] > .item:not(:last-child) {
    border-block-end-color: var(--border);
  }
}

/* src/css/components/callout.css */
@layer components {
  [data-callout] {
    padding: var(--space-4);
    color: var(--muted-foreground);
    background: var(--faint);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: var(--radius-small);
  }

  [data-callout] > :first-child {
    color: var(--foreground);
  }
}

/* src/css/components/empty.css */
@layer components {
  [data-variant="empty"] {
    display: flex;
    justify-content: center;
    align-items:  center;
    gap: var(--space-3);
    min-height: var(--oatbase-empty-min-height, 15rem);
    padding: var(--space-8);
    text-align: center;
    color: var(--muted-foreground);
    background: var(--faint);
    border: 1px dashed var(--border);
    border-radius: var(--radius-large);
    flex-direction: column;
  }

  [data-variant="empty"][hidden] {
    display: none;
  }

  [data-variant="empty"] > :where(h2, h3, h4, p) {
    max-width: var(--oatbase-empty-content-width, 32rem);
    margin: 0;
  }

  [data-variant="empty"] > :where(h2, h3, h4) {
    color: var(--foreground);
  }

  [data-variant="empty"] [data-slot="media"] {
    display: grid;
    width: var(--space-12);
    height: var(--space-12);
    color: var(--primary);
    background: var(--muted);
    border-radius: var(--radius-full);
    place-items:  center;
  }

  [data-variant="empty"] [data-slot="actions"] {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-block-start: var(--space-2);
  }

  [data-variant="empty"][data-size="compact"] {
    min-height: var(--oatbase-empty-compact-min-height, 8rem);
    padding: var(--space-5);
  }

  [data-variant="empty"][data-layout="inline"] {
    padding: var(--space-4);
    text-align: start;
    flex-direction: row;
    justify-content: flex-start;
    min-height: 0;
  }

  [data-variant="empty"][data-layout="inline"] [data-slot="actions"] {
    margin-block-start: 0;
    margin-inline-start: auto;
  }
}

/* src/css/components/kbd.css */
@layer components {
  kbd {
    display: inline-flex;
    min-width: var(--space-6);
    min-height: var(--space-6);
    padding: 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-8);
    color: var(--muted-foreground);
    background: var(--faint);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-small);
    white-space: nowrap;
    border-block-end-width: 2px;
    justify-content: center;
    align-items:  center;
    line-height: 1;
  }

  kbd[data-variant="inline"] {
    color: var(--muted-foreground);
    box-shadow: none;
    letter-spacing: normal;
    background: none;
    border: 0;
    border-radius: 0;
    min-width: auto;
    min-height: auto;
    padding: 0;
  }

  .kbd-group {
    display: inline-flex;
    align-items:  center;
    gap: var(--space-1);
  }
}

/* src/css/components/combobox.css */
@layer components {
  ot-combobox {
    position: relative;
    display: block;
  }

  ot-combobox:not([data-enhanced]) > :not(select), ot-combobox[data-enhanced] > select {
    display: none;
  }

  ot-combobox:not([data-enhanced]) > select, ot-combobox > input[role="combobox"] {
    width: 100%;
  }

  ot-combobox > [role="listbox"] {
    position: absolute;
    z-index: var(--z-dropdown);
    max-height: var(--oatbase-listbox-max-height, min(18rem, 50dvh));
    overflow-y: auto;
    padding: var(--space-1);
    list-style: none;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-large);
    margin: 0;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
  }

  ot-combobox [role="option"] {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    cursor: default;
    margin: 0;
  }

  ot-combobox [role="option"]:hover {
    background: var(--accent);
  }

  ot-combobox [role="option"]:-webkit-any([data-active], [aria-selected="true"]) {
    background: var(--accent);
  }

  ot-combobox [role="option"]:-moz-any([data-active], [aria-selected="true"]) {
    background: var(--accent);
  }

  ot-combobox [role="option"]:is([data-active], [aria-selected="true"]) {
    background: var(--accent);
  }

  ot-combobox [role="option"][aria-selected="true"]:after {
    content: "✓";
    color: var(--primary);
    font-weight: var(--font-semibold);
    margin-inline-start: auto;
  }

  ot-combobox [role="option"][aria-disabled="true"] {
    pointer-events: none;
    opacity: .5;
  }

  ot-combobox [role="option"][data-create] {
    color: var(--primary);
    border-block-start: 1px solid var(--border);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
  }

  ot-combobox [role="option"][data-create]:before {
    content: "+";
  }

  ot-combobox [data-empty] {
    padding: var(--space-3);
    color: var(--muted-foreground);
    font-size: var(--text-7);
    text-align: center;
  }
}

/* src/css/components/command.css */
@layer components {
  ot-command {
    display: contents;
  }

  ot-command > dialog {
    width: var(--oatbase-command-width, min(40rem, calc(100% - var(--space-8))));
    max-height: var(--oatbase-command-max-height, min(34rem, calc(100dvh - var(--space-8))));
    overflow: hidden;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-large);
    padding: 0;
  }

  ot-command > dialog::backdrop {
    background: var(--oatbase-overlay-background, #00000073);
    backdrop-filter: blur(2px);
  }

  ot-command [data-command-search] {
    min-height: calc(var(--space-12)  + var(--space-1));
    padding-inline: var(--space-4);
    border: 0;
    border-block-end: 1px solid var(--border);
    outline: 0;
    background: none;
    border-radius: 0;
    width: 100%;
  }

  ot-command [data-command-search]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }

  ot-command [data-command-list] {
    max-height: var(--oatbase-command-list-max-height, min(27rem, 65dvh));
    overflow-y: auto;
    padding: var(--space-2);
    list-style: none;
    margin: 0;
  }

  ot-command [data-command-group] {
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--muted-foreground);
    font-size: var(--text-8);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  ot-command [data-command-item] {
    display: flex;
    justify-content: flex-start;
    align-items:  center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--foreground);
    font: inherit;
    text-align: start;
    border-radius: var(--radius-small);
    cursor: default;
    background: none;
    border: 0;
    width: 100%;
    margin: 0;
  }

  ot-command [data-command-item][data-active], ot-command [data-command-item]:hover {
    background: var(--accent);
  }

  ot-command [data-command-item] :where(kbd, small) {
    margin-inline-start: auto;
  }

  ot-command [data-command-list] > li:has([data-command-item]) {
    margin: 0;
  }

  ot-command [data-command-empty] {
    padding: var(--space-8);
    color: var(--muted-foreground);
    text-align: center;
  }
}

/* src/css/components/drawer.css */
@layer components {
  dialog[data-variant="drawer"] {
    position: fixed;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-large);
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
  }

  dialog[data-variant="drawer"]::backdrop {
    background: var(--oatbase-overlay-background, #00000073);
  }

  dialog[data-variant="drawer"][data-side="bottom"] {
    max-height: var(--oatbase-drawer-max-height, min(85dvh, 48rem));
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    width: 100%;
    inset: auto 0 0;
  }

  dialog[data-variant="drawer"][data-side="top"] {
    max-height: var(--oatbase-drawer-max-height, min(85dvh, 48rem));
    border-radius: 0 0 var(--radius-large) var(--radius-large);
    width: 100%;
    inset: 0 0 auto;
  }

  dialog[data-variant="drawer"]:-webkit-any([data-side="left"], [data-side="right"]) {
    width: var(--oatbase-drawer-size, min(28rem, 90vw));
    height: 100dvh;
    top: 0;
    bottom: 0;
  }

  dialog[data-variant="drawer"]:-moz-any([data-side="left"], [data-side="right"]) {
    width: var(--oatbase-drawer-size, min(28rem, 90vw));
    height: 100dvh;
    top: 0;
    bottom: 0;
  }

  dialog[data-variant="drawer"]:is([data-side="left"], [data-side="right"]) {
    width: var(--oatbase-drawer-size, min(28rem, 90vw));
    height: 100dvh;
    top: 0;
    bottom: 0;
  }

  dialog[data-variant="drawer"][data-side="left"] {
    border-radius: 0 var(--radius-large) var(--radius-large) 0;
  }

  dialog[data-variant="drawer"][data-side="left"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
    right: auto;
  }

  dialog[data-variant="drawer"][data-side="left"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
    right: auto;
  }

  dialog[data-variant="drawer"][data-side="left"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: 0;
    right: auto;
  }

  dialog[data-variant="drawer"][data-side="left"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: auto;
    right: 0;
  }

  dialog[data-variant="drawer"][data-side="left"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: auto;
    right: 0;
  }

  dialog[data-variant="drawer"][data-side="left"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: auto;
    right: 0;
  }

  dialog[data-variant="drawer"][data-side="right"] {
    border-radius: var(--radius-large) 0 0 var(--radius-large);
  }

  dialog[data-variant="drawer"][data-side="right"]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  dialog[data-variant="drawer"][data-side="right"]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  dialog[data-variant="drawer"][data-side="right"]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    left: auto;
    right: 0;
  }

  dialog[data-variant="drawer"][data-side="right"]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  dialog[data-variant="drawer"][data-side="right"]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  dialog[data-variant="drawer"][data-side="right"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    left: 0;
    right: auto;
  }

  dialog[data-variant="drawer"] > :where(form, article, section) {
    display: flex;
    max-height: inherit;
    flex-direction: column;
    height: 100%;
  }

  dialog[data-variant="drawer"] :where(header, footer) {
    padding: var(--space-4) var(--space-5);
    flex: none;
  }

  dialog[data-variant="drawer"] header {
    border-block-end: 1px solid var(--border);
  }

  dialog[data-variant="drawer"] footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    border-block-start: 1px solid var(--border);
  }

  dialog[data-variant="drawer"] [data-drawer-body] {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    dialog[data-variant="drawer"][open] {
      animation: oatbase-drawer-in var(--transition) both;
    }

    dialog[data-variant="drawer"][open]::backdrop {
      animation: oatbase-fade-in var(--transition) both;
    }
  }

  @keyframes oatbase-drawer-in {
    from {
      opacity: 0;
      transform: translate3d(var(--_drawer-x, 0), var(--_drawer-y, 0), 0);
    }
  }

  @keyframes oatbase-fade-in {
    from {
      opacity: 0;
    }
  }

  dialog[data-variant="drawer"][data-side="bottom"] {
    --_drawer-y: var(--oatbase-drawer-motion-offset, 1.5rem);
  }

  dialog[data-variant="drawer"][data-side="top"] {
    --_drawer-y: calc(-1 * var(--oatbase-drawer-motion-offset, 1.5rem));
  }

  dialog[data-variant="drawer"][data-side="left"] {
    --_drawer-x: calc(-1 * var(--oatbase-drawer-motion-offset, 1.5rem));
  }

  dialog[data-variant="drawer"][data-side="right"] {
    --_drawer-x: var(--oatbase-drawer-motion-offset, 1.5rem);
  }
}

/* src/css/components/chart.css */
@layer components {
  [data-variant="chart"] {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    color: var(--card-foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    margin: 0;
  }

  [data-variant="chart"] figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
  }

  [data-variant="chart"] figcaption small, [data-chart-legend] {
    color: var(--muted-foreground);
  }

  [data-chart-bars] {
    display: flex;
    align-items:  end;
    gap: var(--space-2);
    min-height: var(--oatbase-chart-height, 12rem);
    border-block-end: 1px solid var(--border);
    background-image: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--oatbase-chart-grid-size, 3rem));
    margin-block-end: var(--space-5);
    padding-block-start: var(--space-4);
  }

  [data-chart-bar] {
    position: relative;
    height: calc(var(--value, 0) * 1%);
    background: var(--primary);
    border-radius: var(--radius-small) var(--radius-small) 0 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex: 1;
    min-height: 2px;
  }

  [data-chart-bar]:hover {
    opacity: .8;
    transform-origin: bottom;
    transform: scaleY(1.015);
  }

  [data-chart-bar]:after {
    content: attr(data-label);
    position: absolute;
    color: var(--muted-foreground);
    font-size: var(--text-8);
    white-space: nowrap;
    top: calc(100% + var(--space-2));
    translate: -50%;
  }

  [data-chart-bar]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
    right: auto;
  }

  [data-chart-bar]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
    right: auto;
  }

  [data-chart-bar]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: 50%;
    right: auto;
  }

  [data-chart-bar]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: auto;
    right: 50%;
  }

  [data-chart-bar]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: auto;
    right: 50%;
  }

  [data-chart-bar]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    left: auto;
    right: 50%;
  }

  [data-chart-legend] {
    display: flex;
    align-items:  center;
    gap: var(--space-3);
    list-style: none;
    font-size: var(--text-8);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }

  [data-chart-legend] > li {
    margin: 0;
  }
}

/* src/css/components/scroll-area.css */
@layer components {
  .scroll-area {
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--input) transparent;
    scrollbar-width: thin;
  }

  .scroll-area::-webkit-scrollbar {
    width: var(--oatbase-scrollbar-size, .625rem);
    height: var(--oatbase-scrollbar-size, .625rem);
  }

  .scroll-area::-webkit-scrollbar-track {
    background: none;
  }

  .scroll-area::-webkit-scrollbar-thumb {
    background: var(--input);
    border: calc(var(--oatbase-scrollbar-size, .625rem) * .3) solid transparent;
    border-radius: var(--radius-full);
    background-clip: padding-box;
  }

  .scroll-area[data-orientation="horizontal"] {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
  }

  .scroll-area[data-orientation="horizontal"] > * {
    flex: none;
  }
}

/* src/css/components/select.css */
@layer components {
  ot-select {
    position: relative;
    display: block;
  }

  ot-select:not([data-enhanced]) > :not(select), ot-select[data-enhanced] > select {
    display: none;
  }

  ot-select:not([data-enhanced]) > select, ot-select > button[aria-haspopup="listbox"] {
    width: 100%;
  }

  ot-select > button[aria-haspopup="listbox"] {
    color: var(--foreground);
    background: var(--background);
    border-color: var(--input);
    justify-content: space-between;
  }

  ot-select > button[aria-haspopup="listbox"]:after {
    content: "⌄";
    color: var(--muted-foreground);
  }

  ot-select > [role="listbox"] {
    position: absolute;
    z-index: var(--z-dropdown);
    max-height: var(--oatbase-listbox-max-height, min(18rem, 50dvh));
    overflow-y: auto;
    padding: var(--space-1);
    list-style: none;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-large);
    margin: 0;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
  }

  ot-select [role="option"] {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    cursor: default;
    margin: 0;
  }

  ot-select [role="option"]:hover {
    background: var(--accent);
  }

  ot-select [role="option"]:-webkit-any([data-active], [aria-selected="true"]) {
    background: var(--accent);
  }

  ot-select [role="option"]:-moz-any([data-active], [aria-selected="true"]) {
    background: var(--accent);
  }

  ot-select [role="option"]:is([data-active], [aria-selected="true"]) {
    background: var(--accent);
  }

  ot-select [role="option"][aria-selected="true"]:after {
    content: "✓";
    color: var(--primary);
    margin-inline-start: auto;
  }

  ot-select [role="option"][aria-disabled="true"] {
    pointer-events: none;
    opacity: .5;
  }
}

/* src/css/components/theme-switcher.css */
@layer components {
  ot-theme-switcher {
    display: inline-flex;
    align-items:  center;
    gap: var(--space-1);
  }

  ot-theme-switcher[data-group] {
    padding: var(--space-1);
    background: var(--muted);
    border-radius: var(--radius-medium);
  }

  ot-theme-switcher [data-theme-value][aria-pressed="true"] {
    background: var(--background);
    color: var(--foreground);
    border-color: var(--border);
    box-shadow: var(--shadow-small);
  }
}

/* src/css/components/copy-button.css */
@layer components {
  ot-copy {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
  }

  ot-copy > [data-copy-source] {
    flex: 1;
    min-width: 0;
  }

  ot-copy > [data-copy-status] {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: .0625rem;
    height: .0625rem;
    margin: -.0625rem;
    padding: 0;
  }
}

/* src/css/components/action-field.css */
@layer components {
  ot-action-field {
    display: block;
    padding: var(--space-4);
    color: var(--card-foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    min-width: 0;
  }

  ot-action-field > [data-action-field-label] {
    display: block;
    color: var(--muted-foreground);
    font-size: var(--text-7);
    margin-block-end: var(--space-2);
  }

  ot-action-field > [data-action-field-body] {
    display: flex;
    align-items:  center;
    gap: var(--space-3);
    flex-wrap: wrap;
    min-width: 0;
  }

  ot-action-field [data-action-field-value] {
    color: var(--foreground);
    font-size: var(--oatbase-action-field-value-size, var(--text-4));
    font-weight: var(--font-semibold);
    overflow-wrap: anywhere;
    flex: 18rem;
    min-width: 0;
    line-height: 1.25;
  }

  ot-action-field [data-action-field-actions] {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex: 0 auto;
    min-width: 0;
  }

  ot-action-field > [data-action-field-hint] {
    display: block;
    color: var(--muted-foreground);
    font-size: var(--text-8);
    margin-block-start: var(--space-2);
  }

  ot-action-field:not([data-enhanced]) [data-copy-button] {
    display: none;
  }

  ot-action-field > [data-copy-status] {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: .0625rem;
    height: .0625rem;
    margin: -.0625rem;
    padding: 0;
  }
}

/* src/css/components/multiselect.css */
@layer components {
  ot-multiselect {
    position: relative;
    display: block;
  }

  ot-multiselect:not([data-enhanced]) > :not(select), ot-multiselect[data-enhanced] > select {
    display: none;
  }

  ot-multiselect:not([data-enhanced]) > select, ot-multiselect > button[aria-haspopup="listbox"] {
    width: 100%;
  }

  ot-multiselect > button[aria-haspopup="listbox"] {
    color: var(--foreground);
    background: var(--background);
    border-color: var(--input);
    justify-content: space-between;
  }

  ot-multiselect > button[aria-haspopup="listbox"]:after {
    content: "⌄";
    color: var(--muted-foreground);
  }

  ot-multiselect > [role="listbox"] {
    position: absolute;
    z-index: var(--z-dropdown);
    max-height: var(--oatbase-listbox-max-height, min(18rem, 50dvh));
    overflow-y: auto;
    padding: var(--space-1);
    list-style: none;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-large);
    margin: 0;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
  }

  ot-multiselect [role="option"] {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    cursor: default;
    margin: 0;
  }

  ot-multiselect [role="option"]:-webkit-any(:hover, [data-active]) {
    background: var(--accent);
  }

  ot-multiselect [role="option"]:-moz-any(:hover, [data-active]) {
    background: var(--accent);
  }

  ot-multiselect [role="option"]:is(:hover, [data-active]) {
    background: var(--accent);
  }

  ot-multiselect [role="option"]:before {
    content: "□";
    color: var(--muted-foreground);
  }

  ot-multiselect [role="option"][aria-selected="true"]:before {
    content: "☑";
    color: var(--primary);
  }

  ot-multiselect [role="option"][aria-disabled="true"] {
    pointer-events: none;
    opacity: .5;
  }
}

/* src/css/components/password-field.css */
@layer components {
  ot-password {
    display: flex;
    align-items: stretch;
  }

  ot-password > input {
    min-width: 0;
  }

  ot-password > input:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  ot-password > input:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  ot-password > input:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  ot-password > input:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  ot-password > input:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  ot-password > input:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  ot-password > [data-password-toggle] {
    flex: none;
    margin-inline-start: -1px;
  }

  ot-password > [data-password-toggle]:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  ot-password > [data-password-toggle]:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  ot-password > [data-password-toggle]:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  ot-password > [data-password-toggle]:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  ot-password > [data-password-toggle]:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  ot-password > [data-password-toggle]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* src/css/components/splitter.css */
@layer components {
  ot-splitter {
    --split: 50%;
    display: grid;
    grid-template-columns: minmax(0, var(--split)) auto minmax(0, 1fr);
    min-height: var(--oatbase-splitter-min-height, 14rem);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
  }

  ot-splitter > :not([data-splitter]) {
    overflow: auto;
    padding: var(--space-4);
    min-width: 0;
  }

  ot-splitter > [data-splitter] {
    width: var(--oatbase-splitter-handle-size, .75rem);
    color: var(--muted-foreground);
    background: var(--muted);
    border-color: var(--border);
    cursor: col-resize;
    touch-action: none;
    border-block-start: 0;
    border-block-end: 0;
    border-radius: 0;
    padding: 0;
  }

  ot-splitter > [data-splitter]:before {
    content: "";
    height: var(--oatbase-splitter-grip-size, 2.5rem);
    background: var(--muted-foreground);
    border-radius: var(--radius-full);
    width: 2px;
  }

  ot-splitter[aria-orientation="vertical"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, var(--split)) auto minmax(0, 1fr);
  }

  ot-splitter[aria-orientation="vertical"] > [data-splitter] {
    height: var(--oatbase-splitter-handle-size, .75rem);
    border-inline-start: 0;
    border-inline-end: 0;
    border-block: 1px solid var(--border);
    cursor: row-resize;
    width: auto;
  }

  ot-splitter[aria-orientation="vertical"] > [data-splitter]:before {
    width: var(--oatbase-splitter-grip-size, 2.5rem);
    height: .125rem;
  }
}

/* src/css/components/tree.css */
@layer components {
  ot-tree :where(ul) {
    list-style: none;
    margin: 0;
    padding-inline-start: var(--space-5);
  }

  ot-tree > ul {
    padding-inline-start: 0;
  }

  ot-tree [role="treeitem"] {
    margin: 0;
  }

  ot-tree [role="treeitem"] > :where(button, a, span):first-child {
    display: flex;
    justify-content: flex-start;
    align-items:  center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    color: var(--foreground);
    text-align: start;
    text-decoration: none;
    border-radius: var(--radius-small);
    background: none;
    border: 0;
    width: 100%;
  }

  ot-tree [role="treeitem"] > :where(button, a, span):first-child:hover {
    background: var(--accent);
  }

  ot-tree [role="treeitem"] > :where(button, a, span):first-child:focus-visible {
    background: var(--accent);
  }

  ot-tree [role="treeitem"][aria-expanded="false"] > [role="group"] {
    display: none;
  }

  ot-tree [role="treeitem"] > :first-child:before {
    content: "";
    color: var(--muted-foreground);
    text-align: center;
    flex: 0 0 1em;
    width: 1em;
  }

  ot-tree [role="treeitem"][aria-expanded] > :first-child:before {
    content: "⌄";
  }

  ot-tree [role="treeitem"][aria-expanded="false"] > :first-child:before {
    content: "›";
  }
}

/* src/css/components/rating.css */
@layer components {
  [data-rating] {
    display: inline-flex;
    justify-content: flex-end;
    gap: var(--space-1);
    flex-direction: row-reverse;
  }

  [data-rating] > legend {
    width: 100%;
    margin-block-end: var(--space-1);
  }

  [data-rating] > input {
    position: absolute;
    opacity: 0;
    block-size: 1px;
    inline-size: 1px;
  }

  [data-rating] > label {
    color: var(--muted-foreground);
    font-size: var(--oatbase-rating-size, 1.75rem);
    cursor: pointer;
    line-height: 1;
  }

  [data-rating] > label:hover, [data-rating] > label:hover ~ label, [data-rating] > input:checked ~ label {
    color: var(--primary);
  }

  [data-rating] > input:focus-visible + label {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
}

/* src/css/components/segmented-control.css */
@layer components {
  [data-segmented] {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--muted);
    border-radius: var(--radius-medium);
    border: 0;
  }

  [data-segmented] > legend {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    block-size: 1px;
    inline-size: 1px;
  }

  [data-segmented] label {
    position: relative;
    margin: 0;
  }

  [data-segmented] input {
    position: absolute;
    opacity: 0;
    block-size: 1px;
    inline-size: 1px;
  }

  [data-segmented] span {
    display: block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-small);
    cursor: pointer;
  }

  [data-segmented] input:checked + span {
    color: var(--foreground);
    background: var(--background);
    box-shadow: var(--shadow-small);
  }

  [data-segmented] input:focus-visible + span {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
  }
}

/* src/css/components/stat.css */
@layer components {
  [data-stats] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  [data-stats] > div {
    padding: var(--space-4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
  }

  [data-stats] dt {
    color: var(--muted-foreground);
    font-size: var(--text-7);
  }

  [data-stats] dd {
    margin: var(--space-1) 0 0;
    color: var(--foreground);
    font-size: var(--oatbase-stat-value-size, 1.75rem);
    font-weight: var(--font-semibold);
  }

  [data-stats] dd > small {
    display: block;
    color: var(--muted-foreground);
    font-size: var(--text-8);
    font-weight: var(--font-normal);
  }
}

/* src/css/components/stepper.css */
@layer components {
  [data-stepper] {
    --_step-size: var(--oatbase-stepper-marker-size, 2rem);
    display: flex;
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
  }

  [data-stepper] li {
    position: relative;
    display: grid;
    gap: var(--space-2);
    color: var(--muted-foreground);
    text-align: center;
    counter-increment: step;
    flex: 1;
    justify-items: center;
    margin: 0;
  }

  [data-stepper] li:before {
    content: counter(step);
    z-index: 1;
    display: grid;
    width: var(--_step-size);
    height: var(--_step-size);
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    place-items:  center;
  }

  [data-stepper] li:not(:last-child):after {
    content: "";
    position: absolute;
    width: calc(100% - var(--_step-size));
    border-block-start: 1px solid var(--border);
    top: calc(var(--_step-size) / 2);
  }

  [data-stepper] li:not(:last-child):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc(50% + var(--_step-size) / 2);
  }

  [data-stepper] li:not(:last-child):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc(50% + var(--_step-size) / 2);
  }

  [data-stepper] li:not(:last-child):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc(50% + var(--_step-size) / 2);
  }

  [data-stepper] li:not(:last-child):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc(50% + var(--_step-size) / 2);
  }

  [data-stepper] li:not(:last-child):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc(50% + var(--_step-size) / 2);
  }

  [data-stepper] li:not(:last-child):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc(50% + var(--_step-size) / 2);
  }

  [data-stepper] li[data-complete], [data-stepper] li[aria-current="step"] {
    color: var(--foreground);
  }

  [data-stepper] li[data-complete]:before, [data-stepper] li[aria-current="step"]:before {
    color: var(--primary-foreground);
    background: var(--primary);
    border-color: var(--primary);
  }

  [data-stepper][data-variant="status"] {
    display: grid;
    grid-auto-columns: minmax(5rem, 1fr);
    grid-auto-flow: column;
    gap: var(--space-1);
    overflow-x: auto;
  }

  [data-stepper][data-variant="status"] li {
    display: grid;
    gap: var(--space-1);
    color: var(--muted-foreground);
    font-size: var(--text-8);
    text-align: start;
    justify-items: stretch;
    min-width: 0;
  }

  [data-stepper][data-variant="status"] li:before {
    content: "";
    height: var(--oatbase-stepper-track-size, .5rem);
    background: var(--muted);
    border-color: var(--border);
    border-radius: var(--radius-full);
    width: 100%;
  }

  [data-stepper][data-variant="status"] li:after {
    display: none;
  }

  [data-stepper][data-variant="status"] li[data-status="complete"]:before {
    background: var(--success);
    border-color: var(--success);
  }

  [data-stepper][data-variant="status"] li:-webkit-any([data-status="running"], [aria-current="step"]):before {
    background: var(--primary);
    border-color: var(--primary);
  }

  [data-stepper][data-variant="status"] li:-moz-any([data-status="running"], [aria-current="step"]):before {
    background: var(--primary);
    border-color: var(--primary);
  }

  [data-stepper][data-variant="status"] li:is([data-status="running"], [aria-current="step"]):before {
    background: var(--primary);
    border-color: var(--primary);
  }

  [data-stepper][data-variant="status"] li[data-status="waiting"]:before {
    background: var(--warning);
    border-color: var(--warning);
  }

  [data-stepper][data-variant="status"] li[data-status="failed"]:before {
    background: var(--danger);
    border-color: var(--danger);
  }

  [data-stepper][data-variant="status"] li:-webkit-any([data-status="skipped"], [data-status="cancelled"]):before {
    background: var(--faint);
    border-style: dashed;
  }

  [data-stepper][data-variant="status"] li:-moz-any([data-status="skipped"], [data-status="cancelled"]):before {
    background: var(--faint);
    border-style: dashed;
  }

  [data-stepper][data-variant="status"] li:is([data-status="skipped"], [data-status="cancelled"]):before {
    background: var(--faint);
    border-style: dashed;
  }
}

/* src/css/components/timeline.css */
@layer components {
  [data-timeline] {
    --_marker-size: var(--oatbase-timeline-marker-size, .75rem);
    --_line-width: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  [data-timeline] > li {
    position: relative;
    padding: 0 0 var(--space-5) var(--space-6);
    margin: 0;
  }

  [data-timeline] > li:before {
    content: "";
    position: absolute;
    width: var(--_marker-size);
    height: var(--_marker-size);
    background: var(--background);
    border: 2px solid var(--primary);
    border-radius: var(--radius-full);
    top: .4em;
  }

  [data-timeline] > li:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  [data-timeline] > li:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  [data-timeline] > li:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):before {
    left: 0;
  }

  [data-timeline] > li:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  [data-timeline] > li:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  [data-timeline] > li:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):before {
    right: 0;
  }

  [data-timeline] > li:not(:last-child):after {
    content: "";
    position: absolute;
    inset-block: calc(.4em + var(--_marker-size)) 0;
    border-inline-start: var(--_line-width) solid var(--border);
  }

  [data-timeline] > li:not(:last-child):not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc((var(--_marker-size)  - var(--_line-width)) / 2);
  }

  [data-timeline] > li:not(:last-child):not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc((var(--_marker-size)  - var(--_line-width)) / 2);
  }

  [data-timeline] > li:not(:last-child):not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
    left: calc((var(--_marker-size)  - var(--_line-width)) / 2);
  }

  [data-timeline] > li:not(:last-child):-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc((var(--_marker-size)  - var(--_line-width)) / 2);
  }

  [data-timeline] > li:not(:last-child):-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc((var(--_marker-size)  - var(--_line-width)) / 2);
  }

  [data-timeline] > li:not(:last-child):is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
    right: calc((var(--_marker-size)  - var(--_line-width)) / 2);
  }

  [data-timeline] :where(h3, p) {
    margin: 0;
  }

  [data-timeline] time {
    color: var(--muted-foreground);
    font-size: var(--text-8);
  }

  [data-timeline] > li[data-status="complete"]:before {
    background: var(--primary);
  }

  [data-timeline] > li[data-status="pending"]:before {
    border-color: var(--border);
  }

  [data-timeline] [data-slot="header"] {
    display: flex;
    justify-content: space-between;
    align-items:  center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  [data-timeline] [data-slot="actions"] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-block-start: var(--space-2);
  }
}

/* src/css/components/toggle.css */
@layer components {
  ot-toggle {
    display: inline-flex;
  }

  ot-toggle > button[aria-pressed="true"] {
    color: var(--primary-foreground);
    background: var(--primary);
    border-color: var(--primary);
  }
}

/* src/css/components/toolbar.css */
@layer components {
  ot-toolbar {
    display: inline-flex;
    align-items:  center;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
  }

  ot-toolbar[aria-orientation="vertical"] {
    flex-direction: column;
    align-items: stretch;
  }

  ot-toolbar > [role="separator"] {
    margin: var(--space-1);
    border: 0;
    border-inline-start: 1px solid var(--border);
    align-self: stretch;
  }

  ot-toolbar[aria-orientation="vertical"] > [role="separator"] {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }

  ot-toolbar[data-sticky] {
    position: sticky;
    z-index: var(--z-dropdown);
    top: var(--oatbase-toolbar-offset, var(--space-3));
  }

  ot-toolbar[data-floating] {
    box-shadow: var(--shadow-large);
  }

  ot-toolbar[data-full] {
    display: flex;
    width: 100%;
  }

  ot-toolbar[data-full] > [data-slot="spacer"] {
    flex: 1;
  }
}

/* src/css/components/choice-card.css */
@layer components {
  [data-choice-cards] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-3);
    border: 0;
    padding: 0;
  }

  [data-choice-card] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items:  start;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    cursor: pointer;
    margin: 0;
  }

  [data-choice-card] > input {
    margin-block-start: var(--space-1);
  }

  [data-choice-card] :where(strong, small) {
    display: block;
  }

  [data-choice-card] small {
    color: var(--muted-foreground);
    margin-block-start: var(--space-1);
  }

  [data-choice-card]:hover {
    border-color: var(--input);
  }

  [data-choice-card]:has( > input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }

  [data-choice-card]:has( > input:focus-visible) {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  [data-choice-card]:has( > input:disabled) {
    cursor: not-allowed;
    opacity: .55;
  }
}

/* src/css/components/otp-input.css */
@layer components {
  ot-otp {
    display: inline-block;
    max-width: 100%;
  }

  ot-otp[data-enhanced] {
    position: relative;
  }

  ot-otp[data-enhanced] > input {
    position: absolute;
    z-index: 1;
    opacity: 0;
    cursor: text;
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
    inset: 0;
  }

  ot-otp > [data-otp-slots] {
    display: grid;
    grid-template-columns: repeat(var(--otp-length), minmax(2.25rem, var(--oatbase-otp-cell-size, 3rem)));
    gap: var(--oatbase-otp-gap, var(--space-2));
  }

  ot-otp > [data-otp-slots] > span {
    display: grid;
    min-block-size: var(--oatbase-otp-cell-size, 3rem);
    color: var(--foreground);
    font-family: var(--font-mono);
    font-size: var(--text-4);
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--radius-medium);
    place-items:  center;
  }

  ot-otp > [data-otp-slots] > [data-filled] {
    border-color: var(--foreground);
  }

  ot-otp:focus-within > [data-otp-slots] > [data-active] {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
  }

  ot-otp:has( > input:disabled) > [data-otp-slots] {
    opacity: .55;
  }
}

/* src/css/components/lightbox.css */
@layer components {
  ot-lightbox {
    display: contents;
  }

  ot-lightbox [data-lightbox-trigger] {
    cursor: zoom-in;
  }

  ot-lightbox > dialog[data-lightbox-dialog] {
    width: var(--oatbase-lightbox-width, min(72rem, calc(100% - var(--space-8))));
    max-height: calc(100dvh - var(--space-8));
  }

  ot-lightbox [data-lightbox-dialog] > figure {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    overflow: auto;
    min-height: 0;
    margin: 0;
  }

  ot-lightbox [data-lightbox-image] {
    display: block;
    max-height: var(--oatbase-lightbox-image-height, calc(100dvh - 12rem));
    object-fit: contain;
    width: auto;
    max-width: 100%;
  }

  ot-lightbox [data-lightbox-caption] {
    color: var(--muted-foreground);
    font-size: var(--text-7);
    text-align: center;
    max-width: 70ch;
  }

  ot-lightbox [data-lightbox-dialog] > footer {
    flex-wrap: wrap;
    align-items:  center;
    padding-block-start: var(--space-3);
  }

  ot-lightbox [data-lightbox-status] {
    color: var(--muted-foreground);
    font-size: var(--text-7);
    margin-inline-end: auto;
  }
}

/* src/css/components/scrollspy.css */
@layer components {
  ot-scrollspy {
    display: block;
  }

  ot-scrollspy a[aria-current="location"] {
    color: var(--foreground);
    font-weight: var(--font-semibold);
  }
}

/* src/css/components/footnotes.css */
@layer components {
  ot-footnotes {
    display: contents;
  }

  ot-dropdown[data-footnote-preview] {
    display: inline;
  }

  ot-dropdown [data-footnote-popover] {
    width: var(--oatbase-footnote-width, min(24rem, calc(100% - var(--space-8))));
    max-height: var(--oatbase-footnote-max-height, min(18rem, calc(100dvh - var(--space-8))));
    overflow: auto;
    font-size: var(--text-7);
  }

  ot-dropdown [data-footnote-popover] > :first-child > :first-child {
    margin-block-start: 0;
  }

  ot-dropdown [data-footnote-popover] > :first-child > :last-child {
    margin-block-end: 0;
  }
}

/* src/css/components/reading-progress.css */
@layer components {
  ot-reading-progress, ot-reading-progress > progress {
    display: block;
  }
}

/* src/css/components/data-table.css */
@layer components {
  ot-data-table {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
  }

  ot-data-table > [data-table-toolbar] {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  ot-data-table > [data-table-toolbar] > :where([data-table-status], [data-table-selected]) {
    color: var(--muted-foreground);
    font-size: var(--text-7);
    margin-inline-start: auto;
  }

  ot-data-table table {
    width: 100%;
  }

  ot-data-table th[data-sort] {
    padding: 0;
  }

  ot-data-table th[data-sort] > [data-table-sort] {
    padding: var(--space-3);
    color: inherit;
    font: inherit;
    text-align: start;
    border: 0;
    border-radius: 0;
    justify-content: flex-start;
    width: 100%;
  }

  ot-data-table th[data-sort] > [data-table-sort]:after {
    content: "↕";
    color: var(--muted-foreground);
    margin-inline-start: auto;
  }

  ot-data-table th[data-sort][aria-sort="ascending"] > [data-table-sort]:after {
    content: "↑";
  }

  ot-data-table th[data-sort][aria-sort="descending"] > [data-table-sort]:after {
    content: "↓";
  }

  ot-data-table tr[data-selected] > * {
    background: var(--accent);
  }

  ot-data-table tr[hidden], ot-data-table [data-table-empty][hidden] {
    display: none;
  }

  ot-data-table[data-sticky] thead th {
    position: sticky;
    z-index: 1;
    background: var(--card);
    top: 0;
  }

  ot-data-table[data-density="compact"] :where(th, td) {
    padding: var(--space-2);
  }

  ot-data-table [data-table-select-all], ot-data-table [data-table-select-row] {
    margin: 0;
  }
}

/* src/css/components/repeater.css */
@layer components {
  ot-repeater {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
  }

  ot-repeater > [data-repeater-list] {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
  }

  ot-repeater [data-repeater-item] {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    min-width: 0;
    margin: 0;
  }

  ot-repeater [data-repeater-item] > legend {
    padding-inline: var(--space-1);
  }

  ot-repeater [data-repeater-actions] {
    display: flex;
    align-items:  center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  ot-repeater[data-layout="key-value"] [data-repeater-item] {
    grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr) auto;
    align-items:  end;
  }

  ot-repeater[data-layout="key-value"] [data-repeater-separator] {
    color: var(--muted-foreground);
    align-self:  center;
  }

  ot-repeater[data-layout="key-value"] [data-repeater-remove] {
    align-self:  end;
  }

  @media (max-width: 40rem) {
    ot-repeater[data-layout="key-value"] [data-repeater-item] {
      grid-template-columns: 1fr auto;
    }

    ot-repeater[data-layout="key-value"] [data-repeater-separator] {
      display: none;
    }

    ot-repeater[data-layout="key-value"] [data-repeater-item] > label {
      grid-column: 1;
    }

    ot-repeater[data-layout="key-value"] [data-repeater-remove] {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self:  center;
    }
  }
}

/* src/css/components/log-viewer.css */
@layer components {
  ot-log-viewer {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
  }

  ot-log-viewer > [data-log-toolbar] {
    display: flex;
    align-items:  center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  ot-log-viewer > [data-log-toolbar] > [data-log-status] {
    color: var(--muted-foreground);
    font-size: var(--text-7);
    margin-inline-start: auto;
  }

  ot-log-viewer > [role="log"] {
    box-sizing: border-box;
    min-height: var(--oatbase-log-min-height, 12rem);
    max-height: var(--oatbase-log-max-height, 28rem);
    overflow: auto;
    padding: var(--space-4);
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    font-family: var(--font-mono);
    font-size: var(--text-7);
    white-space: pre;
    tab-size: 2;
    margin: 0;
    line-height: 1.6;
  }

  ot-log-viewer > [role="log"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  ot-log-viewer [data-log-line] {
    display: block;
  }

  ot-log-viewer[data-density="compact"] > [role="log"] {
    min-height: var(--oatbase-log-min-height, 8rem);
    padding: var(--space-3);
    font-size: var(--text-8);
  }
}

/* src/css/components/prose.css */
@layer components {
  [data-prose] {
    max-inline-size: var(--oatbase-prose-width, 68ch);
    color: var(--foreground);
  }

  [data-prose] > :first-child {
    margin-block-start: 0;
  }

  [data-prose] > :last-child {
    margin-block-end: 0;
  }

  [data-prose] :where(p, ul, ol, dl, blockquote, pre, table, figure) {
    margin-block: var(--space-4);
  }

  [data-prose] :where(h2, h3, h4) {
    margin-block: var(--space-8) var(--space-3);
  }

  [data-prose] :where(ul, ol) {
    padding-inline-start: var(--space-6);
  }

  [data-prose] li + li {
    margin-block-start: var(--space-2);
  }

  [data-prose] blockquote {
    color: var(--muted-foreground);
    border-inline-start: 3px solid var(--primary);
    padding-inline-start: var(--space-4);
  }

  [data-prose] :where(img, video, iframe) {
    block-size: auto;
    max-inline-size: 100%;
  }

  [data-prose] figcaption {
    color: var(--muted-foreground);
    font-size: var(--text-7);
    margin-block-start: var(--space-2);
  }
}

/* src/css/components/description-list.css */
@layer components {
  [data-description-list] {
    display: grid;
    margin: 0;
  }

  [data-description-list] > div {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
    gap: var(--space-4);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--border);
  }

  [data-description-list] > div:first-child {
    border-block-start: 1px solid var(--border);
  }

  [data-description-list] :where(dt, dd) {
    margin: 0;
  }

  [data-description-list] dt {
    color: var(--muted-foreground);
  }

  [data-description-list][data-layout="stacked"] > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  @media (max-width: 36rem) {
    [data-description-list] > div {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }
  }
}

/* src/css/utilities.css */
@layer utilities {
  .visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

/* src/css/oat-compat.css */
@layer theme {
  :root:not([data-oat-theme]), [data-theme="light"]:not([data-oat-theme]):not([data-oat-theme] *) {
    --input: #8e8e98;
    --faint-foreground: #71717a;
    --warning-foreground: #fff;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-oat-theme]) {
      --input: #71717a;
      --faint-foreground: #a1a1aa;
      --warning-foreground: #09090b;
    }
  }

  :root[data-theme="dark"]:not([data-oat-theme]), [data-theme="dark"]:not([data-oat-theme]):not([data-oat-theme] *) {
    --input: #71717a;
    --faint-foreground: #a1a1aa;
    --warning-foreground: #09090b;
  }
}

@layer components {
  fieldset.group > legend {
    color: var(--foreground);
  }

  [aria-busy="true"][data-spinner~="overlay"] > * {
    opacity: 0;
  }

  ot-command [data-command-search]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }

  ot-dropdown [popover] [role="menuitem"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }

  [role="tabpanel"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }
}

/* src/css/extensions.css */