/* Quiet Motion: stable geometry, independent of source format and text length. */
#load-overlay {
  --load-ink: #e4edf7;
  --load-muted: #9aaec3;
  --load-accent: #66bbff;
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  color: var(--load-ink);
  background: radial-gradient(ellipse at 8% 10%, #101f35 0, transparent 48%),
    radial-gradient(ellipse at 98% 100%, #101d33 0, transparent 42%), #080d15;
  font-family: Inter, 'Segoe UI', sans-serif;
  text-align: left;
  opacity: 1; transition: opacity .25s ease;
}
#load-overlay.load-complete { opacity: 0; pointer-events: none; }
#load-overlay.hidden { display: none; }
/* pass-through: 裏の 3D 演出（地面セルのリビール / octree の枠）を見せる。72% では線が沈むので 38% → 33%。 */
#load-overlay.pass-through { background: linear-gradient(90deg, #080d1561, #080d1554); pointer-events: none; }
.load-composition { position: relative; width: min(520px, calc(100vw - 48px)); box-sizing: border-box; padding-bottom: 52px; }
.load-source-line { display: flex; justify-content: space-between; gap: 24px; height: 20px; margin-bottom: 26px; font-size: 11px; letter-spacing: .16em; color: var(--load-muted); }
#load-scene-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#load-format { flex: 0 0 auto; max-width: 36%; white-space: nowrap; }
.load-copy { height: 100px; }
#load-stage-label { margin: 0; height: 44px; font-size: clamp(19px, 4.5vw, 28px); line-height: 1.5; font-weight: 400; letter-spacing: .06em; white-space: nowrap; }
.load-status-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 5px; min-height: 24px; }
#load-stage-detail { flex: 1 1 auto; min-width: 0; color: var(--load-muted); font-size: 15px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Meter: one moving number + a size cue, right of the status line. Box stays; content fades. */
#load-meter { flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 1; transition: opacity .3s ease; }
#load-meter[data-empty='true'] { opacity: 0; }
#load-meter-label { font-size: 9px; letter-spacing: .22em; color: #7f93ab; }
.load-meter-count { font-family: 'Cascadia Code', Consolas, monospace; font-size: 15px; line-height: 1.5; color: var(--load-ink); }
#load-meter-rest { color: var(--load-muted); font-size: 12px; }
#load-meter-bytes { font-family: 'Cascadia Code', Consolas, monospace; font-size: 11px; color: #7f93ab; padding-left: 10px; border-left: 1px solid #263b56; }
#load-meter-bytes[hidden] { display: none; }
#load-progress-bar { width: 100%; height: 2px; background: #263b56; overflow: hidden; }
#load-progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, #3a96f0, #86dbff); transition: width .18s ease-out; }
#load-progress-bar.indeterminate #load-progress-fill { width: 28% !important; animation: load-sweep 2s ease-in-out infinite; }
@keyframes load-sweep { from { transform: translateX(-110%); } to { transform: translateX(370%); } }
.load-milestones { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; height: 20px; font-size: 10px; letter-spacing: .17em; }
.load-milestones span { color: #8292a8; display: flex; align-items: center; gap: 12px; }
.load-milestones span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #47566b; flex: 0 0 auto; }
.load-milestones [data-state='done'] { color: var(--load-muted); }
.load-milestones [data-state='done']::before { background: var(--load-accent); }
.load-milestones [data-state='active'] { color: var(--load-ink); }
.load-milestones [data-state='active']::before { background: transparent; outline: 1px solid var(--load-accent); box-shadow: 0 0 9px #66bbff60; animation: load-breathe 2s ease-in-out infinite; }
@keyframes load-breathe { 50% { opacity: .4; } }
#load-details { position: absolute; top: 230px; left: 0; width: 100%; pointer-events: auto; }
#load-details summary { cursor: pointer; list-style: none; width: max-content; padding: 8px 0; font-size: 10px; letter-spacing: .2em; color: var(--load-muted); }
#load-details summary::-webkit-details-marker { display: none; }
#load-details summary span { margin-left: 10px; display: inline-block; }
#load-details[open] summary span { transform: rotate(180deg); }
#load-details summary:focus-visible, #load-dismiss:focus-visible { outline: 1px solid var(--load-accent); outline-offset: 5px; }
.load-details-panel { margin-top: 12px; padding: 16px; border: 1px solid #273951; background: #090f19ee; border-radius: 5px; max-height: min(220px, 25vh); overflow: auto; font-size: 12px; color: var(--load-muted); }
#load-technical-detail { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
#load-stats-bar { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.load-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.load-stat[hidden], #load-dismiss[hidden] { display: none; }
.load-stat-label { font-size: 10px; }
.load-stat-value { color: var(--load-ink); font-family: 'Cascadia Code', Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#load-dismiss { position: absolute; top: 232px; right: 0; z-index: 1; border: 0; padding: 8px; color: var(--load-ink); background: transparent; cursor: pointer; letter-spacing: .15em; font-size: 10px; pointer-events: auto; }
.load-failed #load-progress-fill { background: #ed9b98; width: 100% !important; animation: none; }
.load-failed .load-milestones span::before { animation: none; }
.load-milestones [data-state='failed']::before { background: #ed9b98; outline: none; }
@media (max-height: 580px) { .load-composition { transform: translateY(-50px); } .load-details-panel { max-height: 90px; } }
@media (max-width: 380px) { #load-stage-label { font-size: 18px; } #load-stage-detail { font-size: 13px; } .load-source-line { letter-spacing: .06em; } #load-meter-bytes { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #load-overlay, #load-meter { transition: none; }
  #load-progress-fill, .load-milestones [data-state='active']::before { animation: none !important; transition: none; }
  #load-progress-bar.indeterminate #load-progress-fill { opacity: .6; }
}
/* 認証設計 §7.3: signin フェーズ（サインインへのリンク）。位置は #load-dismiss と対になる左端 */
#load-signin{position:absolute;top:232px;left:0;z-index:1;pointer-events:auto;padding:8px 18px;border-radius:4px;background:#3a96f0;color:#fff;font-size:12px;letter-spacing:.14em;text-decoration:none}
#load-signin[hidden]{display:none}
.load-signin #load-progress-fill{background:#3a96f0;width:100%}
.load-signin .load-milestones span::before{animation:none}