:root{--xbase:#eff8fb;--xcard:#ffffff;--xtype:#0b2530;--xmuted:#4d6873;--xmain:#0e7490;--xhi:#e11d48;--xborder:#d2e8ef;--xround:10px;--xwidth:1080px;--xf1:'Fraunces',system-ui,sans-serif;--xtext-font:'Manrope',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--xbase);color:var(--xtype);font:16px/1.65 var(--xtext-font)}
img{max-width:100%;height:auto} a{color:var(--xmain);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--xf1);line-height:1.2;letter-spacing:-.01em;color:var(--xtype)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.20em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
.we6zj0{max-width:var(--xwidth);margin:0 auto;padding:0 1rem} .wes37e{max-width:var(--xwidth);margin:0 auto;padding:1.2rem 1rem 3rem}
.wewy3z{position:absolute;left:-9999px} .wewy3z:focus{left:1rem;top:1rem;background:var(--xcard);padding:.5rem;z-index:99}
.we66f4{max-width:var(--xwidth);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.wejm3d{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--xf1);color:var(--xtype);text-decoration:none}
.weh39g{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .weh39g a{color:var(--xtype);text-decoration:none;font-weight:600;font-size:.95rem}
.we6m3e{background:var(--xbase);border-bottom:1px solid var(--xborder)} .we66f4{flex-direction:column;gap:.4rem;padding:.9rem 1rem}  .weh39g a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.wegcjr{margin:1rem 0 1.4rem} .weytsr{font-size:1.12rem;max-width:46em;color:var(--xmuted)} .wegcjr{background:var(--xmain);color:#fff;padding:2.4rem 1.6rem;border-radius:var(--xround)} .wegcjr h1,.wegcjr .weytsr{color:#fff} .wegcjr .weytsr{opacity:.92}
.wes78i{margin:1.4rem 0 2rem}
.we4aw8{margin:1.4em 0;padding:.9em 1.1em;background:var(--xcard);border-left:4px solid var(--xhi);border-radius:0 var(--xround) var(--xround) 0}
.wes02k{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--xcard);border:1px dashed var(--xmain);border-radius:var(--xround);overflow-x:auto}
.we2mrz{margin:1.2em 0;overflow-x:auto;border:1px solid var(--xborder);border-radius:var(--xround);background:var(--xcard)}
.we8efi{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .we8efi th,.we8efi td{padding:.5em .75em;border-bottom:1px solid var(--xborder);text-align:left}
.we8efi thead th{background:color-mix(in srgb,var(--xborder) 60%,var(--xcard))}
ol.wepkrn{padding-left:1.3em} ol.wepkrn>li{margin:.5em 0}
.weat10{margin:1.6em 0;text-align:center} .weat10 img{width:100%;max-width:720px;border-radius:var(--xround);border:1px solid var(--xborder);background:#fff} .weat10 figcaption{font-size:.9em;color:var(--xmuted)}
.wexij9{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.wec3fn{display:block;padding:1.1rem;background:var(--xcard);border-radius:var(--xround);border:1px solid var(--xborder);border-top:4px solid var(--xmain);color:var(--xtype);text-decoration:none}
.wec3fn b{display:block;font-family:var(--xf1);margin-bottom:.35rem} .wec3fn span{color:var(--xmuted);font-size:.92rem} .wec3fn:hover{border-color:var(--xmain)}
.wec3fn--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .wec3fn--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--xtype) 14%,transparent)}
.wez666{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .wegn27{display:block;padding:1rem 1.1rem 1.1rem} .wegn27>span{display:block}
.we7dim a,.we3vhp,.wecqkp{background:none!important}
.we6wpx{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--xmain)}
.wexij9--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .wexij9--feat>.wec3fn:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .wexij9--feat>.wec3fn:first-child b{font-size:1.35rem}
.we7dim{display:grid;gap:1rem;margin:1.2em 0} .we3vhp{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--xcard);border:1px solid var(--xborder);border-radius:var(--xround);overflow:hidden;color:var(--xtype);text-decoration:none}
.we3vhp .wez666{height:100%;aspect-ratio:auto;min-height:126px} .we3vhp b{display:block;font-family:var(--xf1);font-size:1.12rem;margin-bottom:.3rem} .we3vhp .wegn27>span{color:var(--xmuted);font-size:.93rem} .we3vhp:hover{border-color:var(--xmain)}
.we7dim--min{list-style:none;padding:0;counter-reset:bl;gap:0} .we7dim--min li{counter-increment:bl;border-top:1px solid var(--xborder)} .we7dim--min li:last-child{border-bottom:1px solid var(--xborder)}
.we7dim--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--xtype);text-decoration:none} .we7dim--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--xf1);color:var(--xmain)}
.we7dim--min b{font-family:var(--xf1);font-size:1.15rem} .we7dim--min span{color:var(--xmuted);font-size:.93rem} .we7dim--min a:hover b{color:var(--xmain)}
.wermz7--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--xround);overflow:hidden} .wermz7--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.we1ij6{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .we1ij6 h1,.we1ij6 .wetrgj,.we1ij6 .wecqkp{color:#fff}
.wermz7--band{background:var(--xmain);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--xround)} .wermz7--band h1,.wermz7--band .wetrgj,.wermz7--band .wecqkp{color:#fff}
.wermz7--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .wermz7--split .wehj8s{margin:0}
.weu5fi--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .weu5fi--chips li{margin:0} .weu5fi--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--xborder);border-radius:999px;background:var(--xbase);text-decoration:none;font-size:.88rem}
.weu5fi--rail{background:none;border:0;border-left:3px solid var(--xhi);border-radius:0;padding:.2rem 0 .2rem 1rem}
.we3gc3--globe summary{display:flex;align-items:center;gap:.35rem} .we3zgd{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .we3zgd a{padding:.25rem .7rem;border:1px solid var(--xborder);border-radius:999px;text-decoration:none} .we3zgd a[aria-current]{background:var(--xmain);border-color:var(--xmain);color:#fff}
@media (max-width:700px){.wexij9--feat{grid-template-columns:1fr} .wexij9--feat>.wec3fn:first-child{display:flex} .we3vhp{grid-template-columns:1fr} .we3vhp .wez666{min-height:0;aspect-ratio:1200/630} .wermz7--split{grid-template-columns:1fr} .we1ij6{position:static;background:var(--xmain);padding:1.2rem} .wermz7--overlay>img{min-height:0}}
.wefuhg{max-width:48rem;margin:0 auto} .wermz7{margin:.6rem 0 1.2rem} .wermz7 h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.wecqkp{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--xmain);text-decoration:none}
.we2ztn{color:var(--xmuted);font-size:.9rem;margin:2rem 0 0} .we8629{font-style:italic;color:var(--xmuted)} .wetrgj{color:var(--xmuted);font-size:.92rem;margin:0} .wehj8s{margin:0 0 1.6rem} .wehj8s img{display:block;width:100%;height:auto;border-radius:var(--xround)}
.wefuhg .weytsr{font-size:1.2rem;color:var(--xtype)} .wefuhg .weytsr::first-letter{font-family:var(--xf1);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--xmain)}
.wefuhg .weu5fi--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--xcard);border:1px solid var(--xborder);border-left:4px solid var(--xmain);border-radius:var(--xround);font-size:.95rem}
.weu5fi--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .weu5fi--post li{margin:.2rem 0}
.wefuhg h3{color:var(--xmain)} .wefuhg blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--xhi);font-size:1.1em}
.wen6vq h3{font-size:1.05rem;margin-top:1.3em}
.we6n1m{font-size:.88rem;color:var(--xmuted);margin:.4rem 0 1rem} .we6n1m a{color:var(--xmuted)}
.wei73s{margin:2.4rem 0;padding:1.4rem;background:var(--xcard);border-radius:var(--xround);border:1px solid var(--xborder);border-top:4px solid var(--xmain);text-align:center}
.we3kd4{display:inline-block;padding:.7em 1.4em;background:var(--xmain);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.weabxd{border-top:1px solid var(--xborder);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--xmuted);background:var(--xcard)}
.weabxd nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .weabxd a{color:var(--xmuted)} .weabxd{background:var(--xtype);color:var(--xbase)} .weabxd a,.weabxd p{color:var(--xbase);opacity:.85}
.wes37e{counter-reset:sec} .wewfc9>h2{counter-increment:sec} .wewfc9>h2::before{content:counter(sec,decimal-leading-zero);display:block;font-size:.8rem;letter-spacing:.12em;color:var(--xmain);margin-bottom:.2em}
.weca47{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:2.4rem;align-items:start} .weu5fi{position:sticky;top:5rem;font-size:.9rem;border-left:2px solid var(--xborder);padding-left:1rem} .weu5fi ol{list-style:none;padding:0;margin:.4rem 0 0} .weu5fi li{margin:.35rem 0} .weu5fi a{text-decoration:none;color:var(--xmuted)} .weu5fi a:hover{color:var(--xmain)} .weca47>*{min-width:0} @media(max-width:900px){.weca47{grid-template-columns:1fr} .weu5fi:not(.weu5fi--post){display:none}}
.we3gc3{position:relative} .we3gc3 summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--xborder);border-radius:999px;font-size:.85rem}
.weys8n{position:absolute;right:0;top:120%;background:var(--xcard);border:1px solid var(--xborder);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.weys8n a{padding:.3rem .5rem;text-decoration:none;color:var(--xtype)} .weys8n a[aria-current]{font-weight:700;color:var(--xmain)}
.weyv50{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .weyv50 a{text-decoration:none;color:var(--xmuted);padding:.1rem .3rem;border-radius:4px} .weyv50 a[aria-current]{color:var(--xmain);background:color-mix(in srgb,var(--xmain) 12%,transparent)}
[data-zone]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-zone]:empty{margin:0}
[data-zone="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--xcard)}
[data-zone="sidebar_left"],[data-zone="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-zone="sidebar_left"]{left:12px} [data-zone="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-zone="sidebar_left"],[data-zone="sidebar_right"]{display:none}}
.wevw7b{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--xmuted)}
.we3kd4{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.we2mrz{border:0;border-top:3px solid var(--xmain);border-radius:0;background:transparent} .we8efi thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.wewfc9 a:not(.we3kd4):not(.wec3fn){text-decoration-thickness:2px}
@media (max-width:640px){.we66f4{justify-content:center} .weh39g{justify-content:center}}

/* ==========================================================================
   Website Checker — Styles
   Color Theme: Petrol-A (Security / Privacy / Encryption)
   ========================================================================== */

/* --- CSS Variables --- */
.wc-container {
    /* Base */
    --color-bg: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;

    /* Text */
    --color-text: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;

    /* Borders */
    --color-border: #e2e8f0;
    --color-border-hover: #cbd5e1;

    /* Primary — Petrol-A */
    --color-primary: #4a7580;
    --color-primary-hover: #3a6068;
    --color-primary-light: #e8f0f2;

    /* Semantic */
    --color-success: #4f9177;
    --color-success-light: #e8f5ef;
    --color-error: #c45d5d;
    --color-error-light: #fceaea;
    --color-warning: #b8944d;
    --color-warning-light: #f7f3e8;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Container */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .wc-container {
        padding: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .wc-container {
        padding: 2rem;
    }
}

.wc-container *,
.wc-container *::before,
.wc-container *::after {
    box-sizing: border-box;
}

/* --- Sections --- */
.wc-container .tool-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.wc-container .tool-result-section {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-md);
}

/* ==========================================================================
   INPUT SECTION
   ========================================================================== */

.wc-input-row {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    overflow: hidden;
}

.wc-input-row:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.wc-protocol-label {
    padding: 0.625rem 0 0.625rem 0.875rem;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
}

.wc-url-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 0.625rem 0.5rem;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
    min-width: 0;
    box-shadow: none !important;
}

.wc-url-input::placeholder {
    color: var(--color-text-muted);
}

.wc-check-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast);
    flex-shrink: 0;
    min-height: 44px;
}

.wc-check-btn:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.wc-check-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.wc-check-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .wc-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .wc-protocol-label {
        padding: 0.5rem 0.875rem 0;
        font-size: 0.8125rem;
    }
    .wc-url-input {
        padding: 0.5rem 0.875rem;
    }
    .wc-check-btn {
        border-radius: 0;
        padding: 0.75rem;
    }
}

/* Honeypot — must not be visible */
.wc-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    pointer-events: none !important;
}

/* Input error */
.wc-input-error {
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-error);
    min-height: 0;
}

.wc-input-error:empty {
    display: none;
}

/* ==========================================================================
   LOADING SECTION
   ========================================================================== */

.wc-loading-section {
    margin-top: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.wc-progress-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.wc-progress-step {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    transition: color var(--transition-normal);
    border-radius: var(--radius-sm);
}

.wc-progress-step.active {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.wc-progress-step.done {
    color: var(--color-success);
}

.wc-progress-step .step-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wc-progress-step .step-icon::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: background var(--transition-normal);
}

.wc-progress-step.active .step-icon::before {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    border-top-color: transparent;
    background: transparent;
    animation: wc-spin 0.8s linear infinite;
}

.wc-progress-step.done .step-icon::before {
    content: '✓';
    width: auto;
    height: auto;
    background: none;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-success);
}

@keyframes wc-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   RESULT SECTION
   ========================================================================== */

.wc-result-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-lg);
}

@media (max-width: 600px) {
    .wc-result-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Score Circle */
.wc-score-area {
    flex-shrink: 0;
}

.wc-score-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background: conic-gradient(
        var(--score-color, var(--color-text-muted)) calc(var(--score-deg, 0) * 1deg),
        var(--color-bg-tertiary) 0deg
    );
    transition: --score-deg 1s ease;
}

.wc-score-circle::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--color-bg);
}

.wc-score-value {
    position: relative;
    z-index: 1;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--score-color, var(--color-text));
}

.wc-score-label {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Result Meta */
.wc-result-meta {
    flex: 1;
    min-width: 0;
}

.wc-result-domain {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    word-break: break-all;
    margin-bottom: var(--space-xs);
}

.wc-result-status-badge {
    display: inline-block;
    padding: 0.125rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    margin-bottom: var(--space-xs);
}

.wc-result-status-badge.safe {
    background: var(--color-success-light);
    color: var(--color-success);
}

.wc-result-status-badge.warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.wc-result-status-badge.danger {
    background: var(--color-error-light);
    color: var(--color-error);
}

.wc-result-time {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.wc-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Buttons — shared */
.wc-container .btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.wc-container .btn-primary:hover {
    background: var(--color-primary-hover);
}

.wc-container .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    padding: 0.4375rem 0.875rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.wc-container .btn-secondary:hover {
    border-color: var(--color-border-hover);
    background: var(--color-bg-secondary);
    color: var(--color-text);
}

.wc-container .btn-secondary:active {
    transform: scale(0.98);
}

/* ==========================================================================
   TABS
   ========================================================================== */

.wc-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wc-tab {
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    min-height: 44px;
}

.wc-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.wc-tab:hover:not(.active) {
    color: var(--color-text);
}

.wc-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.wc-tab-content {
    padding: var(--space-lg) 0;
    animation: wc-fadeIn 0.3s ease;
}

@keyframes wc-fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   CHECK CARDS (Safety tab)
   ========================================================================== */

.wc-checks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

@media (max-width: 700px) {
    .wc-checks-grid {
        grid-template-columns: 1fr;
    }
}

.wc-check-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--check-color, var(--color-text-muted));
    transition: box-shadow var(--transition-fast);
}

.wc-check-card:hover {
    box-shadow: var(--shadow-sm);
}

.wc-check-card[data-status="pass"] {
    --check-color: var(--color-success);
}

.wc-check-card[data-status="warn"] {
    --check-color: var(--color-warning);
}

.wc-check-card[data-status="fail"] {
    --check-color: var(--color-error);
}

.wc-check-card[data-status="unknown"] {
    --check-color: var(--color-text-muted);
}

.wc-check-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--check-color);
}

.wc-check-body {
    flex: 1;
    min-width: 0;
}

.wc-check-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 2px;
}

.wc-check-desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.wc-check-value {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    margin-top: 2px;
    word-break: break-all;
}

/* ==========================================================================
   INFO TABLE (Domain Info / Technical tabs)
   ========================================================================== */

.wc-info-table {
    width: 100%;
}

.wc-info-row {
    display: flex;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
    align-items: baseline;
}

.wc-info-row:last-child {
    border-bottom: none;
}

.wc-info-label {
    width: 180px;
    flex-shrink: 0;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.wc-info-value {
    flex: 1;
    color: var(--color-text);
    word-break: break-all;
    font-size: 0.9375rem;
}

@media (max-width: 600px) {
    .wc-info-row {
        flex-direction: column;
        gap: 2px;
    }
    .wc-info-label {
        width: auto;
        font-size: 0.8125rem;
    }
}

/* Response time badge */
.wc-response-badge {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: var(--space-xs);
}

.wc-response-badge.fast {
    background: var(--color-success-light);
    color: var(--color-success);
}

.wc-response-badge.ok {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.wc-response-badge.slow {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ==========================================================================
   HISTORY SECTION
   ========================================================================== */

.wc-history-section {
    margin-top: var(--space-md);
}

.wc-history-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: none;
    border: none;
    padding: var(--space-sm) 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition-fast);
    width: 100%;
    text-align: left;
}

.wc-history-toggle:hover {
    color: var(--color-text);
}

.wc-chevron {
    transition: transform var(--transition-fast);
}

.wc-history-toggle[aria-expanded="true"] .wc-chevron {
    transform: rotate(180deg);
}

.wc-history-content {
    padding: var(--space-sm) 0;
}

.wc-history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.wc-history-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.wc-history-item:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.wc-history-domain {
    flex: 1;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-history-score {
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.wc-history-date {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.wc-clear-history {
    font-size: 0.8125rem;
}

/* ==========================================================================
   KEYBOARD SHORTCUTS HINT
   ========================================================================== */

.wc-shortcuts-hint {
    margin-top: var(--space-sm);
    padding: var(--space-xs) 0 0 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    opacity: 0.55;
    transition: opacity var(--transition-normal);
}

.wc-shortcuts-hint:hover {
    opacity: 0.85;
}

.wc-shortcut-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.wc-shortcut-key {
    display: inline-block;
    padding: 0.0625rem 0.3125rem;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.625rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.wc-shortcut-action {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.wc-shortcut-sep {
    color: var(--color-border-hover);
    font-size: 0.6rem;
}

/* ==========================================================================
   ERROR STATE
   ========================================================================== */

.wc-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    text-align: center;
}

.wc-error-state .wc-error-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-error-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.wc-error-state .wc-error-msg {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

/* ==========================================================================
   TOAST
   ========================================================================== */

.wc-toast {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: wc-slideIn 0.3s ease;
    z-index: 10000;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.wc-toast-success {
    background: var(--color-success, #4f9177);
    color: #fff;
}

.wc-toast-error {
    background: var(--color-error, #c45d5d);
    color: #fff;
}

.wc-toast-info {
    background: var(--color-text, #1e293b);
    color: #fff;
}

.wc-toast.fade-out {
    animation: wc-slideOut 0.3s ease forwards;
}

@keyframes wc-slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes wc-slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */

.wc-container *:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   SPINNER
   ========================================================================== */

.wc-container .spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wc-spin 0.8s linear infinite;
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .wc-container {
        box-shadow: none;
        border: none;
    }
    .wc-input-section,
    .wc-loading-section,
    .wc-history-section,
    .wc-shortcuts-hint,
    .wc-result-actions,
    .wc-promo-btn {
        display: none !important;
    }
}

/* design: sites/<d>/design/site.css */
/* website-checker.org — harbour light station and the keeper's inspection log */
:root{
 --lh-night:color-mix(in srgb,var(--xmain) 26%,var(--xtype));
 --lh-deep:color-mix(in srgb,var(--xmain) 48%,var(--xtype));
 --lh-on:#fff;
 --lh-onsoft:color-mix(in srgb,#fff 82%,var(--xborder));
 --lh-hair:color-mix(in srgb,var(--xmain) 30%,var(--xborder));
 /* daymark: red and white blocks, like the tower's painted bands */
 --lh-daymark:repeating-linear-gradient(90deg,var(--xhi) 0 22px,#fff 22px 44px);
 --lh-daymark-v:repeating-linear-gradient(180deg,var(--xhi) 0 14px,#fff 14px 28px);
 /* light characteristic Fl(2): two short flashes, one long eclipse */
 --lh-rhythm:repeating-linear-gradient(90deg,var(--xmain) 0 14px,transparent 14px 22px,var(--xmain) 22px 36px,transparent 36px 78px);
}

/* sea-mist page with a faint long swell */
body{background-color:var(--xbase);
 background-image:repeating-linear-gradient(180deg,transparent 0 46px,color-mix(in srgb,var(--xmain) 5%,transparent) 46px 47px);}
::selection{background:color-mix(in srgb,var(--xhi) 22%,transparent)}
:focus-visible{outline:2px solid var(--xhi);outline-offset:2px}

/* ---------- header: the lantern gallery at night, daymark band below ---------- */
.we6m3e{position:relative;background:var(--lh-night);border-bottom:0;padding-bottom:7px}
.we6m3e::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--lh-daymark)}
.we66f4{padding:1rem 1rem .75rem;gap:.55rem}
.wejm3d{color:var(--lh-on);font-size:1.22rem;letter-spacing:.005em}
.wejm3d svg{flex:none;filter:drop-shadow(0 0 10px color-mix(in srgb,#fff 28%,transparent))}
.we6m3e .weh39g{gap:.3rem}
.we6m3e .weh39g>a{color:var(--lh-onsoft);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.35rem .8rem;border:1px solid transparent;border-radius:999px}
.we6m3e .weh39g>a:hover{color:var(--lh-on);border-color:color-mix(in srgb,#fff 40%,transparent)}
.we6m3e .weh39g>a[aria-current]{color:var(--xtype);background:var(--xbase);border-color:var(--xbase)}

/* ---------- first screen: night-sea band, lighthouse beam across the title ---------- */
.wegcjr{position:relative;overflow:hidden;display:block;min-height:290px;
 margin:1.4rem 0 1.6rem;padding:2.4rem 250px 2.4rem 2.2rem;border-radius:var(--xround);
 background-color:var(--lh-night);
 background-image:
  conic-gradient(from 268deg at calc(100% - 126px) calc(100% - 203px),transparent 0deg,color-mix(in srgb,#fff 12%,transparent) 2deg,color-mix(in srgb,#fff 5%,transparent) 10deg,transparent 13deg),
  linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--xmain) 34%,transparent));}
.wegcjr>div{position:relative;z-index:1}
.wegcjr::after{content:'';position:absolute;right:1.6rem;bottom:0;width:200px;height:250px;background:url(/assets/img/d-lighthouse.svg) center bottom/contain no-repeat}
.wegcjr h1{color:var(--lh-on);font-size:clamp(1.95rem,4.3vw,2.8rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 .5em}
.wegcjr .weytsr{color:var(--lh-onsoft);opacity:1;max-width:40em;margin:0;padding-top:.9rem;border-top:1px solid color-mix(in srgb,#fff 22%,transparent)}
@media (max-width:820px){.wegcjr{padding:2rem 170px 2rem 1.4rem;
  background-image:conic-gradient(from 268deg at calc(100% - 84px) calc(100% - 139px),transparent 0deg,color-mix(in srgb,#fff 12%,transparent) 2deg,color-mix(in srgb,#fff 5%,transparent) 10deg,transparent 13deg),linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--xmain) 34%,transparent))}
 .wegcjr::after{right:1rem;width:136px;height:170px}}
@media (max-width:600px){
 .wegcjr{min-height:0;padding:1.6rem 1.15rem;
  background-image:conic-gradient(from 230deg at 100% 0,transparent 0deg,color-mix(in srgb,#fff 9%,transparent) 4deg,transparent 14deg),linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--xmain) 34%,transparent))}
 .wegcjr::after{content:none}
 .wegcjr .weytsr{font-size:1.03rem}}

/* ---------- the instrument: mounted on a white station board (outside only) ---------- */
.wes78i{position:relative;padding:1.5rem 1.4rem 1.3rem;background:var(--xcard);border:1px solid var(--lh-hair);border-radius:var(--xround);
 box-shadow:0 1px 0 color-mix(in srgb,var(--xtype) 6%,transparent),0 16px 30px -26px color-mix(in srgb,var(--xtype) 55%,transparent)}
.wes78i::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:6px;border-radius:var(--xround) var(--xround) 0 0;background:var(--lh-daymark)}
@media (max-width:600px){.wes78i{padding:1.25rem .8rem 1rem}}

/* ---------- home contents: the light list index ---------- */
.wes37e>.weu5fi{margin:2.4rem 0 1.4rem;padding:0;background:var(--xcard);border:1px solid var(--lh-hair);border-radius:var(--xround);overflow:hidden}
.wes37e>.weu5fi strong{display:block;padding:.6rem 1.1rem;font:700 .74rem/1.2 var(--xtext-font);letter-spacing:.18em;text-transform:uppercase;color:var(--lh-on);background:var(--lh-night)}
.wes37e>.weu5fi ol{counter-reset:ll;list-style:none;margin:0;padding:.5rem 1.1rem .7rem;columns:2;column-gap:2.4rem;column-rule:1px solid var(--xborder)}
.wes37e>.weu5fi li{counter-increment:ll;display:flex;gap:.75rem;align-items:baseline;padding:.34rem 0;border-bottom:1px solid var(--xborder);break-inside:avoid}
.wes37e>.weu5fi li::before{content:counter(ll,decimal-leading-zero);flex:none;min-width:1.7rem;font:700 .76rem/1 var(--xtext-font);color:var(--xhi);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.wes37e>.weu5fi a{color:var(--xtype);text-decoration:none}
.wes37e>.weu5fi a:hover{color:var(--xmain);text-decoration:underline}
@media (max-width:640px){.wes37e>.weu5fi ol{columns:1}}

/* ---------- sections: log entries headed by a chart light flare and its rhythm ---------- */
.wewfc9{margin:0 0 .4rem}
.wewfc9>h2{position:relative;border-top:0;padding:1.2rem 0 0 2.2rem;margin-top:2.2em}
.wewfc9>h2::before{content:'';position:absolute;left:0;top:1.28rem;width:1.6rem;height:1.6rem;background:url(/assets/img/d-flare.svg) center/contain no-repeat}
.wewfc9>h2::after{content:'';display:block;height:3px;width:min(15rem,70%);margin:.6rem 0 0;background:var(--lh-rhythm);
 -webkit-mask:linear-gradient(90deg,#000 55%,transparent);mask:linear-gradient(90deg,#000 55%,transparent)}
.wewfc9 h3{color:var(--lh-deep)}
.wewfc9 a:not(.we3kd4):not(.wec3fn){text-decoration-color:color-mix(in srgb,var(--xmain) 45%,transparent);text-decoration-thickness:1.5px}
.wewfc9 a:not(.we3kd4):not(.wec3fn):hover{text-decoration-color:var(--xhi)}
.wes37e code,.wefuhg code{font-size:.9em;padding:.06em .3em;border-radius:4px;background:color-mix(in srgb,var(--xmain) 9%,transparent);color:var(--lh-deep)}
.wewfc9 ul>li::marker{color:var(--xhi)}

/* ---------- tables: a ruled light list ---------- */
.we2mrz{border:1px solid var(--lh-hair);border-radius:var(--xround);background:var(--xcard)}
.we8efi caption{caption-side:top;text-align:left;padding:.7rem .85rem .55rem;font:700 .74rem/1.3 var(--xtext-font);letter-spacing:.14em;text-transform:uppercase;color:var(--xmuted);border-bottom:1px solid var(--xborder)}
.we8efi thead th{background:var(--lh-night);color:var(--lh-on);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:0}
.we8efi th,.we8efi td{padding:.6em .85em;vertical-align:top}
.we8efi tbody tr:nth-child(even){background:color-mix(in srgb,var(--xbase) 70%,var(--xcard))}
.we8efi tbody tr:last-child>*{border-bottom:0}
.we8efi tbody td:first-child{font-weight:700;color:var(--xtype)}
.we8efi tbody tr:hover{background:color-mix(in srgb,var(--xmain) 7%,var(--xcard))}

/* ---------- formulas: the keeper's working, notes: notices to mariners ---------- */
.wes02k{background:var(--xcard);border:1px solid var(--lh-hair);border-left:4px solid var(--xmain);border-radius:0 var(--xround) var(--xround) 0;color:var(--xtype)}
.we4aw8{position:relative;background:color-mix(in srgb,var(--xhi) 5%,var(--xcard));border-left:0;padding-left:1.6rem;border:1px solid color-mix(in srgb,var(--xhi) 22%,var(--xborder));border-radius:0 var(--xround) var(--xround) 0}
.we4aw8::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:6px;background:var(--lh-daymark-v)}
.weat10 img{border-color:var(--lh-hair)}
.weat10 figcaption{margin-top:.5rem;font-size:.88em}

/* steps: numbered lamps */
ol.wepkrn{list-style:none;counter-reset:st;padding-left:0}
ol.wepkrn>li{counter-increment:st;position:relative;padding:.1rem 0 .7rem 2.9rem;margin:0}
ol.wepkrn>li::before{content:counter(st);position:absolute;left:0;top:-.05rem;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
 font:700 .9rem/1 var(--xtext-font);color:var(--lh-on);background:var(--lh-night);box-shadow:0 0 0 3px var(--xbase),0 0 0 4px var(--lh-hair)}
ol.wepkrn>li:not(:last-child)::after{content:'';position:absolute;left:calc(1rem - 1px);top:2.2rem;bottom:.1rem;border-left:2px dotted var(--lh-hair)}

/* ---------- FAQ: questions logged on the watch ---------- */
.wen6vq h3{position:relative;padding-left:1.1rem;margin-top:1.5em;color:var(--xtype)}
.wen6vq h3::before{content:'';position:absolute;left:0;top:.42em;width:.5rem;height:.5rem;border-radius:50%;background:var(--xhi);box-shadow:0 0 0 3px color-mix(in srgb,var(--xhi) 18%,transparent)}
.wen6vq h3+p{padding-left:1.1rem;border-left:1px solid var(--xborder);margin-left:.24rem;padding-bottom:.2rem}

/* ---------- guide cards: station cards under a daymark stripe ---------- */
.wexij9{gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wexij9--feat{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.wexij9--feat{grid-template-columns:1fr}}
.wec3fn{position:relative;border:1px solid var(--lh-hair);border-radius:var(--xround)}
.wec3fn--img{border-top:0}
.wec3fn--img::before{content:'';display:block;height:6px;flex:none;background:var(--lh-daymark)}
.wez666{border-bottom:1px solid var(--xborder)}
.wec3fn b{font-size:1.08rem;line-height:1.3;color:var(--xtype)}
.wec3fn:hover{border-color:var(--xmain)}
.wec3fn:hover b{color:var(--xmain)}
.we6wpx{display:inline-block;margin-top:.75rem;padding:.18rem .55rem;border-radius:999px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lh-deep);background:color-mix(in srgb,var(--xmain) 9%,transparent)}
@media (prefers-reduced-motion:reduce){.wec3fn--img,.wec3fn--img:hover{transition:none;transform:none}}

/* ---------- breadcrumbs, call to action, buttons ---------- */
.we6n1m{font-size:.84rem;letter-spacing:.02em}
.we6n1m a{color:var(--xmuted);text-decoration-color:var(--lh-hair)}
.we6n1m a:hover{color:var(--xmain)}
.we3kd4{border-radius:6px;background:var(--lh-night);color:var(--lh-on);padding:.8em 1.5em;letter-spacing:.02em;box-shadow:inset 0 -3px 0 var(--xhi);transition:background .15s ease}
.we3kd4:hover{background:var(--xmain)}
.wei73s{position:relative;overflow:hidden;background:var(--xcard);border:1px solid var(--lh-hair);border-radius:var(--xround);padding:1.8rem 1.4rem;
 background-image:repeating-linear-gradient(180deg,transparent 0 10px,color-mix(in srgb,var(--xmain) 6%,transparent) 10px 11px)}

/* ---------- guides hub ---------- */
.wes37e>h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:.25em}
.wes37e>h1+.weytsr{padding-left:1rem;border-left:3px solid var(--xhi);color:var(--xtype)}

/* ---------- article: cover with a night-water overlay ---------- */
.wermz7--overlay{border:1px solid var(--lh-hair);background:var(--lh-night)}
.wermz7--overlay::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;background:var(--lh-daymark);z-index:2}
.we1ij6{padding:5rem 1.8rem 1.5rem;background:linear-gradient(transparent,color-mix(in srgb,var(--lh-night) 78%,transparent) 50%,var(--lh-night))}
.we1ij6 h1{margin:.25em 0 .3em;text-shadow:0 1px 12px color-mix(in srgb,var(--xtype) 60%,transparent)}
.we1ij6 .wetrgj{color:var(--lh-onsoft)}
.wecqkp{padding:.2rem .6rem;border-radius:999px;border:1px solid color-mix(in srgb,#fff 50%,transparent);color:var(--lh-on);font-size:.7rem}
.wecqkp:hover{background:color-mix(in srgb,#fff 12%,transparent)}
@media (max-width:700px){.we1ij6{background:var(--lh-night);padding:1.2rem 1.1rem 1.3rem}}
.wefuhg .weytsr::first-letter{color:var(--xhi)}
.wefuhg .weu5fi--post{background:var(--xcard);border:1px solid var(--lh-hair);border-left:1px solid var(--lh-hair);padding:0;overflow:hidden}
.wefuhg .weu5fi--post strong{display:block;padding:.55rem 1.1rem;font:700 .72rem/1.2 var(--xtext-font);letter-spacing:.18em;text-transform:uppercase;color:var(--lh-on);background:var(--lh-night)}
.wefuhg .weu5fi--post ol{counter-reset:pt;list-style:none;margin:0;padding:.45rem 1.1rem .65rem}
.wefuhg .weu5fi--post li{counter-increment:pt;display:flex;gap:.7rem;align-items:baseline;margin:0;padding:.3rem 0;border-bottom:1px solid var(--xborder)}
.wefuhg .weu5fi--post li:last-child{border-bottom:0}
.wefuhg .weu5fi--post li::before{content:counter(pt,decimal-leading-zero);flex:none;font:700 .74rem/1 var(--xtext-font);color:var(--xhi);font-variant-numeric:tabular-nums}
.wefuhg .weu5fi--post a{color:var(--xtype);text-decoration:none}
.wefuhg .weu5fi--post a:hover{color:var(--xmain);text-decoration:underline}
.wefuhg h3{color:var(--lh-deep)}
.wefuhg blockquote{border-left:0;padding:.6em 1.2em;background:var(--xcard);border-radius:0 var(--xround) var(--xround) 0;box-shadow:inset 4px 0 0 var(--xhi)}

/* ---------- footer: the night harbour, beam fading out ---------- */
.weabxd{position:relative;margin-top:3.4rem;padding:2.2rem 0 2.6rem;border-top:0;background-color:var(--lh-night);
 background-image:conic-gradient(from 255deg at 92% 0,transparent 0deg,color-mix(in srgb,#fff 6%,transparent) 3deg,transparent 15deg)}
.weabxd::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:var(--lh-daymark)}
.weabxd p{color:var(--lh-onsoft);opacity:1}
.weabxd a{color:var(--lh-onsoft);opacity:1;text-decoration-color:color-mix(in srgb,#fff 35%,transparent)}
.weabxd a:hover{color:var(--lh-on);text-decoration-color:var(--xhi)}
.weizmk>p{font-family:var(--xf1);font-size:1.02rem;color:var(--lh-on)}
.we3zgd{margin-top:1.2rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,#fff 16%,transparent)}
.we3zgd a{color:var(--lh-onsoft);border-color:color-mix(in srgb,#fff 34%,transparent);font-size:.84rem;font-weight:600}
.we3zgd a:hover{color:var(--lh-on);border-color:var(--lh-on)}
.we3zgd a[aria-current]{background:var(--xbase);border-color:var(--xbase);color:var(--xtype)}

@media (prefers-reduced-motion:reduce){.we3kd4{transition:none}}

/* narrow screens: tighter table cells so three-column tables fit without sideways scrolling */
@media (max-width:600px){.we8efi th,.we8efi td{padding:.5em .45em;font-size:.84rem;overflow-wrap:anywhere;hyphens:auto}.we8efi thead th{letter-spacing:.04em;font-size:.7rem}}