@property --oz-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

body.oz-page #page {
    overflow-x: clip;
}

body.oz-page .entry-content > .oz {
    width: 100vw;
    max-width: none;
    margin: 0 0 0 calc(50% - 50vw);
}

.oz {
    --oz-bg: #050b14;
    --oz-panel: rgba(12, 23, 39, 0.72);
    --oz-line: rgba(120, 190, 255, 0.1);
    --oz-line-strong: rgba(120, 190, 255, 0.28);
    --oz-ink: #a9c1dc;
    --oz-tx: #e6f1ff;
    --oz-mut: #8aa0b8;
    --oz-g: #3ddc84;
    --oz-c: #22d3ee;
    --oz-amber: #ffb547;
    --oz-bad: #ff5c7a;
    --oz-surge: #c084fc;
    --oz-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    position: relative;
    isolation: isolate;
    padding: 4.5rem 1.5rem 4rem;
    color: var(--oz-tx);
    background:
        radial-gradient(800px 420px at 12% 0%, rgba(61, 220, 132, 0.1), transparent 60%),
        radial-gradient(760px 520px at 92% 35%, rgba(34, 211, 238, 0.1), transparent 60%),
        linear-gradient(var(--oz-line) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, var(--oz-line) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--oz-bg);
}

.oz-inner {
    max-width: 1240px;
    margin: 0 auto;
}

/* head */

.oz-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.6rem;
}

.oz .oz-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.85rem;
    font: 600 0.72rem/1 var(--oz-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oz-g);
}

.oz-dot-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oz-g);
    box-shadow: 0 0 10px var(--oz-g);
    animation: oz-blink 1.6s ease-in-out infinite;
}

.oz h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.15;
    color: #fff;
}

.oz .oz-lead {
    max-width: 64ch;
    margin: 0;
    line-height: 1.7;
    color: var(--oz-mut);
}

.oz .oz-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: 360px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.oz-chips li {
    margin: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--oz-line-strong);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.06);
    font: 500 0.72rem/1 var(--oz-mono);
    color: var(--oz-c);
}

/* controls */

.oz-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.2rem;
}

.oz .oz-controls button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.6rem 1rem;
    border: 1px solid var(--oz-line-strong);
    border-radius: 10px;
    background: rgba(12, 23, 39, 0.85);
    color: var(--oz-tx);
    font: 600 0.85rem/1 inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.oz .oz-controls button:hover,
.oz .oz-controls button:focus-visible {
    border-color: var(--oz-c);
    background: rgba(12, 23, 39, 0.95);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12), 0 10px 26px -12px rgba(34, 211, 238, 0.6);
    transform: translateY(-1px);
    outline: none;
}

.oz .oz-controls button:disabled {
    opacity: 0.45;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.oz-controls button b {
    padding: 0.28rem 0.42rem;
    border-radius: 6px;
    background: rgba(61, 220, 132, 0.12);
    font: 700 0.72rem/1 var(--oz-mono);
    color: var(--oz-g);
}

.oz-controls .is-bad b {
    background: rgba(255, 92, 122, 0.14);
    color: var(--oz-bad);
}

.oz-controls .is-surge b {
    background: rgba(192, 132, 252, 0.14);
    color: var(--oz-surge);
}

.oz .oz-controls .oz-demo {
    margin-left: auto;
    font: 600 0.75rem/1 var(--oz-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oz-mut);
}

.oz-demo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--oz-mut);
}

.oz .oz-controls .oz-demo[aria-pressed="true"] {
    border-color: rgba(61, 220, 132, 0.5);
    color: var(--oz-g);
}

.oz-demo[aria-pressed="true"]::before {
    background: var(--oz-g);
    box-shadow: 0 0 8px var(--oz-g);
    animation: oz-blink 1.2s ease-in-out infinite;
}

/* stage */

.oz-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.2rem;
    align-items: start;
}

.oz-sheet {
    position: relative;
    overflow: hidden;
    padding: 1px;
    border-radius: 16px;
    background: conic-gradient(from var(--oz-angle), rgba(34, 211, 238, 0.1), var(--oz-c), rgba(61, 220, 132, 0.15), var(--oz-g), rgba(34, 211, 238, 0.1));
    animation: oz-angle 9s linear infinite;
    box-shadow: 0 30px 80px -40px rgba(34, 211, 238, 0.45);
}

.oz[data-q1="trip"] .oz-sheet {
    background: conic-gradient(from var(--oz-angle), rgba(255, 92, 122, 0.12), var(--oz-bad), rgba(255, 92, 122, 0.12), var(--oz-bad), rgba(255, 92, 122, 0.12));
}

.oz-scroll {
    overflow-x: auto;
    border-radius: 15px;
    background: #040a13;
    scrollbar-color: rgba(120, 190, 255, 0.3) transparent;
}

.oz-scroll:focus-visible {
    outline: 2px solid var(--oz-c);
    outline-offset: -2px;
}

.oz-svg {
    display: block;
    width: 100%;
    min-width: 720px;
    height: auto;
}

.oz-scan {
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.07) 48%, rgba(34, 211, 238, 0.16) 50%, transparent 52%);
    background-size: 100% 220%;
    animation: oz-scan 6s linear infinite;
    mix-blend-mode: screen;
}

/* drawing */

.oz-svg text {
    font-family: Arial, Helvetica, sans-serif;
    fill: var(--oz-ink);
}

.oz-gridline {
    fill: none;
    stroke: rgba(120, 190, 255, 0.05);
    stroke-width: 0.6;
}

.oz-border {
    fill: none;
    stroke: rgba(150, 200, 255, 0.35);
    stroke-width: 1;
}

.oz-svg .oz-hd {
    font-size: 9px;
    text-anchor: middle;
    fill: var(--oz-mut);
}

.oz-svg .oz-tb {
    font-size: 9px;
    fill: var(--oz-mut);
}

.oz-svg .oz-mid {
    font-size: 10.5px;
    text-anchor: middle;
    fill: var(--oz-tx);
}

.oz-svg .oz-lbl {
    font-size: 11px;
    fill: var(--oz-tx);
}

.oz-svg .oz-sm {
    font-size: 7px;
    fill: var(--oz-mut);
}

.oz-svg .oz-tn {
    font-size: 6px;
    fill: var(--oz-mut);
}

.oz-svg .oz-ref {
    font-size: 10px;
    fill: var(--oz-c);
}

.oz-svg .oz-end {
    text-anchor: end;
}

.oz-svg .oz-m {
    font-size: 13px;
    text-anchor: middle;
    fill: var(--oz-tx);
}

.oz-w,
.oz-mech {
    fill: none;
    stroke: var(--oz-ink);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.4s ease;
}

.oz-mech {
    stroke-width: 0.8;
    stroke-dasharray: 2.5 2;
}

.oz-block {
    fill: none;
    stroke: rgba(169, 193, 220, 0.6);
    stroke-width: 1;
}

.oz-sym {
    fill: none;
    stroke: var(--oz-ink);
    stroke-width: 0.9;
}

.oz-svg .oz-fill {
    fill: var(--oz-ink);
}

.oz-th,
.oz-coil,
.oz-spdbox {
    fill: rgba(5, 11, 20, 0.7);
    stroke: var(--oz-ink);
    stroke-width: 1;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.oz-dot {
    fill: var(--oz-ink);
    transition: fill 0.4s ease;
}

.oz-arrow {
    fill: #040a13;
    stroke: var(--oz-c);
    stroke-width: 1;
}

.oz-term {
    fill: none;
    stroke-width: 1;
}

.oz-q1 .oz-live {
    stroke: var(--oz-g);
    filter: drop-shadow(0 0 2px rgba(61, 220, 132, 0.8));
}

/* switching elements */

.oz-contact,
.oz-blade {
    fill: none;
    stroke: var(--oz-tx);
    stroke-width: 1.5;
    stroke-linecap: round;
    transform-box: fill-box;
    transition: transform 0.45s cubic-bezier(0.5, 1.7, 0.45, 1), stroke 0.3s ease;
}

.oz-contact {
    transform-origin: right center;
    transform: rotate(-15deg);
}

.oz[data-q1="on"] .oz-contact {
    transform: none;
    stroke: var(--oz-g);
}

.oz-aux-blade {
    transform-origin: center bottom;
    transform: rotate(-17deg);
}

.oz[data-q1="on"] .oz-aux-blade {
    transform: none;
    stroke: var(--oz-amber);
}

.oz-sde-blade {
    transform-origin: right bottom;
    stroke: var(--oz-amber);
}

.oz[data-q1="trip"] .oz-sde-blade {
    transform: rotate(-18deg);
    stroke: var(--oz-bad);
}

/* energy */

.oz[data-q1="on"] .oz-pw,
.oz[data-q1="on"] .oz-drop {
    stroke: rgba(61, 220, 132, 0.55);
}

.oz[data-q1="on"] .oz-dot.oz-drop {
    fill: var(--oz-g);
}

.oz-flow {
    fill: none;
    stroke: var(--oz-g);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 5 11;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(61, 220, 132, 0.9));
    transition: opacity 0.4s ease;
}

.oz[data-q1="on"] .oz-flow {
    opacity: 0.95;
    animation: oz-dash 0.8s linear infinite;
}

.oz-live-sig {
    fill: none;
    stroke: var(--oz-amber);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 3 7;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.oz[data-q1="on"] .oz-live-aux,
.oz:not([data-q1="trip"]) .oz-live-sde {
    opacity: 0.85;
    animation: oz-dash-sig 1.4s linear infinite;
}

.oz-pulse,
.oz-surge {
    fill: none;
    stroke: var(--oz-amber);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 16 84;
    stroke-dashoffset: 16;
    opacity: 0;
    filter: drop-shadow(0 0 4px var(--oz-amber));
}

.oz-surge {
    stroke: var(--oz-surge);
    stroke-width: 3;
    stroke-dasharray: 22 78;
    filter: drop-shadow(0 0 5px var(--oz-surge));
}

.oz-pulse.is-go {
    animation: oz-pulse 0.9s ease-in-out forwards;
}

.oz-surge.is-go {
    animation: oz-pulse 0.55s cubic-bezier(0.6, 0, 0.9, 0.6) forwards;
}

.oz-mx.is-on .oz-coil {
    fill: rgba(255, 181, 71, 0.35);
    stroke: var(--oz-amber);
    filter: drop-shadow(0 0 6px var(--oz-amber));
}

.oz-spin {
    fill: none;
    stroke: var(--oz-c);
    stroke-width: 1.4;
    stroke-dasharray: 6 5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.2s ease;
}

.oz-motor.is-run .oz-spin {
    opacity: 1;
    animation: oz-spin 0.6s linear infinite;
}

.oz[data-q1="trip"] .oz-th {
    stroke: var(--oz-bad);
}

.oz-q1.is-fault .oz-th {
    animation: oz-fault 0.18s 5 alternate;
}

.oz.is-surge .oz-spdbox {
    animation: oz-spd 0.12s 6 alternate;
}

.oz-alarm {
    fill: var(--oz-bad);
    opacity: 0;
    filter: drop-shadow(0 0 6px var(--oz-bad));
}

.oz[data-q1="trip"] .oz-alarm {
    opacity: 1;
    animation: oz-blink 0.7s ease-in-out infinite;
}

/* hover targets */

.oz-part {
    cursor: pointer;
    outline: none;
}

.oz-hit {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1;
    rx: 4px;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.oz-part:hover .oz-hit,
.oz-part:focus-visible .oz-hit,
.oz-part.is-sel .oz-hit {
    fill: rgba(34, 211, 238, 0.07);
    stroke: var(--oz-c);
    stroke-dasharray: 3 3;
    animation: oz-ants 1s linear infinite;
}

/* side */

.oz-side {
    display: grid;
    gap: 1rem;
}

.oz-panel {
    padding: 1rem 1.1rem;
    border: 1px solid var(--oz-line-strong);
    border-radius: 14px;
    background: var(--oz-panel);
    backdrop-filter: blur(8px);
}

.oz .oz-panel-title {
    margin: 0 0 0.8rem;
    font: 600 0.7rem/1 var(--oz-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oz-mut);
}

.oz .oz-status {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.oz-status div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
}

.oz-status dt {
    color: var(--oz-mut);
    font-weight: 400;
}

.oz .oz-status dd {
    margin: 0;
    font: 600 0.8rem/1.3 var(--oz-mono);
    color: var(--oz-tx);
    transition: color 0.3s ease;
}

.oz-status dd[data-level="ok"] {
    color: var(--oz-g);
}

.oz-status dd[data-level="warn"] {
    color: var(--oz-amber);
}

.oz-status dd[data-level="bad"] {
    color: var(--oz-bad);
}

.oz-status dd[data-level="surge"] {
    color: var(--oz-surge);
}

.oz .oz-info-name {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: #fff;
}

.oz .oz-info-text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--oz-mut);
}

.oz .oz-log {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 0.72rem/1.45 var(--oz-mono);
    color: var(--oz-mut);
}

.oz-log li {
    display: flex;
    gap: 0.6rem;
    margin: 0;
    animation: oz-in 0.35s ease;
}

.oz-log time {
    flex: none;
    color: var(--oz-c);
}

.oz-log .is-ok {
    color: var(--oz-g);
}

.oz-log .is-warn {
    color: var(--oz-amber);
}

.oz-log .is-bad {
    color: var(--oz-bad);
}

.oz-log .is-surge {
    color: var(--oz-surge);
}

.oz .oz-foot {
    margin: 1.1rem 0 0;
    font-size: 0.78rem;
    color: var(--oz-mut);
}

/* keyframes */

@keyframes oz-angle {
    to {
        --oz-angle: 360deg;
    }
}

@keyframes oz-blink {
    50% {
        opacity: 0.25;
    }
}

@keyframes oz-scan {
    from {
        background-position: 0 120%;
    }
    to {
        background-position: 0 -120%;
    }
}

@keyframes oz-dash {
    to {
        stroke-dashoffset: -16;
    }
}

@keyframes oz-dash-sig {
    to {
        stroke-dashoffset: -20;
    }
}

@keyframes oz-pulse {
    0% {
        stroke-dashoffset: 16;
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -100;
        opacity: 0;
    }
}

@keyframes oz-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes oz-fault {
    to {
        fill: rgba(255, 92, 122, 0.6);
        stroke: var(--oz-bad);
    }
}

@keyframes oz-spd {
    to {
        fill: rgba(192, 132, 252, 0.75);
        stroke: var(--oz-surge);
    }
}

@keyframes oz-ants {
    to {
        stroke-dashoffset: -12;
    }
}

@keyframes oz-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* responsive */

@media (max-width: 1080px) {
    .oz-stage {
        grid-template-columns: 1fr;
    }

    .oz-side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .oz-head {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .oz .oz-chips {
        justify-content: flex-start;
        max-width: none;
    }

    .oz-side {
        grid-template-columns: 1fr;
    }

    .oz .oz-controls .oz-demo {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .oz {
        padding: 3rem 1rem;
    }

    .oz .oz-controls button {
        flex: 1 1 calc(50% - 0.6rem);
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oz *,
    .oz *::before,
    .oz *::after {
        animation: none !important;
        transition: none !important;
    }
}