/* SPDX-License-Identifier: Apache-2.0 */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172b44;background:#eef3f6;line-height:1.5}
*{box-sizing:border-box}
body{margin:0}
main{max-width:1120px;margin:auto;padding:1.2rem}
header,.controls,.current,.saved{background:#fff;border:2px solid #25425f;border-radius:20px;padding:1.25rem;box-shadow:0 4px 14px #172b4416}
header{background:linear-gradient(120deg,#e6f1f7,#fff1df)}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:800;font-size:.85rem;color:#264e69}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:.2rem 0 1rem}
h2{font-size:1.45rem;margin:0 0 .85rem}
h3{margin:.1rem 0 .5rem}
p{max-width:72ch}
.note{background:#fff;border-left:5px solid #25425f;padding:.7rem 1rem}
.workspace{display:grid;grid-template-columns:minmax(285px,.85fr) minmax(300px,1.15fr);gap:1rem;margin:1rem 0}
.controls label{display:block;font-weight:800;margin:1rem 0 .35rem}
select{display:block;width:100%;font:inherit;padding:.68rem;border:2px solid #25425f;border-radius:10px;background:white;color:#172b44}
.buttons{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0}
button{font:inherit;font-weight:750;border:2px solid #173a5b;border-radius:10px;background:#ddedf9;color:#102c48;padding:.65rem .85rem;cursor:pointer}
button:hover{background:#b9ddf7}
button:focus-visible,select:focus-visible,a:focus-visible{outline:4px solid #9a5200;outline-offset:3px}
#status{min-height:2.5rem;font-weight:650}
.current{min-height:420px}
.picture{height:260px;width:min(100%,430px);margin:1.2rem auto 0;position:relative;display:flex;align-items:end;justify-content:center}
.picture .box{width:82%;height:57%;border:5px solid #19334f;border-radius:9px;background:#f7f9fa;position:relative}
.picture .handle{position:absolute;z-index:1;top:26px;width:33%;height:27%;border:5px solid #19334f;border-radius:12px 12px 0 0;background:#f7f9fa}
.picture span{position:absolute;inset:6px;border-radius:3px}
.picture .focus.blue{background:#4388d1}.picture .focus.orange{background:#e48c3e}.picture .focus.green{background:#80b775}.picture .focus.plain{background:#f7f9fa}
.picture .focus.dots span{background-image:radial-gradient(#172b44 4px,transparent 5px);background-size:28px 28px}
.picture .focus.stripes span{background-image:repeating-linear-gradient(90deg,transparent 0 14px,#172b44 14px 20px,transparent 20px 35px)}
.picture .focus.outline span{border:8px double #172b44}
#description{font-weight:700;border-left:5px solid #25425f;padding:.6rem 1rem;margin:1.1rem auto;max-width:430px}
.saved{margin:1rem 0}
.saved-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.saved-card{border:2px solid #25425f;border-radius:12px;background:#f5f9fb;padding:1rem;min-height:115px}
footer{padding:.5rem .25rem 1rem;font-size:.92rem}
a{color:#144f83}
.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}.picture{height:210px}.picture .handle{top:18px}.buttons{display:grid}button{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.resource-heading-context{display:block;margin-top:.8rem;font-size:.8rem;line-height:1.5;font-weight:650;letter-spacing:.02em;color:#4c625a}