@import url('/learn.css');
.tool-hero{padding:54px 0 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:52px;align-items:center}
.tool-hero h1{font-size:clamp(2.8rem,6vw,5.4rem)}
.instrument{border:1px solid rgba(195,245,60,.24);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.display{min-height:116px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#0b0907;color:var(--lime);font:500 clamp(3.25rem,9vw,6.6rem)/1 var(--font-heading,system-ui);letter-spacing:.035em;font-variant-numeric:tabular-nums;contain:layout size}
.display.small{font-size:clamp(2.4rem,7vw,4.8rem)}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.controls button,.controls input,.controls select{min-height:44px;border-radius:999px;border:1px solid rgba(195,245,60,.24);background:#080b07;color:var(--ink);padding:10px 17px;font:700 .92rem system-ui}
.controls button{cursor:pointer}.controls button.primary{background:var(--lime);color:#080b07;border-color:var(--lime)}
.controls button:focus-visible,.controls input:focus-visible,.controls select:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.field{display:grid;gap:6px;flex:1;min-width:120px}.field label{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.status{min-height:26px;margin:14px 2px 0;color:var(--muted);font-size:.9rem}
.tool-copy{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:64px;padding-bottom:80px}.tool-copy article section{padding:31px 0;border-top:1px solid var(--line)}
.safe-ad-area{clear:both;min-height:280px;margin:56px 0;border:1px dashed rgba(195,245,60,.25);border-radius:22px;display:grid;place-items:center;color:#766f67;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;contain:layout size;isolation:isolate}
.safe-ad-area:empty:before{content:'Reserved advertising area'}
.zone-list{display:grid;gap:8px;margin-top:16px}.zone{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid var(--line)}.zone b{color:var(--lime);font-variant-numeric:tabular-nums}
@media(max-width:780px){.tool-hero{grid-template-columns:1fr;padding-top:38px;gap:28px}.tool-copy{grid-template-columns:1fr;gap:20px}.display{min-height:96px}.safe-ad-area{margin:48px 0;min-height:250px}.instrument{padding:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.display{max-width:100%;overflow-wrap:anywhere;min-width:0;font-size:clamp(2rem,7vw,5rem)}
@media(max-width:420px){body[data-tool="stopwatch"] .display{font-size:2.15rem}.zone{gap:8px;flex-wrap:wrap}}