/* Орбита точности · интерфейс в дизайн-системе Ant Design (токены v5).
   Хром вокруг глобуса и панель — тёмный алгоритм Ant Design; всплывающие элементы над светлой сценой — светлый.
   Компоненты по анатомии antd: Button, Tag, Card, Statistic, Steps, Modal, Tabs, Table, Input, Image, Alert,
   Notification, Tour, Tooltip, Typography. Подключается после app.css и переопределяет его. */
:root{
  --ant-primary:#1677ff; --ant-primary-hover:#4096ff; --ant-primary-active:#0958d9; --ant-primary-bg:rgba(22,119,255,.15);
  --ant-success:#52c41a; --ant-warning:#faad14; --ant-error:#ff4d4f; --ant-info:#1677ff;
  --ant-radius:6px; --ant-radius-lg:8px; --ant-radius-sm:4px;
  --ant-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --ant-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
  /* dark algorithm */
  --d-bg:#000; --d-container:#141414; --d-elevated:#1f1f1f; --d-layout:rgba(0,0,0,.72); --d-border:#424242; --d-split:#303030; --d-fill:rgba(255,255,255,.08); --d-fill-2:rgba(255,255,255,.12);
  --d-text:rgba(255,255,255,.88); --d-text-2:rgba(255,255,255,.65); --d-text-3:rgba(255,255,255,.45); --d-text-4:rgba(255,255,255,.25);
  /* light (popups over the scene) */
  --l-container:#fff; --l-border:#d9d9d9; --l-split:#f0f0f0; --l-text:rgba(0,0,0,.88); --l-text-2:rgba(0,0,0,.65); --l-text-3:rgba(0,0,0,.45); --l-fill:rgba(0,0,0,.04);
  --l-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);
  /* the old accent tokens now follow the antd palette */
  --mint:#4096ff; --mint-2:#1677ff; --amber:#faad14; --red:#ff4d4f; --blue:#4096ff;
  --ink:var(--d-text); --ink-2:var(--d-text-2); --mute:var(--d-text-3); --line:var(--d-split); --line-2:var(--d-border);
  --serif:var(--ant-font); --sans:var(--ant-font); --mono:var(--ant-font);
  --toy-font:var(--ant-font);
}
html,body{font:14px/1.5714 var(--ant-font)}
em{font-style:normal;color:var(--ant-primary-hover)}
.eyebrow{font:600 12px/1.5 var(--ant-font);letter-spacing:.02em;text-transform:none;color:var(--d-text-3)}
.eyebrow .dash{background:var(--ant-primary)}

/* ---------- Button ---------- */
.ghost,.icon,.primary,.ant-btn,.seg button{font-family:var(--ant-font)}
.ghost{height:32px;padding:4px 15px;border:1px solid var(--d-border);border-radius:var(--ant-radius);background:transparent;color:var(--d-text);font:400 14px/1.5714 var(--ant-font);letter-spacing:0;box-shadow:0 2px 0 rgba(0,0,0,.02);transition:all .2s cubic-bezier(.645,.045,.355,1)}
.ghost:hover{border-color:var(--ant-primary-hover);color:var(--ant-primary-hover)}
.ghost:active{border-color:var(--ant-primary-active);color:var(--ant-primary-active)}
.ghost.small{height:24px;padding:0 7px;font-size:14px;border-radius:var(--ant-radius-sm)}
.primary,.ant-btn-primary{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:6.4px 15px;border:1px solid var(--ant-primary);border-radius:var(--ant-radius-lg);background:var(--ant-primary);color:#fff;font:400 16px/1.5 var(--ant-font);box-shadow:0 2px 0 rgba(5,145,255,.1);text-decoration:none;transition:all .2s}
.primary:hover,.ant-btn-primary:hover{background:var(--ant-primary-hover);border-color:var(--ant-primary-hover);transform:none;box-shadow:0 2px 0 rgba(5,145,255,.1)}
.primary:active{background:var(--ant-primary-active)}
.icon{width:32px;height:32px;border:1px solid var(--d-border);border-radius:50%;background:var(--d-container);color:var(--d-text);font:400 14px var(--ant-font);backdrop-filter:none}
.icon:hover{border-color:var(--ant-primary-hover);color:var(--ant-primary-hover)}
.row>button{min-width:0}
.controls .ghost{white-space:normal;height:auto;min-height:32px;line-height:1.3;padding:5px 12px}
/* Segmented */
.seg{padding:2px;border:0;border-radius:var(--ant-radius-lg);background:var(--d-fill)}
.seg button{padding:4px 11px;border-radius:var(--ant-radius);font:400 14px/1.5714 var(--ant-font);color:var(--d-text-2);transition:all .2s}
.seg button:hover{color:var(--d-text);background:var(--d-fill)}
.seg button[aria-pressed="true"]{background:var(--d-elevated);color:var(--d-text);box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 6px -1px rgba(0,0,0,.2)}

/* ---------- Top bar: Layout.Header ---------- */
.top{height:56px;padding:0 24px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.brand b{font:700 20px/1 var(--ant-font);letter-spacing:0}
.brand span{font:600 13px/1.3 var(--ant-font);letter-spacing:.04em}
.brand small{font:400 12px/1.4 var(--ant-font);letter-spacing:0;color:var(--d-text-3)}
.brand i{background:var(--d-split)}
/* constellation toggles: Tag (checkable) */
.sys{padding:0 7px;height:24px;border:1px solid var(--d-border);border-radius:var(--ant-radius-sm);background:var(--d-fill);font:400 12px/22px var(--ant-font);letter-spacing:0;color:var(--d-text);backdrop-filter:none}
.sys i{box-shadow:none}
.sys b{color:var(--d-text-3)}
.sys[aria-pressed="false"]{opacity:.45}
.live{font:400 12px var(--ant-font);letter-spacing:0;color:var(--d-text-3)}
.live i{background:var(--ant-success);box-shadow:none}

/* ---------- Orbit screen ---------- */
.hero h1{font:600 clamp(30px,3vw,44px)/1.2 var(--ant-font);letter-spacing:-.01em}
.hero h1 em{color:var(--ant-primary-hover)}
.missions{width:340px;padding:16px 8px 8px;border:1px solid var(--d-split);border-radius:var(--ant-radius-lg);background:rgba(20,20,20,.82);backdrop-filter:blur(8px);box-shadow:0 6px 16px rgba(0,0,0,.32)}
.list-head{padding:0 12px 12px;font:600 14px var(--ant-font);letter-spacing:0;color:var(--d-text);border-bottom:1px solid var(--d-split)}
.list-head #progress{padding:0 7px;border-radius:var(--ant-radius-sm);background:var(--ant-primary-bg);color:var(--ant-primary-hover);font-weight:400;font-size:12px;line-height:22px}
#mission-list button{grid-template-columns:22px 40px 1fr auto;align-items:center;gap:0 10px;padding:8px 12px;margin:2px 0;border:0;border-radius:var(--ant-radius-lg);transition:background .2s}
#mission-list button:hover,#mission-list button.on{padding-left:12px;background:var(--d-fill)}
#mission-list button.on{background:var(--ant-primary-bg)}
#mission-list .no{font:400 12px var(--ant-font);color:var(--d-text-3)}
#mission-list .thumb{width:40px;height:40px;border-radius:var(--ant-radius);object-fit:contain;background:#fff;padding:2px}
#mission-list .city{font:600 15px/1.35 var(--ant-font);font-style:normal;color:var(--d-text)}
#mission-list button:hover .city,#mission-list button.on .city{color:var(--ant-primary-hover)}
#mission-list .dev{font:400 12px/1.4 var(--ant-font);letter-spacing:0;color:var(--d-text-2)}
#mission-list .dev b{font-weight:400;color:var(--d-text-3);opacity:1}
#mission-list button.done .no::after{color:var(--ant-success)}
.ticker{font:400 12px/1.6 var(--ant-mono)}
.ticker p b{color:var(--ant-primary-hover)}
.orbit-hint{font:400 12px/1.9 var(--ant-font);letter-spacing:0;color:var(--d-text-3)}
.orbit-hint span{color:var(--d-text);font-weight:600}
.site .lbl{font:600 14px/1 var(--ant-font);font-style:normal}
.site .lbl small{font:400 11px var(--ant-font);letter-spacing:0}
.site.on .lbl,.site:hover .lbl{color:var(--ant-primary-hover)}
#reticle span{font:400 12px/1.6 var(--ant-font);letter-spacing:0}
#reticle b{color:var(--ant-primary-hover)}

/* ---------- Field panel: Layout.Sider with Cards ---------- */
.panel{padding:72px 24px 24px;background:rgba(20,20,20,.94);border-left:1px solid var(--d-split);backdrop-filter:blur(10px)}
.panel-top{gap:8px;margin-bottom:20px}
.mission-no{font:400 12px var(--ant-font);letter-spacing:0;color:var(--d-text-3)}
.panel h2{margin:6px 0 8px;font:600 30px/1.27 var(--ant-font);letter-spacing:-.01em}
.panel h2 em{color:var(--ant-primary-hover)}
.lede{font:400 14px/1.5714 var(--ant-font);font-style:normal;color:var(--d-text-2)}
.device-row{gap:12px;padding:12px;border:1px solid var(--d-split);border-radius:var(--ant-radius-lg);background:var(--d-container)}
.device-row img{width:56px;height:56px;flex:0 0 auto;border-radius:var(--ant-radius);object-fit:contain;background:#fff;padding:3px}
.device-row>div{flex:1;min-width:0}
.device-row small{font:400 12px var(--ant-font);letter-spacing:0;color:var(--d-text-3)}
.device-row b{font:600 16px var(--ant-font)}
.device-row .ghost{flex:0 0 auto}
/* Statistic */
.primary-metric{margin:16px 0 8px;padding:16px;border:1px solid var(--d-split);border-radius:var(--ant-radius-lg);background:var(--d-container)}
.primary-metric b{font:600 34px/1.2 var(--ant-font);letter-spacing:0}
.primary-metric b.ok{color:var(--ant-success)} .primary-metric b.warn{color:var(--ant-warning)} .primary-metric b.bad{color:var(--ant-error)}
.primary-metric i{font:400 14px/1.5 var(--ant-font);letter-spacing:0;color:var(--d-text-2)}
.primary-metric small{font:400 12px/1.5 var(--ant-font);color:var(--d-text-3)}
.stats{gap:8px;margin:8px 0 16px;background:none;border:0;border-radius:0;overflow:visible}
.stats div{padding:10px 12px;border:1px solid var(--d-split);border-radius:var(--ant-radius-lg);background:var(--d-container)}
.stats b{font:600 16px/1.4 var(--ant-font);color:var(--d-text)}
.stats span{font:400 12px/1.4 var(--ant-font);letter-spacing:0;color:var(--d-text-3)}
.stats b.ok{color:var(--ant-success)} .stats b.warn{color:var(--ant-warning)} .stats b.bad{color:var(--ant-error)}
.ctl-label{font:400 12px var(--ant-font);letter-spacing:0;color:var(--d-text-3)}
input[type=range]{accent-color:var(--ant-primary)}
/* Steps (vertical) */
.steps{margin:8px 0 16px;counter-reset:none}
.steps li{display:flex;gap:12px;padding:0 0 16px;border:0;color:var(--d-text-3);font-size:14px}
.steps li::before{display:none}
.steps li .st-ic{position:relative;flex:0 0 32px;height:32px;border:1px solid var(--d-border);border-radius:50%;display:grid;place-items:center;font:400 16px/1 var(--ant-font);font-style:normal;color:var(--d-text-3);background:transparent}
.steps li:not(:last-child) .st-ic::after{content:"";position:absolute;left:50%;top:36px;width:1px;height:calc(100% + 0px);min-height:12px;background:var(--d-split)}
.steps li>div{padding-top:4px;min-width:0}
.steps li b{font:400 16px/1.5 var(--ant-font);color:var(--d-text-3)}
.steps li small{font-size:14px;line-height:1.5714;color:var(--d-text-2)}
.steps li.now .st-ic{background:var(--ant-primary);border-color:var(--ant-primary);color:#fff}
.steps li.now b{color:var(--d-text);font-weight:600}
.steps li.ok .st-ic{border-color:var(--ant-primary);color:var(--ant-primary-hover)}
.steps li.ok b{color:var(--d-text-2)}
.steps li.ok:not(:last-child) .st-ic::after{background:var(--ant-primary)}
/* Result */
.done-card{padding:16px;border:1px solid #274916;border-radius:var(--ant-radius-lg);background:#162312}
.done-card .eyebrow{color:var(--ant-success);font-weight:600}
.done-card p{font:400 14px/1.5714 var(--ant-font);font-style:normal;color:var(--d-text)}
.disclaimer{font:400 12px/1.5 var(--ant-font);color:var(--d-text-4)}
.portal-tag{font:400 12px/1.6 var(--ant-font);letter-spacing:0;color:var(--d-text-2)}
.portal-tag b{color:var(--ant-primary-hover);font-weight:600}

/* ---------- Modal ---------- */
dialog{padding:20px 24px;border:0;border-radius:var(--ant-radius-lg);background:var(--d-elevated);color:var(--d-text);box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05)}
dialog::backdrop{background:rgba(0,0,0,.45);backdrop-filter:none}
dialog h3{font:600 20px/1.4 var(--ant-font);margin:4px 0 8px}
dialog h3 em{color:var(--ant-primary-hover)}
dialog .close{right:12px;top:12px;width:32px;height:32px;border-radius:var(--ant-radius);font-size:20px;line-height:1;color:var(--d-text-3)}
dialog .close:hover{background:var(--d-fill);color:var(--d-text)}
dialog .primary.close{position:static;width:auto;height:32px;font-size:14px;color:#fff;margin-top:12px;padding:4px 15px;border-radius:var(--ant-radius);background:var(--ant-primary);border:1px solid var(--ant-primary)}
dialog .primary.close:hover{background:var(--ant-primary-hover);color:#fff}
dialog ol{color:var(--d-text-2)}
.muted{color:var(--d-text-3)}
#device-dialog{width:min(980px,94vw);max-width:none}
.dev-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-right:36px}
.dev-head p{margin:0}
.dev-head .ant-btn{height:32px;font-size:14px;border-radius:var(--ant-radius);white-space:nowrap}
/* Tabs */
.ant-tabs{display:flex;gap:32px;margin:16px 0 16px;border-bottom:1px solid var(--d-split)}
.ant-tab{position:relative;padding:12px 0;border:0;background:none;color:var(--d-text-2);font:400 14px var(--ant-font)}
.ant-tab:hover{color:var(--ant-primary-hover)}
.ant-tab.on{color:var(--ant-primary-hover)}
.ant-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ant-primary)}
.dev-pane{display:none}.dev-pane.on{display:block}
/* Image + thumbnails */
.dev-photo{display:grid;place-items:center;height:min(52vh,460px);border-radius:var(--ant-radius-lg);background:#fff;overflow:hidden}
.dev-photo img{max-width:100%;max-height:100%;object-fit:contain}
.dev-thumbs{display:flex;gap:8px;margin:10px 0 6px;overflow-x:auto}
.dev-thumbs button{flex:0 0 72px;height:72px;padding:2px;border:2px solid transparent;border-radius:var(--ant-radius);background:#fff;cursor:pointer}
.dev-thumbs button.on,.dev-thumbs button:hover{border-color:var(--ant-primary)}
.dev-thumbs img{width:100%;height:100%;object-fit:contain}
/* Input + Table */
.ant-input{width:100%;height:32px;padding:4px 11px;margin-bottom:12px;border:1px solid var(--d-border);border-radius:var(--ant-radius);background:var(--d-container);color:var(--d-text);font:400 14px var(--ant-font);outline:none;transition:border-color .2s,box-shadow .2s}
.ant-input:hover{border-color:var(--ant-primary-hover)}
.ant-input:focus{border-color:var(--ant-primary);box-shadow:0 0 0 2px rgba(5,145,255,.1)}
.ant-input::placeholder{color:var(--d-text-4)}
.ant-table-wrap{max-height:min(52vh,460px);overflow:auto;border:1px solid var(--d-split);border-radius:var(--ant-radius-lg)}
.ant-table{width:100%;border-collapse:separate;border-spacing:0;font:400 14px/1.5714 var(--ant-font)}
.ant-table th{position:sticky;top:0;z-index:1;padding:8px 16px;background:#1d1d1d;border-bottom:1px solid var(--d-split);color:var(--d-text);font-weight:600;text-align:left}
.ant-table td{padding:8px 16px;border-bottom:1px solid var(--d-split);color:var(--d-text);vertical-align:top}
.ant-table td:first-child{width:46%;color:var(--d-text-2)}
.ant-table tbody tr:hover td{background:var(--d-fill)}
.ant-table tbody tr:last-child td{border-bottom:0}
.ant-empty{text-align:center;color:var(--d-text-3)!important;padding:24px!important}
#dev-canvas{display:block;width:min(100%,520px);margin:0 auto;border-radius:var(--ant-radius-lg);background:radial-gradient(circle at 50% 40%,#2a2a2a,#141414 70%)}
#dev-features{grid-template-columns:repeat(2,1fr);gap:16px;margin:0}
#dev-features .ant-card,#dev-features div{padding:16px 20px;border:1px solid var(--d-split);border-radius:var(--ant-radius-lg);background:var(--d-container)}
#dev-features b{font:600 16px/1.5 var(--ant-font);letter-spacing:0;color:var(--d-text);margin-bottom:4px}
#dev-features p{font-size:14px;line-height:1.5714;color:var(--d-text-2)}
#dev-link{color:#fff}
/* boot */
#boot b{font:600 20px var(--ant-font);font-style:normal}
#boot span{font:400 12px var(--ant-font);letter-spacing:0}
.boot-orbit i{border-color:var(--ant-primary)}

/* ---------- light popups over the scene ---------- */
/* Notification (toast) */
#app[data-mode="field"] #toast{gap:12px;padding:16px 24px 16px 16px;border:0;border-radius:var(--ant-radius-lg);background:var(--l-container);color:var(--l-text);font:400 16px/1.5 var(--ant-font);box-shadow:var(--l-shadow);max-width:min(560px,86vw)}
#app[data-mode="field"] #toast i{width:24px;height:24px;font:600 14px/1 var(--ant-font);background:var(--ant-info)}
#app[data-mode="field"] #toast span b{font:600 16px/1.5 var(--ant-font);letter-spacing:0;color:var(--l-text);margin-bottom:2px}
#app[data-mode="field"] #toast.ok,#app[data-mode="field"] #toast.warn,#app[data-mode="field"] #toast.bad{background:var(--l-container)}
#app[data-mode="field"] #toast.ok{box-shadow:inset 4px 0 0 var(--ant-success),var(--l-shadow)} #app[data-mode="field"] #toast.ok i{background:var(--ant-success)} #app[data-mode="field"] #toast.ok span b{color:var(--l-text)}
#app[data-mode="field"] #toast.warn{box-shadow:inset 4px 0 0 var(--ant-warning),var(--l-shadow)} #app[data-mode="field"] #toast.warn i{background:var(--ant-warning)} #app[data-mode="field"] #toast.warn span b{color:var(--l-text)}
#app[data-mode="field"] #toast.bad{box-shadow:inset 4px 0 0 var(--ant-error),var(--l-shadow)} #app[data-mode="field"] #toast.bad i{background:var(--ant-error)} #app[data-mode="field"] #toast.bad span b{color:var(--l-text)}
#toast{font-family:var(--ant-font)}
/* Alert (hint «СЕЙЧАС») */
.portal-hint{padding:9px 16px 9px 12px;border:1px solid #91caff;border-radius:var(--ant-radius-lg);background:#e6f4ff;color:var(--l-text);font:400 16px/1.5 var(--ant-font);box-shadow:var(--l-shadow)}
.portal-hint b{padding:0 7px;border-radius:var(--ant-radius-sm);background:var(--ant-primary);font:600 12px/22px var(--ant-font);letter-spacing:0}
.portal-hint.flash{animation:antHint 1.1s}
@keyframes antHint{0%{box-shadow:0 0 0 0 rgba(22,119,255,.55),var(--l-shadow)}70%{box-shadow:0 0 0 12px rgba(22,119,255,0),var(--l-shadow)}100%{box-shadow:var(--l-shadow)}}
/* Tour */
.tour-card{padding:16px;border:0;border-radius:var(--ant-radius-lg);background:var(--l-container);box-shadow:var(--l-shadow)}
.tour-top{font:600 16px/1.5 var(--ant-font);letter-spacing:0;color:var(--l-text)}
.tour-dots i{width:6px;height:6px;background:rgba(0,0,0,.15)} .tour-dots i.on{width:18px;border-radius:3px;background:var(--ant-primary)} .tour-dots i.ok{background:rgba(22,119,255,.45)}
.tour-text{font:400 14px/1.5714 var(--ant-font);color:var(--l-text-2)}
.tour-text b{color:var(--l-text);font-weight:600}
.tour-btns .ghost{height:24px;padding:0 7px;border:1px solid var(--l-border);color:var(--l-text);font-size:14px;background:#fff}
.tour-btns .ghost:hover{border-color:var(--ant-primary-hover);color:var(--ant-primary-hover)}
.tour-btns .primary{height:24px;padding:0 7px;border-radius:var(--ant-radius-sm);font-size:14px;font-weight:400;background:var(--ant-primary);border-color:var(--ant-primary);box-shadow:0 2px 0 rgba(5,145,255,.1)}
/* Why: Notification with an info icon */
.why-card{padding:16px 20px;border:0;border-radius:var(--ant-radius-lg);background:var(--l-container);box-shadow:inset 4px 0 0 var(--ant-info),var(--l-shadow);font-family:var(--ant-font)}
.why-top{font:600 12px var(--ant-font);letter-spacing:0;color:var(--ant-primary)}
.why-x{height:24px;padding:0 7px;border-radius:var(--ant-radius-sm);background:var(--ant-primary);font:400 14px/1 var(--ant-font);box-shadow:0 2px 0 rgba(5,145,255,.1)}
.why-title{font:600 16px/1.5 var(--ant-font);color:var(--l-text)}
.why-text{font:400 14px/1.5714 var(--ant-font);color:var(--l-text-2)}
.why-text b{color:var(--l-text);font-weight:600}
/* Tooltip-like 3D tags */
.tag3d>div{padding:6px 8px;border:0;border-radius:var(--ant-radius);background:rgba(0,0,0,.85);color:#fff;font:400 13px/1.4 var(--ant-font);box-shadow:var(--l-shadow)}
.tag3d>div b{font:600 12px/1.4 var(--ant-font);letter-spacing:0;color:#69b1ff}
.tag3d.warn>div b{color:#ffd666} .tag3d.bad>div b{color:#ff7875}
.tag3d.pin>div::after{width:1px;background:rgba(0,0,0,.85)}
/* key hints: Typography kbd */
.keys-help{font:400 13px var(--ant-font);color:var(--l-text)}
.keys-help span{padding:2px 8px;border:1px solid var(--l-split);border-radius:var(--ant-radius);background:rgba(255,255,255,.94);box-shadow:var(--l-shadow)}
.keys-help b{display:inline-block;margin:0 6px 0 0;padding:0 5px;border:1px solid rgba(100,100,100,.2);border-bottom-width:2px;border-radius:3px;background:rgba(150,150,150,.06);font:600 12px/18px var(--ant-mono);color:var(--l-text)}

@media (max-width:900px){
  .missions{width:auto;border-radius:var(--ant-radius-lg) var(--ant-radius-lg) 0 0}
  #mission-list button{display:flex;gap:8px;padding:8px 10px;border:1px solid var(--d-split);border-radius:var(--ant-radius-lg);background:var(--d-container)}
  #mission-list .thumb{width:32px;height:32px}
  .panel{background:rgba(20,20,20,.97)}
  .dev-head{flex-direction:column}
  #dev-features{grid-template-columns:1fr}
}
/* photo viewer fixes (2026-10-09): the whole photo fits the frame, no vertical scrollbar under the thumbnails */
.dev-photo{display:flex;align-items:center;justify-content:center;height:min(52vh,460px);padding:12px}
.dev-photo img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center}
.dev-thumbs{overflow-x:auto;overflow-y:hidden;padding:2px;scrollbar-width:thin}
.dev-thumbs button{box-sizing:border-box;flex:0 0 72px;width:72px;height:72px}