#aiot-zp{--aiotk-rem:16px;word-break:normal;overflow-wrap:normal;hyphens:manual;text-align:left;}
#aiot-zp :where(button,input,select,textarea,label,a,h2,h3,h4,p,li,span,small,strong,code,kbd){text-transform:none;letter-spacing:normal;word-break:normal;text-shadow:none;}
#aiot-zp :where(button,input,select,textarea){box-shadow:none;min-height:0;line-height:normal;}
#aiot-zp :where(ul,ol){margin:0;padding:0;}
#aiot-zp :where(legend){display:block;}
#aiot-zp .aiot-zp-tool-section{container:aiotk / inline-size;}


#aiot-zp, #aiot-zp *, #aiot-zp *::before, #aiot-zp *::after { box-sizing: border-box; }

#aiot-zp {
    --op-paper: #F5F3EC;
    --op-paper-2: #EBE7DB;
    --op-ink: #16181B;
    --op-ink-70: rgba(22,24,27,0.76);
    --op-ink-50: rgba(22,24,27,0.66);
    --op-line: #D6D0C1;
    --op-line-strong: #B7AF9B;
    --op-white: #FFFFFF;
    --op-cyan: #0089C4;
    --op-accent-text: #006A99;
    --op-magenta: #B01A6A;
    --op-yellow: #D69A00;
    --op-red: #A8352A;
    --op-green: #3F6B32;
    --op-pop: 0 14px 40px rgba(22,24,27,0.18);

    --h-bg: #16181B;
    --h-fg: #F5F3EC;
    --h-muted: rgba(245,243,236,0.82);
    --h-border: rgba(245,243,236,0.34);
    --h-line: #D6D0C1;
    --h-accent: #29B6F6;

    --op-radius-sm: 2px;
    --op-radius: 6px;
    --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    --font-body: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Sitka Text', Cambria, Georgia, 'Noto Serif', serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Roboto Mono', monospace;

    color-scheme: light;
    font-family: var(--font-body);
    color: var(--op-ink);
    line-height: 1.5;
    width: 100%;
    overflow-x: clip;
    background: var(--op-paper);
    transition: background-color .2s ease, color .2s ease;
}

#aiot-zp[data-theme="dark"] {
    --op-paper: #121417;
    --op-paper-2: #181B1F;
    --op-ink: #ECE8DC;
    --op-ink-70: rgba(236,232,220,0.80);
    --op-ink-50: rgba(236,232,220,0.66);
    --op-line: #2C3036;
    --op-line-strong: #4A5059;
    --op-white: #1E2126;
    --op-cyan: #4CC3F7;
    --op-accent-text: #6CCBF5;
    --op-magenta: #F27AB1;
    --op-yellow: #F2B632;
    --op-red: #F2806F;
    --op-green: #8BC47A;
    --op-pop: 0 14px 40px rgba(0,0,0,0.55);
    --h-bg: #0B0D10;
    --h-line: #3A3F46;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    #aiot-zp:not([data-theme="light"]) {
        --op-paper: #121417;
        --op-paper-2: #181B1F;
        --op-ink: #ECE8DC;
        --op-ink-70: rgba(236,232,220,0.80);
        --op-ink-50: rgba(236,232,220,0.66);
        --op-line: #2C3036;
        --op-line-strong: #4A5059;
        --op-white: #1E2126;
        --op-cyan: #4CC3F7;
        --op-accent-text: #6CCBF5;
        --op-magenta: #F27AB1;
        --op-yellow: #F2B632;
        --op-red: #F2806F;
        --op-green: #8BC47A;
        --op-pop: 0 14px 40px rgba(0,0,0,0.55);
        --h-bg: #0B0D10;
        --h-line: #3A3F46;
        color-scheme: dark;
    }
}

#aiot-zp h1, #aiot-zp h2, #aiot-zp h3, #aiot-zp h4 { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--op-ink); }
#aiot-zp :where(h1, h2, h3, h4, p, ol, ul, figure) { margin: 0; }
#aiot-zp li { margin: 0; }
#aiot-zp :where(button, input, select) { font-family: inherit; }
#aiot-zp img { max-width: 100%; height: auto; }
#aiot-zp strong { font-weight: 600; }
#aiot-zp a { color: inherit; text-decoration: none; }
#aiot-zp a:not(.aiot-zp-btn):hover { text-decoration: underline; text-underline-offset: 3px; }
#aiot-zp svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
#aiot-zp button svg { pointer-events: none; }
#aiot-zp [hidden] { display: none !important; }
#aiot-zp .aiot-zp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#aiot-zp :focus-visible { outline: 2px solid var(--op-cyan); outline-offset: 2px; }
#aiot-zp code { font-family: var(--font-mono); }

@keyframes aiot-zp-spin { to { transform: rotate(360deg); } }
#aiot-zp .aiot-zp-spinner {
    display: inline-block; width: calc(1 * var(--aiotk-rem)); height: calc(1 * var(--aiotk-rem));
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 50%;
    border-top-color: currentColor;
    animation: aiot-zp-spin .85s linear infinite;
}

#aiot-zp .op-regdots { display: inline-flex; gap: 4px; flex-shrink: 0; }
#aiot-zp .op-regdots i { width: 6px; height: 6px; border-radius: 50%; display: block; }
#aiot-zp .op-regdots i:nth-child(1) { background: #0089C4; }
#aiot-zp .op-regdots i:nth-child(2) { background: #C11C74; }
#aiot-zp .op-regdots i:nth-child(3) { background: #D69A00; }
#aiot-zp .op-regdots i:nth-child(4) { background: var(--h-fg); }


#aiot-zp .aiot-zp-hero {
    position: relative; overflow: hidden; background-color: var(--h-bg); color: var(--h-fg);
    padding: calc(2.5 * var(--aiotk-rem)) 0 calc(4.5 * var(--aiotk-rem));
    background-image: linear-gradient(var(--h-line) 1px, transparent 1px), linear-gradient(90deg, var(--h-line) 1px, transparent 1px);
    background-size: 42px 42px; background-position: center top;
}
#aiot-zp .aiot-zp-hero::before { content: ""; position: absolute; inset: 0; background: var(--h-bg); opacity: .88; }
#aiot-zp .aiot-zp-hero h1 { color: var(--h-fg); }
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-hero { padding-top: calc(3 * var(--aiotk-rem)); padding-bottom: calc(5.5 * var(--aiotk-rem)); }}
#aiot-zp [id] { scroll-margin-top: calc(6 * var(--aiotk-rem)); }

#aiot-zp .aiot-zp-hero-content { max-width: calc(76 * var(--aiotk-rem)); margin: 0 auto; padding: 0 calc(1.25 * var(--aiotk-rem)); position: relative; z-index: 1; }
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-hero-content { padding: 0 calc(1.75 * var(--aiotk-rem)); }}

#aiot-zp .aiot-zp-hero-top { min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(.9 * var(--aiotk-rem)) calc(1.5 * var(--aiotk-rem)); margin-bottom: calc(2.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.5 * var(--aiotk-rem)); list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); color: var(--h-muted); }
#aiot-zp .aiot-zp-breadcrumb li { margin: 0; padding: 0; }
#aiot-zp .aiot-zp-breadcrumb a { color: var(--h-muted); }
#aiot-zp .aiot-zp-breadcrumb a:hover { color: var(--h-fg); }
#aiot-zp .aiot-zp-breadcrumb [aria-current] { color: var(--h-fg); font-weight: 600; }


#aiot-zp .aiot-zp-theme-switch { display: inline-flex; padding: 3px; border: 1px solid var(--h-border); border-radius: 999px; background: rgba(245,243,236,0.06); }
#aiot-zp .aiot-zp-theme-switch button {
    display: inline-flex; align-items: center; gap: calc(.35 * var(--aiotk-rem)); min-height: 32px; padding: calc(.3 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); border: 0; border-radius: 999px;
    background: transparent; color: var(--h-muted); font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); font-weight: 600; cursor: pointer;
    transition: background-color .15s, color .15s;
}
#aiot-zp .aiot-zp-theme-switch button:hover { color: var(--h-fg); }
#aiot-zp .aiot-zp-theme-switch button[aria-pressed="true"] { background: var(--h-fg); color: var(--h-bg); }
#aiot-zp .aiot-zp-theme-switch svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-hero :focus-visible { outline-color: var(--h-accent); }

#aiot-zp .aiot-zp-hero-text { max-width: calc(46 * var(--aiotk-rem)); margin: 0 auto; text-align: center; }
#aiot-zp .aiot-zp-status-badge {
    display: inline-flex; align-items: center; gap: calc(.6 * var(--aiotk-rem)); padding: calc(.42 * var(--aiotk-rem)) calc(.95 * var(--aiotk-rem)) calc(.42 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); margin-bottom: calc(2 * var(--aiotk-rem));
    border-radius: 999px; border: 1px solid var(--h-border); background: rgba(245,243,236,0.08);
    font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); font-weight: 600; color: var(--h-fg);
}
#aiot-zp .aiot-zp-hero-title { font-size: calc(2 * var(--aiotk-rem)); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-hero-title { font-size: calc(2.6 * var(--aiotk-rem)); }}
@container aiotk (min-width: 1024px) { #aiot-zp .aiot-zp-hero-title { font-size: calc(3.4 * var(--aiotk-rem)); }}
#aiot-zp .aiot-zp-hero-subtitle { display: block; font-size: calc(1.15 * var(--aiotk-rem)); font-weight: 400; font-family: var(--font-mono); color: var(--h-accent); margin-top: calc(.9 * var(--aiotk-rem)); letter-spacing: .01em; }
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-hero-subtitle { font-size: calc(1.3 * var(--aiotk-rem)); }}
@container aiotk (min-width: 1024px) { #aiot-zp .aiot-zp-hero-subtitle { font-size: calc(1.5 * var(--aiotk-rem)); }}
#aiot-zp .aiot-zp-hero-desc { margin: calc(1.5 * var(--aiotk-rem)) auto 0; max-width: calc(38 * var(--aiotk-rem)); font-size: calc(1.05 * var(--aiotk-rem)); color: var(--h-muted); line-height: 1.65; }
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-hero-desc { font-size: calc(1.15 * var(--aiotk-rem)); }}

#aiot-zp .aiot-zp-hero-actions { margin-top: calc(2.5 * var(--aiotk-rem)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(.85 * var(--aiotk-rem)); padding: 0 calc(.5 * var(--aiotk-rem)); }
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-hero-actions { flex-direction: row; padding: 0; }}
#aiot-zp .aiot-zp-btn-hero {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: calc(.55 * var(--aiotk-rem));
    border-radius: var(--op-radius-sm); padding: calc(.9 * var(--aiotk-rem)) calc(1.9 * var(--aiotk-rem)); font-family: var(--font-display); font-weight: 600; font-size: calc(.98 * var(--aiotk-rem));
    cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; text-decoration: none;
}
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-btn-hero { width: auto; }}
#aiot-zp .aiot-zp-btn-hero--solid { background: var(--h-fg); color: var(--h-bg); border: 1.5px solid var(--h-fg); }
#aiot-zp .aiot-zp-btn-hero--solid:hover { background: transparent; color: var(--h-fg); }
#aiot-zp .aiot-zp-btn-hero--ghost { background: transparent; color: var(--h-fg); border: 1.5px solid var(--h-border); }
#aiot-zp .aiot-zp-btn-hero--ghost:hover { border-color: var(--h-fg); background: rgba(245,243,236,0.12); text-decoration: none; }
#aiot-zp .aiot-zp-btn-hero svg { width: calc(1 * var(--aiotk-rem)); height: calc(1 * var(--aiotk-rem)); stroke: currentColor; fill: none; }

#aiot-zp .aiot-zp-hero-features { margin: calc(3 * var(--aiotk-rem)) 0 0; padding: 0 calc(.5 * var(--aiotk-rem)); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.6 * var(--aiotk-rem)); list-style: none; }
#aiot-zp .aiot-zp-feature-pill {
    display: flex; align-items: center; gap: calc(.45 * var(--aiotk-rem)); border-radius: 999px; border: 1px solid var(--h-border); padding: calc(.4 * var(--aiotk-rem)) calc(.85 * var(--aiotk-rem));
    font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); font-weight: 400; color: var(--h-muted);
}
#aiot-zp .aiot-zp-pill-icon { width: calc(.9 * var(--aiotk-rem)); height: calc(.9 * var(--aiotk-rem)); color: var(--h-accent); stroke: currentColor; fill: none; }


#aiot-zp .aiot-zp-container { max-width: calc(76 * var(--aiotk-rem)); margin: 0 auto; width: 100%; }
#aiot-zp .aiot-zp-section-head { text-align: center; margin-bottom: calc(3 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-section-title { font-size: calc(1.8 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(1.1 * var(--aiotk-rem)); line-height: 1.2; }
@container aiotk (min-width: 1024px) { #aiot-zp .aiot-zp-section-title { font-size: calc(2.3 * var(--aiotk-rem)); }}
#aiot-zp .aiot-zp-section-desc { font-size: calc(1.05 * var(--aiotk-rem)); color: var(--op-ink-70); max-width: calc(42 * var(--aiotk-rem)); margin: 0 auto; }
#aiot-zp .aiot-zp-eyebrow {
    display: inline-flex; align-items: center; gap: calc(.55 * var(--aiotk-rem)); margin-bottom: calc(1.4 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); font-weight: 600;
    color: var(--op-ink-70); padding: calc(.42 * var(--aiotk-rem)) calc(.85 * var(--aiotk-rem)); border: 1px solid var(--op-line-strong); border-radius: 999px; background: var(--op-white);
}
#aiot-zp .aiot-zp-eyebrow svg { width: calc(.95 * var(--aiotk-rem)); height: calc(.95 * var(--aiotk-rem)); color: var(--op-cyan); stroke: currentColor; fill: none; }
#aiot-zp .t-cyan { color: var(--op-accent-text); }
#aiot-zp .t-magenta { color: var(--op-magenta); }
#aiot-zp .t-red { color: var(--op-red); }


#aiot-zp .aiot-zp-tool-section { padding: calc(4.5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)) calc(5 * var(--aiotk-rem)); background: var(--op-paper-2); border-bottom: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-tool-header { text-align: center; margin-bottom: calc(2 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-byline { display: flex; flex-direction: column; align-items: center; gap: calc(.15 * var(--aiotk-rem)); margin-bottom: calc(1 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-byline span { white-space: nowrap; }
#aiot-zp .aiot-zp-byline a { color: var(--op-ink); border-bottom: 1px solid var(--op-line-strong); font-weight: 600; }
#aiot-zp .aiot-zp-byline a:hover { border-color: var(--op-ink); text-decoration: none; }
#aiot-zp .aiot-zp-tool-title { font-size: calc(1.8 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-tool-desc { font-size: calc(1.08 * var(--aiotk-rem)); color: var(--op-ink-70); }

#aiot-zp .aiot-zp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(.75 * var(--aiotk-rem)); margin-bottom: calc(1 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-toolbar-note { font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-btn-outline {
    display: inline-flex; align-items: center; gap: calc(.45 * var(--aiotk-rem)); min-height: 38px; padding: calc(.45 * var(--aiotk-rem)) calc(.95 * var(--aiotk-rem));
    border: 1.5px solid var(--op-ink); border-radius: var(--op-radius-sm); background: transparent; color: var(--op-ink);
    font-family: var(--font-display); font-weight: 600; font-size: calc(.9 * var(--aiotk-rem)); cursor: pointer; transition: background-color .15s, color .15s;
}
#aiot-zp .aiot-zp-btn-outline:hover { background: var(--op-ink); color: var(--op-paper); }
#aiot-zp .aiot-zp-btn-outline svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

#aiot-zp .aiot-zp-drag-area { border: 1.5px dashed var(--op-line-strong); transition: border-color .2s, background-color .2s; padding: calc(2.75 * var(--aiotk-rem)) calc(1.5 * var(--aiotk-rem)); text-align: center; background: var(--op-white); border-radius: var(--op-radius); margin-bottom: calc(1.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-drag-area.is-over { border-color: var(--op-ink); background: var(--op-paper); }
#aiot-zp .aiot-zp-upload-icon { color: var(--op-ink-50); margin-bottom: calc(.9 * var(--aiotk-rem)); display: flex; justify-content: center; }
#aiot-zp .aiot-zp-upload-icon svg { width: calc(2.75 * var(--aiotk-rem)); height: calc(2.75 * var(--aiotk-rem)); stroke-width: 1.4; stroke: currentColor; fill: none; }
#aiot-zp .aiot-zp-upload-title { font-size: calc(1.25 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(.4 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-upload-desc { font-family: var(--font-mono); font-size: calc(.85 * var(--aiotk-rem)); color: var(--op-ink-70); margin-bottom: calc(1.4 * var(--aiotk-rem)); font-weight: 400; }
#aiot-zp .aiot-zp-status { min-height: calc(1.5 * var(--aiotk-rem)); margin-top: calc(1 * var(--aiotk-rem)); display: flex; align-items: center; justify-content: center; gap: calc(.5 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); color: var(--op-ink-70); }

#aiot-zp .aiot-zp-btn-primary {
    background: var(--op-ink); border: 1.5px solid var(--op-ink); border-radius: var(--op-radius-sm);
    padding: calc(.7 * var(--aiotk-rem)) calc(1.35 * var(--aiotk-rem)); color: var(--op-paper); font-family: var(--font-display); font-weight: 600; font-size: calc(.95 * var(--aiotk-rem));
    transition: background-color .15s, color .15s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: calc(.55 * var(--aiotk-rem));
}
#aiot-zp .aiot-zp-btn-primary:hover:not(:disabled) { background: transparent; color: var(--op-ink); }
#aiot-zp .aiot-zp-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
#aiot-zp .aiot-zp-btn-primary svg { width: calc(1 * var(--aiotk-rem)); height: calc(1 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; }





#aiot-zp .aiot-zp-icon-btn {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm); background: var(--op-white); color: var(--op-ink); cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
#aiot-zp .aiot-zp-icon-btn:hover:not(:disabled) { border-color: var(--op-ink); background: var(--op-paper-2); }
#aiot-zp .aiot-zp-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
#aiot-zp .aiot-zp-icon-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-icon-btn--danger { color: var(--op-red); }
#aiot-zp .aiot-zp-icon-btn--danger:hover:not(:disabled) { background: var(--op-red); border-color: var(--op-red); color: var(--op-white); }

#aiot-zp .aiot-zp-pdf-canvas, #aiot-zp .aiot-zp-merged-canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }



#aiot-zp .aiot-zp-field-label { display: block; font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); font-weight: 600; margin-bottom: calc(.35 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-range-input, #aiot-zp .aiot-zp-merged-name-input, #aiot-zp .aiot-zp-text-input {
    width: 100%; min-height: 40px; padding: calc(.55 * var(--aiotk-rem)) calc(.65 * var(--aiotk-rem)); border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm);
    font-family: var(--font-mono); font-size: calc(.88 * var(--aiotk-rem)); background: var(--op-paper); color: var(--op-ink);
}
#aiot-zp .aiot-zp-range-input[aria-invalid="true"] { border-color: var(--op-red); box-shadow: 0 0 0 1px var(--op-red); }
#aiot-zp .aiot-zp-range-hint { min-height: calc(1.2 * var(--aiotk-rem)); margin-top: calc(.35 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-range-hint.is-error { color: var(--op-red); font-weight: 600; }


#aiot-zp .aiot-zp-controls-panel { display: flex; flex-direction: column; align-items: center; gap: calc(.8 * var(--aiotk-rem)); padding: calc(1.25 * var(--aiotk-rem)); margin-bottom: calc(1 * var(--aiotk-rem)); text-align: center; }
#aiot-zp .aiot-zp-summary { min-height: calc(1.5 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.88 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-summary.is-error { color: var(--op-red); font-weight: 600; }
#aiot-zp .aiot-zp-actions { display: flex; flex-direction: column; align-items: stretch; gap: calc(.75 * var(--aiotk-rem)); width: 100%; }
@container aiotk (min-width: 640px) { #aiot-zp .aiot-zp-actions { flex-direction: row; justify-content: center; align-items: center; width: auto; }}
#aiot-zp .aiot-zp-reset-btn { min-height: 52px; padding: calc(.9 * var(--aiotk-rem)) calc(1.4 * var(--aiotk-rem)); font-size: calc(.98 * var(--aiotk-rem)); justify-content: center; }
#aiot-zp .aiot-zp-reset-btn.is-armed { border-color: var(--op-red); color: var(--op-red); }
#aiot-zp .aiot-zp-reset-btn.is-armed:hover { background: var(--op-red); color: var(--op-white); }


#aiot-zp .aiot-zp-output-section:not(:empty) { margin-top: calc(2 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-merged-header { text-align: center; margin-bottom: calc(1.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-merged-title { font-size: calc(1.7 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(.6 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-merged-title:focus { outline: none; }
#aiot-zp .aiot-zp-merged-desc { font-size: calc(1.05 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-stale { margin: 0 auto calc(1.25 * var(--aiotk-rem)); max-width: calc(40 * var(--aiotk-rem)); padding: calc(.7 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); border: 1px solid var(--op-red); border-radius: var(--op-radius-sm); color: var(--op-red); background: var(--op-white); font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); font-weight: 600; text-align: center; }
#aiot-zp .aiot-zp-merged-card { padding: calc(1.5 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-merged-layout { display: grid; grid-template-columns: 1fr; gap: calc(1.5 * var(--aiotk-rem)); align-items: start; }
@container aiotk (min-width: 768px) { #aiot-zp .aiot-zp-merged-layout { grid-template-columns: 1fr 1.15fr; }}
#aiot-zp .aiot-zp-merged-canvas-wrap { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: calc(.75 * var(--aiotk-rem)); background: var(--op-paper-2); border: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-merged-info { display: flex; flex-direction: column; gap: calc(.85 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-merged-meta { display: flex; align-items: center; gap: calc(.5 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.86 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-merged-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
#aiot-zp .aiot-zp-merged-nav { display: flex; align-items: center; justify-content: space-between; padding: calc(.5 * var(--aiotk-rem)) calc(.65 * var(--aiotk-rem)); background: var(--op-paper-2); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); }
#aiot-zp .aiot-zp-download-btn { width: 100%; font-size: calc(1.02 * var(--aiotk-rem)); padding: calc(.85 * var(--aiotk-rem)); }













#aiot-zp .aiot-zp-tool-section.is-focus { position: fixed; inset: 0; z-index: 2147483000; overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(1.25 * var(--aiotk-rem)) calc(3 * var(--aiotk-rem)); border: 0; animation: aiot-zp-focus-in .18s ease-out; }
@keyframes aiot-zp-focus-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
#aiot-zp .aiot-zp-focus-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: calc(1 * var(--aiotk-rem)); margin: 0 0 calc(1.25 * var(--aiotk-rem)); padding: calc(.85 * var(--aiotk-rem)) 0; background: var(--op-paper-2); border-bottom: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-focus-label { margin-right: auto; font-family: var(--font-display); font-weight: 600; font-size: calc(1.05 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-focus-hint { font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-focus-hint kbd { padding: calc(.1 * var(--aiotk-rem)) calc(.4 * var(--aiotk-rem)); border: 1px solid var(--op-line-strong); border-bottom-width: 2px; border-radius: 3px; background: var(--op-white); color: var(--op-ink); font-family: var(--font-mono); }
#aiot-zp .is-focus .aiot-zp-tool-header, #aiot-zp .is-focus [data-act="focus-open"] { display: none; }
html.aiot-zp-no-scroll, html.aiot-zp-no-scroll body { overflow: hidden !important; }
@container aiotk (max-width: 640px) { #aiot-zp .aiot-zp-focus-hint { display: none; }}


#aiot-zp .aiot-zp-toast {
    position: fixed; left: 50%; bottom: calc(1.25 * var(--aiotk-rem)); z-index: 2147483001; max-width: min(calc(34 * var(--aiotk-rem)), calc(100vw - calc(2 * var(--aiotk-rem))));
    padding: calc(.8 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); border-radius: var(--op-radius); background: var(--op-ink); color: var(--op-paper); box-shadow: var(--op-pop);
    font-family: var(--font-mono); font-size: calc(.86 * var(--aiotk-rem)); line-height: 1.45; text-align: center;
    transform: translate(-50%, calc(1 * var(--aiotk-rem))); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#aiot-zp .aiot-zp-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
#aiot-zp .aiot-zp-toast.is-error { background: var(--op-red); color: #FFFFFF; }
#aiot-zp[data-theme="dark"] .aiot-zp-toast.is-error { color: #16181B; }
@media (prefers-color-scheme: dark) { #aiot-zp:not([data-theme="light"]) .aiot-zp-toast.is-error { color: #16181B; } }


#aiot-zp .aiot-zp-what-is { background: var(--op-paper); padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); border-bottom: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-what-is-grid { display: grid; gap: calc(2 * var(--aiotk-rem)); align-items: start; }
@container aiotk (min-width: 1024px) { #aiot-zp .aiot-zp-what-is-grid { grid-template-columns: .85fr 1.15fr; }}
#aiot-zp .aiot-zp-panel { background: var(--op-white); border-radius: var(--op-radius); padding: calc(2 * var(--aiotk-rem)); border: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-panel-head { display: flex; align-items: center; gap: calc(1 * var(--aiotk-rem)); margin-bottom: calc(1.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-icon-box { width: calc(2.75 * var(--aiotk-rem)); height: calc(2.75 * var(--aiotk-rem)); background: var(--op-paper-2); border-radius: var(--op-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--op-line); color: var(--op-ink); }
#aiot-zp .aiot-zp-icon-box svg { width: calc(1.3 * var(--aiotk-rem)); height: calc(1.3 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-panel-title { font-size: calc(1.3 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-panel p { color: var(--op-ink-70); margin-bottom: calc(1.3 * var(--aiotk-rem)); line-height: 1.7; font-size: calc(1.02 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-panel p:last-child { margin-bottom: 0; }
#aiot-zp .aiot-zp-feature-list { display: flex; flex-direction: column; gap: calc(1.5 * var(--aiotk-rem)); margin-top: calc(1.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-feature-item { display: flex; gap: calc(1 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-feature-item h4 { font-size: calc(.98 * var(--aiotk-rem)); line-height: 1.4; font-weight: 600; margin: 0 0 calc(.3 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-feature-item p { margin: 0; line-height: 1.6; font-size: calc(.98 * var(--aiotk-rem)); }
#aiot-zp .fi-cyan { color: var(--op-cyan); } #aiot-zp .fi-green { color: var(--op-green); } #aiot-zp .fi-magenta { color: var(--op-magenta); } #aiot-zp .fi-red { color: var(--op-red); } #aiot-zp .fi-yellow { color: var(--op-yellow); }


#aiot-zp .aiot-zp-usage-section { background: var(--op-paper-2); padding: calc(5.5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); border-bottom: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-bento-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: calc(1.25 * var(--aiotk-rem)); max-width: calc(74 * var(--aiotk-rem)); margin: 0 auto; }
#aiot-zp .aiot-zp-step-card { display: flex; align-items: flex-start; gap: calc(1.25 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); padding: calc(1.6 * var(--aiotk-rem)); transition: border-color .15s; }
#aiot-zp .aiot-zp-step-card:hover { border-color: var(--op-line-strong); }
#aiot-zp .aiot-zp-step-number { flex: 0 0 calc(2.6 * var(--aiotk-rem)); height: calc(2.6 * var(--aiotk-rem)); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--op-paper); background: var(--op-ink); font-family: var(--font-mono); font-size: calc(1.05 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-step-content { flex: 1; min-width: 0; }
#aiot-zp .aiot-zp-step-content h3 { display: flex; align-items: center; gap: calc(.55 * var(--aiotk-rem)); margin: 0 0 calc(.75 * var(--aiotk-rem)); font-size: calc(1.15 * var(--aiotk-rem)); line-height: 1.3; font-weight: 600; }
#aiot-zp .aiot-zp-step-content h3 svg { width: calc(1.2 * var(--aiotk-rem)); height: calc(1.2 * var(--aiotk-rem)); fill: none; stroke: var(--op-cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-step-content p { margin: 0 0 calc(1 * var(--aiotk-rem)); color: var(--op-ink-70); font-size: calc(.98 * var(--aiotk-rem)); line-height: 1.65; }
#aiot-zp .aiot-zp-tip { padding: calc(.65 * var(--aiotk-rem)) calc(.85 * var(--aiotk-rem)); border-radius: var(--op-radius-sm); font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); line-height: 1.5; font-weight: 400; border: 1px solid var(--op-line); background: var(--op-paper-2); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-step-list { display: grid; gap: calc(.6 * var(--aiotk-rem)); margin: calc(.5 * var(--aiotk-rem)) 0 0; padding: 0; list-style: none; }
#aiot-zp .aiot-zp-step-list li { position: relative; padding-left: calc(1 * var(--aiotk-rem)); color: var(--op-ink-70); font-size: calc(.95 * var(--aiotk-rem)); line-height: 1.55; }
#aiot-zp .aiot-zp-step-list li::before { content: ""; position: absolute; left: 0; top: calc(.55 * var(--aiotk-rem)); width: 6px; height: 6px; border-radius: 50%; background: var(--op-cyan); }
#aiot-zp .aiot-zp-tags { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--aiotk-rem)); margin: 0; padding: 0; list-style: none; }
#aiot-zp .aiot-zp-tags li { padding: calc(.4 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); border-radius: 999px; font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); font-weight: 600; border: 1px solid var(--op-line-strong); color: var(--op-ink-70); background: var(--op-white); }
@container aiotk (max-width: 680px) {
  #aiot-zp .aiot-zp-usage-section { padding: calc(3.5 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); }
  #aiot-zp .aiot-zp-bento-grid { grid-template-columns: 1fr; gap: calc(1 * var(--aiotk-rem)); }
  #aiot-zp .aiot-zp-step-card { padding: calc(1.25 * var(--aiotk-rem)); gap: calc(.95 * var(--aiotk-rem)); }
  #aiot-zp .aiot-zp-step-number { flex-basis: calc(2.3 * var(--aiotk-rem)); height: calc(2.3 * var(--aiotk-rem)); font-size: calc(.95 * var(--aiotk-rem)); }}


#aiot-zp .aiot-zp-compare-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper); }
#aiot-zp .aiot-zp-compare-grid { display: grid; grid-template-columns: 1fr; gap: calc(2 * var(--aiotk-rem)); max-width: 650px; margin: 0 auto; }
#aiot-zp .aiot-zp-compare-card { position: relative; display: flex; flex-direction: column; gap: calc(1 * var(--aiotk-rem)); padding: calc(1.5 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-compare-card--after { border: 1.5px solid var(--op-ink); }
#aiot-zp .aiot-zp-compare-badge { position: absolute; top: calc(-.75 * var(--aiotk-rem)); right: calc(2 * var(--aiotk-rem)); background: var(--op-ink); color: var(--op-paper); font-family: var(--font-mono); font-size: calc(.75 * var(--aiotk-rem)); font-weight: 600; padding: calc(.3 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); border-radius: 999px; }
#aiot-zp .aiot-zp-compare-status { font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); font-weight: 600; padding: calc(.25 * var(--aiotk-rem)) calc(.65 * var(--aiotk-rem)); border-radius: 999px; }
#aiot-zp .aiot-zp-compare-status--red { border: 1px solid var(--op-red); color: var(--op-red); }
#aiot-zp .aiot-zp-compare-status--green { border: 1px solid var(--op-green); color: var(--op-green); }
#aiot-zp .aiot-zp-compare-image-wrap { display: flex; align-items: center; justify-content: center; padding: calc(.5 * var(--aiotk-rem)); border-radius: var(--op-radius-sm); overflow: hidden; border: 1px solid var(--op-line); background: #FFFFFF; aspect-ratio: 600 / 340; }
#aiot-zp .aiot-zp-compare-image-wrap img { width: 100%; height: auto; display: block; object-fit: contain; }
#aiot-zp .aiot-zp-compare-card-desc { font-size: calc(.95 * var(--aiotk-rem)); color: var(--op-ink-70); text-align: center; }
#aiot-zp .aiot-zp-compare-footer { font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); color: var(--op-ink-70); text-align: center; margin-top: calc(1.5 * var(--aiotk-rem)); }


#aiot-zp .aiot-zp-usecases-section { background: var(--op-paper-2); padding: calc(5.5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); border-bottom: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-table-wrap { width: 100%; max-width: calc(74 * var(--aiotk-rem)); margin: 0 auto; border-radius: var(--op-radius); border: 1px solid var(--op-line); overflow: hidden; }
#aiot-zp .aiot-zp-table { width: 100%; border-collapse: collapse; background: var(--op-white); }
#aiot-zp .aiot-zp-table th { padding: calc(1 * var(--aiotk-rem)) calc(1.35 * var(--aiotk-rem)); background: var(--op-ink); color: var(--op-paper); text-align: left; font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-table td { padding: calc(1.1 * var(--aiotk-rem)) calc(1.35 * var(--aiotk-rem)); border-top: 1px solid var(--op-line); color: var(--op-ink-70); font-size: calc(.95 * var(--aiotk-rem)); line-height: 1.55; vertical-align: top; }
#aiot-zp .aiot-zp-table td:first-child { width: 22%; color: var(--op-ink); font-family: var(--font-mono); font-size: calc(.88 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-table td:nth-child(2) { width: 38%; }
#aiot-zp .aiot-zp-table td:last-child { font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-table code { padding: calc(.05 * var(--aiotk-rem)) calc(.35 * var(--aiotk-rem)); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); background: var(--op-paper-2); color: var(--op-ink); }
#aiot-zp .aiot-zp-table tbody tr:hover { background: var(--op-paper-2); }
@container aiotk (max-width: 860px) {
  #aiot-zp .aiot-zp-usecases-section { padding: calc(3.5 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); }
  #aiot-zp .aiot-zp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  #aiot-zp .aiot-zp-table, #aiot-zp .aiot-zp-table tbody, #aiot-zp .aiot-zp-table tr, #aiot-zp .aiot-zp-table td { display: block; width: 100% !important; }
  #aiot-zp .aiot-zp-table tr { padding: calc(1 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); border-top: 1px solid var(--op-line); }
  #aiot-zp .aiot-zp-table tr:first-child { border-top: 0; }
  #aiot-zp .aiot-zp-table td { padding: calc(.25 * var(--aiotk-rem)) 0; border: 0; }
  #aiot-zp .aiot-zp-table td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: calc(.74 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink-70); margin-bottom: calc(.1 * var(--aiotk-rem)); }
  #aiot-zp .aiot-zp-table td:first-child::before { display: none; }
  #aiot-zp .aiot-zp-table td:first-child { font-size: calc(.95 * var(--aiotk-rem)); margin-bottom: calc(.35 * var(--aiotk-rem)); }}



#aiot-zp .aiot-zp-ranges-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper-2); border-bottom: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-ranges-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.5 * var(--aiotk-rem)); }
@container aiotk (min-width: 768px) { #aiot-zp .aiot-zp-ranges-grid { grid-template-columns: repeat(2, 1fr); }}
#aiot-zp .aiot-zp-range-card { padding: calc(1.6 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-range-card h3 { font-family: var(--font-mono); font-size: calc(1 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-range-card p { color: var(--op-ink-70); line-height: 1.65; }
#aiot-zp .aiot-zp-code { padding: calc(.1 * var(--aiotk-rem)) calc(.5 * var(--aiotk-rem)); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); background: var(--op-paper-2); color: var(--op-ink); font-weight: 600; font-family: var(--font-mono); font-size: .9em; white-space: nowrap; }
#aiot-zp .aiot-zp-code--red { color: var(--op-red); }


#aiot-zp .aiot-zp-trouble-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper); }
#aiot-zp .aiot-zp-trouble { max-width: calc(76 * var(--aiotk-rem)); margin: 0 auto; background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); overflow: hidden; }
#aiot-zp .aiot-zp-trouble-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-trouble-row:nth-child(odd):not(.aiot-zp-trouble-head) { background: var(--op-paper-2); }
#aiot-zp .aiot-zp-trouble-head { border-top: 0; background: var(--op-ink); color: var(--op-paper); font-family: var(--font-mono); font-weight: 600; font-size: calc(.8 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-trouble-row > div { padding: calc(1.05 * var(--aiotk-rem)) calc(1.35 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-trouble-row h3 { display: flex; align-items: center; gap: calc(.5 * var(--aiotk-rem)); font-size: calc(.98 * var(--aiotk-rem)); line-height: 1.4; font-weight: 600; }
#aiot-zp .aiot-zp-trouble-row p { font-size: calc(.93 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-trouble-row a { color: var(--op-ink); border-bottom: 1px solid var(--op-line-strong); font-weight: 600; }
#aiot-zp .aiot-zp-trouble-row a:hover { border-color: var(--op-ink); text-decoration: none; }
#aiot-zp .aiot-zp-trouble-icon { width: calc(1.1 * var(--aiotk-rem)); height: calc(1.1 * var(--aiotk-rem)); color: var(--op-ink-70); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-trouble-row [data-label]::before { content: attr(data-label); display: none; font-family: var(--font-mono); font-size: calc(.74 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink-70); margin-bottom: calc(.15 * var(--aiotk-rem)); }
@container aiotk (max-width: 860px) {
  #aiot-zp .aiot-zp-trouble-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  #aiot-zp .aiot-zp-trouble-row { grid-template-columns: 1fr; padding: calc(.9 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); }
  #aiot-zp .aiot-zp-trouble-row:nth-child(2) { border-top: 0; }
  #aiot-zp .aiot-zp-trouble-row > div { padding: calc(.25 * var(--aiotk-rem)) 0; }
  #aiot-zp .aiot-zp-trouble-row [data-label]::before { display: block; }}


#aiot-zp .aiot-zp-practices-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper-2); }
#aiot-zp .aiot-zp-practices-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.25 * var(--aiotk-rem)); }
@container aiotk (min-width: 768px) { #aiot-zp .aiot-zp-practices-grid { grid-template-columns: repeat(2, 1fr); }}
#aiot-zp .aiot-zp-practice-card { display: flex; align-items: flex-start; gap: calc(.9 * var(--aiotk-rem)); padding: calc(1.4 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-check-icon { width: calc(1.3 * var(--aiotk-rem)); height: calc(1.3 * var(--aiotk-rem)); color: var(--op-cyan); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-practice-card h3 { font-size: calc(.98 * var(--aiotk-rem)); line-height: 1.4; font-weight: 600; margin: 0 0 calc(.45 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-practice-card p { color: var(--op-ink-70); font-size: calc(.93 * var(--aiotk-rem)); line-height: 1.6; }


#aiot-zp .aiot-zp-faq-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper); }
#aiot-zp .aiot-zp-faq-list { max-width: calc(50 * var(--aiotk-rem)); margin: 0 auto; display: flex; flex-direction: column; gap: calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-faq-item { background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); }
#aiot-zp .aiot-zp-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--aiotk-rem)); padding: calc(1.2 * var(--aiotk-rem)) calc(1.4 * var(--aiotk-rem)); cursor: pointer; }
#aiot-zp .aiot-zp-faq-item summary::-webkit-details-marker { display: none; }
#aiot-zp .aiot-zp-faq-item summary h3 { font-size: calc(1.02 * var(--aiotk-rem)); font-weight: 600; line-height: 1.4; }
#aiot-zp .aiot-zp-faq-item summary::after { content: "+"; flex: 0 0 auto; font-family: var(--font-mono); font-size: calc(1.25 * var(--aiotk-rem)); line-height: 1; color: var(--op-ink-70); transition: transform .2s; }
#aiot-zp .aiot-zp-faq-item[open] summary::after { transform: rotate(45deg); }
#aiot-zp .aiot-zp-faq-answer { padding: 0 calc(1.4 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-faq-answer p { color: var(--op-ink-70); line-height: 1.65; font-size: calc(.98 * var(--aiotk-rem)); }


#aiot-zp .aiot-zp-tutorial-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper-2); border-top: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-tutorial { max-width: calc(52 * var(--aiotk-rem)); margin: 0 auto; padding: calc(2 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); text-align: center; }
@container aiotk (min-width: 768px) { #aiot-zp .aiot-zp-tutorial { padding: calc(2.5 * var(--aiotk-rem)); }}
#aiot-zp .aiot-zp-tutorial h2 { font-size: calc(1.45 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(1 * var(--aiotk-rem)); line-height: 1.25; }
@container aiotk (min-width: 768px) { #aiot-zp .aiot-zp-tutorial h2 { font-size: calc(1.7 * var(--aiotk-rem)); }}
#aiot-zp .aiot-zp-tutorial-desc { color: var(--op-ink-70); font-size: calc(1.05 * var(--aiotk-rem)); line-height: 1.65; max-width: calc(40 * var(--aiotk-rem)); margin: 0 auto calc(2 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-tutorial-card { display: flex; flex-direction: column; gap: calc(.75 * var(--aiotk-rem)); padding: calc(1.5 * var(--aiotk-rem)); margin-bottom: calc(2 * var(--aiotk-rem)); text-align: left; background: var(--op-paper-2); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); }
#aiot-zp .aiot-zp-tutorial-meta { font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); color: var(--op-ink-70); font-weight: 600; }
#aiot-zp .aiot-zp-tutorial-card h3 { font-size: calc(1.05 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-tutorial-card p { color: var(--op-ink-70); line-height: 1.65; }
#aiot-zp .aiot-zp-tutorial-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(.55 * var(--aiotk-rem)); padding: calc(.8 * var(--aiotk-rem)) calc(1.6 * var(--aiotk-rem)); background: var(--op-ink); color: var(--op-paper); border: 1.5px solid var(--op-ink); border-radius: var(--op-radius-sm); font-family: var(--font-display); font-weight: 600; transition: background-color .15s, color .15s; }
#aiot-zp .aiot-zp-tutorial-btn:hover { background: transparent; color: var(--op-ink); text-decoration: none; }
#aiot-zp .aiot-zp-tutorial-author { font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); color: var(--op-ink-70); margin-top: calc(1.25 * var(--aiotk-rem)); }

@media (prefers-reduced-motion: reduce) {
  #aiot-zp *, #aiot-zp *::before, #aiot-zp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


#aiot-zp .aiot-zp-workspace { display: flex; flex-direction: column; gap: calc(1.25 * var(--aiotk-rem)); }
#aiot-zp fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }


#aiot-zp .aiot-zp-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.75 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); padding: calc(1 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-filebar-icon { width: calc(2.5 * var(--aiotk-rem)); height: calc(2.5 * var(--aiotk-rem)); flex: 0 0 calc(2.5 * var(--aiotk-rem)); display: flex; align-items: center; justify-content: center; border-radius: var(--op-radius-sm); background: var(--op-ink); color: var(--op-paper); }
#aiot-zp .aiot-zp-filebar-icon svg { width: calc(1.2 * var(--aiotk-rem)); height: calc(1.2 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-filebar-info { flex: 1 1 calc(14 * var(--aiotk-rem)); min-width: 0; }
#aiot-zp .aiot-zp-filebar-name { font-family: var(--font-mono); font-weight: 600; font-size: calc(.92 * var(--aiotk-rem)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aiot-zp .aiot-zp-filebar-meta { font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); color: var(--op-ink-70); margin-top: calc(.1 * var(--aiotk-rem)); }


#aiot-zp .aiot-zp-console { display: grid; grid-template-columns: 1fr; gap: calc(1.25 * var(--aiotk-rem)); padding: calc(1.25 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-step-label { display: block; width: 100%; margin: 0 0 calc(.75 * var(--aiotk-rem)); padding: 0 0 calc(.5 * var(--aiotk-rem)); border-bottom: 1px solid var(--op-line); font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink); }


#aiot-zp .aiot-zp-console .aiot-zp-range-hint { min-height: calc(3 * 1.45em); line-height: 1.45; }

#aiot-zp .aiot-zp-console-note { margin-top: calc(.65 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); line-height: 1.5; color: var(--op-ink-70); }


#aiot-zp .aiot-zp-statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.6 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); padding: calc(.7 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); border: 1px solid var(--op-line); border-radius: var(--op-radius); background: var(--op-paper); }
#aiot-zp .aiot-zp-change-count { flex: 1 1 calc(12 * var(--aiotk-rem)); min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: calc(1 * var(--aiotk-rem)); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiot-zp .aiot-zp-statusbar-actions { display: inline-flex; gap: calc(.5 * var(--aiotk-rem)); }


#aiot-zp .aiot-zp-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(.6 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-grid-title { font-size: calc(1.05 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-grid-note { font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-size-switch { display: inline-flex; padding: 3px; border: 1px solid var(--op-line-strong); border-radius: 999px; background: var(--op-white); }
#aiot-zp .aiot-zp-size-switch button { min-height: 32px; padding: calc(.25 * var(--aiotk-rem)) calc(.8 * var(--aiotk-rem)); border: 0; border-radius: 999px; background: transparent; color: var(--op-ink-70); font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); font-weight: 600; cursor: pointer; }
#aiot-zp .aiot-zp-size-switch button:hover { color: var(--op-ink); }
#aiot-zp .aiot-zp-size-switch button[aria-pressed="true"] { background: var(--op-ink); color: var(--op-paper); }


#aiot-zp .aiot-zp-page-grid { --min: 330px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--min), 100%), 1fr)); gap: calc(1 * var(--aiotk-rem)); margin: 0; padding: 0; list-style: none; }
#aiot-zp .aiot-zp-page-grid[data-size="small"] { --min: 190px; gap: calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-page-grid[data-size="large"] { --min: 500px; gap: calc(1.25 * var(--aiotk-rem)); }
@container aiotk (max-width: 520px) { #aiot-zp .aiot-zp-page-grid[data-size="small"] { --min: 140px; }}

#aiot-zp .aiot-zp-page { position: relative; display: flex; flex-direction: column; background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); transition: border-color .15s, box-shadow .15s; }
#aiot-zp .aiot-zp-page::before, #aiot-zp .aiot-zp-page::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; opacity: .55; z-index: 1; }
#aiot-zp .aiot-zp-page::before { top: 4px; left: 4px; border-top: 1.5px solid var(--op-ink); border-left: 1.5px solid var(--op-ink); }
#aiot-zp .aiot-zp-page::after { bottom: 4px; right: 4px; border-bottom: 1.5px solid var(--op-ink); border-right: 1.5px solid var(--op-ink); }

#aiot-zp .aiot-zp-page-view { position: relative; overflow: hidden; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; padding: calc(.75 * var(--aiotk-rem)); margin: 0; border: 0; border-bottom: 1px solid var(--op-line); background: var(--op-paper-2); cursor: zoom-in; border-radius: var(--op-radius-sm) var(--op-radius-sm) 0 0; }
#aiot-zp .aiot-zp-page-view canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
#aiot-zp .aiot-zp-zoom-hint { position: absolute; right: calc(.55 * var(--aiotk-rem)); bottom: calc(.55 * var(--aiotk-rem)); display: inline-flex; align-items: center; gap: calc(.3 * var(--aiotk-rem)); padding: calc(.25 * var(--aiotk-rem)) calc(.55 * var(--aiotk-rem)); border-radius: 999px; background: var(--op-ink); color: var(--op-paper); font-family: var(--font-mono); font-size: calc(.72 * var(--aiotk-rem)); font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
#aiot-zp .aiot-zp-zoom-hint svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
#aiot-zp .aiot-zp-page-view:hover .aiot-zp-zoom-hint, #aiot-zp .aiot-zp-page-view:focus-visible .aiot-zp-zoom-hint { opacity: 1; transform: none; }
@media (hover: none) { #aiot-zp .aiot-zp-zoom-hint { opacity: .92; transform: none; } }

#aiot-zp .aiot-zp-page-bar { display: flex; align-items: center; gap: calc(.5 * var(--aiotk-rem)); padding: calc(.6 * var(--aiotk-rem)) calc(.7 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-page-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(.1 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-page-num { font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink); }
#aiot-zp .aiot-zp-page-angle { font-family: var(--font-mono); font-size: calc(.74 * var(--aiotk-rem)); color: var(--op-ink-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiot-zp .aiot-zp-page-actions { display: inline-flex; gap: calc(.35 * var(--aiotk-rem)); flex: 0 0 auto; }
#aiot-zp .aiot-zp-page-grid[data-size="small"] .aiot-zp-page-bar { flex-wrap: wrap; padding: calc(.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-page-grid[data-size="small"] .aiot-zp-page-view { padding: calc(.45 * var(--aiotk-rem)); }


#aiot-zp .aiot-zp-viewer { width: min(1100px, calc(100vw - calc(1.5 * var(--aiotk-rem)))); max-width: none; height: calc(100dvh - calc(1.5 * var(--aiotk-rem))); max-height: none; margin: auto; padding: 0; border: 1px solid var(--op-line-strong); border-radius: var(--op-radius); background: var(--op-paper-2); color: var(--op-ink); box-shadow: var(--op-pop); overflow: hidden; }
#aiot-zp .aiot-zp-viewer[open] { display: flex; flex-direction: column; }
#aiot-zp .aiot-zp-viewer::backdrop { background: rgba(11,13,16,0.72); }
#aiot-zp .aiot-zp-viewer-head, #aiot-zp .aiot-zp-viewer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.5 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); padding: calc(.7 * var(--aiotk-rem)) calc(.9 * var(--aiotk-rem)); background: var(--op-white); }
#aiot-zp .aiot-zp-viewer-head { border-bottom: 1px solid var(--op-line); }
#aiot-zp .aiot-zp-viewer-foot { border-top: 1px solid var(--op-line); justify-content: center; }
#aiot-zp .aiot-zp-viewer-title { margin-right: auto; font-family: var(--font-display); font-size: calc(1.05 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-viewer-angle { font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-viewer-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; padding: calc(1 * var(--aiotk-rem)); overscroll-behavior: contain; }
#aiot-zp .aiot-zp-viewer-body canvas { display: block; margin: auto; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
#aiot-zp .aiot-zp-viewer-foot .aiot-zp-sep { width: 1px; height: 26px; background: var(--op-line); }
@media (max-width: 560px) {
    #aiot-zp .aiot-zp-viewer { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
    #aiot-zp .aiot-zp-viewer-body { padding: calc(.5 * var(--aiotk-rem)); }
    #aiot-zp .aiot-zp-viewer-foot .aiot-zp-btn-outline span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    #aiot-zp .aiot-zp-viewer-foot .aiot-zp-sep { display: none; }}

#aiot-zp .aiot-zp-save-btn { font-size: calc(1.05 * var(--aiotk-rem)); padding: calc(.9 * var(--aiotk-rem)) calc(2.6 * var(--aiotk-rem)); min-width: calc(14 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-name-label { display: block; font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); font-weight: 600; margin-bottom: calc(.35 * var(--aiotk-rem)); }



#aiot-zp .aiot-zp-viewer-head { flex-wrap: nowrap; }
#aiot-zp .aiot-zp-viewer-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aiot-zp .aiot-zp-viewer-head > span { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aiot-zp .aiot-zp-viewer-head > button { flex: 0 0 auto; }
@media (max-width: 420px) { #aiot-zp .aiot-zp-viewer-head > span { display: none; }}


#aiot-zp .aiot-zp-console { grid-template-columns: 1fr; }
@container aiotk (min-width: 900px) { #aiot-zp .aiot-zp-console { grid-template-columns: 1fr 1fr; gap: calc(1.75 * var(--aiotk-rem)); }}
#aiot-zp .aiot-zp-modes { display: flex; flex-direction: column; gap: calc(.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-mode { position: relative; display: flex; gap: calc(.7 * var(--aiotk-rem)); align-items: flex-start; padding: calc(.75 * var(--aiotk-rem)) calc(.85 * var(--aiotk-rem)); border: 1.5px solid var(--op-line-strong); border-radius: var(--op-radius-sm); background: var(--op-paper); cursor: pointer; transition: border-color .15s, background-color .15s; }
#aiot-zp .aiot-zp-mode:hover { border-color: var(--op-ink); }
#aiot-zp .aiot-zp-mode input { flex: 0 0 auto; width: 18px; height: 18px; margin: calc(.15 * var(--aiotk-rem)) 0 0; accent-color: var(--op-ink); }
#aiot-zp .aiot-zp-mode-body { display: flex; flex-direction: column; gap: calc(.15 * var(--aiotk-rem)); min-width: 0; }
#aiot-zp .aiot-zp-mode-body strong { font-family: var(--font-display); font-size: calc(1 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink); }
#aiot-zp .aiot-zp-mode-body span { font-size: calc(.9 * var(--aiotk-rem)); color: var(--op-ink-70); line-height: 1.45; }
#aiot-zp .aiot-zp-mode:has(input:checked) { border-color: var(--op-ink); background: var(--op-white); box-shadow: inset 4px 0 0 var(--op-cyan); }
#aiot-zp .aiot-zp-mode:has(input:focus-visible) { outline: 2px solid var(--op-cyan); outline-offset: 2px; }

#aiot-zp .aiot-zp-opt-text { font-size: calc(.95 * var(--aiotk-rem)); line-height: 1.55; color: var(--op-ink); margin-bottom: calc(.6 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-check { display: flex; align-items: flex-start; gap: calc(.55 * var(--aiotk-rem)); margin: calc(.2 * var(--aiotk-rem)) 0 calc(.5 * var(--aiotk-rem)); font-size: calc(.92 * var(--aiotk-rem)); line-height: 1.45; cursor: pointer; }
#aiot-zp .aiot-zp-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: calc(.1 * var(--aiotk-rem)) 0 0; accent-color: var(--op-ink); }
#aiot-zp .aiot-zp-controls-panel .aiot-zp-console-note a { text-decoration: underline; text-underline-offset: 3px; }

#aiot-zp .aiot-zp-btn-outline[aria-pressed="true"] { background: var(--op-ink); color: var(--op-paper); border-color: var(--op-ink); }

@container aiotk (max-width: 600px) {
    #aiot-zp .aiot-zp-change-count { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 2.8em; line-height: 1.4; }}
#aiot-zp .aiot-zp-pills { display: flex; flex-wrap: wrap; gap: calc(.45 * var(--aiotk-rem)); margin-bottom: calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-pill { position: relative; }
#aiot-zp .aiot-zp-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#aiot-zp .aiot-zp-pill label { display: inline-flex; align-items: center; min-height: 36px; padding: calc(.35 * var(--aiotk-rem)) calc(.85 * var(--aiotk-rem)); border: 1.5px solid var(--op-line-strong); border-radius: 999px; background: var(--op-paper); font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
#aiot-zp .aiot-zp-pill label:hover { border-color: var(--op-ink); }
#aiot-zp .aiot-zp-pill input:checked + label { background: var(--op-ink); border-color: var(--op-ink); color: var(--op-paper); }
#aiot-zp .aiot-zp-pill input:focus-visible + label { outline: 2px solid var(--op-cyan); outline-offset: 2px; }


#aiot-zp .aiot-zp-console { grid-template-columns: 1fr; }
@container aiotk (min-width: 900px) { #aiot-zp .aiot-zp-console { grid-template-columns: 1.15fr 1fr; }}

#aiot-zp .aiot-zp-controls-panel { gap: calc(.6 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(.35 * var(--aiotk-rem)) calc(.9 * var(--aiotk-rem)); width: min(560px, 100%); visibility: hidden; }
#aiot-zp .aiot-zp-progress.is-on { visibility: visible; }
#aiot-zp .aiot-zp-progress-track { grid-column: 1; height: 8px; border-radius: 999px; background: var(--op-paper-2); border: 1px solid var(--op-line); overflow: hidden; }
#aiot-zp .aiot-zp-progress-track span { display: block; height: 100%; width: 0; background: var(--op-ink); transition: width .2s; }
#aiot-zp .aiot-zp-progress-text { grid-column: 1; font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); color: var(--op-ink-70); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiot-zp .aiot-zp-cancel { grid-column: 2; grid-row: 1 / span 2; }

#aiot-zp .aiot-zp-grid-tools { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-size-switch button:disabled { opacity: .45; cursor: not-allowed; }
#aiot-zp .aiot-zp-page-tag { font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-page-grid.is-after .aiot-zp-page { border-color: var(--op-cyan); }
#aiot-zp .aiot-zp-page-grid.is-after .aiot-zp-page-tag { color: var(--op-accent-text); font-weight: 600; }
#aiot-zp .aiot-zp-viewer-head .aiot-zp-view-switch { flex: 0 0 auto; }
@media (max-width: 560px) { #aiot-zp .aiot-zp-viewer-head .aiot-zp-view-switch button { padding: calc(.25 * var(--aiotk-rem)) calc(.55 * var(--aiotk-rem)); }}

#aiot-zp .aiot-zp-savings { display: flex; flex-direction: column; gap: calc(.15 * var(--aiotk-rem)); padding: calc(.85 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); border-radius: var(--op-radius-sm); background: var(--op-ink); color: var(--op-paper); }
#aiot-zp .aiot-zp-savings strong { font-family: var(--font-display); font-size: calc(1.6 * var(--aiotk-rem)); line-height: 1.15; }
#aiot-zp .aiot-zp-savings span { font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-savings.is-worse { background: var(--op-paper); color: var(--op-ink); border: 1.5px solid var(--op-red); }
#aiot-zp .aiot-zp-savings.is-worse strong { color: var(--op-red); }
#aiot-zp .aiot-zp-merged-info .aiot-zp-btn-outline { justify-content: center; }

@media (max-width: 560px) {
    #aiot-zp .aiot-zp-viewer-head { flex-wrap: wrap; }
    #aiot-zp .aiot-zp-viewer-head .aiot-zp-viewer-title { order: 1; flex: 1 1 calc(100% - calc(3.5 * var(--aiotk-rem))); }
    #aiot-zp .aiot-zp-viewer-head [data-act="viewer-close"] { order: 2; }
    #aiot-zp .aiot-zp-viewer-head .aiot-zp-view-switch { order: 3; }
    #aiot-zp .aiot-zp-viewer-head [data-act="viewer-fit"] { order: 4; margin-left: auto; }}


#aiot-zp .aiot-zp-fix-list { display: flex; flex-direction: column; gap: calc(.8 * var(--aiotk-rem)); margin: 0; padding: 0; list-style: none; }
#aiot-zp .aiot-zp-fix-list li { display: grid; grid-template-columns: calc(1.3 * var(--aiotk-rem)) 1fr; gap: calc(.6 * var(--aiotk-rem)); color: var(--op-ink-70); line-height: 1.6; }
#aiot-zp .aiot-zp-fix-list svg { width: calc(1.2 * var(--aiotk-rem)); height: calc(1.2 * var(--aiotk-rem)); margin-top: calc(.2 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-fix-list.is-good svg { color: var(--op-green); }
#aiot-zp .aiot-zp-fix-list.is-limit svg { color: var(--op-red); }
#aiot-zp .aiot-zp-what-is-grid { grid-template-columns: 1fr; }
@container aiotk (min-width: 900px) { #aiot-zp .aiot-zp-what-is-grid { grid-template-columns: 1fr 1fr; }}


#aiot-zp .aiot-zp-page.is-out .aiot-zp-page-view canvas { opacity: .55; }
#aiot-zp .aiot-zp-page.is-in { border-color: var(--op-cyan); }
#aiot-zp .aiot-zp-page.is-in .aiot-zp-page-tag { color: var(--op-accent-text); font-weight: 600; }
#aiot-zp .aiot-zp-page-grid.is-before .aiot-zp-page.is-in { border-color: var(--op-line); }
#aiot-zp .aiot-zp-page-grid.is-before .aiot-zp-page.is-in .aiot-zp-page-tag { color: var(--op-ink-70); font-weight: 400; }


#aiot-zp .aiot-zp-range-card-head, #aiot-zp .aiot-zp-compare-card-header { display: flex; align-items: center; justify-content: space-between; gap: calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-range-card-head { justify-content: flex-start; margin-bottom: calc(.85 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-compare-card-title { font-family: var(--font-mono); font-size: calc(.9 * var(--aiotk-rem)); font-weight: 600; }
@container aiotk (min-width: 900px) {
    #aiot-zp .aiot-zp-compare-grid { grid-template-columns: 1fr 1fr; max-width: 980px; }}
#aiot-zp .aiot-zp-ranges-grid { grid-template-columns: 1fr; }
@container aiotk (min-width: 768px) { #aiot-zp .aiot-zp-ranges-grid { grid-template-columns: repeat(2, 1fr); }}
@container aiotk (min-width: 1100px) { #aiot-zp .aiot-zp-ranges-grid { grid-template-columns: repeat(3, 1fr); }}


#aiot-zp .aiot-zp-viewer-body.is-busy canvas { opacity: .6; transition: opacity .15s; }


#aiot-zp .aiot-zp-change-count { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 2.8em; line-height: 1.4; }
#aiot-zp .aiot-zp-change-count.is-error { color: var(--op-red); }


#aiot-zp .aiot-zp-viewer-body canvas { flex: 0 0 auto; max-width: none; }


#aiot-zp button { box-shadow: none; text-transform: none; letter-spacing: normal; }


#aiot-zp button { box-shadow: none; text-transform: none; letter-spacing: normal; }
#aiot-zp [hidden] { display: none !important; }
#aiot-zp .aiot-zp-workspace { scroll-margin-top: calc(6 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-page-tag { font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); color: var(--op-ink-70); overflow-wrap: anywhere; }
#aiot-zp .aiot-zp-grid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.6 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-grid-tools .aiot-zp-btn-outline { min-height: 44px; }
#aiot-zp .aiot-zp-field-note { margin: 0; font-size: calc(.86 * var(--aiotk-rem)); line-height: 1.45; color: var(--op-ink-70); }
#aiot-zp .aiot-zp-field-warn { margin: 0; font-size: calc(.86 * var(--aiotk-rem)); line-height: 1.45; color: var(--op-red); font-weight: 600; }
#aiot-zp .aiot-zp-field-warn:empty { display: none; }
#aiot-zp .aiot-zp-btn-outline:disabled, #aiot-zp .aiot-zp-btn-primary:disabled { opacity: .5; cursor: not-allowed; }


#aiot-zp .aiot-zp-filebar-actions { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--aiotk-rem)); justify-content: flex-end; }
#aiot-zp .aiot-zp-filebar-actions svg { width: calc(1 * var(--aiotk-rem)); height: calc(1 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; }
#aiot-zp .aiot-zp-filebar-meta { white-space: normal; }


#aiot-zp .aiot-zp-card { min-width: 0; padding: calc(1 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(.2 * var(--aiotk-rem)) calc(.8 * var(--aiotk-rem)); margin: 0; }
#aiot-zp .aiot-zp-card-title { margin: 0; font-size: calc(1.05 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-card-count { font-family: var(--font-mono); font-size: calc(.74 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-field { display: flex; flex-direction: column; gap: calc(.35 * var(--aiotk-rem)); min-width: 0; margin: 0; }
#aiot-zp .aiot-zp-field > label { margin: 0; font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink); }
#aiot-zp .aiot-zp-field select, #aiot-zp .aiot-zp-field input[type="text"] { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: calc(.45 * var(--aiotk-rem)) calc(.7 * var(--aiotk-rem)); background: var(--op-paper); color: var(--op-ink); border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm); box-shadow: none; font-family: var(--font-body); font-size: calc(1 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-field select:focus, #aiot-zp .aiot-zp-field input[type="text"]:focus { outline: 2px solid var(--op-cyan); outline-offset: 1px; }
#aiot-zp .aiot-zp-field select:disabled { opacity: .55; }
#aiot-zp .aiot-zp-field input[aria-invalid="true"] { border-color: var(--op-red); }
#aiot-zp .aiot-zp-field input[type="range"] { width: 100%; margin: 0; accent-color: var(--op-ink); }
#aiot-zp .aiot-zp-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-inline { display: flex; align-items: center; gap: calc(.55 * var(--aiotk-rem)); margin: 0; font-size: calc(.95 * var(--aiotk-rem)); cursor: pointer; }
#aiot-zp .aiot-zp-inline input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--op-ink); }
#aiot-zp .aiot-zp-inline:has(input:disabled) { opacity: .55; cursor: not-allowed; }


#aiot-zp .aiot-zp-page-view img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
#aiot-zp .aiot-zp-page.is-ghost { opacity: .45; border-style: dashed; }
#aiot-zp .aiot-zp-page-actions .aiot-zp-icon-btn { width: 40px; height: 40px; }
#aiot-zp .aiot-zp-drag { cursor: grab; touch-action: none; }
#aiot-zp .aiot-zp-drag:active { cursor: grabbing; }
#aiot-zp .aiot-zp-drag svg circle { fill: currentColor; stroke: none; }
#aiot-zp .aiot-zp-tool-section.is-over .aiot-zp-page-grid { outline: 2px dashed var(--op-ink); outline-offset: 6px; }
#aiot-zp .aiot-zp-viewer-body canvas { flex: 0 0 auto; max-width: none; }


#aiot-zp .aiot-zp-what-is-grid { grid-template-columns: 1fr; }
@container aiotk (min-width: 900px) { #aiot-zp .aiot-zp-what-is-grid { grid-template-columns: 1fr 1fr; }}
#aiot-zp .aiot-zp-ranges-grid { grid-template-columns: 1fr; }
@container aiotk (min-width: 768px) { #aiot-zp .aiot-zp-ranges-grid { grid-template-columns: repeat(2, 1fr); }}
@container aiotk (min-width: 1100px) { #aiot-zp .aiot-zp-ranges-grid { grid-template-columns: repeat(3, 1fr); }}
#aiot-zp .aiot-zp-range-card-head { display: flex; align-items: center; gap: calc(.75 * var(--aiotk-rem)); margin-bottom: calc(.85 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-tutorial-card-head { display: flex; align-items: center; gap: calc(.85 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-fix-list a { text-decoration: underline; text-underline-offset: 3px; }


#aiot-zp .aiot-zp-alert { margin: calc(1 * var(--aiotk-rem)) 0 0; padding: calc(.8 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); border: 1px solid var(--op-line); border-left: 4px solid var(--op-red); border-radius: var(--op-radius-sm); background: var(--op-white); font-size: calc(.95 * var(--aiotk-rem)); line-height: 1.5; }

#aiot-zp .aiot-zp-lock { margin: calc(1 * var(--aiotk-rem)) 0 0; padding: calc(1 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-left: 4px solid var(--op-yellow); border-radius: var(--op-radius); }
#aiot-zp .aiot-zp-lock.is-open { border-left-color: var(--op-green); }
#aiot-zp .aiot-zp-lock-head { display: flex; gap: calc(.85 * var(--aiotk-rem)); align-items: flex-start; }
#aiot-zp .aiot-zp-lock-icon { flex: 0 0 calc(2.5 * var(--aiotk-rem)); width: calc(2.5 * var(--aiotk-rem)); height: calc(2.5 * var(--aiotk-rem)); display: flex; align-items: center; justify-content: center; border-radius: var(--op-radius-sm); background: var(--op-ink); color: var(--op-paper); }
#aiot-zp .aiot-zp-lock-icon svg { width: calc(1.2 * var(--aiotk-rem)); height: calc(1.2 * var(--aiotk-rem)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-lock .aiot-zp-i-open, #aiot-zp .aiot-zp-lock.is-open .aiot-zp-i-locked { display: none; }
#aiot-zp .aiot-zp-lock.is-open .aiot-zp-i-open { display: block; }
#aiot-zp .aiot-zp-lock-title { margin: 0 0 calc(.25 * var(--aiotk-rem)); font-size: calc(1.08 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-lock-info { margin: 0; font-size: calc(.95 * var(--aiotk-rem)); line-height: 1.5; color: var(--op-ink-70); }
#aiot-zp .aiot-zp-lock-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(.6 * var(--aiotk-rem)); margin: calc(.9 * var(--aiotk-rem)) 0 0; }
#aiot-zp .aiot-zp-pw-field { flex: 1 1 260px; max-width: calc(26 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-pw-row { display: flex; gap: calc(.4 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-pw-row input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 44px; margin: 0; padding: calc(.45 * var(--aiotk-rem)) calc(.7 * var(--aiotk-rem)); background: var(--op-paper); color: var(--op-ink); border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm); box-shadow: none; font-family: var(--font-mono); font-size: calc(1 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-pw-row input:focus { outline: 2px solid var(--op-cyan); outline-offset: 1px; }
#aiot-zp .aiot-zp-pw-row input[aria-invalid="true"] { border-color: var(--op-red); }
#aiot-zp .aiot-zp-pw-eye { width: 44px; height: 44px; flex: 0 0 44px; }
#aiot-zp .aiot-zp-pw-eye[aria-pressed="true"] { background: var(--op-ink); color: var(--op-paper); }
#aiot-zp .aiot-zp-lock-form .aiot-zp-btn-primary { min-height: 44px; }
#aiot-zp .aiot-zp-pw-msg { margin: calc(.6 * var(--aiotk-rem)) 0 0; min-height: 2.8em; font-size: calc(.9 * var(--aiotk-rem)); line-height: 1.4; color: var(--op-ink-70); }
#aiot-zp .aiot-zp-lock.is-open .aiot-zp-pw-msg { min-height: 0; }
#aiot-zp .aiot-zp-pw-msg.is-error { color: var(--op-red); font-weight: 600; }

#aiot-zp .aiot-zp-grid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: calc(.6 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-pick-group { display: flex; flex-wrap: wrap; gap: calc(.35 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-chip { min-height: 36px; margin: 0; padding: calc(.25 * var(--aiotk-rem)) calc(.75 * var(--aiotk-rem)); background: var(--op-white); color: var(--op-ink); border: 1px solid var(--op-line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); font-weight: 600; cursor: pointer; }
#aiot-zp .aiot-zp-chip:hover { border-color: var(--op-ink); background: var(--op-white); color: var(--op-ink); }
#aiot-zp .aiot-zp-chip:focus-visible { outline: 2px solid var(--op-cyan); outline-offset: 2px; }
#aiot-zp .aiot-zp-include { display: flex; align-items: center; gap: calc(.5 * var(--aiotk-rem)); margin: 0; cursor: pointer; min-width: 0; }
#aiot-zp .aiot-zp-include input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--op-ink); }
#aiot-zp .aiot-zp-page-bar { flex-wrap: wrap; }
#aiot-zp .aiot-zp-name { margin: 0; padding: 0 calc(.75 * var(--aiotk-rem)); font-family: var(--font-display); font-weight: 600; font-size: calc(.95 * var(--aiotk-rem)); color: var(--op-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiot-zp .aiot-zp-path { margin: calc(.1 * var(--aiotk-rem)) 0 0; padding: 0 calc(.75 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.72 * var(--aiotk-rem)); color: var(--op-ink-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#aiot-zp .aiot-zp-tag { margin: calc(.35 * var(--aiotk-rem)) 0 0; padding: 0 calc(.75 * var(--aiotk-rem)) calc(.8 * var(--aiotk-rem)); line-height: 1.45; }
#aiot-zp .aiot-zp-tag.is-bad { color: var(--op-red); font-weight: 600; }
#aiot-zp .aiot-zp-page.is-out .aiot-zp-page-view canvas, #aiot-zp .aiot-zp-page.is-out .aiot-zp-ficon svg { opacity: .45; }
#aiot-zp .aiot-zp-box { cursor: default; }
#aiot-zp .aiot-zp-ficon { display: flex; flex-direction: column; align-items: center; gap: calc(.5 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-zp .aiot-zp-ficon svg { width: calc(3 * var(--aiotk-rem)); height: calc(3 * var(--aiotk-rem)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-ficon span { font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); font-weight: 600; }
#aiot-zp .aiot-zp-ficon.is-locked { color: var(--op-ink); }
#aiot-zp .aiot-zp-ficon.is-bad { color: var(--op-red); }
#aiot-zp .aiot-zp-page-grid[data-size="small"] .aiot-zp-ficon svg { width: calc(2 * var(--aiotk-rem)); height: calc(2 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-page-view canvas { width: auto; height: auto; max-width: 100%; max-height: 100%; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
#aiot-zp .aiot-zp-page.is-ghost { opacity: .45; border-style: dashed; }

#aiot-zp .aiot-zp-settings { display: flex; flex-direction: column; gap: calc(.85 * var(--aiotk-rem)); margin: calc(1.5 * var(--aiotk-rem)) 0 calc(1.25 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(.75 * var(--aiotk-rem)); }
@container aiotk (max-width: 760px) { #aiot-zp .aiot-zp-settings-grid { grid-template-columns: minmax(0, 1fr); }}

#aiot-zp .aiot-zp-plan { margin: 0; height: 2.9em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: calc(.95 * var(--aiotk-rem)); line-height: 1.45; color: var(--op-ink); }
#aiot-zp .aiot-zp-plan.is-error { color: var(--op-red); font-weight: 600; }
@container aiotk (max-width: 520px) { #aiot-zp .aiot-zp-plan { height: 4.35em; -webkit-line-clamp: 3; line-clamp: 3; }}
#aiot-zp .aiot-zp-settings .aiot-zp-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: auto; gap: calc(.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-settings .aiot-zp-actions button { min-height: 44px; }
#aiot-zp .aiot-zp-settings .aiot-zp-progress { width: 100%; }
@container aiotk (max-width: 520px) { #aiot-zp .aiot-zp-settings .aiot-zp-actions button { flex: 1 1 100%; justify-content: center; }}

#aiot-zp .aiot-zp-result { margin: 0 0 calc(1.75 * var(--aiotk-rem)); display: flex; flex-direction: column; gap: calc(.85 * var(--aiotk-rem)); border-left: 4px solid var(--op-green); scroll-margin-top: calc(6 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-result-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(.75 * var(--aiotk-rem)) calc(1.5 * var(--aiotk-rem)); }
#aiot-zp .aiot-zp-result-head .aiot-zp-btn-primary { min-height: 44px; }
#aiot-zp .aiot-zp-result-meta { margin: calc(.25 * var(--aiotk-rem)) 0 0; font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); line-height: 1.5; color: var(--op-ink-70); }
#aiot-zp .aiot-zp-result .aiot-zp-stale { margin: 0; max-width: none; text-align: left; }
#aiot-zp .aiot-zp-result .aiot-zp-grid-head { margin-top: calc(.25 * var(--aiotk-rem)); }

#aiot-zp .aiot-zp-support { width: 100%; border-collapse: collapse; }
#aiot-zp .aiot-zp-fix-list { display: flex; flex-direction: column; gap: calc(.8 * var(--aiotk-rem)); margin: 0; padding: 0; list-style: none; }
#aiot-zp .aiot-zp-fix-list li { display: grid; grid-template-columns: calc(1.3 * var(--aiotk-rem)) 1fr; gap: calc(.6 * var(--aiotk-rem)); color: var(--op-ink-70); line-height: 1.6; }
#aiot-zp .aiot-zp-fix-list svg { width: calc(1.2 * var(--aiotk-rem)); height: calc(1.2 * var(--aiotk-rem)); margin-top: calc(.2 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-zp .aiot-zp-fix-list.is-good svg { color: var(--op-green); }
#aiot-zp .aiot-zp-fix-list.is-limit svg { color: var(--op-red); }
#aiot-zp .aiot-zp-trouble a { text-decoration: underline; text-underline-offset: 3px; }


@container aiotk (min-width: 1024px) { #aiot-zp .aiot-zp-bento-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
@container aiotk (min-width: 681px) and (max-width: 1023px) { #aiot-zp .aiot-zp-bento-grid:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); max-width: calc(44 * var(--aiotk-rem)); }}