:root{
    --forest:#173b34;
    --forest-deep:#102c27;
    --mint:#dcebe4;
    --green:#24775a;
    --green-soft:#e8f3ed;
    --lime:#c6e2a1;
    --paper:#f4f5f0;
    --white:#fff;
    --ink:#172521;
    --muted:#68756f;
    --line:#dfe4dd;
    --rust:#bb583d;
    --rust-soft:#fff0eb;
    --amber:#99671d;
    --amber-soft:#fbf3df;
    --P:#2C6FB5;
    --M:#E9B800;
    --K:#D2322D;
    --N:#3A9A48;
    --S:#D9731C;
    --H:#858C92;
}

.topbar{background:var(--forest);color:#fff}
.topbar .brand small,.topbar .nav-link,.topbar .text-button{color:#d2e1d9}
.topbar .nav-link:hover{background:#285047;color:#fff}
.topbar .nav-link.active{background:var(--lime);color:var(--forest-deep)}
.family-shortcut-icon{width:42px;height:34px;color:var(--ink);border-radius:5px}
.family-shortcut-icon svg{width:42px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iso-mark{background:var(--H);color:#FFF}
.iso-mark.P{background:var(--P);color:#FFF}
.iso-mark.M{background:var(--M);color:#1F2A33}
.iso-mark.K{background:var(--K);color:#FFF}
.iso-mark.N{background:var(--N);color:#FFF}
.iso-mark.S{background:var(--S);color:#FFF}
.iso-mark.H{background:var(--H);color:#FFF}
.finder-iso-strip span{background:transparent;color:var(--muted)}
.finder-iso-strip span.P{--iso-color:var(--P)}
.finder-iso-strip span.M{--iso-color:var(--M)}
.finder-iso-strip span.K{--iso-color:var(--K)}
.finder-iso-strip span.N{--iso-color:var(--N)}
.finder-iso-strip span.S{--iso-color:var(--S)}
.finder-iso-strip span.H{--iso-color:var(--H)}
.finder-iso-strip span.adapted{border-color:transparent;background:var(--iso-color);color:#FFF}
.finder-iso-strip span.partial{border-color:transparent;background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.62) 3px 5px),var(--iso-color);color:#FFF}
.finder-iso-strip span.none{border-color:var(--line);background:transparent;color:var(--muted)}
.finder-iso-strip span.M.adapted,.finder-iso-strip span.M.partial{color:#1F2A33}
.detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.detail-heading>div{min-width:0}
.manufacturer-link{flex:none;min-height:40px;margin:3px 0 0;text-decoration:none}
.manufacturer-link:hover{text-decoration:none}
.manufacturer-link span{font-size:14px}
.danger-zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:24px;margin-top:30px;padding:22px;border:1px solid #e1aaa0;border-left:4px solid var(--rust);border-radius:6px;background:var(--rust-soft)}
.danger-copy .eyebrow{color:var(--rust)}
.danger-copy h2{margin:5px 0 7px;font:800 16px var(--display);color:#7e3327}
.danger-copy p{max-width:620px;margin:0;color:#7b4a40;font-size:11px;line-height:1.7}
.danger-form{display:grid;gap:10px;align-content:start}
.danger-form label{display:grid;gap:5px;color:#70443a;font-size:10px;font-weight:600}
.reset-key-label{display:flex;align-items:center;gap:6px}
.reset-key-help{position:relative;display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;border:1px solid #a66c61;border-radius:50%;color:#7e3327;font-size:10px;font-weight:700;line-height:1;cursor:help}
.reset-key-help:after{position:absolute;z-index:5;left:50%;bottom:calc(100% + 7px);width:max-content;max-width:min(250px,calc(100vw - 40px));padding:7px 9px;border-radius:4px;background:#172521;color:#fff;font-size:11px;font-weight:400;line-height:1.4;white-space:normal;content:attr(data-tooltip);opacity:0;visibility:hidden;transform:translate(-50%,3px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;pointer-events:none}
.reset-key-help:hover:after,.reset-key-help:focus-visible:after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.reset-key-help:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.danger-form label strong{color:#a52f21;font-weight:800}
.danger-form input{height:38px;width:100%;padding:0 10px;border:1px solid #d7a197;border-radius:5px;background:var(--white);color:var(--ink);font:600 12px var(--font)}
.danger-button{justify-self:start;min-height:40px;background:#a73326;border-color:#a73326;color:#fff}
.danger-button:hover{background:#85271d}

@media(max-width:620px){
    .family-shortcut-icon{width:36px;height:31px}
    .family-shortcut-icon svg{width:36px;height:29px}
    .detail-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
    .manufacturer-link{justify-self:end;min-height:36px;padding:0 10px;font-size:10px}
}

@media(max-width:900px){.danger-zone{grid-template-columns:1fr}}

.topbar .nav-link{width:fit-content;min-height:34px;padding:0 10px}
.topbar .nav-link.active{background:transparent;color:#fff}
.topbar .nav-link.active:after{position:absolute;right:10px;bottom:0;left:10px;height:2px;background:var(--lime);content:""}
@media(max-width:620px){.topbar .nav-link{justify-self:center}}