/* SPDX-License-Identifier: Apache-2.0 */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182d45;background:#eff3f7;line-height:1.5}
*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:1.2rem}
header,.controls,.current,.saved{background:#fff;border:2px solid #28445f;border-radius:18px;padding:1.25rem;box-shadow:0 4px 14px #142a4415}
header{background:linear-gradient(120deg,#e8f1fa,#f5f0ff)}.eyebrow{font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#284b68;font-size:.85rem}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:.2rem 0 1rem}h2{font-size:1.45rem;margin:0 0 .8rem}h3{margin:.1rem 0 .5rem}p{max-width:74ch}.note{background:#fff;border-left:5px solid #28445f;padding:.7rem 1rem}
.workspace{display:grid;grid-template-columns:minmax(285px,.8fr) minmax(300px,1.2fr);gap:1rem;margin:1rem 0}
label{display:block;font-weight:800;margin:1rem 0 .35rem}select{display:block;width:100%;font:inherit;color:#182d45;background:#fff;border:2px solid #28445f;border-radius:9px;padding:.7rem}
.buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0}button{font:inherit;font-weight:750;background:#dfedf8;border:2px solid #183b5a;border-radius:9px;color:#102d48;padding:.65rem .85rem;cursor:pointer}button:hover{background:#c0dff5}
button:focus-visible,select:focus-visible,a:focus-visible{outline:4px solid #915000;outline-offset:3px}#status{min-height:2.5rem;font-weight:650}
.current{min-height:500px;display:flex;flex-direction:column}.board,.mini{display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid #28445f;border-radius:12px;background:#f2f8fd;min-width:0}
.board{margin:auto;width:100%;height:260px}.mini{height:180px;width:100%;margin:.8rem 0}.mini:empty{display:none}.mark{display:block;flex-shrink:0;width:7px;height:52px;border-radius:3px;background:#182d45}.long .mark{height:146px}.diagonal .mark{transform:rotate(25deg)}.close{gap:20px}.spaced{gap:60px}.mini.spaced{gap:48px}
#description{font-weight:700;border-left:5px solid #28445f;padding:.6rem 1rem;margin:1.1rem auto;max-width:440px}.saved{margin:1rem 0}.saved-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.saved-card{border:2px solid #28445f;border-radius:12px;padding:1rem;min-width:0;background:#f6f9fb}footer{padding:.5rem .25rem 1rem;font-size:.92rem}a{color:#13558b}
.skip{position:absolute;left:-10000px;top:auto}.skip:focus{left:1rem;top:1rem;z-index:5;background:#fff;padding:.7rem}
@media(max-width:720px){main{padding:.7rem}.workspace,.saved-grid{grid-template-columns:1fr}.current{min-height:0}.board{height:230px}.spaced{gap:52px}.mini.spaced{gap:48px}.buttons{display:grid}button{width:100%}}
@media(max-width:360px){.mini.spaced{gap:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}