@font-face{font-family:Exo2;src:url('/exo2-regular.ttf') format('truetype')}
@font-face{font-family:Exo2;src:url('/exo2-bold.ttf') format('truetype');font-weight:700}
:root{font-family:Exo2,Arial,sans-serif;color:#244056;background:#f6f9fb;font-size:16px}
*{box-sizing:border-box}body{margin:0}header{padding:18px 24px;background:#fff;border-bottom:2px solid #cbdbe4}
header a{color:#145a87;text-decoration:none}h1{font-size:27px;margin:9px 0 3px}p{margin:6px 0}
nav{display:flex;gap:8px;padding:14px 24px;background:#fff;border-bottom:2px solid #cbdbe4}
nav a{padding:9px 15px;border:2px solid #d0dfe8;border-radius:8px;color:#244056;text-decoration:none;font-weight:700}
nav a[aria-current="page"]{border-color:#ff5b16;background:#fff4ed}
main{padding:20px 24px;max-width:1500px;margin:auto}
#status{padding:12px 16px;border:2px solid #cbdbe4;border-radius:8px;background:#fff;min-height:48px}
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:12px 0}
button{font:700 15px Exo2,Arial,sans-serif;border:2px solid #bdced9;color:#244056;background:#fff;border-radius:8px;padding:9px 13px;cursor:pointer}
button:hover:not(:disabled){border-color:#ff5b16}button:disabled{opacity:.5;cursor:not-allowed}
#location{font-size:14px;color:#5b7180;overflow-wrap:anywhere}
.viewer{background:#e2ebf1;border:2px solid #bdced9;border-radius:10px;min-height:360px;overflow:auto;display:flex;align-items:flex-start;justify-content:center}
#frame{display:block;max-width:100%;height:auto;cursor:crosshair}.viewer:has(#frame:not([src])){align-items:center}
.viewer:has(#frame:not([src])):after{content:'Браузер ещё не подключён';color:#5b7180}
.input-controls label{width:100%;font-weight:700}.input-controls textarea{width:min(100%,630px);font:15px Exo2,Arial,sans-serif;padding:9px;border:2px solid #bdced9;border-radius:8px}
.hint{color:#566e7e;line-height:1.4}
@media(max-width:700px){main,header,nav{padding-left:12px;padding-right:12px}.viewer{min-height:240px}}