body {
  background: #fff;
  color: #000;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.4;
  margin: 32px auto;
  max-width: 760px;
  padding: 0 16px;
}

a {
  color: #00e;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

.site-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  margin-bottom: 32px;
}

.brand {
  color: #000;
  flex: 0 1 auto;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
  gap: 0 10px;
  justify-content: flex-end;
  text-align: right;
}

.site-nav a {
  white-space: nowrap;
}

.nav-dropdown {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.nav-dropdown summary {
  color: #00e;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown ul {
  background: #fff;
  border: 1px solid #000;
  list-style: none;
  margin: 4px 0 0;
  min-width: 120px;
  padding: 6px 10px;
  position: absolute;
  right: 0;
  text-align: left;
  z-index: 10;
}

.nav-dropdown li {
  margin: 0 0 0.25rem;
}

.nav-dropdown li:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

body[data-style-mode="minimal"] .pictures-page-intro {
  display: none;
}

section {
  margin: 0 0 28px;
}

ul {
  margin-top: 0;
  padding-left: 22px;
}

li {
  margin: 0 0 0.45rem;
}

.page {
  padding-bottom: 32px;
}

.intro,
.quantum-hero {
  margin-bottom: 28px;
}

.eyebrow,
.kicker,
.meta {
  color: #555;
  font-size: 0.9rem;
  font-weight: normal;
  letter-spacing: 0;
  margin: 0 0 0.25rem;
  text-transform: none;
}

.lede,
.quantum-lede,
.small,
.note,
.report-note,
p {
  color: #000;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-top: 0.5rem;
}

.text-link,
.inline-link,
.card-action {
  color: #00e;
  font-weight: normal;
  text-decoration: underline;
}

.section {
  display: block;
  margin: 0 0 28px;
  padding: 0;
}

.item-list,
.timeline,
.idea-list,
.theme-grid,
.card-grid {
  display: block;
}

.item,
.timeline-item,
.idea-item,
.theme-item,
.card {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}

.tag-list,
.card-footer {
  display: none;
}

.report-panel {
  border: 1px solid #ccc;
  margin-top: 0.5rem;
}

.report-panel-header {
  border-bottom: 1px solid #ccc;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px;
}

.report-panel-header h3,
.report-panel-header p {
  margin-bottom: 0;
}

.report-frame,
.report-text-frame,
.map-frame {
  background: #fff;
  border: 0;
  display: block;
  height: 70vh;
  width: 100%;
}

.report-note {
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 8px;
}

.argument-explorer {
  margin-bottom: 1.5rem;
}

.argument-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.argument-card {
  border: 1px solid #ccc;
  padding: 8px;
}

.argument-card summary {
  cursor: pointer;
  font-weight: bold;
}

.argument-card p {
  margin: 0.5rem 0 0;
}

.map-panel {
  margin-top: 1rem;
}

.tweet-archive,
.tweet-stream {
  margin-top: 1.5rem;
}

.tweet-archive > .tweet-stream {
  margin: 0 0 1rem;
}

.tweet-archive-summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 1.15rem;
  font-weight: bold;
  gap: 0.5rem;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 0.5rem;
}

.tweet-archive-summary::-webkit-details-marker {
  display: none;
}

.tweet-archive-summary .faCaretDown,
.tweet-archive-summary .faCaretUp {
  display: inline-block;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
  width: 0.8em;
}

.tweet-archive-summary .faCaretDown::before {
  content: "\25be";
}

.tweet-archive-summary .faCaretUp {
  display: none;
}

.tweet-archive-summary .faCaretUp::before {
  content: "\25b4";
}

.tweet-archive[open] .tweet-archive-summary .faCaretDown {
  display: none;
}

.tweet-archive[open] .tweet-archive-summary .faCaretUp {
  display: inline-block;
}

.tweet-archive:not([open]) > .tweet-list,
.tweet-archive:not([open]) > .tweet-stream {
  display: none;
}

.tweet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 0.75rem;
}

.tweet-tab {
  background: transparent;
  border: 1px solid #999;
  color: #00e;
  cursor: pointer;
  font: inherit;
  padding: 2px 8px;
  text-decoration: underline;
}

.tweet-tab.is-active {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

.tweet-tab-panel[hidden] {
  display: none;
}

.tweet-filter-disclosure {
  margin: 0.75rem 0 0.8rem;
}

.tweet-filter-disclosure > summary {
  cursor: pointer;
  font-weight: bold;
  width: max-content;
}

.tweet-filter {
  border: 1px solid #ccc;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1fr) minmax(90px, max-content) max-content max-content;
  margin: 0.5rem 0 0;
  padding: 8px;
}

.tweet-filter label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  gap: 2px;
}

.tweet-filter input,
.tweet-filter select {
  border: 1px solid #999;
  box-sizing: border-box;
  font: inherit;
  min-width: 0;
  padding: 2px 4px;
}

.tweet-filter button {
  align-self: end;
  background: transparent;
  border: 0;
  color: #00e;
  cursor: pointer;
  font: inherit;
  padding: 2px 0;
  text-decoration: underline;
}

.tweet-filter output {
  align-self: end;
  color: #555;
  font-size: 0.9rem;
  padding: 2px 0;
  white-space: nowrap;
}

.tweet-atlas {
  border: 1px solid #ccc;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  padding: 8px;
}

.tweet-topic-map {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.tweet-topic-node {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  cursor: pointer;
  font: inherit;
  min-height: 4.5rem;
  padding: 8px;
  text-align: left;
}

.tweet-topic-node.is-active {
  border-color: #000;
  font-weight: bold;
}

.tweet-topic-label,
.tweet-topic-count {
  display: block;
}

.tweet-topic-count,
.tweet-topic-kicker,
.tweet-topic-meta {
  color: #555;
  font-size: 0.9rem;
}

.tweet-topic-detail {
  border-left: 1px solid #ccc;
  min-width: 0;
  padding-left: 10px;
}

.tweet-topic-detail h3 {
  margin-bottom: 0.4rem;
}

.tweet-topic-examples {
  margin-bottom: 0.75rem;
}

.tweet-topic-filter-button {
  background: transparent;
  border: 0;
  color: #00e;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.tweet-list {
  list-style: none;
  padding-left: 0;
}

.tweet-item {
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  margin-bottom: 0.8rem;
  padding: 10px 12px;
}

.tweet-header {
  align-items: baseline;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 0 0.2rem;
  margin-bottom: 0.35rem;
}

.tweet-header strong {
  color: #000;
}

.tweet-text {
  margin-bottom: 0.5rem;
  white-space: pre-wrap;
}

.tweet-external-link {
  font-size: 0.85rem;
  line-height: 1;
  margin-left: 0.2rem;
}

.tweet-quote {
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  box-sizing: border-box;
  color: inherit;
  display: block;
  margin: 0.55rem 0;
  max-width: 520px;
  padding: 8px 10px;
  text-decoration: none;
  width: 100%;
}

.tweet-quote-header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.tweet-quote-label,
.tweet-quote-open,
.tweet-quote-title,
.tweet-quote-meta,
.tweet-quote-text {
  display: block;
}

.tweet-quote-label,
.tweet-quote-open,
.tweet-quote-meta {
  color: #555;
  font-size: 0.85rem;
}

.tweet-quote-label {
  font-weight: bold;
}

.tweet-quote-open {
  margin-left: auto;
}

.tweet-quote-title {
  margin-bottom: 0.1rem;
}

.tweet-quote-text {
  margin-top: 0.25rem;
  white-space: pre-wrap;
}

.tweet-quote-embed {
  margin: 0.55rem 0 0;
  max-width: 100%;
}

.tweet-quote .twitter-tweet,
.tweet-quote .twitter-tweet-rendered {
  max-width: 100% !important;
  width: 100% !important;
}

.tweet-quote iframe {
  max-width: 100% !important;
  width: 100% !important;
}

.tweet-media {
  display: grid;
  gap: 2px;
  margin: 0.55rem 0;
  max-width: 520px;
  overflow: hidden;
  width: min(100%, 520px);
}

.tweet-media-1 {
  grid-template-columns: 1fr;
}

.tweet-media-2,
.tweet-media-3,
.tweet-media-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tweet-media-link {
  aspect-ratio: 16 / 9;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 14px;
  box-sizing: border-box;
  cursor: zoom-in;
  display: block;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.tweet-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.tweet-media-link-broken {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 8px;
}

.tweet-dialog {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  max-width: min(92vw, 900px);
  padding: 14px;
}

.tweet-dialog::backdrop {
  background: rgba(255, 255, 255, 0.85);
}

.tweet-dialog-close {
  float: right;
}

.tweet-dialog-image {
  display: block;
  height: auto;
  margin: 0 0 0.75rem;
  max-height: 78vh;
  max-width: 100%;
  object-fit: contain;
}

.tweet-stream iframe {
  max-width: 100%;
}

.nft-section {
  margin-bottom: 1.5rem;
}

.nft-section summary {
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.nft-address {
  margin-bottom: 0.75rem;
}

.nft-list {
  list-style: none;
  padding-left: 0;
}

.nft-item {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  margin-bottom: 0.45rem;
}

.nft-preview {
  background: transparent;
  border: 0;
  cursor: pointer;
  flex: 0 0 36px;
  margin: 0;
  padding: 0;
}

.nft-load-more {
  font: inherit;
  margin: 0.25rem 0 0.5rem;
}

.nft-thumb {
  background: #f7f7f7;
  border: 1px solid #ccc;
  display: block;
  flex: 0 0 36px;
  height: 36px;
  max-height: 36px;
  max-width: 36px;
  object-fit: cover;
  width: 36px;
}

.nft-item-body {
  display: block;
  min-width: 0;
}

.nft-contract-group {
  margin-bottom: 0.35rem;
}

.nft-contract-details summary {
  margin-bottom: 0.35rem;
}

.nft-contract-list {
  margin: 0.35rem 0 0 1.1rem;
}

.nft-meta {
  color: #555;
  display: block;
  font-size: 0.9rem;
}

.nft-dialog {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  max-width: min(92vw, 640px);
  padding: 14px;
}

.nft-dialog::backdrop {
  background: rgba(255, 255, 255, 0.85);
}

.nft-dialog-close {
  float: right;
}

.nft-dialog-image {
  display: block;
  height: auto;
  margin: 0 0 0.75rem;
  max-height: 70vh;
  max-width: 100%;
  object-fit: contain;
}

.picture-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  list-style: none;
  padding-left: 0;
}

.picture-item {
  margin: 0;
}

.picture-button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 0;
  text-align: left;
  width: 100%;
}

.picture-button img {
  background: #f7f7f7;
  border: 1px solid #ccc;
  display: block;
  height: 140px;
  margin-bottom: 0.35rem;
  object-fit: cover;
  width: 100%;
}

.picture-title {
  display: block;
}

.picture-dialog {
  background: #fff;
  border: 1px solid #000;
  color: #000;
  max-width: min(92vw, 760px);
  padding: 14px;
}

.picture-dialog::backdrop {
  background: rgba(255, 255, 255, 0.85);
}

.picture-dialog-close {
  float: right;
}

.picture-dialog-image {
  display: block;
  height: auto;
  margin: 0 0 0.75rem;
  max-height: 76vh;
  max-width: 100%;
  object-fit: contain;
}

.site-footer {
  border-top: 1px solid #ccc;
  color: #000;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 10px;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 12px;
}

.agent-panel {
  border-top: 1px solid #ccc;
  margin-bottom: 1.25rem;
  padding: 0;
}

.agent-panel-body {
  margin-top: 0.25rem;
  padding-bottom: 0.75rem;
}

.agent-panel:not([open]) .agent-panel-body {
  display: none;
}

.agent-panel-label {
  align-items: baseline;
  color: #000;
  cursor: pointer;
  display: flex;
  font-weight: bold;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0.55rem 0 0.45rem;
}

.agent-panel-label::-webkit-details-marker {
  display: none;
}

.agent-panel-label::marker {
  content: "";
}

.agent-panel-label::after {
  color: #555;
  content: "hide";
  font-size: 0.9rem;
  font-weight: normal;
  margin-left: 1rem;
}

.agent-panel:not([open]) .agent-panel-label::after {
  content: "show";
}

.friend-criteria-list {
  list-style: none;
  padding-left: 0;
}

.friend-criterion {
  border: 1px solid #ccc;
  margin-bottom: 0.6rem;
  padding: 8px;
}

.friend-criterion p {
  margin-bottom: 0.35rem;
}

.friend-criterion ul {
  margin-bottom: 0;
}

.agent-box {
  display: block;
  margin-top: 1rem;
}

.agent-box label,
.agent-box-label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.agent-box textarea {
  border: 1px solid #999;
  box-sizing: border-box;
  color: #000;
  font: inherit;
  padding: 6px;
  width: 100%;
}

.agent-box textarea[readonly] {
  background: #fff;
}

.prompt-output {
  border: 1px solid #999;
  box-sizing: border-box;
  color: #000;
  cursor: copy;
  font: inherit;
  min-height: 14rem;
  margin: 0;
  overflow: auto;
  padding: 6px;
  white-space: pre-wrap;
  width: 100%;
}

.agent-box button {
  background: transparent;
  border: 0;
  color: #00e;
  cursor: pointer;
  font: inherit;
  margin: 8px 0;
  padding: 0;
  text-decoration: underline;
}

.agent-box button:disabled,
.agent-box textarea:disabled {
  color: #555;
  cursor: default;
}

.agent-box output {
  display: block;
  margin-top: 0.5rem;
}

.agent-box.is-locked {
  opacity: 0.65;
}

.site-settings {
  align-items: flex-end;
  bottom: 16px;
  display: flex;
  flex-direction: column-reverse;
  font-size: 0.95rem;
  gap: 8px;
  max-width: calc(100vw - 32px);
  position: fixed;
  right: 16px;
  z-index: 20;
}

.settings-toggle-button {
  background: #fff;
  border: 1px solid #999;
  color: #000;
  cursor: pointer;
  font: inherit;
  height: 2rem;
  line-height: 1;
  padding: 0;
  text-align: center;
  width: 2rem;
}

.settings-toggle-button[aria-expanded="true"] {
  border-color: #1ed760;
}

.faCog {
  display: inline-block;
  font-size: 1.1rem;
}

.settings-panel {
  background: #fff;
  border: 1px solid #999;
  min-width: 180px;
  padding: 8px;
}

.settings-panel label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.settings-panel select {
  background: #fff;
  border: 1px solid #999;
  box-sizing: border-box;
  color: #000;
  font: inherit;
  margin-bottom: 0.6rem;
  width: 100%;
}

.settings-panel button {
  background: transparent;
  border: 0;
  color: #00e;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.settings-toggle {
  align-items: center;
  display: flex;
  gap: 6px;
  font-weight: normal;
  margin: 0;
}

.settings-toggle input {
  margin: 0;
}

.settings-demo-section {
  border-top: 1px solid #ccc;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}

body[data-demo-mode="on"] .settings-toggle-button,
body[data-demo-features="on"] .settings-toggle-button {
  border-color: #1ed760;
}

body[data-demo-features="off"] [data-demo-feature] {
  display: none !important;
}

.desktop-only,
.desktop-selection-box,
.desktop-titlebar,
.desktop-window-resize-handle {
  display: none;
}

body[data-embed-mode="desktop-window"] {
  background: #ffffef;
  margin: 0;
  max-width: none;
  padding: 0;
}

body[data-embed-mode="desktop-window"] .site-header,
body[data-embed-mode="desktop-window"] .site-settings {
  display: none !important;
}

body[data-embed-mode="desktop-window"] main {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
  padding: 10px 12px;
}

body[data-embed-mode="desktop-window"] main > h1:first-child {
  display: none;
}

body[data-embed-mode="desktop-window"] .tweet-archive,
body[data-embed-mode="desktop-window"] .nft-section {
  margin-top: 0;
}

body[data-style-mode="windows95"] {
  background: #008080;
  color: #000;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 15px;
  max-width: 860px;
}

body[data-style-mode="windows95"] a {
  color: #000080;
}

body[data-style-mode="windows95"] a:visited {
  color: #800080;
}

body[data-style-mode="windows95"] .site-header,
body[data-style-mode="windows95"] main,
body[data-style-mode="windows95"] .settings-panel,
body[data-style-mode="windows95"] .tweet-dialog,
body[data-style-mode="windows95"] .nft-dialog {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000;
}

body[data-style-mode="windows95"] .site-header,
body[data-style-mode="windows95"] main {
  padding: 8px;
}

body[data-style-mode="windows95"] .site-header {
  margin-bottom: 12px;
}

body[data-style-mode="windows95"] .brand {
  color: #000;
}

body[data-style-mode="windows95"] h1,
body[data-style-mode="windows95"] h2,
body[data-style-mode="windows95"] .tweet-archive-summary {
  background: #000080;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  padding: 2px 4px;
}

body[data-style-mode="windows95"] h3,
body[data-style-mode="windows95"] .kicker,
body[data-style-mode="windows95"] .meta,
body[data-style-mode="windows95"] .eyebrow {
  color: #000;
}

body[data-style-mode="windows95"] .nav-dropdown ul,
body[data-style-mode="windows95"] .report-panel,
body[data-style-mode="windows95"] .agent-panel,
body[data-style-mode="windows95"] .nft-contract-details,
body[data-style-mode="windows95"] .tweet-stream,
body[data-style-mode="windows95"] .tweet-filter,
body[data-style-mode="windows95"] .tweet-atlas,
body[data-style-mode="windows95"] .tweet-topic-node,
body[data-style-mode="windows95"] .tweet-topic-detail,
body[data-style-mode="windows95"] .tweet-quote,
body[data-style-mode="windows95"] .argument-card,
body[data-style-mode="windows95"] .friend-criterion,
body[data-style-mode="windows95"] .prompt-output,
body[data-style-mode="windows95"] .agent-box textarea {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #000;
}

body[data-style-mode="windows95"] .nft-contract-details,
body[data-style-mode="windows95"] .agent-panel,
body[data-style-mode="windows95"] .argument-card,
body[data-style-mode="windows95"] .friend-criterion,
body[data-style-mode="windows95"] .tweet-stream,
body[data-style-mode="windows95"] .tweet-filter,
body[data-style-mode="windows95"] .tweet-atlas,
body[data-style-mode="windows95"] .tweet-topic-node,
body[data-style-mode="windows95"] .tweet-topic-detail {
  padding: 6px;
}

body[data-style-mode="windows95"] .agent-panel {
  margin-bottom: 0.9rem;
}

body[data-style-mode="windows95"] .agent-panel-label {
  color: #000;
  padding: 2px 0 6px;
}

body[data-style-mode="windows95"] .agent-panel-label::after {
  color: #333;
}

body[data-style-mode="windows95"] .agent-panel-body {
  padding-bottom: 0;
}

body[data-style-mode="windows95"] .tweet-item {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #000;
}

body[data-style-mode="windows95"] .tweet-media-link {
  border-radius: 0;
  border-color: #808080 #fff #fff #808080;
}

body[data-style-mode="windows95"] button,
body[data-style-mode="windows95"] select,
body[data-style-mode="windows95"] input,
body[data-style-mode="windows95"] .settings-toggle-button,
body[data-style-mode="windows95"] .tweet-tab,
body[data-style-mode="windows95"] .tweet-topic-filter-button,
body[data-style-mode="windows95"] .agent-box button {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000;
  color: #000;
  font: inherit;
  padding: 2px 8px;
  text-decoration: none;
}

body[data-style-mode="windows95"] button:active,
body[data-style-mode="windows95"] .settings-toggle-button:active,
body[data-style-mode="windows95"] .tweet-tab.is-active,
body[data-style-mode="windows95"] .agent-box button:active {
  border-color: #404040 #fff #fff #404040;
  box-shadow: none;
}

body[data-style-mode="windows95"] .tweet-tab.is-active {
  color: #000;
  text-decoration: none;
}

body[data-style-mode="windows95"] .tweet-topic-node.is-active {
  background: #000080;
  color: #fff;
}

body[data-style-mode="windows95"] .tweet-topic-node.is-active .tweet-topic-count {
  color: #fff;
}

body[data-style-mode="windows95"] .settings-toggle-button {
  height: 2rem;
  padding: 0;
  width: 2rem;
}

body[data-style-mode="windows95"] .settings-toggle-button[aria-expanded="true"] {
  border-color: #000080 #fff #fff #000080;
}

body[data-style-mode="windows95"] .settings-panel select {
  background: #fff;
}

body[data-style-mode="windows95"] .nft-preview {
  box-shadow: none;
  padding: 0;
}

body[data-style-mode="windows95"] .nft-thumb {
  border-color: #404040 #fff #fff #404040;
}

body[data-style-mode="windows95"] .report-panel-header,
body[data-style-mode="windows95"] .report-note,
body[data-style-mode="windows95"] .argument-card,
body[data-style-mode="windows95"] .friend-criterion,
body[data-style-mode="windows95"] .settings-demo-section {
  border-color: #808080;
}

body[data-style-mode="windows95"] .nft-dialog::backdrop,
body[data-style-mode="windows95"] .tweet-dialog::backdrop {
  background: rgba(0, 128, 128, 0.65);
}

body[data-style-mode="windows95desktop"] {
  background: #008080;
  color: #000;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  margin: 0;
  max-width: none;
  min-height: 100vh;
  padding: 24px 24px 58px 116px;
}

body[data-style-mode="windows95desktop"] a {
  color: #000080;
}

body[data-style-mode="windows95desktop"] a:visited {
  color: #800080;
}

body[data-style-mode="windows95desktop"] .desktop-only {
  display: block;
}

body[data-style-mode="windows95desktop"] .desktop-titlebar {
  align-items: center;
  background: #000080;
  color: #fff;
  display: flex;
  font-weight: bold;
  justify-content: space-between;
  margin: 0 0 8px;
  padding: 2px 4px;
}

body[data-style-mode="windows95desktop"] .desktop-window-buttons {
  font-weight: normal;
  letter-spacing: 1px;
}

body[data-style-mode="windows95desktop"] .site-header {
  align-items: center;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  bottom: 0;
  box-shadow: 0 -1px 0 #404040;
  box-sizing: border-box;
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  left: 0;
  margin: 0;
  min-height: 42px;
  padding: 4px;
  position: fixed;
  right: 0;
  z-index: 30;
}

body[data-style-mode="windows95desktop"] .brand,
body[data-style-mode="windows95desktop"] .site-nav a,
body[data-style-mode="windows95desktop"] .nav-dropdown summary,
body[data-style-mode="windows95desktop"] button,
body[data-style-mode="windows95desktop"] select,
body[data-style-mode="windows95desktop"] input,
body[data-style-mode="windows95desktop"] .settings-toggle-button {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000;
  color: #000;
  font: inherit;
  padding: 2px 8px;
  text-decoration: none;
}

body[data-style-mode="windows95desktop"] .brand {
  flex: 0 0 auto;
  font-weight: bold;
}

body[data-style-mode="windows95desktop"] .site-nav {
  display: none;
}

body[data-style-mode="windows95desktop"] .brand-link {
  display: none;
}

body[data-style-mode="windows95desktop"] .desktop-start-menu {
  margin-left: 0;
  order: 0;
  position: relative;
}

body[data-style-mode="windows95desktop"] .desktop-start-menu summary {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000;
  color: #000;
  cursor: pointer;
  font-weight: bold;
  list-style: none;
  min-width: 146px;
  padding: 2px 10px 2px 26px;
  position: relative;
  white-space: nowrap;
}

body[data-style-mode="windows95desktop"] .desktop-start-menu summary::before {
  background:
    linear-gradient(90deg, #f00 0 45%, transparent 45%) 0 0 / 8px 8px no-repeat,
    linear-gradient(90deg, #00f 0 45%, transparent 45%) 8px 0 / 8px 8px no-repeat,
    linear-gradient(90deg, #0a0 0 45%, transparent 45%) 0 8px / 8px 8px no-repeat,
    linear-gradient(90deg, #ff0 0 45%, transparent 45%) 8px 8px / 8px 8px no-repeat;
  content: "";
  height: 16px;
  left: 6px;
  position: absolute;
  top: 4px;
  width: 16px;
}

body[data-style-mode="windows95desktop"] .desktop-start-menu summary::-webkit-details-marker {
  display: none;
}

body[data-style-mode="windows95desktop"] .desktop-start-menu[open] summary {
  border-color: #404040 #fff #fff #404040;
  box-shadow: none;
}

body[data-style-mode="windows95desktop"] .desktop-start-panel {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  bottom: calc(100% + 4px);
  box-shadow: 1px 1px 0 #000;
  display: flex;
  flex-direction: column;
  min-width: 278px;
  padding: 4px 4px 4px 36px;
  position: absolute;
  left: 0;
}

body[data-style-mode="windows95desktop"] .desktop-start-panel::before {
  align-items: flex-end;
  background: linear-gradient(#000080, #000);
  color: #fff;
  content: "Charlie Thompson";
  display: flex;
  font-size: 1.05rem;
  font-weight: bold;
  inset: 0 auto 0 0;
  justify-content: center;
  letter-spacing: 0.04em;
  padding: 10px 0;
  position: absolute;
  text-orientation: mixed;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  width: 24px;
}

body[data-style-mode="windows95desktop"] .desktop-start-panel a,
body[data-style-mode="windows95desktop"] .desktop-start-panel button {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #000;
  display: flex;
  gap: 8px;
  font: inherit;
  min-height: 30px;
  padding: 3px 18px 3px 6px;
  position: relative;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

body[data-style-mode="windows95desktop"] .desktop-start-icon {
  flex: 0 0 26px;
  height: 26px;
  position: relative;
  width: 26px;
}

body[data-style-mode="windows95desktop"] .desktop-start-icon .desktop-icon-glyph {
  left: 1px;
  margin: 0;
  position: absolute;
  top: 3px;
  transform: scale(0.65);
  transform-origin: left top;
}

body[data-style-mode="windows95desktop"] .desktop-start-icon .desktop-icon-notes {
  top: 7px;
}

body[data-style-mode="windows95desktop"] .desktop-start-panel [data-menu-icon="report"]::after,
body[data-style-mode="windows95desktop"] .desktop-start-panel [data-menu-icon="presentation"]::after {
  color: #404040;
  content: "...";
  margin-left: auto;
}

body[data-style-mode="windows95desktop"] .desktop-start-submenu {
  position: relative;
}

body[data-style-mode="windows95desktop"] .desktop-start-submenu > button::after {
  color: inherit;
  content: ">";
  font-size: 0.85rem;
  margin-left: auto;
}

body[data-style-mode="windows95desktop"] .desktop-start-submenu-panel {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  bottom: 0;
  box-shadow: 1px 1px 0 #000;
  display: none;
  flex-direction: column;
  left: calc(100% - 2px);
  max-height: min(220px, calc(100vh - 72px));
  min-width: 158px;
  overflow: auto;
  padding: 4px;
  position: absolute;
  top: auto;
  z-index: 40;
}

body[data-style-mode="windows95desktop"] .desktop-start-submenu:hover > .desktop-start-submenu-panel,
body[data-style-mode="windows95desktop"] .desktop-start-submenu:focus-within > .desktop-start-submenu-panel {
  display: flex;
}

body[data-style-mode="windows95desktop"] .desktop-start-submenu:hover > button,
body[data-style-mode="windows95desktop"] .desktop-start-submenu:focus-within > button {
  background: #000080;
  color: #fff;
}

body[data-style-mode="windows95desktop"] .desktop-start-submenu-panel a {
  min-height: 24px;
  padding: 3px 22px 3px 8px;
}

body[data-style-mode="windows95desktop"] .desktop-start-submenu-panel a::before {
  display: none;
}

body[data-style-mode="windows95desktop"] .desktop-start-panel a:hover,
body[data-style-mode="windows95desktop"] .desktop-start-panel a:focus,
body[data-style-mode="windows95desktop"] .desktop-start-panel button:hover,
body[data-style-mode="windows95desktop"] .desktop-start-panel button:focus {
  background: #000080;
  color: #fff;
  outline: 0;
}

body[data-style-mode="windows95desktop"] .nav-dropdown ul {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000;
  min-width: 136px;
  padding: 6px 8px;
}

body[data-style-mode="windows95desktop"] .desktop-icons {
  bottom: 44px;
  display: block;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
}

body[data-style-mode="windows95desktop"] .desktop-selection-box {
  background: rgba(0, 0, 128, 0.16);
  border: 1px dotted #fff;
  box-sizing: border-box;
  outline: 1px solid #000080;
  pointer-events: none;
  position: fixed;
  z-index: 5;
}

body[data-style-mode="windows95desktop"] .desktop-icon {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  gap: 4px;
  left: var(--icon-left, 18px);
  min-height: 66px;
  padding: 2px 0;
  pointer-events: auto;
  position: absolute;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  top: var(--icon-top, 20px);
  touch-action: none;
  user-select: none;
  width: 96px;
  word-break: break-word;
}

body[data-style-mode="windows95desktop"] .desktop-icon span:last-child {
  line-height: 1.1;
  max-width: 98px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-button,
body[data-style-mode="windows95desktop"] .desktop-icon-button:active {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-shadow: 1px 1px 0 #000;
}

body[data-style-mode="windows95desktop"] .desktop-icon:visited {
  color: #fff;
}

body[data-style-mode="windows95desktop"] .desktop-icon:hover span:last-child,
body[data-style-mode="windows95desktop"] .desktop-icon:focus span:last-child,
body[data-style-mode="windows95desktop"] .desktop-icon.is-selected span:last-child {
  background: #000080;
  outline: 1px dotted #fff;
}

body[data-style-mode="windows95desktop"] .desktop-icon.is-selected .desktop-icon-glyph {
  outline: 2px solid #000080;
  outline-offset: 2px;
}

body[data-style-mode="windows95desktop"] .desktop-icon.is-selected span:last-child {
  color: #fff;
  padding: 0 2px;
}

body[data-style-mode="windows95desktop"] .desktop-icon.is-moving {
  opacity: 0.84;
}

body[data-style-mode="windows95desktop"] .desktop-icon-glyph {
  background: #ffdf7f;
  border: 2px solid #111;
  box-shadow: 1px 1px 0 #fff inset, 1px 1px 0 #000;
  display: inline-block;
  height: 32px;
  position: relative;
  width: 36px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-folder {
  background: #ffd35a;
  border-color: #5a4210;
  height: 26px;
  margin-top: 6px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-folder::before {
  background: #ffd35a;
  border: 2px solid #5a4210;
  border-bottom: 0;
  content: "";
  height: 8px;
  left: 2px;
  position: absolute;
  top: -10px;
  width: 16px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-file {
  background: #fff;
  border-color: #222;
}

body[data-style-mode="windows95desktop"] .desktop-icon-file::before {
  background: #c0c0c0;
  border-left: 2px solid #222;
  border-bottom: 2px solid #222;
  content: "";
  height: 10px;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 10px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-help {
  background: radial-gradient(circle at 30% 28%, #fff 0 6px, #bcd8ff 7px 18px, #75a2ee 19px 100%);
  border-color: #0b366d;
  border-radius: 50%;
  box-shadow: 1px 1px 0 #fff inset, 2px 2px 0 #000;
  color: #000080;
  font-weight: bold;
  text-align: center;
}

body[data-style-mode="windows95desktop"] .desktop-icon-help::after {
  content: "?";
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 900;
  left: 0;
  line-height: 32px;
  position: absolute;
  right: 0;
  text-shadow: 1px 1px 0 #fff;
  top: 0;
}

body[data-style-mode="windows95desktop"] .desktop-icon-computer {
  background: #0b1f35;
  border-color: #111;
  height: 24px;
  margin-bottom: 8px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-computer::after {
  background: #c0c0c0;
  border: 2px solid #111;
  content: "";
  height: 8px;
  left: 8px;
  position: absolute;
  top: 25px;
  width: 18px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-agent {
  background:
    linear-gradient(#081827, #0d2338);
  border-color: #111;
  height: 24px;
  margin-bottom: 8px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-agent::before {
  background:
    linear-gradient(#00ff66 0 0) 8px 11px / 15px 3px no-repeat,
    linear-gradient(#00ff66 0 0) 25px 11px / 3px 3px no-repeat,
    linear-gradient(#19415f 0 0) 5px 5px / 26px 3px no-repeat;
  content: "";
  inset: 0;
  position: absolute;
}

body[data-style-mode="windows95desktop"] .desktop-icon-agent::after {
  background:
    linear-gradient(#a8a8a8, #d0d0d0);
  border: 2px solid #111;
  box-shadow: 7px -5px 0 -4px #00ff66;
  content: "";
  height: 8px;
  left: 8px;
  position: absolute;
  top: 25px;
  width: 18px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-notes {
  background: #ffd35a;
  border-color: #5a4210;
  height: 26px;
  margin-top: 6px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-notes::before {
  background: #ffd35a;
  border: 2px solid #5a4210;
  border-bottom: 0;
  content: "";
  height: 8px;
  left: 2px;
  position: absolute;
  top: -10px;
  width: 16px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-notes::after {
  background:
    repeating-linear-gradient(to bottom, #fff 0 4px, #000080 4px 5px, #fff 5px 8px);
  border: 1px solid #111;
  box-shadow: -4px 3px 0 #fff8c8;
  content: "";
  height: 18px;
  left: 13px;
  position: absolute;
  top: 7px;
  width: 18px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-report {
  background: #fff;
  border-color: #222;
}

body[data-style-mode="windows95desktop"] .desktop-icon-report::before {
  background: #c0c0c0;
  border-left: 2px solid #222;
  border-bottom: 2px solid #222;
  content: "";
  height: 10px;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 10px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-report::after {
  background:
    radial-gradient(circle at 18px 15px, #000080 0 2px, transparent 3px),
    radial-gradient(circle at 11px 12px, #008080 0 2px, transparent 3px),
    radial-gradient(circle at 25px 19px, #008080 0 2px, transparent 3px);
  border: 2px solid #000080;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  height: 15px;
  left: 6px;
  position: absolute;
  top: 9px;
  transform: rotate(-22deg);
  width: 23px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-presentation {
  background: #fff;
  border-color: #222;
}

body[data-style-mode="windows95desktop"] .desktop-icon-presentation::before {
  background: #c0c0c0;
  border-left: 2px solid #222;
  border-bottom: 2px solid #222;
  content: "";
  height: 10px;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 10px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-presentation::after {
  background:
    linear-gradient(#000080 0 0) 5px 5px / 24px 4px no-repeat,
    linear-gradient(#008080 0 0) 5px 14px / 12px 10px no-repeat,
    linear-gradient(#ffd35a 0 0) 20px 14px / 8px 10px no-repeat,
    linear-gradient(#fff 0 0) 5px 25px / 23px 2px no-repeat;
  content: "";
  inset: 0;
  position: absolute;
}

body[data-style-mode="windows95desktop"] .desktop-icon-gallery {
  background: #f8f8f8;
  border-color: #222;
}

body[data-style-mode="windows95desktop"] .desktop-icon-gallery::before {
  background: #fff;
  border: 2px solid #555;
  box-shadow: -5px 4px 0 #d8d8d8, -7px 6px 0 #222;
  content: "";
  height: 21px;
  left: 8px;
  position: absolute;
  top: 5px;
  width: 24px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-gallery::after {
  background:
    radial-gradient(circle at 20px 7px, #ffd35a 0 4px, transparent 5px),
    linear-gradient(135deg, transparent 0 44%, #008080 45% 70%, transparent 71%) 2px 10px / 22px 12px no-repeat,
    linear-gradient(135deg, transparent 0 50%, #1b8cff 51% 72%, transparent 73%) 6px 12px / 18px 10px no-repeat;
  content: "";
  height: 21px;
  left: 10px;
  position: absolute;
  top: 7px;
  width: 24px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-nft {
  background: linear-gradient(135deg, #fff 0 0) padding-box, #111;
  border-color: #222;
}

body[data-style-mode="windows95desktop"] .desktop-icon-nft::before {
  background:
    linear-gradient(135deg, #b8fff0 0 49%, #008080 50% 100%);
  border: 2px solid #444;
  box-shadow: 3px 3px 0 #c0c0c0, 4px 4px 0 #000;
  clip-path: polygon(50% 0, 90% 28%, 76% 88%, 50% 100%, 24% 88%, 10% 28%);
  content: "";
  height: 22px;
  left: 7px;
  position: absolute;
  top: 4px;
  width: 22px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-nft::after {
  background:
    linear-gradient(#ffd35a 0 0) 2px 2px / 5px 5px no-repeat,
    linear-gradient(#000080 0 0) 14px 2px / 5px 5px no-repeat,
    linear-gradient(#00a000 0 0) 8px 13px / 5px 5px no-repeat;
  content: "";
  height: 22px;
  left: 7px;
  position: absolute;
  top: 4px;
  width: 22px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-links {
  background: #fff;
  border-color: #222;
}

body[data-style-mode="windows95desktop"] .desktop-icon-links::before {
  border: 3px solid #000080;
  border-right-color: transparent;
  border-radius: 12px;
  content: "";
  height: 11px;
  left: 4px;
  position: absolute;
  top: 9px;
  transform: rotate(-28deg);
  width: 18px;
}

body[data-style-mode="windows95desktop"] .desktop-icon-links::after {
  border: 3px solid #000080;
  border-left-color: transparent;
  border-radius: 12px;
  content: "";
  height: 11px;
  left: 14px;
  position: absolute;
  top: 13px;
  transform: rotate(-28deg);
  width: 18px;
}

body[data-style-mode="windows95desktop"] main,
body[data-style-mode="windows95desktop"] .desktop-window,
body[data-style-mode="windows95desktop"] .settings-panel,
body[data-style-mode="windows95desktop"] .tweet-dialog,
body[data-style-mode="windows95desktop"] .nft-dialog {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000;
}

body[data-style-mode="windows95desktop"] main {
  box-sizing: border-box;
  margin: 0;
  max-width: 820px;
  padding: 8px;
}

body[data-style-mode="windows95desktop"] .desktop-window {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  left: var(--window-left, 116px);
  max-height: calc(100vh - 54px);
  max-width: none;
  min-height: 170px;
  min-width: 260px;
  overflow: hidden;
  padding: 8px;
  position: absolute;
  top: var(--window-top, 86px);
  width: min(var(--window-width, 520px), calc(100vw - 154px));
  z-index: 6;
}

body[data-style-mode="windows95desktop"] .desktop-window.is-dragging,
body[data-style-mode="windows95desktop"] .desktop-window.is-resizing {
  opacity: 0.92;
  user-select: none;
}

body[data-style-mode="windows95desktop"] .desktop-window.is-closed {
  display: none !important;
}

body[data-style-mode="windows95desktop"] .desktop-window.is-minimized {
  height: auto !important;
  min-height: 0;
  min-width: 250px;
  width: auto;
}

body[data-style-mode="windows95desktop"] .desktop-window.is-minimized .desktop-window-content {
  display: none;
}

body[data-style-mode="windows95desktop"] .desktop-window .desktop-titlebar {
  cursor: move;
  touch-action: none;
}

body[data-style-mode="windows95desktop"] .desktop-window-buttons {
  display: flex;
  gap: 2px;
}

body[data-style-mode="windows95desktop"] .desktop-window-button,
body[data-style-mode="windows95desktop"] .desktop-window-button:active {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px 0 #000;
  color: #000;
  cursor: pointer;
  font: inherit;
  height: 20px;
  line-height: 12px;
  min-width: 22px;
  padding: 0 3px;
}

body[data-style-mode="windows95desktop"] .desktop-window-button:active {
  border-color: #404040 #fff #fff #404040;
  box-shadow: none;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-handle {
  background: transparent;
  display: block;
  position: absolute;
  touch-action: none;
  z-index: 4;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-n {
  cursor: ns-resize;
  height: 8px;
  left: 14px;
  right: 14px;
  top: 0;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-s {
  bottom: 0;
  cursor: ns-resize;
  height: 8px;
  left: 14px;
  right: 14px;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-e {
  bottom: 14px;
  cursor: ew-resize;
  right: 0;
  top: 14px;
  width: 8px;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-w {
  bottom: 14px;
  cursor: ew-resize;
  left: 0;
  top: 14px;
  width: 8px;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-ne,
body[data-style-mode="windows95desktop"] .desktop-window-resize-sw {
  cursor: nesw-resize;
  height: 16px;
  width: 16px;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-nw,
body[data-style-mode="windows95desktop"] .desktop-window-resize-se {
  cursor: nwse-resize;
  height: 16px;
  width: 16px;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-ne {
  right: 0;
  top: 0;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-nw {
  left: 0;
  top: 0;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-se {
  bottom: 4px;
  right: 4px;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-sw {
  bottom: 4px;
  left: 4px;
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-se,
body[data-style-mode="windows95desktop"] .desktop-window-resize-sw {
  background:
    linear-gradient(135deg, transparent 0 44%, #808080 45% 55%, transparent 56% 100%),
    linear-gradient(135deg, transparent 0 62%, #808080 63% 72%, transparent 73% 100%);
}

body[data-style-mode="windows95desktop"] .desktop-window-resize-sw {
  transform: scaleX(-1);
}

body[data-style-mode="windows95desktop"] .desktop-window.is-minimized .desktop-window-resize-handle {
  display: none;
}

body[data-style-mode="windows95desktop"] .desktop-window-content {
  background: #ffffef;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #000;
  flex: 1 1 auto;
  margin: 0;
  min-height: 130px;
  overflow: auto;
  padding: 12px 14px;
}

body[data-style-mode="windows95desktop"] main.home-note-window .desktop-window-content {
  min-height: 300px;
}

body[data-style-mode="windows95desktop"] .desktop-window.has-custom-size .desktop-window-content,
body[data-style-mode="windows95desktop"] main.home-note-window.has-custom-size .desktop-window-content {
  min-height: 0;
}

body[data-style-mode="windows95desktop"] .desktop-window-note p {
  margin: 0 0 0.75rem;
}

body[data-style-mode="windows95desktop"] .desktop-embedded-page {
  display: flex;
  flex-direction: column;
  max-height: none;
  min-height: 0;
  overflow: auto;
}

body[data-style-mode="windows95desktop"] .desktop-embed-frame {
  background: #fff;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #000;
  display: block;
  margin: 0 0 0.75rem;
  width: 100%;
}

body[data-style-mode="windows95desktop"] .desktop-report-frame {
  height: 320px;
}

body[data-style-mode="windows95desktop"] .desktop-map-frame {
  height: 280px;
}

body[data-style-mode="windows95desktop"] .desktop-page-frame-window {
  padding: 6px;
}

body[data-style-mode="windows95desktop"] .desktop-page-frame {
  flex: 1 1 360px;
  height: auto;
  margin-bottom: 0;
  min-height: 260px;
}

body[data-style-mode="windows95desktop"] .desktop-window.has-custom-size .desktop-report-frame,
body[data-style-mode="windows95desktop"] .desktop-window.has-custom-size .desktop-map-frame,
body[data-style-mode="windows95desktop"] .desktop-window.has-custom-size .desktop-page-frame {
  flex: 1 1 220px;
  height: auto;
  min-height: 160px;
}

body[data-style-mode="windows95desktop"] .desktop-argument-list {
  margin: 0 0 0.75rem;
}

body[data-style-mode="windows95desktop"] .desktop-argument-list details {
  background: #fff;
  border: 1px solid #808080;
  margin: 0 0 0.4rem;
  padding: 4px 6px;
}

body[data-style-mode="windows95desktop"] .desktop-argument-list summary {
  cursor: default;
  font-weight: bold;
}

body[data-style-mode="windows95desktop"] h1,
body[data-style-mode="windows95desktop"] h2,
body[data-style-mode="windows95desktop"] .tweet-archive-summary {
  background: #000080;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
  padding: 2px 4px;
}

body[data-style-mode="windows95desktop"] h3,
body[data-style-mode="windows95desktop"] .kicker,
body[data-style-mode="windows95desktop"] .meta,
body[data-style-mode="windows95desktop"] .eyebrow {
  color: #000;
}

body[data-style-mode="windows95desktop"] .report-panel,
body[data-style-mode="windows95desktop"] .agent-panel,
body[data-style-mode="windows95desktop"] .nft-contract-details,
body[data-style-mode="windows95desktop"] .tweet-stream,
body[data-style-mode="windows95desktop"] .tweet-filter,
body[data-style-mode="windows95desktop"] .tweet-atlas,
body[data-style-mode="windows95desktop"] .tweet-topic-node,
body[data-style-mode="windows95desktop"] .tweet-topic-detail,
body[data-style-mode="windows95desktop"] .tweet-quote,
body[data-style-mode="windows95desktop"] .argument-card,
body[data-style-mode="windows95desktop"] .friend-criterion,
body[data-style-mode="windows95desktop"] .prompt-output,
body[data-style-mode="windows95desktop"] .agent-box textarea {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #000;
}

body[data-style-mode="windows95desktop"] .agent-panel,
body[data-style-mode="windows95desktop"] .nft-contract-details,
body[data-style-mode="windows95desktop"] .tweet-stream,
body[data-style-mode="windows95desktop"] .tweet-filter,
body[data-style-mode="windows95desktop"] .tweet-atlas,
body[data-style-mode="windows95desktop"] .tweet-topic-node,
body[data-style-mode="windows95desktop"] .tweet-topic-detail,
body[data-style-mode="windows95desktop"] .argument-card,
body[data-style-mode="windows95desktop"] .friend-criterion {
  padding: 6px;
}

body[data-style-mode="windows95desktop"] .tweet-item {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #000;
}

body[data-style-mode="windows95desktop"] .tweet-media-link,
body[data-style-mode="windows95desktop"] .tweet-quote {
  border-radius: 0;
}

body[data-style-mode="windows95desktop"] button:active,
body[data-style-mode="windows95desktop"] .settings-toggle-button:active,
body[data-style-mode="windows95desktop"] .tweet-tab.is-active,
body[data-style-mode="windows95desktop"] .agent-box button:active,
body[data-style-mode="windows95desktop"] .brand:active,
body[data-style-mode="windows95desktop"] .site-nav a:active,
body[data-style-mode="windows95desktop"] .nav-dropdown summary:active {
  border-color: #404040 #fff #fff #404040;
  box-shadow: none;
}

body[data-style-mode="windows95desktop"] .tweet-topic-node.is-active {
  background: #000080;
  color: #fff;
}

body[data-style-mode="windows95desktop"] .tweet-topic-node.is-active .tweet-topic-count {
  color: #fff;
}

body[data-style-mode="windows95desktop"] .settings-toggle-button {
  height: 2rem;
  padding: 0;
  width: 2rem;
}

body[data-style-mode="windows95desktop"] .site-settings {
  bottom: 4px;
  right: 8px;
  z-index: 31;
}

body[data-style-mode="windows95desktop"] .settings-panel select {
  background: #fff;
}

body[data-style-mode="windows95desktop"] .nft-dialog::backdrop,
body[data-style-mode="windows95desktop"] .tweet-dialog::backdrop {
  background: rgba(0, 128, 128, 0.65);
}

.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 720px) {
  body {
    margin-top: 18px;
  }

  .site-nav {
    margin-left: auto;
  }

  .argument-grid {
    grid-template-columns: 1fr;
  }

  .tweet-filter,
  .tweet-atlas {
    grid-template-columns: 1fr;
  }

  .tweet-topic-detail {
    border-left: 0;
    border-top: 1px solid #ccc;
    padding-left: 0;
    padding-top: 10px;
  }

  body[data-style-mode="windows95desktop"] {
    margin-top: 0;
    min-height: 100vh;
    padding: 16px 12px 68px;
  }

  body[data-style-mode="windows95desktop"] .desktop-icons {
    bottom: 44px;
    left: 0;
    margin-bottom: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
  }

  body[data-style-mode="windows95desktop"] .desktop-icon {
    font-size: 0.78rem;
  }

  body[data-style-mode="windows95desktop"] main {
    max-width: none;
  }

  body[data-style-mode="windows95desktop"] .desktop-window {
    left: 104px;
    position: absolute;
    width: calc(100vw - 116px);
  }

  body[data-style-mode="windows95desktop"] main.home-note-window {
    top: 20px;
  }

  body[data-style-mode="windows95desktop"] .site-header {
    flex-wrap: wrap;
  }

  body[data-style-mode="windows95desktop"] .site-nav {
    display: none;
  }

  body[data-style-mode="windows95desktop"] .desktop-start-menu {
    margin-left: 0;
    order: 0;
  }

  body[data-style-mode="windows95desktop"] .desktop-start-panel {
    max-width: calc(100vw - 24px);
    min-width: 190px;
    left: 0;
  }
}

/* Xbox 360 Blades: one scoped launch-era dashboard skin. */
/* Self-hosted Convection-like face (Barlow Semi Condensed, OFL) — used only
   by xbox360-scoped rules, so other modes never request it. */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("./assets/fonts/barlow-semi-condensed-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("./assets/fonts/barlow-semi-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Blade tab labels only: Saira's squared shoulders sit closer to Convection
   than Barlow's rounder caps (OFL, latin subset, self-hosted). */
@font-face {
  font-family: "Saira SemiCondensed";
  src: url("./assets/fonts/saira-semi-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.site-nav > .xbox-home-blade,
.xbox-blade-label-overlay,
.xbox-preview {
  display: none;
}

body[data-style-mode="xbox360"] {
  --xbox-core: #9be040;
  --xbox-mid: #3f8c16;
  --xbox-deep: #12350a;
  --xbox-edge: #0c2606;
  --xbox-accent: #62b42e;
  --xbox-accent-dark: #245f0e;
  --xbox-glass: rgba(126, 199, 48, 0.52);
  --xbox-glass-strong: rgba(20, 84, 7, 0.8);
  --xbox-ink: #16330a;
  --xbox-left-offset: 65px;
  --xbox-right-offset: 97px;
  --xbox-blade-width: 132px;
  /* Slightly overlap adjacent curved masks so antialiasing cannot expose the
     page background between the four public blades. */
  --xbox-blade-step: 56px;
  --xbox-left-stack-inset: 11px;
  /* The outermost right blade overhangs the screen edge only slightly, so
     its label (56px sliver, name ~41px in from the blade's outer rim) stays
     readable like the mock's LINKS tab. */
  --xbox-right-stack-inset: -12px;
  /* Keep the vertical names tied to the molded cap, rather than letting
     them drift down with the full viewport height. The active/parked stack
     needs only a slight lift; upcoming names need a stronger lift because
     their shallow silver cap ends much earlier than the active color panel. */
  --xbox-label-anchor: clamp(140px, 21.6vh, 263px);
  /* Upcoming labels in the reference share an almost level optical center.
     Give that stack its own lower anchor and a restrained cascade instead
     of reusing the parked label anchor with 38px jumps. */
  --xbox-upcoming-label-anchor: clamp(168px, 23.5vh, 270px);
  --xbox-upcoming-label-cascade: clamp(12px, 1.7vh, 20px);
  /* The right-bowing left stack has more visible cap face on its inner
     shoulder. Centre the word on that face instead of the outer metal rim. */
  --xbox-parked-label-inset: 49px;
  /* Center the 32px word column inside the 56px exposed right-spine strip.
     The earlier 12px inset placed it on the content seam rather than on the
     metal face, which made otherwise-correct vertical text look misaligned. */
  --xbox-upcoming-label-inset: 36px;
  --xbox-label-inset: 50px;
  --xbox-home-left-inset: clamp(44px, 3vw, 60px);
  --xbox-home-right-inset: clamp(84px, 4.5vw, 104px);
  --xbox-brand-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 14%, transparent 34%);
  --xbox-brand-surface: linear-gradient(180deg, color-mix(in srgb, var(--xbox-accent) 68%, #dfffc1) 0%, color-mix(in srgb, var(--xbox-accent) 88%, #9fdb61) 48%, color-mix(in srgb, var(--xbox-accent) 72%, var(--xbox-accent-dark)) 100%);
  --xbox-pane-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0 L0 100 H99.35 C99.66 84 99.9 66 99.92 50 C99.9 34 99.66 16 99.35 0 Z'/%3E%3C/svg%3E");
  --xbox-brand-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M28 4 C245 0 755 0 972 4 Q994 6 996 28 L992 68 Q988 92 960 96 C700 92 300 92 40 96 Q12 94 8 68 L4 30 Q5 8 28 4 Z'/%3E%3C/svg%3E");
  --xbox-mobile-blade-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M3 9 C25 2 75 2 97 9 Q99 11 99 18 V82 Q99 96 94 97 C68 99 32 99 6 97 Q1 96 1 82 V18 Q1 11 3 9 Z'/%3E%3C/svg%3E");
  /* Calm satin silver from the reference: one dark separation seam rolls
     into one polished shoulder, then opens into a broad neutral face. Avoid
     repeated alternating bands so the parked blades read as molded plastic
     rather than fluted chrome. */
  --xbox-sheet-sheen-right: linear-gradient(90deg, rgba(18, 18, 18, 0.78) 0%, rgba(255, 255, 255, 0.86) 3%, rgba(255, 255, 255, 0.3) 8%, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.03) 78%, rgba(255, 255, 255, 0.18) 100%);
  --xbox-sheet-sheen-left: linear-gradient(270deg, rgba(18, 18, 18, 0.78) 0%, rgba(255, 255, 255, 0.86) 3%, rgba(255, 255, 255, 0.3) 8%, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.03) 78%, rgba(255, 255, 255, 0.18) 100%);
  --xbox-sheet-lift: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.11) 52%, rgba(255, 255, 255, 0.17) 100%);
  --xbox-sheet-depth: radial-gradient(ellipse 148% 14% at 28% 0%, rgba(255, 255, 255, 0.44), transparent 70%), radial-gradient(ellipse 92% 80% at 42% 48%, rgba(255, 255, 255, 0.04), rgba(55, 55, 55, 0.2) 66%, rgba(24, 24, 24, 0.52) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 9%, transparent 23%, rgba(37, 37, 37, 0.17) 52%, transparent 72%, rgba(255, 255, 255, 0.1) 87%, rgba(33, 33, 33, 0.2) 100%);
  --xbox-blade-cast: -14px 0 24px rgba(0, 12, 0, 0.46);
  --xbox-blade-rim: -2px 0 1px rgba(255, 255, 255, 0.96);
  --xbox-blade-rim2: -5px 0 5px rgba(40, 50, 37, 0.46);
  --xbox-blade-rim-right: 2px 0 1px rgba(255, 255, 255, 0.78);
  --xbox-blade-seam: 5px 0 6px rgba(16, 24, 15, 0.5);
  /* Colored identity caps, measured from reference/xbox-colored-desktop-1280:
     UPCOMING (right-stack) blades share one continuous molded sweep instead
     of stepping lower with each label. Across the visible blade face the hem
     rises about 28px toward the right, matching the diagonal pastel/silver
     boundary in the reference. PASSED/ACTIVE blades retain their deeper,
     item-specific inset panels so their labels remain enclosed. */
  --xbox-cap-right-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0 H100 V21 C75 22.8 36 25 0 27 Z'/%3E%3C/svg%3E");
  --xbox-cap-right-2: var(--xbox-cap-right-1);
  --xbox-cap-right-3: var(--xbox-cap-right-1);
  /* Parked/active blades use the reference's inset colored panel, with
     silver visible above and below. On Home, the upper shoulder starts at
     the measured 22% outer return and eases continuously into the 16.3%
     inner return. Keep this one broad molded sweep: local hooks read as a
     folded sheet once the normalized path is stretched to viewport height.
     A native-size pixel trace showed the rendered lower sweep ending about
     22px above the mock through the broad visible face. Its contour therefore
     retains the same control-point rhythm 2.4% lower, at
     63.65% -> 70.95% -> 83.4%, without changing the upper shoulder.
     Every parked blade now reuses this same approved molded silhouette. The
     blade identity still supplies its own color; sharing the mask prevents
     the older tabs from snapping back to the previous flat-ended cut. */
  --xbox-cap-parked-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 22 C3.47 19.72 11.98 19.67 49.3 17.57 C67.55 16.54 72.95 16.5 100 16.3 V100 H38.6 C58.5 81.64 74.33 80.25 44 70.95 C38 69.4 34 66.9 30.5 65.4 C28.5 64.4 26.5 64.8 24.5 65.6 C18 65.8 9 64.7 0 63.65 Z'/%3E%3C/svg%3E");
  --xbox-cap-parked-thoughts: var(--xbox-cap-parked-home);
  --xbox-cap-parked-pictures: var(--xbox-cap-parked-home);
  --xbox-cap-parked-links: var(--xbox-cap-parked-home);
  --xbox-cap-mask-current: var(--xbox-cap-right-1);
  /* The two stacks face the active pane. Parked/left blades keep the approved
     rightward bow; upcoming/right blades mirror only the molded shell, not
     their text or cap content. This matches the opposing contours in the
     original dashboard while avoiding rotateY/scaleX text inversions. */
  --xbox-blade-mask-right-bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M4 0 Q59 50 4 100 L56 100 Q111 50 56 0 Z'/%3E%3C/svg%3E");
  --xbox-blade-mask-left-bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M96 0 Q41 50 96 100 L44 100 Q-11 50 44 0 Z'/%3E%3C/svg%3E");
  --xbox-blade-mask: var(--xbox-blade-mask-right-bow);
  background:
    radial-gradient(ellipse 72% 68% at 45% 26%, var(--xbox-core) 0%, color-mix(in srgb, var(--xbox-core) 55%, var(--xbox-mid)) 30%, var(--xbox-mid) 56%, transparent 78%),
    radial-gradient(ellipse 120% 100% at 48% 47%, color-mix(in srgb, var(--xbox-mid) 76%, var(--xbox-deep)) 0%, var(--xbox-deep) 76%, var(--xbox-edge) 100%);
  color: var(--xbox-ink);
  font-family: "Segoe UI", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.42;
  margin: 0;
  max-width: none;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 0;
}

body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(2)[aria-current="page"]) {
  --xbox-core: #90e5ff;
  --xbox-mid: #257fb0;
  --xbox-deep: #0b3552;
  --xbox-edge: #061c2e;
  --xbox-accent: #2f9bd0;
  --xbox-accent-dark: #12506f;
  --xbox-glass: rgba(70, 168, 214, 0.5);
  --xbox-glass-strong: rgba(8, 62, 96, 0.82);
  --xbox-ink: #062334;
  --xbox-left-offset: 121px;
  --xbox-right-offset: 41px;
}

body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(3)[aria-current="page"]) {
  --xbox-core: #d5a2ff;
  --xbox-mid: #7e45aa;
  --xbox-deep: #351a50;
  --xbox-edge: #1b0b2c;
  --xbox-accent: #945fc1;
  --xbox-accent-dark: #4a236d;
  --xbox-glass: rgba(168, 108, 214, 0.5);
  --xbox-glass-strong: rgba(58, 26, 92, 0.83);
  --xbox-ink: #200e38;
  --xbox-left-offset: 177px;
  --xbox-right-offset: 0px;
}

body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) {
  --xbox-core: #c6d8de;
  --xbox-mid: #607d89;
  --xbox-deep: #26383f;
  --xbox-edge: #111c21;
  --xbox-accent: #6c8f9e;
  --xbox-accent-dark: #334d58;
  --xbox-glass: rgba(136, 172, 186, 0.52);
  --xbox-glass-strong: rgba(40, 64, 74, 0.84);
  --xbox-ink: #101f27;
  --xbox-left-offset: 233px;
  --xbox-right-offset: 0px;
}

body[data-style-mode="xbox360"]::before {
  background:
    linear-gradient(110deg, transparent 0 28%, rgba(255, 255, 255, 0.24) 39%, rgba(255, 255, 255, 0.05) 47%, transparent 58%),
    linear-gradient(112deg, transparent 0 54%, rgba(255, 255, 255, 0.13) 62%, transparent 73%),
    radial-gradient(ellipse 66% 18% at 52% 24%, rgba(255, 255, 255, 0.28), transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 54%, rgba(4, 18, 1, 0.68) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

body[data-style-mode="xbox360"] a,
body[data-style-mode="xbox360"] a:visited {
  color: var(--xbox-ink);
  text-decoration-color: color-mix(in srgb, var(--xbox-ink) 24%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body[data-style-mode="xbox360"] a:hover {
  color: color-mix(in srgb, var(--xbox-ink) 55%, black);
  text-decoration-color: currentColor;
}

body[data-style-mode="xbox360"] .desktop-only {
  display: none !important;
}

body[data-style-mode="xbox360"] .site-header {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

body[data-style-mode="xbox360"] .brand,
body[data-style-mode="xbox360"] .brand:visited {
  align-items: center;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M28 4 C245 0 755 0 972 4 Q994 6 996 28 L992 68 Q988 92 960 96 C700 92 300 92 40 96 Q12 94 8 68 L4 30 Q5 8 28 4 Z' fill='none' stroke='rgba(18,48,8,0.9)' stroke-width='5'/%3E%3Cpath d='M30 7 C246 3 754 3 970 7 Q989 9 991 29 L987 66 Q984 87 958 90 C698 86 302 86 42 90 Q17 88 13 66 L9 31 Q10 12 30 7 Z' fill='none' stroke='rgba(255,255,255,0.72)' stroke-width='2.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(ellipse 74% 130% at 82% -42%, rgba(255, 255, 255, 0.28) 0%, transparent 62%),
    var(--xbox-brand-glass),
    var(--xbox-brand-surface);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -8px 14px rgba(0, 38, 0, 0.14);
  color: rgba(239, 245, 235, 0.92);
  display: flex;
  font-family: "Barlow Semi Condensed", "Avenir Next Condensed", "Trebuchet MS", Arial, sans-serif;
  font-size: 1.82rem;
  font-weight: 500;
  min-height: 56px;
  padding: 0 34px;
  text-decoration: none;
  text-shadow: 0 2px 2px rgba(0, 24, 0, 0.58);
  -webkit-mask-image: var(--xbox-brand-mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--xbox-brand-mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  z-index: 30;
}

body[data-style-mode="xbox360"] .brand:not(.brand-link),
body[data-style-mode="xbox360"] .brand:not(.brand-link):visited {
  display: none;
}

body[data-style-mode="xbox360"] .site-nav > a,
body[data-style-mode="xbox360"] .nav-dropdown > summary {
  text-decoration: none;
}

/* Blade spines are molded silver with engraved charcoal names, per the
   reference mock. Every blade wears ONE identically shaped cap (`::before`,
   cut by --xbox-cap-mask-current). Inactive caps use neutral satin paint;
   only the current page swaps in its identity color. The reference keeps the
   surrounding molded shell neutral even when a cap is colored, so no
   identity tint is mixed into the silver substrate. */
body[data-style-mode="xbox360"] {
  --xbox-blade-tint: 0%;
  --xbox-cap-core: 78%;
  --xbox-cap-mid: 52%;
  /* Keep the recessed hem achromatic on inactive blades. The previous
     green-black bases left a faint olive line under otherwise neutral caps. */
  --xbox-cap-roll-base-1: #2e2e2e;
  --xbox-cap-roll-base-2: #1e1e1e;
  --xbox-cap-roll-base-3: #111111;
  /* Inactive blades retain the same molded cap silhouette, but the cap is
     the reference's recessed mid-grey rather than the much brighter sheet
     beneath it. The active selector below swaps this paint and its mix
     strengths to the blade identity color, matching the reference stack. */
  --xbox-cap-paint: rgb(143, 143, 143);
  --xbox-sheet-tint: rgba(255, 255, 255, 0);
}

body[data-style-mode="xbox360"] .site-nav > a:nth-child(1) {
  --xbox-patch: rgb(110, 196, 50);
  --xbox-cap-parked: var(--xbox-cap-parked-home);
}

body[data-style-mode="xbox360"] .site-nav > a:nth-child(2) {
  --xbox-patch: rgb(64, 164, 216);
  --xbox-cap-parked: var(--xbox-cap-parked-thoughts);
}

body[data-style-mode="xbox360"] .site-nav > a:nth-child(3) {
  --xbox-patch: rgb(172, 118, 214);
  --xbox-cap-parked: var(--xbox-cap-parked-pictures);
}

body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary {
  --xbox-patch: rgb(120, 156, 172);
  --xbox-cap-parked: var(--xbox-cap-parked-links);
}

body[data-style-mode="xbox360"] .nav-dropdown ul {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(207, 216, 202, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 16, 0, 0.44), inset 0 1px 0 #fff;
  color: #2e352c;
  padding: 10px 13px;
}

body[data-style-mode="xbox360"] .nav-dropdown ul a,
body[data-style-mode="xbox360"] .nav-dropdown ul a:visited {
  color: #1f4d10;
}

body[data-style-mode="xbox360"] main {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.18) 54px, rgba(255, 255, 255, 0.07) 132px, rgba(0, 34, 0, 0.08) 100%),
    radial-gradient(ellipse 76% 25% at 16% -2%, rgba(255, 255, 255, 0.34), transparent 72%),
    var(--xbox-glass);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 -24px 38px rgba(0, 31, 0, 0.2),
    0 0 0 1px rgba(18, 51, 8, 0.34),
    0 22px 42px rgba(0, 18, 0, 0.44);
  color: var(--xbox-ink);
  max-width: none;
  overflow: auto;
  padding: 22px 28px 30px;
  position: relative;
  z-index: 20;
}

/* Secondary screens have room for a more console-like reading scale. Keep
   the approved Home work tiles compact, while letting articles, lists, forms,
   and detail panels grow smoothly with the viewport. */
body[data-style-mode="xbox360"] main:not(.home-note-window) {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
  line-height: 1.5;
}

body[data-style-mode="xbox360"] main:not(.home-note-window) h1 {
  font-size: clamp(1.7rem, 1.56rem + 0.38vw, 1.95rem);
}

body[data-style-mode="xbox360"] main:not(.home-note-window) h2,
body[data-style-mode="xbox360"] main:not(.home-note-window) .tweet-archive-summary {
  font-size: clamp(1.45rem, 1.34rem + 0.3vw, 1.65rem);
}

body[data-style-mode="xbox360"] main:not(.home-note-window) h3 {
  font-size: 1.16em;
}

body[data-style-mode="xbox360"] main:not(.home-note-window) .eyebrow,
body[data-style-mode="xbox360"] main:not(.home-note-window) .kicker,
body[data-style-mode="xbox360"] main:not(.home-note-window) .meta,
body[data-style-mode="xbox360"] main:not(.home-note-window) .nft-meta,
body[data-style-mode="xbox360"] main:not(.home-note-window) .tweet-header,
body[data-style-mode="xbox360"] main:not(.home-note-window) .tweet-topic-kicker,
body[data-style-mode="xbox360"] main:not(.home-note-window) .tweet-topic-meta {
  font-size: 0.92em;
}

body[data-style-mode="xbox360"] main:not(.home-note-window) .small,
body[data-style-mode="xbox360"] main:not(.home-note-window) .note,
body[data-style-mode="xbox360"] main:not(.home-note-window) .report-note {
  font-size: 0.95em;
}

body[data-style-mode="xbox360"] h1,
body[data-style-mode="xbox360"] h2,
body[data-style-mode="xbox360"] .tweet-archive-summary {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--xbox-ink) 36%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--xbox-ink);
  font-family: "Barlow Semi Condensed", "Avenir Next Condensed", "Trebuchet MS", Arial, sans-serif;
  font-size: 1.34rem;
  font-weight: 600;
  margin: 0 0 14px;
  padding: 0 0 7px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

body[data-style-mode="xbox360"] h1 {
  font-size: 1.45rem;
}

body[data-style-mode="xbox360"] h3 {
  border-bottom: 1px solid color-mix(in srgb, var(--xbox-ink) 28%, transparent);
  color: var(--xbox-ink);
  font-family: "Barlow Semi Condensed", "Avenir Next Condensed", "Trebuchet MS", Arial, sans-serif;
  padding-bottom: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
}

body[data-style-mode="xbox360"] .eyebrow,
body[data-style-mode="xbox360"] .kicker,
body[data-style-mode="xbox360"] .meta,
body[data-style-mode="xbox360"] .nft-meta,
body[data-style-mode="xbox360"] .tweet-header,
body[data-style-mode="xbox360"] .tweet-topic-count,
body[data-style-mode="xbox360"] .tweet-topic-kicker,
body[data-style-mode="xbox360"] .tweet-topic-meta {
  color: color-mix(in srgb, var(--xbox-ink) 74%, transparent);
}

body[data-style-mode="xbox360"] main > section > ul {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--xbox-ink);
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

body[data-style-mode="xbox360"] main > section > ul > li {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 5px 12px rgba(0, 20, 0, 0.2);
  margin: 0 0 10px;
  min-height: 66px;
  padding: 12px 42px 12px 84px;
  position: relative;
}

body[data-style-mode="xbox360"] main > section > ul > li:last-child {
  margin-bottom: 0;
}

/* Links becomes a compact Xbox launch panel: four large, fully clickable
   tiles with icon wells and the same green focus glow as Home's work rows.
   The class is inert in every other style mode, where the list keeps the
   original minimal markup and rendering. */
body[data-style-mode="xbox360"] main > ul.xbox-link-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li {
  --xbox-link-glyph: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08)),
    color-mix(in srgb, var(--xbox-core) 20%, var(--xbox-glass));
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -18px 28px rgba(0, 28, 0, 0.12),
    0 0 0 1px color-mix(in srgb, var(--xbox-ink) 24%, transparent),
    0 9px 18px rgba(0, 18, 0, 0.2);
  min-width: 0;
  overflow: hidden;
  position: relative;
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li::before {
  background:
    var(--xbox-link-glyph) center / 58% 58% no-repeat,
    radial-gradient(circle at 48% 42%, rgba(147, 255, 57, 0.28), transparent 48%),
    linear-gradient(145deg, #16330e, #020700 72%);
  border: 1px solid rgba(199, 255, 125, 0.56);
  border-radius: 10px;
  box-shadow:
    inset 0 0 18px rgba(85, 210, 22, 0.18),
    0 4px 9px rgba(0, 20, 0, 0.32);
  content: "";
  height: 70px;
  left: 14px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li[data-xbox-link-icon="github"] {
  --xbox-link-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23c8ff78' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M8.5 6.5 3 12l5.5 5.5M15.5 6.5 21 12l-5.5 5.5M14.5 4 9.5 20'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li[data-xbox-link-icon="linkedin"] {
  --xbox-link-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23c8ff78' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Ccircle cx='7' cy='6.5' r='2.3'/%3E%3Cpath d='M4.7 11v8M9.3 11v8M13 19v-8M13 14.5c1-2.5 6.3-3.1 6.3 1V19'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li[data-xbox-link-icon="twitter"] {
  --xbox-link-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23c8ff78' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Cpath d='m5 4 14 16M19 4 5 20'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li[data-xbox-link-icon="email"] {
  --xbox-link-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23c8ff78' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.8'/%3E%3Cpath d='m4 7 8 6 8-6M4.5 17l5-5M19.5 17l-5-5'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li > a,
body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li > a:visited {
  align-items: center;
  box-sizing: border-box;
  color: var(--xbox-ink);
  display: flex;
  font-family: "Barlow Semi Condensed", "Avenir Next Condensed", "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(1.25rem, 1.08rem + 0.48vw, 1.62rem);
  font-weight: 600;
  min-height: 102px;
  padding: 18px 50px 18px 102px;
  position: relative;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li > a::after {
  border-right: 4px solid currentColor;
  border-top: 4px solid currentColor;
  content: "";
  height: 13px;
  opacity: 0.62;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 13px;
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li:hover,
body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li:focus-within {
  background:
    linear-gradient(180deg, rgba(247, 255, 198, 0.96), rgba(154, 222, 56, 0.92)),
    var(--xbox-glass);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(174, 255, 74, 0.72),
    0 0 18px rgba(190, 255, 66, 0.52);
}

body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li > a:focus-visible {
  outline: 3px solid rgba(236, 255, 203, 0.96);
  outline-offset: -5px;
}

body[data-style-mode="xbox360"] .xbox-single-link-item {
  cursor: pointer;
}

body[data-style-mode="xbox360"] main > section#work > ul > li[data-xbox-art="context-engine"],
body[data-style-mode="xbox360"] .xbox-preview-art[data-art="context-engine"] {
  --xbox-art-image: url("./assets/xbox360/context-engine.png");
  --xbox-art-position: 50% 50%;
}

body[data-style-mode="xbox360"] main > section#work > ul > li[data-xbox-art="quantum-computing"],
body[data-style-mode="xbox360"] .xbox-preview-art[data-art="quantum-computing"] {
  --xbox-art-image: url("./assets/xbox360/quantum-computing.png");
  --xbox-art-position: 50% 48%;
}

body[data-style-mode="xbox360"] main > section#work > ul > li[data-xbox-art="ai-consciousness"],
body[data-style-mode="xbox360"] .xbox-preview-art[data-art="ai-consciousness"] {
  --xbox-art-image: url("./assets/xbox360/ai-consciousness.png");
  --xbox-art-position: 50% 50%;
}

body[data-style-mode="xbox360"] main > section#work > ul > li[data-xbox-art="zuzalu-social-infrastructure"],
body[data-style-mode="xbox360"] .xbox-preview-art[data-art="zuzalu-social-infrastructure"] {
  --xbox-art-image: url("./assets/xbox360/zuzalu-social-infrastructure.png");
  --xbox-art-position: 50% 53%;
}

body[data-style-mode="xbox360"] main > section#work > ul > li[data-xbox-art="academic-research"],
body[data-style-mode="xbox360"] .xbox-preview-art[data-art="academic-research"] {
  --xbox-art-image: url("./assets/xbox360/academic-research.png");
  --xbox-art-position: 50% 48%;
}

body[data-style-mode="xbox360"] main > section > ul > li::before {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(0deg, rgba(4, 18, 1, 0.12), transparent 62%),
    var(--xbox-art-image, radial-gradient(circle at 50% 52%, #14380a 0 30%, #081f03 100%));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(190, 245, 120, 0.55);
  border-radius: 7px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 16, 0, 0.4);
  content: "";
  height: 58px;
  left: 10px;
  position: absolute;
  top: 12px;
  width: 58px;
}

body[data-style-mode="xbox360"] main > section > ul > li::after {
  color: color-mix(in srgb, var(--xbox-ink) 62%, transparent);
  content: "❯";
  font-size: 1.35rem;
  line-height: 1;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

body[data-style-mode="xbox360"] main > section > ul > li:hover,
body[data-style-mode="xbox360"] main > section > ul > li:focus-within {
  background: linear-gradient(180deg, #d9f76e, #9bdd2f);
  border-color: rgba(255, 255, 255, 0.9);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px #fff, 0 0 18px rgba(216, 255, 91, 0.62);
  color: #153006;
}

body[data-style-mode="xbox360"] main > section > ul > li:hover a,
body[data-style-mode="xbox360"] main > section > ul > li:focus-within a,
body[data-style-mode="xbox360"] main > section > ul > li:hover strong,
body[data-style-mode="xbox360"] main > section > ul > li:focus-within strong {
  color: #102704;
}

/* Home rows are the Xbox selection list. Give every row an unmistakable
   molded highlight on pointer hover and the equivalent keyboard-focus state. */
body[data-style-mode="xbox360"] main > section#work > ul > li {
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease;
}

body[data-style-mode="xbox360"] main > section#work > ul > li:hover,
body[data-style-mode="xbox360"] main > section#work > ul > li:focus-within {
  background:
    linear-gradient(180deg, rgba(250, 255, 203, 0.98) 0%, rgba(215, 250, 104, 0.97) 46%, rgba(144, 211, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -8px 16px rgba(62, 127, 12, 0.18),
    0 0 0 1px rgba(190, 255, 72, 0.78),
    0 0 20px rgba(210, 255, 76, 0.72);
  color: #102704;
  z-index: 1;
}

body[data-style-mode="xbox360"] main > section#work > ul > li:hover::before,
body[data-style-mode="xbox360"] main > section#work > ul > li:focus-within::before {
  border-color: rgba(224, 255, 151, 0.95);
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.72),
    0 4px 12px rgba(22, 76, 3, 0.5);
}

body[data-style-mode="xbox360"] main > section#work > ul > li:hover::after,
body[data-style-mode="xbox360"] main > section#work > ul > li:focus-within::after {
  color: #315f0d;
  transform: translate(3px, -50%);
}

body[data-style-mode="xbox360"] main > section > ul ul {
  list-style: none;
  margin: 0.55rem 0 0;
  padding-left: 0;
}

body[data-style-mode="xbox360"] main > section > ul ul li {
  border-top: 1px solid color-mix(in srgb, var(--xbox-ink) 20%, transparent);
  min-height: 0;
  padding: 7px 28px 7px 18px;
}

body[data-style-mode="xbox360"] main > section > ul ul li::before {
  background: color-mix(in srgb, var(--xbox-ink) 62%, transparent);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  height: 7px;
  left: 3px;
  top: 15px;
  width: 7px;
}

body[data-style-mode="xbox360"] main > section > ul ul li::after {
  content: "";
}

body[data-style-mode="xbox360"] main > section > ul strong {
  color: var(--xbox-ink);
  font-family: "Barlow Semi Condensed", "Avenir Next Condensed", "Trebuchet MS", Arial, sans-serif;
  font-size: 1.05em;
}

body[data-style-mode="xbox360"] .agent-panel,
body[data-style-mode="xbox360"] .argument-card,
body[data-style-mode="xbox360"] .friend-criterion,
body[data-style-mode="xbox360"] .nft-contract-details,
body[data-style-mode="xbox360"] .nft-dialog,
body[data-style-mode="xbox360"] .report-panel,
body[data-style-mode="xbox360"] .settings-panel,
body[data-style-mode="xbox360"] .tweet-atlas,
body[data-style-mode="xbox360"] .tweet-dialog,
body[data-style-mode="xbox360"] .tweet-filter,
body[data-style-mode="xbox360"] .tweet-item,
body[data-style-mode="xbox360"] .tweet-quote,
body[data-style-mode="xbox360"] .tweet-stream,
body[data-style-mode="xbox360"] .tweet-topic-detail,
body[data-style-mode="xbox360"] .tweet-topic-node {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.06) 84px, rgba(0, 0, 0, 0.06)),
    var(--xbox-glass);
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 26px rgba(0, 18, 0, 0.32);
  color: var(--xbox-ink);
}

/* Treat every painted Thoughts surface as one console-window width. Explicit
   border-box sizing keeps their outer rims aligned even though the stream,
   filter, atlas, and tweet cards use different internal padding. */
body[data-style-mode="xbox360"] .tweet-stream,
body[data-style-mode="xbox360"] .tweet-tab-panel,
body[data-style-mode="xbox360"] .tweet-filter,
body[data-style-mode="xbox360"] .tweet-atlas,
body[data-style-mode="xbox360"] .tweet-list,
body[data-style-mode="xbox360"] .tweet-item {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

body[data-style-mode="xbox360"] .agent-panel,
body[data-style-mode="xbox360"] .tweet-stream {
  padding: 10px 14px;
}

body[data-style-mode="xbox360"] .tweet-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-style-mode="xbox360"] .tweet-header strong,
body[data-style-mode="xbox360"] .tweet-quote-title,
body[data-style-mode="xbox360"] .agent-panel-label {
  color: var(--xbox-ink);
}

body[data-style-mode="xbox360"] .agent-panel-label::after,
body[data-style-mode="xbox360"] .tweet-topic-node.is-active .tweet-topic-count {
  color: #1c3a08;
}

body[data-style-mode="xbox360"] .tweet-topic-node.is-active,
body[data-style-mode="xbox360"] .tweet-tab.is-active {
  background: linear-gradient(180deg, #d9f76e, #9bdd2f);
  border-color: rgba(255, 255, 255, 0.9);
  color: #153006;
}

body[data-style-mode="xbox360"] .agent-box textarea,
body[data-style-mode="xbox360"] .prompt-output,
body[data-style-mode="xbox360"] .settings-panel select,
body[data-style-mode="xbox360"] .tweet-filter input,
body[data-style-mode="xbox360"] .tweet-filter select,
body[data-style-mode="xbox360"] input {
  background: rgba(244, 255, 236, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: inset 0 2px 5px rgba(0, 30, 0, 0.22);
  color: #102704;
}

body[data-style-mode="xbox360"] input {
  accent-color: #7eb92c;
}

body[data-style-mode="xbox360"] .agent-box button,
body[data-style-mode="xbox360"] .nft-dialog-close,
body[data-style-mode="xbox360"] .nft-load-more,
body[data-style-mode="xbox360"] .settings-panel button,
body[data-style-mode="xbox360"] .tweet-dialog-close,
body[data-style-mode="xbox360"] .tweet-filter button,
body[data-style-mode="xbox360"] .tweet-tab {
  background: linear-gradient(180deg, #ecffae 0%, #bce95d 44%, #7eb92c 54%, #99cf39 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(0, 24, 0, 0.32);
  color: #132b07;
  cursor: pointer;
  font-weight: 650;
  padding: 5px 14px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

body[data-style-mode="xbox360"] .site-settings {
  z-index: 70;
}

body[data-style-mode="xbox360"]:not(:has(main.home-note-window)) .site-settings {
  display: none;
}

body[data-style-mode="xbox360"] .settings-toggle-button {
  align-items: center;
  background:
    radial-gradient(circle at 32% 24%, #fff 0 12%, #f0f2ec 24%, #bac3b3 58%, #73806c 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(0, 18, 0, 0.56), inset 0 -5px 8px rgba(35, 45, 32, 0.36);
  color: #2c3529;
  display: inline-grid;
  height: 38px;
  justify-items: center;
  line-height: 1;
  padding: 0;
  width: 38px;
  z-index: 80;
}

body[data-style-mode="xbox360"] .settings-toggle-button .faCog {
  line-height: 1;
  margin: 0;
}

body[data-style-mode="xbox360"] .settings-toggle-button[aria-expanded="true"] {
  box-shadow: 0 0 0 4px rgba(217, 247, 110, 0.7), 0 7px 16px rgba(0, 18, 0, 0.56);
}

body[data-style-mode="xbox360"] .report-frame,
body[data-style-mode="xbox360"] .report-text-frame,
body[data-style-mode="xbox360"] .map-frame,
body[data-style-mode="xbox360"] .tweet-media-link,
body[data-style-mode="xbox360"] .nft-thumb {
  border-color: rgba(255, 255, 255, 0.48);
  border-radius: 9px;
}

body[data-style-mode="xbox360"] .site-footer {
  color: rgba(235, 255, 222, 0.8);
  margin: 16px 0 0;
  position: relative;
  z-index: 20;
}

body[data-style-mode="xbox360"] .nft-dialog::backdrop,
body[data-style-mode="xbox360"] .tweet-dialog::backdrop {
  background: rgba(3, 18, 0, 0.7);
}

body[data-style-mode="xbox360"] a:focus-visible,
body[data-style-mode="xbox360"] button:focus-visible,
body[data-style-mode="xbox360"] input:focus-visible,
body[data-style-mode="xbox360"] select:focus-visible,
body[data-style-mode="xbox360"] summary:focus-visible,
body[data-style-mode="xbox360"] textarea:focus-visible,
body[data-style-mode="xbox360"] [tabindex]:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 0 14px rgba(0, 24, 0, 0.55);
  outline: 2px solid color-mix(in srgb, var(--xbox-ink) 85%, black);
  outline-offset: 2px;
}

@keyframes xbox360-panel-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes xbox360-blade-swoosh {
  0% {
    opacity: 0.48;
    transform: perspective(1800px) translate3d(var(--xbox-swoosh-start), 0, 0) scaleX(0.965);
  }

  68% {
    opacity: 1;
    transform: perspective(1800px) translate3d(var(--xbox-swoosh-overshoot), 0, 0) scaleX(1.006);
  }

  100% {
    opacity: 1;
    transform: perspective(1800px) translate3d(0, 0, 0) scaleX(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-style-mode="xbox360"] main {
    animation: xbox360-panel-in 0.28s ease-out;
  }
}

@media (min-width: 841px) and (prefers-reduced-motion: no-preference) {
  body[data-style-mode="xbox360"] .site-nav > a,
  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary {
    animation: xbox360-blade-swoosh 620ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
    animation-delay: var(--xbox-swoosh-delay);
  }
}

@media (min-width: 841px) {
  body[data-style-mode="xbox360"] {
    /* The mock's name plate is one softly convex green shell, not a bright
       top half over a nearly black lower half. A restrained crown reflection
       and broad central trough preserve depth without introducing a hard
       horizontal split. These variables override only desktop; the approved
       mobile plate keeps the original surface above. */
    --xbox-brand-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 24%, transparent 54%, rgba(0, 30, 0, 0.035) 76%, rgba(0, 24, 0, 0.06) 100%);
    --xbox-brand-surface: linear-gradient(180deg, #70a448 0%, #61a039 28%, #59a12b 48%, #5eb322 70%, #70ce2b 100%);
    --xbox-blade-mask-current: var(--xbox-blade-mask-right-bow);
    /* A very broad convex-lighting field gives the silver shell—and the
       translucent cap painted over it—the rounded shoulder visible in the
       dashboard reference. Keep this low-frequency so it reads as molded
       depth rather than a stripe, seam, or surface texture. */
    --xbox-sheet-volume: radial-gradient(ellipse 96% 86% at 46% 45%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.045) 46%, rgba(38, 38, 38, 0.11) 78%, rgba(14, 14, 14, 0.19) 100%);
    --xbox-sheet-sheen-current: var(--xbox-sheet-sheen-right);
    /* One seam and one restrained shoulder are enough to describe each bow.
       Keeping only that pair removes the fluted, multi-rail look from the
       inactive silver sheets without changing their approved silhouettes. */
    --xbox-blade-rails-right-bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6 0 Q61 50 6 100' fill='none' stroke='rgba(24,31,23,0.58)' stroke-width='1.05'/%3E%3Cpath d='M8 0 Q63 50 8 100' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='.65'/%3E%3C/svg%3E");
    --xbox-blade-rails-left-bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M94 0 Q39 50 94 100' fill='none' stroke='rgba(24,31,23,0.58)' stroke-width='1.05'/%3E%3Cpath d='M92 0 Q37 50 92 100' fill='none' stroke='rgba(255,255,255,0.7)' stroke-width='.65'/%3E%3C/svg%3E");
    --xbox-blade-rails-current: var(--xbox-blade-rails-right-bow);
    --xbox-blade-cast-current: var(--xbox-blade-cast);
    --xbox-blade-rim-current: var(--xbox-blade-rim);
    --xbox-blade-rim2-current: var(--xbox-blade-rim2);
    --xbox-blade-rim-outer-current: var(--xbox-blade-rim-right);
    --xbox-blade-seam-current: var(--xbox-blade-seam);
    height: 100vh;
    overflow: hidden;
  }

  /* The stacks continue past the outermost nav blades: layered decorative
     sheet edges fill the far screen edges, tucked under the real blades.
     The broad silver layers continue beneath the active pane's terminal curve
     so its inset top and bottom never expose the colored page base. */
  body[data-style-mode="xbox360"]::before {
    background:
      radial-gradient(ellipse 72% 24% at 52% 24%, rgba(255, 255, 255, 0.2), transparent 72%),
      radial-gradient(ellipse 120% 100% at 50% 50%, transparent 54%, rgba(4, 18, 1, 0.68) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23bfc5bc' fill-opacity='.56'/%3E%3Cpath d='M22 0 Q40 50 22 100 L0 100 L0 0 Z' fill='%23edf0ea' fill-opacity='.24'/%3E%3Cpath d='M21.8 0 Q39.8 50 21.8 100' fill='none' stroke='rgba(55,66,54,0.42)' stroke-width='1.45'/%3E%3Cpath d='M23.8 0 Q41.8 50 23.8 100' fill='none' stroke='rgba(255,255,255,0.54)' stroke-width='0.75'/%3E%3C/svg%3E") left center / min(110px, calc(var(--xbox-left-offset) + 28px)) 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' fill='%23bfc5bc' fill-opacity='.56'/%3E%3Cpath d='M78 0 Q60 50 78 100 L100 100 L100 0 Z' fill='%23edf0ea' fill-opacity='.24'/%3E%3Cpath d='M78.2 0 Q60.2 50 78.2 100' fill='none' stroke='rgba(55,66,54,0.42)' stroke-width='1.45'/%3E%3Cpath d='M76.2 0 Q58.2 50 76.2 100' fill='none' stroke='rgba(255,255,255,0.54)' stroke-width='0.75'/%3E%3C/svg%3E") right center / 110px 100% no-repeat,
      linear-gradient(90deg, #929c90 0%, #eef1ec 42%, #c3cac0 72%, #9aa398 100%) left center / calc(var(--xbox-left-offset) + 28px) 100% no-repeat,
      linear-gradient(270deg, #929c90 0%, #eef1ec 42%, #c3cac0 72%, #9aa398 100%) right center / calc(var(--xbox-right-offset) + 28px) 100% no-repeat;
  }

  body[data-style-mode="xbox360"] .brand {
    box-shadow:
      inset 0 2px 5px rgba(255, 255, 255, 0.12),
      inset 0 -8px 14px rgba(0, 32, 0, 0.09);
    filter: drop-shadow(0 2px 0 rgba(7, 33, 2, 0.62)) drop-shadow(0 9px 12px rgba(0, 18, 0, 0.24));
    font-size: 2.5rem;
    font-weight: 400;
    left: calc(var(--xbox-left-offset) + 28px);
    min-height: clamp(82px, 10.8vh, 104px);
    padding: 0 64px;
    position: fixed;
    right: calc(var(--xbox-right-offset) + 28px);
    top: clamp(28px, 4.8vh, 46px);
    transform: perspective(1100px) rotateX(-0.45deg) scaleX(0.996);
    transform-origin: 50% 100%;
  }

  /* The reference name plate carries two restrained molded reflections that
     sweep toward its upper-right shoulder. Keep them in a separately masked
     surface layer: the plate silhouette and layout stay fixed, while the
     highlight reads as curvature in the translucent shell rather than as a
     rectangular gloss band. */
  body[data-style-mode="xbox360"] .brand::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M430 5 C620 4 820 17 970 92' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='3.2'/%3E%3Cpath d='M555 7 C720 10 855 27 968 78' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='2.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    content: "";
    filter: blur(1.1px);
    inset: 0;
    opacity: 0.56;
    pointer-events: none;
    position: absolute;
    transform: translateZ(1px);
    -webkit-mask-image: var(--xbox-brand-mask);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--xbox-brand-mask);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }

  /* On Home, the name plate belongs to the work surface rather than the
     full active sheet. Match the exact left/right content insets so neither
     molded end projects beyond the window below it. */
  body[data-style-mode="xbox360"]:has(main.home-note-window) .brand {
    left: calc(var(--xbox-left-offset) + 28px + var(--xbox-home-left-inset));
    right: calc(var(--xbox-right-offset) + 28px + var(--xbox-home-right-inset));
  }

  body[data-style-mode="xbox360"] .site-nav {
    display: block;
    margin: 0;
    position: relative;
    z-index: 10;
  }

  body[data-style-mode="xbox360"] .site-nav > .xbox-home-blade {
    display: flex;
  }

  body[data-style-mode="xbox360"] .site-nav > a,
  body[data-style-mode="xbox360"] .nav-dropdown > summary {
    --xbox-label-left-current: 28%;
    --xbox-label-top-current: var(--xbox-label-anchor);
    --xbox-swoosh-delay: 0ms;
    --xbox-swoosh-overshoot: -8px;
    --xbox-swoosh-start: 110px;
    /* Every desktop blade uses the same molded cap section. Inactive caps
       keep neutral paint, but their mask-derived hem has the same depth as
       the active blade instead of fading into the surrounding silver sheet. */
    --xbox-cap-roll-opacity: 0.44;
    --xbox-cap-dome-highlight: 0.13;
    --xbox-cap-dome-shadow: 0.08;
    align-items: center;
    backface-visibility: hidden;
    background:
      linear-gradient(var(--xbox-sheet-tint), var(--xbox-sheet-tint)),
      var(--xbox-sheet-lift),
      var(--xbox-sheet-volume),
      var(--xbox-sheet-sheen-current),
      var(--xbox-sheet-depth),
      var(--xbox-blade-rails-current) center / 100% 100% no-repeat,
      linear-gradient(180deg, #bababa 0%, #f7f7f7 9%, #dfdfdf 31%, #cbcbcb 52%, #dcdcdc 72%, #f3f3f3 88%, #b1b1b1 100%);
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: #333a32;
    display: flex;
    filter: drop-shadow(var(--xbox-blade-rim-current)) drop-shadow(var(--xbox-blade-rim2-current)) drop-shadow(var(--xbox-blade-rim-outer-current)) drop-shadow(var(--xbox-blade-seam-current)) drop-shadow(var(--xbox-blade-cast-current));
    font-family: "Saira SemiCondensed", "Barlow Semi Condensed", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.72rem;
    font-weight: 600;
    height: 100vh;
    justify-content: flex-start;
    letter-spacing: 0.07em;
    padding: 0;
    pointer-events: none;
    position: fixed;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 -1px 1px rgba(28, 36, 26, 0.28);
    text-transform: uppercase;
    top: 0;
    transform: perspective(1800px) translate3d(0, 0, 0);
    transform-style: preserve-3d;
    width: var(--xbox-blade-width);
    will-change: transform;
    writing-mode: vertical-rl;
    z-index: 12;
    -webkit-mask-image: var(--xbox-blade-mask-current);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--xbox-blade-mask-current);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }

  /* The active page's blade lifts slightly and wears a stronger—but still
     pastel—cap, like the dashboard's current tab. */
  body[data-style-mode="xbox360"] .site-nav > a[aria-current="page"],
  body[data-style-mode="xbox360"] .nav-dropdown > summary[aria-current="page"] {
    filter: drop-shadow(var(--xbox-blade-rim-current)) drop-shadow(var(--xbox-blade-rim2-current)) drop-shadow(var(--xbox-blade-rim-outer-current)) drop-shadow(var(--xbox-blade-seam-current)) drop-shadow(var(--xbox-blade-cast-current)) brightness(1.05);
    --xbox-cap-paint: var(--xbox-patch);
    --xbox-cap-core: 74%;
    --xbox-cap-mid: 48%;
    /* Preserve the approved identity-colored trough on the active blade. */
    --xbox-cap-roll-base-1: #273128;
    --xbox-cap-roll-base-2: #192019;
    --xbox-cap-roll-base-3: #0e120e;
    --xbox-cap-roll-depth: clamp(7px, 1vh, 10px);
    --xbox-cap-roll-opacity: 0.44;
    --xbox-cap-dome-highlight: 0.21;
    --xbox-cap-dome-shadow: 0.13;
  }

  /* Masks shape pixels, not hits: the label is the pointer target so clicks
     always land on what is visible. Keyboard focus stays on the anchor. */
  body[data-style-mode="xbox360"] .site-nav > a > .xbox-blade-label,
  body[data-style-mode="xbox360"] .nav-dropdown > summary > .xbox-blade-label {
    cursor: pointer;
    left: var(--xbox-label-left-current);
    line-height: 1;
    padding: 18px 2px;
    pointer-events: auto;
    position: absolute;
    top: var(--xbox-label-top-current);
    writing-mode: vertical-rl;
  }

  /* Render desktop labels on an unmasked plane above the molded sheets. The
     shells retain their measured curves while every glyph remains readable
     at the reference-aligned edge position. Original labels are restored by
     the mobile rules below. */
  body[data-style-mode="xbox360"] .site-nav > a > .xbox-blade-label,
  body[data-style-mode="xbox360"] .nav-dropdown > summary > .xbox-blade-label {
    visibility: hidden;
  }

  body[data-style-mode="xbox360"] .site-nav > .xbox-blade-label-overlay {
    color: #333a32;
    cursor: pointer;
    display: block;
    font-family: "Saira SemiCondensed", "Barlow Semi Condensed", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.72rem;
    font-weight: 600;
    left: 0;
    letter-spacing: 0.07em;
    line-height: 1;
    padding: 18px 2px;
    pointer-events: auto;
    position: fixed;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 -1px 1px rgba(28, 36, 26, 0.28);
    text-transform: uppercase;
    top: calc(var(--xbox-label-anchor) + 24px);
    writing-mode: vertical-rl;
    z-index: 40;
  }

  body[data-style-mode="xbox360"] .site-nav > .xbox-blade-label-overlay[data-xbox-blade-index="1"] {
    left: calc(var(--xbox-left-stack-inset) + var(--xbox-parked-label-inset));
    top: calc(var(--xbox-label-anchor) + 81px);
    transform: translateY(-50%);
  }

  body[data-style-mode="xbox360"] .site-nav > .xbox-blade-label-overlay[data-xbox-blade-index="2"] {
    left: calc(100vw - var(--xbox-blade-step) * 2 - var(--xbox-right-stack-inset) - var(--xbox-blade-width) + var(--xbox-upcoming-label-inset));
    top: var(--xbox-upcoming-label-anchor);
  }

  body[data-style-mode="xbox360"] .site-nav > .xbox-blade-label-overlay[data-xbox-blade-index="3"] {
    left: calc(100vw - var(--xbox-blade-step) - var(--xbox-right-stack-inset) - var(--xbox-blade-width) + var(--xbox-upcoming-label-inset));
    top: calc(var(--xbox-upcoming-label-anchor) + var(--xbox-upcoming-label-cascade));
  }

  body[data-style-mode="xbox360"] .site-nav > .xbox-blade-label-overlay[data-xbox-blade-index="4"] {
    left: calc(100vw - var(--xbox-right-stack-inset) - var(--xbox-blade-width) + var(--xbox-upcoming-label-inset));
    top: calc(var(--xbox-upcoming-label-anchor) + var(--xbox-upcoming-label-cascade) * 2);
  }

  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="2"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="3"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="3"] > .xbox-blade-label-overlay[data-xbox-blade-index="3"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="3"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="4"] {
    top: calc(var(--xbox-label-anchor) + 24px);
  }

  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="2"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="3"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"] {
    left: calc(var(--xbox-left-stack-inset) + var(--xbox-blade-step) + var(--xbox-parked-label-inset));
  }

  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="3"] > .xbox-blade-label-overlay[data-xbox-blade-index="3"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="3"] {
    left: calc(var(--xbox-left-stack-inset) + var(--xbox-blade-step) * 2 + var(--xbox-parked-label-inset));
  }

  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="4"] {
    left: calc(var(--xbox-left-stack-inset) + var(--xbox-blade-step) * 3 + var(--xbox-parked-label-inset));
  }

  /* Parked names share one optical centre instead of one top edge. This
     keeps HOME fixed while lifting the longer THOUGHTS and PICTURES words
     into the middle of the same molded cap, matching the dashboard labels. */
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="2"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="3"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="3"] > .xbox-blade-label-overlay[data-xbox-blade-index="3"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="2"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="3"],
  body[data-style-mode="xbox360"] .site-nav[data-xbox-current-index="4"] > .xbox-blade-label-overlay[data-xbox-blade-index="4"] {
    top: calc(var(--xbox-label-anchor) + 81px);
    transform: translateY(-50%);
  }

  /* The identity cap: pale wash at the screen top saturating into the body
     color, cut by the per-slot/per-item hem mask. It paints over the finished
     silver sheet (negative z-index draws above the background, under the
     name), so the molding strokes glint through the color like the mock.
     Drop-shadows follow the mask: they trace the hem with the white molded
     shoulder visible under every colored cut. */
  body[data-style-mode="xbox360"] .site-nav > a::before,
  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary::before {
    background:
      radial-gradient(ellipse 120% 12% at 34% 0%, rgba(255, 255, 255, 0.38), transparent 72%),
      /* A wide, textureless dome highlight and a gentle lower falloff make
         the identity paint read as molded translucent plastic. Active paint
         carries a little more depth; neutral caps keep the same surface with
         quieter values. */
      radial-gradient(ellipse 112% 46% at 42% 12%, rgba(255, 255, 255, var(--xbox-cap-dome-highlight)), transparent 74%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 34%, rgba(10, 14, 9, var(--xbox-cap-dome-shadow)) 100%),
      /* A blade is a shallow convex shell: a broad off-centre highlight and
         darker shoulders make both the active paint and neutral parked caps
         turn toward the viewer without adding a hard stripe or texture. */
      linear-gradient(90deg, rgba(22, 26, 21, 0.18) 0%, rgba(255, 255, 255, 0.08) 11%, rgba(255, 255, 255, 0.24) 32%, rgba(255, 255, 255, 0.1) 50%, rgba(18, 22, 17, 0.04) 70%, rgba(12, 15, 12, 0.24) 100%),
      linear-gradient(112deg, rgba(255, 255, 255, 0.11) 0%, transparent 27%, transparent 63%, rgba(12, 16, 12, 0.08) 100%),
      radial-gradient(ellipse 88% 62% at 38% 47%, color-mix(in srgb, var(--xbox-cap-paint) 22%, transparent) 0%, color-mix(in srgb, var(--xbox-cap-paint) 6%, transparent) 46%, transparent 76%),
      linear-gradient(90deg, transparent 0 74%, color-mix(in srgb, var(--xbox-cap-paint) 10%, transparent) 80%, color-mix(in srgb, var(--xbox-cap-paint) 62%, black) 96%, color-mix(in srgb, var(--xbox-cap-paint) 55%, black) 100%),
      linear-gradient(90deg, transparent 0 55%, color-mix(in srgb, var(--xbox-cap-paint) 8%, transparent) 65%, color-mix(in srgb, var(--xbox-cap-paint) 58%, transparent) 82%, color-mix(in srgb, var(--xbox-cap-paint) 86%, transparent) 92%, var(--xbox-cap-paint) 100%),
      radial-gradient(ellipse 100% 48% at 74% 4%, rgba(255, 255, 255, 0.11), transparent 72%),
      radial-gradient(ellipse 148% 18% at 18% 1%, rgba(255, 255, 255, 0.15), transparent 74%),
      linear-gradient(180deg, transparent 0 16%, rgba(28, 34, 27, 0.06) 32%, transparent 57%, rgba(14, 17, 13, 0.1) 100%),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--xbox-cap-paint) var(--xbox-cap-mid), transparent) 0%,
        color-mix(in srgb, var(--xbox-cap-paint) var(--xbox-cap-core), transparent) 14%,
        color-mix(in srgb, var(--xbox-cap-paint) var(--xbox-cap-core), transparent) 100%
      );
    content: "";
    filter:
      saturate(1.08)
      brightness(1.03)
      drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.9))
      drop-shadow(0 -3px 0 rgba(38, 49, 36, 0.18))
      drop-shadow(0 2px 0 rgba(255, 255, 255, 0.96))
      drop-shadow(0 3px 0 rgba(38, 49, 36, 0.2))
      drop-shadow(0 5px 3px rgba(255, 255, 255, 0.14));
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
    -webkit-mask-image: var(--xbox-cap-mask-current);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--xbox-cap-mask-current);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }

  /* Reuse the exact cap mask to mold its lower seam: subtracting a copy
     shifted toward the screen top leaves only the cap's inside hem. This
     supplies the dark rolled trough and polished shoulder visible in the
     reference without introducing a second, independently drawn contour. */
  body[data-style-mode="xbox360"] .site-nav > a::after,
  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary::after {
    --xbox-cap-roll-depth-current: var(--xbox-cap-roll-depth, clamp(5px, 0.7vh, 7px));
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--xbox-cap-paint) 50%, var(--xbox-cap-roll-base-1)) 0%,
        color-mix(in srgb, var(--xbox-cap-paint) 42%, var(--xbox-cap-roll-base-2)) 76%,
        color-mix(in srgb, var(--xbox-cap-paint) 32%, var(--xbox-cap-roll-base-3)) 100%
      );
    content: "";
    filter:
      drop-shadow(0 2px 0 rgba(255, 255, 255, 0.82))
      drop-shadow(0 4px 2px rgba(255, 255, 255, 0.32));
    inset: 0;
    opacity: var(--xbox-cap-roll-opacity, 0.06);
    pointer-events: none;
    position: absolute;
    z-index: -1;
    -webkit-mask-composite: source-out;
    -webkit-mask-image: var(--xbox-cap-mask-current), var(--xbox-cap-mask-current);
    -webkit-mask-position: 0 0, 0 calc(-1 * var(--xbox-cap-roll-depth-current));
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-composite: subtract;
    mask-image: var(--xbox-cap-mask-current), var(--xbox-cap-mask-current);
    mask-position: 0 0, 0 calc(-1 * var(--xbox-cap-roll-depth-current));
    mask-repeat: no-repeat, no-repeat;
    mask-size: 100% 100%, 100% 100%;
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(1) {
    --xbox-cap-roll-depth: clamp(7px, 1vh, 10px);
    --xbox-cap-roll-opacity: 0.44;
    --xbox-swoosh-overshoot: 8px;
    --xbox-swoosh-start: -110px;
    left: var(--xbox-left-stack-inset);
    --xbox-label-top-current: calc(var(--xbox-label-anchor) + 24px);
    z-index: 21;
    --xbox-cap-mask-current: var(--xbox-cap-parked);
  }

  /* Upcoming blades live on the right side of the pane, so their molded bow
     faces left toward the content. Mirror the mask, contour rails, satin
     shoulder, and cast-shadow direction as a unit; the element itself is not
     transformed, which keeps the vertical label readable and the cap stable. */
  body[data-style-mode="xbox360"] .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"] .site-nav > a:nth-child(3),
  body[data-style-mode="xbox360"] .site-nav > a:nth-child(4),
  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary {
    --xbox-blade-mask-current: var(--xbox-blade-mask-left-bow);
    /* The reference keeps its upcoming sheets satin-silver through the lower
       barrel: only the narrow longitudinal seams fall to charcoal. Preserve
       the brighter crown and mid-shoulder turn established in v162, then let
       the broad face recover toward silver at the screen bottom instead of
       darkening the entire sheet. Keep this local to blades still parked on
       the right: the approved left stack, cap masks, label plane, and bow
       remain unchanged. */
    --xbox-sheet-lift: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.16) 52%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 0.28) 100%);
    --xbox-sheet-volume: radial-gradient(ellipse 102% 88% at 40% 34%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.09) 38%, rgba(42, 42, 42, 0.06) 69%, rgba(12, 12, 12, 0.05) 100%);
    /* Keep the upcoming face bright, but use the same restrained one-seam
       satin model as the passed stack. */
    --xbox-sheet-sheen-current: linear-gradient(270deg, rgba(18, 18, 18, 0.8) 0%, rgba(255, 255, 255, 0.9) 3%, rgba(255, 255, 255, 0.34) 8%, rgba(255, 255, 255, 0.07) 20%, rgba(255, 255, 255, 0.04) 78%, rgba(255, 255, 255, 0.22) 100%);
    --xbox-blade-rails-current: var(--xbox-blade-rails-left-bow);
    --xbox-blade-cast-current: 14px 0 24px rgba(0, 12, 0, 0.46);
    --xbox-blade-rim-current: 2px 0 1px rgba(255, 255, 255, 0.96);
    --xbox-blade-rim2-current: 5px 0 5px rgba(40, 50, 37, 0.46);
    --xbox-blade-rim-outer-current: -2px 0 1px rgba(255, 255, 255, 0.78);
    --xbox-blade-seam-current: -7px 0 3px rgba(16, 24, 15, 0.74);
    /* The right stack overlaps outward toward the screen edge, as in the
       reference. Center the unmirrored label in the 56px left slice that the
       following blade leaves exposed; 9% also prevents the narrower 1024px
       stack from clipping the final glyph under the next blade. */
    --xbox-label-left-current: 9%;
    --xbox-label-top-current: var(--xbox-upcoming-label-anchor);
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(2) {
    --xbox-swoosh-delay: 45ms;
    right: calc(var(--xbox-blade-step) * 2 + var(--xbox-right-stack-inset));
    z-index: 22;
    --xbox-cap-mask-current: var(--xbox-cap-right-1);
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(3) {
    --xbox-swoosh-delay: 90ms;
    right: calc(var(--xbox-blade-step) + var(--xbox-right-stack-inset));
    z-index: 23;
    --xbox-cap-mask-current: var(--xbox-cap-right-2);
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(4) {
    --xbox-swoosh-delay: 135ms;
    right: calc(var(--xbox-blade-step) + var(--xbox-right-stack-inset));
    z-index: 24;
    --xbox-cap-mask-current: var(--xbox-cap-right-2);
  }

  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary {
    --xbox-swoosh-delay: 180ms;
    right: var(--xbox-right-stack-inset);
    z-index: 25;
    --xbox-cap-mask-current: var(--xbox-cap-right-3);
  }

  /* Blades already passed park on the left stack and rise toward the center.
     Restore the approved right-facing shell when an upcoming blade moves
     across the pane; mobile uses its own independent dock mask below. */
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(2)[aria-current="page"]) .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(3)[aria-current="page"]) .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(3)[aria-current="page"]) .site-nav > a:nth-child(3),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(4)[aria-current="page"]) .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(4)[aria-current="page"]) .site-nav > a:nth-child(3),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(4)[aria-current="page"]) .site-nav > a:nth-child(4),
  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > a:nth-child(3),
  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > a:nth-child(4),
  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > .nav-dropdown > summary {
    --xbox-cap-roll-depth: clamp(7px, 1vh, 10px);
    --xbox-cap-roll-opacity: 0.44;
    --xbox-swoosh-overshoot: 8px;
    --xbox-swoosh-start: -110px;
    --xbox-blade-mask-current: var(--xbox-blade-mask-right-bow);
    --xbox-sheet-lift: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.11) 52%, rgba(255, 255, 255, 0.17) 100%);
    --xbox-sheet-volume: radial-gradient(ellipse 96% 86% at 46% 45%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.045) 46%, rgba(38, 38, 38, 0.11) 78%, rgba(14, 14, 14, 0.19) 100%);
    --xbox-sheet-sheen-current: var(--xbox-sheet-sheen-right);
    --xbox-blade-rails-current: var(--xbox-blade-rails-right-bow);
    --xbox-blade-cast-current: var(--xbox-blade-cast);
    --xbox-blade-rim-current: var(--xbox-blade-rim);
    --xbox-blade-rim2-current: var(--xbox-blade-rim2);
    --xbox-blade-rim-outer-current: var(--xbox-blade-rim-right);
    --xbox-blade-seam-current: var(--xbox-blade-seam);
    --xbox-label-left-current: 28%;
    --xbox-label-top-current: calc(var(--xbox-label-anchor) + 24px);
    right: auto;
    --xbox-cap-mask-current: var(--xbox-cap-parked);
  }

  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(2)[aria-current="page"]) .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(3)[aria-current="page"]) .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(4)[aria-current="page"]) .site-nav > a:nth-child(2),
  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > a:nth-child(2) {
    left: calc(var(--xbox-blade-step) + var(--xbox-left-stack-inset));
    z-index: 22;
  }

  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(3)[aria-current="page"]) .site-nav > a:nth-child(3),
  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(4)[aria-current="page"]) .site-nav > a:nth-child(3),
  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > a:nth-child(3) {
    left: calc(var(--xbox-blade-step) * 2 + var(--xbox-left-stack-inset));
    z-index: 23;
  }

  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(4)[aria-current="page"]) .site-nav > a:nth-child(4),
  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > a:nth-child(4) {
    left: calc(var(--xbox-blade-step) * 3 + var(--xbox-left-stack-inset));
    z-index: 24;
  }

  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) .site-nav > .nav-dropdown > summary {
    left: calc(var(--xbox-blade-step) * 3 + var(--xbox-left-stack-inset));
    z-index: 24;
  }

  /* Upcoming names fan only slightly downward. Their differing word lengths
     then produce the nearly level optical centers visible in the mock. */
  body[data-style-mode="xbox360"] .site-nav > a:nth-child(3) {
    --xbox-label-top-current: calc(var(--xbox-upcoming-label-anchor) + var(--xbox-upcoming-label-cascade));
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(4) {
    --xbox-label-top-current: calc(var(--xbox-upcoming-label-anchor) + var(--xbox-upcoming-label-cascade) * 2);
  }

  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary {
    --xbox-label-top-current: calc(var(--xbox-upcoming-label-anchor) + var(--xbox-upcoming-label-cascade) * 2);
  }

  body[data-style-mode="xbox360"]::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 9%, transparent 24%, rgba(0, 0, 0, 0.05) 56%, transparent 76%, rgba(0, 0, 0, 0.24) 100%),
      radial-gradient(ellipse 78% 20% at 42% 0%, rgba(255, 255, 255, 0.4), transparent 72%),
      /* One broad, off-axis reflection turns the identity-colored pane into
         a shallow molded shell. Keep it textureless: the dashboard plastic
         is satin and softly illuminated, not noisy or speckled. */
      radial-gradient(ellipse 88% 76% at 42% 38%, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.025) 43%, transparent 74%),
      radial-gradient(ellipse 108% 82% at 47% 42%, color-mix(in srgb, var(--xbox-core) 28%, transparent) 0%, transparent 58%, color-mix(in srgb, var(--xbox-accent-dark) 36%, transparent) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--xbox-accent-dark) 42%, transparent) 0%, transparent 9%, transparent 91%, color-mix(in srgb, var(--xbox-accent-dark) 42%, transparent) 100%),
      linear-gradient(110deg, rgba(255, 255, 255, 0.14) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, 0.12) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 100 H99.35 C99.66 84 99.9 66 99.92 50 C99.9 34 99.66 16 99.35 0 Z' fill='none' stroke='rgba(12,43,5,0.58)' stroke-width='1.1'/%3E%3Cpath d='M.4 0 L.4 100 M98.95 0 C99.26 16 99.5 34 99.52 50 C99.5 66 99.26 84 98.95 100' fill='none' stroke='rgba(255,255,255,0.76)' stroke-width='.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    background-color: color-mix(in srgb, var(--xbox-accent) 74%, var(--xbox-core));
    bottom: -24px;
    content: "";
    filter: none;
    /* Bleed four pixels under each parked blade so the anti-aliased mask
       terminals cannot expose the neutral backing at the pane seams. */
    left: calc(var(--xbox-left-offset) + 24px);
    pointer-events: none;
    position: fixed;
    right: calc(var(--xbox-right-offset) + 24px);
    top: -24px;
    z-index: 4;
    transform: perspective(1800px) rotateX(0.35deg) scaleY(1.006);
    transform-origin: 50% 50%;
    -webkit-mask-image: var(--xbox-pane-mask);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--xbox-pane-mask);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }

  body[data-style-mode="xbox360"] main {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    bottom: 0;
    box-sizing: border-box;
    box-shadow: none;
    left: calc(var(--xbox-left-offset) + 28px);
    position: fixed;
    right: calc(var(--xbox-right-offset) + 28px);
    top: clamp(124px, 17.5vh, 165px);
  }

  /* The active sheet curves inward at both sides. Keep secondary-page
     controls and long-form content inside that safe area instead of letting
     rectangular children press into (or visually cross) the blade edges. */
  body[data-style-mode="xbox360"] main:not(.home-note-window) {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: clamp(80px, 4.25vw, 92px);
    padding-right: clamp(92px, 4.75vw, 104px);
  }

  body[data-style-mode="xbox360"] main:not(.home-note-window) > *,
  body[data-style-mode="xbox360"] main:not(.home-note-window) .mode-checkpoint,
  body[data-style-mode="xbox360"] main:not(.home-note-window) .mode-checkpoint-button {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  /* The content scrolls directly over the single molded blade substrate.
     Main must not blur or repaint that substrate: a transparent element with
     backdrop-filter still produces a hard rectangular compositing boundary. */
  body[data-style-mode="xbox360"] main.home-note-window {
    padding-left: var(--xbox-home-left-inset);
    padding-right: var(--xbox-home-right-inset);
    top: clamp(124px, 17.5vh, 165px);
  }

  /* Each approved Home pane already carries its own molded rim. Do not add a
     third wrapper border around the pair: it continues below the shorter
     preview pane and reads as a stray rectangular edge. */
  body[data-style-mode="xbox360"] main.home-note-window::before {
    display: none;
  }

  /* Secondary content is inset glass, not a stack of hard rectangles. The
     larger curved rims and asymmetric highlights echo the reference's molded
     tiles while keeping each surface within the active blade viewport. */
  body[data-style-mode="xbox360"] main:not(.home-note-window) :is(
    .agent-panel,
    .argument-card,
    .friend-criterion,
    .nft-contract-details,
    .report-panel,
    .tweet-atlas,
    .tweet-dialog,
    .tweet-filter,
    .tweet-item,
    .tweet-quote,
    .tweet-stream,
    .tweet-topic-detail
  ) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 72px, transparent 46%),
      radial-gradient(ellipse 92% 32% at 16% 0%, rgba(255, 255, 255, 0.28), transparent 72%),
      linear-gradient(145deg, color-mix(in srgb, var(--xbox-core) 16%, transparent), color-mix(in srgb, var(--xbox-accent-dark) 18%, transparent)),
      var(--xbox-glass);
    border: 2px solid rgba(255, 255, 255, 0.64);
    border-radius: clamp(15px, 1.2vw, 20px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 1px 0 0 rgba(255, 255, 255, 0.34),
      inset -1px 0 0 rgba(12, 35, 8, 0.2),
      inset 0 -18px 30px rgba(0, 24, 0, 0.12),
      0 0 0 1px color-mix(in srgb, var(--xbox-ink) 22%, transparent),
      0 10px 22px rgba(0, 18, 0, 0.24);
  }

  body[data-style-mode="xbox360"] main:not(.home-note-window) :is(h1, h2, h3) {
    border-bottom-color: transparent;
    border-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--xbox-ink) 32%, transparent) 7%, color-mix(in srgb, var(--xbox-ink) 32%, transparent) 76%, transparent 100%) 1;
  }

  body[data-style-mode="xbox360"]:has(.brand:not(.brand-link)) main {
    top: 24px;
  }

  body[data-style-mode="xbox360"] main > section#work {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  }

  body[data-style-mode="xbox360"] .xbox-preview {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0, rgba(255, 255, 255, 0.12) 72px, rgba(0, 30, 0, 0.08) 100%),
      radial-gradient(ellipse 90% 28% at 12% 0%, rgba(255, 255, 255, 0.24), transparent 72%),
      rgba(168, 224, 105, 0.2);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 2px solid rgba(255, 255, 255, 0.66);
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 0 0 1px rgba(255, 255, 255, 0.16),
      inset 0 -18px 30px rgba(0, 35, 0, 0.14),
      0 0 0 1px rgba(17, 54, 7, 0.35),
      0 10px 22px rgba(0, 20, 0, 0.24);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 16px 18px 20px;
    position: sticky;
    top: 0;
  }

  /* The 360 reference treats the work list as one molded glass panel. Rows
     share its rim and separators; only the current row becomes a bright tile. */
  body[data-style-mode="xbox360"] main > section#work > ul {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.12) 68px, rgba(0, 32, 0, 0.08) 100%),
      radial-gradient(ellipse 92% 22% at 10% 0%, rgba(255, 255, 255, 0.24), transparent 72%),
      rgba(153, 218, 81, 0.18);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 0 0 1px rgba(255, 255, 255, 0.15),
      inset 0 -22px 34px rgba(0, 32, 0, 0.14),
      0 0 0 1px rgba(17, 54, 7, 0.35),
      0 10px 22px rgba(0, 20, 0, 0.24);
    overflow: hidden;
    padding: 8px;
  }

  body[data-style-mode="xbox360"] main > section#work > ul > li {
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--xbox-ink) 22%, transparent);
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
    margin: 0;
  }

  body[data-style-mode="xbox360"] main > section#work > ul > li:last-child {
    border-bottom: 0;
    box-shadow: none;
  }

  body[data-style-mode="xbox360"] main > section#work > ul > li:first-child {
    background:
      linear-gradient(180deg, rgba(244, 255, 185, 0.96) 0%, rgba(210, 247, 102, 0.94) 46%, rgba(145, 211, 44, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -8px 16px rgba(62, 127, 12, 0.16),
      0 0 0 1px rgba(183, 255, 74, 0.7),
      0 0 16px rgba(206, 255, 79, 0.58);
    color: #153006;
  }

  body[data-style-mode="xbox360"] main > section#work > ul:has(> li:hover, > li:focus-within) > li:first-child:not(:hover):not(:focus-within) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--xbox-ink) 22%, transparent);
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
    color: var(--xbox-ink);
  }

  body[data-style-mode="xbox360"] .xbox-preview-art {
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(214, 255, 156, 0.55);
    border-radius: 8px;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55);
    display: block;
    background:
      linear-gradient(165deg, rgba(255, 255, 255, 0.2), transparent 30%),
      linear-gradient(0deg, rgba(3, 16, 1, 0.18), transparent 58%),
      var(--xbox-art-image);
    background-position: center, center, var(--xbox-art-position, center);
    background-repeat: no-repeat;
    background-size: cover;
  }

  body[data-style-mode="xbox360"] .xbox-preview-title {
    color: var(--xbox-ink);
    font-family: "Barlow Semi Condensed", "Avenir Next Condensed", "Trebuchet MS", Arial, sans-serif;
    font-size: 1.42rem;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  body[data-style-mode="xbox360"] .xbox-preview-body {
    color: color-mix(in srgb, var(--xbox-ink) 88%, transparent);
    font-size: 1.02rem;
    line-height: 1.5;
  }

  body[data-style-mode="xbox360"] .nav-dropdown ul {
    max-height: calc(100vh - 130px);
    overflow: auto;
    position: fixed;
    right: calc(var(--xbox-right-offset) + 34px);
    top: 98px;
    width: 190px;
    z-index: 60;
  }

  /* The cog sits at the header banner's right end — the 360's system slot —
     where chrome reads clearly on the green instead of hiding on the blades. */
  body[data-style-mode="xbox360"] .settings-toggle-button {
    position: fixed;
    right: calc(var(--xbox-right-offset) + 42px + var(--xbox-home-right-inset));
    top: calc(clamp(28px, 4.8vh, 46px) + clamp(22px, 3.1vh, 33px));
  }

  body[data-style-mode="xbox360"] .settings-panel {
    bottom: auto;
    max-height: calc(100vh - 120px);
    overflow: auto;
    position: fixed;
    right: calc(var(--xbox-right-offset) + 42px + var(--xbox-home-right-inset));
    top: 84px;
    z-index: 80;
  }
}

/* Shared first-step choices for picture and thoughts collections. */
.mode-checkpoint {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0 1.5rem;
}

.mode-checkpoint-button {
  align-items: center;
  background: #fff;
  border: 1px solid #222;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  justify-content: space-between;
  min-height: 108px;
  padding: 18px 20px;
  text-align: left;
  width: 100%;
}

.mode-checkpoint-button::after {
  content: ">";
  font-weight: 400;
}

.mode-checkpoint-button:hover,
.mode-checkpoint-button:focus-visible {
  background: #f2f2f2;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.mode-checkpoint-button.is-active,
.mode-checkpoint-button[aria-selected="true"] {
  background: #111;
  color: #fff;
}

[data-thought-panel][hidden],
[data-picture-panel][hidden] {
  display: none !important;
}

.picture-collection,
.thought-collection {
  margin-top: 1.25rem;
}

.picture-empty {
  grid-column: 1 / -1;
}

body[data-style-mode="windows95"] .mode-checkpoint-button,
body[data-style-mode="windows95desktop"] .mode-checkpoint-button {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  border-radius: 0;
  box-shadow: 1px 1px 0 #000;
  color: #000;
  min-height: 92px;
}

body[data-style-mode="windows95"] .mode-checkpoint-button:active,
body[data-style-mode="windows95"] .mode-checkpoint-button.is-active,
body[data-style-mode="windows95desktop"] .mode-checkpoint-button:active,
body[data-style-mode="windows95desktop"] .mode-checkpoint-button.is-active {
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px 0 #000;
}

body[data-style-mode="windows95"] .mode-checkpoint-button.is-active,
body[data-style-mode="windows95desktop"] .mode-checkpoint-button.is-active {
  background: #000080;
  color: #fff;
}

body[data-style-mode="xbox360"] .mode-checkpoint {
  gap: 14px;
  margin: 0.85rem 0 1.4rem;
}

body[data-style-mode="xbox360"] .mode-checkpoint-button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 237, 226, 0.96) 46%, rgba(191, 201, 184, 0.98) 54%, rgba(219, 225, 213, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(45, 64, 38, 0.28),
    0 8px 18px rgba(0, 25, 0, 0.25);
  color: #263621;
  min-height: 104px;
  padding: 18px 22px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

body[data-style-mode="xbox360"] .mode-checkpoint-button:hover,
body[data-style-mode="xbox360"] .mode-checkpoint-button:focus-visible,
body[data-style-mode="xbox360"] .mode-checkpoint-button.is-active {
  background:
    linear-gradient(180deg, #eaff9c 0%, #b9ef51 43%, #61b71d 54%, #83ce2f 100%);
  border-color: #fff;
  color: #153006;
  outline-color: #dfff67;
}

@media (max-width: 560px) {
  .mode-checkpoint {
    gap: 8px;
  }

  .mode-checkpoint-button,
  body[data-style-mode="xbox360"] .mode-checkpoint-button {
    font-size: 1.2rem;
    min-height: 84px;
    padding: 14px;
  }
}

/* Mid-width desktop: the full stacks don't fit, so the shell slims down —
   narrower sheets, no outer decor inset, one content column, no preview. */
@media (min-width: 841px) and (max-width: 1239px) {
  body[data-style-mode="xbox360"] {
    --xbox-blade-width: 96px;
    --xbox-blade-step: 36px;
    --xbox-label-inset: 28px;
    --xbox-left-stack-inset: 12px;
    --xbox-right-stack-inset: 12px;
    --xbox-left-offset: 44px;
    --xbox-right-offset: 116px;
    --xbox-parked-label-inset: 27px;
    --xbox-upcoming-label-inset: 9px;
  }

  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(2)[aria-current="page"]) {
    --xbox-left-offset: 80px;
    --xbox-right-offset: 80px;
  }

  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(3)[aria-current="page"]) {
    --xbox-left-offset: 116px;
    --xbox-right-offset: 44px;
  }

  body[data-style-mode="xbox360"]:has(.site-nav > a:nth-child(4)[aria-current="page"]) {
    --xbox-left-offset: 152px;
    --xbox-right-offset: 44px;
  }

  body[data-style-mode="xbox360"]:has(.nav-dropdown > summary[aria-current="page"]) {
    --xbox-left-offset: 152px;
    --xbox-right-offset: 0px;
  }

  body[data-style-mode="xbox360"] .site-nav > a,
  body[data-style-mode="xbox360"] .nav-dropdown > summary,
  body[data-style-mode="xbox360"] .site-nav > .xbox-blade-label-overlay {
    font-size: 1.42rem;
  }

  body[data-style-mode="xbox360"] main > section#work {
    display: block;
  }

  body[data-style-mode="xbox360"] main.home-note-window > section#work > ul > li {
    --xbox-work-art-size: clamp(96px, 9vw, 116px);
    min-height: calc(var(--xbox-work-art-size) + 24px);
    padding-left: calc(var(--xbox-work-art-size) + 30px);
  }

  body[data-style-mode="xbox360"] main.home-note-window > section#work > ul > li::before {
    height: var(--xbox-work-art-size);
    width: var(--xbox-work-art-size);
  }

  body[data-style-mode="xbox360"] .xbox-preview {
    display: none;
  }
}

@media (max-width: 840px) {
  body[data-style-mode="xbox360"] {
    --xbox-blade-tint: 14%;
    --xbox-mobile-blade-height: 46px;
    background:
      radial-gradient(ellipse 130% 56% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 62%),
      linear-gradient(180deg, #e2e6dd 0%, #c9d0c1 46%, #a9b3a1 100%);
    box-shadow: inset 0 0 0 1px rgba(52, 62, 50, 0.45), inset 0 0 22px rgba(28, 38, 26, 0.28);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 480px;
    overflow: hidden;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  body[data-style-mode="xbox360"] .site-header,
  body[data-style-mode="xbox360"] .site-nav {
    display: contents;
  }

  body[data-style-mode="xbox360"] .brand,
  body[data-style-mode="xbox360"] .brand:visited {
    align-self: stretch;
    border-radius: 0;
    filter: drop-shadow(0 2px 0 rgba(7, 33, 2, 0.72)) drop-shadow(0 6px 7px rgba(0, 18, 0, 0.24));
    flex: 0 0 52px;
    font-size: clamp(1.35rem, 4.2vw, 1.6rem);
    margin: 0 2px;
    min-height: 52px;
    order: 0;
    padding: 0 16px;
  }

  body[data-style-mode="xbox360"] main {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12) 56px, rgba(255, 255, 255, 0.05) 120px),
      linear-gradient(180deg, color-mix(in srgb, var(--xbox-accent) 52%, #dcf9b0) 0%, color-mix(in srgb, var(--xbox-accent) 90%, #ecffd0) 42%, var(--xbox-accent) 100%);
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 20px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 0 0 1px rgba(24, 52, 14, 0.32),
      0 10px 24px rgba(18, 30, 12, 0.35);
    flex: 1 1 auto;
    margin: 8px 2px 0;
    min-height: 0;
    order: 10;
    overflow: auto;
    padding: 14px 12px 20px;
  }

  body[data-style-mode="xbox360"] main > ul.xbox-link-grid {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li > a,
  body[data-style-mode="xbox360"] main > ul.xbox-link-grid > li > a:visited {
    min-height: 88px;
  }

  body[data-style-mode="xbox360"] main > section > ul {
    padding: 4px 7px;
  }

  body[data-style-mode="xbox360"] main > section > ul > li {
    min-height: 76px;
    padding: 10px 28px 10px 82px;
  }

  body[data-style-mode="xbox360"] main > section > ul > li::before {
    height: 64px;
    left: 8px;
    top: 10px;
    width: 64px;
  }

  body[data-style-mode="xbox360"] main.home-note-window > section#work > ul > li {
    --xbox-work-art-size: clamp(104px, 22vw, 144px);
    min-height: calc(var(--xbox-work-art-size) + 20px);
    padding-left: calc(var(--xbox-work-art-size) + 26px);
  }

  body[data-style-mode="xbox360"] main.home-note-window > section#work > ul > li::before {
    height: var(--xbox-work-art-size);
    width: var(--xbox-work-art-size);
  }

  body[data-style-mode="xbox360"] .site-nav > .xbox-home-blade {
    display: flex;
  }

  body[data-style-mode="xbox360"] .site-nav > a,
  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown {
    align-self: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: var(--xbox-mobile-blade-height);
    margin: -2px 0 0;
    min-height: var(--xbox-mobile-blade-height);
    order: 20;
    width: calc(100% - 4px);
    z-index: 36;
  }

  body[data-style-mode="xbox360"] .site-nav > a,
  body[data-style-mode="xbox360"] .nav-dropdown > summary {
    align-items: center;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C25 2 75 2 97 9 Q99 11 99 18 V82 Q99 96 94 97 C68 99 32 99 6 97 Q1 96 1 82 V18 Q1 11 3 9 Z' fill='none' stroke='rgba(40,52,36,0.74)' stroke-width='.65'/%3E%3Cpath d='M3.8 10 C26 4 74 4 96.2 10 Q98 12 98 19 V81 Q98 93 93 94 C67 96 33 96 7 94 Q2 93 2 81 V19 Q2 12 3.8 10 Z' fill='none' stroke='rgba(255,255,255,0.88)' stroke-width='.35'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0 6%, rgba(255, 255, 255, 0.35) 16%, rgba(255, 255, 255, 0) 34%),
      linear-gradient(0deg, color-mix(in srgb, var(--xbox-patch) var(--xbox-blade-tint), transparent), color-mix(in srgb, var(--xbox-patch) var(--xbox-blade-tint), transparent)),
      linear-gradient(180deg, #fafbf8 0%, #e9ede4 30%, #cfd6c8 64%, #a9b3a0 100%);
    border: 0;
    border: 0;
    border-radius: 0;
    box-shadow:
      inset 0 2px 2px rgba(255, 255, 255, 0.9),
      inset 0 -10px 14px -10px rgba(30, 42, 26, 0.42);
    box-sizing: border-box;
    color: #333a32;
    display: flex;
    font-family: "Saira SemiCondensed", "Barlow Semi Condensed", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    height: var(--xbox-mobile-blade-height);
    letter-spacing: 0.06em;
    filter: drop-shadow(0 3px 2px rgba(12, 24, 8, 0.38));
    padding: 0 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    width: 100%;
    -webkit-mask-image: var(--xbox-mobile-blade-mask);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--xbox-mobile-blade-mask);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }

  body[data-style-mode="xbox360"] .site-nav > a[aria-current="page"],
  body[data-style-mode="xbox360"] .nav-dropdown > summary[aria-current="page"] {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C25 2 75 2 97 9 Q99 11 99 18 V82 Q99 96 94 97 C68 99 32 99 6 97 Q1 96 1 82 V18 Q1 11 3 9 Z' fill='none' stroke='rgba(21,54,9,0.86)' stroke-width='.65'/%3E%3Cpath d='M3.8 10 C26 4 74 4 96.2 10 Q98 12 98 19 V81 Q98 93 93 94 C67 96 33 96 7 94 Q2 93 2 81 V19 Q2 12 3.8 10 Z' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='.35'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
      linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0 8%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.16) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--xbox-accent) 42%, #f6ffda) 0%, color-mix(in srgb, var(--xbox-accent) 88%, #eaffc0) 26%, var(--xbox-accent) 52%, var(--xbox-accent-dark) 100%);
    color: #13290a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(1) {
    margin-top: 8px;
    order: 21;
    padding-left: 22px;
    z-index: 45;
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(2) {
    order: 22;
    padding-left: 26px;
    z-index: 44;
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(3) {
    order: 23;
    padding-left: 30px;
    z-index: 43;
  }

  body[data-style-mode="xbox360"] .site-nav > a:nth-child(4) {
    order: 24;
    padding-left: 34px;
    z-index: 42;
  }

  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown {
    order: 25;
    z-index: 41;
  }

  body[data-style-mode="xbox360"] .site-nav > .nav-dropdown > summary {
    padding-left: 38px;
  }

  body[data-style-mode="xbox360"] .xbox-blade-label {
    padding: 5px 14px;
  }

  body[data-style-mode="xbox360"] .nav-dropdown ul {
    bottom: calc(262px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    left: 16px;
    margin: 0;
    max-height: 40vh;
    min-width: 0;
    overflow: auto;
    position: fixed;
    right: 16px;
    top: auto;
    width: auto;
    z-index: 70;
  }

  body[data-style-mode="xbox360"] .site-footer {
    display: none;
  }

  body[data-style-mode="xbox360"] .settings-toggle-button {
    height: 32px;
    position: fixed;
    right: 20px;
    top: 20px;
    width: 32px;
  }

  body[data-style-mode="xbox360"] .settings-panel {
    bottom: auto;
    max-height: 50vh;
    overflow: auto;
    position: fixed;
    right: 14px;
    top: 64px;
    z-index: 80;
  }
}