:root {
  --brand:#22a9f8;
  --brand-deep:#01017c;
  --soft:#f0f8ff;
  --ink:#101c45;
  --muted:#536580;
  --line:#dbe7f3;
  --paper:#fff;
  --tissue:#f5f4ef;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#fff
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--brand);
  outline-offset:4px
}
button {
  cursor:pointer
}
a {
  color:inherit
}
.atlas {
  width:min(100%,1120px);
  margin:auto;
  padding:24px 30px 20px
}
.masthead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;
  gap:16px
}
.masthead a {
  display:block;
  line-height:0
}
.masthead img {
  object-fit:contain;
  width:116px;
  height:32px
}
.edition {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:750;
  color:var(--brand-deep)
}
.edition-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 4px #22a9f814
}
.edition-separator {
  opacity:.35;
  margin:0 3px
}
.introduction {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:24px;
  align-items:center;
  margin-bottom:36px
}
.introduction>* {
  min-width:0
}
.eyebrow {
  font-size:9px;
  font-weight:750;
  letter-spacing:.17em;
  color:var(--muted);
  margin:0 0 10px
}
.intro-copy h1 {
  font-weight:650;
  letter-spacing:-.055em;
  line-height:1.08;
  font-size:clamp(28px,3.1vw,44px);
  color:var(--brand-deep);
  margin:0 0 16px
}
.intro-copy h1 span {
  color:#0a92dc
}
.intro-copy>p:last-child {
  max-width:39ch;
  font-size:14px;
  line-height:1.65;
  margin:0;
  color:var(--muted)
}
.context-art {
  margin:0;
  position:relative;
  border-radius:18px;
  background:#0c1021;
  box-shadow:0 14px 35px #01017c15
}
.context-art img {
  display:block;
  width:100%;
  height:auto;
  border-radius:18px
}
.context-art figcaption {
  position:absolute;
  bottom:10px;
  left:12px;
  color:#fff;
  font-size:9px;
  letter-spacing:.04em;
  background:#01017cba;
  border:1px solid #ffffff28;
  backdrop-filter:blur(8px);
  padding:6px 9px;
  border-radius:20px
}
.explorer {
  border:1px solid var(--line);
  border-radius:23px;
  background:var(--paper);
  box-shadow:0 14px 50px #01017c06;
  position:relative
}
.explorer-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 26px 20px;
  gap:15px;
  border-bottom:1px solid var(--line)
}
.explorer-heading h2 {
  font-size:22px;
  letter-spacing:-.035em;
  font-weight:650;
  line-height:1.2;
  margin:0;
  color:var(--brand-deep)
}
.explorer-heading .eyebrow {
  font-size:8px;
  margin-bottom:7px
}
.instructions {
  margin:0;
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  text-align:right
}
.instructions>span:last-child {
  font-size:10px;
  opacity:.82
}
.workspace {
  display:grid;
  grid-template-columns:minmax(0,1.13fr) minmax(0,1fr);
  gap:0;
  align-items:stretch
}
.workspace>* {
  min-width:0
}
.visual-column {
  padding:20px 18px 16px;
  background:radial-gradient(ellipse at 70% 48%,#fff 0%,var(--tissue) 75%);
  border-bottom-left-radius:0;
  position:relative
}
.view-controls {
  display:flex;
  width:max-content;
  margin:0 auto 8px;
  padding:4px;
  border:1px solid #01017c12;
  border-radius:25px;
  background:#ffffffd9;
  box-shadow:0 3px 12px #01017c05;
  position:relative;
  z-index:5
}
.view-control {
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  padding:7px 13px;
  transition:background .2s,color .2s
}
.view-control span {
  font-size:14px;
  margin-right:3px
}
.view-control.is-active {
  background:var(--brand-deep);
  color:white;
  box-shadow:0 2px 7px #01017c22
}
.specimen {
  position:relative;
  min-height:570px;
  isolation:isolate
}
.specimen-model {
  position:relative;
  width:72%;
  margin-left:24%;
  padding-top:29px;
  z-index:2
}
.specimen-model>img {
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
  transition:filter .35s,opacity .35s;
  user-select:none
}
.anatomy-overlay {
  position:absolute;
  left:0;
  top:29px;
  width:100%;
  height:calc(100% - 29px);
  z-index:3;
  overflow:visible
}
.zone {
  fill:transparent;
  stroke:transparent;
  stroke-width:1.6;
  cursor:pointer;
  vector-effect:non-scaling-stroke;
  transition:fill .2s,stroke .2s
}
.zone.is-active {
  fill:url(#band-fill);
  stroke:#22a9f8;
  filter:url(#cyan-glow)
}
.zone:hover {
  fill:url(#band-fill)
}
.layer-selectors {
  position:absolute;
  left:0;
  top:45px;
  bottom:55px;
  width:28%;
  z-index:6
}
.layer-selector {
  position:absolute;
  left:0;
  top:calc(var(--position)*1%);
  width:100%;
  height:44px;
  transform:translateY(-50%);
  display:flex;
  gap:8px;
  align-items:center;
  background:none;
  border:0;
  padding:0;
  color:var(--muted);
  text-align:left
}
.layer-selector::after {
  content:"";
  position:absolute;
  left:82px;
  right:0;
  height:1px;
  background:#01017c25;
  transform:translateY(var(--connector-offset,0px)) rotate(var(--connector-angle,0deg));
  transform-origin:left;
  pointer-events:none;
  transition:background .2s
}
.marker-number {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  flex:none;
  background:#ffffffdd;
  border:1px solid #01017c23;
  border-radius:50%;
  font-size:10px;
  font-weight:650;
  transition:color .2s,background .2s,box-shadow .2s
}
.marker-code {
  font-size:9px;
  letter-spacing:.02em;
  font-weight:650
}
.layer-selector.is-active .marker-number {
  background:var(--brand-deep);
  color:#fff;
  border-color:var(--brand-deep);
  box-shadow:0 0 0 4px #22a9f824,0 0 22px #22a9f82b
}
.layer-selector.is-active .marker-code {
  color:var(--brand-deep)
}
.layer-selector.is-active::after {
  background:var(--brand)
}
.layer-selector.is-pinned .marker-number::after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--brand);
  left:25px;
  top:7px
}
.edge-label {
  position:absolute;
  left:24%;
  top:0;
  margin:0;
  font-size:8px;
  letter-spacing:.1em;
  font-weight:750;
  color:var(--muted);
  white-space:nowrap
}
.edge-label small {
  font-size:8px;
  font-weight:450;
  letter-spacing:0;
  margin-left:5px;
  opacity:.8
}
.edge-label>span {
  display:inline-block;
  width:6px;
  height:6px;
  border:1px solid var(--brand);
  border-radius:50%;
  margin-right:4px
}
.specimen-glow {
  position:absolute;
  left:26%;
  right:2%;
  height:38px;
  bottom:57px;
  background:#01017c14;
  filter:blur(20px);
  border-radius:50%;
  z-index:-1
}
.external-context {
  margin:10px 0 0 24%;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:9px;
  line-height:1.5;
  color:var(--muted);
  position:relative;
  z-index:2
}
.external-context strong {
  font-size:10px;
  color:var(--ink)
}
.external-context>span:last-child {
  border-left:1px solid #01017c20;
  padding-left:8px
}
.external-line {
  height:24px;
  width:2px;
  background:var(--brand);
  opacity:.45
}
.path-caption {
  display:flex;
  align-items:flex-start;
  gap:8px;
  position:relative;
  z-index:3;
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
  margin:6px 6px 0;
  max-width:40ch
}
.path-caption strong {
  font-weight:550
}
.caption-symbol {
  font-size:19px;
  line-height:1;
  color:var(--brand-deep)
}
.function-panel {
  background:linear-gradient(140deg,#08088a,var(--brand-deep) 65%);
  color:#fff;
  margin:18px 18px 18px 0;
  border-radius:18px;
  padding:24px;
  position:relative;
  isolation:isolate;
  min-height:560px;
  display:flex;
  flex-direction:column
}
.function-panel::before {
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:90%;
  height:42%;
  border-radius:50%;
  background:radial-gradient(ellipse,#22a9f826,transparent 65%);
  z-index:-1;
  pointer-events:none
}
.panel-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.panel-top>span:first-child {
  font-size:24px;
  font-weight:350;
  letter-spacing:-.04em
}
.panel-top>span:first-child>span {
  font-size:12px;
  color:#c4d6f6;
  margin-left:3px
}
.selection-status {
  font-size:8px;
  font-weight:600;
  letter-spacing:.1em;
  display:flex;
  align-items:center;
  gap:5px;
  color:#d0e9ff
}
.selection-status::before {
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--brand)
}
.cell-vignette {
  height:118px;
  display:grid;
  place-items:center;
  margin:10px 0 5px
}
.cell-vignette svg {
  height:104px;
  width:190px;
  filter:drop-shadow(0 0 11px #22a9f850)
}
.panel-category {
  font-size:8px;
  letter-spacing:.14em;
  color:#91d5ff;
  font-weight:650;
  margin:7px 0 9px
}
.function-panel h3 {
  font-size:29px;
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:570;
  margin:0 0 24px;
  max-width:14ch;
  min-height:63px
}
.function-label {
  font-size:8px;
  letter-spacing:.12em;
  font-weight:650;
  color:#a2d3f6;
  margin:0 0 8px
}
.layer-function {
  font-size:15px;
  font-weight:450;
  line-height:1.6;
  margin:0 0 18px;
  min-height:96px;
  max-width:36ch
}
.structure-note {
  display:flex;
  gap:9px;
  border-top:1px solid #ffffff23;
  padding-top:15px;
  margin-bottom:22px
}
.structure-note>span {
  color:#7fceff;
  font-size:17px;
  line-height:1.3
}
.structure-note p {
  font-size:11px;
  line-height:1.7;
  color:#d2def8;
  margin:0;
  max-width:40ch;
  min-height:57px
}
.panel-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto
}
.panel-actions button {
  color:#fff;
  font-size:10px;
  font-weight:550;
  border:0;
  background:none;
  padding:9px 0;
  display:flex;
  align-items:center;
  gap:6px
}
.panel-actions button:first-child {
  border:1px solid #ffffff46;
  border-radius:8px;
  padding:9px 11px;
  transition:background .2s
}
.panel-actions button:first-child[aria-pressed=true] {
  background:#22a9f840;
  border-color:#87d4ff
}
.panel-actions svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.3
}
.panel-actions button:last-child {
  color:#d3eaff
}
.panel-actions button:last-child span {
  font-size:16px
}
.keyboard-note {
  font-size:8px;
  line-height:1.6;
  color:#a5b9eb;
  margin:13px 0 0
}
.understanding {
  border-top:1px solid var(--line);
  margin:0 24px;
  padding:18px 0 12px;
  display:flex;
  align-items:center;
  gap:15px
}
.understanding-icon {
  width:45px;
  height:45px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:31px;
  letter-spacing:-.18em;
  color:var(--brand);
  flex:none
}
.understanding-icon>span {
  color:var(--brand-deep);
  margin-left:4px
}
.understanding p {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
  max-width:77ch
}
.understanding strong {
  color:var(--brand-deep);
  font-size:13px;
  font-weight:650
}
.scale-note {
  font-size:9px;
  line-height:1.6;
  color:var(--muted);
  margin:0 25px 18px;
  max-width:105ch
}
.text-version {
  border-bottom:1px solid var(--line);
  margin:14px 0 0
}
.text-version>summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 3px;
  font-size:12px;
  font-weight:600;
  color:var(--brand-deep)
}
.text-version>summary::-webkit-details-marker {
  display:none
}
.text-version>summary>span:last-child {
  font-weight:350;
  font-size:20px;
  color:var(--brand)
}
.text-version[open]>summary>span:last-child {
  transform:rotate(45deg)
}
.text-intro {
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 20px
}
#layer-data {
  padding:0 0 0 28px;
  margin:0 0 20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px 35px
}
#layer-data>* {
  min-width:0
}
#layer-data li::marker {
  color:var(--brand);
  font-size:11px
}
#layer-data h3 {
  font-size:13px;
  color:var(--brand-deep);
  margin:0 0 7px
}
#layer-data p {
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 7px
}
#layer-data .structure {
  font-size:11px
}
.atlas-footer {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:baseline;
  padding:15px 0 0;
  color:var(--muted);
  font-size:9px;
  line-height:1.7
}
.atlas-footer p {
  margin:0
}
.atlas-footer>span {
  font-size:8px;
  font-weight:650;
  letter-spacing:.12em;
  white-space:nowrap
}
.atlas-footer a {
  text-underline-offset:3px
}
.js-control {
  display:none
}
.js .js-control {
  display:flex
}
.js .layer-selectors {
  display:block
}
.sr-only {
  overflow:hidden;
  clip-path:inset(50%);
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  border:0;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.noscript-note {
  margin:15px 24px;
  font-size:13px;
  line-height:1.6
}
.light-path,.signal-path {
  opacity:0;
  pointer-events:none;
  transition:opacity .25s
}
.light-path path {
  fill:none;
  stroke:var(--brand);
  stroke-width:5;
  filter:url(#cyan-glow)
}
.light-path circle {
  fill:#fff;
  stroke:var(--brand);
  stroke-width:3
}
.signal-path path {
  fill:none;
  stroke:var(--brand-deep);
  stroke-width:5;
  stroke-dasharray:9 7
}
.signal-path circle {
  fill:#fff;
  stroke:var(--brand-deep);
  stroke-width:3
}
.mode-light .light-path,.mode-signal .signal-path {
  opacity:1
}
.mode-light .zone,.mode-signal .zone {
  stroke:transparent;
  fill:transparent;
  filter:none
}
.is-isolated .specimen-model>img {
  filter:grayscale(.8);
  opacity:.18
}
.isolation-image {
  position:absolute;
  inset:29px 0 0;
  background:url('/embeds/retina-camada-por-camada/retina-camadas-3d.avif') center/100% 100% no-repeat;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  z-index:2
}
.is-isolated .isolation-image {
  opacity:1
}
.is-isolated .zone.is-active {
  fill:#22a9f814
}
.function-panel.content-change .cell-vignette {
  animation:cell-reveal .3s ease-out
}
@keyframes cell-reveal {
  from {
    opacity:.3;
    transform:translateY(4px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(min-width:1000px) {
  .specimen {
    min-height:590px
  }
  .specimen-model {
    width:70%;
    margin-left:25%
  }
  .layer-selectors {
    bottom:57px
  }
  .function-panel {
    padding:26px;
    min-height:610px
  }
  .cell-vignette {
    height:140px
  }
  .cell-vignette svg {
    height:120px;
    width:220px
  }
  .function-panel h3 {
    font-size:32px
  }
  .layer-function {
    font-size:16px;
    min-height:105px
  }
  .structure-note p {
    font-size:12px;
    min-height:63px
  }
}
@media(max-width:720px) {
  .atlas {
    padding:18px 14px 16px
  }
  .masthead {
    margin-bottom:22px
  }
  .edition {
    font-size:8px;
    gap:7px
  }
  .masthead img {
    width:95px;
    height:28px
  }
  .introduction {
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    margin-bottom:25px
  }
  .intro-copy h1 {
    font-size:36px;
    margin-bottom:12px;
    letter-spacing:-.055em
  }
  .intro-copy>p:last-child {
    font-size:13px;
    max-width:40ch
  }
  .context-art {
    border-radius:14px
  }
  .context-art img {
    border-radius:14px
  }
  .context-art figcaption {
    bottom:9px;
    left:10px;
    font-size:8px
  }
  .eyebrow {
    font-size:8px
  }
  .explorer {
    border-radius:19px
  }
  .explorer-heading {
    display:block;
    padding:20px 17px 15px
  }
  .explorer-heading h2 {
    font-size:22px
  }
  .instructions {
    text-align:left;
    font-size:10px;
    margin-top:10px
  }
  .instructions br {
    display:none
  }
  .instructions>span:last-child {
    font-size:9px;
    display:block
  }
  .desktop-hint {
    display:none
  }
  .workspace {
    grid-template-columns:minmax(0,1fr)
  }
  .visual-column {
    padding:15px 10px 14px
  }
  .view-controls {
    margin-bottom:14px
  }
  .view-control {
    font-size:10px;
    padding:7px 13px
  }
  .specimen {
    min-height:502px;
    max-width:410px;
    margin:auto
  }
  .specimen-model {
    width:77%;
    margin-left:20%;
    padding-top:37px
  }
  .anatomy-overlay {
    top:37px;
    height:calc(100% - 37px)
  }
  .isolation-image {
    inset:37px 0 0
  }
  .edge-label {
    left:22%;
    font-size:7px;
    top:2px
  }
  .edge-label small {
    font-size:7px
  }
  .layer-selectors {
    top:46px;
    bottom:30px;
    width:25%;
    left:1px
  }
  .layer-selector {
    gap:5px;
    height:44px
  }
  .marker-number {
    width:29px;
    height:29px;
    font-size:9px
  }
  .marker-code {
    font-size:8px
  }
  .layer-selector::after {
    left:64px
  }
  .external-context {
    margin:12px 0 0 20%;
    font-size:8px;
    gap:6px
  }
  .external-context strong {
    font-size:9px
  }
  .external-context>span:last-child {
    padding-left:6px
  }
  .specimen-glow {
    bottom:58px
  }
  .path-caption {
    font-size:10px;
    max-width:none;
    margin:4px 9px 0
  }
  .function-panel {
    margin:0 12px 16px;
    padding:21px;
    border-radius:15px;
    min-height:450px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px;
    column-gap:7px;
    align-items:start
  }
  .function-panel>* {
    min-width:0
  }
  .panel-top {
    grid-column:1/-1
  }
  .cell-vignette {
    grid-column:2;
    grid-row:2/4;
    margin:12px -9px 0 0;
    height:90px
  }
  .cell-vignette svg {
    height:88px;
    width:112px
  }
  .panel-category {
    grid-column:1;
    grid-row:2;
    margin:18px 0 9px;
    font-size:7px;
    line-height:1.6;
    min-height:12px
  }
  .function-panel h3 {
    grid-column:1;
    grid-row:3;
    font-size:26px;
    min-height:70px;
    margin-bottom:21px;
    max-width:13ch;
    align-self:start
  }
  .function-label,.layer-function,.structure-note,.panel-actions,.keyboard-note {
    grid-column:1/-1
  }
  .layer-function {
    font-size:14px;
    min-height:69px;
    margin-bottom:18px
  }
  .structure-note {
    margin-bottom:17px;
    padding-top:13px
  }
  .structure-note p {
    font-size:11px;
    min-height:42px
  }
  .panel-actions {
    margin-top:0
  }
  .keyboard-note {
    font-size:8px;
    margin-top:12px
  }
  .understanding {
    margin:0 17px;
    padding:17px 0 12px;
    gap:8px;
    align-items:flex-start
  }
  .understanding-icon {
    width:31px;
    font-size:25px;
    height:30px
  }
  .understanding p {
    font-size:10px;
    line-height:1.7
  }
  .understanding strong {
    font-size:12px;
    line-height:1.5;
    display:inline-block;
    margin-bottom:5px
  }
  .scale-note {
    margin:0 19px 18px;
    font-size:8px;
    line-height:1.7
  }
  .text-version {
    margin-top:10px
  }
  .text-version>summary {
    font-size:11px;
    padding:15px 3px
  }
  #layer-data {
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    padding-left:23px
  }
  .text-intro {
    font-size:11px
  }
  .atlas-footer {
    display:block;
    padding-top:13px;
    font-size:8px
  }
  .atlas-footer>span {
    display:block;
    margin-top:8px;
    font-size:7px
  }
}
@media(max-width:360px) {
  .intro-copy h1 {
    font-size:32px
  }
  .specimen {
    min-height:470px
  }
  .layer-selectors {
    bottom:40px
  }
  .function-panel {
    padding:17px
  }
  .function-panel h3 {
    font-size:23px
  }
  .marker-code {
    font-size:7px
  }
  .marker-number {
    width:26px;
    height:26px
  }
  .layer-selector {
    gap:3px
  }
  .layer-selector::after {
    left:57px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.connector-overlay {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:4;
  overflow:visible
}
.layer-connector {
  fill:none;
  stroke:#01017c26;
  stroke-width:.8;
  transition:stroke .2s
}
.layer-connector.is-active {
  stroke:#22a9f8;
  stroke-width:1.2;
  filter:drop-shadow(0 0 3px #22a9f866)
}
.layer-selector::after {
  display:none
}
.touch-inspector {
  display:none
}
.panel-actions button:disabled {
  opacity:.45;
  cursor:default
}
@media(max-width:720px) {
  .touch-inspector:not([hidden]) {
    display:block;
    position:fixed;
    z-index:50;
    bottom:12px;
    left:12px;
    right:12px;
    background:#fff;
    border:1px solid #b9e5ff;
    border-radius:16px;
    padding:13px 16px;
    box-shadow:0 12px 60px #01017c30,0 0 0 4px #22a9f80d;
    color:var(--ink);
    max-width:430px;
    margin:auto
  }
  .touch-inspector-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:3px
  }
  .touch-inspector-heading>span {
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--muted)
  }
  .touch-inspector-heading button {
    background:none;
    border:0;
    font-size:22px;
    line-height:1;
    padding:0;
    width:32px;
    height:32px;
    color:var(--brand-deep)
  }
  .touch-inspector h3 {
    margin:0 0 8px;
    max-width:28ch;
    color:var(--brand-deep);
    font-size:19px;
    font-weight:650;
    letter-spacing:-.035em;
    line-height:1.15
  }
  .touch-inspector>p {
    font-size:12px;
    line-height:1.55;
    margin:0;
    color:var(--muted)
  }
  .touch-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid var(--line);
    margin-top:11px;
    padding-top:7px;
    gap:10px
  }
  .touch-actions button {
    border:0;
    border-radius:8px;
    background:var(--soft);
    color:var(--brand-deep);
    width:40px;
    height:33px;
    font-size:17px
  }
  .touch-actions button:disabled {
    opacity:.3
  }
  .touch-actions>span {
    font-size:9px;
    color:var(--muted)
  }
  .layer-selector {
    min-width:44px;
    min-height:44px
  }
}
.mobile-hint {
  display: none;
}
@media (max-width:720px) {
  .mobile-hint {
    display: inline;
  }
}