.sg-page { --sg-teal: #176e71; --sg-rust: #a44b36; }
.sg-page .fg-heading { border-bottom: 3px solid var(--sg-teal); padding-bottom: 14px; }
.sg-page .km-number-entry { width:min(100%,24rem); min-width:0; }
.sg-page .km-number-entry input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.sg-array { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); width:260px; max-width:100%; margin:auto; gap:3px; }
.sg-array > span { aspect-ratio:1; border:1px solid #6d9292; background:#edf6f3; display:grid; place-items:center; }
.sg-array .km-art { width:80%; height:80%; object-fit:contain; }
.sg-place { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:16px; width:100%; margin:20px 0; }
.sg-place section { min-width:0; border-bottom:2px solid #a6c6be; padding:0 0 14px; }
.sg-place h3 { font-size:17px; margin:0 0 10px; }
.sg-place-pieces { display:flex; flex-wrap:wrap; align-content:flex-start; gap:5px; }
.sg-place-unit { display:grid; justify-items:center; width:40px; }
.sg-place-unit img { width:30px; height:30px; object-fit:contain; }
.sg-place-unit small { font-size:12px; color:#354e51; }
.sg-clock { position:relative; width:260px; height:260px; flex-shrink:0; margin:12px auto; border:4px solid #346a6b; border-radius:50%; background:radial-gradient(circle,#fff 60%,#e8f2ed 100%); }
.sg-clock-number { position:absolute; transform:translate(-50%,-50%); font-size:19px; font-weight:700; }
.sg-hand { position:absolute; bottom:50%; left:calc(50% - 3px); width:6px; transform-origin:50% 100%; border-radius:3px; }
.sg-hour { height:65px; background:#263d3f; }
.sg-minute { height:92px; background:var(--sg-rust); width:4px; left:calc(50% - 2px); }
.sg-clock-pin { position:absolute; width:12px; height:12px; background:#263d3f; border-radius:50%; top:calc(50% - 6px); left:calc(50% - 6px); }
.sg-data { width:100%; }
.sg-data-row { display:grid; grid-template-columns:80px minmax(0,1fr); align-items:center; gap:10px; margin:14px 0; }
.sg-data-row > div { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:2px; }
.sg-data-row span { aspect-ratio:1; background:#e2f0ea; border:1px solid #8fb0ab; display:grid; place-items:center; }
.sg-data-row .km-art { width:100%; height:auto; }
.sg-ruler { position:relative; width:calc(100% - 30px); min-width:0; height:140px; margin:10px 15px; }
.sg-measured-strip { position:absolute; top:14px; height:30px; background:repeating-linear-gradient(90deg,#b75138 0 10px,#c9654c 10px 20px); }
.sg-ticks { position:absolute; top:62px; width:100%; height:35px; border-top:3px solid #45686e; }
.sg-ticks span { position:absolute; border-left:1px solid #45686e; padding-top:12px; transform:translateX(-50%); font-size:13px; }
.sg-ruler p { position:absolute; top:95px; text-align:center; width:100%; }
.sg-fractions { width:100%; display:grid; gap:16px; }
.sg-fraction-bar { display:grid; grid-template-columns:repeat(var(--columns),1fr); height:72px; border:2px solid #294f54; }
.sg-fraction-bar span { border-right:1px solid #294f54; background:#fff; }
.sg-fraction-bar span:last-child { border-right:0; }
.sg-fraction-bar .sg-shaded { background:repeating-linear-gradient(135deg,#c1e2d7 0 7px,#75b59f 7px 9px); }
.sg-polygon { width:240px; height:240px; margin:auto; background:#207a80; }
.sg-work-controls { display:flex; flex-wrap:wrap; gap:18px; margin:20px 0; }
.sg-work-controls > div { display:flex; align-items:center; gap:12px; }
.sg-work-controls span { min-width:78px; text-align:center; }
.sg-work-controls strong { display:block; font-size:24px; }
.sg-work-controls button { width:44px; height:44px; display:grid; place-items:center; background:#fff; border:1px solid #789997; border-radius:6px; }
.sg-work-controls button:disabled { opacity:.4; }
.sg-trades { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
@media(max-width:760px){.sg-clock{width:230px;height:230px}.sg-minute{height:80px}.sg-hour{height:56px}.sg-page .km-question{min-width:0}.sg-work-controls{display:grid;grid-template-columns:1fr}.sg-work-controls > div{justify-content:center}.sg-trades .button{width:100%;white-space:normal}.sg-data-row{grid-template-columns:65px minmax(0,1fr);gap:6px}.sg-polygon{width:220px;height:220px}}