.pp-page { --pp-space:clamp(20px,3vw,34px); }
.pp-page [hidden] { display:none !important; }
.pp-page a { text-decoration:underline; text-underline-offset:4px; }
.pp-hero { padding-top:122px; padding-bottom:48px; }
.pp-breadcrumb { display:flex; gap:12px; flex-wrap:wrap; color:var(--text-dim); font-size:.82rem; margin-bottom:30px; }
.pp-hero h1 { font-size:clamp(2.3rem,5vw,3.7rem); line-height:1.1; letter-spacing:-.045em; margin:14px 0 24px; }
.pp-lead { max-width:720px; color:var(--text-dim); font-size:1.1rem; }
.pp-links { display:flex; gap:22px; flex-wrap:wrap; font-size:.85rem; margin-top:26px; }
.pp-links a { min-height:44px; display:inline-flex; align-items:center; }
.pp-links a:first-child { color:var(--accent-ink); }
.pp-workspace { display:grid; grid-template-columns:minmax(275px,.85fr) minmax(0,1.6fr); gap:24px; align-items:start; scroll-margin-top:95px; }
.pp-controls,.pp-results { padding:var(--pp-space); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); min-width:0; }
.pp-results { background:var(--bg-soft); }
.pp-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.pp-heading h2 { font-size:1.2rem; line-height:1.3; }
.pp-step { display:grid; place-items:center; flex:none; width:29px; height:29px; border:1px solid var(--text-faint); border-radius:50%; color:var(--accent-ink); font:.75rem var(--mono); }
.pp-scope { font-size:.79rem; color:var(--text-dim); line-height:1.65; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--border); }
.pp-scope strong { color:var(--text); }
.pp-field { display:grid; gap:7px; margin-bottom:18px; min-width:0; }
.pp-field label { font-size:.84rem; font-weight:600; }
.pp-page input,.pp-page select,.pp-page button { font:inherit; }
.pp-field input,.pp-field select { width:100%; min-width:0; min-height:46px; padding:11px; color:var(--text); background:var(--bg); border:1px solid var(--text-faint); border-radius:7px; font-size:.9rem; }
.pp-page :is(input,select,button):focus-visible { outline:2px solid var(--accent-ink); outline-offset:4px; }
.pp-help { color:var(--text-dim); font-size:.76rem; line-height:1.6; }
.pp-check { display:flex; gap:10px; align-items:center; min-height:44px; font-size:.84rem; margin:5px 0 13px; cursor:pointer; }
.pp-page input:is([type=checkbox],[type=radio]) { accent-color:var(--accent-ink); width:18px; height:18px; flex:none; }
.pp-layouts { border:0; display:grid; gap:8px; margin:25px 0 20px; }
.pp-layouts legend { font-size:.84rem; font-weight:650; padding-bottom:9px; }
.pp-layouts label { display:flex; align-items:center; gap:10px; border:1px solid var(--text-faint); border-radius:8px; padding:10px 12px; min-height:56px; cursor:pointer; }
.pp-layouts label:has(:checked) { background:var(--accent-glow); border-color:var(--accent-ink); }
.pp-layouts span { font-size:.86rem; font-weight:600; }.pp-layouts small { display:block; color:var(--text-dim); font-size:.73rem; font-weight:400; }
.pp-calculate { width:100%; min-height:46px; }.pp-errors { color:var(--bad-ink); font-size:.85rem; margin-top:18px; }.pp-errors ul { list-style:disc; padding-left:18px; }
.pp-status { border-bottom:1px solid var(--border); padding-bottom:20px; margin-bottom:26px; color:var(--text-dim); font-size:.85rem; }
.pp-metrics { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.pp-metrics span,.pp-metrics small { display:block; color:var(--text-dim); font-size:.76rem; }
.pp-metrics strong { display:block; color:var(--accent-ink); font:500 clamp(2.6rem,5vw,4rem) var(--mono); line-height:1.2; margin:5px 0; overflow-wrap:anywhere; }
.pp-formula { font-size:.85rem; margin-bottom:8px; }
.pp-comparison { margin:24px 0; border:1px solid var(--border); border-radius:9px; padding:18px; background:var(--surface); }
.pp-comparison h3 { font-size:.88rem; margin-bottom:14px; }.pp-comparison dl { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:12px; }
.pp-comparison dt { font-size:.77rem; color:var(--text-dim); }.pp-comparison dd { font:500 1.55rem var(--mono); margin-top:5px; }
.pp-diagram { margin:24px 0 18px; padding:18px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); min-width:0; }
.pp-diagram h3 { font-size:.9rem; padding:0 8px; margin-bottom:4px; }.pp-diagram svg { display:block; width:100%; height:auto; }
.pp-diagram figcaption { font-size:.73rem; color:var(--text-dim); padding:0 8px; }.pp-svg-line { stroke:var(--accent-ink); fill:none; stroke-width:2; }.pp-svg-bay { fill:var(--accent-glow); stroke:var(--accent-ink); stroke-width:2; }.pp-svg-text { font:12px var(--mono); fill:var(--text); }.pp-svg-label { font:13px var(--font); fill:var(--text); }.pp-svg-muted { font:11px var(--font); fill:var(--text-dim); }
.pp-dimensions { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:16px; }.pp-dimensions div { border-bottom:1px solid var(--border); padding-bottom:12px; }.pp-dimensions dt { font-size:.73rem; color:var(--text-dim); }.pp-dimensions dd { font:.86rem var(--mono); margin-top:6px; }
.pp-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:24px; }.pp-actions .btn { border:1px solid var(--text-faint); min-height:44px; padding:10px 14px; font-size:.8rem; }#pp-export-status { margin-top:10px; }
.pp-section { padding-top:64px; scroll-margin-top:45px; }.pp-section>h2 { font-size:1.75rem; line-height:1.25; letter-spacing:-.025em; margin-bottom:18px; }.pp-section>p { color:var(--text-dim); max-width:860px; margin-bottom:22px; }
.pp-table-wrap { overflow:auto; max-width:100%; border:1px solid var(--border); border-radius:10px; margin-bottom:14px; }.pp-table-wrap:focus-visible { outline:2px solid var(--accent-ink); outline-offset:4px; }
.pp-table-wrap table { border-collapse:collapse; width:100%; text-align:left; font-size:.82rem; }.pp-table-wrap caption { text-align:left; padding:18px; color:var(--text-dim); font-size:.76rem; }.pp-table-wrap th,.pp-table-wrap td { border-top:1px solid var(--border); padding:10px 16px; }.pp-table-wrap thead { background:var(--surface); }.pp-table-wrap tbody th { white-space:nowrap; }.pp-table-wrap tbody tr.is-current { background:var(--accent-glow); box-shadow:inset 4px 0 var(--accent-ink); }.pp-table-wrap button { background:var(--bg); color:var(--text); border:1px solid var(--text-faint); border-radius:6px; padding:7px 12px; min-height:44px; white-space:nowrap; cursor:pointer; font-size:.76rem; }.pp-table-wrap button:hover { border-color:var(--accent-ink); }
.pp-learning-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.pp-learning-grid article { padding:24px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }.pp-learning-grid h3 { font-size:1rem; margin-bottom:12px; }.pp-learning-grid p { color:var(--text-dim); font-size:.83rem; line-height:1.75; margin-bottom:14px; }.pp-learning-grid a { display:inline-block; font-size:.8rem; padding:6px 0; }.pp-letter { display:block; color:var(--accent-ink); font:1.6rem var(--mono); margin-bottom:16px; }.pp-note { border-left:3px solid var(--accent-ink); padding:5px 0 5px 22px; margin-top:32px; }.pp-note h3 { font-size:1rem; margin-bottom:10px; }.pp-note p { color:var(--text-dim); font-size:.84rem; max-width:920px; }.pp-last { padding-bottom:72px; }
@media(max-width:900px) { .pp-workspace { grid-template-columns:1fr; }.pp-learning-grid { grid-template-columns:1fr; }.pp-hero { padding-top:110px; }.pp-hero h1 { font-size:clamp(2.2rem,7vw,3.5rem); } }
@media(max-width:450px) { .pp-metrics span { font-size:.7rem; }.pp-dimensions { grid-template-columns:1fr; }.pp-table-wrap th,.pp-table-wrap td { padding:10px; }.pp-hero { padding-bottom:28px; }.pp-section { padding-top:42px; }.pp-hero h1 { font-size:2.25rem; }.pp-links { gap:8px 20px; } }
@media print { .nav,.footer,.bg-grid,.bg-glow,.to-top,.pp-links,.pp-breadcrumb,.pp-controls,.pp-actions,.pp-table-wrap button,#pp-export-status { display:none !important; } .pp-page { color:#111; }.pp-hero { padding-top:10px; padding-bottom:20px; }.pp-hero h1 { font-size:28px; }.pp-hero h1 br { display:none; }.pp-workspace { display:block; }.pp-results { background:#fff; padding:16px; border-color:#aaa; }.pp-section { padding-top:25px; }.pp-section .pp-heading { margin-bottom:10px; }.pp-learning-grid { grid-template-columns:1fr; gap:10px; }.pp-learning-grid article { break-inside:avoid; padding:12px; }.pp-diagram { break-inside:avoid; width:80%; margin-inline:auto; }.pp-metrics strong { font-size:36px; }.pp-table-wrap { overflow:visible; }.pp-page a { color:#111; }.pp-page * { text-shadow:none !important; box-shadow:none !important; }.pp-page { --text:#111; --text-dim:#333; --accent-ink:#175347; --surface:#fff; --bg-soft:#fff; --border:#aaa; --accent-glow:#edf5f2; } }