:root {
  color-scheme: light;
  font-family: "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 20px;
  color: #312820;
  background: #ead8be;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: .22em; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
a, button, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid #075471; outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
.skip { position: absolute; top: -100px; left: 16px; z-index: 5; padding: 10px 16px; background: white; }
.skip:focus { top: 12px; }

.topbar {
  position: relative;
  z-index: 1;
  min-height: 70px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px max(22px, calc((100% - 1190px) / 2));
  background: #fbf3e7;
  border-bottom: 1px solid #b99773;
}
.brand, .topbar nav { display: flex; align-items: center; gap: 10px; }
.topbar nav { flex-wrap: wrap; }
.brand { font-size: .95rem; font-weight: 750; text-decoration: none; }
.brand img { border-radius: 50%; object-fit: contain; }
.topbar nav a, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid #a78971;
  border-radius: 7px;
  background: #fff7eb;
  font-size: .82rem;
  text-decoration: none;
}
.construction { display: none; }
.construction:target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 12px max(22px, calc((100% - 1190px) / 2));
  background: #fff7eb;
  border-bottom: 1px solid #b99773;
}
.construction h2 { font-size: 1rem; }

#tabletop { position: relative; min-height: calc(100svh - 70px); isolation: isolate; }
#clay-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; visibility: hidden; }
.table-content { max-width: 1250px; margin: auto; padding: 31px 28px 48px; }
.desk-ribbon {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: calc(100% - 3px);
  margin: 0 0 30px 3px;
  padding: .47em 1.12em .49em;
  transform: rotate(-2deg);
  transform-origin: left center;
  filter: drop-shadow(1px 4px 3px #52321945);
  color: #493522;
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.desk-ribbon::before,
.desk-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.desk-ribbon::before {
  clip-path: polygon(0 9%, 7% 6%, 18% 7%, 31% 2%, 46% 5%, 64% 1%, 78% 4%, 93% 0,
    100% 5%, 98.8% 23%, 99.7% 42%, 98% 63%, 99% 84%, 97.5% 94%, 85% 97%, 69% 96%,
    52% 100%, 36% 96%, 19% 99%, 6% 95%, 0 98%, 1.4% 75%, .4% 54%, 1.7% 32%);
  background:
    repeating-linear-gradient(107deg, #9e70431a 0 1px, transparent 1px 4px),
    linear-gradient(176deg, #fff3d9, #eddbb9);
}
.desk-ribbon::after {
  inset: 12% 4% 13%;
  background:
    repeating-linear-gradient(125deg, #9d684a70 0 1px, transparent 1px 5px) left center / 6px 70% no-repeat,
    repeating-linear-gradient(55deg, #42766a70 0 1px, transparent 1px 5px) right center / 6px 70% no-repeat;
}
.desk-grid { display: grid; grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr); gap: 34px clamp(24px, 4.4vw, 65px); align-items: start; }
.desk-grid > * { min-width: 0; }
.desk-ribbon a { text-decoration: none; }
.desk-ribbon a:hover { text-decoration: underline; }
@media (min-width: 741px) {
  .desk-grid > .coffee-station { grid-area: 2 / 1; }
  .desk-grid > .station-security { grid-area: 1 / 2; }
}

.board-frame { position: relative; padding: 18px 19px 14px; background: #f5e9d6; border-radius: 10px; }
#radar-board { position: absolute; inset: 0; pointer-events: none; }
.radar-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 14px; }
.radar-heading h2 { font-size: 1.17rem; line-height: 1.24; }
.radar-heading a { font-size: .78rem; display: inline-flex; align-items: center; min-height: 38px; }
#news { display: grid; grid-template-columns: 1fr; gap: 10px; }
.note { min-width: 0; --paper: #f6dfa2; }
.note:nth-child(2) { --paper: #d5dfbb; }
.note:nth-child(3) { --paper: #ecd2dd; }
.paper { display: block; padding: 14px; border-radius: 8px; background: var(--paper); text-decoration: none; }
.topic { display: inline-block; font-size: .75rem; font-weight: 740; margin-bottom: 5px; }
.paper h3 { font-size: .94rem; line-height: 1.42; overflow-wrap: anywhere; }
.summary { margin-top: 8px; font-size: .88rem; }
.meta { display: block; margin-top: 7px; font-size: .72rem; color: #514337; overflow-wrap: anywhere; }
.read-link { display: inline-block; margin-top: 7px; font-size: .78rem; font-weight: 740; text-decoration: underline; }
.paper:hover .read-link { text-decoration-thickness: 2px; }
.loading { grid-column: 1 / -1; padding: 12px; font-size: .9rem; }
#scene-status { font-size: .76rem; }

.station { color: #30261e; }
.station { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: start; border-radius: 12px; }
.prop-space { display: none; }
.station-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #a68567;
  border-radius: 9px;
  background: #fcf2df;
}
.station-caption strong { display: block; font-size: 1.13rem; line-height: 1.28; }
.station-caption small { display: block; margin-top: 4px; font-size: .8rem; }
.station-arrow { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #ae947b; border-radius: 50%; font-size: .94rem; }
.station[open] .station-arrow { transform: rotate(45deg); }
.station:hover .station-caption { background: #fff8ec; }
#scene-status { margin-top: 16px; }

.scene-ready:not(.reading) #clay-canvas { visibility: visible; }
.scene-ready:not(.reading) .radar { width: 90%; max-width: calc(100% - 32px); margin-left: 32px; }
.scene-ready:not(.reading) .board-frame { background: transparent; padding-bottom: 96px; }
.scene-ready:not(.reading) #news { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.scene-ready:not(.reading) .note:nth-child(2) { margin-top: 7px; }
.scene-ready:not(.reading) .note:nth-child(3) { margin-top: 3px; }
.scene-ready:not(.reading) .paper { display: flex; flex-direction: column; min-height: 142px; background: transparent; padding: 11px 10px 9px; }
.scene-ready:not(.reading) .paper h3 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.scene-ready:not(.reading) .paper .summary, .scene-ready:not(.reading) .paper .meta { display: none; }
.scene-ready:not(.reading) .read-link { margin-top: auto; padding-top: 5px; }
.scene-ready:not(.reading) .prop-space { display: block; height: clamp(152px, 16vw, 200px); }
.scene-ready:not(.reading) .station-security .prop-space { height: clamp(190px, 20vw, 260px); }
.scene-ready:not(.reading) .station-workflow .prop-space { height: clamp(238px, 25vw, 315px); }
.scene-ready:not(.reading) .station-security { margin-top: 10px; }
.scene-ready:not(.reading) .station { position: relative; }
.scene-ready:not(.reading) .station-caption {
  position: absolute;
  left: var(--label-x, 50%);
  top: var(--label-y, 50%);
  transform: translate(-50%, -50%);
  padding: 0;
  gap: 0;
  background: transparent;
  border: 0;
  white-space: nowrap;
}
.scene-ready:not(.reading) .station-caption strong { font-size: clamp(.72rem, 1.35vw, .94rem); }
.scene-ready:not(.reading) .station-caption small {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.scene-ready:not(.reading) .station-arrow { display: none; }
.scene-ready:not(.reading) .station:hover strong,
.scene-ready:not(.reading) .station:focus-visible strong { text-decoration: underline; }
.scene-ready:not(.reading) .station-workflow .station-caption { color: #fff8e8; }
.scene-ready:not(.reading) .paper, .scene-ready:not(.reading) .radar-heading { transform-origin: 0 0; }
body:not(.scene-ready) .paper, body:not(.scene-ready) .radar-heading,
.reading .paper, .reading .radar-heading { transform: none !important; }
.scene-ready:not(.reading) .station-learn { margin-top: 10px; }
.scene-ready:not(.reading) .station-learn .prop-space { height: clamp(165px, 17.5vw, 220px); }
.scene-ready:not(.reading) .station .station-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}
.scene-ready:not(.reading) .station-workflow { margin-top: 10px; }
.reading #tabletop { background: #f4eee3; }
.reading .desk-grid { grid-template-columns: 1fr; gap: 17px; }
.reading .board-frame { padding: 16px; }

@media (max-width: 880px) {
  .desk-grid { gap: 26px; }
  .table-content { padding-inline: 21px; }
  .board-frame { padding-inline: 12px; }
  .scene-ready:not(.reading) #news { gap: 8px; }
  .scene-ready:not(.reading) .paper { padding-inline: 7px; }
}
@media (max-width: 740px) {
  .topbar { padding: 10px 14px; }
  .topbar nav { flex-wrap: wrap; gap: 6px; }
  .table-content { max-width: 500px; padding: 24px 12px 28px; }
  .desk-grid { grid-template-columns: 1fr; gap: 23px; }
  .scene-ready:not(.reading) .station-security { margin-top: 0; }
  .scene-ready:not(.reading) .station-learn { margin-top: 12px; }
  .scene-ready:not(.reading) .station-workflow { margin-top: 0; }
  .scene-ready:not(.reading) .paper { min-height: 142px; }
  .scene-ready:not(.reading) .paper h3 { font-size: .84rem; -webkit-line-clamp: 5; }
  .scene-ready:not(.reading) .paper .topic { font-size: .68rem; }
  .scene-ready:not(.reading) .read-link { font-size: .68rem; }
}


#station-bubble, #thought-bubble {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  transform: translate(-50%, calc(-100% - 9px));
  pointer-events: none;
  white-space: nowrap;
  padding: 5px 12px;
  border: 1px solid #9d8062;
  border-radius: 12px;
  background: #fff6e5;
  color: #3d2d20;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 2px 6px #49352235;
}
#station-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - 5px);
  border: 5px solid transparent;
  border-top-color: #9d8062;
}

#thought-bubble {
  display: grid;
  place-items: center;
  width: 42px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
}
.idea-bulb {
  position: relative;
  width: 14px;
  height: 15px;
  margin-bottom: 4px;
  border: 1px solid #9d5f23;
  border-radius: 50% 50% 45% 45%;
  background: #ffdc69;
  box-shadow: 0 0 7px 2px #ffbf5090, inset 2px 2px #fff4c2;
}
.idea-bulb::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 1px 1px 3px 3px;
  background: #86542e;
}
#thought-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff6e5;
  box-shadow: 3px 6px 0 -1px #fff6e5;
}