.page-module__cB4boq__page{--ink:#17221d;--muted:#5b6962;--line:#cad5cf;--paper:#f5f7f3;--accent:#176b4d;--accent-dark:#0d4934;min-height:100vh;color:var(--ink);background:linear-gradient(135deg,#eef3ed 0%,#faf8f0 52%,#edf4f2 100%);padding:clamp(20px,2vw,28px) max(16px,50vw - 640px)}.page-module__cB4boq__header{max-width:900px;margin-bottom:clamp(18px,1.5vw,20px)}.page-module__cB4boq__eyebrow,.page-module__cB4boq__sectionTag{color:var(--accent);letter-spacing:.14em;margin:0 0 8px;font-size:.75rem;font-weight:800}.page-module__cB4boq__header h1{letter-spacing:-.04em;max-width:820px;margin:0;font-size:clamp(2rem,3.8vw,3.35rem);line-height:1.06}.page-module__cB4boq__lead{max-width:900px;color:var(--muted);margin:10px 0 0;font-size:clamp(1rem,1.4vw,1.05rem);line-height:1.55}.page-module__cB4boq__workspace,.page-module__cB4boq__results,.page-module__cB4boq__breakpoints,.page-module__cB4boq__codeSection,.page-module__cB4boq__notes{background:#ffffffd1;border:1px solid #17221d1f;border-radius:24px;box-shadow:0 18px 50px #23403214}.page-module__cB4boq__workspace{grid-template-columns:minmax(0,1fr);gap:0;display:grid;overflow:hidden}.page-module__cB4boq__settingsPanel,.page-module__cB4boq__previewPanel{min-width:0;padding:clamp(18px,1.6vw,22px)}.page-module__cB4boq__previewPanel{border-top:1px solid var(--line);background:#f7faf8b8}.page-module__cB4boq__settingsPanel h2,.page-module__cB4boq__previewPanel h2,.page-module__cB4boq__results h2,.page-module__cB4boq__breakpoints h2,.page-module__cB4boq__codeSection h2,.page-module__cB4boq__notes h2{margin:0;font-size:clamp(1.35rem,2.4vw,1.8rem)}.page-module__cB4boq__form{margin-top:14px}.page-module__cB4boq__fieldGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 14px;display:grid}.page-module__cB4boq__field{min-width:0}.page-module__cB4boq__field label,.page-module__cB4boq__rangeField label{margin-bottom:7px;font-size:.9rem;font-weight:750;display:block}.page-module__cB4boq__inputWithUnit{background:#fff;border:1px solid #aebbb4;border-radius:10px;align-items:center;display:flex;overflow:hidden}.page-module__cB4boq__inputWithUnit:focus-within{border-color:var(--accent);outline:3px solid #176b4d3d}.page-module__cB4boq__inputWithUnit input{width:100%;min-width:0;height:46px;color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0;padding:0 11px}.page-module__cB4boq__inputWithUnit span{min-width:42px;color:var(--muted);background:#edf2ee;align-self:stretch;place-items:center;font-size:.85rem;display:grid}.page-module__cB4boq__fieldHint{color:var(--muted);margin:5px 0 0;font-size:.75rem}.page-module__cB4boq__error{color:#9e2a22;min-height:24px;margin:3px 0 0;font-size:.74rem;line-height:1.3}.page-module__cB4boq__controlRow{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;margin-top:2px;display:grid}.page-module__cB4boq__modeFieldset{border:0;min-width:0;margin:0;padding:0}.page-module__cB4boq__modeFieldset legend{margin-bottom:9px;font-size:.9rem;font-weight:750}.page-module__cB4boq__modeOptions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.page-module__cB4boq__modeOptions label{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;grid-template-columns:20px 1fr;align-items:start;gap:9px;min-height:64px;padding:9px 11px;display:grid}.page-module__cB4boq__modeOptions label:has(input:checked){border-color:var(--accent);box-shadow:inset 4px 0 var(--accent)}.page-module__cB4boq__modeOptions input{width:18px;height:18px;accent-color:var(--accent);margin:2px 0 0}.page-module__cB4boq__modeOptions span,.page-module__cB4boq__modeOptions small{display:block}.page-module__cB4boq__modeOptions small{color:var(--muted);margin-top:2px;line-height:1.35}.page-module__cB4boq__actions{gap:10px;display:flex}.page-module__cB4boq__actions button,.page-module__cB4boq__codeHeading button{min-height:46px;font:inherit;cursor:pointer;border-radius:10px;padding:10px 17px;font-weight:750}.page-module__cB4boq__secondaryButton{color:var(--ink);background:#fff;border:1px solid #9eaaa4}.page-module__cB4boq__previewPanel{min-height:440px}.page-module__cB4boq__previewHeading,.page-module__cB4boq__codeHeading{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.page-module__cB4boq__previewHeading>span{border:1px solid var(--line);color:var(--muted);white-space:nowrap;background:#f7faf8;border-radius:99px;padding:6px 9px;font-size:.75rem}.page-module__cB4boq__rangeField{margin-top:14px}.page-module__cB4boq__rangeField>div{justify-content:space-between;gap:12px;display:flex}.page-module__cB4boq__rangeField output{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:800}.page-module__cB4boq__rangeField input{width:100%;height:32px;accent-color:var(--accent);cursor:pointer;margin:2px 0 9px}.page-module__cB4boq__browserFrame{background:#e7ece8;border:1px solid #aebbb4;border-radius:15px;overflow:hidden}.page-module__cB4boq__browserBar{color:var(--muted);background:#f7f9f7;border-bottom:1px solid #bdc8c2;justify-content:space-between;gap:12px;padding:10px 13px;font-size:.74rem;display:flex}.page-module__cB4boq__browserBar strong{color:var(--ink);font-variant-numeric:tabular-nums}.page-module__cB4boq__previewViewport{min-height:310px;padding-block:18px}.page-module__cB4boq__cardGrid{align-items:stretch;width:100%;display:grid}.page-module__cB4boq__previewCard,.page-module__cB4boq__emptyTrack{background:#fff;border-radius:10px;min-width:0;min-height:150px;padding:clamp(8px,1.4vw,15px)}.page-module__cB4boq__previewCard{border:1px solid #c6d0ca;flex-direction:column;display:flex;box-shadow:0 8px 18px #17221d12}.page-module__cB4boq__previewCard span{color:var(--accent);text-transform:uppercase;font-size:clamp(.55rem,1vw,.72rem);font-weight:800}.page-module__cB4boq__previewCard strong{overflow-wrap:anywhere;margin:9px 0 14px;font-size:clamp(.65rem,1.2vw,.95rem)}.page-module__cB4boq__previewCard i{background:#dce5df;border-radius:4px;height:6px;margin-bottom:6px;display:block}.page-module__cB4boq__previewCard .page-module__cB4boq__shortLine{width:68%}.page-module__cB4boq__previewCard b{color:#fff;background:var(--accent);border-radius:5px;align-self:flex-start;margin-top:auto;padding:5px 8px;font-size:clamp(.5rem,.8vw,.68rem)}.page-module__cB4boq__emptyTrack{color:#526159;text-align:center;overflow-wrap:anywhere;background:repeating-linear-gradient(135deg,#ffffffa6,#ffffffa6 8px,#71817914 8px 16px);border:2px dashed #718179;place-items:center;font-size:clamp(.55rem,1vw,.78rem);font-weight:750;display:grid}.page-module__cB4boq__previewCaption{color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;margin:14px 0 0;font-size:.86rem}.page-module__cB4boq__results,.page-module__cB4boq__breakpoints,.page-module__cB4boq__codeSection,.page-module__cB4boq__notes{margin-top:24px;padding:clamp(22px,4vw,38px)}.page-module__cB4boq__metrics{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:24px 0;display:grid}.page-module__cB4boq__metrics div{background:var(--paper);border-radius:12px;min-width:0;padding:15px}.page-module__cB4boq__metrics dt{min-height:32px;color:var(--muted);font-size:.76rem;line-height:1.4}.page-module__cB4boq__metrics dd{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin:8px 0 0;font-size:clamp(1rem,2vw,1.35rem);font-weight:850}.page-module__cB4boq__modeExplanation{border-left:4px solid var(--accent);background:#edf5f0;grid-template-columns:100px 1fr;gap:14px;padding:16px;display:grid}.page-module__cB4boq__modeExplanation strong{color:var(--accent)}.page-module__cB4boq__modeExplanation p,.page-module__cB4boq__noteText,.page-module__cB4boq__warning{margin:0;line-height:1.7}.page-module__cB4boq__warning,.page-module__cB4boq__noteText{color:var(--muted);margin-top:14px;font-size:.88rem}.page-module__cB4boq__warning{color:#81271f;background:#fff4f2;border:1px solid #d9a49e;border-radius:9px;padding:12px}.page-module__cB4boq__breakpoints>div:first-child{justify-content:space-between;align-items:end;display:flex}.page-module__cB4boq__tableWrap{margin-top:22px;overflow-x:auto}.page-module__cB4boq__breakpoints table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.page-module__cB4boq__breakpoints th,.page-module__cB4boq__breakpoints td{border-bottom:1px solid var(--line);text-align:left;padding:13px}.page-module__cB4boq__breakpoints thead th{color:var(--muted);font-size:.78rem}.page-module__cB4boq__noBreakpoints{min-height:54px;color:var(--muted);margin:22px 0 0}.page-module__cB4boq__codeGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px;display:grid}.page-module__cB4boq__codePanel{border:1px solid var(--line);background:#fff;border-radius:14px;min-width:0;padding:18px}.page-module__cB4boq__codePanel h3{margin:8px 0 0}.page-module__cB4boq__codeHeading button{border:1px solid var(--accent);color:var(--accent);background:#fff}.page-module__cB4boq__codePanel>p{min-height:48px;color:var(--muted);font-size:.84rem;line-height:1.55}.page-module__cB4boq__codePanel pre{color:#ecf5ef;white-space:pre;background:#14241d;border-radius:10px;min-height:310px;max-height:390px;margin:14px 0 0;padding:16px;font-size:.78rem;line-height:1.6;overflow:auto}.page-module__cB4boq__copyStatus{min-height:20px;color:var(--muted);margin-top:8px;font-size:.72rem}.page-module__cB4boq__liveRegion{min-height:24px;color:var(--accent-dark);margin:12px 0 0;font-size:.86rem;font-weight:700}.page-module__cB4boq__notes ul{color:var(--muted);margin:18px 0 0;padding-left:1.3em;line-height:1.8}.page-module__cB4boq__backLink{margin:28px 0 16px}.page-module__cB4boq__backLink a{min-height:44px;color:var(--accent-dark);text-underline-offset:5px;align-items:center;font-weight:750;display:inline-flex}.page-module__cB4boq__page :is(button,input,a,pre):focus-visible{outline-offset:3px;outline:3px solid #f1a53b}@media (max-width:1100px){.page-module__cB4boq__fieldGrid,.page-module__cB4boq__metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:760px){.page-module__cB4boq__fieldGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-module__cB4boq__controlRow{grid-template-columns:minmax(0,1fr)}}@media (max-width:560px){.page-module__cB4boq__page{padding-inline:14px}.page-module__cB4boq__workspace,.page-module__cB4boq__results,.page-module__cB4boq__breakpoints,.page-module__cB4boq__codeSection,.page-module__cB4boq__notes{border-radius:17px}.page-module__cB4boq__fieldGrid,.page-module__cB4boq__codeGrid,.page-module__cB4boq__modeOptions{grid-template-columns:1fr}.page-module__cB4boq__actions{flex-direction:column}.page-module__cB4boq__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.page-module__cB4boq__modeExplanation{grid-template-columns:1fr;gap:5px}.page-module__cB4boq__previewPanel{min-height:500px}.page-module__cB4boq__previewViewport{min-height:350px;padding-block:16px}.page-module__cB4boq__previewCard,.page-module__cB4boq__emptyTrack{min-height:150px;padding:7px}.page-module__cB4boq__previewCard strong{margin-block:7px 10px}.page-module__cB4boq__codePanel pre{min-height:260px}}