/* The atlas lives in the dark;
   warm ink is reserved for controls and milestones. */
:root {
  --surface:#000000;
  --paper:#000000;
  --edge:#333333;
  --line:#333333;
  --text:#e7e7e7;
  --ink:#e7e7e7;
  --muted:#969696;
  --quiet:#8c8d82;
  --accent:#c8c8c8;
  --atlas-border:#ffffff22;
  --atlas-serif:'CELE WenHei',Georgia,serif
}

/* Compact map furniture leaves the sky room to breathe. */
.map-context {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  background:#000000;
  gap:18px;
  padding:6px 34px 10px;
  border-bottom:1px solid #ffffff18
}
.map-context .map-caption {
  padding:0;
  flex:1;
  min-width:0
}
.map-context .map-caption #map-title {
  font-size:21px
}
.map-context .specialization-menu {
  padding:0;
  border:0;
  position:static;
  flex-shrink:0
}
.map-context .specialization-menu[open] {
  padding-bottom:0
}
.map-context .specialization-menu .branch-cards {
  position:absolute;
  z-index:12;
  left:34px;
  right:34px;
  top:calc(100% - 1px);
  padding:16px;
  border:1px solid #ffffff30;
  border-radius:0 0 8px 8px;
  background:#080808f5;
  box-shadow:0 15px 35px #0009;
  max-height:60dvh;
  overflow:auto;
  overscroll-behavior:contain
}
#path-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,45%);
  align-items:center;
  background:#000000;
  padding:9px 34px 12px;
  gap:20px
}
#path-card .path-summary {
  padding:0;
  min-height:32px;
  flex-wrap:wrap;
  gap:8px
}
#path-card .journey-progress {
  padding:0
}
.map-controls #expand-map {
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  gap:8px;
  padding:0 13px
}
.map-controls #expand-map svg {
  width:20px;
  height:20px
}
.map-controls #expand-map span {
  width:auto;
  font-size:10px
}
body.tree-expanded {
  overflow:hidden
}
.map-panel.map-expanded {
  position:fixed;
  inset:0;
  z-index:30;
  width:100%;
  height:100dvh;
  border-radius:0;
  display:flex;
  flex-direction:column;
  padding-top:env(safe-area-inset-top)
}
.map-expanded .map-viewport {
  flex:1;
  height:auto;
  min-height:0;
  max-height:none
}
.map-expanded .map-legend {
  display:none
}
.map-expanded #expand-map[aria-pressed=true] {
  color:#c8c8c8;
  background:#252525
}
body.tree-expanded .connection-inspector {
  position:fixed;
  z-index:31
}

@media(min-width:761px) {
  .app-shell>.rail { height:76px }
  .map-panel>.map-toolbar { padding:8px 34px 6px }
  .map-panel>.map-legend { padding:9px 34px }
}
@media(max-width:1050px) {
  .map-context .map-caption #map-mode { display:none }
  #path-card { grid-template-columns:1fr;gap:7px }
}
@media(max-width:760px) {
  .map-context { flex-wrap:wrap;gap:8px;padding:8px 16px 10px }
  .map-context .map-caption { flex:1 1 100%;flex-wrap:nowrap }
  .map-context .map-caption #map-title { font-size:18px }
  .map-context .specialization-menu { flex:1 }
  .map-context .specialization-menu .branch-cards { left:16px;right:16px }
  #path-card { padding:9px 16px 12px }
  #path-card .path-identity { flex-wrap:wrap;gap:5px }
  .map-controls #expand-map { padding:0 10px }
  .map-controls #expand-map span { display:none }
  .map-expanded .map-toolbar { padding-top:5px;gap:4px }
  .map-expanded .map-context { flex-wrap:nowrap;padding:4px 14px 7px;gap:8px }
  .map-expanded .map-context .map-caption { flex:0 0 auto }
  .map-expanded .map-context #map-title { display:none }
  .map-expanded .specialization-menu summary { min-height:40px }
  .map-expanded #path-card { padding:6px 14px 9px;gap:5px }
  .map-expanded #path-card .path-scope { display:none }
  .map-expanded .map-controls { bottom:calc(14px + env(safe-area-inset-bottom)) }
}

body {
  background:#000000;
  color:#e7e7e7
}
button {
  border-radius:5px
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid #c8c8c8;
  outline-offset:4px
}

.rail {
  height:88px;
  padding:0 34px;
  border-color:#bebebe1a;
  background:#000000;
  gap:25px
}
.brand-title {
  color:#f0f0f0;
  font-size:30px;
  letter-spacing:1px
}
.brand-prefix {
  color:#a0a0a0;
  font-size:12px;
  letter-spacing:1.5px
}
.brand-mark {
  color:#acacac;
  width:28px
}
.rail nav {
  gap:15px;
  margin-left:30px
}
.nav-item {
  color:#959595;
  font-size:13px
}
.nav-item.active {
  color:#eeeeee
}
.nav-item.active:after {
  height:1px;
  background:#bcaf83;
  left:10px;
  right:10px;
  bottom:19px
}
.nav-item.active .nav-symbol {
  color:#a8a8a8
}
.player {
  margin-left:auto
}
.player strong {
  color:#8d8d8d
}
.player span {
  color:#c1c1c1
}

.account-panel {
  margin:0;
  padding-left:22px;
  border-color:#c1c1c124;
  max-width:220px;
  position:relative
}
.account-identity strong {
  font-size:11px;
  color:#acacac;
  max-width:170px
}
.account-status {
  font-size:10px;
  color:#888;
  margin:5px 0
}
.account-identity {
  gap:6px
}
.account-actions {
  gap:5px
}
.account-panel button {
  padding:8px 13px;
  min-height:34px;
  background:#111111;
  border-color:#9c9c9c40;
  color:#d5d5d5;
  border-radius:4px;
  font-size:11px
}
.account-panel button:hover {
  background:#222222
}
.account-message {
  position:absolute;
  right:0;
  top:100%;
  width:260px;
  padding:14px;
  background:#111111;
  border:1px solid #807e5a44;
  z-index:4
}
.account-light.synced {
  background:#a2af87;
  box-shadow:0 0 7px #abb58030
}

.map-toolbar {
  background:#000000;
  border:0;
  padding:17px 34px 4px;
  gap:20px
}
.year-tabs {
  gap:3px
}
.year-tabs button {
  min-height:44px;
  padding:10px 17px;
  border:0;
  border-radius:4px;
  font-size:13px;
  color:#888;
  background:transparent
}
.year-tabs button.active {
  color:#e0e0e0;
  background:#ffffff0d;
  box-shadow:none
}
.year-tabs button:hover {
  background:#161616
}
.map-tools {
  gap:10px
}
.explore-button {
  background:transparent;
  border-color:#ffffff30;
  color:#b5b5b5;
  font-size:11px;
  min-height:42px;
  padding:10px 13px;
  border-radius:4px
}
.explore-button:hover,.explore-button[aria-pressed=true] {
  background:#1a1a1a;
  color:#bdbdbd;
  border-color:#97979766
}
.explore-button svg {
  color:#a0a0a0;
  width:17px
}
.reset-progress-button {
  background:transparent;
  border:0;
  color:#868686;
  font-size:10px;
  min-height:42px;
  padding:8px 10px
}
.reset-progress-button:hover {
  background:#261c1766;
  color:#b5b5b5
}
.reset-progress-button svg {
  width:15px
}

.map-caption {
  padding:20px 34px 15px;
  background:#000000;
  gap:12px
}
.map-caption #map-title {
  font:800 24px/1.25 var(--atlas-serif);
  color:#ededed;
  letter-spacing:0
}
.map-caption #map-mode {
  font-size:8px;
  font-weight:800;
  color:#848484;
  letter-spacing:1.1px
}
.text-button {
  border-color:#a2a2a233;
  color:#a0a0a0;
  min-width:36px;
  min-height:36px
}

.specialization-menu {
  position:relative;
  border-bottom:1px solid #ffffff18;
  background:#000000;
  padding:0 34px 16px
}
.specialization-menu summary {
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  cursor:pointer;
  color:#aaa;
  font-size:12px;
  padding:8px 15px;
  border:1px solid #ffffff30;
  border-radius:5px;
  background:#111111
}
.specialization-menu summary::-webkit-details-marker {
  display:none
}
.specialization-menu summary::after {
  content:'⌄';
  font:20px/1 Georgia;
  transition:transform .2s;
  color:#939393
}
.specialization-menu[open] summary::after {
  transform:rotate(180deg)
}
#specialization-selection {
  font-size:10px;
  color:#aaa
}
.specialization-menu .branch-cards {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  padding:18px 0 0;
  background:transparent
}
.specialization-menu:not([open]) .branch-cards {
  display:none
}
.branch-card {
  border:1px solid #c3b79424;
  border-radius:7px;
  padding:15px 12px;
  gap:8px;
  background:#0c0c0c;
  flex-wrap:wrap;
  min-height:68px;
  box-shadow:none
}
.branch-card:hover {
  background:#171717;
  border-color:color-mix(in srgb,var(--sky-accent) 45%,#a69a79)
}
.branch-card.viewing {
  background:#1c1c1c;
  border-color:var(--sky-accent)
}
.branch-card strong,.branch-card.current strong {
  color:#d5d5d5;
  font-size:16px
}
.branch-card .branch-name {
  color:#969696;
  font-size:11px
}
.branch-card small {
  font-size:9px;
  color:#808080;
  margin-left:auto
}
.branch-card .branch-symbol {
  color:var(--sky-accent)
}
.branch-check {
  color:#a2a2a2;
  border-color:#88888849;
  width:17px;
  height:17px
}
.specialization-menu[open] {
  padding-bottom:22px
}

.path-summary {
  padding:13px 34px;
  background:#000000;
  border:0;
  gap:15px
}
.path-dot {
  width:5px;
  height:5px;
  background:#b8b185;
  box-shadow:none
}
.path-identity strong {
  font-size:11px;
  color:#bcbcbc
}
.path-scope {
  font-size:10px;
  color:#888
}
.path-metrics {
  font-size:10px;
  color:#888;
  gap:15px
}
.path-metrics b {
  color:#adadad
}
.path-link {
  color:#a0a0a0;
  font-size:11px
}
.journey-progress {
  background:#000000;
  padding:0 34px 16px;
  border:0
}
.journey-label {
  font-size:10px;
  color:#999
}
.journey-label strong {
  color:#cccccc;
  font-size:11px
}
.journey-label strong span {
  color:#7b7b7b;
  font-size:10px
}
.journey-label>b {
  color:#a7a7a7;
  font-size:11px
}
.journey-track {
  height:7px;
  border:0;
  border-radius:2px;
  background:#222222
}
.journey-fill {
  background:linear-gradient(90deg,#555555,#aaaaaa 75%,#eeeeee);
  box-shadow:0 0 8px #b3b25d1f
}
.journey-track:after {
  display:none
}
.journey-fill>span {
  color:#c7c7c7;
  font-size:11px
}

.map-viewport {
  height:max(72dvh,calc(100dvh - 250px));
  min-height:520px;
  background:#000000;
  border-top:1px solid #ffffff18;
  touch-action:none;
  overscroll-behavior:contain
}
.sky-backdrop {
  background:linear-gradient(180deg,#000000de,#000000d4),url('assets/galaxy-v1.png') center/cover;
  filter:saturate(.55)
}
.map-viewport:before {
  opacity:.16
}
.map-viewport:after {
  background:radial-gradient(ellipse at center,transparent 35%,#000000b3 100%)
}
.map-controls {
  background:#080808ee;
  border:1px solid #ffffff33;
  border-radius:7px;
  right:24px;
  bottom:24px;
  box-shadow:0 5px 20px #0009
}
.map-controls button {
  color:#bbb;
  min-width:44px;
  min-height:44px;
  touch-action:manipulation
}
.map-controls button:hover {
  background:#252525
}
.map-controls button:last-child {
  border-color:#87878740
}
.map-controls span {
  color:#999;
  font-size:10px
}
.pan-hint {
  background:#000000aa;
  color:#888;
  font-size:10px;
  border:0;
  bottom:28px
}
.map-legend {
  background:#000000;
  color:#888;
  border-color:#ffffff22;
  font-size:9px;
  gap:21px;
  padding:13px 34px
}
.cluster-year {
  color:#c9c9c9
}
.cluster-term {
  color:#878787;
  border-color:#a9a9a930
}
.term-label strong {
  font-size:29px
}
.term-label:after {
  opacity:.5
}
.course-node .node-copy {
  background:#0000006b;
  border-color:color-mix(in srgb,var(--sky-accent) 35%,transparent);
  border-radius:4px
}
/* Light comes from progress, while the course codes stay legible. */
.course-node .skill-star {
  opacity:.38;
  filter:none;
  transition:opacity .35s ease,filter .35s ease
}
.course-node.locked .skill-star { opacity:.24;filter:none }
.course-node.preview .skill-star { opacity:.32;filter:none }
.course-node.active-course .skill-star,.course-node.completed .skill-star {
  opacity:1;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--sky-accent) 70%,transparent))
    drop-shadow(0 0 25px color-mix(in srgb,var(--sky-accent) 42%,transparent))
}
.course-node.active-course .star-aura,.course-node.completed .star-aura { opacity:.65 }
.course-node.active-course .star-center,.course-node.completed .star-center { opacity:1 }
.course-node.active-course .node-code,.course-node.completed .node-code {
  text-shadow:0 0 9px color-mix(in srgb,var(--sky-accent) 45%,transparent)
}
.course-node:hover .skill-star,.course-node:focus-visible .skill-star {
  opacity:.85;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--sky-accent) 45%,transparent))
}
.course-node.active-course:hover .skill-star,.course-node.completed:hover .skill-star {
  opacity:1;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--sky-accent) 80%,transparent))
    drop-shadow(0 0 30px color-mix(in srgb,var(--sky-accent) 50%,transparent))
}
.sky-outline .sky-trails,.sky-outline .catalog-stars {
  opacity:.2;
  filter:none;
  transition:opacity .4s ease,filter .4s ease
}
.sky-outline.constellation-lit .sky-trails {
  opacity:var(--constellation-brightness,.65);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sky-accent) 55%,transparent))
}
.sky-outline.constellation-lit .catalog-stars {
  opacity:var(--constellation-brightness,.65);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--sky-accent) 65%,transparent))
}
@media(prefers-reduced-motion:reduce) {
  .course-node .skill-star,.sky-outline .sky-trails,.sky-outline .catalog-stars { transition:none }
}
.node-title {
  background:#080808f5;
  border-color:#8e8e8e80;
  color:#d5d5d5
}
.course-node:hover .node-title,.course-node:focus-visible .node-title {
  color:#e0e0e0
}
.graph-lines .connection-line {
  opacity:.26
}
.graph-lines .connection-line.path-selected,.graph-lines .connection-line.path-traced {
  opacity:.95
}
.graph-lines .connection-hit {
  stroke-width:20px
}

.primary,.dossier-academic {
  background:#d6d6d6;
  border-color:#8e8e8e99;
  color:#080808;
  border-radius:5px
}
.primary:hover,.dossier-academic:hover {
  background:#ffffff
}
.secondary {
  background:transparent;
  border-color:#8888884d;
  color:#b1b1b1;
  border-radius:5px
}
.secondary:hover {
  background:#222222
}
.paper-card,.domain,.gate-illustration,.connection-inspector {
  background:#000000e6;
  border-color:#88888830;
  border-radius:9px;
  box-shadow:none
}
.paper-card h2,.paper-card h3,.domain h3,.gate-illustration h2 {
  color:#cacaca
}
.paper-card p,.domain p {
  color:#9f9f9f
}
.paper-card .card-note,.card-note {
  color:#828282
}
.eyebrow,.card-eyebrow,.section-heading>span {
  color:#8d8d8d
}
#journal-page h1,#gate-page h1 {
  color:#d7d7d7
}
#journal-page h1 em,#gate-page h1 em {
  color:#a8a8a8
}
.path-state {
  background:#18181866;
  color:#adadad;
  border-color:#71717144
}
.year-select,textarea {
  color:#c6c6c6;
  background:#121212;
  border-color:#8888884d
}
.progress-track {
  background:#222222
}
.progress-track>div {
  background:#cccccc
}
.journal-records,.section-heading,.records-table td,.records-table th {
  border-color:#88888833
}
.records-table {
  color:#b4b4b4
}
.records-table th {
  color:#868686
}
.journal-empty {
  background:#101010;
  color:#9d9d9d;
  border-color:#89898933
}
.domains .domain small {
  color:#8a8a8a
}

.course-dossier {
  background:linear-gradient(110deg,#000000cf,#000000ee 65%),url('assets/galaxy-v1.png') center/cover;
  border-color:#9e9e9e40;
  border-radius:13px;
  box-shadow:0 0 0 3px #c3c39308,0 35px 100px #000c;
  --lavender:#a8b88b;
  --gold:#cdbd87
}
.dossier-identity {
  background:radial-gradient(ellipse at 50% 40%,#ffffff08,transparent 65%)
}
.dossier-heading h2,.dossier-section-heading h3 {
  color:#dedede
}
.dossier-path,.dossier-sky>span,.dossier-heading .course-meta {
  color:#a2a2a2
}
.dossier-close {
  background:#111111bb;
  border-color:#ababab4d;
  color:#cecece
}
.dossier-tab {
  color:#989898
}
.dossier-diamond {
  background:#141414dd;
  border-color:#afafaf66;
  box-shadow:none
}
.dossier-tab[aria-selected=true] .dossier-diamond {
  background:#333333;
  box-shadow:0 0 0 3px #bbcd9a12,0 0 18px #b7ce711a
}
.dossier-thread {
  background:linear-gradient(transparent,#888888 20%,#888888 80%,transparent);
  box-shadow:none
}
.dossier-tab:hover .dossier-diamond {
  background:#252525
}
.dossier-placeholder {
  background:#11111188;
  border-color:#98989840;
  border-radius:9px
}
.dossier-placeholder h4,.dossier-connections h4 {
  color:#ddd
}
.dossier-placeholder p,.dossier-reason,.dossier-connections>p {
  color:#aaa
}
.dossier-prereq {
  background:#11111188;
  border-color:#7373733d;
  border-radius:5px
}
.dossier-prereq button,.dossier-relation button strong {
  color:#ddd
}
.dossier-key,.dossier-mastery-scope {
  color:#999999
}
.dossier-readonly {
  color:#bbb;
  background:#16161688;
  border-color:#85858566
}
.dossier-footer,.dossier-heading,.dossier-section-heading {
  border-color:#ffffff22
}
.dossier-scroll {
  scrollbar-color:#4f4f4f transparent
}

#account-dialog,#path-dialog,#reset-dialog,#help-dialog {
  background:#000000f2;
  border-color:#ffffff33;
  color:#e3e3e3;
  border-radius:12px;
  box-shadow:0 25px 90px #000b
}
#account-dialog p {
  color:#aaa
}
.account-dialog-close {
  color:#ccc
}
.account-dialog-error {
  color:#b1b1b1!important
}
.connection-eyebrow,.connection-type {
  color:#a3a3a3
}
.connection-inspector h2 {
  color:#ddd
}
.connection-course {
  background:#111111;
  border-color:#74747440;
  color:#ccc
}
#toast {
  background:#151515;
  border-color:#7c7c7c66;
  color:#ccc;
  border-radius:6px;
  font-size:12px;
  max-width:calc(100vw - 32px)
}

@media(max-width:1200px) {
  .rail {
  padding:15px 24px;
  gap:18px;
  height:auto;
  min-height:88px;
  flex-wrap:wrap
}
.rail nav {
  margin-left:0
}
.player {
  display:block;
  margin-left:auto
}
.companion-button>span:last-child {
  display:none
}
.account-panel {
  margin-left:0
}
.map-toolbar,.map-caption {
  padding-left:24px;
  padding-right:24px
}
.specialization-menu,.path-summary,.journey-progress {
  padding-left:24px;
  padding-right:24px
}
.specialization-menu .branch-cards {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.branch-card .branch-name {
  display:inline
}

}

@media(max-width:760px) {
  .rail {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:10px;
  padding:12px 16px
}
.brand {
  font-size:20px;
  gap:9px
}
.brand-title {
  font-size:25px
}
.brand-mark {
  width:25px
}
.rail nav {
  grid-column:1/-1;
  grid-row:2;
  display:flex;
  width:100%;
  height:45px;
  justify-content:space-between;
  gap:6px
}
.nav-item {
  padding:8px 10px;
  min-height:44px;
  flex:1;
  font-size:11px;
  justify-content:center
}
.nav-item.active:after {
  bottom:1px
}
.nav-symbol svg {
  width:17px;
  height:17px
}
.account-panel {
  border:0;
  padding:0;
  margin:0;
  width:auto;
  grid-column:2;
  grid-row:1;
  display:block;
  max-width:96px
}
.player {
  display:block;
  grid-column:2;
  grid-row:1;
  margin:0
}
.account-panel {
  grid-column:3
}
.account-login-provider,.account-setup-state {
  display:none
}
.account-panel .account-identity {
  display:none
}
.account-panel .account-status {
  font-size:8px;
  margin:4px 0;
  text-align:right
}
.account-panel button {
  min-height:44px;
  max-width:96px;
  font-size:10px;
  padding:10px
}
.account-panel .account-message {
  right:0;
  width:240px
}
.map-toolbar {
  padding:12px 14px 5px;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  align-items:center
}
.year-tabs {
  width:100%;
  justify-content:space-between;
  gap:4px
}
.year-tabs button {
  font-size:12px;
  padding:10px 13px;
  flex:1;
  min-height:44px
}
.map-tools {
  width:100%;
  justify-content:space-between;
  gap:8px
}
.explore-button {
  font-size:10px;
  min-height:44px;
  flex:1;
  justify-content:center
}
.reset-progress-button {
  font-size:9px;
  min-height:44px;
  flex:none;
  padding:8px
}
.map-caption {
  padding:15px 16px 8px;
  flex-wrap:wrap
}
.map-caption #map-title {
  font-size:19px;
  max-width:none;
  flex:1
}
.map-caption #map-mode {
  max-width:none;
  font-size:7px;
  width:100%;
  order:3;
  text-align:left;
  line-height:1.6
}
.specialization-menu {
  padding:0 16px 10px
}
.specialization-menu summary {
  display:flex;
  width:100%;
  justify-content:space-between;
  font-size:11px;
  padding:10px 12px
}
.specialization-menu .branch-cards {
  grid-template-columns:1fr;
  gap:7px
}
.branch-card {
  min-height:54px;
  padding:10px 13px;
  flex-direction:row;
  justify-content:flex-start
}
.branch-symbol {
  display:inline-flex;
  width:22px;
  height:22px
}
.branch-card .branch-name {
  display:inline;
  font-size:11px
}
.branch-card small {
  display:inline;
  font-size:9px
}
.branch-card strong {
  font-size:15px
}
.path-summary {
  padding:10px 16px;
  gap:9px
}
.path-identity {
  font-size:10px;
  width:auto
}
.path-identity strong {
  font-size:10px
}
.path-metrics {
  font-size:9px;
  gap:12px
}
.path-metrics b {
  font-size:10px
}
.journey-progress {
  padding:0 16px 13px
}
.path-link {
  font-size:10px;
  min-height:40px
}
.journey-label {
  font-size:10px
}
.map-viewport {
  height:75dvh;
  min-height:440px;
  max-height:none
}
.map-controls {
  position:absolute;
  bottom:18px;
  right:14px
}
.map-controls button {
  width:46px;
  height:46px
}
.map-controls span {
  width:40px
}
.pan-hint {
  left:15px;
  bottom:77px;
  font-size:9px;
  max-width:calc(100% - 30px)
}
.map-legend {
  padding:12px 16px;
  gap:9px 17px;
  font-size:8px;
  flex-wrap:wrap
}
.connection-inspector {
  bottom:12px;
  right:12px;
  width:calc(100vw - 24px);
  max-height:58dvh
}
.connection-course {
  min-height:48px
}
.course-dossier {
  width:calc(100vw - 16px);
  height:94dvh;
  max-height:94dvh;
  border-radius:12px
}
.dossier-close {
  width:44px;
  height:44px;
  right:13px;
  top:13px
}
.dossier-identity {
  padding:24px 68px 12px 20px
}
.dossier-heading h2 {
  font-size:25px;
  line-height:1.18
}
.dossier-heading .course-status {
  position:static;
  display:inline-block;
  max-width:none;
  margin-top:11px;
  font-size:11px
}
.dossier-heading .course-meta {
  font-size:12px;
  gap:12px;
  flex-wrap:wrap
}
.dossier-reading {
  padding:10px 20px 20px
}
.dossier-prereq button {
  min-height:44px;
  font-size:13px
}
.dossier-academic {
  min-height:48px;
  font-size:15px
}
.dossier-scroll {
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch
}
.dossier-tabs {
  padding:12px 15px
}
.dossier-tab {
  width:60px;
  height:60px
}
.dossier-tab-name {
  display:none
}
#account-dialog,#path-dialog,#reset-dialog,#help-dialog {
  padding:30px 22px;
  width:calc(100vw - 28px);
  max-height:90dvh;
  overflow:auto
}
#account-dialog h2 {
  font-size:27px
}
.account-choice button {
  font-size:15px;
  min-height:48px
}
#journal-page,#gate-page {
  padding:25px 16px 35px
}
.records-table {
  display:block;
  max-width:100%;
  overflow-x:auto
}
.paper-card h2 {
  font-size:25px
}
textarea,select,input {
  font-size:16px!important
}
.branch-option {
  min-height:64px
}
.dialog-actions button {
  min-height:48px
}
.brand-name {
  line-height:1.1
}
main {
  padding:0
}

}

@media(prefers-reduced-motion:reduce) {
  .specialization-menu summary::after {
  transition:none
}
.avatar-badge {
  filter:none
}

}