#aiot-mp{--aiotk-rem:16px;word-break:normal;overflow-wrap:normal;hyphens:manual;text-align:left;}
#aiot-mp :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-mp :where(button,input,select,textarea){box-shadow:none;min-height:0;line-height:normal;}
#aiot-mp :where(ul,ol){margin:0;padding:0;}
#aiot-mp :where(legend){display:block;}
#aiot-mp .aiot-mp-tool-section{container:aiotk / inline-size;}


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

#aiot-mp {
    --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-mp[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-mp: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-mp h1, #aiot-mp h2, #aiot-mp h3, #aiot-mp h4 { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--op-ink); }
#aiot-mp :where(h1, h2, h3, h4, p, ol, ul, figure) { margin: 0; }
#aiot-mp :where(button, input, select) { font-family: inherit; }
#aiot-mp img { max-width: 100%; height: auto; }
#aiot-mp strong { font-weight: 600; }
#aiot-mp a { color: inherit; text-decoration: none; }
#aiot-mp a:not(.aiot-mp-btn):hover { text-decoration: underline; text-underline-offset: 3px; }
#aiot-mp svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
#aiot-mp button svg { pointer-events: none; }
#aiot-mp [hidden] { display: none !important; }
#aiot-mp .aiot-mp-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-mp :focus-visible { outline: 2px solid var(--op-cyan); outline-offset: 2px; }
#aiot-mp code { font-family: var(--font-mono); }

@keyframes aiot-mp-spin { to { transform: rotate(360deg); } }
#aiot-mp .aiot-mp-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-mp-spin .85s linear infinite;
}

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


#aiot-mp .aiot-mp-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-mp .aiot-mp-hero::before { content: ""; position: absolute; inset: 0; background: var(--h-bg); opacity: .88; }
#aiot-mp .aiot-mp-hero h1 { color: var(--h-fg); }
@container aiotk (min-width: 640px) { #aiot-mp .aiot-mp-hero { padding-top: calc(3 * var(--aiotk-rem)); padding-bottom: calc(5.5 * var(--aiotk-rem)); }}
#aiot-mp [id] { scroll-margin-top: calc(6 * var(--aiotk-rem)); }

#aiot-mp .aiot-mp-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-mp .aiot-mp-hero-content { padding: 0 calc(1.75 * var(--aiotk-rem)); }}

#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-breadcrumb li { margin: 0; padding: 0; }
#aiot-mp .aiot-mp-breadcrumb a { color: var(--h-muted); }
#aiot-mp .aiot-mp-breadcrumb a:hover { color: var(--h-fg); }
#aiot-mp .aiot-mp-breadcrumb [aria-current] { color: var(--h-fg); font-weight: 600; }


#aiot-mp .aiot-mp-theme-switch { display: inline-flex; padding: 3px; border: 1px solid var(--h-border); border-radius: 999px; background: rgba(245,243,236,0.06); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-theme-switch button:hover { color: var(--h-fg); }
#aiot-mp .aiot-mp-theme-switch button[aria-pressed="true"] { background: var(--h-fg); color: var(--h-bg); }
#aiot-mp .aiot-mp-theme-switch svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-mp .aiot-mp-hero :focus-visible { outline-color: var(--h-accent); }

#aiot-mp .aiot-mp-hero-text { max-width: calc(46 * var(--aiotk-rem)); margin: 0 auto; text-align: center; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-hero-title { font-size: calc(2.6 * var(--aiotk-rem)); }}
@container aiotk (min-width: 1024px) { #aiot-mp .aiot-mp-hero-title { font-size: calc(3.4 * var(--aiotk-rem)); }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-hero-subtitle { font-size: calc(1.3 * var(--aiotk-rem)); }}
@container aiotk (min-width: 1024px) { #aiot-mp .aiot-mp-hero-subtitle { font-size: calc(1.5 * var(--aiotk-rem)); }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-hero-desc { font-size: calc(1.15 * var(--aiotk-rem)); }}

#aiot-mp .aiot-mp-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-mp .aiot-mp-hero-actions { flex-direction: row; padding: 0; }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-btn-hero { width: auto; }}
#aiot-mp .aiot-mp-btn-hero--solid { background: var(--h-fg); color: var(--h-bg); border: 1.5px solid var(--h-fg); }
#aiot-mp .aiot-mp-btn-hero--solid:hover { background: transparent; color: var(--h-fg); }
#aiot-mp .aiot-mp-btn-hero--ghost { background: transparent; color: var(--h-fg); border: 1.5px solid var(--h-border); }
#aiot-mp .aiot-mp-btn-hero--ghost:hover { border-color: var(--h-fg); background: rgba(245,243,236,0.12); text-decoration: none; }
#aiot-mp .aiot-mp-btn-hero svg { width: calc(1 * var(--aiotk-rem)); height: calc(1 * var(--aiotk-rem)); stroke: currentColor; fill: none; }

#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-pill-icon { width: calc(.9 * var(--aiotk-rem)); height: calc(.9 * var(--aiotk-rem)); color: var(--h-accent); stroke: currentColor; fill: none; }


#aiot-mp .aiot-mp-container { max-width: calc(76 * var(--aiotk-rem)); margin: 0 auto; width: 100%; }
#aiot-mp .aiot-mp-section-head { text-align: center; margin-bottom: calc(3 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-section-title { font-size: calc(2.3 * var(--aiotk-rem)); }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-eyebrow svg { width: calc(.95 * var(--aiotk-rem)); height: calc(.95 * var(--aiotk-rem)); color: var(--op-cyan); stroke: currentColor; fill: none; }
#aiot-mp .t-cyan { color: var(--op-accent-text); }
#aiot-mp .t-magenta { color: var(--op-magenta); }
#aiot-mp .t-red { color: var(--op-red); }


#aiot-mp .aiot-mp-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-mp .aiot-mp-tool-header { text-align: center; margin-bottom: calc(2 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-byline span { white-space: nowrap; }
#aiot-mp .aiot-mp-byline a { color: var(--op-ink); border-bottom: 1px solid var(--op-line-strong); font-weight: 600; }
#aiot-mp .aiot-mp-byline a:hover { border-color: var(--op-ink); text-decoration: none; }
#aiot-mp .aiot-mp-tool-title { font-size: calc(1.8 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(.75 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-tool-desc { font-size: calc(1.08 * var(--aiotk-rem)); color: var(--op-ink-70); }

#aiot-mp .aiot-mp-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-mp .aiot-mp-toolbar-note { font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-btn-outline:hover { background: var(--op-ink); color: var(--op-paper); }
#aiot-mp .aiot-mp-btn-outline svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

#aiot-mp .aiot-mp-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-mp .aiot-mp-drag-area.is-over { border-color: var(--op-ink); background: var(--op-paper); }
#aiot-mp .aiot-mp-upload-icon { color: var(--op-ink-50); margin-bottom: calc(.9 * var(--aiotk-rem)); display: flex; justify-content: center; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-upload-title { font-size: calc(1.25 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(.4 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-btn-primary:hover:not(:disabled) { background: transparent; color: var(--op-ink); }
#aiot-mp .aiot-mp-btn-primary:disabled { opacity: .55; cursor: not-allowed; }
#aiot-mp .aiot-mp-btn-primary svg { width: calc(1 * var(--aiotk-rem)); height: calc(1 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; }

#aiot-mp .aiot-mp-sort-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(.6 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); max-width: calc(30 * var(--aiotk-rem)); margin: 0 auto calc(1.75 * var(--aiotk-rem)); padding: calc(.85 * 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-mp .aiot-mp-sort-label { font-family: var(--font-mono); font-weight: 600; font-size: calc(.85 * var(--aiotk-rem)); display: inline-flex; align-items: center; gap: calc(.45 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-sort-label svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
#aiot-mp .aiot-mp-sort-select { flex: 1 1 calc(12 * var(--aiotk-rem)); min-height: 38px; padding: calc(.5 * var(--aiotk-rem)) calc(.65 * var(--aiotk-rem)); border: 1px solid var(--op-line-strong); border-radius: var(--op-radius-sm); background: var(--op-white); font-family: var(--font-mono); font-size: calc(.85 * var(--aiotk-rem)); color: var(--op-ink); }

#aiot-mp .aiot-mp-pdf-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.25 * var(--aiotk-rem)); margin-bottom: calc(1.75 * var(--aiotk-rem)); }
@container aiotk (min-width: 700px) { #aiot-mp .aiot-mp-pdf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@container aiotk (min-width: 1100px) { #aiot-mp .aiot-mp-pdf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}


#aiot-mp .aiot-mp-card { position: relative; display: flex; flex-direction: column; gap: calc(.85 * var(--aiotk-rem)); padding: calc(.9 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); transition: border-color .15s, box-shadow .15s; }
#aiot-mp .aiot-mp-card::before, #aiot-mp .aiot-mp-card::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; opacity: .55; }
#aiot-mp .aiot-mp-card::before { top: 4px; left: 4px; border-top: 1.5px solid var(--op-ink); border-left: 1.5px solid var(--op-ink); }
#aiot-mp .aiot-mp-card::after { bottom: 4px; right: 4px; border-bottom: 1.5px solid var(--op-ink); border-right: 1.5px solid var(--op-ink); }
#aiot-mp .aiot-mp-card:hover { border-color: var(--op-line-strong); }
#aiot-mp .aiot-mp-card.is-invalid { border-color: var(--op-red); }

#aiot-mp .aiot-mp-card-head { display: flex; align-items: center; gap: calc(.5 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-card-num { font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); font-weight: 600; padding: calc(.18 * var(--aiotk-rem)) calc(.55 * var(--aiotk-rem)); border-radius: 999px; background: var(--op-ink); color: var(--op-paper); }
#aiot-mp .aiot-mp-card-actions { margin-left: auto; display: inline-flex; gap: calc(.35 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-icon-btn:hover:not(:disabled) { border-color: var(--op-ink); background: var(--op-paper-2); }
#aiot-mp .aiot-mp-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
#aiot-mp .aiot-mp-icon-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-mp .aiot-mp-icon-btn--danger { color: var(--op-red); }
#aiot-mp .aiot-mp-icon-btn--danger:hover:not(:disabled) { background: var(--op-red); border-color: var(--op-red); color: var(--op-white); }
#aiot-mp .aiot-mp-drag { cursor: grab; touch-action: none; }
#aiot-mp .aiot-mp-drag:active { cursor: grabbing; }

#aiot-mp .aiot-mp-card-canvas-wrap { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: calc(.5 * var(--aiotk-rem)); background: var(--op-paper-2); border: 1px solid var(--op-line); overflow: hidden; }
#aiot-mp .aiot-mp-pdf-canvas, #aiot-mp .aiot-mp-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-mp .aiot-mp-card-info { text-align: center; min-width: 0; }
#aiot-mp .aiot-mp-card-title { font-family: var(--font-mono); font-weight: 600; font-size: calc(.88 * var(--aiotk-rem)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aiot-mp .aiot-mp-card-size { font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); color: var(--op-ink-70); margin-top: calc(.15 * var(--aiotk-rem)); }

#aiot-mp .aiot-mp-card-nav { display: flex; align-items: center; justify-content: space-between; gap: calc(.5 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-card-page-info { display: flex; flex-direction: column; align-items: center; gap: calc(.1 * var(--aiotk-rem)); text-align: center; }
#aiot-mp .aiot-mp-page-text { font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); font-weight: 600; }
#aiot-mp .aiot-mp-page-orig { font-family: var(--font-mono); font-size: calc(.76 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-mp .aiot-mp-delete-page {
    display: inline-flex; align-items: center; gap: calc(.3 * var(--aiotk-rem)); margin-top: calc(.2 * var(--aiotk-rem)); min-height: 28px; padding: 0 calc(.4 * var(--aiotk-rem));
    font-family: var(--font-mono); font-size: calc(.78 * var(--aiotk-rem)); font-weight: 600; color: var(--op-red); background: none; border: 0; cursor: pointer;
}
#aiot-mp .aiot-mp-delete-page:hover { text-decoration: underline; }
#aiot-mp .aiot-mp-delete-page svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

#aiot-mp .aiot-mp-card-range { margin-top: auto; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-range-input, #aiot-mp .aiot-mp-merged-name-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-mp .aiot-mp-range-input[aria-invalid="true"] { border-color: var(--op-red); box-shadow: 0 0 0 1px var(--op-red); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-range-hint.is-error { color: var(--op-red); font-weight: 600; }

#aiot-mp .sortable-ghost { opacity: .4; border: 1.5px dashed var(--op-ink); }
#aiot-mp .sortable-chosen { box-shadow: var(--op-pop); }

#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-summary.is-error { color: var(--op-red); font-weight: 600; }
#aiot-mp .aiot-mp-actions { display: flex; flex-direction: column; align-items: stretch; gap: calc(.75 * var(--aiotk-rem)); width: 100%; }
@container aiotk (min-width: 640px) { #aiot-mp .aiot-mp-actions { flex-direction: row; justify-content: center; align-items: center; width: auto; }}
#aiot-mp .aiot-mp-merge-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-mp .aiot-mp-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-mp .aiot-mp-reset-btn.is-armed { border-color: var(--op-red); color: var(--op-red); }
#aiot-mp .aiot-mp-reset-btn.is-armed:hover { background: var(--op-red); color: var(--op-white); }


#aiot-mp .aiot-mp-output-section:not(:empty) { margin-top: calc(2 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-merged-header { text-align: center; margin-bottom: calc(1.75 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-merged-title { font-size: calc(1.7 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(.6 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-merged-title:focus { outline: none; }
#aiot-mp .aiot-mp-merged-desc { font-size: calc(1.05 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-merged-layout { display: grid; grid-template-columns: 1fr; gap: calc(1.5 * var(--aiotk-rem)); align-items: start; }
@container aiotk (min-width: 768px) { #aiot-mp .aiot-mp-merged-layout { grid-template-columns: 1fr 1.15fr; }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-merged-info { display: flex; flex-direction: column; gap: calc(.85 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-merged-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-merged-page-text { font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); font-weight: 600; color: var(--op-ink-70); }
#aiot-mp .aiot-mp-download-btn { width: 100%; font-size: calc(1.02 * var(--aiotk-rem)); padding: calc(.85 * var(--aiotk-rem)); }













#aiot-mp .aiot-mp-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-mp-focus-in .18s ease-out; }
@keyframes aiot-mp-focus-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
#aiot-mp .aiot-mp-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-mp .aiot-mp-focus-label { margin-right: auto; font-family: var(--font-display); font-weight: 600; font-size: calc(1.05 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-focus-hint { font-family: var(--font-mono); font-size: calc(.8 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-mp .aiot-mp-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-mp .is-focus .aiot-mp-tool-header, #aiot-mp .is-focus [data-act="focus-open"] { display: none; }
html.aiot-mp-no-scroll, html.aiot-mp-no-scroll body { overflow: hidden !important; }
@container aiotk (max-width: 640px) { #aiot-mp .aiot-mp-focus-hint { display: none; }}


#aiot-mp .aiot-mp-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-mp .aiot-mp-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
#aiot-mp .aiot-mp-toast.is-error { background: var(--op-red); color: #FFFFFF; }
#aiot-mp[data-theme="dark"] .aiot-mp-toast.is-error { color: #16181B; }
@media (prefers-color-scheme: dark) { #aiot-mp:not([data-theme="light"]) .aiot-mp-toast.is-error { color: #16181B; } }


#aiot-mp .aiot-mp-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-mp .aiot-mp-what-is-grid { display: grid; gap: calc(2 * var(--aiotk-rem)); align-items: start; }
@container aiotk (min-width: 1024px) { #aiot-mp .aiot-mp-what-is-grid { grid-template-columns: .85fr 1.15fr; }}
#aiot-mp .aiot-mp-panel { background: var(--op-white); border-radius: var(--op-radius); padding: calc(2 * var(--aiotk-rem)); border: 1px solid var(--op-line); }
#aiot-mp .aiot-mp-panel-head { display: flex; align-items: center; gap: calc(1 * var(--aiotk-rem)); margin-bottom: calc(1.5 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-panel-title { font-size: calc(1.3 * var(--aiotk-rem)); font-weight: 600; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-panel p:last-child { margin-bottom: 0; }
#aiot-mp .aiot-mp-feature-list { display: flex; flex-direction: column; gap: calc(1.5 * var(--aiotk-rem)); margin-top: calc(1.5 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-feature-item { display: flex; gap: calc(1 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-feature-item p { margin: 0; line-height: 1.6; font-size: calc(.98 * var(--aiotk-rem)); }
#aiot-mp .fi-cyan { color: var(--op-cyan); } #aiot-mp .fi-green { color: var(--op-green); } #aiot-mp .fi-magenta { color: var(--op-magenta); } #aiot-mp .fi-red { color: var(--op-red); } #aiot-mp .fi-yellow { color: var(--op-yellow); }


#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-step-card:hover { border-color: var(--op-line-strong); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-step-content { flex: 1; min-width: 0; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-step-list { display: grid; gap: calc(.6 * var(--aiotk-rem)); margin: calc(.5 * var(--aiotk-rem)) 0 0; padding: 0; list-style: none; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-tags { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--aiotk-rem)); margin: 0; padding: 0; list-style: none; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-usage-section { padding: calc(3.5 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); }
  #aiot-mp .aiot-mp-bento-grid { grid-template-columns: 1fr; gap: calc(1 * var(--aiotk-rem)); }
  #aiot-mp .aiot-mp-step-card { padding: calc(1.25 * var(--aiotk-rem)); gap: calc(.95 * var(--aiotk-rem)); }
  #aiot-mp .aiot-mp-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-mp .aiot-mp-compare-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper); }
#aiot-mp .aiot-mp-compare-grid { display: grid; grid-template-columns: 1fr; gap: calc(2 * var(--aiotk-rem)); max-width: 650px; margin: 0 auto; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-compare-card--after { border: 1.5px solid var(--op-ink); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-compare-card-header { display: flex; justify-content: space-between; align-items: center; }
#aiot-mp .aiot-mp-compare-card-title { font-family: var(--font-mono); font-weight: 600; font-size: calc(.88 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-compare-status--red { border: 1px solid var(--op-red); color: var(--op-red); }
#aiot-mp .aiot-mp-compare-status--green { border: 1px solid var(--op-green); color: var(--op-green); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-compare-image-wrap img { width: 100%; height: auto; display: block; object-fit: contain; }
#aiot-mp .aiot-mp-compare-card-desc { font-size: calc(.95 * var(--aiotk-rem)); color: var(--op-ink-70); text-align: center; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-table { width: 100%; border-collapse: collapse; background: var(--op-white); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-table td:nth-child(2) { width: 38%; }
#aiot-mp .aiot-mp-table td:last-child { font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-table tbody tr:hover { background: var(--op-paper-2); }
@container aiotk (max-width: 860px) {
  #aiot-mp .aiot-mp-usecases-section { padding: calc(3.5 * var(--aiotk-rem)) calc(1 * var(--aiotk-rem)); }
  #aiot-mp .aiot-mp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  #aiot-mp .aiot-mp-table, #aiot-mp .aiot-mp-table tbody, #aiot-mp .aiot-mp-table tr, #aiot-mp .aiot-mp-table td { display: block; width: 100% !important; }
  #aiot-mp .aiot-mp-table tr { padding: calc(1 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); border-top: 1px solid var(--op-line); }
  #aiot-mp .aiot-mp-table tr:first-child { border-top: 0; }
  #aiot-mp .aiot-mp-table td { padding: calc(.25 * var(--aiotk-rem)) 0; border: 0; }
  #aiot-mp .aiot-mp-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-mp .aiot-mp-table td:first-child::before { display: none; }
  #aiot-mp .aiot-mp-table td:first-child { font-size: calc(.95 * var(--aiotk-rem)); margin-bottom: calc(.35 * var(--aiotk-rem)); }}


#aiot-mp .aiot-mp-apps-section { background: var(--op-paper); padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-apps-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.5 * var(--aiotk-rem)); }
@container aiotk (min-width: 768px) { #aiot-mp .aiot-mp-apps-grid { grid-template-columns: repeat(2, 1fr); }}
@container aiotk (min-width: 1024px) { #aiot-mp .aiot-mp-apps-grid { grid-template-columns: repeat(3, 1fr); }}
#aiot-mp .aiot-mp-app-card { display: flex; align-items: flex-start; gap: calc(1.1 * var(--aiotk-rem)); padding: calc(1.75 * var(--aiotk-rem)); background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius); transition: border-color .15s; }
#aiot-mp .aiot-mp-app-card:hover { border-color: var(--op-line-strong); }
#aiot-mp .aiot-mp-app-icon { width: calc(3 * var(--aiotk-rem)); height: calc(3 * var(--aiotk-rem)); border-radius: var(--op-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--op-ink); color: var(--op-paper); }
#aiot-mp .aiot-mp-app-icon svg { width: calc(1.4 * var(--aiotk-rem)); height: calc(1.4 * var(--aiotk-rem)); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#aiot-mp .aiot-mp-app-card h3 { font-size: calc(1.15 * var(--aiotk-rem)); font-weight: 600; margin: 0 0 calc(.75 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-app-card p { color: var(--op-ink-70); margin-bottom: calc(1 * var(--aiotk-rem)); line-height: 1.6; font-size: calc(.98 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-app-list { display: flex; flex-direction: column; gap: calc(.5 * var(--aiotk-rem)); margin: 0; padding: 0; list-style: none; }
#aiot-mp .aiot-mp-app-list li { display: flex; align-items: baseline; gap: calc(.55 * var(--aiotk-rem)); font-family: var(--font-mono); font-size: calc(.84 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-mp .aiot-mp-app-list li::before { content: ""; flex: 0 0 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translateY(-2px); }
#aiot-mp .dot-cyan li::before { background: var(--op-cyan); } #aiot-mp .dot-green li::before { background: var(--op-green); } #aiot-mp .dot-magenta li::before { background: var(--op-magenta); }


#aiot-mp .aiot-mp-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-mp .aiot-mp-ranges-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.5 * var(--aiotk-rem)); }
@container aiotk (min-width: 768px) { #aiot-mp .aiot-mp-ranges-grid { grid-template-columns: repeat(2, 1fr); }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-range-card-head { display: flex; align-items: center; gap: calc(.9 * var(--aiotk-rem)); margin-bottom: calc(.85 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-range-card h3 { font-family: var(--font-mono); font-size: calc(1 * var(--aiotk-rem)); font-weight: 600; }
#aiot-mp .aiot-mp-range-card p { color: var(--op-ink-70); line-height: 1.65; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-code--red { color: var(--op-red); }


#aiot-mp .aiot-mp-trouble-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-trouble-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--op-line); }
#aiot-mp .aiot-mp-trouble-row:nth-child(odd):not(.aiot-mp-trouble-head) { background: var(--op-paper-2); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-trouble-row > div { padding: calc(1.05 * var(--aiotk-rem)) calc(1.35 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-trouble-row p { font-size: calc(.93 * var(--aiotk-rem)); color: var(--op-ink-70); }
#aiot-mp .aiot-mp-trouble-row a { color: var(--op-ink); border-bottom: 1px solid var(--op-line-strong); font-weight: 600; }
#aiot-mp .aiot-mp-trouble-row a:hover { border-color: var(--op-ink); text-decoration: none; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-trouble-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  #aiot-mp .aiot-mp-trouble-row { grid-template-columns: 1fr; padding: calc(.9 * var(--aiotk-rem)) calc(1.1 * var(--aiotk-rem)); }
  #aiot-mp .aiot-mp-trouble-row:nth-child(2) { border-top: 0; }
  #aiot-mp .aiot-mp-trouble-row > div { padding: calc(.25 * var(--aiotk-rem)) 0; }
  #aiot-mp .aiot-mp-trouble-row [data-label]::before { display: block; }}


#aiot-mp .aiot-mp-practices-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper-2); }
#aiot-mp .aiot-mp-practices-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.25 * var(--aiotk-rem)); }
@container aiotk (min-width: 768px) { #aiot-mp .aiot-mp-practices-grid { grid-template-columns: repeat(2, 1fr); }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-practice-card p { color: var(--op-ink-70); font-size: calc(.93 * var(--aiotk-rem)); line-height: 1.6; }


#aiot-mp .aiot-mp-faq-section { padding: calc(5 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); background: var(--op-paper); }
#aiot-mp .aiot-mp-faq-list { max-width: calc(50 * var(--aiotk-rem)); margin: 0 auto; display: flex; flex-direction: column; gap: calc(.75 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-faq-item { background: var(--op-white); border: 1px solid var(--op-line); border-radius: var(--op-radius-sm); }
#aiot-mp .aiot-mp-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-mp .aiot-mp-faq-item summary::-webkit-details-marker { display: none; }
#aiot-mp .aiot-mp-faq-item summary h3 { font-size: calc(1.02 * var(--aiotk-rem)); font-weight: 600; line-height: 1.4; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-faq-item[open] summary::after { transform: rotate(45deg); }
#aiot-mp .aiot-mp-faq-answer { padding: 0 calc(1.4 * var(--aiotk-rem)) calc(1.25 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-faq-answer p { color: var(--op-ink-70); line-height: 1.65; font-size: calc(.98 * var(--aiotk-rem)); }


#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-tutorial { padding: calc(2.5 * var(--aiotk-rem)); }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-tutorial h2 { font-size: calc(1.7 * var(--aiotk-rem)); }}
#aiot-mp .aiot-mp-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-mp .aiot-mp-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-mp .aiot-mp-tutorial-card-head { display: flex; align-items: center; gap: calc(.85 * var(--aiotk-rem)); }
#aiot-mp .aiot-mp-tutorial-meta { font-family: var(--font-mono); font-size: calc(.82 * var(--aiotk-rem)); color: var(--op-ink-70); font-weight: 600; }
#aiot-mp .aiot-mp-tutorial-card h3 { font-size: calc(1.05 * var(--aiotk-rem)); font-weight: 600; }
#aiot-mp .aiot-mp-tutorial-card p { color: var(--op-ink-70); line-height: 1.65; }
#aiot-mp .aiot-mp-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-mp .aiot-mp-tutorial-btn:hover { background: transparent; color: var(--op-ink); text-decoration: none; }
#aiot-mp .aiot-mp-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-mp *, #aiot-mp *::before, #aiot-mp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}