.dp-page { --dp-space:clamp(20px,3vw,34px); }
.dp-page [hidden] { display:none!important; }
.dp-page a { text-decoration:underline; text-underline-offset:4px; }
.dp-hero { padding-top:116px; padding-bottom:48px; }
.dp-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--text-dim); margin-bottom:28px; }
.dp-breadcrumb a { text-decoration:none; }
.dp-hero h1 { font-size:clamp(2.2rem,5.1vw,3.65rem); line-height:1.12; letter-spacing:-.045em; margin:16px 0 22px; }
.dp-lead { color:var(--text-dim); max-width:760px; font-size:1.08rem; }
.dp-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:26px; font-size:.86rem; }
.dp-links a { display:flex; align-items:center; min-height:44px; }
.dp-workspace { display:grid; grid-template-columns:minmax(275px,.85fr) minmax(0,1.55fr); gap:24px; align-items:start; scroll-margin-top:96px; }
.dp-controls,.dp-results { padding:var(--dp-space); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); min-width:0; }
.dp-results { background:var(--bg-soft); }
.dp-section-heading { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.dp-section-heading h2 { font-size:1.15rem; line-height:1.3; }
.dp-step { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; color:var(--accent-ink); font:.75rem var(--mono); flex:none; }
.dp-help { font-size:.77rem; color:var(--text-dim); line-height:1.6; }
.dp-scope { margin:-4px 0 24px; }
.dp-page input,.dp-page select,.dp-page button,.dp-page textarea { font:inherit; }
.dp-field { display:grid; gap:7px; margin-bottom:20px; min-width:0; }
.dp-field label { font-size:.85rem; font-weight:600; }
.dp-field label [data-dp-unit] { color:var(--text-dim); font-size:.75rem; font-weight:400; }
.dp-field input,.dp-field select { width:100%; min-width:0; min-height:44px; padding:12px; color:var(--text); background:var(--bg); border:1px solid var(--text-faint); border-radius:7px; font-size:.88rem; }
.dp-field select { padding-right:22px; }
.dp-page :is(input,select,button,textarea):focus-visible { outline:2px solid var(--accent-ink); outline-offset:3px; }
.dp-hardware { border:0; margin:0 0 22px; }
.dp-hardware legend { font-size:.85rem; font-weight:600; margin-bottom:6px; }
.dp-hardware label,.dp-checkbox { display:flex; align-items:center; gap:10px; min-height:44px; font-size:.82rem; cursor:pointer; }
.dp-page input[type=checkbox] { accent-color:var(--accent-ink); width:19px; height:19px; flex:none; }
.dp-hardware .dp-help { margin-top:7px; }
.dp-checkbox { align-items:flex-start; padding:10px 0; }
.dp-checkbox input { margin-top:3px; }
.dp-details { border-block:1px solid var(--border); margin:15px 0 20px; padding-bottom:18px; }
.dp-details summary { padding:14px 0; min-height:44px; cursor:pointer; font-size:.86rem; font-weight:600; }
.dp-details>.dp-help:first-of-type { margin-bottom:16px; }
.dp-calculate { min-height:46px; width:100%; padding:12px 8px; }
.dp-examples { display:grid; gap:6px; margin-top:8px; }
.dp-examples button { background:transparent; border:1px solid var(--text-faint); border-radius:7px; color:var(--text-dim); min-height:44px; padding:8px; font-size:.78rem; cursor:pointer; }
.dp-errors { color:var(--bad-ink); font-size:.86rem; margin-top:18px; }
.dp-errors ul { padding-left:18px; list-style:disc; }
.dp-status { color:var(--text-dim); font-size:.84rem; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.dp-status.has-fail { color:var(--bad-ink); }
.dp-selection { color:var(--text-dim); font-size:.78rem; line-height:1.6; margin-bottom:24px; }
.dp-metrics { display:grid; grid-template-columns:1fr 1fr; gap:22px 16px; margin-bottom:28px; }
.dp-metrics span,.dp-metrics small { display:block; font-size:.74rem; color:var(--text-dim); }
.dp-metrics strong { display:block; font:500 clamp(1.3rem,2vw,1.9rem)/1.2 var(--mono); color:var(--accent-ink); margin:7px 0; overflow-wrap:anywhere; }
.dp-metrics small { font-size:.7rem; }
.dp-diagram { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px 12px 14px; margin-bottom:18px; }
.dp-diagram h3 { font-size:.88rem; padding-left:6px; }
.dp-diagram svg { width:100%; height:auto; display:block; }
.dp-diagram figcaption { color:var(--text-dim); font-size:.76rem; line-height:1.6; }
.dp-svg-wall { fill:none; stroke:var(--text-dim); stroke-width:7; }
.dp-svg-door { fill:none; stroke:var(--accent-ink); stroke-width:4; }
.dp-svg-swing { fill:none; stroke:var(--text-dim); stroke-dasharray:5 5; stroke-width:1.5; }
.dp-svg-area { fill:var(--accent-glow); stroke:var(--accent-ink); stroke-width:1.5; stroke-dasharray:7 4; }
.dp-svg-dim { fill:none; stroke:var(--text); stroke-width:1.3; }
.dp-svg-text { fill:var(--text); font:13px var(--mono); }
.dp-svg-muted { fill:var(--text-dim); font:12px var(--font); }
.dp-svg-arrow { stroke:var(--accent-ink); stroke-width:3; fill:none; }
.dp-svg-arrowhead { fill:var(--accent-ink); }
.dp-reason { color:var(--text-dim); font-size:.81rem; line-height:1.65; padding:0 0 24px; }
.dp-results h3 { font-size:.98rem; margin-bottom:12px; }
.dp-checks { display:grid; gap:10px; }
.dp-checks li { border:1px solid var(--border); border-radius:8px; padding:14px; }
.dp-checks header { display:flex; align-items:start; justify-content:space-between; gap:10px; font-size:.81rem; }
.dp-checks p { color:var(--text-dim); font-size:.78rem; margin-top:8px; }
.dp-checks small { display:block; color:var(--text-dim); font-size:.7rem; margin-top:7px; }
.dp-badge { border:1px solid currentColor; border-radius:4px; padding:2px 6px; font-size:.68rem; flex:none; }
.dp-badge.pass { color:var(--good-ink); }.dp-badge.fail { color:var(--bad-ink); }.dp-badge.review { color:var(--text-dim); }
.dp-notes { color:var(--text-dim); font-size:.8rem; margin:24px 0; }
.dp-notes ul { padding-left:18px; list-style:disc; margin:14px 0; }.dp-notes li+li { margin-top:9px; }
.dp-actions { display:flex; flex-wrap:wrap; gap:8px; }.dp-actions .btn { border:1px solid var(--text-faint); min-height:44px; font-size:.76rem; padding:10px 13px; }
#dp-copy-status { margin-top:12px; }#dp-copy-fallback { background:var(--surface); color:var(--text); border:1px solid var(--text-faint); width:100%; min-height:250px; padding:12px; font-size:.82rem; }
.dp-explain { padding-top:64px; scroll-margin-top:90px; }.dp-explain:last-child { padding-bottom:64px; }.dp-explain>h2 { font-size:1.7rem; line-height:1.3; letter-spacing:-.025em; margin-bottom:24px; }
.dp-learning-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.dp-learning-grid article { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; min-width:0; }
.dp-learning-grid h3 { font-size:1rem; margin-bottom:14px; }.dp-learning-grid p { color:var(--text-dim); font-size:.85rem; margin-bottom:15px; }.dp-learning-grid a { font-size:.82rem; display:inline-block; padding:10px 0; min-height:44px; }
.dp-letter { color:var(--accent-ink); font:1.6rem var(--mono); display:block; margin-bottom:20px; }
@media(max-width:850px) { .dp-workspace,.dp-learning-grid { grid-template-columns:1fr; }.dp-hero { padding-top:106px; } }
@media(max-width:440px) { .dp-controls,.dp-results { padding:18px; }.dp-hero h1 { font-size:2.1rem; }.dp-metrics { gap:18px 12px; }.dp-checks header { flex-wrap:wrap; }.dp-actions .btn { flex:1; }.dp-diagram { padding:15px 5px 12px; } }
@media print { .nav,.footer,.dp-breadcrumb,.dp-links,.dp-controls,.dp-explain,.dp-actions,#dp-copy-status,.to-top { display:none!important; }.dp-hero { padding:0 0 18px; }.dp-hero h1 { font-size:24pt; }.dp-lead { font-size:10pt; }.dp-workspace { display:block; }.dp-results { padding:0; border:0; }.dp-page { --bg:white;--bg-soft:white;--surface:white;--text:#111;--text-dim:#333;--text-faint:#555;--border:#bbb;--accent-ink:#005a47;--accent-glow:#e3f4ed;--good-ink:#005a47;--bad-ink:#8b1515; }.dp-diagram { max-width:470px; margin-inline:auto; break-inside:avoid; }.dp-checks li { break-inside:avoid; }.dp-page a { color:#111; }.dp-notes { font-size:9pt; } }