body.home {
  min-height: 100vh;
  background: transparent !important;
  background-image: none !important;
  color: var(--color-ink);
  overflow-x: hidden;
}

body.home .hxl-site-header,
body.home .hxl-site-footer {
  background: transparent;
  border: 0;
}

.hxl-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding-block: 8px;
}

.hxl-site-logo,
.hxl-nav-list a {
  color: var(--color-ink);
  text-decoration: none;
}

.hxl-site-logo {
  font-family: var(--font-hand);
  font-size: 28px;
  font-weight: 700;
}

.hxl-logo-bracket {
  color: var(--color-pixel-red);
}

.hxl-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.hxl-nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: var(--font-hand);
  font-size: 22px;
  line-height: 1;
}

.hxl-nav-list a:hover {
  border-color: var(--color-ink);
  background: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  transform: rotate(-1deg);
}

.hxl-home {
  min-height: calc(100vh - 116px);
  padding: 0;
}

.hxl-board {
  position: relative;
  width: 100vw;
  min-height: clamp(640px, calc(100vh - 130px), 900px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.hxl-board-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hxl-board-widget {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: min(var(--w), 86vw);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  z-index: 2;
  display: block;
  color: var(--color-ink);
  text-decoration: none;
  cursor: grab;
  filter: url(#hxl-sketch);
  touch-action: none;
  -webkit-user-drag: none;
}

.hxl-board-widget:active {
  cursor: grabbing;
}

.hxl-board-widget.is-dragging {
  z-index: 30;
}

.hxl-board-widget svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  -webkit-user-drag: none;
}

.hxl-widget-pin {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(71, 65, 58, 0.72);
  border-radius: 50%;
  background: rgba(255, 213, 79, 0.86);
  transform: translateX(-50%) rotate(-8deg);
  z-index: 3;
  box-shadow: 2px 2px 0 rgba(44, 36, 23, 0.22);
  pointer-events: none;
}

.hxl-widget-note {
  --r: -1.5deg;
  width: min(var(--w), 76vw);
  padding: 18px 22px 16px;
  border: 2.5px solid rgba(44, 36, 23, 0.82);
  border-radius: 8px;
  background:
    linear-gradient(transparent 29px, rgba(68, 160, 177, 0.18) 30px),
    rgba(255, 252, 231, 0.35);
  background-size: 100% 30px;
}

.hxl-note-kicker {
  display: block;
  margin: 0;
  color: #d9446a;
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.5;
}

.hxl-note-title {
  display: block;
  width: 100%;
  min-height: 76px;
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #344b38;
  font-family: var(--font-hand);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  resize: none;
  overflow: hidden;
  outline: none;
  cursor: text;
}

.hxl-note-title:focus {
  background: rgba(255, 245, 168, 0.28);
  box-shadow: 0 3px 0 rgba(255, 116, 145, 0.26);
}

.hxl-widget-clock { --r: -4deg; }
.hxl-widget-calendar { --r: 3deg; }
.hxl-widget-easel { --r: -1deg; }
.hxl-widget-player { --r: -2deg; }
.hxl-widget-mailbox { --r: 2deg; }

.hxl-action-widget {
  outline: none;
}

.hxl-action-widget:hover,
.hxl-action-widget:focus-visible {
  text-decoration: none;
}

.hxl-action-widget:hover .hxl-canvas-paper,
.hxl-action-widget:focus-visible .hxl-canvas-paper {
  fill: rgba(255, 245, 168, 0.58);
}

.hxl-action-widget:hover .hxl-easel-frame,
.hxl-action-widget:focus-visible .hxl-easel-frame,
.hxl-action-widget:hover .hxl-mailbox-line,
.hxl-action-widget:focus-visible .hxl-mailbox-line {
  stroke-width: 6;
}

.hxl-sketch {
  fill: none;
  stroke: #514c45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hxl-sketch-heavy { stroke-width: 5.2; }
.hxl-sketch-medium { stroke-width: 3.8; }
.hxl-highlight-amber {
  stroke: rgba(255, 213, 79, 0.9);
  stroke-width: 4;
}
.hxl-highlight-pink {
  stroke: rgba(255, 116, 145, 0.7);
  stroke-width: 4;
}

.hxl-shadow {
  fill: rgba(42, 35, 26, 0.09);
}

.hxl-clock-body {
  fill: rgba(102, 126, 234, 0.16);
}

.hxl-clock-face {
  fill: rgba(187, 247, 208, 0.34);
}

.hxl-clock-dot {
  fill: rgba(255, 112, 102, 0.45);
  stroke: #d64b57;
  stroke-width: 3;
}

.hxl-widget-clock .hxl-sketch-heavy,
.hxl-widget-clock .hxl-sketch-medium {
  stroke: #6f62c9;
}

.hxl-clock-time {
  fill: #344b38;
  font-family: var(--font-pixel);
  font-size: 30px;
  letter-spacing: 0;
  dominant-baseline: middle;
}

.hxl-clock-date {
  fill: #47706a;
  font-family: var(--font-hand);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
  dominant-baseline: middle;
}

.hxl-cal-back {
  fill: rgba(255, 245, 168, 0.42);
}

.hxl-cal-band {
  fill: rgba(255, 180, 95, 0.34);
}

.hxl-widget-calendar .hxl-sketch-heavy,
.hxl-widget-calendar .hxl-sketch-medium {
  stroke: #d26b4d;
}

.hxl-calendar-wire {
  stroke: #5c6f82;
  stroke-width: 3;
}

.hxl-cal-month {
  fill: #53505c;
  font-family: var(--font-hand);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
}

.hxl-cal-day {
  fill: #d9446a;
  font-family: var(--font-hand);
  font-size: 124px;
  font-weight: 700;
  letter-spacing: 0;
  dominant-baseline: middle;
}

.hxl-cal-weekday {
  fill: #39756b;
  font-family: var(--font-hand);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
}

.hxl-cal-grid text {
  fill: #53505c;
  font-family: var(--font-hand);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-anchor: middle;
  dominant-baseline: middle;
}

.hxl-cal-grid .is-today {
  fill: #fff2df;
}

.hxl-cal-grid .today-mark {
  fill: rgba(255, 86, 112, 0.8);
  stroke: #514c45;
  stroke-width: 2;
}

.hxl-easel-leg,
.hxl-easel-shelf {
  fill: none;
  stroke: #9c6f40;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
}

.hxl-easel-shelf {
  stroke-width: 8;
}

.hxl-canvas-paper {
  fill: rgba(255, 252, 231, 0.5);
  transition: fill 0.18s ease;
}

.hxl-easel-frame {
  stroke: #a36a44;
  stroke-width: 4.8;
  transition: stroke-width 0.18s ease;
}

.hxl-paint-sky,
.hxl-paint-mountain,
.hxl-paint-river {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hxl-paint-sky {
  stroke: rgba(61, 148, 169, 0.76);
  stroke-width: 5;
}

.hxl-paint-mountain {
  stroke: rgba(111, 98, 201, 0.76);
  stroke-width: 5;
}

.hxl-paint-river {
  stroke: rgba(69, 160, 177, 0.7);
  stroke-width: 4;
}

.hxl-paint-sun {
  fill: rgba(255, 213, 79, 0.62);
  stroke: rgba(255, 173, 51, 0.86);
  stroke-width: 4;
}

.hxl-easel-text {
  fill: #4d5b68;
  font-family: var(--font-hand);
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0;
}

.hxl-turntable-base {
  fill: rgba(125, 211, 252, 0.2);
  transition: fill 0.18s ease;
}

.hxl-turntable-line {
  stroke: #24899a;
  stroke-width: 4.6;
  transition: stroke-width 0.18s ease;
}

.hxl-widget-player:hover .hxl-turntable-base,
.hxl-widget-player:focus-within .hxl-turntable-base {
  fill: rgba(125, 211, 252, 0.34);
}

.hxl-platter-shadow {
  fill: rgba(44, 36, 23, 0.1);
}

.hxl-platter {
  fill: rgba(239, 246, 255, 0.28);
  stroke: rgba(36, 137, 154, 0.58);
  stroke-width: 5;
}

.hxl-platter-line {
  fill: none;
  stroke: rgba(44, 36, 23, 0.48);
  stroke-width: 2.4;
  stroke-dasharray: 9 12;
}

.hxl-record {
  fill: rgba(38, 37, 45, 0.92);
  stroke: #29323a;
  stroke-width: 4.5;
}

.hxl-record-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.8;
}

.hxl-record-ring--soft {
  stroke: rgba(255, 245, 168, 0.24);
}

.hxl-record-groove {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-linecap: round;
  stroke-width: 3;
}

.hxl-record-label {
  fill: rgba(255, 116, 145, 0.9);
  stroke: #5a434c;
  stroke-width: 3;
}

.hxl-record-hole {
  fill: #fff8df;
}

.hxl-record-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-linecap: round;
  stroke-width: 5;
}

.hxl-tonearm,
.hxl-needle,
.hxl-headshell,
.hxl-pitch-slot,
.hxl-speed-dots {
  fill: none;
  stroke: #8c6c32;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
}

.hxl-needle {
  stroke: #44403c;
  stroke-width: 4.8;
}

.hxl-headshell {
  fill: rgba(68, 64, 60, 0.22);
  stroke: #44403c;
  stroke-width: 4.5;
}

.hxl-tonearm-joint,
.hxl-tonearm-base,
.hxl-tonearm-counter,
.hxl-turntable-knob {
  fill: rgba(255, 214, 102, 0.72);
  stroke: #8c6c32;
  stroke-width: 4;
}

.hxl-tonearm-base {
  fill: rgba(255, 245, 168, 0.42);
}

.hxl-tonearm-counter {
  fill: rgba(108, 98, 84, 0.34);
}

.hxl-pitch-slot {
  stroke: rgba(68, 64, 60, 0.55);
  stroke-width: 5;
}

.hxl-power-light {
  fill: rgba(255, 86, 112, 0.84);
  stroke: rgba(92, 46, 58, 0.82);
  stroke-width: 3;
}

.hxl-speed-dots {
  stroke: rgba(255, 213, 79, 0.8);
  stroke-width: 5;
}

.hxl-record-wrap {
  transform-box: view-box;
  transform-origin: 198px 170px;
  will-change: transform;
}

.hxl-tonearm-wrap {
  transform-box: view-box;
  transform-origin: 421px 100px;
  will-change: transform;
}

.hxl-tonearm-wrap {
  transition: transform 0.82s cubic-bezier(.18,.86,.22,1);
}

.hxl-widget-player:not(.is-arm-active) .hxl-tonearm-wrap {
  animation: none;
  transform: rotate(19deg) translate(10px, -12px);
}

.hxl-player-panel {
  position: relative;
  width: min(92%, 360px);
  margin: -18px auto 0;
  padding: 8px 10px 10px;
  border: 2px solid rgba(44, 36, 23, 0.76);
  border-radius: 8px;
  background: rgba(255, 252, 231, 0.38);
}

.hxl-turntable-status,
.hxl-turntable-track {
  margin: 0;
  color: #555058;
  font-family: var(--font-hand);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
}

.hxl-turntable-track {
  color: #26706f;
  font-size: 21px;
  min-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hxl-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
}

.hxl-icon-btn {
  width: 38px;
  height: 34px;
  border: 2px solid rgba(44, 36, 23, 0.82);
  border-radius: 8px;
  background: rgba(255, 213, 79, 0.36);
  color: #2c2417;
  font-family: var(--font-hand);
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(44, 36, 23, 0.22);
}

.hxl-icon-btn--play {
  width: 44px;
  background: rgba(255, 116, 145, 0.26);
  font-size: 22px;
}

.hxl-icon-btn:hover,
.hxl-icon-btn:focus-visible {
  background: rgba(125, 211, 252, 0.38);
  outline: none;
}

.hxl-track-picker {
  position: relative;
}

.hxl-track-list-label {
  display: block;
  color: #6b5d4f;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1.5;
}

.hxl-track-menu-button {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 5px 38px 6px 10px;
  border: 2px solid rgba(44, 36, 23, 0.76);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  color: #2c2417;
  box-shadow: 2px 2px 0 rgba(44, 36, 23, 0.18);
  cursor: pointer;
  text-align: left;
}

.hxl-track-menu-button:hover,
.hxl-track-menu-button:focus-visible {
  background: rgba(255, 245, 168, 0.42);
  outline: none;
}

.hxl-track-menu-label {
  display: block;
  max-width: 100%;
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hxl-track-menu-mark {
  position: absolute;
  right: 11px;
  top: 50%;
  color: #d9446a;
  font-family: var(--font-hand);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}

.hxl-track-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: 170px;
  padding: 6px;
  overflow-y: auto;
  border: 2px solid rgba(44, 36, 23, 0.82);
  border-radius: 8px;
  background: rgba(255, 252, 231, 0.96);
  box-shadow: 3px 3px 0 rgba(44, 36, 23, 0.22);
}

.hxl-track-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #2c2417;
  font-family: var(--font-hand);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hxl-track-option:hover,
.hxl-track-option:focus-visible,
.hxl-track-option.is-active {
  background: rgba(125, 211, 252, 0.28);
  outline: none;
}

.hxl-track-option.is-active::before {
  content: "✓ ";
  color: #d9446a;
}

.hxl-widget-player.is-record-spinning .hxl-record-wrap {
  animation: hxl-record-spin 1.82s linear infinite;
}

.hxl-widget-player.is-record-paused .hxl-record-wrap {
  animation-play-state: paused;
}

.hxl-widget-player.is-arm-active .hxl-tonearm-wrap {
  transform: rotate(0deg) translate(0, 0);
}

.hxl-widget-player.is-record-spinning .hxl-turntable-status {
  color: #d9446a;
}

.hxl-mailbox-post {
  fill: rgba(255, 213, 79, 0.18);
}

.hxl-mailbox-body {
  fill: rgba(255, 116, 145, 0.2);
}

.hxl-mailbox-door {
  fill: rgba(125, 211, 252, 0.2);
}

.hxl-mailbox-flag {
  fill: rgba(255, 214, 102, 0.72);
}

.hxl-mailbox-line {
  stroke: #d94f70;
  stroke-width: 4.5;
  transition: stroke-width 0.18s ease;
}

.hxl-mailbox-detail {
  stroke: #5d8fb0;
  stroke-width: 3.2;
}

.hxl-mailbox-text {
  fill: #4d5b68;
  font-family: var(--font-hand);
  font-size: 41px;
  font-weight: 700;
  letter-spacing: 0;
}

.hxl-msg-preview {
  margin: -6px auto 0;
  max-width: 230px;
  color: #26706f;
  font-family: var(--font-hand);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

@keyframes hxl-record-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hxl-widget-player.is-record-spinning .hxl-record-wrap {
    animation-duration: 8s;
  }

  .hxl-tonearm-wrap {
    transition-duration: 1.2s;
  }
}

.hxl-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 8px 24px 18px;
  color: var(--color-ink-light);
  font-family: var(--font-body);
  font-size: 13px;
}

.hxl-footer-sep {
  color: var(--color-fold);
  margin: 0 4px;
}

@media (max-width: 900px) {
  .hxl-board {
    min-height: 780px;
  }

  .hxl-widget-note { --x: 50 !important; --y: 8 !important; --w: 280px !important; }
  .hxl-widget-clock { --x: 27 !important; --y: 24 !important; --w: 270px !important; }
  .hxl-widget-calendar { --x: 73 !important; --y: 25 !important; --w: 250px !important; }
  .hxl-widget-easel { --x: 50 !important; --y: 50 !important; --w: 330px !important; }
  .hxl-widget-player { --x: 30 !important; --y: 77 !important; --w: 320px !important; }
  .hxl-widget-mailbox { --x: 74 !important; --y: 78 !important; --w: 255px !important; }
}

@media (max-width: 640px) {
  .hxl-header-inner {
    justify-content: center;
  }

  .hxl-nav {
    display: none;
  }

  .hxl-site-logo {
    font-size: 24px;
  }

  .hxl-board {
    min-height: 980px;
    overflow: visible;
    touch-action: pan-y;
  }

  .hxl-board-widget {
    touch-action: none;
  }

  .hxl-widget-note { --x: 50 !important; --y: 6 !important; --w: 255px !important; }
  .hxl-widget-clock { --x: 50 !important; --y: 19 !important; --w: 275px !important; }
  .hxl-widget-calendar { --x: 50 !important; --y: 39 !important; --w: 255px !important; }
  .hxl-widget-easel { --x: 50 !important; --y: 59 !important; --w: 310px !important; }
  .hxl-widget-player { --x: 50 !important; --y: 80 !important; --w: 320px !important; }
  .hxl-widget-mailbox { --x: 50 !important; --y: 96 !important; --w: 245px !important; }

  .hxl-footer-bar {
    justify-content: center;
    text-align: center;
    font-size: 12px;
  }
}