.measurement-lab-card {
    box-sizing: border-box;
    border-color: rgba(14, 116, 144, .24);
    background: #f8fafc;
    color: #0f172a;
    min-width: 22rem;
    min-height: 31rem;
}

.measurement-lab-widget,
.mlab-shell {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.measurement-lab-widget {
    container-type: size;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.measurement-lab-widget *,
.measurement-lab-widget *::before,
.measurement-lab-widget *::after {
    box-sizing: border-box;
}

.measurement-lab-card.is-minimized .measurement-lab-widget,
.measurement-lab-card.is-minimized .js-widget-resize-handle,
.measurement-lab-card.is-minimized .measurement-lab-drag-edge-top,
.measurement-lab-card.is-minimized .measurement-lab-drag-edge-bottom,
.measurement-lab-card.is-minimized .measurement-lab-drag-edge-left,
.measurement-lab-card.is-minimized .measurement-lab-drag-edge-right {
    display: none !important;
}

.measurement-lab-card.is-minimized .js-minimized-label {
    color: #0f172a !important;
}

.mlab-shell {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .9rem;
    overflow: hidden;
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(236, 254, 255, .98), rgba(255, 255, 255, .98) 46%, rgba(240, 253, 244, .98));
}

.mlab-header,
.mlab-header-actions,
.mlab-activity-tabs,
.mlab-domain-tabs {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.mlab-header {
    justify-content: space-between;
}

.mlab-kicker {
    margin: 0 0 .1rem;
    color: #0e7490;
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mlab-header h2 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 950;
}

.mlab-header-actions label {
    display: grid;
    gap: .15rem;
    color: #475569;
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mlab-header select,
.mlab-field select,
.mlab-field input {
    min-height: 2.45rem;
    border: 1px solid #cbd5e1;
    border-radius: .55rem;
    background: #fff;
    padding: .45rem .65rem;
    color: #0f172a;
    font-size: .82rem;
    font-weight: 800;
}

.mlab-activity-tabs,
.mlab-domain-tabs {
    flex-wrap: wrap;
}

.mlab-activity-tabs button,
.mlab-domain-tabs button,
.mlab-button {
    border: 1px solid #cbd5e1;
    border-radius: .55rem;
    background: #fff;
    padding: .55rem .78rem;
    color: #334155;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
    touch-action: manipulation;
}

.mlab-activity-tabs button.is-active {
    border-color: #0e7490;
    background: #0e7490;
    color: #fff;
}

.mlab-domain-tabs button.is-active {
    border-color: #15803d;
    background: #dcfce7;
    color: #166534;
}

.mlab-workspace {
    display: grid;
    grid-template-columns: minmax(13rem, .75fr) minmax(19rem, 1.4fr);
    gap: .75rem;
    min-height: 0;
    flex: 1;
}

.mlab-panel {
    min-height: 0;
    overflow: auto;
    border: 1px solid #dbeafe;
    border-radius: .8rem;
    background: rgba(255, 255, 255, .9);
    padding: .85rem;
}

.mlab-control-panel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.mlab-visual-panel {
    display: grid;
    place-items: center;
}

.mlab-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 950;
}

.mlab-copy,
.mlab-feedback {
    margin: 0;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.45;
}

.mlab-feedback {
    min-height: 2.5rem;
    border-radius: .65rem;
    background: #f1f5f9;
    padding: .65rem;
}

.mlab-feedback.is-correct {
    background: #dcfce7;
    color: #166534;
}

.mlab-field {
    display: grid;
    gap: .25rem;
    color: #475569;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.mlab-slider {
    width: 100%;
    min-height: 2.75rem;
    accent-color: #0e7490;
    cursor: ew-resize;
    touch-action: none;
}

.mlab-button {
    border-color: #0e7490;
    background: #0e7490;
    color: #fff;
}

.mlab-button.secondary {
    border-color: #cbd5e1;
    background: #fff;
    color: #334155;
}

.mlab-reading {
    display: grid;
    gap: .8rem;
    width: min(100%, 34rem);
    text-align: center;
}

.mlab-reading-value {
    font-size: clamp(1.6rem, 8cqh, 3.3rem);
    font-weight: 950;
    color: #0f172a;
}

.mlab-ruler {
    position: relative;
    height: 8.5rem;
    border: .25rem solid #ca8a04;
    border-radius: .45rem;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), #713f12 calc(5% - 1px) 5%),
        linear-gradient(#fef08a, #fde047);
}

.mlab-ruler-marker {
    position: absolute;
    top: -.8rem;
    bottom: -.8rem;
    width: .3rem;
    border-radius: 999px;
    background: #dc2626;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.85);
}

.mlab-object-section {
    display: grid;
    gap: .4rem;
}

.mlab-object-instruction {
    margin: 0;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}

.mlab-object-tray {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem;
}

.mlab-object-card {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: .35rem;
    min-width: 0;
    min-height: 3.15rem;
    border: 1px solid #cbd5e1;
    border-radius: .55rem;
    background: #fff;
    padding: .35rem .45rem;
    color: #334155;
    font: inherit;
    font-size: .7rem;
    cursor: grab;
    touch-action: manipulation;
}

.mlab-object-card.is-selected {
    border-color: #0e7490;
    background: #ecfeff;
    color: #155e75;
    box-shadow: inset 0 0 0 1px #0e7490;
}

.mlab-object-shape {
    position: relative;
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    justify-self: center;
}

.mlab-object-apple {
    width: 1.9rem;
    height: 1.75rem;
    margin-top: .35rem;
    border-radius: 48% 52% 55% 45%;
    background: #ef4444;
    box-shadow: inset -.3rem -.25rem 0 rgba(127, 29, 29, .18);
}

.mlab-object-apple::before {
    content: "";
    position: absolute;
    top: -.45rem;
    left: .92rem;
    width: .2rem;
    height: .65rem;
    border-radius: 999px;
    background: #713f12;
    transform: rotate(15deg);
}

.mlab-object-apple::after {
    content: "";
    position: absolute;
    top: -.35rem;
    left: 1rem;
    width: .75rem;
    height: .38rem;
    border-radius: 100% 0 100% 0;
    background: #22c55e;
    transform: rotate(-18deg);
}

.mlab-object-book {
    border: .16rem solid #1d4ed8;
    border-left-width: .35rem;
    border-radius: .18rem;
    background: #60a5fa;
    box-shadow: inset 0 -.34rem 0 #eff6ff;
}

.mlab-object-book::after {
    content: "";
    position: absolute;
    top: .42rem;
    right: .35rem;
    left: .35rem;
    height: .18rem;
    border-radius: 999px;
    background: rgba(255,255,255,.8);
}

.mlab-object-lunchbox {
    height: 1.7rem;
    margin-top: .45rem;
    border: .16rem solid #b45309;
    border-radius: .35rem;
    background: #fbbf24;
}

.mlab-object-lunchbox::before {
    content: "";
    position: absolute;
    top: -.65rem;
    left: .55rem;
    width: .85rem;
    height: .65rem;
    border: .16rem solid #b45309;
    border-bottom: 0;
    border-radius: .4rem .4rem 0 0;
}

.mlab-object-backpack {
    height: 2rem;
    margin-top: .25rem;
    border: .16rem solid #5b21b6;
    border-radius: .65rem .65rem .35rem .35rem;
    background: #8b5cf6;
}

.mlab-object-backpack::before {
    content: "";
    position: absolute;
    top: -.45rem;
    left: .65rem;
    width: .65rem;
    height: .5rem;
    border: .16rem solid #5b21b6;
    border-bottom: 0;
    border-radius: .4rem .4rem 0 0;
}

.mlab-object-backpack::after {
    content: "";
    position: absolute;
    right: .32rem;
    bottom: .25rem;
    left: .32rem;
    height: .65rem;
    border-radius: .25rem;
    background: #c4b5fd;
}

.mlab-mass-stage {
    display: grid;
    justify-items: center;
    align-content: end;
    min-height: 18.5rem;
    padding-top: 2.2rem;
}

.mlab-scale-platform {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: end center;
    width: min(72%, 15rem);
    min-height: 3.8rem;
    border: .25rem solid #475569;
    border-radius: .5rem .5rem .9rem .9rem;
    background: linear-gradient(#f8fafc, #cbd5e1);
    box-shadow: 0 .45rem 0 #64748b, 0 .75rem 1rem rgba(15,23,42,.16);
    transition: border-color .15s ease, background .15s ease;
}

.mlab-scale-platform.is-drop-target {
    border-color: #0e7490;
    background: #cffafe;
}

.mlab-scale-object {
    display: grid;
    justify-items: center;
    gap: .1rem;
    min-height: 3.15rem;
}

.mlab-scale-object .mlab-object-shape {
    transform: scale(1.08);
    transform-origin: bottom;
}

.mlab-scale-empty {
    align-self: center;
    border: 2px dashed #94a3b8;
    border-radius: .45rem;
    padding: .55rem .75rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 850;
}

.mlab-scale-object-label {
    color: #334155;
    font-size: .72rem;
}

.mlab-scale-body {
    display: grid;
    place-items: center;
    width: min(78%, 16rem);
    margin-top: .35rem;
    border: .3rem solid #475569;
    border-radius: .65rem 4rem .65rem .65rem;
    background: linear-gradient(145deg, #e2e8f0, #94a3b8);
    padding: .5rem 1rem .75rem;
}

.mlab-scale {
    position: relative;
    width: min(100%, 11.5rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: .5rem solid #334155;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 .2rem #cbd5e1;
}

.mlab-needle {
    position: absolute;
    z-index: 3;
    left: calc(50% - .12rem);
    bottom: 50%;
    width: .24rem;
    height: 37%;
    border-radius: 999px;
    background: #dc2626;
    transform-origin: 50% 100%;
}

.mlab-scale-centre {
    position: absolute;
    z-index: 4;
    top: 46%;
    left: 46%;
    width: 8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #0f172a;
}

.mlab-dial-tick {
    position: absolute;
    top: 9%;
    bottom: 50%;
    left: calc(50% - 1px);
    width: 2px;
    background: linear-gradient(#0f172a 0 .55rem, transparent .55rem);
    transform-origin: 50% 100%;
}

.mlab-dial-label {
    position: absolute;
    z-index: 2;
    border-radius: .2rem;
    background: rgba(255,255,255,.86);
    padding: 0 .08rem;
    color: #0f172a;
    font-size: .68rem;
    font-weight: 950;
}

.mlab-dial-label-0 { bottom: 24%; left: 14%; }
.mlab-dial-label-1 { top: 27%; left: 12%; }
.mlab-dial-label-2 { top: 10%; left: 46%; }
.mlab-dial-label-3 { top: 27%; right: 12%; }
.mlab-dial-label-4 { right: 14%; bottom: 24%; }

.mlab-dial-unit {
    position: absolute;
    right: 0;
    bottom: 14%;
    left: 0;
    color: #475569;
    font-size: .72rem;
    font-weight: 950;
}

.mlab-jug-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) 4.5rem;
    align-items: stretch;
    width: min(80%, 21rem);
    height: 22rem;
    margin: 0 auto;
}

.mlab-jug {
    position: relative;
    z-index: 2;
    grid-column: 1;
    overflow: hidden;
    border: .38rem solid #0891b2;
    border-top-width: .16rem;
    border-radius: .25rem .25rem 1.8rem 1.8rem;
    background: rgba(236, 254, 255, .72);
    clip-path: polygon(0 4%, 80% 4%, 100% 0, 100% 100%, 0 100%);
}

.mlab-jug-spout {
    position: absolute;
    z-index: 5;
    top: -.1rem;
    right: -.05rem;
    width: 23%;
    height: 1.15rem;
    border-top: .32rem solid #0891b2;
    transform: rotate(-8deg);
    transform-origin: right;
}

.mlab-jug-handle {
    position: absolute;
    z-index: 1;
    top: 4.5rem;
    left: -3.2rem;
    width: 5.2rem;
    height: 10rem;
    border: .55rem solid #0891b2;
    border-right: 0;
    border-radius: 2.6rem 0 0 2.6rem;
}

.mlab-jug-fill {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(125,211,252,.88), #0284c7);
    box-shadow: inset 0 .2rem 0 rgba(255,255,255,.6);
    transition: height .15s ease;
}

.mlab-jug-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 calc(10% - 2px), rgba(15,23,42,.38) calc(10% - 2px) 10%);
}

.mlab-jug-scale,
.mlab-thermometer-scale {
    position: relative;
    min-height: 0;
}

.mlab-jug-scale span,
.mlab-thermometer-scale span {
    position: absolute;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    color: #334155;
    font-size: .72rem;
    font-weight: 950;
}

.mlab-jug-scale span {
    left: -.2rem;
    gap: .35rem;
}

.mlab-jug-scale i {
    width: 1.3rem;
    height: 2px;
    background: #0f172a;
}

.mlab-instrument-unit {
    position: absolute;
    right: .1rem;
    bottom: -1.8rem;
    min-width: 3.6rem;
    border-radius: 999px;
    background: #0e7490;
    padding: .35rem .55rem;
    color: #fff;
    font-size: .8rem;
    font-weight: 950;
    text-align: center;
}

.mlab-thermometer-stage {
    position: relative;
    display: grid;
    grid-template-columns: 4.2rem 5.5rem;
    align-items: stretch;
    width: 10rem;
    height: 22rem;
    margin: 0 auto;
    padding-bottom: 1.4rem;
}

.mlab-thermometer-scale span {
    right: 0;
    justify-content: flex-end;
    gap: .3rem;
}

.mlab-thermometer-scale i {
    width: 1.2rem;
    height: 2px;
    background: #334155;
}

.mlab-thermometer {
    position: relative;
    display: grid;
    place-items: center;
    align-self: stretch;
}

.mlab-thermometer-track {
    position: absolute;
    top: .45rem;
    bottom: 2.6rem;
    width: 2.1rem;
    overflow: hidden;
    border: .35rem solid #94a3b8;
    border-radius: 999px 999px .25rem .25rem;
    background: #fff;
    box-shadow: inset .22rem 0 .25rem rgba(148,163,184,.22);
}

.mlab-thermometer-fill {
    position: absolute;
    right: .4rem;
    bottom: 0;
    left: .4rem;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(#fb7185, #dc2626);
    transition: height .15s ease;
}

.mlab-thermometer-bulb {
    position: absolute;
    bottom: .35rem;
    width: 4.4rem;
    aspect-ratio: 1;
    border: .35rem solid #94a3b8;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: inset .45rem .35rem 0 rgba(255,255,255,.22);
}

.mlab-conversion-result {
    display: grid;
    place-items: center;
    min-height: 9rem;
    border: 2px dashed #67e8f9;
    border-radius: 1rem;
    background: #ecfeff;
    padding: 1rem;
    text-align: center;
}

.mlab-conversion-result strong {
    font-size: clamp(1.5rem, 7cqh, 3rem);
}

.measurement-lab-drag-edge-top,
.measurement-lab-drag-edge-bottom,
.measurement-lab-drag-edge-left,
.measurement-lab-drag-edge-right {
    position: absolute;
    z-index: 24;
    border: 0;
    background: transparent;
    touch-action: none;
}

.measurement-lab-drag-edge-top,
.measurement-lab-drag-edge-bottom { left: 1rem; right: 1rem; height: 1.1rem; }
.measurement-lab-drag-edge-top { top: 0; }
.measurement-lab-drag-edge-bottom { bottom: 0; }
.measurement-lab-drag-edge-left,
.measurement-lab-drag-edge-right { top: 1rem; bottom: 1rem; width: 1.1rem; }
.measurement-lab-drag-edge-left { left: 0; }
.measurement-lab-drag-edge-right { right: 0; }

@container (max-width: 720px) {
    .mlab-shell {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .mlab-header { align-items: flex-start; flex-direction: column; }
    .mlab-header-actions { width: 100%; }
    .mlab-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .mlab-header-actions label {
        flex: 1 1 0;
        min-width: 0;
    }
    .mlab-header select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .mlab-workspace {
        grid-template-columns: 1fr;
        flex: none;
        overflow: visible;
    }
    .mlab-control-panel {
        overflow: visible;
    }
    .mlab-visual-panel { min-height: 20rem; }
    .mlab-reading,
    .mlab-ruler {
        width: 100%;
        min-width: 0;
    }
}

@container (max-height: 540px) {
    .mlab-kicker { display: none; }
    .mlab-shell { gap: .45rem; padding: .6rem; }
    .mlab-panel { padding: .6rem; }
}

@media (max-width: 640px) {
    .measurement-lab-card {
        min-width: 0;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
    }
    .mlab-domain-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .mlab-domain-tabs button {
        width: 100%;
        min-width: 0;
    }
}