/* Prevent content from overflowing narrow screens. Appearance uses browser defaults. */
body {
  overflow-wrap: anywhere;
}

img,
video,
canvas {
  max-width: 100%;
  height: auto;
}

pre,
table {
  max-width: 100%;
  overflow-x: auto;
}

table {
  display: block;
}

#voxel-study { position: relative; width: 100%; height: 100dvh; min-height: 440px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif; color: #343b30; background: #c7d7d6; color-scheme: light; }
#voxel-study[data-homepage] { min-height: 0; }
#voxel-study, #voxel-study * { box-sizing: border-box; }
#voxel-study #scene, #voxel-study #landscape { display: block; width: 100%; height: 100%; }
#voxel-study #landscape { outline-offset: -5px; touch-action: none; }
#voxel-study .scene-header { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; pointer-events: none; background: linear-gradient(#e5e7d59e, transparent); }
#voxel-study .eyebrow { font-size: 10px; letter-spacing: .16em; margin: 0 0 8px; }
#voxel-study .scene-title { font-size: 17px; font-weight: 500; letter-spacing: .04em; margin: 0; }
#voxel-study button, #voxel-study summary, #voxel-study input, #voxel-study a { -webkit-tap-highlight-color: transparent; }
#voxel-study button, #voxel-study .view-actions a { color: #394031; background: #f2efdfed; border: 1px solid #59634638; border-radius: 6px; padding: 9px 13px; font: inherit; font-size: 12px; cursor: pointer; }
#voxel-study .view-actions a { display: inline-flex; align-items: center; text-decoration: none; }
#voxel-study button:hover, #voxel-study .view-actions a:hover { background: #faf6e8; }
#voxel-study button:focus-visible, #voxel-study summary:focus-visible, #voxel-study input:focus-visible, #voxel-study a:focus-visible { outline: 2px solid #3d674d; outline-offset: 4px; }
#voxel-study .scene-header button, #voxel-study .scene-header a { pointer-events: auto; }
#voxel-study .view-actions { display: flex; gap: 8px; flex-shrink: 0; }
#voxel-study #settings { position: absolute; left: 24px; bottom: 22px; width: 260px; max-width: calc(100% - 48px); color: #394031; background: #f2efdfed; border: 1px solid #59634638; border-radius: 8px; box-shadow: 0 8px 30px #293d2714; }
#voxel-study summary { padding: 13px 16px; font-size: 12px; cursor: pointer; }
#voxel-study .settings-body { padding: 2px 16px 16px; display: grid; gap: 10px; font-size: 12px; }
#voxel-study .settings-body label:not(.check) { display: flex; justify-content: space-between; align-items: center; }
#voxel-study output { color: #5e6955; font-variant-numeric: tabular-nums; }
#voxel-study input[type=range] { display: block; width: 100%; margin: 0 0 6px; accent-color: #657d50; cursor: pointer; }
#voxel-study .check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
#voxel-study .check input { margin: 0; accent-color: #657d50; }
#voxel-study .settings-body button { margin-top: 4px; background: #ffffff55; }
#voxel-study .hint { position: absolute; bottom: 23px; right: 27px; margin: 0; font-size: 11px; color: #3e4934; padding: 6px 10px; border-radius: 4px; background: #f2efdfb8; pointer-events: none; }
#voxel-study #load-status, #voxel-study .fallback { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-size: 13px; line-height: 1.8; text-align: center; padding: 15px 20px; width: max-content; max-width: calc(100% - 48px); border-radius: 8px; background: #f2efdfed; }
#voxel-study #load-status[hidden] { display: none; }
#voxel-study #retry { position: absolute; top: 58%; left: 50%; transform: translateX(-50%); }
#voxel-study .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#voxel-study .scene-destination { position: absolute; z-index: 2; transform: translate(-50%, -100%); border-radius: 20px; color: #344439; font-size: 13px; white-space: nowrap; text-decoration: none; opacity: 0; pointer-events: none; }
#voxel-study .scene-destination[hidden] { display: none; }
#voxel-study .scene-destination > span { display: block; padding: 7px 14px; border-radius: inherit; background: #faf6e8; }
#voxel-study .scene-destination[data-active="true"], #voxel-study .scene-destination:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  /* The quiet pill has a larger transparent touch target above each roof. */
  #voxel-study .scene-destination { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 4px; font-size: 12px; line-height: 1.4; opacity: 1; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
  #voxel-study .scene-destination[data-below="true"] { transform: translate(-50%, 0); }
  #voxel-study .scene-destination > span { padding: 4px 9px; border: 1px solid #59634638; background: #faf6e8ed; }
  #voxel-study .scene-destination[data-active="true"] > span { color: #243e2f; background: #fffbed; border-color: #5a755f; }
}
#voxel-study[data-homepage] .scene-header { inset: auto 24px 22px auto; z-index: 2; padding: 0; background: none; }
#voxel-study[data-homepage] #settings { z-index: 3; width: 108px; max-height: calc(100dvh - 180px); overflow-y: auto; overscroll-behavior: contain; }
#voxel-study[data-homepage] #settings[open] { width: 280px; }
#voxel-study[data-homepage] summary { padding-inline: 12px; }
#voxel-study[data-homepage] .settings-body > a { color: #394031; margin-top: 4px; }
#voxel-study[data-homepage] .hint { bottom: 76px; right: 24px; padding: 0; background: none; }
@media (max-width: 600px) {
  #voxel-study .scene-header { padding: 19px 17px; align-items: flex-start; }
  #voxel-study .scene-title { font-size: 14px; }
  #voxel-study .eyebrow { font-size: 9px; margin-bottom: 6px; }
  #voxel-study .scene-header button, #voxel-study .view-actions a { font-size: 11px; padding: 8px 10px; }
  #voxel-study .view-actions { flex-direction: column; }
  #voxel-study #settings { left: 16px; bottom: 16px; max-width: calc(100% - 32px); width: 244px; }
  #voxel-study .hint { display: none; }
  #voxel-study[data-homepage] .scene-header { right: 16px; bottom: 20px; padding: 0; }
  #voxel-study[data-homepage] .view-actions { flex-direction: row; }
  #voxel-study[data-homepage] #settings { bottom: 16px; }
  #voxel-study[data-homepage] #settings[open] { bottom: 76px; }
}

body.home-page {
    margin: 0;
    color: #2e4038;
    background: #c7d7d6;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
  }

  .home-page > .skip-link {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 5;
    padding: 10px 14px;
    color: #2e4038;
    background: #f2efdf;
    border-radius: 4px;
    transform: translateY(-200%);
  }

  .home-page > .skip-link:focus { transform: translateY(0); }

  .home-overlay {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px clamp(24px, 4vw, 56px) 64px;
    background: linear-gradient(#e5e7d5cc, #e5e7d500);
    pointer-events: none;
  }

  .home-identity h1 {
    margin: 0;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.25;
  }

  .home-identity p {
    margin: 8px 0 0;
    color: #52635c;
    font-size: 12px;
    letter-spacing: .04em;
  }

  .home-overlay ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .home-overlay a {
    display: block;
    padding: 11px 18px;
    border: 1px solid #5a6b5326;
    border-radius: 24px;
    color: #344439;
    background: #f2efdfd9;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    pointer-events: auto;
  }

  .home-overlay a:hover { background: #faf6e8; }
  .home-overlay a:focus-visible { outline: 2px solid #3d674d; outline-offset: 4px; }

  @media (max-width: 600px) {
    .home-overlay { flex-direction: column; gap: 20px; padding: 24px 20px 48px; }
    .home-overlay a { padding: 10px 14px; font-size: 12px; }
  }

  @media (max-height: 480px) and (min-width: 601px) {
    .home-overlay { padding-top: 20px; }
  }