.line-demo{margin:30px 0;border:1px solid #c5cfc7;background:#f2f5f1;overflow:hidden;color:#183b30}
.line-demo-head{display:flex;justify-content:space-between;gap:12px;padding:20px 22px 0;font-size:12px;font-weight:700}
.line-demo-head .eyebrow{font-size:10px}
.line-stage-label{font-family:monospace;white-space:nowrap}
.line-canvas{background:radial-gradient(ellipse at 50% 55%,#e7e2f6,transparent 65%)}
.line-canvas svg{display:block;width:100%;max-height:480px;height:auto;overflow:visible}
.line-canvas path,.line-canvas rect{stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.line-base{fill:#e8efea;stroke:#bdc9c0;stroke-width:1}
.line-tray{transition:transform .42s cubic-bezier(.22,.75,.25,1)}
.tray-face{fill:#f9fbf8;stroke:#748e81;stroke-width:1.25;transition:fill .3s,stroke .3s}
.tray-thickness{fill:#e0e8e1;stroke:#82968a;stroke-width:1}
.tray-crease{fill:none;stroke:#c5d0c7;stroke-width:.9}
.tray-paper rect{fill:#f9fbf8;stroke:#a4b5a8;stroke-width:1}
.tray-paper path{fill:none;stroke:#bcc8be;stroke-width:.8}
.tray-dot{fill:#7c9485}
.line-tray.is-active .tray-face{fill:#e0f9e9;stroke:#17634b;stroke-width:1.7}
.line-tray.is-active .tray-dot{fill:#008c62}
.line-stage-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 22px}
.line-stage-buttons button{min-height:52px;border:1px solid #a8bcaf;background:#f9fbf8;display:flex;align-items:center;gap:12px;padding:12px;font-size:14px;font-weight:700;color:#183b30;text-align:left}
.line-stage-buttons button span{font:11px monospace;opacity:.75}
.line-stage-buttons button[aria-pressed=true]{background:#005940;color:white;border-color:#005940}
.line-demo button:focus-visible,.line-demo input:focus-visible{outline:3px solid #4f32ad;outline-offset:3px}
.line-controls{display:flex;align-items:center;gap:18px;padding:20px 22px;border-bottom:1px solid #c5cfc7}
.line-controls label{font-size:13px;white-space:nowrap}.line-controls output{font-family:monospace;display:inline-block;min-width:24px;margin-left:8px}
.line-controls input{accent-color:#005940;width:100%;min-width:0;min-height:32px}
.line-explanation{padding:24px 22px;min-height:180px}
.line-explanation h3{font-size:22px;line-height:1.3;margin:0 0 12px}
.line-explanation p{font-size:15px;line-height:1.7;margin:0}
.line-demo figcaption{padding:16px 22px;font-size:12px;line-height:1.7;color:#4e6054;border-top:1px solid #c5cfc7}
@media(max-width:520px){.line-demo-head{padding:16px 14px 0}.line-demo-head .eyebrow{font-size:9px}.line-stage-label{font-size:10px}.line-stage-buttons{padding:0 14px;gap:6px}.line-stage-buttons button{padding:10px 8px;gap:6px;font-size:12px}.line-stage-buttons button span{font-size:10px}.line-controls,.line-explanation{padding:16px 14px}.line-explanation{min-height:222px}.line-explanation h3{font-size:20px}.line-demo figcaption{padding:14px}}
@media(prefers-reduced-motion:reduce){.line-tray,.tray-face{transition:none}}