/* Solar Drift and The Shape of Gravity: the scene, its panel, the playback
   row and the status bar. Faces, colours, radii, spacing, the focus ring,
   the skip link and the bar are the site's (theme.css). This sheet used to
   declare the three faces again under private names, which left Arabic with
   no fallback, and to pin color-scheme to dark, which drew dark checkboxes
   and scrollbars on the light theme. */
:root{
  --space:var(--app-bg);
  --line:var(--border);
  --ink:var(--text);
  font-family:var(--font-body);
  background:var(--space);
  color:var(--ink)
}

*{
  box-sizing:border-box
}

body{
  margin:0;
  min-width:320px
}

button,input,select{
  font:inherit
}

button,a,input,select{
  -webkit-tap-highlight-color:transparent
}

button,a{
  touch-action:manipulation
}

button{
  cursor:pointer
}

a{
  color:inherit;
  text-decoration:none
}

button{
  color:inherit;
  background:none;
  border:0
}

button:disabled,input:disabled,select:disabled{
  opacity:.45;
  cursor:not-allowed
}

[hidden]{
  display:none!important
}

button,input,select{
  accent-color:var(--accent)
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:calc(-1 * var(--s-0));
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

/* The bar is the site's instrument bar (templates/_instrument_bar.html):
   its lockup, links, controls and both of its layouts are in theme.css. */

.observatory{
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  grid-template-rows:minmax(560px,1fr) 117px;
  /* The bar above and the 38px status bar below. */
  height:calc(100vh - var(--bar-h) - 38px);
  height:calc(100dvh - var(--bar-h) - 38px);
  min-height:740px
}

.viewport{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 62% 55%,var(--panel) 0,transparent 54%),var(--space)
}

#drift-canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  outline-offset:-4px;
  cursor:grab
}

#drift-canvas:active{
  cursor:grabbing
}

.scene-intro{
  position:absolute;
  inset-inline-start:38px;
  top:34px;
  pointer-events:none;
  z-index:2
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.6px;
  font-weight:400
}

.scene-intro .eyebrow{
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:var(--s-3);
  margin:0 0 var(--s-5)
}

.eyebrow>span{
  height:5px;
  width:5px;
  border-radius:50%;
  background:var(--accent)
}

h1{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-1.5px;
  margin:0
}

h1 em{
  font-style:italic;
  color:var(--accent)
}

.scene-intro>p:last-child{
  font-size:13px;
  color:var(--muted);
  margin-top:var(--s-5)
}

.scene-badge{
  position:absolute;
  inset-inline-end:24px;
  top:34px;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  font:11px var(--font-mono);
  letter-spacing:1px;
  color:var(--text-soft)
}

.status-light{
  width:5px;
  height:5px;
  background:var(--accent-2);
  border-radius:50%
}

.view-toolbar{
  position:absolute;
  inset-inline-start:38px;
  bottom:129px;
  background:color-mix(in srgb, var(--panel) 91%, transparent);
  border:1px solid var(--line);
  padding:var(--s-2);
  border-radius:var(--r-sm);
  display:flex;
  gap:var(--s-1)
}

.view-toolbar button{
  font-size:11px;
  padding:var(--s-3) var(--s-4);
  min-height:36px;
  color:var(--muted);
  border-radius:var(--r-xs)
}

.view-toolbar button[aria-pressed=true]{
  background:var(--panel-2);
  color:var(--ink)
}

.view-toolbar button:hover{
  color:white
}

.canvas-tools{
  position:absolute;
  inset-inline-end:24px;
  bottom:129px;
  display:flex;
  gap:var(--s-2)
}

.canvas-tools button{
  width:38px;
  height:38px;
  font-size:22px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--panel) 91%, transparent)
}

.canvas-tools button:hover{
  border-color:var(--accent)
}

.scene-bottom{
  position:absolute;
  inset:auto 38px 27px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  pointer-events:none
}

.travel-reading>.eyebrow{
  font-size:11px;
  letter-spacing:1.4px;
  color:var(--muted)
}

.travel-reading>div{
  font:32px var(--font-mono);
  letter-spacing:-1.5px;
  margin-top:var(--s-3)
}

.travel-reading>div>span{
  font:12px var(--font-body);
  letter-spacing:0;
  color:var(--muted)
}

.travel-reading>div>.direction-arrow{
  font-size:27px;
  color:var(--accent);
  margin-inline-start:var(--s-5)
}

.travel-reading p{
  font-size:11px;
  color:var(--muted);
  margin:var(--s-2) 0 0
}

.scene-scale{
  display:flex;
  flex-direction:column;
  align-items:end;
  gap:var(--s-2);
  font-size:11px;
  color:var(--muted)
}

.scene-scale button{
  padding:var(--s-1) 0;
  color:var(--accent);
  pointer-events:auto;
  min-height:28px
}

.scale-line{
  height:7px;
  width:68px;
  border:1px solid var(--muted);
  border-top:0
}

.planet-labels{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden
}

.planet-label{
  position:absolute;
  font:11px var(--font-mono);
  color:var(--text-soft);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-xs);
  pointer-events:auto;
  white-space:nowrap;
  text-shadow:0 1px 6px var(--app-bg);
  background:color-mix(in srgb, var(--app-bg) 70%, transparent)
}

/* The selected body's ring is a box-shadow, not an outline: as an outline it
   replaced the focus indicator on the one label a keyboard user had just
   chosen. Its text is the theme's ink; it was a literal white, which left
   the selected name unreadable on the light theme's pale label. */
.planet-label:hover,.planet-label[aria-pressed=true]{
  box-shadow:0 0 0 1px var(--planet-color);
  color:var(--text);
  background:var(--panel-2)
}

.planet-label::before{
  content:'';
  display:inline-block;
  width:4px;
  height:4px;
  background:var(--planet-color);
  border-radius:50%;
  margin-inline-end:var(--s-2)
}

.planet-insight{
  position:absolute;
  top:235px;
  inset-inline-start:38px;
  max-width:280px;
  background:color-mix(in srgb, var(--panel) 91%, transparent);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:var(--s-4);
  display:flex;
  gap:var(--s-3);
  align-items:center
}

.planet-insight strong{
  font-size:14px
}

.planet-insight span:not(.insight-dot){
  display:block;
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  margin-top:var(--s-2)
}

.insight-dot{
  flex:0 0 7px;
  height:7px;
  border-radius:50%
}

.planet-insight button{
  align-self:start;
  font-size:20px;
  margin-inline-start:var(--s-3)
}

.control-panel{
  background:var(--panel);
  border-inline-start:1px solid var(--line);
  padding:var(--s-6) var(--s-6) var(--s-5);
  overflow:auto;
  scrollbar-width:thin
}

.panel-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  padding-bottom:var(--s-6)
}

.panel-title>span:last-child{
  font-size:19px;
  color:var(--accent)
}

.control-section{
  margin-bottom:var(--s-6)
}

.control-section h2{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  font-weight:400;
  margin:0
}

.control-section>p{
  font-size:11px;
  color:var(--muted);
  margin:var(--s-2) 0 var(--s-5)
}

.frame-picker{
  display:grid;
  gap:var(--s-3)
}

.frame-picker button{
  display:flex;
  align-items:center;
  text-align:start;
  padding:var(--s-4) var(--s-3);
  gap:var(--s-3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:12px;
  min-height:57px
}

.frame-picker button>span:first-child{
  font-size:21px;
  color:var(--muted)
}

.frame-picker button small{
  font-size:11px;
  color:var(--muted);
  display:block;
  margin-top:var(--s-2)
}

.frame-picker button[aria-pressed=true]{
  border-color:var(--accent);
  background:var(--panel-2)
}

.frame-picker button[aria-pressed=true]>span:first-child{
  color:var(--accent)
}

.radio-mark{
  margin-inline-start:auto;
  width:11px;
  height:11px;
  flex-shrink:0;
  border:1px solid var(--muted);
  border-radius:50%
}

.frame-picker button[aria-pressed=true] .radio-mark{
  border:3px solid var(--accent);
  background:var(--panel-2)
}

.trail-settings{
  padding-top:var(--s-5);
  border-top:1px solid var(--line)
}

.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
  margin-bottom:var(--s-3)
}

.section-heading output{
  font:11px var(--font-mono);
  color:var(--accent)
}

input[type=range]{
  width:100%;
  height:22px;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
  margin:0
}

input[type=range]::-webkit-slider-runnable-track{
  height:3px;
  background:linear-gradient(to right,var(--accent) var(--progress,100%),var(--border) var(--progress,100%));
  border-radius:var(--r-xs)
}

input[type=range]::-moz-range-track{
  height:3px;
  background:var(--border)
}

input[type=range]::-moz-range-progress{
  background:var(--accent);
  height:3px
}

input[type=range]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:10px;
  height:10px;
  margin-top:calc(-1 * var(--s-2));
  border-radius:50%;
  background:var(--accent);
  border:0
}

input[type=range]::-moz-range-thumb{
  height:10px;
  width:10px;
  background:var(--accent);
  border:0;
  border-radius:50%
}

.range-endpoints{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted)
}

.worlds-section{
  border-top:1px solid var(--line);
  padding-top:var(--s-5);
  margin-bottom:var(--s-5)
}

.worlds-section h2{
  font-size:var(--fs-label)
}

.column-label{
  font:11px var(--font-mono);
  letter-spacing:.4px;
  color:var(--muted)
}

.planet-row{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-height:31px;
  font-size:12px;
  cursor:pointer
}

.planet-row input{
  width:12px;
  height:12px;
  margin:0;
  accent-color:var(--planet-color)
}

.planet-row .planet-dot{
  height:7px;
  width:7px;
  border-radius:50%;
  background:var(--planet-color);
  box-shadow:0 0 8px color-mix(in srgb,var(--planet-color) 20%,transparent)
}

.planet-row .planet-period{
  margin-inline-start:auto;
  font:11px var(--font-mono);
  color:var(--muted)
}

.display-options{
  display:flex;
  gap:var(--s-5);
  padding-top:var(--s-4);
  margin-top:var(--s-3);
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px
}

.display-options label{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  cursor:pointer;
  min-height:30px
}

.display-options input{
  margin:0;
  width:13px;
  height:13px
}

.model-note{
  display:flex;
  gap:var(--s-3);
  font-size:11px;
  color:var(--muted);
  line-height:1.5
}

.model-note>span{
  color:var(--accent);
  padding-top:var(--s-0)
}

.model-note p{
  margin:0
}

.model-note em{
  color:var(--ink)
}

.about-button{
  padding:var(--s-4) 0 0;
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--accent)
}

.playback{
  grid-column:1/-1;
  background:var(--panel);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:var(--s-7);
  padding:var(--s-6) var(--s-7)
}

.transport{
  display:flex;
  align-items:center;
  gap:var(--s-4)
}

#play{
  height:46px;
  width:46px;
  background:var(--accent);
  border-radius:50%;
  color:var(--panel-2);
  display:grid;
  place-items:center
}

#play:hover{
  background:var(--accent)
}

#play svg{
  width:22px;
  height:22px;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:3
}

#restart{
  font-size:25px;
  height:40px;
  width:32px;
  color:var(--muted)
}

.timeline{
  flex:1
}

.timeline-heading{
  display:flex;
  justify-content:space-between;
  align-items:center
}

.timeline-heading label,.speed-control>span{
  font:11px var(--font-mono);
  letter-spacing:1.2px;
  color:var(--muted)
}

.timeline-heading output{
  font:12px var(--font-mono);
  color:var(--ink)
}

.timeline-heading output span{
  font-size:11px;
  color:var(--muted)
}

.timeline input{
  margin:var(--s-2) 0 0
}

.timeline-ticks{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font:11px var(--font-mono)
}

.speed-control{
  border-inline-start:1px solid var(--line);
  padding-inline-start:var(--s-6);
  display:grid;
  gap:var(--s-4);
  min-width:180px
}

.speed-control select{
  background:var(--panel);
  color:var(--ink);
  border:0;
  padding:var(--s-2) var(--s-5) var(--s-2) 0;
  font-size:12px;
  cursor:pointer
}

.statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  min-height:38px;
  padding:var(--s-3) var(--s-7);
  border-top:1px solid var(--line);
  font-size:11px;
  color:var(--muted);
  background:var(--app-bg)
}

.statusbar p{
  margin:0
}

.statusbar i{
  font-style:normal;
  margin:0 var(--s-3);
  color:var(--border)
}

.statusbar p>span{
  color:var(--accent);
  font-size:15px;
  margin-inline-end:var(--s-3)
}

.statusbar button{
  font-size:11px;
  color:var(--muted)
}

kbd{
  font:11px var(--font-mono);
  border:1px solid var(--border);
  padding:var(--s-0) var(--s-2);
  margin-inline-start:var(--s-2);
  border-radius:var(--r-xs)
}

.status-caption{
  font:11px var(--font-mono);
  letter-spacing:1.2px
}

dialog{
  width:min(650px,calc(100% - 32px));
  max-height:85vh;
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--s-7) var(--s-7);
  box-shadow:0 30px 120px #000b;
  line-height:1.7
}

dialog::backdrop{
  background:color-mix(in srgb, var(--app-bg) 79%, transparent);
}

.dialog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  color:var(--accent)
}

.dialog-header button{
  width:36px;
  height:36px;
  font-size:27px;
  color:var(--ink)
}

dialog h2{
  font:var(--fs-c-h1)/1.2 var(--font-display);
  letter-spacing:-.5px
}

dialog h2 em{
  color:var(--accent)
}

dialog h3{
  font-size:var(--fs-c-h3);
  margin-top:var(--s-6)
}

dialog p{
  font-size:14px;
  color:var(--text-soft)
}

dialog strong{
  color:var(--ink)
}

dialog table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:var(--s-6)
}

dialog th,dialog td{
  text-align:start;
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line)
}

dialog caption{
  text-align:start;
  margin-bottom:var(--s-3);
  font-weight:700
}

.source-links a{
  display:block;
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--accent)
}

.shortcuts{
  display:grid;
  grid-template-columns:1fr 1fr;
  font-size:14px;
  gap:var(--s-3)
}

.shortcuts dd{
  margin:0;
  color:var(--muted)
}

.render-error{
  position:absolute;
  top:48%;
  inset-inline-start:10%;
  width:80%;
  padding:var(--s-5);
  background:var(--panel);
  border:1px solid var(--line);
  z-index:4;
  font-size:14px
}

.source-links a:hover{
  text-decoration-thickness:2px
}

@media(min-width:1561px){
  .observatory{
    grid-template-columns:minmax(0,1fr) 320px
  }

  .control-panel{
    padding:var(--s-7)
  }

  .control-section{
    margin-bottom:var(--s-6)
  }

  .planet-row{
    min-height:36px
  }

  .scene-intro{
    inset-inline-start:48px;
    top:43px
  }

}

@media(min-width:981px) and (max-height:59.375em){
  .control-panel{
    padding:var(--s-4) var(--s-6)
  }

  .panel-title{
    padding-bottom:var(--s-4);
    font-size:12px
  }

  .panel-title>span:last-child{
    font-size:16px
  }

  .control-section{
    margin-bottom:var(--s-4)
  }

  .control-section>p{
    margin:var(--s-2) 0 var(--s-3)
  }

  .frame-picker button{
    padding:var(--s-3);
    min-height:49px
  }

  .frame-picker button small{
    margin-top:var(--s-1)
  }

  .trail-settings,.worlds-section{
    padding-top:var(--s-4)
  }

  .section-heading{
    margin-bottom:var(--s-2)
  }

  .worlds-section h2{
    font-size:11px
  }

  .column-label{
    font-size:11px
  }

  .planet-row{
    min-height:27px
  }

  .display-options{
    padding-top:var(--s-2);
    margin-top:var(--s-2)
  }

  .model-note{
    font-size:11px;
    line-height:1.4
  }

  .about-button{
    padding-top:var(--s-3)
  }

  .control-panel .eyebrow{
    font-size:11px
  }

}

@media(max-width:1365px){
  .observatory{
    grid-template-columns:minmax(0,1fr) 266px
  }

  .control-panel{
    padding:var(--s-6) var(--s-5)
  }

  .scene-intro{
    inset-inline-start:25px
  }

  .scene-badge{
    top:auto;
    bottom:185px;
    inset-inline-end:25px;
    font-size:11px
  }

  .scene-bottom{
    inset-inline-start:25px;
    inset-inline-end:25px
  }

  .view-toolbar{
    inset-inline-start:25px
  }

  .status-caption{
    display:none
  }

  .scene-intro h1{
    font-size:36px
  }

  .planet-insight{
    inset-inline-start:25px;
    top:220px
  }

  .playback{
    gap:var(--s-6);
    padding:var(--s-6)
  }

  .speed-control{
    min-width:151px;
    padding-inline-start:var(--s-5)
  }

  .travel-reading>div{
    font-size:28px
  }

}

@media(max-width:980px){
  .observatory{
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0
  }

  .viewport{
    height:660px;
    height:82svh;
    min-height:560px;
    max-height:780px
  }

  .scene-intro{
    inset-inline-start:23px;
    top:25px
  }

  .scene-intro .eyebrow{
    font-size:11px;
    margin-bottom:var(--s-5)
  }

  .scene-intro h1{
    font-size:36px
  }

  .scene-intro>p:last-child{
    font-size:12px
  }

  .scene-badge{
    bottom:172px;
    inset-inline-end:21px;
    font-size:11px;
    letter-spacing:.5px
  }

  .scene-bottom{
    inset-inline-start:23px;
    inset-inline-end:23px;
    bottom:24px
  }

  .travel-reading>.eyebrow{
    font-size:11px;
    letter-spacing:1px
  }

  .travel-reading>div{
    font-size:25px
  }

  .travel-reading p{
    font-size:11px;
    max-width:180px;
    line-height:1.4
  }

  .scene-scale{
    font-size:11px
  }

  .scene-scale button{
    font-size:11px
  }

  .view-toolbar{
    bottom:120px;
    inset-inline-start:22px
  }

  .view-toolbar button{
    font-size:11px;
    padding:var(--s-3) var(--s-3)
  }

  .canvas-tools{
    inset-inline-end:20px;
    bottom:120px
  }

  .canvas-tools button{
    height:34px;
    width:34px
  }

  .planet-label{
    font-size:11px;
    padding:var(--s-3) var(--s-2)
  }

  .planet-insight{
    top:190px;
    inset-inline-start:23px;
    max-width:240px;
    padding:var(--s-3)
  }

  .playback{
    order:1;
    padding:var(--s-5);
    gap:var(--s-5);
    flex-wrap:wrap;
    border-bottom:1px solid var(--line)
  }

  .transport{
    gap:var(--s-2)
  }

  #play{
    height:40px;
    width:40px
  }

  #restart{
    width:27px
  }

  .timeline-heading label{
    font-size:11px;
    letter-spacing:.7px
  }

  .timeline-heading output{
    font-size:11px
  }

  .timeline-heading output span{
    font-size:11px
  }

  .timeline-ticks{
    font-size:11px
  }

  .speed-control{
    border:0;
    padding:var(--s-3) 0 0 var(--s-10);
    display:flex;
    align-items:center;
    gap:var(--s-5);
    flex-basis:100%
  }

  .speed-control>span{
    font-size:11px
  }

  .speed-control select{
    font-size:11px
  }

  .control-panel{
    order:2;
    overflow:visible;
    border:0;
    padding:var(--s-6);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 var(--s-6)
  }

  .panel-title{
    grid-column:1/-1;
    padding-bottom:var(--s-6)
  }

  .control-section{
    margin-bottom:var(--s-6)
  }

  .trail-settings{
    border-top:0;
    padding-top:0;
    align-self:center
  }

  .worlds-section{
    grid-column:1/-1
  }

  .planet-row{
    min-height:39px;
    font-size:13px
  }

  #planet-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 var(--s-6)
  }

  .display-options{
    margin-top:var(--s-5)
  }

  .model-note,.about-button{
    grid-column:1/-1
  }

  .about-button{
    min-height:44px
  }

  .statusbar{
    flex-wrap:wrap;
    padding:var(--s-4) var(--s-6);
    gap:var(--s-3);
    line-height:1.7
  }

  .statusbar p{
    font-size:11px
  }

  .statusbar i{
    margin:0 var(--s-1)
  }

  dialog{
    padding:var(--s-5)
  }

  dialog h2{
    font-size:27px
  }

  .planet-insight span:not(.insight-dot){
    font-size:11px
  }

  .scene-scale .scale-line{
    width:45px
  }

}

@media(max-width:560px){
  .control-panel{
    display:block
  }

  .trail-settings{
    padding-top:var(--s-5);
    border-top:1px solid var(--line)
  }

  .canvas-tools{
    gap:var(--s-1);
    inset-inline-end:14px
  }

  .view-toolbar{
    inset-inline-start:16px
  }

  .view-toolbar button{
    padding:var(--s-3)
  }

  .scene-intro h1{
    font-size:31px
  }

  .scene-intro{
    inset-inline-start:19px
  }

  .travel-reading>div{
    font-size:22px
  }

  .travel-reading p{
    max-width:157px
  }

  .scene-bottom{
    inset-inline-start:19px;
    inset-inline-end:19px
  }

}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }

}

@media(forced-colors:active){
  button{
    border:1px solid ButtonText
  }

  .frame-picker button[aria-pressed=true],.view-toolbar button[aria-pressed=true]{
    outline:2px solid Highlight
  }

  .planet-dot,.status-light{
    background:CanvasText
  }

  input[type=range]{
    appearance:auto
  }

  #play{
    border:1px solid ButtonText
  }

}

/* Right-to-left. The scene is a drawing with coordinates: its canvas, the
   labels the script places over it and the readings pinned to its corners
   are laid out left-to-right in every language, and the markup says so
   (dir="ltr" on .viewport). Text inside it still takes the direction of its
   own language, so an Arabic sentence is set right-to-left where it stands.
   The panel, the playback row, the status bar and the dialogs follow the
   page. A slider's fill is drawn from the left, so sliders and their scales
   keep that direction too: a time axis reads the same way in both. */
html[dir="rtl"] .viewport :is(h1,p,span,strong,small,button,dt,dd){
  unicode-bidi:plaintext
}

html[dir="rtl"] :is(.control-panel,.playback) :is(input[type=range],.range-endpoints,.timeline-ticks){
  direction:ltr
}

/* Arabic is a joined script: it takes the site's Arabic faces and is never
   letter-spaced, here as everywhere else. */
html[lang="ar"] body{
  font-family:var(--font-body)
}

/* Arabic has no italic: a slanted Kufic headline is a synthesized skew. The
   emphasis keeps its colour and loses the slant. */
html[lang="ar"] .scene-intro h1 em{
  font-style:normal
}

html[lang="ar"] :is(.masthead,.observatory,.statusbar,.cinema-bar,dialog) *{
  letter-spacing:0
}