@layer lab-base{:root{--c-margin:#ff7eb0;--c-margin-soft:#ffe3ee;--c-padding:#9d7bff;--c-padding-soft:#ece6ff;--c-gutter:#e6b35c;--c-gutter-soft:#fbeed4;--c-safe:#5ab4c9;--c-safe-soft:#def0f4;--c-grid:#6fae8f;--c-grid-soft:#e2f1ea;--c-gap:#e8c34a;--c-gap-soft:#fbf2cf;--c-line:#9bc24a;--c-line-soft:#eef6da;--c-letter:#f06595;--c-letter-soft:#ffe0ea;--c-neg:#a98bff;--c-neg-soft:#ece6ff}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.refimg{border-radius:var(--radius);border:1px solid var(--line-strong);width:100%;max-width:420px;box-shadow:var(--shadow);margin:6px auto 2px;display:block}.refcap{text-align:center;color:var(--muted);margin:8px 0 2px;font-size:12.5px}.concept{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:20px 0;padding:20px 22px 22px}.concept>.head{flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:4px;display:flex}.concept>.head .en{font-family:var(--display);color:var(--ck,var(--accent-deep));font-size:20px;font-weight:600}.concept>.head .zh{font-family:var(--display);color:var(--muted);font-size:14px;font-weight:500}.concept>.head .css{font-family:var(--mono);color:var(--ck,var(--accent-deep));background:var(--cks,var(--accent-soft));border:1px solid var(--ckl,var(--accent-pale));border-radius:999px;margin-left:auto;padding:3px 12px;font-size:12px;font-weight:600}.concept>p{margin:6px 0 0}.concept .demo{background:var(--panel);background-image:radial-gradient(var(--line-strong) 1.1px, transparent 1.1px);border:1px solid var(--line);border-radius:var(--radius-sm);background-size:15px 15px;justify-content:center;align-items:center;min-height:180px;margin:16px 0 0;padding:24px;display:flex;overflow:hidden}.concept .vega-ctl{margin-top:14px}.concept .vega-ctl .val{color:var(--ck,var(--accent-deep))}.concept .vega-ctl input[type=range]{accent-color:var(--ck,var(--accent))}.boxmodel{font-family:var(--mono);position:relative}.boxmodel .ring{border-radius:10px;justify-content:center;align-items:center;display:flex}.boxmodel .ring.margin{background:var(--c-margin-soft);outline:2px dashed var(--c-margin);outline-offset:-1px}.boxmodel .ring.padding{background:var(--c-padding-soft);outline:2px dashed var(--c-padding);outline-offset:-1px}.boxmodel .content{border:1px solid var(--line-strong);min-width:116px;min-height:64px;color:var(--muted);letter-spacing:.5px;background:#fff;border-radius:6px;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex}.boxmodel .lbl{letter-spacing:.4px;color:#fff;border-radius:999px;padding:1px 7px;font-size:10.5px;font-weight:600;position:absolute}.measure{font-family:var(--mono);color:var(--ck,var(--accent-deep));border:1px solid var(--ckl,var(--accent-pale));background:#fff;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600}.cols{align-items:stretch;gap:var(--gut,20px);width:100%;max-width:340px;display:flex}.cols .col{border:1px solid var(--line-strong);background:#fff;border-radius:6px;flex:1;height:110px}.cols .gutmark{width:var(--gut,20px);background:var(--c-gutter-soft);border-radius:4px;flex:none;align-self:stretch;position:relative}.safebox{background:var(--line);border-radius:12px;justify-content:center;align-items:center;width:240px;height:150px;display:flex;position:relative}.safebox .safe{border:2px dashed var(--c-safe);background:var(--c-safe-soft);border-radius:8px;position:absolute;inset:22px}.safebox .logo{z-index:1;font-family:var(--display);letter-spacing:1px;color:var(--ink);border:1px solid var(--line-strong);background:#fff;border-radius:8px;padding:8px 18px;font-size:22px;font-weight:600;position:relative}.gridnine{grid-template-columns:repeat(3,1fr);gap:12px;width:240px;display:grid}.gridnine .cell{border:1px solid var(--line-strong);background:#fff;border-radius:6px;height:44px}.gridnine .cell.on{background:var(--c-grid-soft);border-color:var(--c-grid)}.rows{gap:var(--rg,16px);flex-direction:column;width:260px;display:flex}.rows .row{border:1px solid var(--line-strong);background:#fff;border-radius:6px;height:30px;position:relative}.rows .gapmark{height:var(--rg,16px);background:var(--c-gap-soft);border-radius:3px;position:relative}.lh-demo{flex-wrap:wrap;justify-content:center;gap:28px;display:flex}.lh-demo .pane{font-family:var(--body);color:var(--ink);font-size:15px}.lh-demo .pane.tight{line-height:1.05}.lh-demo .pane.loose{line-height:2}.lh-demo .pane .mark{background:var(--c-line-soft);-webkit-box-decoration-break:clone;box-decoration-break:clone}.lh-demo .cap{font-family:var(--mono);color:var(--muted);margin-top:8px;font-size:11px;display:block}.ls-demo{flex-direction:column;align-items:center;gap:14px;display:flex}.ls-demo .word{font-family:var(--display);color:var(--ink);font-size:40px;font-weight:600}.ls-demo .word.wide{letter-spacing:14px}.ls-demo .word .cap{font-family:var(--mono);letter-spacing:normal;color:var(--muted);margin-top:2px;font-size:11px;font-weight:600;display:block}.negbox{background:var(--c-neg-soft);border:2px dashed var(--c-neg);border-radius:10px;width:220px;height:150px;position:relative}.negbox .mk{gap:6px;display:flex;position:absolute;top:16px;left:16px}.negbox .mk i{background:var(--c-neg);border-radius:4px;width:10px;height:42px;display:block}.negbox .mk i:nth-child(2){align-self:flex-start;height:26px}}