/* Interactive demo and Spoolbase example, extracted from the current site.css. */
.spool-feature .feature-shot{height:335px}
@media(max-width:1100px){
 .spool-feature .feature-shot{height:310px}
}
@media(max-width:900px){
 .spool-feature .feature-shot{height:280px}
}
@media(max-width:600px){
 .spool-feature .feature-shot{height:310px}
}
[hidden]{display:none!important}
.demo-stage{text-align:left;border:1px solid #bd86553b;border-radius:24px;overflow:hidden;background:#101110;box-shadow:0 30px 85px -45px #97653442}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff0d;background:linear-gradient(115deg,#28201960,#111);color:#afa296}
.demo-badge{display:flex;align-items:center;gap:8px;font:9px ui-monospace,monospace;letter-spacing:.1em}
.demo-badge i{width:5px;height:5px;border-radius:50%;background:#d9a477;box-shadow:0 0 10px #d9a47760}
.demo-tools{display:flex;gap:8px}
.demo-tools button{font-size:10px;border:1px solid #ffffff19;padding:7px 10px;border-radius:7px;background:#ffffff05;color:#c4b7a9}
.demo-tools button[aria-pressed=true]{border-color:#d7a07470;background:#bc875821;color:#ecd2b9}
.demo-tools button:hover{background:#ffffff10}
.demo-desktop{background:radial-gradient(ellipse at 20% 70%,#a2733e1c,transparent 60%),repeating-linear-gradient(0deg,transparent 0 47px,#b18a5e06 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,#b18a5e06 47px 48px),#101212;position:relative}
.demo-menubar{display:flex;align-items:center;gap:17px;padding:0 24px;height:42px;background:#282727a8;border-bottom:1px solid #ffffff10;font-size:10px;color:#a8a5a0}
.demo-finder{display:flex;gap:19px;align-items:center;flex:1}
.demo-finder b{color:#d5cec7;font-weight:500}
.demo-clock{color:#b5afa6;font-variant-numeric:tabular-nums}
#demo-launcher{display:flex;align-items:center;gap:11px;border:0;background:transparent;align-self:stretch;padding:0 14px;font-size:11px;color:#ead6c0;border-radius:5px}
#demo-launcher[aria-expanded=true]{background:#d7b39121;box-shadow:0 -2px 0 #cfa277 inset}
#demo-launcher img{width:72px;height:auto;opacity:.95}
.demo-menu-value{font-variant-numeric:tabular-nums}
.demo-stage{--demo-bg:#252727;--demo-card:#1b1e21;--demo-ink:#f2f3f1;--demo-muted:#a7aaa6;--demo-line:#ffffff16;--demo-accent:#d4d7d3}
.demo-workspace{display:block;position:relative}
.demo-invitation{display:none}
.panel-closed .demo-invitation{display:block;max-width:330px;text-align:center}
.demo-invitation h3{font-size:38px;font-weight:450;line-height:1.14;letter-spacing:-.055em;margin:0 0 19px;color:#eee1d2}
.demo-invitation>p:not(.small-label){font-size:13px;color:#a3998e;line-height:1.8}
.demo-cross{display:block;font:26px ui-monospace,monospace;color:#c9a07a;margin-bottom:28px}
.demo-instructions{display:grid;gap:10px;font:10px ui-monospace,monospace;color:#8b7059;margin-top:28px}
.demo-instructions b{font:11px Inter,sans-serif;color:#b5aaa0;padding-left:12px;font-weight:400}
.demo-popover{width:100%;margin:0 auto;background:var(--demo-bg);border:1px solid #ffffff1c;border-radius:18px;box-shadow:0 20px 60px #0007;color:var(--demo-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0}
.demo-popover button{font-family:inherit;letter-spacing:0}
.native-header{display:flex;align-items:center;gap:12px;border:1px solid var(--demo-line);background:#212325;border-radius:12px}
.native-header img{width:100px;height:auto}
.native-summary{font-size:12px;color:var(--demo-muted);font-weight:500;flex:1}
.native-header-actions{display:flex;gap:9px}
.native-header-actions button{font-size:21px;line-height:1;background:none;border:0;color:var(--demo-muted);padding:0 2px;min-width:24px;height:25px}
.native-header-actions button:hover{color:var(--demo-ink)}
.native-app-body{max-height:710px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#656763 transparent}
.native-fleet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.native-card{display:block;width:100%;min-width:0;margin:0;padding:12px 13px;background:var(--demo-card);color:var(--demo-ink);border:1px solid #ffffff29;border-radius:16px;text-align:left;cursor:pointer}
.native-card:hover{border-color:#a7aaa680;background:color-mix(in srgb,var(--demo-card) 94%,white)}
.native-card.wide{grid-column:span 2}
.native-card-header{display:flex;align-items:center;gap:7px;padding-bottom:8px;border-bottom:1px solid var(--demo-line)}
.native-icon{width:13px;height:13px;flex-shrink:0;vertical-align:middle;color:var(--demo-muted)}
.native-card-header>.native-icon{width:15px;height:15px;color:#d4d7d3}
.native-card-header>strong{font-size:17px;font-weight:650;line-height:1}
.native-protocol{font-size:11px;line-height:1.1;color:#6d716e;border:1px solid var(--demo-line);border-radius:5px;padding:1px 4px;background:#ffffff06}
.native-card-tools{margin-left:auto;display:flex;gap:7px}
.native-card-tools>span{display:flex;align-items:center;justify-content:center;width:24px;height:25px;border-radius:6px;background:#ffffff0b;font-size:15px;line-height:1;font-weight:700}
.native-card-tools svg{width:16px;height:16px}
.native-card-tools .native-skip svg{color:#dba158}
.native-job{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:7px;font-size:12px;font-weight:600;line-height:1.5}
.native-job>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d4d7d3}
.native-job>span>b{color:var(--demo-ink)}
.native-job i{display:inline-block;width:6px;height:6px;background:#d4d7d3;border-radius:50%;margin-right:3px}
.native-job em{font-style:normal;color:#6d716e;padding:0 3px}
.native-job>strong{font-size:18px;line-height:1.25;flex-shrink:0;font-variant-numeric:tabular-nums}
.native-progress-line{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:10px;color:var(--demo-muted);font-weight:600;white-space:nowrap}
.native-progress-line>span:not(.native-segments){display:flex;align-items:center;gap:4px}
.native-segments{display:flex;gap:2px;flex:1;min-width:32px;height:5px}
.native-segments i{flex:1;min-width:0;background:#f2f3f11f;border-radius:1px}
.native-segments .filled{background:#d4d7d3}
.native-layer b{font-weight:600;font-variant-numeric:tabular-nums}
.native-temperatures{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#ffffff02;border-top:1px solid var(--demo-line);border-bottom:1px solid var(--demo-line);padding:10px 0;margin:0 -2px 11px}
.native-temperatures>span{display:flex;align-items:baseline;gap:3px;white-space:nowrap;line-height:1}
.native-temperatures b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.native-temperatures small{font-size:10px;font-weight:500;color:var(--demo-muted)}
.native-temperatures .native-chamber b{color:#8ba9c7}
.native-temperatures .native-inactive{color:#6d716e}
.native-ams-meta{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.4;font-weight:600;color:var(--demo-muted);margin:0 0 5px}
.native-ams-meta>b{color:var(--demo-ink);font-size:13px}
.native-ams-meta i{font-style:normal;color:#6d716e}
.native-ams-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.native-slot{display:grid;justify-items:center;gap:2px;min-width:0;color:var(--demo-ink)}
.native-swatch{position:relative;display:grid;place-items:center;isolation:isolate;height:22px;max-width:72px;width:100%;border-radius:7px;border:1px solid #ffffff18;background:color-mix(in srgb,var(--filament) 24%,#1b1e21);overflow:hidden;font-size:12px;font-weight:700;line-height:1}
.native-swatch:before{content:'';position:absolute;inset:auto 0 0;height:var(--fill);background:var(--filament);z-index:-1}
.native-swatch.active{border:2px solid #f2f3f1d0}
.native-swatch.pale{color:#141617}
.native-low{position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#ff6857;box-shadow:0 0 0 1px #252525}
.native-slot-caption{display:flex;position:relative;justify-content:center;width:100%;font-size:12px;line-height:1.3;color:#d4d7d3}
.native-slot-caption small{position:absolute;left:0;top:2px;font-size:8px;color:#a7aaa6}
.native-slot-caption b{font-weight:600}
.native-footer{padding:16px 0 1px;text-align:center;font-size:11px;color:#7d817d}
.demo-popover.show-detail{max-width:580px}
.native-detail-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 13px;font-size:11px;color:var(--demo-muted)}
.native-detail-nav button{padding:5px 10px;border:0;border-radius:5px;background:#ffffff0c;color:var(--demo-ink);font-size:12px}
.native-detail-card{padding:15px;margin-bottom:10px;background:var(--demo-card);border:1px solid #ffffff20;border-radius:16px}
.native-detail-title{display:flex;gap:7px;align-items:center}
.native-detail-title>strong{font-size:21px}
.native-detail-title>span{color:#4099ed;font-size:12px;font-weight:600}
.native-detail-title>b{margin-left:auto;font-size:32px;line-height:1;font-weight:700}
.native-detail-job{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:15px 0;color:var(--demo-muted)}
.native-timeline{height:3px;background:#ffffff14;position:relative;border-radius:5px;margin:20px 2px}
.native-timeline>i{position:absolute;height:100%;background:#d4d7d3;border-radius:5px}
.native-timeline>i:after{content:'';position:absolute;right:-3px;top:-2px;width:7px;height:7px;border-radius:50%;background:#d4d7d3;box-shadow:0 0 0 4px #d4d7d32a}
.native-timeline-labels{display:flex;justify-content:space-between;font-size:8px;color:#6d716e}
.native-timeline-labels>b{color:var(--demo-ink)}
.native-detail-eta{font-size:12px;font-weight:600;margin-top:12px;color:#c4c7c3}
.native-detail-card h4{font-size:10px;margin:0 0 12px;color:#777e79;font-weight:650;display:flex;justify-content:space-between;align-items:center}
.native-detail-card h4>span{font-size:14px}
.native-detail-card p{font-size:12px;color:var(--demo-muted);margin:6px 0}
.native-stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.native-stats>span{font-size:8px;font-weight:600;color:#777e79}
.native-stats b{display:block;font-size:19px;color:#d4d7d3;margin-top:4px}
.native-detail-card h4 button{display:flex;align-items:center;justify-content:space-between;width:100%;font:inherit;color:inherit;border:0;padding:0;background:none}
.native-detail-card .native-slot{border:0;padding:4px;background:transparent;border-radius:8px}
.native-detail-card .native-slot[aria-pressed=true]{background:#ffffff10;outline:1px solid #a7aaa6}
.native-detail-card #demo-slot-hint{font-size:10px;line-height:1.6;min-height:16px;margin:12px 0 0}
.demo-camera-crop{position:relative;aspect-ratio:850/480;overflow:hidden;border-radius:8px;background:#090909}
.demo-camera-crop img{position:absolute;max-width:none;width:111.06%;height:auto;left:-5.65%;top:-54.17%}
.native-detail-card .native-camera-note{font-size:9px;color:#777e79;margin:8px 0 0}
.demo-caption{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #ffffff0d;font-size:10px;color:#8f877d}
.demo-caption>span:first-child{color:#c6b39f}
.demo-stage.is-light{--demo-bg:#e8e9e6;--demo-card:#f5f6f3;--demo-ink:#232623;--demo-muted:#646c64;--demo-line:#0000001a}
.is-light .native-header{background:#dadcd8}
.is-light .native-header img{filter:invert(1)}
.is-light .native-job>span,.is-light .native-slot-caption,.is-light .native-detail-eta,.is-light .native-stats b,.is-light .native-card-header>.native-icon{color:#525a53}
.is-light .native-segments i{background:#0000001a}
.is-light .native-segments .filled{background:#5a665b}
.is-light .native-card,.is-light .native-detail-card{border-color:#00000026}
.is-light .native-swatch{color:#f2f3f1}
.is-light .native-swatch.pale{color:#141617}
.is-light .native-swatch.active{border-color:#565f55}
.is-light .native-timeline{background:#00000018}
.is-light .native-timeline i{background:#626d62}
.spool-demo{background:#0c0d0e;border:1px solid #ffffff24;border-radius:16px;color:#f2f3f1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0}
.native-spool-header{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.native-spool-logo{font-size:34px;color:#ddd;line-height:1;transform:rotate(-25deg)}
.native-spool-header strong{font-size:19px;line-height:1.2;font-weight:650;display:block}
.native-spool-header div>span{display:block;font-size:10px;color:#a7aaa6;margin-top:3px}
.native-spool-search{display:flex;align-items:center;gap:7px;padding:8px 9px;background:#1d1e1d;border:1px solid #ffffff24;border-radius:9px}
.native-spool-search>span{font-size:22px;color:#a7aaa6;line-height:1}
.native-spool-search input{width:100%;min-width:0;border:0;outline:none;background:transparent;color:#d4d7d3;font:10px -apple-system,BlinkMacSystemFont,sans-serif}
.native-spool-search:focus-within{outline:2px solid #8ba9c7;outline-offset:2px}
.native-spool-group{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin:19px 0 9px}
.native-spool-group>span{font-size:9px;color:#a7aaa6}
.native-inventory-row{display:flex;align-items:center;gap:8px}
.native-inventory-color{width:29px;height:29px;border:1px solid #ffffff21;border-radius:50%;flex-shrink:0}
.native-inventory-row>div{min-width:0;flex:1}
.native-inventory-row>div>b{font-size:11px;font-weight:600;display:block}
.native-inventory-row>div>span{font-size:8px;display:block;color:#a7aaa6;margin-top:2px}
.native-inventory-row>strong{border-radius:8px;background:#192b39;color:#65ade5;font-size:11px;text-align:center;min-width:29px;padding:3px}
.native-inventory-row>strong.low{color:#ff6857;background:#3c1c19}
.native-spool-selected{border-top:1px solid #ffffff18;margin-top:11px;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.native-spool-selected>span{font-size:10px;color:#a7aaa6}
.native-spool-selected>strong{font-size:13px;font-variant-numeric:tabular-nums}
.native-weight-track{height:4px;background:#ffffff15;width:100%;border-radius:3px;overflow:hidden}
.native-weight-track i{display:block;height:100%;background:#d4d7d3}
.spool-demo-controls{border-top:1px solid #ffffff18;margin-top:18px;padding-top:12px}
.spool-demo-label{display:block;font:8px ui-monospace,monospace;letter-spacing:.02em;color:#9a8d7f;margin-bottom:10px}
.spool-run{display:flex;justify-content:space-between;gap:8px;align-items:center;width:100%;border:1px solid #c0986d45;border-radius:8px;padding:10px 11px;background:#ba8e5e15;color:#e2c5a5;font-size:10px;text-align:left}
.spool-run:hover{background:#ba8e5e29}
.spool-run:disabled{opacity:.7;cursor:wait}
.spool-demo #spool-status{font-size:10px;line-height:1.65;color:#969c90;margin:12px 0 8px;min-height:34px}
.spool-original{font-size:9px;border:0;padding:0;background:transparent;color:#b6a18c;text-decoration:underline;text-underline-offset:4px}
#spool-empty{font-size:11px;padding:15px 0}
@media(max-width:1050px){
 .native-progress-line{flex-wrap:wrap;gap:5px}
 .native-segments{flex-basis:100%;margin-bottom:3px}
 .native-progress-line>.native-layer{margin-left:auto}
 .native-temperatures b{font-size:17px}
 .native-temperatures small{font-size:9px}
 .native-card-header>strong{font-size:15px}
 .native-card-tools{gap:4px}
 .native-card-tools>span{width:21px;height:23px}
 .native-ams-slots{gap:8px}
 .native-slot-caption small{font-size:7px}
 .native-slot-caption{font-size:11px}
 .native-job{font-size:11px}
 .native-job>strong{font-size:17px}
 .native-summary{font-size:11px}
 .native-app-body{max-height:680px}
}
@media(max-width:650px){
 .demo-popover{border-radius:13px}
 .native-header{gap:7px;border-radius:9px}
 .native-header-actions{gap:5px}
 .native-header-actions button{min-width:20px;height:22px}
 .native-fleet{grid-template-columns:1fr;gap:8px}
 .native-card.wide{grid-column:auto}
 .native-card{padding:12px}
 .native-app-body{max-height:600px}
 .native-card-header>strong{font-size:16px}
 .native-job{font-size:12px}
 .native-job>strong{font-size:19px}
 .native-temperatures b{font-size:19px}
 .native-ams-slots{gap:14px}
 .native-slot-caption{font-size:12px}
 .native-slot-caption small{font-size:8px}
 .native-footer{font-size:9px;padding:12px 0 3px}
 .demo-menubar{padding:0 12px;gap:8px}
 .demo-finder span{display:none}
 .demo-finder{font-size:9px}
 #demo-launcher{padding:0 8px;gap:8px}
 .demo-clock{font-size:9px}
 .demo-toolbar{flex-wrap:wrap;gap:8px}
 .demo-badge{font-size:8px;letter-spacing:0}
 .demo-tools{margin-left:auto;gap:5px}
 .demo-tools button{font-size:9px;padding:6px}
 .demo-caption{font-size:9px;flex-direction:column;gap:4px}
 .demo-stage{border-radius:18px}
 .native-detail-card{padding:12px}
 .native-detail-title>strong{font-size:18px}
 .native-detail-title>b{font-size:28px}
 .native-detail-job{font-size:10px}
 .native-detail-card p{font-size:11px}
 .native-detail-title>span{font-size:10px}
 .native-temperatures .native-inactive{display:none}
}
@media(max-width:360px){
 .native-header{flex-wrap:wrap}
 .native-summary{order:3;width:100%;flex-basis:100%}
 .native-header-actions{margin-left:auto}
 .native-card{padding:10px}
 .native-card-tools .native-skip{display:none}
 .native-temperatures b{font-size:16px}
 .native-temperatures small{font-size:8px}
 .native-job{font-size:10px}
 .native-job>strong{font-size:16px}
 .native-slot-caption{font-size:10px}
 .native-slot-caption small{font-size:6px}
 .native-ams-slots{gap:9px}
 .native-swatch{height:20px;font-size:11px}
 .native-ams-meta{font-size:10px}
 .native-ams-meta>b{font-size:11px}
 .native-detail-title>b{font-size:24px}
 .native-detail-title>strong{font-size:16px}
 .native-detail-title>span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .demo-stage *,.spool-demo *{transition:none;animation:none}
}
.native-header-actions button[aria-pressed=true]{background:#ffffff17;border-radius:4px;color:var(--demo-ink)}
.native-fleet.compact{grid-template-columns:1fr}
.native-fleet.compact .native-card.wide{grid-column:auto}
.native-fleet.compact .native-temperatures,.native-fleet.compact .native-ams-meta,.native-fleet.compact .native-ams-slots{display:none}
.native-fleet.compact .native-progress-line{margin-bottom:1px}
.native-fleet.compact .native-card{border-radius:11px}
@media(max-width:650px){
 .native-header{flex-wrap:wrap}
 .native-summary{order:3;flex-basis:100%;font-size:10px}
 .native-header-actions{margin-left:auto}
 .native-header img{width:88px}
 .native-header-actions button{font-size:19px}
}
.demo-toolbar{padding:11px 18px}
.demo-workspace{min-height:0;padding:12px}
.panel-closed .demo-workspace{min-height:clamp(300px,48svh,430px)}
.panel-closed .demo-invitation{margin:35px auto}
.native-app-body{max-height:clamp(260px,46svh,430px)}
.native-header{margin-bottom:9px;padding:9px 12px}
.native-footer{padding-top:10px}
.demo-caption{padding:11px 18px}
.demo-popover{padding:10px;max-width:900px}
.spool-feature .feature-shot{height:clamp(210px,35svh,285px)}
.spool-demo{margin:0 18px 18px;padding:14px}
.native-inventory-row{padding:5px 0}
.native-spool-group{margin-top:14px}
@media(max-width:600px){
 .demo-toolbar{padding:10px}
 .demo-workspace{padding:8px}
 .native-app-body{max-height:390px}
 .native-summary{font-size:9px}
 .demo-caption{font-size:8px}
 .demo-desktop.panel-closed .demo-workspace{min-height:330px}
}
@media(min-width:901px) and (max-height:800px){
 .native-app-body{max-height:340px}
}
.compat-table tr[hidden]{display:none!important}
.spool-demo{background:#171717;border-color:#373737;border-radius:10px}
.spool-original{color:#d4d7d3}
.spool-run{background:#303030;border-color:#4a4a4a;color:#f2f3f1;border-radius:7px}
.demo-stage{border-color:#414141;background:#171717;border-radius:16px;box-shadow:0 15px 40px #0003}
.demo-toolbar{background:#1d1d1d;color:#a7aaa6;border-color:#343434}
.demo-badge i{background:#a7aaa6;box-shadow:none}
.demo-tools button{background:#282828;border-color:#3b3b3b;color:#cbd0c8;border-radius:7px}
.demo-tools button[aria-pressed=true]{background:#404040;border-color:#606060;color:#f2f3f1}
.demo-caption{background:#191919;color:#929590}
.loop-spool{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.loop-spool b{padding:7px 10px;border:1px solid var(--obs-edge);border-radius:7px;background:var(--obs-raised);color:var(--obs-text);font-weight:600}
.loop-spool span{color:#62655f}