@layer skirbi-base,skirbi-theme,skirbi-transform,skirbi-components,skirbi-app;@layer skirbi-theme{[skirbi-theme]{--skirbi-on-dark:#ffffff;--skirbi-on-light:#0f172a;--skirbi-primary-main:#0f172a;--skirbi-primary-soft:color-mix(in srgb, var(--skirbi-primary-main)
      30%, white);--skirbi-primary-strong:color-mix(in srgb, var(--skirbi-primary-main)
      30%, black);--skirbi-primary-contrast:var(--skirbi-on-dark);--skirbi-secondary-main:#06b6d4;--skirbi-secondary-soft:color-mix(in srgb,
      var(--skirbi-secondary-main) 30%, white);--skirbi-secondary-strong:color-mix(in srgb,
      var(--skirbi-secondary-main) 30%, black);--skirbi-secondary-contrast:var(--skirbi-on-dark);--skirbi-tertiary-main:#f8fafc;--skirbi-tertiary-soft:color-mix(in srgb,
      var(--skirbi-tertiary-main) 30%, white);--skirbi-tertiary-strong:color-mix(in srgb,
      var(--skirbi-tertiary-main) 30%, black);--skirbi-tertiary-contrast:var(--skirbi-on-light);--skirbi-quaternary-main:#475569;--skirbi-quaternary-soft:color-mix(in srgb,
      var(--skirbi-quaternary-main) 30%, white);--skirbi-quaternary-strong:color-mix(in srgb,
      var(--skirbi-quaternary-main) 30%, black);--skirbi-quaternary-contrast:var(--skirbi-on-dark);--skirbi-primary-light:var(--skirbi-primary-soft);--skirbi-primary-dark:var(--skirbi-primary-strong);--skirbi-secondary-light:var(--skirbi-secondary-soft);--skirbi-secondary-dark:var(--skirbi-secondary-strong);--skirbi-tertiary-light:var(--skirbi-tertiary-soft);--skirbi-tertiary-dark:var(--skirbi-tertiary-strong);--skirbi-quaternary-light:var(--skirbi-quaternary-soft);--skirbi-quaternary-dark:var(--skirbi-quaternary-strong);--skirbi-bg-transform:wash;--skirbi-wash-perc:8%;--skirbi-reverse-wash-perc:85%;--skirbi-bg-transform-perc:var(--skirbi-wash-perc);--skirbi-theme-mode:light;--skirbi-page-bg-source:var(--skirbi-primary-main);--skirbi-page-fg:var(--skirbi-on-light);--skirbi-surface-bg-source:var(--skirbi-tertiary-main);--skirbi-surface-fg:var(--skirbi-on-light);--skirbi-surface-lift:8%;--skirbi-border-lift:12%;--skirbi-muted-lift:40%;--skirbi-transition-duration:180ms;--skirbi-transform-duration:140ms;--skirbi-transition-ease:cubic-bezier(0.4, 0, 0.2, 1);--skirbi-font-sans:ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji",
      "Segoe UI Emoji";--skirbi-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco,
      Consolas, "Liberation Mono", "Courier New", monospace;--skirbi-font-scale:1.125;--skirbi-line-height:1.7;--skirbi-h1-scale:2.5;--skirbi-h2-scale:1.875;--skirbi-h3-scale:1.5;--skirbi-h4-scale:1.25;--skirbi-prose-gap:1.25rem;--skirbi-heading-line-height:1.2;--skirbi-heading-tracking:-0.01em;@media(max-width:48rem){--skirbi-font-scale: 1; --skirbi-h1-scale: 1.75; --skirbi-h2-scale: 1.375; --skirbi-h3-scale: 1.2; --skirbi-h4-scale: 1.1;}--skirbi-triptych-content:110ch;--skirbi-triptych-aside:16rem;--skirbi-triptych-gap:clamp(1rem, 2vw, 2rem);--skirbi-triptych-edge:clamp(1rem, 3vw, 2rem);--skirbi-terminal-dot-close:#e27878;--skirbi-terminal-dot-minimize:#e2a478;--skirbi-terminal-dot-maximize:#b4be82;--skirbi-button-radius:999px;--skirbi-button-font-family:inherit;--skirbi-button-lead-bg:var(--skirbi-primary-main);--skirbi-button-lead-color:var(--skirbi-primary-contrast);--skirbi-button-lead-hover-bg:var(--skirbi-secondary-main);--skirbi-button-lead-hover-color:var(--skirbi-secondary-contrast);--skirbi-button-support-bg:transparent;--skirbi-button-support-color:var(--skirbi-primary-main);--skirbi-button-support-border:var(--skirbi-primary-main);--skirbi-button-support-hover-bg:color-mix(in srgb,
      var(--skirbi-primary-main) 8%, transparent);--skirbi-button-support-hover-color:var(--skirbi-primary-main);--skirbi-button-extra-bg:transparent;--skirbi-button-extra-color:var(--skirbi-primary-main);--skirbi-button-extra-border:var(--skirbi-surface-border-final);--skirbi-button-extra-hover-bg:color-mix(in srgb,
      var(--skirbi-primary-main) 5%, transparent);--skirbi-button-extra-hover-color:var(--skirbi-primary-main);--skirbi-button-extra-hover-border:var(--skirbi-primary-main);--skirbi-button-antagonist-bg:transparent;--skirbi-button-antagonist-color:var(--skirbi-error-base, #b91c1c);--skirbi-button-antagonist-border:var(--skirbi-error-base, #b91c1c);--skirbi-button-antagonist-hover-bg:color-mix(in srgb,
      var(--skirbi-error-base, #b91c1c) 8%, transparent);--skirbi-button-antagonist-hover-color:var(--skirbi-error-base,
      #b91c1c);--skirbi-button-antagonist-strong-bg:var(--skirbi-error-base,
      #b91c1c);--skirbi-button-herald-bg:transparent;--skirbi-button-herald-color:var(--skirbi-warn-base, #d97706);--skirbi-button-herald-border:var(--skirbi-warn-base, #d97706);--skirbi-button-herald-hover-bg:color-mix(in srgb, var(--skirbi-warn-base, #d97706) 8%, transparent);--skirbi-button-herald-hover-color:var(--skirbi-warn-base, #d97706);--skirbi-button-herald-strong-bg:var(--skirbi-warn-base, #d97706)}[skirbi-theme][skirbi-theme-mode=dark]{--skirbi-theme-mode:dark;--skirbi-env-base:black;--skirbi-page-bg-source:var(--skirbi-primary-main);--skirbi-page-fg:var(--skirbi-primary-contrast);--skirbi-surface-bg-source:var(--skirbi-secondary-main);--skirbi-surface-fg:var(--skirbi-secondary-contrast);--skirbi-surface-lift:12%;--skirbi-border-lift:18%}}@layer skirbi-transform{[skirbi-theme]{--skirbi-env-base:white}[skirbi-theme][skirbi-theme-mode=dark]{--skirbi-env-base:black}[skirbi-theme][skirbi-bg-transform=none]{--skirbi-bg-transform-perc:100%}[skirbi-theme][skirbi-bg-transform=wash]{--skirbi-bg-transform-perc:var(--skirbi-wash-perc)}[skirbi-theme][skirbi-bg-transform=reverse-wash]{--skirbi-bg-transform-perc:var(--skirbi-reverse-wash-perc)}[skirbi-theme]{--skirbi-page-bg-transformed:color-mix(
      in srgb, var(--skirbi-page-bg-source) var(--skirbi-bg-transform-perc),
      var(--skirbi-env-base)
    );--skirbi-surface-bg-transformed:color-mix(
      in srgb,
      var(--skirbi-surface-bg-source) calc(100% - var(--skirbi-surface-lift)),
      var(--skirbi-env-base)
    );--skirbi-surface-bg-elevated-transformed:color-mix(
      in srgb,
      var(--skirbi-surface-bg-source)
        calc(100% - (var(--skirbi-surface-lift) + 10%)),
      var(--skirbi-env-base)
    );--skirbi-surface-border-transformed:color-mix(
      in srgb,
      var(--skirbi-surface-bg-source) calc(100% - var(--skirbi-border-lift)),
      var(--skirbi-env-base)
    );--skirbi-text-muted-transformed:color-mix(
      in srgb,
      var(--skirbi-page-fg) calc(100% - var(--skirbi-muted-lift)),
      var(--skirbi-env-base)
    );--skirbi-page-bg-final:var(--skirbi-page-bg,
      var(--skirbi-page-bg-transformed));--skirbi-surface-bg-final:var(--skirbi-surface-bg,
      var(--skirbi-surface-bg-transformed));--skirbi-surface-bg-elevated-final:var(
      --skirbi-surface-bg-elevated,
      var(--skirbi-surface-bg-elevated-transformed)
    );--skirbi-surface-border-final:var(--skirbi-surface-border,
      var(--skirbi-surface-border-transformed));--skirbi-text-muted-final:var(--skirbi-text-muted,
      var(--skirbi-text-muted-transformed))}}@layer skirbi-base{[skirbi-theme]{*, *::before, *::after { box-sizing: border-box; }}[skirbi-theme]{semtic-page > main, semtic-page > main > [semtic-body]{display:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;flex:1;min-height:inherit}html, body{margin:0;height:100%} :is( semtic-page, semtic-panel, semtic-tile, semtic-article, semtic-section, semtic-header, semtic-footer, semtic-form, semtic-actions, semtic-grid, semtic-flex, semtic-stack ) { display: block; } color: var(--skirbi-page-fg, var(--skirbi-on-light, #0f172a));font-family:var( --skirbi-font-sans,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial );font-size:calc(16px * var(--skirbi-font-scale,1));line-height:var(--skirbi-line-height,1.55); :where(h1, h2, h3, h4) { line-height: var(--skirbi-heading-line-height, 1.15); letter-spacing: var(--skirbi-heading-tracking, -0.01em); font-weight: 700; margin: 0; } :where(h1) { font-size: calc(1rem * var(--skirbi-h1-scale, 2)); } :where(h2) { font-size: calc(1rem * var(--skirbi-h2-scale, 1.5)); } :where(h3) { font-size: calc(1rem * var(--skirbi-h3-scale, 1.25)); } :where(h4) { font-size: calc(1rem * var(--skirbi-h4-scale, 1.125)); } :where(p, ul, ol) { margin-block: var(--skirbi-prose-gap, 1rem); } :where(code, pre, kbd, samp) { font-family: var( --skirbi-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ); font-size: 0.95em; } :where(pre) { padding: 1rem; border: 1px solid var(--skirbi-surface-border-final); border-radius: 0.75rem; background: var(--skirbi-surface-bg-final); overflow: auto; } :where(a) { color: color-mix(in srgb, var(--skirbi-secondary-main, #06b6d4) 85%, black); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; font-weight: 500; } :where(hr) { border: 0; border-top: 1px solid var(--skirbi-surface-border-final); margin-block: calc(var(--skirbi-prose-gap, 1rem) * 1.25); } [skirbi-text="muted"] { color: var(--skirbi-text-muted-final); } html, body { background: var(--skirbi-page-bg-final); color: var(--skirbi-page-fg, var(--skirbi-on-light, #0f172a)); } :where(a, button, input, select, textarea, summary, [tabindex]) :focus-visible { outline: var(--skirbi-focus-ring-size, 2px) solid var(--skirbi-focus-ring-color, var(--skirbi-primary-main)); outline-offset: 2px; box-shadow: none; } --skirbi-info-base: #2f6fed;--skirbi-success-base:#0f766e;--skirbi-warn-base:#d97706;--skirbi-error-base:#b91c1c}}@layer skirbi-components{[skirbi-theme]{ :is(semtic-panel, semtic-tile) { background: var(--skirbi-surface-bg-final); border: 1px solid var(--skirbi-surface-border-final); color: inherit; } semtic-panel { padding: 1.25rem; border-radius: 1rem; transition: transform var(--skirbi-transform-duration) var(--skirbi-transition-ease), box-shadow var(--skirbi-transition-duration) var(--skirbi-transition-ease); } semtic-tile { padding: 1rem; border-radius: 0.9rem; }}[skirbi-theme]{ [skirbi-center-page] { display: flex; min-height: 100dvh; align-items: center; justify-content: center; }}[skirbi-theme]{semtic-grid{display:grid;gap:var(--skirbi-grid-gap,1rem);grid-template-columns:repeat( var(--skirbi-columns,1),minmax(0,1fr) )}}[skirbi-theme]{semtic-flex{display:flex;gap:var(--skirbi-flex-gap,1rem);flex-direction:var(--skirbi-direction,row);justify-content:var(--skirbi-justify,flex-start);align-items:var(--skirbi-align,stretch);flex-wrap:var(--skirbi-wrap,nowrap);&[semtic-direction=row]{--skirbi-direction:row}&[semtic-direction=column]{--skirbi-direction:column}&[semtic-justify=start]{--skirbi-justify:flex-start}&[semtic-justify=center]{--skirbi-justify:center}&[semtic-justify=end]{--skirbi-justify:flex-end}&[semtic-justify=between]{--skirbi-justify:space-between}&[semtic-justify=around]{--skirbi-justify:space-around}&[semtic-justify=evenly]{--skirbi-justify:space-evenly}&[semtic-align=start]{--skirbi-align:flex-start}&[semtic-align=center]{--skirbi-align:center}&[semtic-align=end]{--skirbi-align:flex-end}&[semtic-align=stretch]{--skirbi-align:stretch}&[semtic-align=baseline]{--skirbi-align:baseline}&[semtic-wrap=wrap]{--skirbi-wrap:wrap}}}[skirbi-theme]{semtic-stack{display:flex;flex-direction:column;gap:var(--skirbi-stack-gap,1rem)}}[skirbi-theme]{semtic-terminal{display:block;> article{min-width:0;max-width:100%;overflow:hidden;background:var(--skirbi-surface-bg-final);border:1px solid var(--skirbi-surface-border-final);border-radius:.75rem;> header{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--skirbi-surface-border-final);border-radius:.75rem .75rem 0 0;semtic-terminal-dots > span{display:block;width:.75rem;height:.75rem;border-radius:50%;background:var(--skirbi-surface-border-final)} [semtic-terminal-title] { flex: 1; color: var(--skirbi-text-muted-final); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [semtic-terminal-copy] { background: transparent; border: 1px solid var(--skirbi-surface-border-final); padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; color: var(--skirbi-secondary-main); border-color: var(--skirbi-secondary-main); &:hover { background: color-mix( in srgb, var(--skirbi-secondary-main) 10%, transparent ); } }}pre{margin:0;padding:1rem;overflow-x:auto;border:none;border-radius:0 0 .75rem .75rem;color:var(--skirbi-terminal-fg,inherit);code{background:0 0;white-space:pre}}code{background:0 0}}&[semtic-terminal-style=macos] semtic-terminal-dots > span:nth-child(1){background:var(--skirbi-terminal-dot-close)}&[semtic-terminal-style=macos] semtic-terminal-dots > span:nth-child(2){background:var(--skirbi-terminal-dot-minimize)}&[semtic-terminal-style=macos] semtic-terminal-dots > span:nth-child(3){background:var(--skirbi-terminal-dot-maximize)}&:not([semtic-terminal-style]) semtic-terminal-dots > span, &[semtic-terminal-style=linux] semtic-terminal-dots > span{display:none}&:not([semtic-terminal-style]) semtic-terminal-dots::before, &[semtic-terminal-style=linux] semtic-terminal-dots::before{content:'';display:block;width:1.25rem;height:1.25rem;background-color:var(--skirbi-secondary-main);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cline x1='12' y1='19' x2='20' y2='19'%3E%3C/line%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 17 10 11 4 5'%3E%3C/polyline%3E%3Cline x1='12' y1='19' x2='20' y2='19'%3E%3C/line%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}&[semtic-terminal-style=windows] semtic-terminal-dots > span{display:none}&[semtic-terminal-style=windows] semtic-terminal-dots::before{content:'─  □  ✕';font-size:.75rem;color:var(--skirbi-text-muted-final);letter-spacing:.1em}&[semtic-terminal-style=none] semtic-terminal-dots{display:none}}}[skirbi-theme]{ [semtic-link-wrapper] { display: inline-flex; align-items: center; gap: 0.25rem; } [semtic-link-copy] { background: transparent; border: 1px solid var(--skirbi-surface-border-final); padding: 0.125rem 0.375rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; line-height: 1; &:hover { background: var(--skirbi-surface-bg-final); } &[data-copied] { background: color-mix( in srgb, var(--skirbi-success-base, #0f766e) 15%, var(--skirbi-surface-bg-final) ); border-color: var(--skirbi-success-base, #0f766e); } &::before { content: var(--skirbi-link-copy-icon, "📋"); } &[data-copied]::before { content: var(--skirbi-link-copy-icon-success, "✓"); } } a[data-external]::after { content: '↗'; font-size: 0.75em; margin-left: 0.25em; opacity: 0.6; }}[skirbi-theme]{semtic-aside{display:block;font-size:.7rem;margin:1.5rem 0;> aside{padding:1rem;border-left:4px solid var(--skirbi-surface-border-final);background:var(--skirbi-surface-bg-final); [semtic-aside-header] { font-weight: 600; margin-bottom: 0.5rem; } h3 { margin: 0 0 0.5rem 0; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--skirbi-aside-header-color, var(--skirbi-page-fg)); } nav a { display: flex; align-items: baseline; gap: 0.4rem; &::before { content: var(--skirbi-aside-menu-item-separator, var(--skirbi-menu-item-separator, "›")); opacity: 0.7; } &[aria-current="page"] { color: var(--skirbi-aside-current-color, var(--skirbi-page-fg)); font-weight: 600; } } [semtic-aside-body] > *:first-child { margin-top: 0; } [semtic-aside-body] > *:last-child { margin-bottom: 0; }}> aside[data-variant=note]{border-left-color:var(--skirbi-quaternary-main,#2f6fed)}> aside[data-variant=warning]{border-left-color:var(--skirbi-warn-base,#d97706)}> aside[data-variant=info]{border-left-color:var(--skirbi-info-base,#2f6fed)}> aside[data-variant=tip]{border-left-color:var(--skirbi-success-base,#0f766e)}}}[skirbi-theme]{ [semtic-breadcrumbs] { font-size: 0.85rem; } semtic-breadcrumb { nav { display: block; } ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } li { display: flex; align-items: center; } [semtic-separator] { color: var(--skirbi-quaternary-main); font-size: 0.875em; } a { color: var(--skirbi-quaternary-main); text-decoration: none; &:hover { color: var(--skirbi-text-muted-final); } } li:last-child span { color: var(--skirbi-quaternary-main); font-weight: 500; } }}[skirbi-theme]{semtic-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;font-size:.875rem;color:var(--skirbi-text-muted-final);margin-bottom:1.5rem;semtic-tags{display:flex;flex-basis:100%;flex-wrap:wrap;gap:.375rem}semtic-tag{display:inline-flex;padding:.125rem .5rem;border-radius:.25rem;background:color-mix( in srgb,var(--skirbi-primary-main) 10%,transparent );color:var(--skirbi-primary-main);font-size:.8em}}}[skirbi-theme]{semtic-article [semtic-article-hero]{margin-bottom:2rem;overflow:hidden}semtic-article [semtic-article-hero-img]{width:100%;height:auto;display:block;object-fit:cover}semtic-header > header{margin-bottom:1.5rem}}[skirbi-theme]{semtic-table{display:block;table{width:100%;border-collapse:collapse;font-size:inherit;color:inherit}caption{text-align:left;font-weight:700;margin-bottom:.75rem;color:var(--skirbi-page-fg)}th, td{text-align:left;color:inherit}th{font-weight:600;color:var(--skirbi-text-muted-final)}th[semtic-sortable]{user-select:none;&::after{content:' ↕';opacity:.4;font-size:.75em}}th[data-sort-dir=asc]::after{content:' ↑';opacity:1;color:var(--skirbi-primary-main)}th[data-sort-dir=desc]::after{content:' ↓';opacity:1;color:var(--skirbi-primary-main)} [semtic-table-toolbar] { margin-bottom: 0.75rem; } [semtic-table-search] { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--skirbi-surface-border-final); border-radius: 0.375rem; background: var(--skirbi-surface-bg-final); color: inherit; font-size: inherit; } tfoot td { padding-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; } [semtic-table-page-info] { font-size: 0.875rem; color: var(--skirbi-text-muted-final); } [semtic-table-root][semtic-loading] { opacity: 0.6; pointer-events: none; } &[semtic-table-variant="default"] th, &[semtic-table-variant="default"] td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--skirbi-surface-border-final); } &[semtic-table-variant="default"] thead tr { border-bottom: 2px solid var(--skirbi-surface-border-final); } &[semtic-table-variant="default"] tbody tr:hover { background: color-mix( in srgb, var(--skirbi-primary-main) 5%, transparent ); } &[semtic-table-variant="zebra"] th, &[semtic-table-variant="zebra"] td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--skirbi-surface-border-final); } &[semtic-table-variant="zebra"] thead tr { border-bottom: 2px solid var(--skirbi-surface-border-final); } &[semtic-table-variant="zebra"] tbody tr:nth-child(even) { background: color-mix( in srgb, var(--skirbi-surface-bg-source) 4%, transparent ); } &[semtic-table-variant="zebra"] tbody tr:hover { background: color-mix( in srgb, var(--skirbi-primary-main) 5%, transparent ); }}}[skirbi-theme]{semtic-nav > nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.5rem;border-bottom:1px solid var(--skirbi-surface-border-final)}semtic-nav:not([semtic-align=end]) [semtic-nav-brand]{margin-right:auto}semtic-nav[semtic-align=end] [semtic-nav-brand]{margin-left:auto} [semtic-nav-link] { white-space: nowrap; } semtic-nav > nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } semtic-nav [semtic-nav-brand] { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; flex-shrink: 0; } semtic-nav [semtic-nav-avatar] { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; } semtic-nav [semtic-nav-title] { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; } semtic-nav semtic-nav-item + semtic-nav-item::before { content: '𐄁'; display: flex; align-items: center; color: var(--skirbi-text-muted-final); font-size: 0.75em; padding: 0 0.125rem; } semtic-nav[semtic-nav-social] > nav { justify-content: center; padding: 1rem 1.5rem; border-top: 1px solid var(--skirbi-surface-border-final); border-bottom: none; gap: 1rem; } semtic-nav[semtic-nav-social] a { display: flex; align-items: center; color: var(--skirbi-text-muted-final); transition: color var(--skirbi-transition-duration, 160ms) var(--skirbi-transition-ease, ease); &:hover { color: var(--skirbi-primary-main); } } semtic-nav[semtic-nav-social] svg { width: 1.25rem; height: 1.25rem; } semtic-nav nav { display: flex; align-items: center; gap: 1rem; } semtic-nav-item { display: contents; } @media (max-width: 47.999rem) { semtic-nav > nav { flex-wrap: wrap; gap: 0.75rem; } semtic-nav [semtic-nav-brand] { flex: 1 0 100%; } }}[skirbi-theme]{semtic-nav-item > li{list-style:none;display:inline-flex}semtic-nav-item [semtic-nav-link]{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:.375rem;text-decoration:none;color:inherit;background:0 0;border:none;cursor:pointer;font:inherit;font-size:.9rem;transition:background var(--skirbi-transition-duration,160ms)var(--skirbi-transition-ease,ease),color var(--skirbi-transition-duration,160ms)var(--skirbi-transition-ease,ease)}semtic-nav-item [semtic-nav-link]:hover{background:color-mix( in srgb,var(--skirbi-primary-main) 8%,transparent );color:var(--skirbi-primary-main)}semtic-nav-item :is( li[aria-current=page] > [semtic-nav-link], [semtic-nav-link][aria-current=page] ){background:color-mix( in srgb,var(--skirbi-primary-main) 12%,transparent );color:var(--skirbi-primary-main);font-weight:600}semtic-nav-item [semtic-nav-children] semtic-nav-item [semtic-nav-link] ::before{content:'›';opacity:.5;font-size:1em}semtic-nav-item [semtic-nav-children]{list-style:none;margin:0;padding:0 0 0 1rem}}[skirbi-theme]{semtic-nav-section > li{list-style:none}semtic-nav-section [semtic-nav-section-label]{display:block;padding:.375rem .75rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--skirbi-text-muted-final)}semtic-nav-section [semtic-nav-section-body]{list-style:none;margin:0;padding:0}semtic-nav-section + semtic-nav-section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--skirbi-surface-border-final)}}[skirbi-theme]{semtic-sidenav{display:block;> nav{display:flex;flex-direction:column;width:var(--skirbi-sidenav-width,16rem);min-height:100%;background:var(--skirbi-surface-bg-final);border-right:1px solid var(--skirbi-surface-border-final);padding:1rem .5rem;gap:.25rem} [semtic-sidenav-label] { display: block; padding: 0.5rem 0.75rem 1rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--skirbi-page-fg); border-bottom: 1px solid var(--skirbi-surface-border-final); margin-bottom: 0.5rem; } [semtic-sidenav-body] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; flex: 1; } @media (max-width: 63.999rem) { position: fixed; inset: 0; z-index: 40; pointer-events: none; > nav { position: absolute; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform var(--skirbi-transition-duration, 160ms) var(--skirbi-transition-ease, ease); pointer-events: all; } &[semtic-sidenav-open] { pointer-events: all; &::before { content: ''; position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); z-index: -1; } > nav { transform: translateX(0); } } } @media (min-width: 64rem) { position: sticky; top: 0; height: 100vh; }}}[skirbi-theme]{semtic-breadcrumb{padding:1rem 0;font-size:.875rem;color:var(--skirbi-quaternary-main)}}[skirbi-theme]{semtic-article{margin:2rem auto}}[skirbi-theme]{ :where(pre) { background: color-mix( in srgb, var(--skirbi-primary-main) 5%, var(--skirbi-tertiary-main) ); border: 1px solid color-mix( in srgb, var(--skirbi-primary-main) 10%, transparent ); border-radius: 0.75rem; } :where(code) { background: color-mix( in srgb, var(--skirbi-primary-main) 8%, var(--skirbi-tertiary-main) ); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.9em; } :where(pre code) { background: transparent; padding: 0; }}[skirbi-theme]{semtic-linked-list{display:block;> section{background:var(--skirbi-surface-bg-final);padding:1.5rem;border-radius:.5rem}nav{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;> a{display:block;padding:1rem;border:1px solid var(--skirbi-surface-border-final);border-radius:.375rem;text-decoration:none;transition:all 200ms ease;&:hover{border-color:var(--skirbi-primary-main);background:color-mix( in srgb,var(--skirbi-primary-main) 5%,transparent )}&[aria-current=page]{border-color:var(--skirbi-primary-main);background:color-mix( in srgb,var(--skirbi-primary-main) 10%,transparent )}}}&[data-variant=series] nav > a{padding:.75rem}&[data-variant=related] nav h3{margin:0 0 .5rem;font-size:1.125rem}&[data-variant=related] nav p{margin:0 0 .5rem;color:var(--skirbi-text-muted-final)}&[data-variant=related] nav time{font-size:.875rem;color:var(--skirbi-text-muted-final)}}}[skirbi-theme]{ [semtic-link-copy]::before { content: var(--skirbi-link-copy-icon, "📋"); } [semtic-link-copy][data-copied]::before { content: var(--skirbi-link-copy-icon-success, "✓"); } [semtic-link-copy] { cursor: pointer; background: none; border: none; }}[skirbi-theme]{semtic-toggle{display:inline-block;--skirbi-toggle-gap-inline:0.6rem;--skirbi-toggle-gap-block:0.35rem;--skirbi-toggle-track-width:2.6rem;--skirbi-toggle-track-height:1.35rem;--skirbi-toggle-thumb-size:1rem;--skirbi-toggle-thumb-offset:0.175rem;--skirbi-toggle-pill-padding-block:0.3rem;--skirbi-toggle-pill-padding-inline:0.75rem;--skirbi-toggle-bg-off:var(--skirbi-surface-border-final);--skirbi-toggle-bg-on:var(--skirbi-primary-main);--skirbi-toggle-fg-on:var(--skirbi-primary-contrast);--skirbi-toggle-thumb-bg:var(--skirbi-surface-bg-final);--skirbi-toggle-border:var(--skirbi-surface-border-final);> label[semtic-toggle]{display:inline-block;cursor:pointer}input[wc-control]{position:absolute;opacity:0;pointer-events:none} [semtic-toggle-label] { line-height: 1.25; } [semtic-toggle-visual] { display: inline-grid; align-items: center; gap: var(--skirbi-toggle-gap-block) var(--skirbi-toggle-gap-inline); width: fit-content; } [semtic-toggle-thumb] { grid-area: thumb; } [semtic-toggle-label] { grid-area: label; } &:not([label-position]) [semtic-toggle-visual], &[label-position="left"] [semtic-toggle-visual] { grid-template-areas: "label thumb"; } &[label-position="right"] [semtic-toggle-visual] { grid-template-areas: "thumb label"; } &[label-position="top"] [semtic-toggle-visual] { grid-template-areas: "label" "thumb"; justify-items: start; } &[label-position="bottom"] [semtic-toggle-visual] { grid-template-areas: "thumb" "label"; justify-items: start; } &:not([type="pill"])[label-position="inside"] [semtic-toggle-visual] { grid-template-areas: "label thumb"; } &:not([type="pill"]) [semtic-toggle-thumb], &[type="switch"] [semtic-toggle-thumb] { position: relative; display: inline-block; inline-size: var(--skirbi-toggle-track-width); block-size: var(--skirbi-toggle-track-height); border-radius: 999px; background: var(--skirbi-toggle-bg-off); transition: background var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease), box-shadow var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease); &::before { content: ""; position: absolute; inline-size: var(--skirbi-toggle-thumb-size); block-size: var(--skirbi-toggle-thumb-size); top: var(--skirbi-toggle-thumb-offset); left: var(--skirbi-toggle-thumb-offset); border-radius: 50%; background: var(--skirbi-toggle-thumb-bg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform var(--skirbi-transform-duration, 140ms) var(--skirbi-transition-ease, ease), background var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease); } } &:not([type="pill"]) input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb], &[type="switch"] input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb] { background: var(--skirbi-toggle-bg-on); } &:not([type="pill"]) input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb]::before, &[type="switch"] input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb]::before { transform: translateX( calc( var(--skirbi-toggle-track-width) - var(--skirbi-toggle-thumb-size) - (var(--skirbi-toggle-thumb-offset) * 2) ) ); } &[type="pill"] [semtic-toggle-visual] { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-inline-size: 0; padding: var(--skirbi-toggle-pill-padding-block) var(--skirbi-toggle-pill-padding-inline); border: 1px solid var(--skirbi-toggle-border); border-radius: 999px; background: transparent; color: inherit; line-height: 1.1; white-space: nowrap; transition: background var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease), border-color var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease), color var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease), box-shadow var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease); } &[type="pill"] [semtic-toggle-thumb] { display: none; } &[type="pill"] input[wc-control]:checked + [semtic-toggle-visual] { background: var(--skirbi-toggle-bg-on); border-color: var(--skirbi-toggle-bg-on); color: var(--skirbi-toggle-fg-on); } &[type="pill"][label-position="left"] [semtic-toggle-visual], &[type="pill"][label-position="right"] [semtic-toggle-visual], &[type="pill"][label-position="top"] [semtic-toggle-visual], &[type="pill"][label-position="bottom"] [semtic-toggle-visual] { display: inline-grid; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; } &[type="pill"][label-position="left"] [semtic-toggle-visual] { grid-template-areas: "label thumb"; } &[type="pill"][label-position="right"] [semtic-toggle-visual] { grid-template-areas: "thumb label"; } &[type="pill"][label-position="top"] [semtic-toggle-visual] { grid-template-areas: "label" "thumb"; justify-items: start; } &[type="pill"][label-position="bottom"] [semtic-toggle-visual] { grid-template-areas: "thumb" "label"; justify-items: start; } &[type="pill"][label-position="left"] [semtic-toggle-thumb], &[type="pill"][label-position="right"] [semtic-toggle-thumb], &[type="pill"][label-position="top"] [semtic-toggle-thumb], &[type="pill"][label-position="bottom"] [semtic-toggle-thumb] { display: inline-flex; grid-area: thumb; align-items: center; justify-content: center; min-inline-size: 2rem; padding: var(--skirbi-toggle-pill-padding-block) var(--skirbi-toggle-pill-padding-inline); border: 1px solid var(--skirbi-toggle-border); border-radius: 999px; background: transparent; } &[type="pill"][label-position="left"] input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb], &[type="pill"][label-position="right"] input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb], &[type="pill"][label-position="top"] input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb], &[type="pill"][label-position="bottom"] input[wc-control]:checked + [semtic-toggle-visual] [semtic-toggle-thumb] { background: var(--skirbi-toggle-bg-on); border-color: var(--skirbi-toggle-bg-on); } input[wc-control]:focus-visible + [semtic-toggle-visual], input[wc-control]:focus-visible + [semtic-toggle-visual] [semtic-toggle-thumb] { box-shadow: 0 0 0 var(--skirbi-focus-ring-size, 2px) var(--skirbi-focus-ring-color, var(--skirbi-primary-main)); } &:has(input[wc-control]:disabled) > label[semtic-toggle] { cursor: not-allowed; opacity: 0.55; } &[type="pill"] { display: inline-block; width: fit-content; } &[type="pill"] > label[semtic-toggle] { display: inline-block; width: fit-content; } &[type="pill"] > label[semtic-toggle] > input[wc-control] + [semtic-toggle-visual] { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 0; padding: 0.3rem 0.75rem; border: 1px solid var(--skirbi-surface-border-final); border-radius: 999px; background: transparent; color: inherit; line-height: 1.1; white-space: nowrap; } &[type="pill"] [semtic-toggle-thumb] { display: none; } &[type="pill"] > label[semtic-toggle] > input[wc-control]:checked + [semtic-toggle-visual] { background: var(--skirbi-primary-main); border-color: var(--skirbi-primary-main); color: var(--skirbi-primary-contrast); }}}[skirbi-theme]{semtic-input, semtic-select, semtic-textarea, semtic-checkbox, semtic-radio{display:flex;flex-direction:row;align-items:center;gap:.5rem}input[wc-control], select[wc-control], textarea[wc-control]{appearance:none;-webkit-appearance:none}semtic-input[label-position=left], semtic-select[label-position=left], semtic-textarea[label-position=left], semtic-checkbox[label-position=left], semtic-radio[label-position=left]{flex-direction:row;align-items:center}semtic-input[label-position=right], semtic-select[label-position=right], semtic-textarea[label-position=right], semtic-checkbox[label-position=right], semtic-radio[label-position=right]{flex-direction:row-reverse;align-items:center}semtic-input[label-position=top], semtic-select[label-position=top], semtic-textarea[label-position=top], semtic-checkbox[label-position=top], semtic-radio[label-position=top]{flex-direction:column;align-items:flex-start}semtic-input[label-position=bottom], semtic-select[label-position=bottom], semtic-textarea[label-position=bottom], semtic-checkbox[label-position=bottom], semtic-radio[label-position=bottom]{flex-direction:column-reverse;align-items:flex-start}semtic-input[label-position=top] input[wc-control], semtic-input[label-position=bottom] input[wc-control], semtic-select[label-position=top] select[wc-control], semtic-select[label-position=bottom] select[wc-control], semtic-textarea[label-position=top] textarea[wc-control], semtic-textarea[label-position=bottom] textarea[wc-control]{width:100%;box-sizing:border-box}semtic-toggle[type=pill][label-position=inside] [semtic-toggle-label]{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}semtic-input[label-position=top], semtic-input[label-position=bottom], semtic-select[label-position=top], semtic-select[label-position=bottom], semtic-textarea[label-position=top], semtic-textarea[label-position=bottom]{width:100%}semtic-select[label-position=top] [skirbi-select], semtic-select[label-position=bottom] [skirbi-select]{width:100%}semtic-select[label-error-position=inline] [skirbi-select]{width:100%;grid-column:1/-1}semtic-input:has([semtic-error]:not(:empty)) [semtic-label], semtic-select:has([semtic-error]:not(:empty)) [semtic-label], semtic-textarea:has([semtic-error]:not(:empty)) [semtic-label]{color:var(--skirbi-error-base,#b91c1c)}semtic-input:has([semtic-error]:not(:empty)), semtic-select:has([semtic-error]:not(:empty)), semtic-textarea:has([semtic-error]:not(:empty)){background:color-mix( in srgb,var(--skirbi-error-base,#b91c1c) 6%,transparent );border-radius:.5rem;padding:.5rem .5rem .75rem}input[wc-control], select[wc-control], textarea[wc-control]{padding:.6rem .75rem;border:1px solid var(--skirbi-surface-border-final);border-radius:.5rem;background:var(--skirbi-secondary-light);color:var(--skirbi-secondary-dark);font:inherit;box-sizing:border-box}input[wc-control]:focus, select[wc-control]:focus, textarea[wc-control]:focus{outline:none;border-color:var(--skirbi-primary-main);box-shadow:0 0 0 3px color-mix( in srgb,var(--skirbi-primary-main) 25%,transparent )} :is( semtic-input[type="checkbox"], semtic-input[type="radio"], semtic-checkbox, semtic-radio ) > input[wc-control]:is([type="checkbox"], [type="radio"]) { appearance: none; -webkit-appearance: none; inline-size: var(--skirbi-choice-size, 0.95rem); block-size: var(--skirbi-choice-size, 0.95rem); min-inline-size: var(--skirbi-choice-size, 0.95rem); min-block-size: var(--skirbi-choice-size, 0.95rem); margin: 0; padding: 0; border: 1px solid var(--skirbi-choice-border, var(--skirbi-surface-border-final)); background: var(--skirbi-choice-bg, var(--skirbi-surface-bg-final)); color: var(--skirbi-choice-accent, var(--skirbi-primary-main)); display: inline-grid; place-content: center; flex: 0 0 auto; cursor: pointer; transition: border-color var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease), background var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease), box-shadow var(--skirbi-transition-duration, 180ms) var(--skirbi-transition-ease, ease); } :is( semtic-input[type="checkbox"], semtic-checkbox ) > input[wc-control][type="checkbox"] { border-radius: 0.2rem; } :is( semtic-input[type="checkbox"], semtic-checkbox ) > input[wc-control][type="checkbox"]::before { content: ""; inline-size: 0.28rem; block-size: 0.52rem; border: solid currentColor; border-width: 0 0.11rem 0.11rem 0; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform var(--skirbi-transform-duration, 140ms) var(--skirbi-transition-ease, ease); } :is( semtic-input[type="radio"], semtic-radio ) > input[wc-control][type="radio"] { border-radius: 50%; } :is( semtic-input[type="radio"], semtic-radio ) > input[wc-control][type="radio"]::before { content: ""; inline-size: 0.42rem; block-size: 0.42rem; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform var(--skirbi-transform-duration, 140ms) var(--skirbi-transition-ease, ease); } :is( semtic-input[type="checkbox"], semtic-input[type="radio"], semtic-checkbox, semtic-radio ) > input[wc-control]:is([type="checkbox"], [type="radio"]):checked { border-color: currentColor; background: color-mix( in srgb, currentColor 7%, var(--skirbi-surface-bg-final) ); } :is( semtic-input[type="checkbox"], semtic-checkbox ) > input[wc-control][type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); } :is( semtic-input[type="radio"], semtic-radio ) > input[wc-control][type="radio"]:checked::before { transform: scale(1); } :is( semtic-input[type="checkbox"], semtic-input[type="radio"], semtic-checkbox, semtic-radio ) > input[wc-control]:is([type="checkbox"], [type="radio"]):hover { border-color: currentColor; } :is( semtic-input[type="checkbox"], semtic-input[type="radio"], semtic-checkbox, semtic-radio ) > input[wc-control]:is([type="checkbox"], [type="radio"]):focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix( in srgb, currentColor 20%, transparent ); } :is( semtic-input[type="checkbox"], semtic-input[type="radio"], semtic-checkbox, semtic-radio ) > input[wc-control]:is([type="checkbox"], [type="radio"]):disabled { opacity: 0.55; cursor: not-allowed; } [semtic-error]:not(:empty) { color: var(--skirbi-error-base, #b91c1c); font-size: 0.875rem; margin-block-start: 0.25rem; } semtic-input:has([semtic-error]:not(:empty)) input[wc-control], semtic-select:has([semtic-error]:not(:empty)) select[wc-control], semtic-textarea:has([semtic-error]:not(:empty)) textarea[wc-control], semtic-checkbox:has([semtic-error]:not(:empty)) input[wc-control], semtic-radio:has([semtic-error]:not(:empty)) input[wc-control] { border-color: var(--skirbi-error-base, #b91c1c); box-shadow: 0 0 0 3px color-mix( in srgb, var(--skirbi-error-base, #b91c1c) 20%, transparent ); }}[skirbi-theme]{semtic-input[label-error-position=inline][label-position=top], semtic-select[label-error-position=inline][label-position=top], semtic-textarea[label-error-position=inline][label-position=top]{display:grid;grid-template-areas:"label error" "input input";grid-template-columns:auto 1fr;align-items:baseline}semtic-input[label-error-position=inline] [semtic-label], semtic-select[label-error-position=inline] [semtic-label], semtic-textarea[label-error-position=inline] [semtic-label]{grid-area:label}semtic-input[label-error-position=inline] input[wc-control], semtic-select[label-error-position=inline] select[wc-control], semtic-textarea[label-error-position=inline] textarea[wc-control]{grid-area:input}semtic-input[label-error-position=inline] [semtic-error], semtic-select[label-error-position=inline] [semtic-error], semtic-textarea[label-error-position=inline] [semtic-error]{grid-area:error;text-align:right;align-self:baseline}semtic-input[label-error-position=bottom] [semtic-error], semtic-select[label-error-position=bottom] [semtic-error], semtic-textarea[label-error-position=bottom] [semtic-error]{order:99;width:100%}semtic-input[label-error-position=top], semtic-select[label-error-position=top], semtic-textarea[label-error-position=top]{display:grid;grid-template-areas:"error" "label" "input"}semtic-input[label-error-position=top] [semtic-label], semtic-select[label-error-position=top] [semtic-label], semtic-textarea[label-error-position=top] [semtic-label]{grid-area:label}semtic-input[label-error-position=top] input[wc-control], semtic-select[label-error-position=top] select[wc-control], semtic-textarea[label-error-position=top] textarea[wc-control]{grid-area:input}semtic-input[label-error-position=top] [semtic-error], semtic-select[label-error-position=top] [semtic-error], semtic-textarea[label-error-position=top] [semtic-error]{grid-area:error}semtic-input[label-error-position=left], semtic-select[label-error-position=left], semtic-textarea[label-error-position=left]{display:grid;grid-template-areas:"label input" "error input";grid-template-columns:auto 1fr}semtic-input[label-error-position=left] [semtic-label], semtic-select[label-error-position=left] [semtic-label], semtic-textarea[label-error-position=left] [semtic-label]{grid-area:label}semtic-input[label-error-position=left] input[wc-control], semtic-select[label-error-position=left] select[wc-control], semtic-textarea[label-error-position=left] textarea[wc-control]{grid-area:input}semtic-input[label-error-position=left] [semtic-error], semtic-select[label-error-position=left] [semtic-error], semtic-textarea[label-error-position=left] [semtic-error]{grid-area:error}semtic-input[label-error-position=right], semtic-select[label-error-position=right], semtic-textarea[label-error-position=right]{display:grid;grid-template-areas:"label input" "input error";grid-template-columns:1fr auto}semtic-input[label-error-position=right] [semtic-label], semtic-select[label-error-position=right] [semtic-label], semtic-textarea[label-error-position=right] [semtic-label]{grid-area:label}semtic-input[label-error-position=right] input[wc-control], semtic-select[label-error-position=right] select[wc-control], semtic-textarea[label-error-position=right] textarea[wc-control]{grid-area:input}semtic-input[label-error-position=right] [semtic-error], semtic-select[label-error-position=right] [semtic-error], semtic-textarea[label-error-position=right] [semtic-error]{grid-area:error}}[skirbi-theme]{a[lead], a[support], a[extra], a[antagonist], a[herald]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1.25rem;border-radius:var(--skirbi-button-radius,999px);border:1px solid transparent;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;overflow:hidden;transition:background var(--skirbi-transition-duration,180ms)var(--skirbi-transition-ease,ease),border-color var(--skirbi-transition-duration,180ms)var(--skirbi-transition-ease,ease),opacity var(--skirbi-transition-duration,180ms)var(--skirbi-transition-ease,ease)}button, input[type=button], input[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1.25rem;border-radius:var(--skirbi-button-radius,999px);border:1px solid transparent;font-family:var(--skirbi-button-font-family,inherit);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;user-select:none;overflow:hidden;transition:background var(--skirbi-transition-duration,180ms)var(--skirbi-transition-ease,ease),border-color var(--skirbi-transition-duration,180ms)var(--skirbi-transition-ease,ease),opacity var(--skirbi-transition-duration,180ms)var(--skirbi-transition-ease,ease),transform var(--skirbi-transform-duration,140ms)var(--skirbi-transition-ease,ease)}button span, input[type=button] span, input[type=submit] span{font-family:inherit;font-weight:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit}button:active, input[type=button]:active, input[type=submit]:active{transform:translateY(1px)}button:disabled, input[type=button]:disabled, input[type=submit]:disabled{opacity:.55;cursor:not-allowed;pointer-events:none} [lead] { background: var(--skirbi-button-lead-bg, var(--skirbi-primary-main)); color: var(--skirbi-button-lead-color, var(--skirbi-primary-contrast)); border-color: transparent; &:hover { background: var(--skirbi-button-lead-hover-bg, var(--skirbi-secondary-main)); color: var(--skirbi-button-lead-hover-color, var(--skirbi-secondary-contrast)); } } [support] { background: var(--skirbi-button-support-bg, transparent); color: var(--skirbi-button-support-color, var(--skirbi-primary-main)); border-color: var(--skirbi-button-support-border, var(--skirbi-primary-main)); &:hover { background: var(--skirbi-button-support-hover-bg, color-mix(in srgb, var(--skirbi-primary-main) 8%, transparent)); color: var(--skirbi-button-support-hover-color, var(--skirbi-primary-main)); } } [extra] { background: var(--skirbi-button-extra-bg, transparent); color: var(--skirbi-button-extra-color, var(--skirbi-primary-main)); border-color: var(--skirbi-button-extra-border, var(--skirbi-surface-border-final)); &:hover { background: var(--skirbi-button-extra-hover-bg, color-mix(in srgb, var(--skirbi-primary-main) 5%, transparent)); color: var(--skirbi-button-extra-hover-color, var(--skirbi-primary-main)); border-color: var(--skirbi-button-extra-hover-border, var(--skirbi-primary-main)); } } [antagonist] { background: var(--skirbi-button-antagonist-bg, transparent); color: var(--skirbi-button-antagonist-color, var(--skirbi-error-base, #b91c1c)); border-color: var(--skirbi-button-antagonist-border, var(--skirbi-error-base, #b91c1c)); &:hover { background: var(--skirbi-button-antagonist-hover-bg, color-mix(in srgb, var(--skirbi-error-base, #b91c1c) 8%, transparent)); color: var(--skirbi-button-antagonist-hover-color, var(--skirbi-error-base, #b91c1c)); } } [antagonist][lead] { background: var(--skirbi-button-antagonist-strong-bg, var(--skirbi-error-base, #b91c1c)); color: var(--skirbi-on-dark, white); border-color: transparent; &:hover { opacity: 0.9; background: var(--skirbi-button-antagonist-strong-bg, var(--skirbi-error-base, #b91c1c)); } } [herald] { background: var(--skirbi-button-herald-bg, transparent); color: var(--skirbi-button-herald-color, var(--skirbi-warn-base, #d97706)); border-color: var(--skirbi-button-herald-border, var(--skirbi-warn-base, #d97706)); &:hover { background: var(--skirbi-button-herald-hover-bg, color-mix(in srgb, var(--skirbi-warn-base, #d97706) 8%, transparent)); color: var(--skirbi-button-herald-hover-color, var(--skirbi-warn-base, #d97706)); } } [herald][lead] { background: var(--skirbi-button-herald-strong-bg, var(--skirbi-warn-base, #d97706)); color: var(--skirbi-on-dark, white); border-color: transparent; &:hover { opacity: 0.9; background: var(--skirbi-button-herald-strong-bg, var(--skirbi-warn-base, #d97706)); } }}[skirbi-theme]{semtic-divider{display:block;width:100%;height:12rem;background-image:var(--skirbi-divider-image);background-size:cover;background-position:50%;@media(max-width:48rem){height: 6rem;}}}[skirbi-theme]{ [dibuho-filters] { gap: 0.75rem; flex-wrap: wrap; }}[skirbi-theme]{semtic-linked-list{display:block;> section{background:var(--skirbi-surface-bg-final);padding:1.5rem;border-radius:.5rem}nav{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;> a{display:block;padding:1rem;border:1px solid var(--skirbi-surface-border-final);border-radius:.375rem;text-decoration:none;transition:all 200ms ease;&:hover{border-color:var(--skirbi-primary-main);background:color-mix( in srgb,var(--skirbi-primary-main) 5%,transparent )}&[aria-current=page]{border-color:var(--skirbi-primary-main);background:color-mix( in srgb,var(--skirbi-primary-main) 10%,transparent )}}}&[data-variant=series] nav > a{padding:.75rem}&[data-variant=related] nav h3{margin:0 0 .5rem;font-size:1.125rem}&[data-variant=related] nav p{margin:0 0 .5rem;color:var(--skirbi-text-muted-final)}&[data-variant=related] nav time{font-size:.875rem;color:var(--skirbi-text-muted-final)}}}[skirbi-theme]{semtic-toast{position:fixed;inset-block-start:var(--skirbi-toast-inset-block-start,1rem);inset-inline:var(--skirbi-toast-inset-inline,1rem);z-index:var(--skirbi-toast-z,50);display:grid;justify-items:center;gap:var(--skirbi-toast-gap,.75rem);pointer-events:none} [semtic-toast-item] { pointer-events: auto; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0.75rem; width: min(var(--skirbi-toast-width, 32rem), 100%); padding: 1rem 1.5rem; border: 1px solid var(--skirbi-surface-border-final); border-radius: var(--skirbi-toast-radius, 0.75rem); background: var(--skirbi-surface-bg-final); color: inherit; box-shadow: var(--skirbi-toast-shadow, 0 1rem 2rem rgb(0 0 0 / 0.2)); p { margin: 0; } &[data-intent="log"] { &[data-type="debug"] { border-color: var(--skirbi-text-muted-final); } &[data-type="info"] { border-color: var(--skirbi-info-base); } &[data-type="warn"] { border-color: var(--skirbi-warn-base); } &[data-type="error"] { border-color: var(--skirbi-error-base); } } &[data-intent="app"] { border-color: var(--skirbi-primary-main); } } [semtic-toast-dismiss] { border: 0; background: transparent; color: inherit; padding: 0; line-height: 1; cursor: pointer; }}[skirbi-theme]{semtic-modal, semtic-back-button-modal{display:contents;dialog[semtic-modal-dialog]{max-inline-size:min( var(--skirbi-modal-max-width,40rem),calc(100vw - 2rem) );inline-size:var(--skirbi-modal-width,auto);padding:0;border:0;border-radius:var(--skirbi-modal-radius,1rem);background:0 0;color:inherit;&::backdrop{background:var(--skirbi-modal-backdrop,rgb(0 0 0/.4))}} [semtic-modal-panel] { display: grid; gap: var(--skirbi-modal-gap, 1rem); padding: var(--skirbi-modal-padding, 1.25rem); border: 1px solid var(--skirbi-surface-border-final); border-radius: var(--skirbi-modal-radius, 1rem); background: var(--skirbi-surface-bg-final); color: inherit; box-shadow: var(--skirbi-modal-shadow, 0 1.25rem 3rem rgb(0 0 0 / 0.24)); } [semtic-modal-header] { display: flex; align-items: start; justify-content: space-between; gap: 1rem; > :where(h1, h2, h3, h4) { margin: 0; font-size: var(--skirbi-modal-title-size, 1.125rem); } } [semtic-modal-body] { > :first-child { margin-block-start: 0; } > :last-child { margin-block-end: 0; } } [semtic-modal-actions] { display: flex; justify-content: end; gap: 0.5rem; margin-block-start: 0.5rem; } [semtic-modal-close] { border: 0; background: transparent; color: inherit; padding: 0.25rem 0.5rem; cursor: pointer; }}}[skirbi-theme]{semtic-choice-card, semtic-choice-card *{cursor:pointer} [semtic-choice-card-panel] { background: var(--skirbi-surface-bg); border: 2px solid var(--skirbi-secondary-main); box-shadow: var(--skirbi-shadow-md); } [semtic-choice-card-panel]:not([selected]) { background: var(--skirbi-secondary-wash); } [semtic-choice-card-panel][selected] { background: var(--skirbi-surface-bg); } [semtic-choice-card-panel] header { color: var(--skirbi-primary-main); } [semtic-choice-card-panel][selected] header { font-weight: 700; } [semtic-choice-card-panel] { overflow: hidden; color: var(--skirbi-primary-dark); } [semtic-choice-card-control] { position: absolute; left: -9999px; } [semtic-choice-card-panel] { border: 2px solid var(--skirbi-secondary-main); transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; } semtic-choice-card:hover [semtic-choice-card-panel] { border-color: var(--skirbi-primary-main); } semtic-choice-card[selected] [semtic-choice-card-panel] { border-color: var(--skirbi-primary-main); box-shadow: 0 0 0 2px color-mix( in srgb, var(--skirbi-primary-main) 25%, transparent ); } label[semtic-choice-card] { cursor: pointer; user-select: none; } [semtic-choice-card-panel] { display: flex; flex-direction: column; height: 100%; }}[skirbi-theme]{input, select, textarea{background:#fff;border:1px solid var(--skirbi-primary-main);border-radius:.5rem;color:var(--skirbi-primary-dark);box-sizing:border-box}input:focus, select:focus, textarea:focus{outline:none;border-color:var(--skirbi-primary-main);box-shadow:0 0 0 3px color-mix(in srgb,var(--skirbi-primary-main) 25%,transparent)}semtic-input[label-position=top]{display:grid;grid-template-areas:"label error" "input input";grid-template-columns:auto 1fr}semtic-input[label-position=top] [semtic-label]{grid-area:label}semtic-input[label-position=top] input[wc-control]{grid-area:input}semtic-input[label-position=top] [semtic-error]{grid-area:error;text-align:right}}[skirbi-theme]{semtic-steps{--step-dot:2rem;--step-line:0.4rem;--step-overlap:5px;--step-active:var(--skirbi-tertiary-main);--step-on:var(--skirbi-quaternary-main);--step-muted:var(--skirbi-secondary-soft, var(--skirbi-secondary-light));--step-text:var(--skirbi-secondary-strong, var(--skirbi-secondary-dark));--step-text-muted:color-mix(
        in srgb,
        var(--skirbi-page-fg) 65%,
        transparent
      );display:block;margin-block-end:2.5rem;nav{inline-size:100%}ol[semtic-steps]{display:flex;inline-size:100%;margin:0;padding:0;list-style:none;counter-reset:semtic-step}li[semtic-step]{position:relative;flex:1;min-inline-size:0;padding-block-start:calc(var(--step-dot) + .9rem);text-align:center;color:var(--step-text-muted);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;&::before{content:"";position:absolute;z-index:0;inset-block-start:calc(var(--step-dot)/2 - var(--step-line)/2);inset-inline-start:calc(-50% + (var(--step-dot)/2) - var(--step-overlap));inline-size:calc(100% - var(--step-dot) + (var(--step-overlap) * 2));block-size:var(--step-line);border-radius:999px;background:var(--step-muted)}&:first-child::before{content:none}&::after{content:attr(data-index);position:absolute;z-index:1;inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%);inline-size:var(--step-dot);block-size:var(--step-dot);display:grid;place-items:center;border-radius:999px;background:var(--step-muted);color:var(--step-text);font-weight:800}&[semtic-state=completed], &[semtic-state=active]{color:var(--step-active);font-weight:800}&[semtic-state=completed]:not(:first-child)::before, &[semtic-state=active]:not(:first-child)::before{background:var(--step-active)}@media(max-width:48rem){[skirbi-theme] semtic-steps li[semtic-step]{display:flex;flex-direction:column;font-size:clamp(.7rem,2vw,1rem);text-overflow:ellipsis;align-items:center;padding-block-start:calc(var(--step-dot) + .9rem)}[skirbi-theme] semtic-steps li[semtic-step]:nth-child(even){flex-direction:column-reverse;padding-block-start:0}}}}}[skirbi-theme]{semtic-article-card{display:grid;min-inline-size:0;margin-block:1rem;> [semtic-article-card-link]{display:grid;gap:.75rem;align-content:start;block-size:100%;box-sizing:border-box;padding:1.5rem;background:color-mix( in srgb,var(--skirbi-primary-main) 8%,white );border:2px solid var(--skirbi-primary-main);border-radius:.75rem;box-shadow:0 4px 16px rgb(0 0 0/.12);color:var(--skirbi-primary-dark);text-decoration:none} [semtic-article-card-header], [semtic-article-card-content] { display: grid; gap: 0.75rem; } [semtic-article-card-eyebrow] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } [semtic-article-card-title] { margin: 0; } [semtic-article-card-author], [semtic-article-card-date] { font-size: 0.875em; } [semtic-article-card-image] { inline-size: 100%; max-block-size: 24rem; object-fit: cover; border-radius: 0.5rem; } &[hero] { > [semtic-article-card-link] { padding: 0; overflow: hidden; } [semtic-article-card-content] { display: contents; } [semtic-article-card-header], [semtic-article-card-content] > :not([semtic-article-card-image]) { margin-inline: 1.5rem; } [semtic-article-card-header] { margin-block-start: 1.5rem; } [semtic-article-card-content] > :last-child { margin-block-end: 1.5rem; } [semtic-article-card-image] { order: -1; border-radius: 0; } } h1 { font-size: clamp(1.5rem, 2vw, 2rem); } h2 { font-size: clamp(1.35rem, 1.8vw, 1.75rem); } h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); } h4 { font-size: clamp(1.1rem, 1.4vw, 1.3rem); } h5 { font-size: clamp(1rem, 1.2vw, 1.15rem); } h6 { font-size: clamp(0.9rem, 1vw, 1rem); } :is(h1, h2, h3, h4, h5, h6) { line-height: 1.15; overflow-wrap: anywhere; }}semtic-article-summary{display:block}}[skirbi-theme]{semtic-pill-box{display:inline-flex;align-items:center;padding:.35rem .65rem;border-radius:999px;background:var(--skirbi-primary-main);color:#fff}semtic-pill-box[url]{padding:0}semtic-pill-box[url] > [semtic-pill-box]{display:inline-flex;align-items:center;padding:.35rem .65rem;color:inherit;text-decoration:none}}[skirbi-theme]{semtic-grid[triptych]{position:relative;left:50%;display:grid;grid-template-areas:"start content end";grid-template-columns:minmax(10rem,var(--skirbi-triptych-aside))minmax(0,var(--skirbi-triptych-content))minmax(10rem,var(--skirbi-triptych-aside));gap:var(--skirbi-triptych-gap);align-items:start;inline-size:calc( 100vw - var(--skirbi-triptych-edge) - var(--skirbi-triptych-edge) );max-inline-size:calc( var(--skirbi-triptych-content) + var(--skirbi-triptych-aside) + var(--skirbi-triptych-aside) + var(--skirbi-triptych-gap) + var(--skirbi-triptych-gap) );transform:translateX(-50%);> :first-child{grid-area:content;inline-size:100%;min-inline-size:0}> :nth-child(2){grid-area:start;min-inline-size:0}> :nth-child(3){grid-area:end;min-inline-size:0}@media(max-width:768px){position: static; grid-template-areas: "content" "start" "end"; grid-template-columns: minmax(0,1fr); inline-size: 100%; max-inline-size: none; transform: none;}}}[skirbi-theme]{ :is(h1, h2, h3, h4, h5, h6):has(+ blockquote p) { margin-block-end: 0; } :is(h1, h2, h3, h4, h5, h6) + blockquote p { margin-block-start: 0; margin-block-end: 0; margin-inline-start: 1.5rem; padding: 0; line-height: 0.75; font-size: 0.8rem; font-style: italic; }}[skirbi-theme]{semtic-grid[layout]{display:grid;width:min(100%,72rem);margin-inline:auto;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(4,minmax(0,1fr))}semtic-grid[layout] > semtic-article-card{box-sizing:border-box;min-width:0;min-height:10rem;height:auto;aspect-ratio:auto}semtic-grid[layout] [semtic-article-card-link]{box-sizing:border-box;height:100%;padding:clamp(1rem,2vw,1.75rem)}@media(max-width:60rem){semtic-grid[layout]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:36rem){semtic-grid[layout]{grid-template-columns:1fr}semtic-grid[layout]>semtic-article-card{grid-column:1/-1}}}}@layer skirbi-components{[skirbi-theme] [dibuho-container-panel]{display:block}[skirbi-theme] [dibuho-container-panel-stack]{gap:1.5rem}[skirbi-theme] [dibuho-container-panel-body]{text-align:left}[skirbi-theme] [dibuho-info-grid]{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}[skirbi-theme] [dibuho-choice-grid]{grid-template-columns:1fr;gap:1rem}[skirbi-theme] [dibuho-filters]{flex-wrap:wrap}[skirbi-theme]{ [dibuho-choice-grid] { @media (min-width: 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } semtic-choice-card { display: flex; flex-direction: column; } label[semtic-choice-card] { display: flex; flex-direction: column; flex: 1; } [semtic-choice-card-panel] { display: flex; flex-direction: column; flex: 1; } }}[skirbi-theme] [dibuho-sticky-actions]{position:sticky;bottom:2rem;display:flex;justify-content:flex-end;margin-block-start:2rem}[skirbi-theme] [dibuho-error-badge]{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--skirbi-error-base,#b91c1c) 12%,transparent);color:var(--skirbi-error-base,#b91c1c);font-size:.8rem;font-weight:700}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]){display:block;width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill])>label[semtic-toggle]{width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]) [semtic-toggle-visual]{width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]){display:block;width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill])>label[semtic-toggle]{width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]) [semtic-toggle-visual]{width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill])[label-position=right] [semtic-toggle-visual]{grid-template-columns:auto minmax(0,1fr)}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]){display:block;width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill])>label[semtic-toggle]{width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]) [semtic-toggle-visual]{width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]):not([label-position]) [semtic-toggle-visual],[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill])[label-position=left] [semtic-toggle-visual]{grid-template-columns:minmax(0,1fr)auto}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill])[label-position=right] [semtic-toggle-visual]{grid-template-columns:auto minmax(0,1fr)}[skirbi-theme] [dibuho-filter-grid] semtic-toggle[type=pill]{display:inline-block;width:fit-content}[skirbi-theme] [dibuho-filter-grid] semtic-toggle[type=pill]>label[semtic-toggle],[skirbi-theme] [dibuho-filter-grid] semtic-toggle[type=pill] [semtic-toggle-visual]{width:fit-content}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]){display:block;width:100%}[skirbi-theme] [dibuho-filter-grid] semtic-toggle:not([type=pill]) [semtic-toggle-visual]{width:100%;grid-template-columns:minmax(0,1fr)auto}[skirbi-theme] [dibuho-filter-grid] semtic-toggle[type=pill],[skirbi-theme] [dibuho-filter-grid] semtic-toggle[type=pill]>label[semtic-toggle],[skirbi-theme] [dibuho-filter-grid] semtic-toggle[type=pill] [semtic-toggle-visual]{width:fit-content}@media(max-width:48rem){[skirbi-theme]{ [dibuho-sticky-actions] { position: fixed; bottom: 3.5rem; left: 0; right: 0; z-index: 10; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 300ms ease; &.is-visible { opacity: 1; pointer-events: auto; } }}}}@layer tatuahe{html{hyphens:auto;text-align:justify}}@layer skirbi-app{[skirbi-theme]{--skirbi-breadcrumb-max-inline-size:85rem;--skirbi-breadcrumb-edge:clamp(1rem, 4vw, 2rem); [inner-main] { inline-size: 100%; max-inline-size: 72rem; margin-inline: auto; padding: 2rem; } [breadcrumb] > nav { inline-size: 100%; max-inline-size: var(--skirbi-breadcrumb-max-inline-size); margin-inline: auto; padding-inline: var(--skirbi-breadcrumb-edge); box-sizing: border-box; @media (max-width: 768px) { max-inline-size: none; } } semtic-panel { border: none; border-radius: 0; background: inherit; } .tatuahe-panel { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; margin-top: 1rem; padding: 2rem; background: color-mix( in srgb, var(--skirbi-primary-main) 8%, white ); border: 1px solid color-mix( in srgb, var(--skirbi-primary-main) 30%, white ); border-radius: 0.75rem; box-shadow: 0 4px 16px rgb(0 0 0 / 0.12); color: var(--skirbi-primary-dark); > semtic-grid { grid-template-columns: repeat( auto-fit, minmax(min(100%, 20rem), 1fr) ); align-items: stretch; } }}}