/* KivTools CSS Studio: control rack, live stage and compact export drawer. */
.kiv-css-studio {
    --cs-accent: var(--kt-accent, #178b58);
    --cs-accent-deep: #246746;
    --cs-accent-soft: #e8f4ed;
    --cs-ink: var(--kt-ink, #263b34);
    --cs-muted: var(--kt-muted, #718078);
    --cs-line: var(--kt-line, #d9e4de);
    --cs-surface: var(--kt-surface, #fff);
    --cs-soft: var(--kt-surface-soft, #f4f8f5);
    --cs-canvas: var(--kt-canvas, #eef4f0);
    --cs-code: #14221c;
}

.kiv-css-studio .cs-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(118px, .72fr);
    margin: 18px 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--cs-line);
    background: rgba(255, 255, 255, .32);
}

.kiv-css-studio .cs-tabs::before,
.kiv-css-studio .cs-tabs::after { display: none; content: none; }

.kiv-css-studio .cs-tabs > li { float: none; min-width: 0; margin: 0; }
.kiv-css-studio .cs-tabs > li > a {
    display: flex;
    min-height: 48px;
    margin: 0;
    padding: 10px 11px 9px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: #4c6559;
    font-size: 12px;
    font-weight: 720;
    line-height: 1.25;
    text-align: center;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.kiv-css-studio .cs-tabs > li > a:hover,
.kiv-css-studio .cs-tabs > li > a:focus {
    border: 0;
    background: rgba(23, 139, 88, .07);
    color: var(--cs-accent-deep);
    outline: 0;
}

.kiv-css-studio .cs-tabs > li.active > a,
.kiv-css-studio .cs-tabs > li.active > a:hover,
.kiv-css-studio .cs-tabs > li.active > a:focus {
    border: 0;
    background: var(--cs-surface);
    color: var(--cs-accent-deep);
    box-shadow: inset 0 3px 0 var(--cs-accent);
}

.kiv-css-studio .cs-tabs .dropdown-menu { min-width: 260px; max-height: min(70vh, 560px); padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.kiv-css-studio .cs-tabs .dropdown-menu > li > a { padding: 8px 11px; border-radius: 3px; font-size: 12px; }
.kiv-css-studio .cs-tabs .dropdown-menu > .dropdown-header { padding: 8px 11px 4px; color: #819087; font: 800 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.kiv-css-studio .cs-tabs .dropdown-menu > .divider { margin: 5px 0; }

.kiv-css-studio .cs-rail {
    display: flex;
    min-height: 42px;
    margin: 0 0 13px;
    padding: 9px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-left: 3px solid var(--cs-accent);
    background: rgba(255, 255, 255, .5);
    color: var(--cs-ink);
    font-size: 12px;
}
.kiv-css-studio .cs-rail strong { font-weight: 780; }
.kiv-css-studio .cs-rail small { color: var(--cs-muted); text-align: right; }

.kiv-css-studio .cs-status { min-height: 0; margin: 0 0 12px; color: var(--cs-muted); font-size: 12px; font-weight: 680; }
.kiv-css-studio .cs-status:not(:empty) { min-height: 38px; padding: 10px 12px; border-left: 3px solid var(--cs-accent); background: #eaf5ee; color: #315f49; }
.kiv-css-studio .cs-status.is-error:not(:empty) { border-left-color: #a94f4f; background: #faeeee; color: #853f3f; }

.kiv-css-studio .cs-shell {
    display: grid;
    grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
    grid-template-areas: "console stage" "console export";
    gap: 14px;
    align-items: start;
}

.kiv-css-studio .cs-console,
.kiv-css-studio .cs-stage-shell,
.kiv-css-studio .cs-export {
    min-width: 0;
    overflow: hidden;
    border-radius: 6px;
    background: var(--cs-surface);
    box-shadow: 0 11px 30px rgba(31, 55, 43, .065);
}
.kiv-css-studio .cs-console { grid-area: console; }
.kiv-css-studio .cs-stage-shell { grid-area: stage; }
.kiv-css-studio .cs-export { grid-area: export; }

.kiv-css-studio .cs-console > header,
.kiv-css-studio .cs-stage-shell > header,
.kiv-css-studio .cs-export > header {
    display: flex;
    min-height: 45px;
    padding: 10px 13px;
    align-items: center;
    gap: 10px;
    background: var(--cs-soft);
}
.kiv-css-studio .cs-console > header > span,
.kiv-css-studio .cs-stage-shell > header > span,
.kiv-css-studio .cs-export > header > span {
    color: var(--cs-accent);
    font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
}
.kiv-css-studio .cs-console > header strong,
.kiv-css-studio .cs-stage-shell > header strong,
.kiv-css-studio .cs-export > header strong { color: var(--cs-ink); font-size: 12px; font-weight: 780; }
.kiv-css-studio .cs-stage-shell > header small { margin-left: auto; color: var(--cs-muted); font: 650 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }

.kiv-css-studio .cs-console-body { padding: 14px; }
.kiv-css-studio .cs-field { display: grid; gap: 5px; margin-bottom: 12px; }
.kiv-css-studio .cs-field-row,
.kiv-css-studio .cs-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kiv-css-studio .cs-field label,
.kiv-css-studio .cs-check { color: #53675e; font-size: 10px; font-weight: 740; letter-spacing: .015em; }
.kiv-css-studio .cs-check { display: flex; margin: 2px 0 12px; align-items: center; gap: 8px; cursor: pointer; }
.kiv-css-studio .cs-check input { margin: 0; accent-color: var(--cs-accent); }
.kiv-css-studio input[type="color"] { width: 100%; height: 38px; padding: 4px; border: 1px solid var(--cs-line); border-radius: 4px; background: #fbfdfc; }

.kiv-css-studio .cs-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.kiv-css-studio .cs-button,
.kiv-css-studio .cs-replay {
    min-height: 36px;
    padding: 8px 13px;
    border: 0;
    border-radius: 4px;
    background: var(--cs-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 760;
    line-height: 1.2;
    transition: transform .12s ease, background .15s ease;
}
.kiv-css-studio .cs-button:hover,
.kiv-css-studio .cs-button:focus,
.kiv-css-studio .cs-replay:hover,
.kiv-css-studio .cs-replay:focus { background: #11794b; color: #fff; outline: 0; transform: translateY(-1px); }
.kiv-css-studio .cs-button.cs-secondary { background: #e8efeb; color: #40574c; }
.kiv-css-studio .cs-button.cs-secondary:hover,
.kiv-css-studio .cs-button.cs-secondary:focus { background: #dbe9e1; color: #285a42; }

.kiv-css-studio .cs-stage {
    position: relative;
    display: grid;
    min-height: 360px;
    padding: 24px;
    place-items: center;
    overflow: hidden;
    background-color: var(--cs-canvas);
    background-image: radial-gradient(circle at 1px 1px, rgba(74, 105, 89, .17) 1px, transparent 0);
    background-size: 18px 18px;
}

.kiv-css-studio .cs-export { padding-bottom: 13px; }
.kiv-css-studio .cs-export .cs-code { margin: 13px 13px 0; width: calc(100% - 26px); }
.kiv-css-studio .cs-export .cs-actions { margin: 9px 13px 0; }
.kiv-css-studio .cs-code {
    display: block;
    min-height: 118px;
    padding: 13px;
    overflow: auto;
    border: 0;
    border-left: 3px solid var(--cs-accent);
    border-radius: 0 4px 4px 0;
    background: var(--cs-code);
    color: #d8eee2;
    font: 11px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}
.kiv-css-studio .cs-code-tall { max-height: 280px; }

/* Flexbox stage */
.kiv-css-studio .cs-flex-stage { display: block; padding: 32px; }
.kiv-css-studio .cs-flex-preview {
    display: flex;
    width: 100%;
    min-height: 296px;
    padding: 18px;
    overflow: auto;
    border: 1px dashed rgba(39, 107, 76, .38);
    border-radius: 5px;
    background: rgba(255, 255, 255, .72);
}
.kiv-css-studio .cs-flex-item {
    display: grid;
    min-width: 72px;
    min-height: 58px;
    padding: 12px;
    place-items: center;
    border-radius: 4px;
    background: #daf0e3;
    color: #255d42;
    font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.kiv-css-studio .cs-flex-item:nth-child(3n+2) { background: #dce9f7; color: #315d86; }
.kiv-css-studio .cs-flex-item:nth-child(3n) { background: #eee6f8; color: #6c478c; }

/* Box shadow stage */
.kiv-css-studio .cs-shadow-stage { background-color: #eaf1ed; background-image: linear-gradient(135deg, rgba(255,255,255,.76), rgba(222,236,228,.68)); }
.kiv-css-studio .cs-shadow-object {
    display: grid;
    width: min(260px, 66%);
    aspect-ratio: 1.45;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: #315f49;
}
.kiv-css-studio .cs-shadow-object span { font-size: 20px; font-weight: 790; letter-spacing: -.02em; }

/* Transform stage */
.kiv-css-studio .cs-transform-stage { perspective: 900px; }
.kiv-css-studio .cs-axis { position: absolute; background: rgba(52, 104, 76, .2); pointer-events: none; }
.kiv-css-studio .cs-axis-x { left: 9%; right: 9%; top: 50%; height: 1px; }
.kiv-css-studio .cs-axis-y { top: 9%; bottom: 9%; left: 50%; width: 1px; }
.kiv-css-studio .cs-transform-object {
    position: relative;
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    border-radius: 18px 5px 18px 5px;
    background: linear-gradient(145deg, #168b58, #315d9b);
    box-shadow: 0 18px 34px rgba(33, 68, 51, .2);
    color: #fff;
    transform-origin: 50% 50%;
    transition: transform .18s ease, transform-origin .18s ease;
}
.kiv-css-studio .cs-transform-object span { font: 850 28px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kiv-css-studio .cs-transform-object i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; background: #ed7c58; box-shadow: 0 0 0 2px rgba(20,34,28,.22); pointer-events: none; }

/* Filter stage */
.kiv-css-studio .cs-filter-stage { padding: 20px; }
.kiv-css-studio .cs-filter-scene {
    position: relative;
    width: min(560px, 100%);
    min-height: 310px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #1ca66b 0%, #3b69de 47%, #9c4fd1 100%);
}
.kiv-css-studio .cs-filter-scene > i { position: absolute; border-radius: 50%; background: rgba(255,255,255,.34); }
.kiv-css-studio .cs-filter-scene > i:first-child { width: 170px; height: 170px; top: -34px; right: 28px; }
.kiv-css-studio .cs-filter-scene > i:nth-child(2) { width: 210px; height: 210px; bottom: -90px; left: 28px; background: rgba(255,192,93,.45); }
.kiv-css-studio .cs-filter-target {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    width: min(320px, 72%);
    min-height: 168px;
    padding: 28px;
    align-content: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 10px;
    background: rgba(255,255,255,.28);
    box-shadow: 0 22px 44px rgba(23, 37, 72, .2);
    color: #fff;
    text-align: center;
}
.kiv-css-studio .cs-filter-target strong { font-size: 28px; letter-spacing: -.03em; }
.kiv-css-studio .cs-filter-target span { margin-top: 5px; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }

/* Keyframe stage */
.kiv-css-studio .cs-key-stage { display: block; padding: 32px 28px 22px; }
.kiv-css-studio .cs-key-track { position: relative; height: 230px; border-bottom: 1px solid rgba(45,87,65,.25); }
.kiv-css-studio .cs-key-object {
    position: absolute;
    left: calc(50% - 38px);
    top: calc(50% - 38px);
    display: grid;
    width: 76px;
    height: 76px;
    place-items: center;
    border-radius: 50% 50% 14% 50%;
    background: linear-gradient(145deg, #178b58, #2f659d);
    box-shadow: 0 16px 30px rgba(36,76,55,.22);
    color: #fff;
}
.kiv-css-studio .cs-key-object span { font: 850 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kiv-css-studio .cs-key-timeline { position: relative; height: 32px; margin: 15px 4px 4px; border-top: 2px solid rgba(39,107,76,.3); }
.kiv-css-studio .cs-key-marker { position: absolute; top: -6px; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--cs-surface); border-radius: 50%; background: var(--cs-accent); box-shadow: 0 0 0 1px rgba(39,107,76,.35); }
.kiv-css-studio .cs-key-marker span { position: absolute; top: 15px; left: 50%; color: var(--cs-muted); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; transform: translateX(-50%); white-space: nowrap; }
.kiv-css-studio .cs-replay { display: block; margin: 16px auto 0; }

/* Elliptical border-radius stage */
.kiv-css-studio .cs-corner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    margin-top: 2px;
}
.kiv-css-studio .cs-radius-stage { min-height: 390px; }
.kiv-css-studio .cs-radius-object {
    position: relative;
    display: grid;
    width: 280px;
    max-width: 84%;
    height: 220px;
    max-height: 310px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #178b58, #316bd8 62%, #8b55bf);
    box-shadow: 0 22px 44px rgba(35, 75, 56, .22);
    color: #fff;
    transition: border-radius .18s ease, width .18s ease, height .18s ease;
}
.kiv-css-studio .cs-radius-object::before,
.kiv-css-studio .cs-radius-object::after { content: ""; position: absolute; background: rgba(255, 255, 255, .25); pointer-events: none; }
.kiv-css-studio .cs-radius-object::before { inset: 50% 0 auto; height: 1px; }
.kiv-css-studio .cs-radius-object::after { inset: 0 auto 0 50%; width: 1px; }
.kiv-css-studio .cs-radius-object span { position: relative; z-index: 1; font: 850 42px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kiv-css-studio .cs-radius-object i { position: absolute; inset: 13px; border: 1px dashed rgba(255,255,255,.35); border-radius: inherit; }

/* Polygon clip-path stage */
.kiv-css-studio .cs-clip-stage { min-height: 390px; }
.kiv-css-studio .cs-clip-board { position: relative; width: min(430px, 82%); aspect-ratio: 1.25; }
.kiv-css-studio .cs-clip-object {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #18a66a, #3569d4 58%, #ac5e9d);
    color: #fff;
    box-shadow: 0 24px 44px rgba(31, 71, 52, .18);
}
.kiv-css-studio .cs-clip-object::before { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; }
.kiv-css-studio .cs-clip-object span { position: relative; z-index: 1; font-size: 27px; font-weight: 820; letter-spacing: -.03em; }
.kiv-css-studio .cs-clip-handles { position: absolute; inset: 0; }
.kiv-css-studio .cs-clip-handle {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    padding: 0;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ec7b59;
    box-shadow: 0 0 0 2px rgba(28, 60, 45, .3);
    color: transparent;
    cursor: grab;
    touch-action: none;
}
.kiv-css-studio .cs-clip-handle:hover,
.kiv-css-studio .cs-clip-handle:focus,
.kiv-css-studio .cs-clip-handle.is-active { background: #ffe092; outline: 0; transform: scale(1.18); }
.kiv-css-studio .cs-clip-handle:active { cursor: grabbing; }

/* Layered text-shadow stage */
.kiv-css-studio .cs-text-stage { min-height: 390px; background-color: #173c2c; background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 52%); }
.kiv-css-studio .cs-text-object {
    max-width: 92%;
    color: #f7fff9;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-align: center;
    overflow-wrap: anywhere;
    transition: color .15s ease, text-shadow .15s ease, font-size .15s ease;
}

/* Native scrollbar laboratory */
.kiv-css-studio .cs-scroll-stage { min-height: 390px; }
.kiv-css-studio .cs-scroll-preview {
    width: min(560px, 88%);
    height: 300px;
    overflow: auto;
    border-radius: 7px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 18px 38px rgba(31, 65, 49, .13);
    scrollbar-color: #2e8b62 #e7f0eb;
    scrollbar-width: auto;
}
.kiv-css-studio .cs-scroll-content { padding: 26px 34px 48px; color: #344c41; }
.kiv-css-studio .cs-scroll-content > span { display: inline-block; margin-top: 8px; color: var(--cs-accent); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.kiv-css-studio .cs-scroll-content h3 { margin: 8px 0 7px; color: #29463a; font-size: 18px; }
.kiv-css-studio .cs-scroll-content p { margin: 0 0 26px; color: #61746b; font-size: 13px; line-height: 1.65; }

/* CSS transition stage */
.kiv-css-studio .cs-transition-stage { min-height: 390px; }
.kiv-css-studio .cs-transition-object {
    display: grid;
    width: 180px;
    height: 180px;
    padding: 24px;
    place-content: center;
    border: 0;
    border-radius: 28px 8px 28px 8px;
    background: #178b58;
    box-shadow: 0 18px 36px rgba(28, 66, 47, .2);
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.kiv-css-studio .cs-transition-object span { font: 850 42px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kiv-css-studio .cs-transition-object small { margin-top: 11px; color: rgba(255,255,255,.82); font-size: 10px; font-weight: 730; letter-spacing: .04em; }
.kiv-css-studio .cs-transition-object:focus { outline: 3px solid rgba(23,139,88,.25); outline-offset: 5px; }

/* Modern CSS: selector specificity map */
.kiv-css-studio .cs-specificity-stage { display: block; min-height: 390px; padding: 20px; }
.kiv-css-studio .cs-specificity-results { display: grid; gap: 9px; width: 100%; }
.kiv-css-studio .cs-specificity-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 6px 12px; padding: 11px 12px; border-radius: 5px; background: rgba(255,255,255,.74); box-shadow: 0 7px 18px rgba(31,68,49,.06); }
.kiv-css-studio .cs-specificity-row > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.kiv-css-studio .cs-specificity-row code { overflow: hidden; color: #324c40; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.kiv-css-studio .cs-specificity-row strong { flex: 0 0 auto; color: var(--cs-accent-deep); font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kiv-css-studio .cs-specificity-row > span { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 99px; background: #dfe9e3; }
.kiv-css-studio .cs-specificity-row > span i { display: block; height: 100%; border-radius: inherit; background: #789d88; }
.kiv-css-studio .cs-specificity-row > small { position: absolute; opacity: 0; pointer-events: none; }
.kiv-css-studio .cs-specificity-row.is-strong { background: #eef8f2; box-shadow: inset 3px 0 0 var(--cs-accent), 0 8px 20px rgba(31,68,49,.08); }
.kiv-css-studio .cs-specificity-row.is-strong > span i { background: linear-gradient(90deg, #178b58, #49bd7e); }
.kiv-css-studio .cs-specificity-row.is-invalid { box-shadow: inset 3px 0 0 #c36a62; }
.kiv-css-studio .cs-empty { margin: 40px 0; color: var(--cs-muted); text-align: center; }

/* Modern CSS: real container query stage */
.kiv-css-studio .cs-container-stage { display: flex; min-height: 390px; padding: 28px 18px; align-items: center; justify-content: center; }
.kiv-css-studio .cs-container-preview { box-sizing: content-box; min-width: 0; max-width: calc(100% - 26px); padding: 13px; border-top: 3px solid #7d9588; border-radius: 5px; background: rgba(255,255,255,.75); box-shadow: 0 14px 32px rgba(31,68,49,.11); transition: border-color .14s ease; }
.kiv-css-studio .cs-container-preview::before { content: "container"; display: block; margin: 0 0 10px; color: #819087; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.kiv-css-studio .cs-container-preview.is-matched { border-top-color: var(--cs-accent); }
.kiv-css-studio .cs-container-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kiv-css-studio .cs-container-card { display: grid; min-width: 0; min-height: 70px; padding: 12px; align-content: center; gap: 6px; border-radius: 4px; background: #e7f2eb; color: #2e5d45; }
.kiv-css-studio .cs-container-card:nth-child(even) { background: #e4edf6; color: #355e83; }
.kiv-css-studio .cs-container-card span { font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .6; }
.kiv-css-studio .cs-container-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Modern CSS: feature query probe */
.kiv-css-studio .cs-support-stage { min-height: 390px; }
.kiv-css-studio .cs-support-result { display: grid; width: min(430px, 88%); min-height: 230px; padding: 30px; place-items: center; align-content: center; gap: 12px; border-radius: 8px; background: #eef5f1; color: #345948; box-shadow: 0 17px 38px rgba(31,68,49,.12); text-align: center; }
.kiv-css-studio .cs-support-result > i { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: #d9e8df; color: #5e766a; font: 850 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kiv-css-studio .cs-support-result > strong { font-size: 22px; letter-spacing: -.025em; }
.kiv-css-studio .cs-support-result > code { max-width: 100%; overflow-wrap: anywhere; color: inherit; font-size: 11px; }
.kiv-css-studio .cs-support-result > small { color: #7a8d83; font: 650 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.kiv-css-studio .cs-support-result.is-supported { background: #e5f5eb; color: #236543; }
.kiv-css-studio .cs-support-result.is-supported > i { background: #178b58; color: #fff; }
.kiv-css-studio .cs-support-result.is-unsupported { background: #f7eeee; color: #844943; }
.kiv-css-studio .cs-support-result.is-unsupported > i { background: #b75c54; color: #fff; }

/* Modern CSS: cascade layer stack */
.kiv-css-studio .cs-layer-stage { display: block; min-height: 390px; padding: 25px; }
.kiv-css-studio .cs-layer-stack { display: flex; width: min(520px, 92%); margin: 8px auto 0; flex-direction: column; }
.kiv-css-studio .cs-layer-card { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 58px; margin-top: -4px; padding: 11px 14px; align-items: center; gap: 10px; border: 0; border-radius: 5px; background: #eef4f0; color: #385246; box-shadow: 0 7px 15px rgba(33,68,51,.09); text-align: left; transition: transform .14s ease, background .14s ease; }
.kiv-css-studio .cs-layer-card:nth-child(even) { background: #e5eee8; }
.kiv-css-studio .cs-layer-card:hover,.kiv-css-studio .cs-layer-card:focus { z-index: 2; outline: 0; transform: translateX(5px); }
.kiv-css-studio .cs-layer-card.is-active { z-index: 3; background: #dff2e7; color: #1f6641; box-shadow: inset 3px 0 0 var(--cs-accent), 0 10px 20px rgba(33,68,51,.13); transform: translateX(9px); }
.kiv-css-studio .cs-layer-card > span { color: #7d9387; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kiv-css-studio .cs-layer-card > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kiv-css-studio .cs-layer-card > small { color: #7e9187; font-size: 9px; }

/* Modern CSS: logical writing-flow map */
.kiv-css-studio .cs-logical-stage { min-height: 390px; }
.kiv-css-studio .cs-logical-board { position: relative; width: min(500px, 86%); min-height: 270px; border-radius: 7px; background: rgba(255,255,255,.68); box-shadow: 0 15px 34px rgba(31,68,49,.1); }
.kiv-css-studio .cs-logical-board::before,.kiv-css-studio .cs-logical-board::after { content: ""; position: absolute; background: rgba(42,100,70,.19); }
.kiv-css-studio .cs-logical-board::before { left: 50%; top: 12%; bottom: 12%; width: 1px; }
.kiv-css-studio .cs-logical-board::after { top: 50%; left: 8%; right: 8%; height: 1px; }
.kiv-css-studio .cs-flow-label { position: absolute; z-index: 2; padding: 4px 7px; border-radius: 3px; background: #dcebe2; color: #47705b; font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.kiv-css-studio .cs-flow-block-start { top: 8px; left: 50%; transform: translateX(-50%); }
.kiv-css-studio .cs-flow-block-end { bottom: 8px; left: 50%; transform: translateX(-50%); }
.kiv-css-studio .cs-flow-inline-start { left: 8px; top: 50%; transform: translateY(-50%); }
.kiv-css-studio .cs-flow-inline-end { right: 8px; top: 50%; transform: translateY(-50%); }
.kiv-css-studio .mode-vertical-rl .cs-flow-block-start { right: 8px; left: auto; top: 50%; transform: translateY(-50%); }
.kiv-css-studio .mode-vertical-rl .cs-flow-block-end { left: 8px; bottom: auto; top: 50%; transform: translateY(-50%); }
.kiv-css-studio .mode-vertical-lr .cs-flow-block-start { left: 8px; top: 50%; transform: translateY(-50%); }
.kiv-css-studio .mode-vertical-lr .cs-flow-block-end { right: 8px; left: auto; bottom: auto; top: 50%; transform: translateY(-50%); }
.kiv-css-studio .mode-vertical-rl .cs-flow-inline-start,.kiv-css-studio .mode-vertical-lr .cs-flow-inline-start { top: 8px; left: 50%; transform: translateX(-50%); }
.kiv-css-studio .mode-vertical-rl .cs-flow-inline-end,.kiv-css-studio .mode-vertical-lr .cs-flow-inline-end { right: auto; bottom: 8px; left: 50%; top: auto; transform: translateX(-50%); }
.kiv-css-studio .dir-rtl.mode-vertical-rl .cs-flow-inline-start,.kiv-css-studio .dir-rtl.mode-vertical-lr .cs-flow-inline-start { top: auto; bottom: 8px; }
.kiv-css-studio .dir-rtl.mode-vertical-rl .cs-flow-inline-end,.kiv-css-studio .dir-rtl.mode-vertical-lr .cs-flow-inline-end { top: 8px; bottom: auto; }
.kiv-css-studio .cs-flow-demo { position: absolute; inset: 50% auto auto 50%; display: grid; width: 180px; min-height: 116px; padding: 18px; align-content: center; gap: 7px; border-radius: 6px; background: linear-gradient(145deg,#178b58,#316bd8); color: #fff; text-align: center; transform: translate(-50%,-50%); }
.kiv-css-studio .cs-flow-demo i { width: 24px; height: 3px; margin: 0 auto 3px; border-radius: 99px; background: rgba(255,255,255,.55); }
.kiv-css-studio .cs-flow-demo strong { font-size: 13px; }
.kiv-css-studio .cs-flow-demo small { color: rgba(255,255,255,.78); font: 650 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }

html.kiv-shell-dark .kiv-css-studio {
    --cs-accent-deep: #93d5b1;
    --cs-accent-soft: #203d2f;
    --cs-ink: #dce9e2;
    --cs-muted: #91a69b;
    --cs-line: #2f4439;
    --cs-surface: #15241d;
    --cs-soft: #192c22;
    --cs-canvas: #111e18;
    --cs-code: #0d1712;
}
html.kiv-shell-dark .kiv-css-studio .cs-tabs { background: rgba(16, 29, 23, .34); }
html.kiv-shell-dark .kiv-css-studio .cs-tabs > li > a { color: #a4b8ad; }
html.kiv-shell-dark .kiv-css-studio .cs-tabs > li > a:hover,
html.kiv-shell-dark .kiv-css-studio .cs-tabs > li > a:focus { background: rgba(89, 178, 128, .08); color: #cbe7d7; }
html.kiv-shell-dark .kiv-css-studio .cs-tabs > li.active > a { background: #17281f; color: #cde8d8; }
html.kiv-shell-dark .kiv-css-studio .cs-rail { background: rgba(21, 36, 29, .72); }
html.kiv-shell-dark .kiv-css-studio .cs-status:not(:empty) { background: #193528; color: #bce4cc; }
html.kiv-shell-dark .kiv-css-studio .cs-field label,
html.kiv-shell-dark .kiv-css-studio .cs-check { color: #a7baaf; }
html.kiv-shell-dark .kiv-css-studio input[type="color"] { border-color: #344a3e; background: #111f18; }
html.kiv-shell-dark .kiv-css-studio .cs-button.cs-secondary { background: #263a30; color: #c2d5ca; }
html.kiv-shell-dark .kiv-css-studio .cs-flex-preview { border-color: rgba(132,194,160,.28); background: rgba(23,40,31,.72); }
html.kiv-shell-dark .kiv-css-studio .cs-flex-item { background: #244c36; color: #c8ead6; }
html.kiv-shell-dark .kiv-css-studio .cs-flex-item:nth-child(3n+2) { background: #243c55; color: #cfe2f6; }
html.kiv-shell-dark .kiv-css-studio .cs-flex-item:nth-child(3n) { background: #423352; color: #eadbf7; }
html.kiv-shell-dark .kiv-css-studio .cs-shadow-stage { background: #111f18; }
html.kiv-shell-dark .kiv-css-studio .cs-shadow-object { background: #20352a; color: #cce8d8; }
html.kiv-shell-dark .kiv-css-studio .cs-scroll-preview { background: #1b3025; }
html.kiv-shell-dark .kiv-css-studio .cs-scroll-content { color: #d7e7dd; }
html.kiv-shell-dark .kiv-css-studio .cs-scroll-content h3 { color: #d7e7dd; }
html.kiv-shell-dark .kiv-css-studio .cs-scroll-content p { color: #96ab9f; }
html.kiv-shell-dark .kiv-css-studio .cs-tabs .dropdown-menu > .dropdown-header { color: #83998d; }
html.kiv-shell-dark .kiv-css-studio .cs-specificity-row { background: #1a2d23; }
html.kiv-shell-dark .kiv-css-studio .cs-specificity-row code { color: #c3d7cc; }
html.kiv-shell-dark .kiv-css-studio .cs-specificity-row > span { background: #2b4135; }
html.kiv-shell-dark .kiv-css-studio .cs-specificity-row.is-strong { background: #203b2c; }
html.kiv-shell-dark .kiv-css-studio .cs-container-preview { background: rgba(25,43,34,.92); }
html.kiv-shell-dark .kiv-css-studio .cs-container-card { background: #244736; color: #c9e7d6; }
html.kiv-shell-dark .kiv-css-studio .cs-container-card:nth-child(even) { background: #263f55; color: #d2e4f4; }
html.kiv-shell-dark .kiv-css-studio .cs-support-result { background: #1c3026; color: #c1d9cc; }
html.kiv-shell-dark .kiv-css-studio .cs-support-result.is-supported { background: #1f3d2d; color: #c5ead5; }
html.kiv-shell-dark .kiv-css-studio .cs-support-result.is-unsupported { background: #402725; color: #f1cbc7; }
html.kiv-shell-dark .kiv-css-studio .cs-layer-card { background: #1b3025; color: #c7dcd0; }
html.kiv-shell-dark .kiv-css-studio .cs-layer-card:nth-child(even) { background: #20372b; }
html.kiv-shell-dark .kiv-css-studio .cs-layer-card.is-active { background: #244934; color: #d8f1e3; }
html.kiv-shell-dark .kiv-css-studio .cs-logical-board { background: rgba(24,41,32,.88); }
html.kiv-shell-dark .kiv-css-studio .cs-flow-label { background: #284537; color: #bdd8ca; }

@media (max-width: 1080px) {
    .kiv-css-studio .cs-shell { grid-template-columns: minmax(270px, 315px) minmax(0, 1fr); }
    .kiv-css-studio .cs-tabs > li > a { padding-inline: 8px; font-size: 11px; }
}

@media (max-width: 820px) {
    .kiv-css-studio .cs-tabs {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }
    .kiv-css-studio .cs-tabs > li { flex: 0 0 158px; scroll-snap-align: start; }
    .kiv-css-studio .cs-tabs > li > a { min-height: 46px; }
    .kiv-css-studio .cs-shell { grid-template-columns: 1fr; grid-template-areas: "console" "stage" "export"; }
    .kiv-css-studio .cs-stage { min-height: 330px; }
    .kiv-css-studio .cs-console > header,
    .kiv-css-studio .cs-stage-shell > header,
    .kiv-css-studio .cs-export > header { flex-wrap: wrap; }
    .kiv-css-studio .cs-stage-shell > header small { width: 100%; margin-left: 0; text-align: left; }
}

@media (max-width: 480px) {
    .kiv-css-studio .cs-rail { align-items: flex-start; flex-direction: column; gap: 3px; }
    .kiv-css-studio .cs-rail small { text-align: left; }
    .kiv-css-studio .cs-field-row,
    .kiv-css-studio .cs-field-grid { gap: 8px; }
    .kiv-css-studio .cs-console-body { padding: 12px; }
    .kiv-css-studio .cs-stage { min-height: 300px; padding: 18px; }
    .kiv-css-studio .cs-flex-stage { padding: 18px; }
    .kiv-css-studio .cs-flex-preview { min-height: 264px; padding: 12px; }
    .kiv-css-studio .cs-flex-item { min-width: 62px; min-height: 52px; }
    .kiv-css-studio .cs-shadow-object { width: 72%; }
    .kiv-css-studio .cs-transform-object { width: 118px; height: 118px; }
    .kiv-css-studio .cs-filter-scene { min-height: 270px; }
    .kiv-css-studio .cs-key-stage { padding-inline: 18px; }
    .kiv-css-studio .cs-key-track { height: 190px; }
    .kiv-css-studio .cs-radius-stage,
    .kiv-css-studio .cs-clip-stage,
    .kiv-css-studio .cs-text-stage,
    .kiv-css-studio .cs-scroll-stage,
    .kiv-css-studio .cs-transition-stage { min-height: 320px; }
    .kiv-css-studio .cs-radius-object { max-width: 86%; max-height: 250px; }
    .kiv-css-studio .cs-clip-board { width: 88%; }
    .kiv-css-studio .cs-text-object { font-size: 44px; }
    .kiv-css-studio .cs-scroll-preview { width: 94%; height: 260px; }
    .kiv-css-studio .cs-scroll-content { padding: 20px 24px 38px; }
    .kiv-css-studio .cs-transition-object { width: 145px; height: 145px; }
    .kiv-css-studio .cs-specificity-stage,.kiv-css-studio .cs-container-stage,.kiv-css-studio .cs-support-stage,.kiv-css-studio .cs-layer-stage,.kiv-css-studio .cs-logical-stage { min-height: 320px; }
    .kiv-css-studio .cs-specificity-row { grid-template-columns: 1fr; }
    .kiv-css-studio .cs-container-stage { padding-inline: 10px; }
    .kiv-css-studio .cs-support-result { width: 94%; min-height: 210px; padding: 22px; }
    .kiv-css-studio .cs-layer-stage { padding: 18px 12px; }
    .kiv-css-studio .cs-layer-stack { width: 94%; }
    .kiv-css-studio .cs-layer-card { grid-template-columns: 28px minmax(0,1fr); }
    .kiv-css-studio .cs-layer-card > small { display: none; }
    .kiv-css-studio .cs-logical-board { width: 96%; min-height: 245px; }
    .kiv-css-studio .cs-flow-demo { width: 145px; min-height: 100px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .kiv-css-studio *, .kiv-css-studio *::before, .kiv-css-studio *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}