.fifth-page { --tg-teal:#286b66; --tg-coral:#aa4c3a; }
.fifth-page .fg-heading { border-color:#46794c; }
.fifth-page .km-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:12px; }
.fifth-page .km-groups > div { min-width:0; width:100%; padding:12px 4px; box-sizing:border-box; }
.fifth-page .km-groups strong { font-size:24px; overflow-wrap:anywhere; }
.five-hundred { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); width:min(100%,340px); aspect-ratio:1; margin:20px auto; border:2px solid #426963; }
.five-hundred span { min-width:0; border:1px solid #bfd1c8; background:#fff; }
.five-hundred .five-selected { background:repeating-linear-gradient(135deg,#acd4bd 0 8px,#6ea78e 8px 10px); }
.five-diagram { width:100%; max-width:470px; height:auto; display:block; margin:auto; overflow:visible; }
.five-diagram path,.five-diagram polyline { fill:none; stroke:#32695f; stroke-width:2; }
.five-diagram text { font:15px Georgia,serif; text-anchor:middle; fill:#2b433d; }
.five-diagram .five-guide { stroke:#adc2b6; stroke-width:1; }
.five-diagram .five-ray,.five-diagram .five-trace { stroke:#a34735; stroke-width:3; }
.five-point { fill:#286c60; }
.five-second-point { fill:#b34f38; }
.five-diagram .five-frame { fill:#fff; stroke:#789d89; }
.five-set-a { fill:#b1d7bf; fill-opacity:.7; stroke:#4e856f; stroke-width:2; }
.five-set-b { fill:#edc6af; fill-opacity:.7; stroke:#a26648; stroke-width:2; }
.five-surface { fill:#c2ddc7; stroke:#376e54; stroke-width:2; }
.five-image { fill:#f0c9b6; stroke:#8b4938; stroke-width:2; }
.five-pictograph { width:100%; }
.five-pictograph > div { display:grid; grid-template-columns:25px minmax(0,1fr); gap:12px; align-items:center; border-bottom:1px solid #aac6b4; padding:12px 0; }
.five-pictograph > div > span { display:flex; flex-wrap:wrap; gap:6px; }
.five-pictograph img { width:30px; height:30px; object-fit:contain; }
.five-histogram { width:100%; }
.five-hist-bars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-left:2px solid #4c7562; }
.five-hist-bars > div { min-width:0; text-align:center; }
.five-hist-track { height:180px; display:flex; align-items:end; background:repeating-linear-gradient(to top,#adc3b4 0 1px,transparent 1px 30px); border-bottom:2px solid #4c7562; }
.five-hist-track > span { display:block; width:100%; background:#b4d6bc; border:1px solid #648c6c; }
.five-hist-track b { display:block; padding:4px 0; }
.five-hist-bars strong { display:block; font-size:13px; padding-top:8px; }
.five-volume { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px; width:100%; }
.five-volume h3 { font-size:15px; text-align:center; margin:0 0 10px; }
.five-layer { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:2px; max-width:220px; margin:auto; }
.five-layer > span { display:grid; place-items:center; min-width:0; aspect-ratio:1; background:#edf4e9; border-bottom:1px solid #9cba99; }
.five-layer img { width:100%; height:100%; object-fit:contain; }
.five-controls { display:flex; flex-wrap:wrap; gap:16px; margin:24px 0; }
.five-controls label { display:grid; gap:8px; min-width:0; width:calc((100% - 32px)/3); max-width:180px; }
.five-controls input[type="number"] { width:100%; min-width:0; min-height:44px; padding:8px; font-size:20px; border:1px solid #8ca99a; border-radius:5px; box-sizing:border-box; }
.five-controls .five-slider { width:100%; max-width:500px; margin:auto; }
.five-slider input { width:100%; min-height:44px; accent-color:#326f59; }
.five-result { text-align:center; font-size:26px; overflow-wrap:anywhere; }
.five-rounding { text-align:center; }
.five-workshop .five-volume { max-width:850px; margin:auto; }
.five-calculation { margin:12px auto; width:max-content; max-width:100%; text-align:right; font:24px ui-monospace,monospace; letter-spacing:0; }
.five-calculation hr { margin:8px 0; }
.five-observations { width:100%; overflow-wrap:anywhere; }
.five-field-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px; margin:16px 0; }
.five-entry { display:grid; gap:6px; font-size:15px; min-width:0; }
.five-entry input,.five-entry select { min-width:0; width:100%; min-height:44px; box-sizing:border-box; border:1px solid #779885; border-radius:4px; padding:8px; font-size:18px; background:#fff; color:#243c32; }
.five-shade-model { display:grid; grid-template-columns:repeat(var(--parts),minmax(0,1fr)); width:100%; max-width:420px; margin:20px auto; border:1px solid #547d69; }
.five-shade-model > span,.five-shade-model label { position:relative; display:block; margin:0; min-width:0; min-height:64px; border:1px solid #91ad9d; background:#fff; }
.fifth-page #km-answer-form .five-shade-model label { margin:0; }
.five-shade-model[style*="10"] > span,.five-shade-hundred label { aspect-ratio:1; min-height:0; }
.five-shade-model label input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.five-shade-model label span { display:block; width:100%; height:100%; pointer-events:none; }
.five-shade-model .five-filled,.five-shade-model input:checked + span { background:repeating-linear-gradient(135deg,#9bceb5 0 8px,#579876 8px 10px); }
.five-shade-model input:focus-visible + span { outline:3px solid #ac4b36; outline-offset:-3px; }
.five-shade-model input:disabled { cursor:default; }
.five-lattice { width:100%; max-width:380px; margin:15px auto; table-layout:fixed; border-collapse:collapse; }
.five-lattice th:last-child { width:26px; }
.five-lattice th { font-size:22px; padding:10px 0; }
.five-lattice td { border:2px solid #729783; padding:4px; background:linear-gradient(135deg,transparent 49.5%,#729783 49.5% 50.5%,transparent 50.5%); }
.five-lattice .five-entry { width:48%; font-size:11px; line-height:1.25; }
.five-lattice .five-entry + .five-entry { margin-left:auto; }
.five-lattice input { padding:4px; text-align:center; }
.five-diagram .five-mirror { stroke:#a14432; stroke-width:3; stroke-dasharray:8 5; }
.five-rotation-original { fill:none; stroke:#263f34; stroke-width:4; }
.five-rotation-copy { fill:#d48265; fill-opacity:.65; stroke:#a24730; stroke-width:2; }
.fifth-page .km-answers .five-diagram { width:100%; min-width:0; max-width:320px; }
[data-five-preview] { min-width:0; }
@media(max-width:760px){.five-result{font-size:23px}.five-diagram text{font-size:15px}.five-volume{gap:12px}}