.csw-offset3d [hidden] { display: none !important; }
.csw-offset3d__copy { margin-top: 12px; }
.csw-offset3d__copy [role="status"] { font-size: 13px; line-height: 1.5; }
.csw-offset3d__copy textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 14px/1.5 sans-serif; }
.csw-offset3d [data-angle], .csw-offset3d [data-run] { min-width: 0; }
.csw-offset3d__workspace { display: grid; gap: 24px; align-items: start; }
.csw-offset3d__inputs { min-width: 0; }
.csw-offset3d__guide { margin: 0; padding: 16px; min-width: 0; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; color: #17345c; }
.csw-offset3d__guide figcaption { font-size: 14px; font-weight: 700; }
.csw-offset3d__guide svg { display: block; width: 100%; height: 180px; margin: 8px 0; overflow: visible; }
.csw-offset3d__guide svg text { font: 600 21px sans-serif; fill: currentColor; stroke: #f8fafc; stroke-width: 4px; paint-order: stroke; }
.csw-offset3d__guide svg [data-guide-cut][data-measure] text { font-size: 17px; }
.csw-offset3d__pipe-axis { fill: none; stroke: #0f766e; stroke-width: 5px; stroke-linejoin: round; }
.csw-offset3d__projection { fill: none; stroke: #94a3b8; stroke-width: 1.5px; stroke-dasharray: 5 5; }
.csw-offset3d__dimension { fill: none; stroke: currentColor; stroke-width: 1.5px; }
.csw-offset3d__guide [data-measure] { color: #475569; }
.csw-offset3d__guide [data-measure].is-active { color: #087e73; }
.csw-offset3d__guide [data-measure].is-active .csw-offset3d__dimension { stroke-width: 3px; }
.csw-offset3d__guide-key { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.csw-offset3d__guide-key > div { display: flex; gap: 4px; padding: 4px; border-radius: 5px; font-size: 12px; line-height: 1.5; }
.csw-offset3d__guide-key > div.is-active { background: #ccfbf1; }
.csw-offset3d__guide-key dt { width: 18px; flex-shrink: 0; font-weight: 700; }
.csw-offset3d__guide-key dd { margin: 0; }
.csw-offset3d__guide-note { margin: 6px 0; color: #475569; font-size: 12px; line-height: 1.5; }
.csw-offset3d__guide-focus { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #cbd5e1; color: #475569; font-size: 12px; line-height: 1.5; }
.csw-offset3d__fitting-line { fill: none; stroke: #0f766e; stroke-width: 5px; }
.csw-offset3d__gap-line { fill: none; stroke: #94a3b8; stroke-width: 5px; }
.csw-offset3d__length-line { fill: none; stroke: #b45309; stroke-width: 6px; }
.csw-offset3d__guide svg .csw-offset3d__length-label { fill: #b45309; }
.csw-offset3d__cut-dot { color: #b45309; }
.csw-offset3d__guide .is-active .csw-offset3d__fitting-line, .csw-offset3d__guide .is-active .csw-offset3d__gap-line { stroke: #087e73; stroke-width: 9px; }
@media (min-width: 960px) {
    .csw-offset3d__workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .csw-offset3d__inputs .csw-form__grid { grid-template-columns: minmax(0, 1fr) !important; }
    .csw-offset3d__guide { position: sticky; top: 16px; }
}
.csw-offset3d__modes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 4px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 11px; padding: 5px; }
.csw-offset3d button.csw-offset3d__mode { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 46px !important; padding: 10px 8px !important; margin: 0 !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 7px !important; color: #475569 !important; font: 600 14px/1.3 'Inter', sans-serif !important; box-shadow: none !important; cursor: pointer; }
.csw-offset3d button.csw-offset3d__mode[aria-pressed='true'] { color: #ffffff !important; background: #087e73 !important; border-color: #087e73 !important; box-shadow: 0 2px 5px rgba(8,126,115,.18) !important; }
.csw-offset3d button.csw-offset3d__mode[aria-pressed='false']:hover { background: #e2e8f0 !important; color: #17345c !important; }
.csw-offset3d button.csw-offset3d__mode:focus-visible, .csw-offset3d__angles button:focus-visible { outline: 3px solid #109a8c !important; outline-offset: 3px !important; }
.csw-offset3d__mode-hint { margin: 10px 0 24px; min-height: 36px; color: #475569; font-size: 13px; line-height: 1.5; }
.csw-offset3d__angles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.csw-offset3d__angles button { min-height: 34px !important; padding: 6px 14px !important; margin: 0 !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; background: #fff !important; color: #475569 !important; font: 600 12px/1.4 'Inter', sans-serif !important; box-shadow: none !important; cursor: pointer; }
.csw-offset3d__angles button[aria-pressed='true'] { background: #f0fdfa !important; border-color: #0f766e !important; color: #0f766e !important; }
.csw-offset3d__cut-toggle { margin: 24px 0 12px; padding: 14px; border: 1px solid #cbd5e1; border-radius: 9px; background: #f8fafc; align-items: flex-start; gap: 10px; }
.csw-offset3d__cut-toggle input { flex-shrink: 0; margin-top: 2px; }
.csw-offset3d__cut-toggle strong { display: block; font-size: 13px; line-height: 1.5; }
.csw-offset3d__cut-toggle small { display: block; margin-top: 3px; color: #475569; font-size: 12px; line-height: 1.5; }
.csw-offset3d__cut-toggle:has(input:checked) { background: #f0fdfa; border-color: #109a8c; }
.csw-offset3d__cut-toggle:has(input:focus-visible) { outline: 3px solid rgba(16,154,140,.4); outline-offset: 2px; }
.csw-offset3d__units-note { margin: 16px 0 0; color: #475569; font-size: 12px; line-height: 1.5; }
.csw-offset3d__note { text-align: left; padding: 12px 14px; border-left: 3px solid #109a8c; background: #f0fdfa; font-size: 13px; line-height: 1.5; }
.csw-offset3d .csw-result { border-style: solid; border-width: 1px; }
.csw-offset3d .csw-result:has(.csw-result__placeholder) { border-style: dashed; padding: 22px 16px; }
.csw-offset3d__empty-title { color: #17345c; font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.csw-offset3d__hero { padding: 20px 12px; background: #f0fdfa; border: 1px solid #99d5cb; border-radius: 10px; }
.csw-offset3d__hero .csw-result__label { text-transform: none; font-size: 13px; letter-spacing: 0; color: #0f766e; }
.csw-offset3d__hero .csw-result__value { color: #134e4a; margin: 8px 0 0; }
.csw-offset3d__allowances { color: #475569; font-size: 12px; margin: 10px 0 0; line-height: 1.6; }
.csw-offset3d__steps { text-align: left; margin-top: 18px; border-top: 1px solid #e2e8f0; padding-top: 14px; }
.csw-offset3d__steps summary { cursor: pointer; color: #17345c; font-size: 13px; font-weight: 600; padding: 8px 0; }
.csw-offset3d__steps summary:focus-visible { outline: 2px solid #109a8c; outline-offset: 3px; }
.csw-offset3d .csw-result__value { font-size: clamp(22px, 5vw, 32px); overflow-wrap: anywhere; }
.csw-offset3d__numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; text-align: left; }
.csw-offset3d__number { background: white; border: 1px solid #e2e8f0; padding: 12px; border-radius: 8px; }
.csw-offset3d__number span { display: block; font-size: 12px; color: #64748b; }
.csw-offset3d__number strong { display: block; margin-top: 5px; font-size: 16px; overflow-wrap: anywhere; }
.csw-offset3d__formula { text-align: left; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.csw-offset3d__error { color: #b42318; text-align: left; font-size: 14px; }
.csw-offset3d input[aria-invalid='true'], .csw-offset3d select[aria-invalid='true'] { border-color: #b42318 !important; }
@media (max-width: 480px) {
    .csw-offset3d .csw-result { padding: 16px 12px; }
    .csw-offset3d__numbers { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .csw-offset3d__modes { grid-template-columns: 1fr; }
}