.width-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 9px;
}

.presets{flex-wrap:wrap}.presets button{white-space:nowrap}

.width-presets button {
  border: 1px solid #d6dbd1;
  border-radius: 4px;
  background: #fcfcf8;
  color: #607064;
  font-size: 11px;
  padding: 9px 4px;
}

.width-presets button:hover {
  border-color: #809477;
  background: #eef2e7;
}

.zoom-hint {
  margin-top: 8px;
}

.date-picker{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px}.date-picker>div{position:relative}.date-picker select{appearance:none;padding-right:32px;font-size:16px;font-variant-numeric:tabular-nums}.date-picker span{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#71849c;font-size:11px}.date-shortcuts{display:flex;gap:8px;margin-top:8px}.date-shortcuts button,.text-button{border:0;background:none;color:#88bbcb;font-size:11px;padding:4px 0;border-bottom:1px solid #2c4359}.date-shortcuts button+button{margin-left:8px}

@media (max-width: 390px) {
  .width-presets {
    grid-template-columns: repeat(2, 1fr);
  }
}

.video-tools {
  max-width: 460px;
  margin: 16px auto 0;
  padding-top: 16px;
  border-top: 1px solid #d0d6cb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-tools strong { font-size: 12px; font-weight: 500; }
.video-tools p { margin: 6px 0 0; color: #7b8779; font-size: 10px; }
.video-actions { display: flex; gap: 7px; }
.video-actions button { min-height: 40px; padding: 0 12px; }

.download-panel{max-width:460px;margin:20px auto 0;padding:18px;border:1px solid #28485f;background:linear-gradient(135deg,#0b1c2d,#07101c);display:grid;gap:12px}.download-panel strong{display:block;font-size:14px;margin-top:5px}.download-panel p{margin:7px 0 0;color:#8298ac;font-size:10px}.download-kicker{color:#65dff8;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.5px}.download-panel .primary,.preview-button{width:100%;justify-content:center;min-height:46px}.preview-button{min-height:40px}.image-download{max-width:460px;margin:10px auto 0;display:flex;justify-content:space-between;align-items:center;color:#71849c;font-size:10px}.text-button:disabled{opacity:.35}

#video-dialog {
  width: min(430px, calc(100vw - 24px));
  border: 0;
  border-radius: 10px;
  padding: 14px;
  background: #102724;
  color: #edf0e3;
  box-shadow: 0 30px 100px #07110fc9;
}

#video-dialog::backdrop { background: #06100ed9; }
#journey-stage{position:relative;overflow:hidden;border-radius:5px;background:#02050b;aspect-ratio:9/16}
#journey-map{position:absolute;inset:0;z-index:0}
#video-dialog canvas { width: 100%; height: auto; border-radius: 5px; background: #071716; }
#journey-stage canvas{position:relative;z-index:1}
#journey-status{position:absolute;z-index:2;inset:0;display:grid;place-items:center;background:#020914d9;color:#dff8ff;font-size:11px;letter-spacing:.08em}
#journey-status[hidden]{display:none}
#video-dialog > p { font-size: 11px; color: #aebbb2; line-height: 1.7; margin: 10px 2px 0; }
.video-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 12px; }
.video-dialog-head div { display: flex; flex-direction: column; gap: 4px; }
.video-dialog-head strong { font-size: 13px; }
.video-dialog-head span { font-size: 10px; color: #9aaba0; }
.video-dialog-head button { border: 0; background: transparent; color: #f4f5e9; font-size: 25px; line-height: 1; }

@media (max-width: 640px) {
  .video-tools { align-items: stretch; flex-direction: column; }
  .video-actions button { flex: 1; }
}