/* The Shorts safe zone checker, on top of site.css and blog.css: a soft card with the frame on the left and the
   readout on the right, the landing's buttons, the blog's reading column below. */
.t-head { display: grid; gap: 16px; justify-items: start; max-width: 860px; }
.t-body { display: grid; grid-template-columns: minmax(0, 720px); gap: clamp(36px, 5vw, 56px); justify-content: center; }

.sz { padding: clamp(14px, 2.4vw, 26px); }
.sz-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
@media (max-width: 900px) { .sz-grid { grid-template-columns: minmax(0, 1fr); } }

.sz-stage { position: relative; display: grid; place-items: center; min-height: 420px; border-radius: 22px; background: repeating-conic-gradient(#0d1527 0% 25%, #0a1120 0% 50%) 50% / 28px 28px; border: 1px dashed var(--line-2); overflow: hidden; transition: border-color 0.2s, background-color 0.2s; }
.sz-stage[data-over] { border-color: var(--blue); }
.sz-stage canvas { display: block; max-width: 100%; touch-action: none; cursor: crosshair; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.sz-stage[data-empty] canvas { display: none; }
.sz-stage:not([data-empty]) { border-style: solid; border-color: var(--line); background: #070c18; padding: 14px; }
.sz-stage:not([data-empty]) .sz-drop { display: none; }
.sz-drop { display: grid; justify-items: center; gap: 12px; padding: 36px 24px; text-align: center; max-width: 360px; }
.sz-drop-icon { width: 46px; height: 46px; color: var(--sky); }
.sz-drop-h { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.sz-drop-p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.sz-drop .btn { margin-top: 6px; }
.sz-link { border: 0; background: none; padding: 6px 4px; color: var(--sky); font: 600 14.5px/1.3 var(--font); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(156, 207, 255, 0.4); cursor: pointer; }
.sz-link:hover { text-decoration-color: var(--sky); }

.sz-panel { display: grid; gap: 18px; min-width: 0; }
.sz-panel h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.04em; }
.sz-panel h3 { font-size: 18px; letter-spacing: -0.02em; }
.sz-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 0; border: 0; }
.sz-toggles legend { padding: 0; margin-bottom: 10px; font: 650 12px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); }
.sz-toggles label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.sz-toggles input { width: 20px; height: 20px; accent-color: var(--blue); flex: none; }
@media (max-width: 480px) { .sz-toggles { grid-template-columns: minmax(0, 1fr); } }

.sz-read { display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.sz-dl { display: grid; gap: 10px; margin: 0; }
.sz-dl div { display: grid; gap: 2px; }
.sz-dl dt { font: 600 12.5px/1.3 var(--font); color: var(--ink-3); }
.sz-dl dd { margin: 0; font: 500 14.5px/1.45 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sz-tools { display: grid; gap: 12px; }
.sz-hint { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.sz-marks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sz-marks li { padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.sz-marks li[data-ok="true"] { border-color: rgba(156, 207, 255, 0.35); color: var(--ink); }
.sz-marks li[data-ok="false"] { border-color: rgba(255, 75, 62, 0.45); color: #ffd2cd; }
.sz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sz-status { min-height: 1.4em; font-size: 14.5px; color: var(--sky); }

.t-plug { display: grid; gap: 14px; justify-items: start; padding: clamp(22px, 3.4vw, 34px); border-radius: 26px; background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(47, 140, 255, 0.12), transparent 70%), linear-gradient(180deg, #0f1729, #0b1222); border: 1px solid rgba(120, 175, 255, 0.22); }
.t-sources { display: grid; gap: 10px; }
.t-sources h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.04em; }
.t-sources ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.t-sources a { color: var(--sky); text-decoration: underline; text-decoration-color: rgba(156, 207, 255, 0.35); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sz-stage { transition: none; } }