:host{
    display:block;
    width:100%;
    min-width:0;
}

.nsio-root[data-nsio-journey]{
    --nsio-navy:#03162d;
    --nsio-navy-2:#0b2940;
    --nsio-ink:#101b28;
    --nsio-muted:#65717d;
    --nsio-teal:#16b99a;
    --nsio-teal-dark:#087c72;
    --nsio-cyan:#1599bd;
    --nsio-gold:#dea332;
    --nsio-warm:#f7f4ef;
    --nsio-paper:#fffdf9;
    --nsio-white:#ffffff;
    --nsio-line:#d9dedf;
    --nsio-line-warm:#e6ded3;
    --nsio-shadow:0 20px 55px rgba(3,22,45,.13);
    --nsio-explainer-fade:2000ms;
    --nsio-state-fade:2400ms;
    --nsio-fade-ease:linear;
    --nsio-display:"Special Elite","Courier Prime","Courier New",ui-monospace,monospace;
    --nsio-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    box-sizing:border-box;
    color:var(--nsio-ink);
    container-type:inline-size;
    font-family:var(--nsio-sans);
    line-height:1.4;
    margin:0;
    min-width:0;
    position:relative;
    width:100%;
}

.nsio-root[data-nsio-journey] *,
.nsio-root[data-nsio-journey] *::before,
.nsio-root[data-nsio-journey] *::after{
    box-sizing:border-box;
}

.nsio-root[data-nsio-journey] button{
    -webkit-appearance:none;
    appearance:none;
    box-shadow:none;
    font:inherit;
    letter-spacing:normal;
    margin:0;
    text-transform:none;
}

.nsio-root[data-nsio-journey] button:focus-visible{
    outline:3px solid rgba(22,185,154,.35);
    outline-offset:3px;
}

.nsio-shell{
    background:var(--nsio-paper);
    border:1px solid var(--nsio-line);
    border-radius:22px;
    box-shadow:var(--nsio-shadow);
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    width:100%;
}

.nsio-topbar{
    align-items:center;
    background:rgba(255,253,249,.98);
    border-bottom:1px solid var(--nsio-line);
    display:flex;
    flex:0 0 auto;
    gap:18px;
    justify-content:space-between;
    min-height:62px;
    padding:8px 12px 8px 15px;
    position:relative;
    z-index:20;
}

.nsio-heading{
    align-items:center;
    display:flex;
    gap:14px;
    min-width:0;
}

.nsio-brand-logo{
    display:block;
    flex:0 0 auto;
    height:44px;
    object-fit:contain;
    object-position:left center;
    width:144px;
}

.nsio-heading-copy{
    border-left:1px solid var(--nsio-line);
    display:grid;
    gap:2px;
    min-width:0;
    padding-left:14px;
}

.nsio-heading-copy strong{
    color:var(--nsio-navy);
    display:block;
    font-family:var(--nsio-display);
    font-size:clamp(20px,1.7vw,27px);
    font-weight:400;
    letter-spacing:-.025em;
    line-height:1.05;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.nsio-heading-copy [data-role="status"]{
    color:var(--nsio-muted);
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.01em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.nsio-visually-hidden{
    border:0 !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    height:1px !important;
    margin:-1px !important;
    overflow:hidden !important;
    padding:0 !important;
    position:absolute !important;
    white-space:nowrap !important;
    width:1px !important;
}

.nsio-top-actions{
    align-items:center;
    display:flex;
    flex:0 0 auto;
    gap:7px;
}

.nsio-control{
    align-items:center;
    background:var(--nsio-white);
    border:1px solid #aeb8c1;
    border-radius:999px;
    color:var(--nsio-navy);
    cursor:pointer;
    display:inline-flex;
    font-size:12px;
    font-weight:800;
    gap:7px;
    justify-content:center;
    min-height:38px;
    padding:8px 13px;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
    white-space:nowrap;
}

.nsio-control:hover{
    background:#f6faf9;
    border-color:var(--nsio-teal-dark);
    transform:translateY(-1px);
}

.nsio-control-primary{
    background:var(--nsio-navy-2);
    border-color:var(--nsio-navy-2);
    color:#fff;
}

.nsio-control-primary:hover{
    background:var(--nsio-teal-dark);
    border-color:var(--nsio-teal-dark);
}

.nsio-control-icon{
    display:inline-flex;
    font-size:13px;
    font-weight:900;
    justify-content:center;
    min-width:11px;
}

.nsio-expand-icon{
    display:block;
    height:13px;
    position:relative;
    width:13px;
}

.nsio-expand-icon::before,
.nsio-expand-icon::after{
    border-color:currentColor;
    border-style:solid;
    content:"";
    height:5px;
    position:absolute;
    width:5px;
}

.nsio-expand-icon::before{
    border-width:1.5px 0 0 1.5px;
    left:0;
    top:0;
}

.nsio-expand-icon::after{
    border-width:0 1.5px 1.5px 0;
    bottom:0;
    right:0;
}

.nsio-close{
    display:none;
    font-size:24px;
    height:40px;
    line-height:1;
    padding:0;
    width:40px;
}

.nsio-main{
    display:grid;
    flex:1 1 auto;
    grid-template-columns:minmax(0,1fr);
    min-height:0;
    min-width:0;
}

.nsio-canvas-area{
    align-items:center;
    background:var(--nsio-warm);
    display:flex;
    justify-content:center;
    min-height:0;
    min-width:0;
    overflow:hidden;
}

.nsio-stage{
    aspect-ratio:1672 / 850;
    background:#fcfaf7;
    isolation:isolate;
    min-width:0;
    overflow:hidden;
    position:relative;
    width:100%;
}

.nsio-viewport{
    inset:0;
    overflow:hidden;
    position:absolute;
}

.nsio-art,
.nsio-overlay,
.nsio-guides,
.nsio-hotspots{
    display:block;
    height:100%;
    inset:0;
    position:absolute;
    width:100%;
}

.nsio-art{
    object-fit:fill;
    pointer-events:none;
    user-select:none;
    z-index:1;
}

.nsio-overlay{
    overflow:visible;
    pointer-events:none;
    z-index:2;
}

.nsio-step-layer{
    opacity:0;
    transition:opacity var(--nsio-state-fade) var(--nsio-fade-ease);
}

.nsio-step-layer.is-active{
    opacity:1;
}

.nsio-step-motion{
    opacity:1;
}

.nsio-guides{
    overflow:visible;
    pointer-events:none;
    z-index:3;
}

.nsio-hotspots{
    pointer-events:none;
    z-index:5;
}

.nsio-dim-layer{
    fill:rgba(5,18,38,.40);
}

.nsio-highlight{
    color:var(--nsio-cyan);
    filter:drop-shadow(0 0 7px rgba(21,153,189,.48));
}

.nsio-highlight > *{
    vector-effect:non-scaling-stroke;
}

.nsio-route-segment{
    opacity:.28;
}

.nsio-route-segment.is-active{
    opacity:1;
}

.nsio-route-segment.is-complete{
    opacity:.34;
}

.nsio-signal,
.nsio-nerve-track,
.nsio-angle-marker,
.nsio-cortex-branch,
.nsio-source-ring,
.nsio-cortex-wave{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
}

.nsio-signal-light{
    filter:drop-shadow(0 0 5px rgba(222,163,50,.68));
    stroke:var(--nsio-gold);
    stroke-width:5;
}

.nsio-signal-neural{
    filter:drop-shadow(0 0 5px rgba(22,185,154,.62));
    stroke:var(--nsio-teal);
    stroke-width:5;
}

.nsio-signal-strong{
    stroke-width:7;
}

.nsio-signal-moving{
    animation:nsio-dash 1.6s linear infinite;
    stroke-dasharray:9 14;
}

.nsio-delay-one{
    animation-delay:-.55s;
}

.nsio-delay-two{
    animation-delay:-1.05s;
}

.nsio-focus-point,
.nsio-retina-impact{
    animation:nsio-impact 1.8s ease-in-out infinite;
    fill:rgba(255,255,255,.72);
    stroke:var(--nsio-gold);
    stroke-width:5;
    transform-box:fill-box;
    transform-origin:center;
    vector-effect:non-scaling-stroke;
}

.nsio-source-ring{
    animation:nsio-ring 2.2s ease-in-out infinite;
    filter:drop-shadow(0 0 8px rgba(48,206,124,.38));
    stroke:#30ce7c;
    stroke-width:4;
    transform-box:fill-box;
    transform-origin:center;
}

.nsio-reflection-sparks circle,
.nsio-receptor-flashes circle{
    animation:nsio-spark 1.8s ease-in-out infinite;
    fill:#fff5b6;
    stroke:var(--nsio-gold);
    stroke-width:3;
    transform-box:fill-box;
    transform-origin:center;
    vector-effect:non-scaling-stroke;
}

.nsio-reflection-sparks circle:nth-child(2),
.nsio-receptor-flashes circle:nth-child(2),
.nsio-receptor-flashes circle:nth-child(4){
    animation-delay:-.6s;
}

.nsio-reflection-sparks circle:nth-child(3),
.nsio-receptor-flashes circle:nth-child(3),
.nsio-receptor-flashes circle:nth-child(5){
    animation-delay:-1.15s;
}

.nsio-angle-marker{
    stroke:#30ce7c;
    stroke-dasharray:6 8;
    stroke-width:3;
}

.nsio-iris-guide{
    fill:rgba(48,206,124,.06);
    stroke:#30ce7c;
    stroke-width:3;
    vector-effect:non-scaling-stroke;
}

.nsio-pupil-aperture{
    animation:nsio-pupil 2.6s ease-in-out infinite;
    fill:rgba(3,22,45,.5);
    stroke:#fff;
    stroke-width:3;
    transform-box:fill-box;
    transform-origin:center;
    vector-effect:non-scaling-stroke;
}

.nsio-light-volume{
    fill:rgba(222,163,50,.14);
    stroke:none;
}

.nsio-lens-live{
    animation:nsio-lens 2.8s ease-in-out infinite;
    fill:rgba(48,206,124,.08);
    stroke:#30ce7c;
    stroke-width:3;
    transform-box:fill-box;
    transform-origin:center;
    vector-effect:non-scaling-stroke;
}

.nsio-nerve-track{
    opacity:.56;
    stroke:rgba(3,22,45,.5);
    stroke-width:15;
}

.nsio-cortex-branch{
    animation:nsio-dash 1.9s linear infinite;
    filter:drop-shadow(0 0 5px rgba(22,185,154,.55));
    stroke:var(--nsio-teal);
    stroke-dasharray:8 13;
    stroke-width:6;
}

.nsio-cortex-wave{
    animation:nsio-wave 2.1s ease-out infinite;
    stroke:var(--nsio-teal);
    stroke-width:5;
    transform-box:fill-box;
    transform-origin:center;
}

.nsio-guide{
    opacity:.34;
    transition:opacity var(--nsio-state-fade) var(--nsio-fade-ease);
}

.nsio-guide.is-empty{
    display:none;
}

.nsio-guide-halo,
.nsio-guide-line{
    fill:none;
    stroke-linecap:round;
    vector-effect:non-scaling-stroke;
}

.nsio-guide-halo{
    stroke:rgba(255,255,255,.92);
    stroke-width:6;
}

.nsio-guide-line{
    stroke:rgba(3,22,45,.62);
    stroke-dasharray:3 6;
    stroke-width:1.6;
}

.nsio-guide-dot{
    fill:var(--nsio-paper);
    stroke:rgba(3,22,45,.68);
    stroke-width:2;
    vector-effect:non-scaling-stroke;
}

.nsio-guide.is-active{
    opacity:1;
}

.nsio-guide.is-active .nsio-guide-line{
    stroke:var(--nsio-teal-dark);
    stroke-width:2.6;
}

.nsio-guide.is-active .nsio-guide-dot{
    fill:var(--nsio-teal);
    stroke:#fff;
    stroke-width:3;
}

.nsio-marker{
    align-items:center;
    background:transparent;
    border:0;
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    display:flex;
    height:50px;
    justify-content:center;
    opacity:1;
    padding:7px;
    pointer-events:auto;
    position:absolute;
    transform:translate(-50%,-50%);
    transition:transform .18s ease;
    width:50px;
}

/* The dark marker is permanent. The highlighted marker is a separate,
   perfectly aligned layer that only changes opacity. This avoids the small
   apparent jump caused by recolouring and re-shadowing a single element. */
.nsio-marker-base,
.nsio-marker-highlight{
    align-items:center;
    border:3px solid #fff;
    border-radius:50%;
    display:flex;
    font-size:15px;
    font-weight:900;
    height:36px;
    justify-content:center;
    left:50%;
    line-height:1;
    pointer-events:none;
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
    width:36px;
}

.nsio-marker-base{
    background:var(--nsio-navy-2);
    box-shadow:0 4px 12px rgba(3,22,45,.3);
    color:#fff;
    z-index:1;
}

.nsio-marker-highlight{
    background:var(--nsio-teal-dark);
    box-shadow:0 0 0 5px rgba(255,255,255,.72),0 5px 18px rgba(3,22,45,.34);
    color:#fff;
    opacity:0;
    transition:opacity var(--nsio-state-fade) var(--nsio-fade-ease);
    z-index:3;
}

.nsio-marker-halo{
    animation:nsio-marker-pulse 1.9s ease-in-out infinite;
    border:2px solid rgba(22,185,154,.72);
    border-radius:50%;
    inset:1px;
    opacity:0;
    pointer-events:none;
    position:absolute;
    transform:scale(.86);
    transform-origin:center;
    transition:opacity var(--nsio-state-fade) var(--nsio-fade-ease);
    z-index:2;
}

.nsio-marker:hover,
.nsio-marker:focus-visible{
    transform:translate(-50%,-50%) scale(1.08);
}

.nsio-marker.is-active .nsio-marker-highlight,
.nsio-marker.is-active .nsio-marker-halo{
    opacity:1;
}

.nsio-bubble{
    background:rgba(255,253,249,.96);
    border:1px solid rgba(3,22,45,.2);
    border-left:5px solid var(--nsio-teal-dark);
    border-radius:18px;
    bottom:18px;
    box-shadow:0 16px 38px rgba(3,22,45,.18);
    max-height:calc(100% - 36px);
    max-width:420px;
    overflow:auto;
    padding:15px 17px 18px;
    position:absolute;
    scrollbar-width:thin;
    transition:opacity var(--nsio-explainer-fade) var(--nsio-fade-ease);
    width:min(36%,420px);
    z-index:8;
}

.nsio-bubble.is-right{
    right:18px;
}

.nsio-bubble.is-left{
    left:18px;
}

.nsio-bubble-heading,
.nsio-side-heading{
    align-items:flex-start;
    display:flex;
    gap:11px;
}

.nsio-bubble-number,
.nsio-side-number{
    align-items:center;
    background:var(--nsio-navy-2);
    border-radius:8px;
    color:#fff;
    display:flex;
    flex:0 0 auto;
    font-family:var(--nsio-display);
    font-size:20px;
    height:38px;
    justify-content:center;
    line-height:1;
    width:38px;
}

.nsio-phase{
    color:var(--nsio-teal-dark);
    display:block;
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
    line-height:1.15;
    margin:1px 0 3px;
    text-transform:uppercase;
}

.nsio-bubble h3,
.nsio-side-panel h3{
    color:var(--nsio-navy);
    font-family:var(--nsio-display);
    font-size:clamp(20px,1.65vw,27px);
    font-weight:400;
    letter-spacing:-.025em;
    line-height:1.05;
    margin:0;
}

.nsio-summary,
.nsio-side-summary{
    color:#34404b;
    font-size:12.5px;
    line-height:1.48;
    margin:11px 0 12px;
}

.nsio-transform,
.nsio-side-transform{
    margin:0;
}

.nsio-transform > div,
.nsio-side-transform > div{
    border-top:1px solid var(--nsio-line-warm);
    display:grid;
    gap:9px;
    grid-template-columns:94px minmax(0,1fr);
    padding:7px 0 0;
}

.nsio-transform > div + div,
.nsio-side-transform > div + div{
    margin-top:7px;
}

.nsio-transform dt,
.nsio-side-transform dt{
    color:#73706a;
    font-size:8.5px;
    font-weight:900;
    letter-spacing:.09em;
    line-height:1.25;
    text-transform:uppercase;
}

.nsio-transform dd,
.nsio-side-transform dd{
    color:#202b35;
    font-size:10.5px;
    font-weight:700;
    line-height:1.35;
    margin:0;
    min-width:0;
}

.nsio-read-progress{
    background:rgba(3,22,45,.09);
    bottom:0;
    display:block;
    height:3px;
    left:0;
    overflow:hidden;
    position:absolute;
    right:0;
}

.nsio-read-progress i{
    background:linear-gradient(90deg,var(--nsio-teal-dark),var(--nsio-cyan));
    display:block;
    height:100%;
    width:0;
}

.nsio-side-panel{
    display:none;
}

.nsio-side-panel > *{
    transition:opacity var(--nsio-explainer-fade) var(--nsio-fade-ease);
}

.nsio-legend-wrap{
    background:var(--nsio-paper);
    border-top:1px solid var(--nsio-line);
    flex:0 0 auto;
    overflow-x:hidden;
    padding:8px 10px 10px;
}

.nsio-legend{
    display:grid;
    gap:6px;
    grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
    min-width:0;
}

.nsio-legend-button{
    align-items:center;
    background:#faf8f4;
    border:1px solid var(--nsio-line-warm);
    border-radius:11px;
    color:#3a444e;
    cursor:pointer;
    display:flex;
    min-height:44px;
    min-width:0;
    padding:6px 9px 7px 12px;
    position:relative;
    text-align:left;
    transition:background var(--nsio-state-fade) var(--nsio-fade-ease),border-color var(--nsio-state-fade) var(--nsio-fade-ease),color var(--nsio-state-fade) var(--nsio-fade-ease),transform .18s ease;
}

.nsio-legend-button:hover{
    background:#f2f8f7;
    border-color:rgba(8,124,114,.55);
    transform:translateY(-1px);
}

.nsio-legend-number{
    align-items:center;
    background:#e8e3da;
    border-radius:50%;
    color:#5b5d5d;
    display:flex;
    font-size:10px;
    font-weight:900;
    height:16px;
    justify-content:center;
    left:0;
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
    transition:background var(--nsio-state-fade) var(--nsio-fade-ease),box-shadow var(--nsio-state-fade) var(--nsio-fade-ease),color var(--nsio-state-fade) var(--nsio-fade-ease);
    width:16px;
    z-index:2;
}

.nsio-legend-label{
    color:inherit;
    display:block;
    flex:1 1 auto;
    font-size:10.5px;
    font-weight:800;
    line-height:1.12;
    min-width:0;
    overflow:visible;
    white-space:normal;
}

.nsio-legend-button.is-active{
    background:#eaf7f4;
    border-color:var(--nsio-teal-dark);
    color:var(--nsio-navy);
}

.nsio-legend-button.is-active .nsio-legend-number{
    background:var(--nsio-teal-dark);
    box-shadow:0 0 0 4px rgba(22,185,154,.13);
    color:#fff;
}

.nsio-root.is-step-fading-out .nsio-bubble,
.nsio-root.is-step-fading-in .nsio-bubble{
    opacity:0;
    pointer-events:none;
}

.nsio-root.is-step-fading-out .nsio-side-panel > *,
.nsio-root.is-step-fading-in .nsio-side-panel > *{
    opacity:0;
}

.nsio-root.is-transitioning .nsio-marker,
.nsio-root.is-transitioning .nsio-legend-button{
    pointer-events:none;
}

.nsio-root.is-fullscreen{
    align-items:center;
    display:flex;
    height:100%;
    justify-content:center;
    min-height:0;
    overflow:hidden;
    width:100%;
}

.nsio-root.is-fullscreen .nsio-shell{
    border:0;
    border-radius:0;
    box-shadow:none;
    height:auto;
    max-height:100%;
    min-height:0;
    width:100%;
}

/* Gentle grow on open / shrink on close. Both the launcher links and the normal
   Full screen button route through the same enter/exit, so both animate. */
@keyframes nsio-grow-in {
    from { transform:scale(.92); }
    to   { transform:scale(1); }
}
@keyframes nsio-shrink-out {
    from { transform:scale(1); }
    to   { transform:scale(.92); }
}
.nsio-root.is-fullscreen.is-opening .nsio-shell{
    animation:nsio-grow-in 3000ms cubic-bezier(.22,.61,.36,1) both;
    transform-origin:center center;
    will-change:transform;
}
.nsio-root.is-fullscreen.is-closing .nsio-shell{
    animation:nsio-shrink-out 2000ms cubic-bezier(.4,0,.7,.45) both;
    transform-origin:center center;
    will-change:transform;
}
@media (prefers-reduced-motion: reduce){
    .nsio-root.is-fullscreen.is-opening .nsio-shell,
    .nsio-root.is-fullscreen.is-closing .nsio-shell{
        animation:none;
    }
}

.nsio-root.is-fullscreen .nsio-topbar{
    min-height:66px;
    padding-left:18px;
    padding-right:18px;
}

.nsio-root.is-fullscreen [data-action="fullscreen"]{
    display:none;
}

.nsio-root.is-fullscreen .nsio-close{
    display:inline-flex;
}

.nsio-root.is-fullscreen .nsio-main{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(330px,390px);
    min-height:0;
}

.nsio-root.is-fullscreen .nsio-canvas-area{
    background:#eef1f2;
    min-height:0;
    padding:18px;
}

.nsio-root.is-fullscreen .nsio-stage{
    aspect-ratio:auto;
    background:transparent;
    height:auto;
    min-height:0;
    overflow:visible;
    width:100%;
}

.nsio-root.is-fullscreen .nsio-viewport{
    background:#fcfaf7;
    border:1px solid var(--nsio-line);
    border-radius:18px;
    box-shadow:0 16px 45px rgba(3,22,45,.16);
    inset:50% auto auto 50%;
    overflow:hidden;
    transform:translate(-50%,-50%);
}

.nsio-root.is-fullscreen .nsio-bubble{
    display:none;
}

.nsio-root.is-fullscreen .nsio-side-panel{
    background:var(--nsio-paper);
    border-left:1px solid var(--nsio-line);
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:auto;
    padding:26px 24px 20px;
}

.nsio-root.is-fullscreen .nsio-side-number{
    background:var(--nsio-teal-dark);
    font-size:24px;
    height:46px;
    width:46px;
}

.nsio-root.is-fullscreen .nsio-side-panel h3{
    font-size:30px;
}

.nsio-root.is-fullscreen .nsio-side-summary{
    font-size:14px;
    line-height:1.55;
    margin:20px 0;
}

.nsio-root.is-fullscreen .nsio-side-transform > div{
    gap:12px;
    grid-template-columns:105px minmax(0,1fr);
    padding-top:12px;
}

.nsio-root.is-fullscreen .nsio-side-transform > div + div{
    margin-top:12px;
}

.nsio-root.is-fullscreen .nsio-side-transform dt{
    font-size:9px;
}

.nsio-root.is-fullscreen .nsio-side-transform dd{
    font-size:12px;
    line-height:1.45;
}

.nsio-side-status{
    border-top:1px solid var(--nsio-line);
    color:var(--nsio-muted);
    display:flex;
    flex-wrap:wrap;
    font-size:10px;
    font-weight:800;
    gap:8px 15px;
    justify-content:space-between;
    margin-top:auto;
    padding-top:18px;
}

.nsio-root.is-fullscreen .nsio-legend-wrap{
    padding:9px 15px 12px;
}

@container (max-width:1120px){
    .nsio-bubble{
        width:min(38%,420px);
    }
}

@container (max-width:920px){
    .nsio-topbar{
        gap:10px;
    }

    .nsio-brand-logo{
        height:40px;
        width:124px;
    }

    .nsio-heading{
        gap:10px;
    }

    .nsio-heading-copy{
        padding-left:10px;
    }

    .nsio-heading-copy strong{
        font-size:19px;
    }

    .nsio-control{
        min-height:36px;
        padding:7px 10px;
    }

    .nsio-bubble{
        bottom:12px;
        max-width:370px;
        padding:12px 13px 15px;
        width:min(40%,370px);
    }

    .nsio-bubble.is-right{
        right:12px;
    }

    .nsio-bubble.is-left{
        left:12px;
    }

    .nsio-bubble-number{
        font-size:17px;
        height:34px;
        width:34px;
    }

    .nsio-bubble h3{
        font-size:19px;
    }

    .nsio-summary{
        font-size:10.5px;
        line-height:1.42;
        margin:8px 0 9px;
    }

    .nsio-transform > div{
        gap:7px;
        grid-template-columns:78px minmax(0,1fr);
        padding-top:5px;
    }

    .nsio-transform > div + div{
        margin-top:5px;
    }

    .nsio-transform dt{
        font-size:7.5px;
    }

    .nsio-transform dd{
        font-size:9px;
        line-height:1.3;
    }
}

@container (max-width:760px){
    .nsio-topbar{
        min-height:56px;
        padding:7px 9px 7px 11px;
    }

    .nsio-brand-logo{
        height:38px;
        width:112px;
    }

    .nsio-heading-copy strong{
        font-size:17px;
    }

    .nsio-heading-copy [data-role="status"]{
        font-size:9px;
    }

    .nsio-control{
        height:36px;
        min-height:36px;
        padding:0;
        width:38px;
    }

    .nsio-control > span:last-child{
        display:none;
    }

    .nsio-stage{
        aspect-ratio:auto;
        display:flex;
        flex-direction:column;
        overflow:visible;
    }

    .nsio-viewport{
        aspect-ratio:1672 / 850;
        flex:0 0 auto;
        inset:auto;
        position:relative;
        width:100%;
    }

    .nsio-bubble,
    .nsio-bubble.is-left,
    .nsio-bubble.is-right{
        bottom:auto;
        left:auto;
        margin:10px;
        max-height:none;
        max-width:none;
        overflow:visible;
        position:relative;
        right:auto;
        top:auto;
        width:auto;
    }

    .nsio-summary{
        font-size:12px;
    }

    .nsio-transform > div{
        grid-template-columns:92px minmax(0,1fr);
    }

    .nsio-transform dd{
        font-size:10px;
    }

    .nsio-marker{
        height:44px;
        padding:7px;
        width:44px;
    }

    .nsio-marker-base,
    .nsio-marker-highlight{
        font-size:13px;
        height:30px;
        width:30px;
    }


    .nsio-legend{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }

    .nsio-legend-button{
        flex:0 1 calc(25% - 5px);
        min-width:0;
    }

    .nsio-root.is-fullscreen .nsio-main{
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:minmax(0,1fr) auto;
    }

    .nsio-root.is-fullscreen .nsio-canvas-area{
        min-height:0;
        padding:10px;
    }

    .nsio-root.is-fullscreen .nsio-side-panel{
        border-left:0;
        border-top:1px solid var(--nsio-line);
        max-height:38dvh;
        padding:14px 16px 12px;
    }

    .nsio-root.is-fullscreen .nsio-side-summary{
        font-size:12px;
        margin:10px 0 12px;
    }

    .nsio-root.is-fullscreen .nsio-side-transform{
        display:grid;
        gap:8px;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .nsio-root.is-fullscreen .nsio-side-transform > div,
    .nsio-root.is-fullscreen .nsio-side-transform > div + div{
        border:1px solid var(--nsio-line-warm);
        border-radius:10px;
        display:block;
        margin:0;
        padding:8px;
    }

    .nsio-root.is-fullscreen .nsio-side-transform dd{
        font-size:10px;
        margin-top:4px;
    }
}

@container (max-width:560px){
    .nsio-heading-copy{
        display:none;
    }

    .nsio-brand-logo{
        height:36px;
        width:105px;
    }

    .nsio-top-actions{
        gap:5px;
    }

    .nsio-control{
        height:34px;
        min-height:34px;
        width:35px;
    }

    .nsio-legend-button{
        min-height:42px;
        padding:5px 6px;
    }

    .nsio-legend-label{
        font-size:9.5px;
    }

    .nsio-root.is-fullscreen .nsio-side-transform{
        grid-template-columns:minmax(0,1fr);
    }
}

@media (prefers-reduced-motion:reduce){
    .nsio-root[data-nsio-journey] *,
    .nsio-root[data-nsio-journey] *::before,
    .nsio-root[data-nsio-journey] *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
    }
}

@keyframes nsio-dash{
    to{stroke-dashoffset:-46}
}

@keyframes nsio-impact{
    0%,100%{opacity:.55;transform:scale(.78)}
    50%{opacity:1;transform:scale(1.14)}
}

@keyframes nsio-ring{
    0%,100%{opacity:.72;transform:scale(.98)}
    50%{opacity:1;transform:scale(1.025)}
}

@keyframes nsio-spark{
    0%,100%{opacity:.4;transform:scale(.72)}
    50%{opacity:1;transform:scale(1.16)}
}

@keyframes nsio-pupil{
    0%,100%{transform:scale(.78)}
    50%{transform:scale(1.18)}
}

@keyframes nsio-lens{
    0%,100%{transform:scaleX(.82)}
    50%{transform:scaleX(1.16)}
}

@keyframes nsio-wave{
    0%{opacity:.82;transform:scale(.72)}
    100%{opacity:0;transform:scale(1.2)}
}

@keyframes nsio-marker-pulse{
    0%,100%{transform:scale(.86)}
    50%{transform:scale(1.08)}
}

/* On tablet-sized full-screen layouts, keep the artwork large by moving the
   explanation below it instead of compressing the image into a narrow column. */
@container (max-width:1050px){
    .nsio-root.is-fullscreen .nsio-main{
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:minmax(0,1fr) auto;
    }

    .nsio-root.is-fullscreen .nsio-canvas-area{
        min-height:0;
        padding:12px;
    }

    .nsio-root.is-fullscreen .nsio-side-panel{
        border-left:0;
        border-top:1px solid var(--nsio-line);
        max-height:37dvh;
        padding:14px 18px 13px;
    }

    .nsio-root.is-fullscreen .nsio-side-summary{
        font-size:12px;
        margin:10px 0 12px;
    }

    .nsio-root.is-fullscreen .nsio-side-transform{
        display:grid;
        gap:8px;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .nsio-root.is-fullscreen .nsio-side-transform > div,
    .nsio-root.is-fullscreen .nsio-side-transform > div + div{
        border:1px solid var(--nsio-line-warm);
        border-radius:10px;
        display:block;
        margin:0;
        padding:8px;
    }

    .nsio-root.is-fullscreen .nsio-side-transform dd{
        font-size:10px;
        margin-top:4px;
    }
}

/* -------------------------------------------------------------------------
   9senses dark-compatible presentation — v0.8.1
   The host remains transparent so the site's own dark section is visible.
   Only the anatomical viewport stays bright.
   ------------------------------------------------------------------------- */
.nsio-root[data-nsio-journey]{
    --nsio-navy:#061326;
    --nsio-navy-2:#071a31;
    --nsio-ink:#f1f1f1;
    --nsio-muted:rgba(255,255,255,.64);
    --nsio-teal:#30ce7c;
    --nsio-teal-dark:#30ce7c;
    --nsio-cyan:#0c71c3;
    --nsio-paper:rgba(4,10,22,.78);
    --nsio-warm:transparent;
    --nsio-white:#fff;
    --nsio-line:rgba(255,255,255,.16);
    --nsio-line-warm:rgba(255,255,255,.12);
    --nsio-shadow:none;
    --nsio-display:"Special Elite","Courier Prime",Georgia,serif;
    --nsio-sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--nsio-ink);
}

.nsio-shell{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
}

.nsio-topbar{
    background:transparent;
    border:0;
    gap:20px;
    min-height:58px;
    padding:4px 0 10px;
}

.nsio-heading{
    gap:0;
}

.nsio-heading-copy{
    border:0;
    gap:0;
    padding:0;
}

.nsio-heading-copy strong{
    color:#f1f1f1;
    font-size:clamp(24px,2.15vw,34px);
    letter-spacing:.015em;
    line-height:1.08;
    text-shadow:0 0 18px rgba(12,113,195,.16);
}

.nsio-top-actions{
    gap:8px;
}

.nsio-control{
    background:rgba(3,8,18,.18);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    color:#f1f1f1;
    font-size:12px;
    font-weight:750;
    min-height:38px;
    padding:8px 14px;
    transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s ease,box-shadow .35s ease;
}

.nsio-control:hover{
    background:rgba(255,255,255,.055);
    border-color:rgba(48,206,124,.72);
    color:#fff;
    box-shadow:0 0 18px rgba(48,206,124,.12);
    transform:translateY(-1px);
}

.nsio-control-primary{
    background:rgba(48,206,124,.09);
    border-color:rgba(48,206,124,.58);
    color:#fff;
}

.nsio-control-primary:hover{
    background:rgba(48,206,124,.15);
    border-color:#30ce7c;
    color:#fff;
}

.nsio-control-primary .nsio-control-icon{
    color:#30ce7c;
    text-shadow:0 0 11px rgba(48,206,124,.48);
}

/* Audio (narration) toggle — speaker icon drawn via a mask so it follows
   currentColor. Off by default; turns green when enabled. The text label is
   hidden in the embedded view (icon-only) and shown in full screen. */
.nsio-audio-toggle[hidden]{
    display:none !important;
}
.nsio-audio-icon{
    background-color:currentColor;
    display:inline-block;
    height:1.05em;
    width:1.05em;
    transform:translateY(-0.07em);
    -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%209v6h4l5%204V5L8%209H4z%27/%3E%3Cpath%20d%3D%27M16%208.6a4%204%200%200%201%200%206.8%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M18.7%206a7.6%207.6%200%200%201%200%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
    mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%209v6h4l5%204V5L8%209H4z%27/%3E%3Cpath%20d%3D%27M16%208.6a4%204%200%200%201%200%206.8%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M18.7%206a7.6%207.6%200%200%201%200%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E");
}
.nsio-audio-toggle.is-on{
    border-color:#30ce7c;
    color:#30ce7c;
}
.nsio-audio-label{
    display:none;
}
.nsio-root.is-fullscreen .nsio-audio-label{
    display:inline;
}

/* The play/pause icon is drawn in CSS rather than as a font glyph: the old
   ▶ and Ⅱ characters sit at different heights inside their em boxes, so they
   never lined up with the label. These shapes are vertically symmetric inside
   the icon box, so flexbox centring keeps them on the label's centre line. */
.nsio-control-primary .nsio-control-icon{
    align-items:center;
    display:inline-flex;
    gap:.2em;
    height:1em;
    justify-content:center;
    line-height:1;
    min-width:0;
    transform:translateY(-0.07em);
    width:1.05em;
}
.nsio-control-primary .nsio-control-icon::before,
.nsio-control-primary .nsio-control-icon::after{
    content:"";
    display:block;
}
/* Paused → a single right-pointing play triangle. */
.nsio-control-primary:not(.is-playing) .nsio-control-icon{
    gap:0;
}
.nsio-control-primary:not(.is-playing) .nsio-control-icon::before{
    border-color:transparent transparent transparent currentColor;
    border-style:solid;
    border-width:.5em 0 .5em .82em;
    height:0;
    width:0;
}
.nsio-control-primary:not(.is-playing) .nsio-control-icon::after{
    display:none;
}
/* Playing → two pause bars. */
.nsio-control-primary.is-playing .nsio-control-icon::before,
.nsio-control-primary.is-playing .nsio-control-icon::after{
    background:currentColor;
    border-radius:1px;
    height:.92em;
    width:.26em;
}

.nsio-root[data-nsio-journey] button:focus-visible{
    outline:2px solid #30ce7c;
    outline-offset:3px;
}

.nsio-main,
.nsio-canvas-area,
.nsio-stage{
    background:transparent;
}

.nsio-viewport{
    background:#fbfaf8;
    border:1px solid rgba(255,255,255,.22);
    border-radius:18px;
    box-shadow:0 24px 58px rgba(0,0,0,.28),0 0 0 1px rgba(12,113,195,.08);
    overflow:hidden;
}

.nsio-art{
    background:#fbfaf8;
}

/* The image itself stays fully bright; only the active outline and mechanism
   animation change. */
.nsio-dim-layer{
    display:block;
}

.nsio-focus-box{
    fill:none;
    stroke:#30ce7c;
    stroke-width:1.4;
    opacity:.34;
}

.nsio-focus-bracket{
    fill:none;
    stroke:#30ce7c;
    stroke-width:3.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.nsio-transition-particles{
    display:block;
    height:100%;
    inset:0;
    pointer-events:none;
    position:absolute;
    width:100%;
    z-index:4;
}

.nsio-highlight{
    color:#0c71c3;
    filter:drop-shadow(0 0 8px rgba(12,113,195,.62)) drop-shadow(0 0 16px rgba(48,206,124,.16));
}

.nsio-signal-neural,
.nsio-cortex-branch{
    stroke:#30ce7c;
}

.nsio-guide{
    opacity:.24;
}

.nsio-guide-line{
    stroke:rgba(6,19,38,.64);
}

.nsio-guide-dot{
    fill:#071a31;
    stroke:rgba(255,255,255,.94);
}

.nsio-guide.is-active .nsio-guide-line{
    stroke:#30ce7c;
}

.nsio-guide.is-active .nsio-guide-dot{
    fill:#30ce7c;
    stroke:#fff;
    filter:drop-shadow(0 0 7px rgba(48,206,124,.62));
}

.nsio-marker-base{
    background:#071a31;
    border-color:rgba(255,255,255,.96);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
}

.nsio-marker-highlight{
    background:#30ce7c;
    border-color:#fff;
    box-shadow:0 0 0 5px rgba(48,206,124,.18),0 0 22px rgba(48,206,124,.48),0 5px 18px rgba(0,0,0,.34);
    color:#fff;
    text-shadow:0 1px 2px rgba(4,16,31,.55);
}

.nsio-marker-halo{
    border-color:rgba(48,206,124,.84);
    box-shadow:0 0 18px rgba(48,206,124,.3);
}

.nsio-bubble{
    -webkit-backdrop-filter:blur(12px) saturate(115%);
    backdrop-filter:blur(12px) saturate(115%);
    background:rgba(4,10,22,.84);
    border:1px solid rgba(255,255,255,.17);
    border-left:3px solid #30ce7c;
    border-radius:0 16px 16px 0;
    box-shadow:0 20px 46px rgba(0,0,0,.34),0 0 28px rgba(12,113,195,.08);
    color:#f1f1f1;
}

.nsio-bubble.is-right{
    border-left:3px solid #30ce7c;
    border-radius:0 16px 16px 0;
}

.nsio-bubble.is-left{
    border-left:0;
    border-right:3px solid #30ce7c;
    border-radius:16px 0 0 16px;
}

.nsio-bubble-number,
.nsio-side-number{
    background:rgba(255,255,255,.055);
    border:1px solid rgba(48,206,124,.48);
    border-radius:50%;
    color:#30ce7c;
    text-shadow:0 0 11px rgba(48,206,124,.46);
}

.nsio-phase{
    color:#30ce7c;
    text-shadow:0 0 10px rgba(48,206,124,.26);
}

.nsio-bubble h3,
.nsio-side-panel h3{
    color:#fff;
    letter-spacing:.02em;
    text-shadow:0 0 14px rgba(0,0,0,.36);
}

.nsio-summary,
.nsio-side-summary{
    color:rgba(255,255,255,.78);
}

.nsio-transform > div,
.nsio-side-transform > div{
    border-top-color:rgba(255,255,255,.12);
}

.nsio-transform dt,
.nsio-side-transform dt{
    color:rgba(255,255,255,.47);
}

.nsio-transform dd,
.nsio-side-transform dd{
    color:rgba(255,255,255,.88);
}

.nsio-read-progress{
    background:rgba(255,255,255,.10);
}

.nsio-read-progress i{
    background:linear-gradient(90deg,#30ce7c,#0c71c3);
    box-shadow:0 0 10px rgba(48,206,124,.38);
}

.nsio-legend-wrap{
    background:transparent;
    border:0;
    overflow:visible;
    padding:10px 2px 4px 10px;
}

.nsio-legend{
    gap:9px;
    align-items:stretch;
    align-content:flex-start;
}

.nsio-legend-button{
    background:rgba(3,8,18,.16);
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    color:rgba(255,255,255,.62);
    min-height:46px;
    padding:6px 9px 7px 11px;
    transition:background var(--nsio-state-fade) var(--nsio-fade-ease),border-color var(--nsio-state-fade) var(--nsio-fade-ease),color var(--nsio-state-fade) var(--nsio-fade-ease),box-shadow var(--nsio-state-fade) var(--nsio-fade-ease),transform .28s ease;
}

.nsio-legend-button:hover{
    background:rgba(255,255,255,.045);
    border-color:rgba(48,206,124,.5);
    color:#fff;
}

.nsio-legend-number{
    background:rgba(255,255,255,.09);
    color:rgba(255,255,255,.54);
    height:15px;
    width:15px;
    left:0;
    box-shadow:0 1px 4px rgba(3,8,18,.45);
}

.nsio-legend-label{
    font-family:var(--nsio-display);
    font-size:11.4px;
    font-weight:400;
    letter-spacing:.025em;
    text-align:left;
}

.nsio-legend-button.is-active{
    background:linear-gradient(90deg,rgba(48,206,124,.14),rgba(12,113,195,.08));
    border-color:rgba(48,206,124,.76);
    box-shadow:inset 2px 0 0 #30ce7c,0 0 20px rgba(48,206,124,.08);
    color:#fff;
}

.nsio-legend-button.is-active .nsio-legend-number{
    background:#30ce7c;
    box-shadow:0 0 0 4px rgba(48,206,124,.13),0 0 14px rgba(48,206,124,.34);
    color:#04101f;
}

.nsio-root.is-fullscreen .nsio-shell,
.nsio-root.is-fullscreen .nsio-topbar,
.nsio-root.is-fullscreen .nsio-legend-wrap{
    background:transparent;
}

.nsio-root.is-fullscreen .nsio-topbar{
    border-bottom:1px solid rgba(255,255,255,.10);
}

.nsio-root.is-fullscreen .nsio-canvas-area{
    background:transparent;
}

.nsio-root.is-fullscreen .nsio-viewport{
    background:#fbfaf8;
    border:1px solid rgba(255,255,255,.20);
    box-shadow:0 26px 70px rgba(0,0,0,.4),0 0 46px rgba(12,113,195,.08);
}

.nsio-root.is-fullscreen .nsio-side-panel{
    -webkit-backdrop-filter:blur(18px) saturate(115%);
    backdrop-filter:blur(18px) saturate(115%);
    background:rgba(4,10,22,.70);
    border-left:1px solid rgba(255,255,255,.12);
    color:#f1f1f1;
}

.nsio-root.is-fullscreen .nsio-side-number{
    background:rgba(48,206,124,.10);
    border-color:rgba(48,206,124,.62);
    color:#30ce7c;
}

.nsio-side-status{
    border-top-color:rgba(255,255,255,.12);
    color:rgba(255,255,255,.52);
}

@container (max-width:760px){
    .nsio-topbar{
        padding-left:0;
        padding-right:0;
    }

    .nsio-bubble,
    .nsio-bubble.is-left,
    .nsio-bubble.is-right{
        border:1px solid rgba(255,255,255,.16);
        border-top:3px solid #30ce7c;
        border-radius:14px;
    }

    .nsio-legend-wrap{
        padding-top:8px;
    }

    .nsio-root.is-fullscreen .nsio-side-panel{
        border-left:0;
        border-top:1px solid rgba(255,255,255,.12);
    }
}


/* Gradient information rails mirror the other 9senses explainers while the
   panel bodies remain translucent. */
.nsio-bubble{
    border-left:1px solid rgba(255,255,255,.17);
    border-right:1px solid rgba(255,255,255,.17);
}

.nsio-bubble::before,
.nsio-root.is-fullscreen .nsio-side-panel::before{
    background:linear-gradient(180deg,#30ce7c,#0c71c3);
    box-shadow:0 0 16px rgba(48,206,124,.42),0 0 28px rgba(12,113,195,.18);
    content:"";
    position:absolute;
    width:3px;
}

.nsio-bubble::before{
    bottom:0;
    left:0;
    top:0;
}

.nsio-bubble.is-left::before{
    left:auto;
    right:0;
}

.nsio-root.is-fullscreen .nsio-side-panel{
    position:relative;
}

.nsio-root.is-fullscreen .nsio-side-panel::before{
    bottom:0;
    left:0;
    top:0;
}

@container (max-width:760px){
    .nsio-bubble::before,
    .nsio-bubble.is-left::before{
        background:linear-gradient(90deg,#30ce7c,#0c71c3);
        bottom:auto;
        height:3px;
        left:0;
        right:0;
        top:0;
        width:auto;
    }

    .nsio-root.is-fullscreen .nsio-side-panel::before{
        background:linear-gradient(90deg,#30ce7c,#0c71c3);
        bottom:auto;
        height:3px;
        left:0;
        right:0;
        top:0;
        width:auto;
    }
}

@container (max-width:560px){
    .nsio-heading-copy{
        display:grid;
    }

    .nsio-heading-copy strong{
        font-size:16px;
        max-width:42vw;
    }
}


/* v0.8.1 — CD typography alignment with the Computer Vision explainer */
.nsio-root[data-nsio-journey]{
    font-family:var(--nsio-sans);
}

.nsio-heading-copy strong{
    font-family:var(--nsio-display) !important;
    font-size:clamp(27px,2.7vw,38px);
    font-weight:400 !important;
    letter-spacing:.02em;
    line-height:1.1 !important;
}

.nsio-control{
    font-family:var(--nsio-sans);
    font-size:13.2px;
    font-weight:500;
    letter-spacing:0;
}

.nsio-bubble{
    border-left-width:3px;
}

.nsio-bubble.is-right{border-left-width:3px;}
.nsio-bubble.is-left{border-right-width:3px;}

.nsio-phase{
    font-family:var(--nsio-sans);
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
}

.nsio-bubble h3,
.nsio-side-panel h3{
    font-family:var(--nsio-display) !important;
    font-size:clamp(18px,1.42vw,22px);
    font-weight:400 !important;
    letter-spacing:.02em;
    line-height:1.18 !important;
    text-shadow:0 0 14px rgba(0,0,0,.48);
}

.nsio-summary,
.nsio-side-summary{
    font-family:var(--nsio-sans);
    font-size:13.65px;
    font-weight:400;
    line-height:1.54;
}

.nsio-transform dt,
.nsio-side-transform dt{
    font-family:var(--nsio-sans);
    font-size:10px;
    font-weight:700;
    letter-spacing:.075em;
}

.nsio-transform dd,
.nsio-side-transform dd{
    font-family:var(--nsio-sans);
    font-size:12.1px;
    font-weight:500;
    line-height:1.42;
}

.nsio-legend-number{
    font-family:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
}

.nsio-legend-label{
    font-family:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:0;
    line-height:1.22;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;
    overflow-wrap:break-word;
    word-break:normal;
}

.nsio-root.is-fullscreen .nsio-side-panel{
    font-family:var(--nsio-sans);
}

@container (max-width:760px){
    .nsio-heading-copy strong{font-size:22px;}
    .nsio-bubble h3{font-size:18px;}
    .nsio-summary{font-size:12.4px;}
    .nsio-transform dd{font-size:10.8px;}
    .nsio-legend-label{font-size:10.5px;}
}

/* v0.8.2 — top controls aligned with the Computer Vision visual language.
   The controls are no longer generic app buttons. They become quiet, transparent
   text controls with small signal-like accents, matching the site's dark explainer
   grammar while keeping keyboard accessibility. */
.nsio-topbar{
    align-items:flex-start;
    min-height:0;
    padding:0 0 13px;
}

.nsio-heading-copy strong{
    margin-top:0;
}

.nsio-top-actions{
    align-items:center;
    align-self:center;
    gap:17px;
    padding-top:2px;
}

.nsio-control{
    align-items:center;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    color:rgba(255,255,255,.62);
    display:inline-flex;
    font-family:var(--nsio-display) !important;
    font-size:14px;
    font-weight:400;
    gap:7px;
    letter-spacing:.035em;
    line-height:1;
    min-height:28px;
    padding:4px 0 6px;
    position:relative;
    text-shadow:0 0 12px rgba(0,0,0,.34);
    transition:color .5s ease,text-shadow .5s ease,opacity .5s ease;
}

.nsio-control::after{
    background:linear-gradient(90deg,#30ce7c,#0c71c3);
    bottom:0;
    box-shadow:0 0 10px rgba(48,206,124,.24);
    content:"";
    height:1px;
    left:0;
    opacity:.18;
    position:absolute;
    right:0;
    transform:scaleX(.18);
    transform-origin:left center;
    transition:opacity .5s ease,transform .5s ease;
}

.nsio-control + .nsio-control::before{
    background:rgba(255,255,255,.12);
    content:"";
    height:18px;
    left:-9px;
    position:absolute;
    top:5px;
    width:1px;
}

.nsio-control:hover,
.nsio-control:focus-visible{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
    color:#fff;
    transform:none;
    text-shadow:0 0 14px rgba(48,206,124,.14),0 0 18px rgba(12,113,195,.12);
}

.nsio-control:hover::after,
.nsio-control:focus-visible::after{
    opacity:.9;
    transform:scaleX(1);
}

.nsio-control-primary,
.nsio-control-primary:hover,
.nsio-control-primary:focus-visible{
    background:transparent;
    border-color:transparent;
    color:#fff;
}

.nsio-control-primary::after{
    opacity:.45;
    transform:scaleX(.38);
}

.nsio-control-icon{
    color:#30ce7c;
    display:inline-flex;
    font-family:var(--nsio-sans) !important;
    font-size:13px;
    font-weight:600;
    justify-content:center;
    min-width:13px;
    opacity:.95;
    text-shadow:0 0 10px rgba(48,206,124,.42);
}

.nsio-expand-icon{
    color:#30ce7c;
    height:12px;
    width:12px;
}

.nsio-expand-icon::before,
.nsio-expand-icon::after{
    border-width:1.4px 0 0 1.4px;
}

.nsio-expand-icon::after{
    border-width:0 1.4px 1.4px 0;
}

.nsio-root.is-fullscreen .nsio-topbar{
    align-items:center;
    padding:16px 22px 13px;
}

.nsio-root.is-fullscreen .nsio-close{
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    font-family:var(--nsio-sans) !important;
    font-size:22px;
    height:34px;
    line-height:1;
    min-height:34px;
    padding:0;
    width:34px;
}

.nsio-root.is-fullscreen .nsio-close::after{
    display:none;
}

.nsio-root.is-fullscreen .nsio-close::before{
    display:none;
}

/* The × glyph is centred in its circle, but the no-descender control labels
   (Pause / Full screen) sit a hair higher in their line box, so a box-centred ×
   reads slightly low next to them. Lift just the glyph onto the same optical
   line (the circle itself stays put). */
.nsio-close-x{
    display:inline-block;
    line-height:1;
    transform:translateY(-0.06em);
}

@container (max-width:760px){
    .nsio-topbar{
        align-items:flex-start;
        gap:10px;
        padding-bottom:10px;
    }

    .nsio-top-actions{
        gap:13px;
    }

    .nsio-control{
        font-size:12.8px;
    }

    .nsio-control + .nsio-control::before{
        left:-7px;
    }
}

@container (max-width:560px){
    .nsio-topbar{
        align-items:flex-start;
    }

    .nsio-top-actions{
        flex-wrap:wrap;
        justify-content:flex-end;
        row-gap:6px;
    }
}


/* Hearing first pass: sound/mechanical/fluid signal animations. */
.nsio-signal-sound{
    stroke:#0c71c3;
    stroke-dasharray:11 13;
    filter:drop-shadow(0 0 7px rgba(12,113,195,.44));
}
.nsio-signal-mechanical{
    stroke:#dea332;
    stroke-dasharray:7 11;
    filter:drop-shadow(0 0 7px rgba(222,163,50,.36));
}
.nsio-signal-fluid{
    stroke:#9f5fe8;
    stroke-dasharray:9 12;
    filter:drop-shadow(0 0 8px rgba(159,95,232,.35));
}
.nsio-wave-arc{
    fill:none;
    stroke:#30ce7c;
    stroke-width:4;
    stroke-linecap:round;
    opacity:.38;
    animation:nsio-hearing-wave 2.3s ease-in-out infinite;
    vector-effect:non-scaling-stroke;
}
.nsio-wave-arc.nsio-delay-one{animation-delay:.35s;}
.nsio-wave-arc.nsio-delay-two{animation-delay:.7s;}
.nsio-eardrum-vibe{
    fill:none;
    stroke:#30ce7c;
    stroke-width:7;
    stroke-linecap:round;
    filter:drop-shadow(0 0 12px rgba(48,206,124,.42));
    animation:nsio-eardrum-vibe 1.35s ease-in-out infinite;
    transform-origin:620px 405px;
    vector-effect:non-scaling-stroke;
}
.nsio-ossicle-node{
    fill:rgba(222,163,50,.32);
    stroke:#dea332;
    stroke-width:5;
    animation:nsio-ossicle-rock 1.45s ease-in-out infinite;
    filter:drop-shadow(0 0 9px rgba(222,163,50,.38));
    vector-effect:non-scaling-stroke;
}
.nsio-cochlea-ring{
    fill:none;
    stroke:#9f5fe8;
    stroke-width:7;
    stroke-dasharray:16 12;
    animation:nsio-dash 3s linear infinite;
    filter:drop-shadow(0 0 12px rgba(159,95,232,.34));
    vector-effect:non-scaling-stroke;
}
.nsio-cochlea-peak{
    fill:#30ce7c;
    opacity:.78;
    filter:drop-shadow(0 0 10px rgba(48,206,124,.58));
    animation:nsio-retina-pulse 1.6s ease-in-out infinite;
}
.nsio-hair-bundle line{
    stroke:#30ce7c;
    stroke-width:5;
    stroke-linecap:round;
    filter:drop-shadow(0 0 8px rgba(48,206,124,.42));
    animation:nsio-hair-sway 1.35s ease-in-out infinite;
    transform-origin:center bottom;
    vector-effect:non-scaling-stroke;
}
.nsio-hair-bundle line:nth-child(2n){animation-delay:.16s;}
.nsio-hair-bundle line:nth-child(3n){animation-delay:.31s;}
.nsio-auditory-branch{
    fill:none;
    stroke:#30ce7c;
    stroke-width:8;
    stroke-linecap:round;
    stroke-dasharray:14 16;
    animation:nsio-dash 2.6s linear infinite;
    filter:drop-shadow(0 0 12px rgba(48,206,124,.34));
    vector-effect:non-scaling-stroke;
}
.nsio-brain-ring{
    fill:none;
    stroke:#30ce7c;
    stroke-width:6;
    opacity:.54;
    animation:nsio-cortex-wave 2.4s ease-in-out infinite;
    transform-origin:center;
    vector-effect:non-scaling-stroke;
}
@keyframes nsio-hearing-wave{
    0%,100%{opacity:.22;transform:translateX(-10px) scale(.96);}
    50%{opacity:.62;transform:translateX(14px) scale(1.03);}
}
@keyframes nsio-eardrum-vibe{
    0%,100%{transform:skewX(-1.5deg) scaleX(.98);opacity:.78;}
    50%{transform:skewX(2.2deg) scaleX(1.04);opacity:1;}
}
@keyframes nsio-ossicle-rock{
    0%,100%{transform:translate(-2px,1px);}
    50%{transform:translate(3px,-2px);}
}
@keyframes nsio-hair-sway{
    0%,100%{transform:rotate(-3deg);opacity:.72;}
    50%{transform:rotate(4.5deg);opacity:1;}
}

/* -------------------------------------------------------------------------
   v1.5.0 / v1.5.1 — Full-screen presentation scale.
   On wide viewports (the root fills the screen in full-screen, so the
   container query measures the full width) the chrome was rendered at the
   small embedded size and looked stranded. This block scales the header,
   controls, side-panel text and legend up together so full-screen reads as a
   presentation. Legend + side-panel body text use container-query units (cqw)
   so they keep growing on larger displays, with px floors/ceilings.
   Narrow full-screen keeps the existing @container max-width overrides below
   1121px.
   ------------------------------------------------------------------------- */
@container (min-width:1121px){
    /* Header band — taller, title sits lower, larger title. */
    .nsio-root.is-fullscreen .nsio-topbar{
        align-items:center;
        gap:26px;
        min-height:clamp(72px,4.6cqw,96px);
        padding:clamp(18px,1.6cqw,28px) clamp(30px,2.4cqw,48px) clamp(10px,0.9cqw,16px);
    }
    .nsio-root.is-fullscreen .nsio-heading-copy strong{
        font-size:clamp(34px,2.8vw,48px);
        line-height:1.04;
    }
    .nsio-root.is-fullscreen .nsio-canvas-area{
        padding:clamp(6px,0.6cqw,12px) clamp(12px,1cqw,20px);
    }

    /* Top controls — bigger Pause pill + round close button. Icon and label
       share a single line-height so the glyph sits on the text's centre. */
    .nsio-root.is-fullscreen .nsio-control{
        align-items:center;
        font-size:15px;
        gap:9px;
        line-height:1;
        min-height:48px;
        padding:11px 21px;
    }
    .nsio-root.is-fullscreen .nsio-control-icon{
        align-items:center;
        display:inline-flex;
        font-size:15px;
        line-height:1;
        min-width:13px;
    }
    .nsio-root.is-fullscreen .nsio-control > span:not(.nsio-control-icon){
        line-height:1;
    }
    .nsio-root.is-fullscreen .nsio-close{
        font-size:29px;
        height:46px;
        line-height:1;
        min-height:46px;
        width:46px;
    }

    /* Explainer side panel — enlarged but kept compact enough to fit the panel
       height without a scrollbar. */
    .nsio-root.is-fullscreen .nsio-main{
        grid-template-columns:minmax(0,1fr) clamp(360px,25cqw,520px);
    }
    .nsio-root.is-fullscreen .nsio-side-panel{
        padding:30px 32px 22px;
    }
    .nsio-root.is-fullscreen .nsio-side-heading{
        gap:15px;
    }
    .nsio-root.is-fullscreen .nsio-side-number{
        align-items:center;
        display:flex;
        font-family:var(--nsio-sans);
        font-size:clamp(20px,1.4cqw,27px);
        font-weight:800;
        height:clamp(46px,3cqw,58px);
        justify-content:center;
        line-height:1;
        width:clamp(46px,3cqw,58px);
    }
    .nsio-root.is-fullscreen .nsio-phase{
        font-size:clamp(11px,0.78cqw,13.5px);
        letter-spacing:.15em;
        margin:2px 0 5px;
    }
    .nsio-root.is-fullscreen .nsio-side-panel h3{
        font-size:clamp(28px,2.05cqw,40px);
    }
    .nsio-root.is-fullscreen .nsio-side-summary{
        font-size:clamp(14.5px,0.92cqw,18px);
        line-height:1.52;
        margin:16px 0;
    }
    .nsio-root.is-fullscreen .nsio-side-transform > div{
        gap:16px;
        grid-template-columns:clamp(94px,6.6cqw,120px) minmax(0,1fr);
        padding-top:12px;
    }
    .nsio-root.is-fullscreen .nsio-side-transform > div + div{
        margin-top:12px;
    }
    .nsio-root.is-fullscreen .nsio-side-transform dt{
        font-size:clamp(10.5px,0.7cqw,13px);
        letter-spacing:.1em;
    }
    .nsio-root.is-fullscreen .nsio-side-transform dd{
        font-size:clamp(14px,0.93cqw,18px);
        line-height:1.44;
    }
    .nsio-root.is-fullscreen .nsio-side-status{
        font-size:clamp(11.5px,0.74cqw,14px);
        justify-content:flex-end;
        padding-top:18px;
    }
    .nsio-root.is-fullscreen .nsio-side-status [data-role="panel-count"]{
        display:none;
    }

    /* Legend — scaled buttons, lifted off the bottom edge. Full-screen has room
       to spare, so the number returns to a normal inline chip (fully visible,
       not half-out) with a real gap before the label. Container units keep it
       growing on larger displays. */
    .nsio-root.is-fullscreen .nsio-legend-wrap{
        padding:clamp(10px,0.9cqw,16px) 34px clamp(12px,1.1cqw,20px);
    }
    .nsio-root.is-fullscreen .nsio-legend{
        gap:11px;
    }
    .nsio-root.is-fullscreen .nsio-legend-button{
        align-items:center;
        border-radius:13px;
        gap:clamp(9px,0.7cqw,13px);
        min-height:clamp(50px,3.4cqw,64px);
        padding:clamp(8px,0.65cqw,12px) clamp(13px,0.95cqw,18px);
    }
    .nsio-root.is-fullscreen .nsio-legend-number{
        position:static;
        transform:none;
        flex:0 0 auto;
        font-size:clamp(12px,0.82cqw,15px);
        height:clamp(24px,1.7cqw,31px);
        width:clamp(24px,1.7cqw,31px);
    }
    .nsio-root.is-fullscreen .nsio-legend-label{
        font-size:clamp(13.5px,0.98cqw,18px);
        line-height:1.2;
    }
}