:root{color-scheme:dark;--background:#111925;--panel:#1b293b;--text:#f2f5fa;--sub:#bfcfe2;--accent:#ffcc72;--sky:#9adafb;--mint:#a9ebcd;font:16px/1.55 system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 40% 0,#263958,var(--background) 60%);color:var(--text)}
main{max-width:54rem;padding:clamp(1rem,4vw,3rem);margin:auto}
h1{font-size:clamp(1.65rem,4.5vw,2.8rem);line-height:1.12;margin:.3rem 0 .75rem}
h2{font-size:1.23rem;margin:1.7rem 0 .4rem}p,ol{margin:.55rem 0;max-width:66ch}
.tag{color:var(--accent);font-size:.8rem;letter-spacing:.10em;font-weight:700;text-transform:uppercase}
.frame{margin-top:1.3rem;display:grid;position:relative;background:#2e4863;border:1px solid #7d97b0;border-radius:.75rem;min-height:18rem;overflow:hidden}
.frame svg{width:100%;height:100%;position:absolute;inset:0}
.sign{position:absolute;text-align:center;font-weight:650;color:#172231;background:var(--accent);padding:.45rem .65rem;border-radius:.35rem;font-size:clamp(.78rem,2.5vw,1rem);left:50%;transform:translateX(-50%);white-space:nowrap;z-index:1}
.caption{margin:0 auto;position:absolute;left:3%;right:3%;z-index:2;background:#090b0f;color:#fff;padding:.35rem .6rem;text-align:center;width:max-content;max-width:94%;border-radius:.25rem;font-size:clamp(.8rem,2.6vw,1.08rem);font-weight:650}
[data-pos="top"]{top:13%;transform:translate(-50%,-50%)}.caption[data-pos="top"]{left:50%;right:auto}
[data-pos="bottom"]{bottom:13%;transform:translate(-50%,50%)}.caption[data-pos="bottom"]{left:50%;right:auto}
.pickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.1rem 0 .6rem}
fieldset{border:1px solid #6985a0;padding:.55rem .8rem .75rem;border-radius:.6rem;background:var(--panel);min-width:0;margin:0}legend{color:var(--sky);padding:0 .25rem;font-weight:700}label{display:block;padding:.23rem 0}
input{accent-color:var(--accent)} input:focus-visible,a:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
.result{padding:.6rem .9rem;background:#162d31;border-left:4px solid var(--mint);margin:.65rem 0 1.25rem;min-height:2.8rem}
a{color:var(--sky);text-underline-offset:.15em}.minor{color:var(--sub)}
@media(max-width:38rem){.pickers{grid-template-columns:1fr}.frame{min-height:16rem}}