:root {
  color-scheme: dark;
  --bg: #07100f;
  --bg-soft: #0b1715;
  --panel: rgba(15, 29, 26, 0.86);
  --panel-solid: #10201d;
  --line: rgba(189, 220, 209, 0.14);
  --line-strong: rgba(189, 220, 209, 0.28);
  --ink: #edf7f2;
  --muted: #93aaa2;
  --mint: #8ae7c3;
  --mint-strong: #b3ffdf;
  --amber: #f2c879;
  --red: #f48b86;
  --blue: #7eb5ff;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  --radius: 22px;
  --mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --sans: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

[hidden] { display: none !important; }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    var(--bg);
  background-size: 42px 42px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(138, 231, 195, 0.65);
  outline-offset: 3px;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.13;
  pointer-events: none;
}

.ambient-a {
  top: -12vw;
  right: -8vw;
  background: #4ff4bd;
}

.ambient-b {
  bottom: -18vw;
  left: -10vw;
  background: #337aaf;
}

.topbar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 76px;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 15, 0.76);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(138, 231, 195, 0.5);
  border-radius: 10px;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -1px;
  box-shadow: inset 0 0 20px rgba(138, 231, 195, 0.08);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.brand small {
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.13em;
}

.top-actions,
.session-indicator,
.toolbar-actions,
.modal-actions,
.resolution-actions {
  display: flex;
  align-items: center;
}

.top-actions {
  gap: 12px;
}

.log-number {
  display: flex;
  min-width: 128px;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--mono);
}

.log-number span { color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.log-number strong { color: #c8d2ce; font-size: 12px; letter-spacing: .12em; }

.session-indicator {
  gap: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 14px rgba(138, 231, 195, 0.75);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  50% { opacity: 0.35; }
}

.section {
  min-height: 100vh;
  padding: 116px 5vw 48px;
}

.hero {
  display: grid;
  max-width: 1320px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.74fr);
  align-items: center;
  gap: clamp(48px, 8vw, 120px);
}

@media (min-width: 981px) {
  .hero { align-content: center; }
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
  }
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 800px;
  margin: 0;
  font-size: clamp(44px, 6.2vw, 86px);
  font-weight: 660;
  letter-spacing: -0.065em;
  line-height: 1.08;
}

.hero h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(237, 247, 242, 0.7);
}

.hero-lede {
  margin: 32px 0 0;
  color: #bbcbc5;
  font-size: clamp(15px, 1.5vw, 18px);
}

.hero-meta {
  display: flex;
  width: min(100%, 570px);
  margin: 36px 0 30px;
  padding: 18px 0;
  border-block: 1px solid var(--line);
}

.hero-meta div {
  min-width: 0;
  flex: 1;
  padding: 0 18px;
  border-right: 1px solid var(--line);
}

.hero-meta div:first-child { padding-left: 0; }
.hero-meta div:last-child { border: 0; }

.hero-meta span,
.hero-meta strong {
  display: block;
}

.hero-meta span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.hero-meta strong {
  margin-top: 4px;
  font-size: 15px;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.icon-button,
.close-button {
  border: 0;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

.primary-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 42px;
  padding: 0 22px;
  border: 1px solid var(--mint);
  border-radius: 13px;
  background: var(--mint);
  color: #06110e;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(57, 183, 137, 0.16);
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.danger-button:hover,
.icon-button:hover {
  transform: translateY(-2px);
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.hero-cta {
  min-width: 250px;
}

.secondary-button,
.ghost-button,
.danger-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 11px;
  font-weight: 700;
}

.secondary-button {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.055);
}

.ghost-button {
  border: 1px solid var(--line);
  background: transparent;
  color: #becdc8;
}

.ghost-button.compact {
  min-height: 34px;
  padding-inline: 12px;
  font-size: 11px;
}

.danger-button {
  border: 1px solid rgba(244, 139, 134, 0.5);
  background: rgba(244, 139, 134, 0.12);
  color: #ffc0bc;
}

.full { width: 100%; }

.microcopy {
  max-width: 520px;
  margin-top: 18px;
  color: #70867e;
  font-size: 11px;
}

.hero-console {
  position: relative;
  width: min(100%, 470px);
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(138, 231, 195, 0.22);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(19, 37, 33, 0.94), rgba(8, 19, 17, 0.94));
  box-shadow: var(--shadow), inset 0 0 80px rgba(138, 231, 195, 0.025);
}

.hero-console::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.016) 3px 4px);
  content: "";
  pointer-events: none;
}

.console-head {
  display: flex;
  height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.console-live { color: var(--mint); }

.scan-frame {
  position: relative;
  display: grid;
  height: 380px;
  place-items: center;
  overflow: hidden;
}

.scan-frame::before,
.scan-frame::after {
  position: absolute;
  width: 90px;
  height: 90px;
  border-color: rgba(138, 231, 195, 0.45);
  content: "";
}

.scan-frame::before {
  top: 42px;
  left: 42px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.scan-frame::after {
  right: 42px;
  bottom: 42px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.scan-line {
  position: absolute;
  z-index: 3;
  top: 20%;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  box-shadow: 0 0 18px var(--mint);
  animation: scan 4s ease-in-out infinite;
}

@keyframes scan {
  50% { transform: translateY(230px); }
}

.fingerprint {
  position: absolute;
  width: 180px;
  height: 230px;
  opacity: 0.24;
}

.fingerprint span {
  position: absolute;
  inset: var(--i, 0);
  border: 1px solid var(--mint);
  border-bottom-color: transparent;
  border-radius: 48% 48% 42% 42%;
}

.fingerprint span:nth-child(1) { --i: 0; }
.fingerprint span:nth-child(2) { --i: 18px; }
.fingerprint span:nth-child(3) { --i: 36px; }
.fingerprint span:nth-child(4) { --i: 54px; }
.fingerprint span:nth-child(5) { --i: 72px; }

.scan-frame p {
  z-index: 4;
  margin-top: 250px;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-align: center;
}

.console-data {
  display: grid;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr auto;
  gap: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.console-data b { color: #dbe8e3; }

/* Workspace */
.workspace {
  display: grid;
  width: 100%;
  max-width: 1520px;
  min-height: 100vh;
  margin: 0 auto;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 24px;
  scroll-margin-top: 92px;
}

.case-sidebar,
.case-main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 22, 20, 0.78);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.case-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  height: calc(100vh - 130px);
  min-height: 610px;
  flex-direction: column;
  padding: 26px 18px 18px;
}

.case-heading { padding: 0 10px 20px; }
.case-heading .eyebrow { margin-bottom: 8px; }
.case-heading h2 { margin: 0; font-size: 22px; letter-spacing: -0.04em; }
.case-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.case-heading p strong { color: var(--ink); }

.progress-wrap { padding: 18px 10px 22px; border-top: 1px solid var(--line); }
.progress-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.progress-label strong { color: var(--mint); font-family: var(--mono); }
.progress-track { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mint); transition: width 400ms ease; }

.case-nav { display: grid; gap: 6px; }

.nav-item {
  display: grid;
  width: 100%;
  min-height: 61px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #a9bbb4;
  grid-template-columns: 28px 1fr;
  gap: 7px;
  text-align: left;
  cursor: pointer;
}

.nav-item:not(:disabled):hover { background: rgba(255,255,255,.035); }
.nav-item.is-current { border-color: rgba(138, 231, 195, 0.2); background: rgba(138, 231, 195, 0.08); color: var(--ink); }
.nav-item:disabled { cursor: not-allowed; opacity: 0.34; }
.nav-index { padding-top: 1px; color: var(--mint); font-family: var(--mono); font-size: 10px; }
.nav-item strong, .nav-item small { display: block; }
.nav-item strong { font-size: 13px; }
.nav-item small { margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }

.held-items { margin-top: auto; padding: 18px 10px 4px; border-top: 1px solid var(--line); }
.held-items p { margin: 0 0 10px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.held-items > div { display: flex; flex-wrap: wrap; gap: 6px; }
.item-chip { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: #667b73; font-family: var(--mono); font-size: 8px; }
.item-chip.is-held { border-color: rgba(138,231,195,.26); background: rgba(138,231,195,.08); color: var(--mint); }

.case-main { min-width: 0; overflow: hidden; }
.case-toolbar { display: flex; height: 74px; align-items: center; justify-content: space-between; padding: 0 26px; border-bottom: 1px solid var(--line); }
.toolbar-label { display: block; margin-bottom: 1px; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .14em; }
.case-toolbar strong { font-size: 15px; }
.toolbar-actions { gap: 8px; }
.icon-button { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); color: #b6c7c0; font-size: 11px; }
.view-container { min-height: calc(100vh - 206px); padding: clamp(20px, 3vw, 38px); }

.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.view-head h3 { margin: 0; font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -.045em; line-height: 1.2; }
.view-head p { max-width: 680px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.view-code { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-family: var(--mono); font-size: 9px; }

.status-badge { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.status-badge.fixed { border-color: rgba(138,231,195,.26); background: rgba(138,231,195,.08); color: var(--mint); }
.status-badge.pending { border-color: rgba(242,200,121,.28); background: rgba(242,200,121,.09); color: var(--amber); }
.status-badge.solo { border-color: rgba(126,181,255,.28); background: rgba(126,181,255,.09); color: var(--blue); }

.card-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.info-card { position: relative; min-width: 0; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.026); }
.info-card h4 { margin: 0; font-size: 15px; }
.info-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.info-card .card-label { margin-bottom: 11px; color: var(--mint); font-family: var(--mono); font-size: 8px; letter-spacing: .14em; }
.info-card.span-4 { grid-column: span 4; }
.info-card.span-5 { grid-column: span 5; }
.info-card.span-6 { grid-column: span 6; }
.info-card.span-7 { grid-column: span 7; }
.info-card.span-8 { grid-column: span 8; }
.info-card.span-12 { grid-column: span 12; }
.info-card.is-clickable { cursor: pointer; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; }
.info-card.is-clickable:hover { transform: translateY(-3px); border-color: rgba(138,231,195,.34); background: rgba(138,231,195,.045); }
.info-card.is-inspected { border-color: rgba(138,231,195,.25); }
.info-card.is-inspected::after { position: absolute; top: 12px; right: 13px; color: var(--mint); content: "✓"; font-size: 11px; }
.info-card.is-locked { opacity: .5; }

.desk-object { min-height: 145px; }
.desk-core-grid .desk-object { grid-column: span 6; }
.desk-object .object-icon { display: grid; width: 46px; height: 46px; margin-bottom: 16px; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.025); color: var(--mint); font-family: var(--mono); font-size: 13px; }

.card-label {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.physical-object-section,
.drawer-panel {
  margin-top: 14px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.022);
}

.physical-object-heading,
.drawer-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.physical-object-heading h4,
.drawer-panel h4,
.terminal-note h4 { margin: 4px 0 0; font-size: 17px; }
.drawer-panel p,
.terminal-note p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.clipboard-stage {
  position: relative;
  width: min(100%, 560px);
  margin: 20px auto 0;
  overflow: hidden;
  border-radius: 12px;
  background: #171b1a;
  box-shadow: 0 24px 54px rgba(0,0,0,.32);
}

.clipboard-stage img { display: block; width: 100%; height: auto; }
.clipboard-stage.is-front-pending { visibility: hidden; }
.clipboard-stage.is-front-error { background: #e8e5dd; }
.clipboard-stage.is-front-error > img { visibility: hidden; }

.entry-log-sheet {
  position: absolute;
  top: 15.5%;
  left: 12.2%;
  width: 75.8%;
  height: 76%;
  padding: clamp(10px, 3vw, 24px);
  overflow: hidden;
  color: #27302c;
  font-family: var(--mono);
}

.entry-log-sheet > strong { display: block; margin-bottom: 8px; font-size: clamp(9px, 1.5vw, 14px); letter-spacing: .08em; }
.entry-log-sheet table { width: 100%; border-collapse: collapse; font-size: clamp(7px, 1.35vw, 12px); }
.entry-log-sheet th,
.entry-log-sheet td { padding: clamp(3px, .75vw, 7px); border-bottom: 1px solid rgba(39,48,44,.22); text-align: center; }
.entry-log-sheet th:first-child,
.entry-log-sheet td:first-child { text-align: left; }
.entry-log-sheet .last-exit { background: rgba(95,125,114,.16); font-weight: 900; }
.entry-log-sheet small { display: block; margin-top: 8px; font-size: clamp(7px, 1.1vw, 10px); font-weight: 800; }
.entry-log-sheet small + small { margin-top: 4px; font-weight: 500; }
.entry-log-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 8px; }
.entry-log-footer small { margin: 0; }
.entry-log-mark {
  position: relative;
  display: inline-grid;
  width: clamp(68px, 12vw, 90px);
  height: clamp(36px, 6vw, 48px);
  flex: 0 0 auto;
  place-items: center;
  color: #b44638;
  font-family: "Yu Kyokasho", "Hiragino Mincho ProN", serif;
  font-size: clamp(13px, 2vw, 20px);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .02em;
  transform: rotate(-7deg);
  pointer-events: none;
}
.entry-log-mark::before {
  position: absolute;
  inset: 2px 0;
  border: solid #b44638;
  border-width: 2px 1.5px 2.3px 1.4px;
  border-radius: 52% 44% 51% 48% / 48% 53% 45% 52%;
  content: "";
  transform: rotate(-5deg);
}

.key-hotspot {
  position: absolute;
  top: 37%;
  left: 38%;
  display: grid;
  width: 25%;
  height: 22%;
  place-items: end center;
  padding: 0 0 8px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}

.key-hotspot:hover,
.key-hotspot:focus-visible { border-color: var(--mint); background: rgba(138,231,195,.08); }
.key-hotspot span { padding: 5px 9px; border-radius: 999px; background: rgba(7,16,15,.84); color: var(--mint); font-size: 10px; font-weight: 800; }
.key-taken-label { position: absolute; top: 48%; left: 50%; padding: 6px 9px; border-radius: 999px; background: rgba(7,16,15,.84); color: var(--mint); font-size: 10px; transform: translate(-50%,-50%); }

.drawer-panel { align-items: center; }
.drawer-contents { display: grid; width: min(100%, 720px); grid-template-columns: minmax(250px, 1.2fr) minmax(200px, .8fr); align-items: center; gap: 18px; }
.access-card-photo { position: relative; margin: 0; overflow: hidden; border-radius: 14px; }
.access-card-photo img { display: block; width: 100%; height: auto; }
.access-card-photo figcaption { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; padding: 7px 9px; border-radius: 8px; background: rgba(6,13,12,.82); font-family: var(--mono); }
.access-card-photo figcaption strong { color: var(--mint); font-size: 10px; }
.access-card-photo figcaption span { color: var(--muted); font-size: 7px; }
.item-message { color: var(--ink) !important; font-weight: 800; }
.terminal-note { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }

.terminal-card { margin-top: 14px; padding: 23px; border: 1px solid rgba(138,231,195,.22); border-radius: 18px; background: #081310; box-shadow: inset 0 0 60px rgba(138,231,195,.025); }
.terminal-head { display: flex; justify-content: space-between; margin-bottom: 20px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.terminal-head span:last-child { color: var(--mint); }
.terminal-lock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.terminal-lock input,
.code-input,
.final-input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: var(--ink);
  font-family: var(--mono);
  letter-spacing: .12em;
}
.terminal-lock button { min-width: 120px; }
#birthdayForm .code-input {
  background: #101917;
  color: #eef7f3;
  caret-color: var(--mint);
  -webkit-text-fill-color: #eef7f3;
  color-scheme: dark;
}
#birthdayForm .code-input::placeholder { color: #8fa29b; opacity: 1; -webkit-text-fill-color: #8fa29b; }
#birthdayForm .code-input:-webkit-autofill,
#birthdayForm .code-input:-webkit-autofill:hover,
#birthdayForm .code-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #101917 inset;
  -webkit-text-fill-color: #eef7f3;
}
.feedback { min-height: 22px; margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.feedback.error { color: var(--red); }
.feedback.success { color: var(--mint); }

.folder-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.folder-tab { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); color: #9db0a9; font-size: 11px; cursor: pointer; }
.folder-tab:hover, .folder-tab.is-active { border-color: rgba(138,231,195,.3); background: rgba(138,231,195,.08); color: var(--ink); }
.folder-tab:disabled { cursor: not-allowed; opacity: .35; }

.document-sheet {
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(37, 49, 45, 0.15);
  border-radius: 8px;
  background: #e7e5dc;
  color: #1f2925;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.document-sheet .doc-kicker { color: #5d6d66; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.document-sheet h4 { margin: 10px 0 24px; font-size: 24px; letter-spacing: -.03em; }
.document-sheet p, .document-sheet li { color: #33423c; font-size: 13px; }
.document-sheet table { width: 100%; border-collapse: collapse; font-size: 12px; }
.document-sheet th, .document-sheet td { padding: 11px 12px; border: 1px solid rgba(31,41,37,.14); vertical-align: top; text-align: left; }
.document-sheet th { width: 34%; background: rgba(31,41,37,.045); color: #56665f; font-weight: 600; }

.employee-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 20px; }
.employee-sheet-head h4 { margin-bottom: 9px; }
.employee-sheet th { width: auto; white-space: nowrap; }
.line-sheet { max-width: 720px; margin-inline: auto; }
.chat-log { display: grid; gap: 10px; }
.chat-log p { width: fit-content; max-width: 72%; margin: 0; padding: 10px 13px; border-radius: 14px; }
.chat-other { border-bottom-left-radius: 3px !important; background: #fff; }
.chat-sato { margin-left: auto !important; border-bottom-right-radius: 3px !important; background: #bfdaca; }

.note-pages { display: grid; gap: 14px; }
.note-page { position: relative; min-height: 140px; padding: 24px 24px 24px 72px; border-radius: 5px 13px 13px 5px; background: repeating-linear-gradient(#f2efe2 0 31px, #c9d5d0 32px); color: #24302b; box-shadow: 0 16px 38px rgba(0,0,0,.2); transform: rotate(var(--tilt, 0deg)); }
.note-page::before { position: absolute; top: 0; bottom: 0; left: 52px; width: 1px; background: rgba(219,108,108,.28); content: ""; }
.note-page time { display: block; margin-bottom: 8px; color: #5e6c66; font-family: var(--mono); font-size: 10px; }
.note-page p { margin: 0; color: #24302b; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 14px; line-height: 2.25; }

.self-list { display: grid; gap: 8px; }
.self-row { display: grid; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(31,41,37,.12); grid-template-columns: 28px minmax(0, 1fr) 38px; gap: 10px; }
.self-row:last-child { border: 0; }
.self-row span:first-child { color: #7a8982; font-family: var(--mono); font-size: 10px; }
.self-row p { margin: 0; }
.score-pill { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #c7d8cf; color: #17221d; font-family: var(--mono); font-weight: 800; }

.instagram-shell { width: min(100%, 560px); margin: 0 auto; overflow: hidden; border: 1px solid #d9d9d9; border-radius: 18px; background: #fff; color: #171717; box-shadow: 0 20px 46px rgba(0,0,0,.2); }
.insta-profile { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid #ececec; }
.insta-profile > img,
.insta-card header img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; object-fit: contain; }
.insta-profile strong { font-size: 14px; }
.insta-feed { display: grid; }
.insta-card { border-bottom: 1px solid #e8e8e8; background: #fff; }
.insta-card:last-child { border-bottom: 0; }
.insta-card > header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.insta-card > header span { margin-left: auto; color: #292929; letter-spacing: 2px; }
.insta-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f4f4f4; }
.insta-actions { display: flex; align-items: center; padding: 11px 14px 2px; gap: 14px; font-size: 25px; line-height: 1; }
.insta-actions span:last-child { margin-left: auto; }
.insta-caption { margin: 0; padding: 8px 14px 4px; color: #181818; font-size: 14px; line-height: 1.65; }
.insta-caption strong { margin-right: 5px; }
.insta-card time { display: block; padding: 0 14px 14px; color: #8b8b8b; font-size: 10px; }

.locked-panel { display: grid; min-height: 340px; place-items: center; padding: 30px; border: 1px dashed var(--line-strong); border-radius: 18px; text-align: center; }
.locked-panel .lock-icon { display: grid; width: 60px; height: 60px; margin: 0 auto 18px; place-items: center; border: 1px solid var(--line-strong); border-radius: 18px; color: var(--amber); font-size: 23px; }
.locked-panel h4 { margin: 0; font-size: 20px; }
.locked-panel p { max-width: 470px; margin: 8px auto 20px; color: var(--muted); font-size: 12px; }
.locked-panel form { display: flex; width: min(100%, 420px); gap: 9px; }
.locked-panel form button { flex: 0 0 auto; }

.interview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.interview-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.interview-card header { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.interview-number { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(138,231,195,.25); border-radius: 10px; color: var(--mint); font-family: var(--mono); font-size: 10px; }
.interview-card h4 { margin: 0; font-size: 14px; }
.interview-card small { color: var(--muted); font-size: 9px; }
.interview-card p { color: #b5c6c0; font-size: 12px; line-height: 1.9; }
.text-file-view small { color: var(--muted); }
.interview-transcript { margin-top: 22px; }
.interview-transcript p { margin: 0 0 1.5em; color: #24312c; font-size: 14px; line-height: 2; }
.interview-transcript p:last-child { margin-bottom: 0; }

.message-archive { max-width: 720px; margin: 0 auto; overflow: hidden; border: 1px solid #bcc6c2; border-radius: 18px; background: #d9e3df; box-shadow: 0 20px 44px rgba(26, 42, 36, .16); }
.message-archive > header { display: grid; min-height: 66px; align-items: center; padding: 9px 14px; border-bottom: 1px solid rgba(29, 47, 41, .14); background: #f8faf9; grid-template-columns: 42px 38px 1fr; gap: 8px; }
.message-archive > header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #3d5a50; font-size: 31px; line-height: 1; cursor: pointer; }
.message-archive > header button:hover { background: #e9efec; }
.message-archive > header strong, .message-archive > header small { display: block; }
.message-archive > header strong { color: #18231f; font-size: 15px; }
.message-archive > header small { margin-top: 2px; color: #7d8b86; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.message-header-avatar { display: block; width: 38px; height: 38px; border-radius: 50%; object-fit: contain; }
.message-scroll { height: min(650px, 67vh); min-height: 460px; overflow-y: auto; padding: 20px 18px 32px; background: linear-gradient(rgba(217,227,223,.92), rgba(217,227,223,.92)), radial-gradient(circle at 18% 9%, #fff 0 2px, transparent 3px); }
.message-day + .message-day { margin-top: 28px; }
.message-date { width: fit-content; margin: 0 auto 18px; padding: 5px 10px; border-radius: 999px; background: rgba(55, 75, 68, .38); color: #fff; font-size: 10px; }
.message-row { display: flex; width: fit-content; max-width: 72%; margin: 0 0 10px; align-items: flex-end; gap: 7px; }
.message-row.is-sent { margin-left: auto; justify-content: flex-end; }
.message-row.is-sent .message-bubble { background: color-mix(in srgb, var(--mint) 62%, #fff); }
.message-row.is-sent .message-meta { align-items: flex-end; text-align: right; }
.message-row.is-received .message-bubble { background: #fff; }
.message-avatar { display: block; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; object-fit: contain; }
.message-bubble { width: fit-content; min-width: 0; max-width: 100%; overflow: hidden; border-radius: 16px; color: #1b2521; box-shadow: 0 1px 1px rgba(21, 38, 32, .1); }
.message-bubble p { width: fit-content; max-width: 100%; margin: 0; padding: 9px 12px; overflow-wrap: anywhere; white-space: normal; font-size: 13px; line-height: 1.65; }
.message-bubble.has-media { display: flex; flex-direction: column; align-items: flex-start; background: transparent !important; box-shadow: none; }
.message-row.is-sent .message-bubble.has-media { align-items: flex-end; }
.message-bubble.has-media p { margin-bottom: 5px; border-radius: 16px; box-shadow: 0 1px 1px rgba(21,38,32,.1); }
.message-row.is-sent .message-bubble.has-media p { background: color-mix(in srgb, var(--mint) 62%, #fff); }
.message-row.is-received .message-bubble.has-media p { background: #fff; }
.message-meta { display: flex; flex-direction: column; padding-bottom: 2px; color: #74817c; font-size: 8px; line-height: 1.4; }
.message-meta span { color: #587268; }
.message-image { position: relative; width: min(270px, 48vw); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #80948c, #d7dedb); }
.message-image.is-photo { aspect-ratio: auto; background: transparent; }
.message-image.is-photo img { display: block; width: 100%; height: auto; object-fit: contain; }
.message-stamp { display: block; width: min(180px, 38vw); height: min(180px, 38vw); object-fit: contain; }
.message-image::before, .message-image::after { position: absolute; content: ""; }
.message-image::before { inset: 16% 19%; border: 1px solid rgba(255,255,255,.48); border-radius: 10px; }
.message-image::after { right: 11px; bottom: 9px; padding: 3px 6px; border-radius: 5px; background: rgba(20,33,28,.46); color: #fff; content: "IMG"; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.message-image.attachment-1 { background: linear-gradient(155deg, #8e755f 0 31%, #d9cfbd 32% 61%, #687b72 62%); }
.message-image.attachment-2 { background: linear-gradient(145deg, #b5a5a4 0 36%, #e7ded8 37% 64%, #777d78 65%); }
.message-image.attachment-3 { background: linear-gradient(130deg, #71867c 0 42%, #c9d2cd 43% 69%, #52635b 70%); }
.message-image.attachment-4 { background: linear-gradient(150deg, #a99b89 0 29%, #d7d1c6 30% 72%, #718079 73%); }
.message-image.media-chocolate { background: radial-gradient(circle at 35% 44%, #5f3a2b 0 14%, transparent 15%), radial-gradient(circle at 62% 58%, #7a4a32 0 16%, transparent 17%), linear-gradient(145deg, #d8c3a5, #9b7a57); }
.message-link-card { display: grid; width: min(300px, 52vw); min-height: 78px; align-items: center; padding: 12px; background: #f7f8f7; grid-template-columns: 42px 1fr; gap: 10px; }
.message-link-card > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; background: #dce7e2; color: #466a5c; font-size: 19px; }
.message-link-card strong, .message-link-card small { display: block; }
.message-link-card strong { font-size: 12px; }
.message-link-card small { margin-top: 3px; color: #78827e; font-size: 9px; }

.iv-shell { overflow: hidden; border: 1px solid rgba(138,231,195,.25); border-radius: 20px; background: #07120f; }
.iv-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.iv-body { padding: clamp(22px,4vw,38px); }
.iv-target { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); }
.iv-target span { color: var(--muted); font-size: 10px; }
.iv-target strong { display: block; font-size: 18px; }
.question-card { margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.02); }
.question-card.is-pending { border-style: dashed; opacity: .72; }
.question-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; color: var(--mint); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.question-card > p { margin: 0 0 18px; color: #d9e5e0; font-size: 13px; }
.answer-list { display: grid; gap: 8px; }
.answer-option { display: grid; align-items: start; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); grid-template-columns: 28px 1fr; gap: 8px; cursor: pointer; }
.answer-option:hover { border-color: rgba(138,231,195,.28); }
.answer-option:has(input:checked) { border-color: rgba(138,231,195,.48); background: rgba(138,231,195,.08); }
.answer-option input { position: absolute; opacity: 0; }
.answer-letter { color: var(--mint); font-family: var(--mono); font-weight: 800; }
.question-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }

.fragment-board { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.fragment { position: relative; display: block; min-height: 124px; padding: 18px 18px 34px; border: 1px solid var(--line); border-radius: 4px 14px 8px 16px; background: #ddd8c7; color: #27302c; cursor: pointer; clip-path: polygon(2% 5%, 97% 0, 100% 89%, 93% 100%, 3% 96%, 0 18%); text-align: left; transition: transform 160ms ease, filter 160ms ease; }
.fragment:hover { transform: translateY(-2px); filter: brightness(1.04); }
.fragment.is-selected { background: color-mix(in srgb, #ddd8c7 82%, var(--mint)); box-shadow: inset 0 0 0 4px var(--mint); }
.fragment small { display: block; margin-bottom: 8px; color: #75817c; font-family: var(--mono); font-size: 8px; }
.fragment p { margin: 0; color: #27302c; font-family: "Yu Mincho", serif; font-size: 12px; }
.fragment-state { position: absolute; right: 18px; bottom: 13px; padding: 3px 7px; border-radius: 999px; background: rgba(39,48,44,.08); color: #53615b; font-family: var(--mono); font-size: 8px; font-weight: 800; }
.fragment.is-selected .fragment-state { background: var(--mint); color: #07100f; }

.note3-restoration {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: #141918;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.note3-restoration > img { display: block; width: 100%; height: auto; }
.note3-first-page {
  display: grid;
  min-height: clamp(420px, 62vw, 700px);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, #343b38, #111615 70%);
}
.note3-first-page button {
  position: relative;
  display: grid;
  width: min(72%, 520px);
  aspect-ratio: 3 / 4;
  place-content: center;
  border: 0;
  border-radius: 3px 18px 18px 3px;
  background: linear-gradient(100deg, #cfc7ae 0 3%, #eee8d6 7% 100%);
  color: #30342f;
  box-shadow: -14px 12px 0 #242a27, 0 30px 70px rgba(0,0,0,.42), inset 10px 0 12px rgba(91,78,54,.17);
  cursor: pointer;
  transform: rotate(.5deg);
}
.note3-first-page button::before { position: absolute; inset: 0 auto 0 3%; width: 2px; background: repeating-linear-gradient(#746e5e 0 4px, transparent 4px 11px); content: ""; opacity: .58; }
.note3-first-page span,
.note3-first-page small { font-family: var(--mono); letter-spacing: .16em; }
.note3-first-page span { font-size: 11px; }
.note3-first-page strong { margin: 18px 0 90px; font-size: clamp(28px, 5vw, 46px); letter-spacing: .04em; }
.note3-first-page small { color: #5e665f; font-size: 10px; }
.notebook-copy { position: absolute; top: 17%; left: 5%; display: grid; width: 27%; gap: 10px; color: rgba(40,42,34,.82); font-family: "Yu Mincho", serif; font-size: clamp(7px, 1vw, 11px); pointer-events: none; }
.notebook-copy strong { font-size: clamp(8px, 1.2vw, 14px); }

.notebook-gap,
.paper-hotspot {
  position: absolute;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(138,231,195,.7);
  background: rgba(7,16,15,.22);
  color: var(--mint);
  font-family: var(--mono);
  font-weight: 900;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.notebook-gap:hover,
.paper-hotspot:hover,
.paper-hotspot.is-selected { z-index: 3; border-color: var(--mint); background: rgba(138,231,195,.2); transform: scale(1.04); }
.notebook-gap:disabled,
.paper-hotspot:disabled { cursor: default; }
.notebook-gap.is-filled { border-style: solid; background: rgba(138,231,195,.28); color: #06110e; }
.gap-evaluation { top: 21.5%; left: 26.3%; width: 7.7%; height: 6.4%; }
.gap-behavior { top: 59.4%; left: 26.3%; width: 9.5%; height: 9.5%; }

.paper-hotspot { min-width: 0; min-height: 0; padding: 2px; border-color: transparent; background: rgba(7,16,15,.02); color: #123229; }
.paper-hotspot > span { display: grid; width: clamp(20px, 2.6vw, 34px); height: clamp(20px, 2.6vw, 34px); place-items: center; border-radius: 50%; background: rgba(7,16,15,.78); color: var(--mint); font-size: clamp(9px, 1.1vw, 13px); }
.paper-hotspot small { position: absolute; z-index: 4; top: calc(100% + 5px); left: 50%; display: none; width: 180px; padding: 7px; border-radius: 7px; background: #07100f; color: #dbe8e3; font-size: 9px; font-weight: 500; transform: translateX(-50%); }
.paper-hotspot:hover small,
.paper-hotspot:focus-visible small { display: block; }
.paper-hotspot.is-placed { opacity: .18; }
.fragment-pos-1 { top: 30.2%; left: 58.8%; width: 14%; height: 22.2%; transform: rotate(-2deg); }
.fragment-pos-2 { top: 30.1%; left: 77%; width: 14%; height: 22.4%; transform: rotate(2deg); }
.fragment-pos-3 { top: 56.7%; left: 56.2%; width: 8.6%; height: 7.1%; }
.fragment-pos-4 { top: 55.6%; left: 67.3%; width: 13.2%; height: 9.4%; }
.fragment-pos-5 { top: 55.6%; left: 82.7%; width: 13.3%; height: 9.4%; }

.selected-fragment-status { display: grid; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; }
.selected-fragment-status span { color: var(--muted); font-size: 10px; }
.selected-fragment-status strong { color: var(--mint); font-family: var(--mono); }
.selected-fragment-status small { color: var(--muted); text-align: right; }
.paper-legend { display: grid; margin: 10px 0 18px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.paper-legend span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 10px; }
.paper-legend b { display: inline-grid; width: 20px; height: 20px; margin-right: 6px; place-items: center; border-radius: 50%; background: rgba(138,231,195,.12); color: var(--mint); font-family: var(--mono); }
.note3-transcript { margin-top: 18px; }

.verification-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.verify-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.024); }
.verify-card.is-verified { border-color: rgba(138,231,195,.32); background: rgba(138,231,195,.05); }
.verify-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.verify-card h4 { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.verify-card p { min-height: 46px; color: var(--muted); font-size: 11px; }
.verified-mark { color: var(--mint); font-family: var(--mono); font-size: 9px; }
.choice-stack { display: grid; gap: 7px; }
.mini-choice { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); text-align: left; cursor: pointer; font-size: 10px; }
.mini-choice:hover { border-color: rgba(138,231,195,.3); }
.color-key-choice { display: flex; align-items: center; gap: 9px; }
.color-key-choice > span { width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: var(--choice-color); box-shadow: 0 0 12px color-mix(in srgb, var(--choice-color) 55%, transparent); }

.history-log { display: grid; gap: 5px; margin-top: 10px; }
.history-row { display: grid; align-items: center; min-height: 34px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; grid-template-columns: 24px minmax(110px,1fr) repeat(4,24px); gap: 5px; }
.history-row > b { color: var(--muted); font-family: var(--mono); font-size: 8px; }
.history-name { overflow: hidden; color: #c5d2cd; font-family: var(--mono); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.history-token { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: #07100f; font-family: var(--mono); font-size: 9px; font-weight: 900; }
.token-blue { background: #78b9ff; }
.token-green { background: #8ae7c3; }
.token-orange { background: #f1b16e; }
.token-purple { background: #c5a0ff; }
.history-legend { min-height: 22px; border: 0; color: var(--muted); font-size: 7px; text-align: center; }
.history-legend span:nth-child(2) { text-align: left; }
.history-answer { display: grid; margin-top: 9px; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.history-answer .code-input { min-height: 38px; font-size: 10px; text-transform: uppercase; }

.final-id-panel { margin-top: 16px; padding: 26px; border: 1px solid rgba(138,231,195,.26); border-radius: 18px; background: rgba(138,231,195,.04); }
.final-id-panel h4 { margin: 0 0 8px; font-size: 18px; }
.final-id-panel p { color: var(--muted); font-size: 12px; }
.final-id-form { display: flex; max-width: 440px; gap: 9px; margin-top: 16px; }

/* Dialogs */
.modal {
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: #0c1916;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.modal.narrow { width: min(560px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(0, 7, 6, .78); backdrop-filter: blur(8px); }
.modal form { padding: clamp(22px, 4vw, 34px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal-head .eyebrow { margin-bottom: 6px; }
.modal-head h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.modal-intro { margin: 12px 0 24px; color: var(--muted); font-size: 12px; }
.setup-question { display: grid; margin: 0 0 13px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 13px; gap: 7px; }
.setup-question legend { padding: 0 4px; font-size: 12px; font-weight: 700; }
.setup-question label { display: flex; align-items: center; gap: 8px; color: #b9cac4; font-size: 11px; cursor: pointer; }
.setup-question input { accent-color: #79dcb8; }
.color-selection { grid-template-columns: repeat(4,1fr); }
.color-selection legend { grid-column: 1/-1; }
.color-selection label { justify-content: center; }
.color-selection label span { display: grid; width: 100%; min-height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 9px; font-family: var(--mono); font-weight: 800; }
.color-selection label:has(input:checked) span { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.color-selection input { position: absolute; opacity: 0; }
.color-selection .choice-blue { color: #78b9ff; }
.color-selection .choice-green { color: #8ae7c3; }
.color-selection .choice-orange { color: #f1b16e; }
.color-selection .choice-purple { color: #c5a0ff; }
.notice-box { margin: 18px 0; padding: 13px 15px; border-left: 2px solid var(--amber); background: rgba(242,200,121,.06); }
.notice-box span { color: var(--amber); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.notice-box p { margin: 3px 0 0; color: #c9d1cc; font-size: 11px; }
.close-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--muted); font-size: 20px; }
.modal textarea { width: 100%; resize: vertical; padding: 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--ink); font-size: 12px; line-height: 1.8; }
.modal-actions { justify-content: space-between; gap: 12px; margin-top: 14px; }
.modal-actions span { color: var(--muted); font-size: 9px; }
.modal-actions.split > * { flex: 1; }
.prototype-key { display: grid; gap: 10px; }
.prototype-key > div { display: grid; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); grid-template-columns: 82px 1fr; gap: 12px; }
.prototype-key p { margin: 0; color: #b3c2bd; font-size: 11px; }
.prototype-source { margin: 18px 0; color: var(--muted); font-size: 11px; }

.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: min(390px, calc(100vw - 48px)); padding: 13px 16px; border: 1px solid rgba(138,231,195,.3); border-radius: 12px; background: #10231e; color: #d9ebe4; box-shadow: 0 18px 40px rgba(0,0,0,.3); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: 220ms ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

.system-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 30px; background: #030807; text-align: center; }
.system-overlay[hidden] { display: none; }
.overlay-inner { width: min(1080px,100%); }
.overlay-signal { width: 90px; height: 90px; margin: 0 auto 26px; border: 1px solid var(--mint); border-radius: 50%; box-shadow: 0 0 70px rgba(138,231,195,.22); animation: overlayPulse 1.4s infinite; }
@keyframes overlayPulse { 50% { transform: scale(.9); opacity: .55; } }
.overlay-inner .eyebrow { margin-bottom: 8px; }
.overlay-inner h2 { margin: 0; font-family: var(--mono); font-size: clamp(30px,6vw,62px); letter-spacing: -.05em; }
.overlay-inner p { color: var(--muted); }

.resolution { display: grid; place-items: center; }
.resolution-card { width: min(820px,100%); padding: clamp(32px,7vw,74px); border: 1px solid rgba(138,231,195,.28); border-radius: 30px; background: radial-gradient(circle at 50% 0,rgba(138,231,195,.1),transparent 42%),rgba(10,24,20,.88); box-shadow: var(--shadow); text-align: center; }
.resolution-card[hidden] { display: none; }
.unlock-orbit { display: grid; width: 92px; height: 92px; margin: 0 auto 26px; place-items: center; border: 1px solid var(--mint); border-radius: 50%; box-shadow: 0 0 45px rgba(138,231,195,.15); }
.unlock-orbit span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 50%; background: var(--mint); color: #07100f; font-size: 26px; }
.resolution-card .eyebrow { margin-bottom: 9px; }
.resolution-card h2 { margin: 0; font-size: clamp(34px,5vw,58px); letter-spacing: -.055em; }
.resolution-lede { color: var(--muted); }
.identity-complete-record { display: grid; width: min(440px, 100%); margin: 26px auto 0; padding: 18px; border: 1px solid rgba(138,231,195,.3); border-radius: 14px; background: rgba(138,231,195,.05); grid-template-columns: 1fr auto; align-items: end; text-align: left; }
.identity-complete-record span { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.identity-complete-record strong { grid-row: 2; color: #e8f4ef; font-family: var(--mono); font-size: clamp(26px,4vw,38px); letter-spacing: .12em; }
.identity-complete-record em { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--mint); font-family: var(--mono); font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .12em; }
.resolution-grid { display: grid; margin: 34px 0; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.resolution-grid div { padding: 17px 8px; border-right: 1px solid var(--line); }
.resolution-grid div:last-child { border: 0; }
.resolution-grid span, .resolution-grid strong { display: block; }
.resolution-grid span { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.resolution-grid strong { margin-top: 5px; color: var(--mint); font-family: var(--mono); font-size: 9px; }
.resolution-actions { justify-content: center; flex-wrap: wrap; gap: 10px; }
.clear-card .eyebrow { color: var(--mint); letter-spacing: .2em; }
.clear-card h2 { color: var(--mint); font-family: var(--mono); font-size: clamp(52px, 9vw, 96px); letter-spacing: .06em; text-shadow: 0 0 28px var(--mint); }
.clear-title { display: grid; width: fit-content; max-width: 100%; margin: 30px auto 0; padding-top: 26px; border-top: 1px solid var(--mint); gap: 8px; }
.clear-title strong { color: #e8f4ef; font-size: clamp(20px, 3.2vw, 32px); font-weight: 750; letter-spacing: .04em; }
.clear-title small { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .2em; }
.clear-thanks { margin: 28px 0; color: #e8f4ef; }
.clear-actions .ghost-button { border-color: var(--mint); color: var(--mint); }

.review-list { text-align: left; }
.review-item { padding: 15px 0; border-bottom: 1px solid var(--line); }
.review-item:last-child { border: 0; }
.review-item strong { display: block; font-size: 13px; }
.review-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 135px; }
  .hero-console { width: 100%; margin: 0; }
  .workspace { grid-template-columns: 1fr; }
  .case-sidebar { position: static; height: auto; min-height: 0; }
  .case-nav { grid-template-columns: repeat(4, minmax(110px,1fr)); overflow-x: auto; padding-bottom: 5px; }
  .held-items { margin-top: 18px; }
  .case-main { min-height: 700px; }
}

@media (max-width: 720px) {
  .topbar { height: 66px; padding-inline: 18px; }
  .brand strong { font-size: 9px; }
  .brand small, .session-indicator, .icon-button span:last-child, .log-number span { display: none; }
  .log-number { min-width: 0; padding: 6px 8px; }
  .log-number strong { font-size: 10px; }
  .section { padding: 94px 16px 28px; }
  .hero { align-content: start; gap: 40px; }
  .hero h1 { font-size: clamp(40px,12vw,60px); }
  .hero-meta div { padding-inline: 10px; }
  .scan-frame { height: 300px; }
  .workspace { gap: 14px; }
  .case-nav { grid-template-columns: repeat(4, 132px); }
  .case-toolbar { padding: 0 16px; }
  .view-container { padding: 18px 14px 24px; }
  .view-head { display: block; }
  .view-code { display: inline-block; margin-top: 12px; }
  .info-card.span-4, .info-card.span-5, .info-card.span-6, .info-card.span-7, .info-card.span-8 { grid-column: span 12; }
  .desk-core-grid .desk-object { grid-column: span 12; }
  .terminal-lock, .locked-panel form, .final-id-form { grid-template-columns: 1fr; display: grid; }
  .interview-grid, .verification-grid, .fragment-board { grid-template-columns: 1fr; }
  .physical-object-heading, .drawer-panel { display: grid; }
  .drawer-contents { grid-template-columns: 1fr; }
  .employee-sheet-head { align-items: center; }
  .employee-sheet { overflow-x: auto; }
  .employee-sheet table { min-width: 680px; }
  .notebook-copy { display: none; }
  .notebook-gap { font-size: 7px; }
  .paper-hotspot small { display: none !important; }
  .paper-legend { grid-template-columns: 1fr; }
  .selected-fragment-status { grid-template-columns: auto 1fr; }
  .selected-fragment-status small { grid-column: 1 / -1; text-align: left; }
  .history-row { grid-template-columns: 20px minmax(92px,1fr) repeat(4,22px); }
  .message-row { max-width: 92%; }
  .message-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  .resolution-grid { grid-template-columns: repeat(2,1fr); }
  .resolution-grid div:nth-child(2) { border-right: 0; }
  .resolution-grid div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .color-selection { grid-template-columns: repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Online prototype v4 — physical room and observation flow */
.brand-button {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.setup-modal { width: min(760px, calc(100vw - 32px)); }
.setup-shell { padding: clamp(24px, 5vw, 44px); }
.setup-step { padding: 0 !important; }
.setup-step h2 { margin: 0; font-size: clamp(27px, 4vw, 38px); letter-spacing: -.045em; }
.color-selection.large { margin: 24px 0; padding: 0; border: 0; gap: 10px; }
.color-selection.large label span { min-height: 118px; font-size: 16px; }
.consent-paper {
  margin: 20px 0 16px;
  padding: 22px;
  border-radius: 8px;
  background: #efecdf;
  color: #25302c;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}
.consent-paper p { margin: 0 0 14px; font-size: 14px; }
.consent-paper p:last-child { margin: 0; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; color: #c9d6d1; font-size: 14px; cursor: pointer; }
.consent-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mint); }
.setup-question { font-size: 15px; }
.setup-question legend { font-size: 14px; }
.setup-question label { min-height: 35px; font-size: 13px; }

.crumb-button {
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
}

.desk-map,
.drawer-photo,
.notebook-reader,
.case-closeup,
.iv-device,
.object-crop,
.fragment-tray-crop {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #070b0a;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}
.desk-map { margin: 0; aspect-ratio: 16 / 9; }
.desk-map > img,
.drawer-photo > img,
.notebook-reader > img,
.case-closeup > img,
.iv-device > img,
.object-crop > img,
.fragment-tray-crop > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.desk-hotspot,
.drawer-hotspot {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.desk-hotspot span,
.drawer-hotspot span {
  position: absolute;
  left: 50%;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(4, 10, 9, .9);
  color: var(--mint);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.desk-hotspot:hover,
.desk-hotspot:focus-visible,
.drawer-hotspot:hover,
.drawer-hotspot:focus-visible { border-color: var(--mint); background: rgba(138, 231, 195, .08); }
.desk-hotspot:hover span,
.desk-hotspot:focus-visible span,
.drawer-hotspot:hover span,
.drawer-hotspot:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.pc-hotspot { top: 1%; left: 27%; width: 43%; height: 42%; }
.clipboard-hotspot { top: 42%; left: 12%; width: 19%; height: 39%; }
.note1-hotspot { top: 48%; left: 34%; width: 11%; height: 33%; }
.iv-hotspot { top: 20%; left: 71%; width: 21%; height: 29%; }
.iv-hotspot.is-research-ready::before {
  content: "";
  position: absolute;
  inset: 20% 15% 30% 16%;
  border-radius: 3px;
  background: rgba(138, 231, 195, .28);
  box-shadow: 0 0 8px 1px rgba(138, 231, 195, .24), inset 0 0 16px rgba(138, 231, 195, .24);
  pointer-events: none;
  animation: terminal-ready-glow 3.2s ease-in-out infinite;
}
@keyframes terminal-ready-glow {
  50% { opacity: .52; }
}
@media (prefers-reduced-motion: reduce) {
  .iv-hotspot.is-research-ready::before { animation: none; }
}
.desk-drawer-hotspot { top: 85%; left: 9%; width: 24%; height: 15%; border-radius: 6px; }
.file-hotspot { top: 47%; left: 78%; width: 17%; height: 36%; }
.desk-hint { margin: 11px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

.consent-clipboard { max-width: 620px; }
.clipboard-flip-hotspot {
  position: absolute;
  z-index: 3;
  right: 5.5%;
  bottom: 4.5%;
  width: 25%;
  height: 17%;
  border: 0;
  border-radius: 80% 0 8px 0;
  background: linear-gradient(135deg, transparent 45%, rgba(138,231,195,.11) 46%);
  cursor: pointer;
}
.clipboard-flip-hotspot::after { position: absolute; right: 12px; bottom: 10px; color: var(--mint); content: "↶"; font-size: clamp(14px, 3vw, 24px); opacity: .45; }
.clipboard-flip-hotspot span { position: absolute; right: 8px; bottom: 42px; padding: 4px 7px; border-radius: 999px; background: rgba(7,16,15,.88); color: var(--mint); font-size: 9px; opacity: 0; transition: opacity 160ms ease; }
.clipboard-flip-hotspot:hover span,
.clipboard-flip-hotspot:focus-visible span { opacity: 1; }
.key-hotspot { z-index: 5; }
.sheet-back-key-photo {
  position: absolute;
  z-index: 4;
  top: 40%;
  left: 5%;
  width: 20%;
  height: 18%;
  overflow: hidden;
  border: 1px solid rgba(36,48,44,.28);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  transform: rotate(-3deg);
}
.sheet-back-key-photo img { position: absolute; top: -195%; left: -200%; width: 500%; height: auto; max-width: none; }
.has-lifted-record .key-hotspot { top: 40%; left: 5%; width: 20%; height: 18%; }
.has-lifted-record .key-taken-label { top: 49%; left: 15%; }

.object-crop { aspect-ratio: 16 / 6; }
.note1-crop img { width: 165%; height: 165%; object-position: 43% 75%; transform: translate(-20%, -24%); }
.paper-sheet {
  width: min(100% - 28px, 690px);
  margin: -35px auto 0;
  padding: clamp(28px, 5vw, 52px);
  border-radius: 4px;
  background: repeating-linear-gradient(#eeeade 0 31px, #d8d7cd 32px 33px);
  color: #27312d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
  transform: rotate(.35deg);
}
.paper-sheet p { margin: 0 0 22px; }
.handwritten { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(16px, 2vw, 20px); }
.note1-sheet time { display: inline-block; min-width: 65px; font-family: var(--mono); font-size: .74em; font-weight: 700; }
.note1-password { padding: 12px 14px; border-left: 3px solid rgba(39,49,45,.42); background: rgba(39,49,45,.045); }
.note1-password small { font-size: .72em; }
.note1-decoy { display: grid; margin: 26px 0 22px; padding: 15px; border: 2px solid rgba(89,58,54,.42); grid-template-columns: repeat(4,1fr); gap: 8px; transform: rotate(-.7deg); }
.note1-decoy strong { grid-column: 1 / -1; color: #6c302b; font-size: .8em; letter-spacing: .12em; }
.note1-decoy span { font-size: .85em; }
.note1-tail { opacity: .78; }

.drawer-photo { aspect-ratio: 3 / 2; }
.drawer-photo.is-locked > img { object-position: 10% 100%; transform: scale(2.55); transform-origin: 10% 100%; }
.photo-lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 16px;
  background: rgba(3, 7, 6, .74);
  text-align: center;
}
.photo-lock span { color: var(--amber); font-family: var(--mono); font-size: 15px; font-weight: 800; letter-spacing: .2em; }
.card-drawer-hotspot { top: 35%; left: 10%; width: 25%; height: 43%; }
.note2-drawer-hotspot { top: 25%; left: 34%; width: 28%; height: 55%; }
.case-drawer-hotspot { top: 26%; left: 61%; width: 33%; height: 55%; }
.acquired-card {
  display: grid;
  width: min(100%, 240px);
  margin: 18px auto 0;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(138,231,195,.24);
  border-radius: 14px;
  background: rgba(138,231,195,.045);
}
.acquired-card img { display: block; width: 100%; border-radius: 9px; }
.acquired-card figcaption { color: #dceae5; font-weight: 750; }

.notebook-reader { aspect-ratio: 3 / 2; background: #161b19; }
.notebook-page-copy {
  position: absolute;
  top: 23%;
  left: 58%;
  width: 31%;
  color: rgba(41, 43, 37, .83);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  transform: rotate(-1.4deg);
}
.notebook-page-copy time { display: block; margin-bottom: 18px; font-size: clamp(10px, 1.5vw, 16px); font-weight: 700; }
.notebook-page-copy p { margin: 0; font-size: clamp(10px, 1.45vw, 16px); line-height: 2.05; }
.page-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.page-controls > span { min-width: 90px; color: var(--muted); font-family: var(--mono); font-size: 10px; text-align: center; }

.case-closeup { aspect-ratio: 16 / 5; }
.case-closeup img { object-position: 80% 50%; transform: scale(1.45); }
.compact-panel { margin-top: 16px; min-height: 220px; }
.code-panel { max-width: 600px; margin: 18px auto 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .025); }
.code-panel label { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.code-panel > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }

.a5-file-view { display: grid; grid-template-columns: minmax(170px, .45fr) minmax(0, 1.55fr); gap: 18px; }
.file-cover {
  display: grid;
  min-height: 390px;
  place-content: center;
  border-radius: 8px 22px 22px 8px;
  background: linear-gradient(135deg, #555f5b, #252b29);
  box-shadow: inset 7px 0 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.28);
  text-align: center;
}
.file-cover span { color: var(--mint); font-family: var(--mono); font-size: 13px; }
.file-cover strong { margin-top: 20px; font-size: 30px; }
.file-cover small { margin-top: 8px; color: #e2b870; font-weight: 800; }
.file-sticky-note { display: grid; width: 92px; height: 92px; margin: 22px auto 0; place-items: center; background: #d9cf80; color: #27291f; font-family: "Yu Mincho", serif; font-size: 15px; font-style: normal; font-weight: 800; box-shadow: 0 9px 18px rgba(0,0,0,.22); transform: rotate(-3deg); }
.fragment-tray-crop { aspect-ratio: 4 / 3; }
.fragment-tray-crop img { object-position: 92% 51%; transform: scale(1.52); }
.a5-sealed-panel {
  display: grid;
  min-height: 390px;
  place-content: center;
  border: 1px dashed rgba(242,200,121,.32);
  border-radius: 18px;
  background: rgba(242,200,121,.025);
  text-align: center;
}
.a5-sealed-panel span { color: var(--amber); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.a5-sealed-panel p { margin: 9px 0 0; color: var(--muted); font-size: 13px; }

.pc-hardware {
  position: relative;
  min-height: 580px;
  display: grid;
  place-items: center;
  padding: 28px;
  border: 18px solid #1c2321;
  border-radius: 25px;
  background: radial-gradient(circle at 50% 30%, #294d63, #091522 70%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .55), 0 28px 70px rgba(0, 0, 0, .28);
}
.pc-asset-label { position: absolute; right: 18px; bottom: 8px; color: rgba(255,255,255,.5); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.pc-lock-screen { width: min(480px, 100%); text-align: center; }
.pc-lock-screen > span { color: rgba(255,255,255,.68); font-family: var(--mono); font-size: 12px; letter-spacing: .16em; }
.pc-lock-screen > strong { display: block; margin: 16px 0 24px; font-size: clamp(23px, 3vw, 34px); }
.pc-lock-screen form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pc-lock-screen input { min-width: 0; min-height: 52px; padding: 0 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; }

.windows-shell { overflow: hidden; border: 1px solid #9ba3a8; border-radius: 10px; background: #f4f5f6; color: #22282c; box-shadow: 0 28px 70px rgba(0,0,0,.27); }
.windows-titlebar { display: flex; height: 38px; align-items: center; justify-content: space-between; padding: 0 13px; background: #e6e8ea; font-size: 12px; }
.windows-titlebar i { color: #62696d; font-style: normal; letter-spacing: .5em; }
.windows-address { display: grid; min-height: 48px; padding: 7px 10px; border-block: 1px solid #ccd0d3; grid-template-columns: 35px 1fr; gap: 8px; }
.windows-address button { border: 0; background: transparent; color: #3d464b; cursor: pointer; }
.windows-address button:disabled { opacity: .3; }
.windows-address span { padding: 5px 9px; border: 1px solid #c7cccf; background: #fff; font-family: var(--mono); font-size: 11px; }
.windows-layout { display: grid; min-height: 560px; grid-template-columns: 220px minmax(0, 1fr); }
.windows-tree { padding: 14px 9px; border-right: 1px solid #d5d8da; background: #eef0f1; }
.windows-tree button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: #31383c; text-align: left; cursor: pointer; }
.windows-tree button:hover { background: #dce9f6; }
.windows-content { min-width: 0; padding: 22px; overflow: auto; }
.file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.file-list { display: grid; max-width: 300px; }
.file-tile { display: grid; min-height: 130px; padding: 14px; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #22282c; text-align: center; cursor: pointer; }
.file-tile:hover { border-color: #86afd5; background: #e9f2fa; }
.file-tile > span { font-size: 36px; }
.file-tile strong { font-size: 12px; }
.file-tile small { color: #6c7479; font-size: 9px; }
.explorer-details { border-top: 1px solid #d5d8da; }
.explorer-row { display: grid; width: 100%; min-height: 42px; align-items: center; padding: 0 10px; border: 0; border-bottom: 1px solid #e1e3e5; background: transparent; color: #252b2e; grid-template-columns: minmax(0, 1fr) 170px; text-align: left; cursor: pointer; }
.explorer-row:not(.head):hover { background: #e9f2fa; }
.explorer-row.head { color: #71787c; font-size: 10px; cursor: default; }
.terminal-log { padding: 24px; border-radius: 5px; background: #111514; color: #b6f8d8; font-family: var(--mono); }
.terminal-log header { margin-bottom: 18px; color: #fff; font-size: 12px; }
.terminal-log pre { white-space: pre-wrap; font-size: 14px; line-height: 2; }

.iv-device { aspect-ratio: 3 / 2; }
.iv-device > img { object-fit: cover; }
.iv-screen-overlay {
  position: absolute;
  top: 19%;
  left: 22%;
  display: grid;
  width: 60%;
  height: 48%;
  align-content: center;
  padding: clamp(8px, 1.6vw, 20px);
  overflow: auto;
  border: 1px solid rgba(138, 231, 195, .34);
  border-radius: 4px;
  background: rgba(3, 12, 10, .94);
  color: #e9f7f1;
  box-shadow: inset 0 0 35px rgba(138, 231, 195, .06);
}
.iv-sync { text-align: center; }
.iv-sync > span,
.iv-result > span { color: var(--mint); font-family: var(--mono); font-size: clamp(10px, 1.15vw, 14px); letter-spacing: .14em; }
.iv-sync > strong { display: block; margin: 5px 0; font-family: var(--mono); font-size: clamp(18px, 3vw, 34px); }
.iv-sync ul { display: grid; margin: 8px auto 12px; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 8px; list-style: none; text-align: left; }
.iv-sync li { color: var(--muted); font-size: clamp(7px, .9vw, 10px); }
.iv-sync li.done { color: var(--mint); }
.iv-sync p { margin: 7px 0 0; color: var(--muted); font-size: clamp(7px, .8vw, 9px); }
.iv-sync.counter-only { display: grid; place-items: center; gap: clamp(10px, 1.6vw, 18px); }
.iv-screen-overlay .primary-button { min-height: 40px; padding-inline: 16px; font-size: clamp(11px, 1.25vw, 14px); }
.iv-question > p { margin: 7px 0 10px; font-size: clamp(12px, 1.45vw, 17px); line-height: 1.45; }
.iv-question .question-label { margin-bottom: 4px; font-size: clamp(9px, 1vw, 12px); }
.iv-question .answer-list { gap: 5px; }
.iv-question .answer-option { padding: 7px 9px; grid-template-columns: 23px 1fr; gap: 5px; font-size: clamp(10px, 1.15vw, 14px); line-height: 1.4; }
.iv-question .question-actions { margin-top: 8px; }
.iv-question .feedback { margin: 0; font-size: clamp(9px, .95vw, 12px); line-height: 1.3; }
.iv-result { text-align: center; }
.iv-result > strong { display: block; margin: 2px 0; color: var(--mint); font-family: var(--mono); font-size: clamp(30px, 5vw, 62px); line-height: 1; }
.iv-result p { margin: 8px 0; font-size: clamp(9px, 1.1vw, 13px); }
.iv-result .iv-subject-id { color: var(--muted); font-family: var(--mono); font-size: clamp(9px, 1vw, 12px); white-space: nowrap; }
.iv-result small { color: var(--muted); font-size: clamp(7px, .9vw, 10px); }

.last-stepper { display: grid; margin-bottom: 18px; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.last-stepper > span { display: grid; min-width: 0; min-height: 58px; place-content: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-family: var(--mono); font-size: 10px; text-align: center; }
.last-stepper > span b { display: block; margin-top: 3px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
.last-stepper > span.active { border-color: var(--mint); background: rgba(138, 231, 195, .08); color: var(--mint); }
.last-stepper > span.done { border-color: rgba(138,231,195,.25); color: var(--mint); }
.last-panel { min-height: 360px; padding: clamp(24px, 5vw, 50px); border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.02); }
.last-panel h4 { max-width: 700px; margin: 4px 0 8px; font-size: clamp(22px, 3vw, 32px); }
.last-panel > p:not(.card-label):not(.feedback) { color: var(--muted); }
.last-color-grid { display: grid; margin-top: 26px; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.last-color { display: flex; min-height: 100px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); color: var(--ink); cursor: pointer; }
.last-color span { width: 18px; height: 18px; border-radius: 50%; background: currentColor; box-shadow: 0 0 18px currentColor; }
.last-color.blue { color: #78b9ff; }
.last-color.green { color: #8ae7c3; }
.last-color.orange { color: #f1b16e; }
.last-color.purple { color: #c5a0ff; }
.selection-verify-form .last-color { position: relative; min-height: 64px; font-family: var(--mono); font-size: 13px; font-weight: 700; }
.selection-verify-form .last-color input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.selection-verify-form .last-color:has(input:checked),
.selection-verify-form .last-color:has(input:focus-visible) { border-color: currentColor; background: rgba(255,255,255,.08); outline: 2px solid currentColor; outline-offset: 2px; }
.last-form { display: grid; max-width: 580px; margin-top: 22px; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.selection-verify-form { display: block; max-width: 760px; }
.selection-verify-form > button { margin-top: 12px; }
.history-input { min-width: 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0c1513; color: #e9f4ef; font-family: var(--mono); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.access-log { display: grid; margin-top: 20px; gap: 6px; }
.access-log-row { display: grid; min-width: 0; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; grid-template-columns: 78px minmax(190px, 1fr) auto; gap: 10px; font-family: var(--mono); }
.access-log-row time { color: var(--muted); font-size: 9px; }
.access-log-row > span { overflow: hidden; color: #c0d0ca; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.access-log-row code { color: #73857e; font-size: 10px; white-space: nowrap; }
.access-log-row i { display: inline; padding: 2px 4px; border-radius: 3px; color: #07100f; font-style: normal; font-weight: 900; }
.access-log-row i.token-blue,
.access-log-row i.token-green,
.access-log-row i.token-orange,
.access-log-row i.token-purple { padding: 0 1px; background: transparent; text-shadow: 0 0 7px currentColor; }
.access-log-row i.token-blue { color: #78b9ff; }
.access-log-row i.token-green { color: #8ae7c3; }
.access-log-row i.token-orange { color: #f1b16e; }
.access-log-row i.token-purple { color: #c5a0ff; }

@media (max-width: 900px) {
  .windows-layout { grid-template-columns: 165px minmax(0, 1fr); }
  .a5-file-view { grid-template-columns: 1fr; }
  .file-cover { min-height: 190px; }
  .access-log-row { grid-template-columns: 60px minmax(120px, 1fr); }
  .access-log-row code { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .desk-hotspot span,
  .drawer-hotspot span { bottom: 4px; display: block; padding: 3px 5px; font-size: 7px; opacity: .92; transform: translate(-50%, 0); }
  .desk-hint { display: none; }
  .clipboard-flip-hotspot span { display: none; }
  .paper-sheet { margin-top: -16px; }
  .page-controls { gap: 6px; }
  .page-controls .secondary-button { padding-inline: 10px; font-size: 10px; }
  .notebook-page-copy { top: 21%; left: 57%; width: 33%; }
  .notebook-page-copy time { margin-bottom: 7px; }
  .acquired-card { grid-template-columns: 110px minmax(0, 1fr); }
  .pc-hardware { min-height: 470px; padding: 16px; border-width: 10px; }
  .pc-lock-screen form,
  .code-panel > div,
  .last-form { grid-template-columns: 1fr; }
  .windows-layout { min-height: 520px; grid-template-columns: 1fr; }
  .windows-tree { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #d5d8da; }
  .windows-tree button { width: auto; flex: 0 0 auto; }
  .windows-content { padding: 14px; }
  .file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-tile { min-height: 110px; }
  .explorer-row { grid-template-columns: minmax(0, 1fr); padding-block: 8px; }
  .explorer-row span:last-child { display: none; }
  .iv-screen-overlay { top: 16%; left: 20%; width: 60%; height: 61%; padding: 6px; }
  .iv-sync ul { margin-block: 4px 6px; }
  .iv-question .answer-option { padding: 3px 4px; }
  .iv-question .question-actions { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
  .last-color-grid { grid-template-columns: repeat(2, 1fr); }
  .last-color { min-height: 72px; }
  .last-stepper > span b { display: none; }
  .access-log-row { display: block; }
  .access-log-row > * { display: block; margin-bottom: 4px; }
  .access-log-row code { overflow-x: auto; }
}

/* 2026-09-17 audit FIX: current physical layout and session-record flow */
.participation-link {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.participation-record { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.participation-record p { margin: 0 0 18px; color: #c3d0cb; font-size: 14px; line-height: 1.8; }
.participation-record p:last-child { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.participation-record p:last-child strong { color: #b9c7c2; font-family: var(--mono); font-size: 12px; font-weight: 500; }

.theme-preview { position: relative; display: grid !important; min-height: 118px !important; padding: 10px !important; place-content: stretch !important; place-items: stretch !important; overflow: hidden; border-color: color-mix(in srgb, currentColor 48%, var(--line)) !important; background: #0b1211; grid-template-columns: 29% 1fr; grid-template-rows: 23px 1fr; gap: 7px; }
.theme-preview .preview-topbar { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; padding: 4px 7px; border-radius: 4px; background: #14211e; font-style: normal; }
.theme-preview .preview-topbar b { color: currentColor; font-family: var(--mono); font-size: 8px; }
.theme-preview .preview-topbar em { display: block; width: 27%; height: 4px; border-radius: 999px; background: currentColor; opacity: .72; }
.theme-preview .preview-sidebar { display: grid; align-content: start; padding: 7px 5px; border-radius: 4px; background: #101a18; gap: 5px; }
.theme-preview .preview-sidebar b { display: block; height: 7px; border-left: 2px solid currentColor; border-radius: 2px; background: #1b2925; }
.theme-preview .preview-content { display: grid; padding: 7px; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: 5px; background: linear-gradient(135deg, color-mix(in srgb, currentColor 13%, transparent), #101816); grid-template-columns: repeat(2, 1fr); grid-template-rows: 9px 1fr 15px; gap: 5px; }
.theme-preview .preview-content b { grid-column: 1 / -1; border-radius: 3px; background: currentColor; opacity: .74; }
.theme-preview .preview-content em { border-radius: 3px; background: #21302c; }
.theme-preview .preview-content strong { grid-column: 2; border-radius: 3px; background: currentColor; }
.theme-preview i,
.theme-preview b,
.theme-preview em,
.theme-preview strong { width: auto; height: auto; margin: 0; box-shadow: none; }

.note2-hotspot { top: 49%; left: 52%; width: 17%; height: 33%; }
.desk-drawer-hotspot { top: 84%; left: 8%; width: 25%; height: 16%; }

.clipboard-stage { max-width: 620px; aspect-ratio: 2 / 3; }
.clipboard-stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.clipboard-turn-hotspot { position: absolute; z-index: 6; border: 0; background: transparent; cursor: pointer; }
.clipboard-turn-hotspot::after { position: absolute; right: 8px; bottom: 8px; color: var(--mint); content: "↶"; font-size: 28px; opacity: .34; }
.clipboard-turn-hotspot { inset: 8%; }
.entry-log-sheet { z-index: 3; }
.is-board-back .clipboard-turn-hotspot { inset: 0; }
.is-board-back .key-hotspot { z-index: 8; top: 34%; left: 34%; width: 32%; height: 30%; }
.key-removed-patch { position: absolute; z-index: 5; top: 42%; left: 42%; width: 17%; height: 16%; border-radius: 4px; background: #737675; box-shadow: 0 0 12px #737675; opacity: .96; }

.note2-reader { aspect-ratio: 3 / 2; }
.note2-reader .notebook-page-copy { top: 8%; width: 36%; height: 82%; overflow: auto; padding: 8px 10px; color: rgba(38,40,34,.9); transform: none; scrollbar-width: thin; }
.note2-reader .page-left { left: 9%; }
.note2-reader .page-right { left: 55%; }
.note2-reader.has-missing-first-page .page-right { left: 55%; }
.diary-entry { margin-bottom: 14px; }
.diary-entry time { margin: 0 0 4px; font-size: clamp(9px,1vw,13px); }
.diary-entry p { margin: 0; font-size: clamp(8px,.92vw,12px); line-height: 1.55; }
.a5-paper-tray { position: relative; min-height: 500px; overflow: hidden; border: 1px solid rgba(183,217,205,.2); border-radius: 18px 7px 7px 18px; background: linear-gradient(145deg,rgba(134,176,162,.2),rgba(40,58,52,.42)); box-shadow: inset 16px 0 24px rgba(255,255,255,.035), inset 0 0 0 8px rgba(255,255,255,.025); }
.a5-paper-tray::before { position: absolute; z-index: 10; right: 0; bottom: 0; left: 0; height: 21%; border-top: 1px solid rgba(220,240,233,.17); background: linear-gradient(180deg,rgba(203,231,221,.05),rgba(125,168,153,.18)); content: ""; pointer-events: none; }
.a5-paper { position: absolute; display: grid; padding: 16px; overflow: hidden; border: 0; background: repeating-linear-gradient(#e5ddc8 0 25px,#d1cbb9 26px 27px); color: #36362f; box-shadow: 0 10px 22px rgba(0,0,0,.32); font-family: "Yu Mincho",serif; text-align: left; cursor: pointer; transform: rotate(var(--paper-angle,0deg)); transform-origin: center; transition: transform 160ms ease,box-shadow 160ms ease; }
.a5-paper.paper-slot-1 { --paper-angle:-3deg; z-index: 2; top: 8%; left: 8%; width: 38%; height: 30%; }
.a5-paper.paper-slot-2 { --paper-angle:2.5deg; z-index: 3; top: 14%; right: 7%; width: 38%; height: 30%; }
.a5-paper.paper-slot-3 { --paper-angle:-1.5deg; z-index: 4; top: 56%; left: 7%; width: 35%; height: 21%; }
.a5-paper.paper-slot-4 { --paper-angle:1deg; z-index: 5; top: 49%; right: 7%; width: 52%; height: 18%; }
.a5-paper.paper-slot-5 { --paper-angle:-1deg; z-index: 6; right: 10%; bottom: 4%; width: 44%; height: 28%; }
.a5-paper:hover,
.a5-paper:focus-visible,
.a5-paper.is-current,
.a5-paper.is-selected { z-index: 12; box-shadow: 0 0 0 3px var(--mint),0 16px 32px rgba(0,0,0,.4); transform: rotate(0) translateY(-3px); }
.a5-paper.folded { background: repeating-linear-gradient(#e5ddc8 0 25px,#d1cbb9 26px 27px); }
.a5-paper.folded:not(.is-open) { box-shadow: 4px 4px 0 #c8bea7,8px 8px 18px rgba(0,0,0,.32); }
.a5-paper.folded:not(.is-open)::after { position: absolute; top: 24%; left: 12%; color: rgba(63,58,48,.44); font-family: "Yu Mincho",serif; font-size: clamp(11px,1.1vw,15px); transform: rotate(-2deg); }
.a5-paper.note2-paper:not(.is-open)::after { content: "7/26　…"; }
.a5-paper.note3-paper:not(.is-open)::after { content: "研究について…"; }
.a5-paper.fragment { background: #ddd5bd; }
.a5-paper.shape-wide { height: 18%; }
.a5-paper.shape-rect { min-height: 94px; }
.a5-paper .paper-content { position: relative; z-index: 2; align-self: start; }
.a5-paper.folded .paper-content { opacity: 0; }
.a5-paper.is-open { z-index: 20; top: 5%; right: auto; bottom: 5%; left: 18%; width: 64%; height: 90%; min-height: 0; transform: none; }
.a5-paper.is-open .paper-content { opacity: 1; }
.a5-paper p { margin: 0 0 12px; font-size: clamp(13px,1.4vw,18px); line-height: 1.8; }
.a5-paper.fragment p { font-size: clamp(11px,1.05vw,15px); line-height: 1.55; }
.a5-paper em { display: block; width: fit-content; margin: 34px 12% 0 auto; font-size: 18px; transform: rotate(-7deg); }
.a5-paper s { text-decoration-thickness: 2px; }
.a5-fragment-action { position: absolute; z-index: 30; bottom: 14px; left: 16px; }
.a5-fragment-action .primary-button { min-width: 112px; }
.scribbled-date { text-decoration-line: line-through; text-decoration-style: wavy; text-decoration-thickness: 5px; }
.fold-line { position: absolute; top: 49.5%; right: 0; left: 0; height: 1px; background: rgba(63,58,48,.2); }

.pc-desktop-layout { display: grid; gap: 22px; }
.recording-status { display: grid; width: min(100%,430px); padding: 15px; border: 1px solid #cfd4d6; background: #fff; font-family: var(--mono); gap: 6px; }
.recording-status span { color: #293034; font-size: 11px; }
.recording-status small { color: #788186; font-size: 9px; }
.line-capture { width: min(100%,420px); margin: 0 auto; overflow: hidden; border: 10px solid #24282a; border-radius: 28px; background: #8cab87; box-shadow: 0 22px 48px rgba(0,0,0,.28); }
.line-capture-bar { display: grid; min-height: 58px; align-items: center; padding: 0 14px; background: #f8f8f8; color: #222; grid-template-columns: 30px 1fr 30px; text-align: center; }
.line-capture-bar i { font-style: normal; }
.line-capture .chat-log { min-height: 460px; padding: 24px 16px; background: #8cab87; }
.line-capture .chat-log p { width: fit-content; max-width: 72%; margin: 0 0 16px; padding: 10px 13px; border-radius: 15px; color: #171b18; font-size: 14px; line-height: 1.5; }
.line-capture .chat-other { background: #fff; }
.line-capture .chat-sato { margin-left: auto !important; background: #9bea74; }
.line-capture figcaption { padding: 8px; background: #f8f8f8; color: #6d7470; font-size: 10px; text-align: center; }
.line-capture-image { display: block; width: 100%; height: auto; }

.iv-sync > small { max-width: 390px; color: var(--muted); font-size: clamp(9px,1vw,12px); line-height: 1.55; }
.iv-sync > em { color: #c3d0cb; font-family: var(--mono); font-size: 11px; font-style: normal; }
.iv-result > strong { font-size: clamp(24px,3.6vw,44px); font-weight: 650; }

.note3-missing-page,
.note3-notebook { position: relative; overflow: hidden; border-radius: 20px; background: #111614; box-shadow: 0 28px 70px rgba(0,0,0,.34); aspect-ratio: 3 / 2; }
.note3-missing-page img,
.note3-notebook > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.note3-missing-page button { position: absolute; z-index: 2; right: 5%; bottom: 5%; width: 42%; height: 82%; border: 0; background: transparent; cursor: pointer; }
.note3-missing-page button span { position: absolute; right: 10%; bottom: 7%; padding: 6px 10px; border-radius: 999px; background: rgba(7,16,15,.84); color: var(--mint); font-size: 11px; }
.note3-restore-layout { display: grid; gap: 16px; }
.note3-restore-layout.with-tray { grid-template-columns: minmax(0,1.5fr) minmax(270px,.7fr); align-items: start; }
.note3-paper-source { position: sticky; top: 92px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #0b1110; }
.paper-source-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.paper-source-head button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.is-beside-note.a5-paper-tray { display: grid; min-height: 0; padding: 16px; overflow: visible; background: #171c1a; grid-template-columns: 1fr; gap: 12px; }
.is-beside-note.a5-paper-tray::before { display: none; }
.is-beside-note .a5-paper,
.is-beside-note .a5-paper.folded,
.is-beside-note .a5-paper.fragment { position: relative; z-index: auto; inset: auto; width: auto; height: auto; min-height: 84px; transform: none; grid-column: auto; }
.is-beside-note .a5-paper.folded:not(.is-open) { min-height: 112px; }
.is-beside-note .a5-paper.is-open { min-height: 190px; }
.is-beside-note .a5-paper p { font-size: 11px; line-height: 1.45; }
.note3-page-copy { position: absolute; top: 8%; width: 36%; height: 83%; overflow: auto; padding: 10px; color: rgba(39,41,35,.92); font-family: "Yu Mincho","Hiragino Mincho ProN",serif; scrollbar-width: thin; }
.note3-left { left: 9%; }
.note3-right { left: 55%; }
.note3-page-copy h4 { margin: 0 0 5px; font-size: clamp(9px,1vw,13px); }
.note3-page-copy p { margin: 0 0 12px; font-size: clamp(8px,.88vw,12px); line-height: 1.55; }
.note3-page-copy .hand-note { color: #33443d; font-weight: 700; transform: rotate(-.5deg); }
.note3-page-copy .theory-note { margin-top: 28px; padding: 10px; border-left: 2px solid rgba(50,60,54,.3); }
.note3-root-cut { position: relative; width: calc(100% + 20px); min-height: 52px; margin: 8px -10px 13px; background: #111614; clip-path: none; }
.note3-root-cut > button:first-child { position: absolute; z-index: 1; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.note3-root-cut.is-active { box-shadow: 0 0 0 2px color-mix(in srgb,var(--mint) 55%,transparent); }
.fragment-preview,
.restored-fragment { position: absolute; z-index: 2; inset: 1px; padding: 7px 10px; overflow: hidden; background: #dcd3bb; color: #383830; font-family: "Yu Mincho",serif; }
.fragment-preview p,
.restored-fragment p { margin: 0; font-size: clamp(7px,.72vw,10px); line-height: 1.3; }
.fragment-preview.is-mismatch { inset: -7px 16% 5px -9%; transform: rotate(3deg); }
.fragment-preview.folded { min-height: 115px; }
.fragment-preview.shopping-paper { width: 82%; }
.fragment-preview.is-match,
.restored-fragment { inset: 2px; transform: none; }
.fragment-preview { pointer-events: none; }
.fragment-preview.is-match { padding-right: 76px; }
.note3-root-cut.is-restored { background: transparent; clip-path: none; }
.place-fragment { position: absolute; z-index: 6; top: 5px; right: 5px; padding: 5px 9px; border: 1px solid var(--mint); border-radius: 7px; background: #0b1814; color: var(--mint); font-size: 10px; cursor: pointer; }

.record-strip { display: grid; margin-bottom: 18px; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.record-strip span { position: relative; min-width: 0; padding: 12px 8px; border-right: 1px solid var(--line); text-align: center; }
.record-strip span:last-child { border: 0; }
.record-strip b,
.record-strip small { display: block; font-family: var(--mono); }
.record-strip b { color: #c4d1cc; font-size: 9px; }
.record-strip small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.record-strip .active { background: rgba(255,255,255,.035); }
.record-strip i { display: block; width: 7px; height: 7px; margin: 7px auto 0; border-radius: 50%; background: var(--record-color); }
.recorded-theme { width: min(100%,420px); margin-top: 22px; color: var(--mint); }
.recorded-theme.blue { color:#78b9ff; }
.recorded-theme.green { color:#8ae7c3; }
.recorded-theme.orange { color:#f1b16e; }
.recorded-theme.purple { color:#c5a0ff; }
.history-color-legend { display: flex; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 9px; }
.history-color-legend span { display: inline-flex; align-items: center; gap: 4px; }
.history-color-legend i { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.history-color-legend .token-blue { color:#78b9ff; }
.history-color-legend .token-green { color:#8ae7c3; }
.history-color-legend .token-orange { color:#f1b16e; }
.history-color-legend .token-purple { color:#c5a0ff; }
.access-log-row { grid-template-columns: 78px minmax(0,1fr); }
.access-log-row code { overflow: hidden; color: #aab9b3; text-overflow: ellipsis; }
.match-sequence { display: grid; gap: 7px; font-family: var(--mono); text-align: left; }
.match-sequence p { margin: 0; color: #dce8e3; }
.initial-auth-overlay .overlay-inner { animation: initialAuthStageIn 360ms ease both; transition: opacity 360ms ease; }
.initial-auth-overlay.is-fading .overlay-inner { opacity: 0; }
.initial-match-sequence { width: min(520px, 100%); gap: 12px; font-size: clamp(18px, 2.5vw, 28px); letter-spacing: .08em; }
.initial-match-sequence p { display: flex; justify-content: space-between; gap: 28px; }
.initial-match-sequence b { color: var(--mint); }
.initial-auth-success .eyebrow { color: var(--mint); font-size: clamp(13px, 1.7vw, 19px); letter-spacing: .18em; }
.initial-auth-status { display: grid; gap: 22px; }
.initial-auth-status h2 { color: #e8f4ef; font-size: clamp(30px, 4.6vw, 56px); }
.initial-auth-status .is-incomplete { color: #aab9b4; }
@keyframes initialAuthStageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.resolution-grid { grid-template-columns: repeat(5,1fr); }
.exit-result { margin-top: 30px; }
.exit-result h3 { margin: 0 0 8px; font-family: var(--mono); letter-spacing: .12em; }
.exit-result p { margin: 0; color: var(--muted); }

@media (max-width: 900px) {
  .note3-restore-layout.with-tray { grid-template-columns: 1fr; }
  .note3-paper-source { position: static; }
  .resolution-grid { grid-template-columns: repeat(2,1fr); }
  .resolution-grid div { border-bottom: 1px solid var(--line); }
  .record-strip { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .top-actions { gap: 6px; }
  .participation-link { padding-inline: 7px; font-size: 9px; }
  .a5-paper-tray { min-height: 430px; }
  .a5-paper.paper-slot-1,
  .a5-paper.paper-slot-2 { width: 44%; }
  .note2-reader .notebook-page-copy,
  .note3-page-copy { top: 5%; height: 88%; padding: 4px; }
  .diary-entry p,
  .note3-page-copy p { font-size: 7px; line-height: 1.35; }
  .note3-page-copy h4,
  .diary-entry time { font-size: 8px; }
  .record-strip b { font-size: 8px; }
}

@media (min-width: 981px) and (max-height: 820px) {
  .section { padding-top: 82px; padding-bottom: 20px; }
  .hero { align-items: start; align-content: start; gap: clamp(36px, 6vw, 80px); }
  .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: clamp(40px, 4.25vw, 52px); line-height: 1.02; }
  .hero-lede { margin-top: 12px; font-size: 13px; line-height: 1.5; }
  .hero-meta { margin: 12px 0; padding: 8px 0; }
  .hero-cta { min-height: 48px; }
  .console-head { height: 48px; }
  .scan-frame { height: 300px; }
  .scan-frame p { margin-top: 208px; }
  .console-data { padding: 14px 20px 18px; gap: 7px; }
}

/* 2026-09-17 latest FIX integration */
.closed-notebook {
  display: grid;
  min-height: clamp(430px, 58vw, 680px);
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, #313936, #111614 70%);
}
.closed-notebook button {
  position: relative;
  display: grid;
  width: min(58%, 430px);
  aspect-ratio: 3 / 4;
  place-content: center;
  border: 0;
  border-radius: 6px 18px 18px 7px;
  background: linear-gradient(105deg, #1f2926 0 4%, #35423e 8% 100%);
  color: #e5eee9;
  box-shadow: -12px 10px 0 #151a18, 0 28px 70px rgba(0,0,0,.44), inset 9px 0 14px rgba(255,255,255,.045);
  cursor: pointer;
  transform: rotate(.6deg);
}
.closed-notebook button::before { position: absolute; inset: 0 auto 0 4%; width: 2px; background: rgba(255,255,255,.08); content: ""; }
.closed-notebook span,
.closed-notebook small { font-family: var(--mono); font-size: 10px; letter-spacing: .17em; }
.closed-notebook strong { margin: 18px 0 90px; font-size: clamp(26px,4vw,42px); letter-spacing: .06em; }
.closed-notebook small { color: var(--mint); }

.note1-reader,
.note2-reader { aspect-ratio: 3 / 2; }
.note1-reader .notebook-page-copy,
.note2-reader .notebook-page-copy,
.note3-page-copy {
  overflow: hidden;
  scrollbar-width: none;
}
.note1-reader .notebook-page-copy { top: 8%; width: 36%; height: 82%; padding: 8px 10px; color: rgba(38,40,34,.9); transform: none; }
.note1-reader .page-left { left: 9%; }
.note1-reader .page-right { left: 55%; }
.note1-reader .diary-entry p { font-size: clamp(9px,1vw,13px); line-height: 1.55; }

.drawer-access-card {
  position: absolute;
  z-index: 5;
  top: 38%;
  left: 10%;
  width: 28%;
  aspect-ratio: 1.58 / 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #171c1b;
  box-shadow: 0 12px 25px rgba(0,0,0,.36);
  cursor: pointer;
  transform: rotate(-2deg);
}
.drawer-photo.is-card-background-pending,
.case-physical-state.is-card-background-pending { visibility: hidden; }
.drawer-photo.is-card-background-error,
.case-physical-state.is-card-background-error { background: #070b0a; }
.is-card-background-error > img { visibility: hidden; }
.drawer-access-card:hover,
.drawer-access-card:focus-visible { border-color: var(--mint); }
.drawer-access-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-exact-copy { position: absolute; z-index: 2; inset: 12% 8%; display: flex; flex-direction: column; align-items: flex-end; color: #e9f1ed; font-family: var(--mono); text-align: right; text-shadow: 0 1px 3px #000; }
.card-exact-copy b { font-size: clamp(5px,.55vw,9px); letter-spacing: .08em; }
.card-exact-copy strong { margin-top: 3px; font-size: clamp(7px,.8vw,13px); letter-spacing: .12em; }
.card-exact-copy small { margin-top: auto; font-size: clamp(4px,.48vw,8px); letter-spacing: .06em; }

.case-physical-state {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: #070b0a;
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
  aspect-ratio: 3 / 2;
}
.case-physical-state > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-note-hotspot { position: absolute; z-index: 4; top: 43%; left: 57%; width: 29%; height: 27%; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; }
.case-note-hotspot span { position: absolute; right: 10px; bottom: 8px; padding: 5px 9px; border-radius: 999px; background: rgba(4,10,9,.88); color: var(--mint); font-size: 10px; font-weight: 800; opacity: 0; }
.case-note-hotspot:hover,
.case-note-hotspot:focus-visible { border-color: var(--mint); background: rgba(138,231,195,.07); }
.case-note-hotspot:hover span,
.case-note-hotspot:focus-visible span { opacity: 1; }

.scribbled-date { position: relative; display: inline-block; }
.scribbled-date::before,
.scribbled-date::after { position: absolute; right: -5px; left: -5px; height: 6px; background: repeating-linear-gradient(168deg,#39372f 0 3px,transparent 3px 5px); content: ""; opacity: .92; transform: rotate(-4deg); }
.scribbled-date::before { top: 36%; }
.scribbled-date::after { top: 53%; transform: rotate(6deg); }

.iv-screen-overlay { top: 12%; left: 15%; width: 70%; height: 62%; }
.iv-completion,
.iv-confirmation-wait { display: grid; place-items: center; gap: 16px; text-align: center; }
.iv-completion p,
.iv-confirmation-wait p { margin: 0; font-size: clamp(14px,1.8vw,22px); font-weight: 750; }
.reader-indicator { width: 62px; height: 62px; border: 1px solid var(--mint); border-radius: 50%; box-shadow: 0 0 30px color-mix(in srgb,var(--mint) 30%,transparent); }
.reader-indicator.is-complete::after { display: grid; height: 100%; place-items: center; color: var(--mint); content: "✓"; font-size: 25px; }
.card-reader-ready { position: relative; width: min(250px,70%); height: 82px; border: 1px solid rgba(138,231,195,.48); border-radius: 16px; background: linear-gradient(145deg,#172522,#0a1311); cursor: pointer; box-shadow: inset 0 0 28px rgba(138,231,195,.05); }
.card-reader-ready::before { position: absolute; inset: 19px 34px; border: 1px solid rgba(138,231,195,.22); border-radius: 10px; content: ""; }
.card-reader-ready span { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 18px var(--mint); transform: translate(-50%,-50%); animation: pulse 1.8s infinite; }

.session-log { color: #d6ddd9; }
.session-log-lines { display: grid; gap: 4px; overflow-x: auto; }
.history-return { display: flex; justify-content: flex-end; margin-top: 16px; }
.session-log-row { display: grid; min-width: 670px; grid-template-columns: 82px 1fr; gap: 10px; font-family: var(--mono); line-height: 1.7; }
.session-log-row time { color: #8e9a95; font-size: 11px; }
.session-log-row code { color: #c6d0cc; font-size: 11px; white-space: pre; }
.session-log-row.session-start { color: #dd8888; font-weight: 550; }
.session-log-row.session-start time,
.session-log-row.session-start code { color: inherit; }
.session-log-row.session-start code strong { font-weight: 650; }
.session-log-row i { font-style: normal; font-weight: 900; text-shadow: 0 0 7px currentColor; }
.session-log-row i.token-blue { color:#78b9ff; }
.session-log-row i.token-green { color:#8ae7c3; }
.session-log-row i.token-orange { color:#f1b16e; }
.session-log-row i.token-purple { color:#c5a0ff; }
.session-log-row.verified { grid-template-columns: 1fr; margin-top: 3px; }
.session-log-row.verified code { color: #dd8888; }
.final-check-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.final-cells { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); width: min(100%, 558px); gap: 5px; }
.final-cell { width: 100%; min-width: 0; height: 50px; padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--ink); font: 600 20px var(--mono); text-align: center; text-transform: uppercase; }

.response-form { max-width: 720px; grid-template-columns: repeat(3,minmax(90px,1fr)) auto; align-items: end; }
.response-form label { display: grid; gap: 7px; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.response-form .code-input { text-align: center; }
.system-processing { margin-top: 18px !important; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }

.note3-root-cut { min-height: 52px; border: 0; background: #111614; clip-path: none; }
.note3-root-cut.is-restored { border: 0; background: transparent; clip-path: none; }
.fragment-preview,
.restored-fragment { background: transparent; box-shadow: none; }

@media (max-width: 640px) {
  .response-form { grid-template-columns: repeat(3,1fr); }
  .response-form button { grid-column: 1 / -1; }
  .iv-screen-overlay { top: 10%; left: 12%; width: 76%; height: 70%; }
  .closed-notebook button { width: 72%; }
}

/* 2026-09-20 consolidated FIX */
.message-image.is-photo::before,
.message-image.is-photo::after { display: none; }
.message-stamp { background: transparent; }

.insta-profile span { display: grid; }
.insta-profile small { color: #777; font-size: 11px; }
.insta-actions { gap: 16px; }
.insta-actions svg { width: 24px; height: 24px; fill: none; stroke: #171717; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.insta-actions svg:last-child { margin-left: auto; }

.iv-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.iv-result > strong,
.iv-result p,
.iv-result small { margin: 0; }
.iv-result > .primary-button { position: static; margin-top: 16px; flex: 0 0 auto; }

.last-panel .card-label { margin: 0 0 8px; color: var(--mint); font-family: var(--mono); font-size: clamp(18px,2.5vw,28px); font-weight: 850; letter-spacing: .12em; }
.last-panel > p:not(.card-label):not(.feedback) { margin: 6px 0 18px; }

.session-log-row i,
.session-log-row i.token-blue,
.session-log-row i.token-green,
.session-log-row i.token-orange,
.session-log-row i.token-purple { background: transparent; font-weight: inherit; text-shadow: 0 0 4px currentColor; }
.session-log-row i.token-blue { color: #83c2ff; }
.session-log-row i.token-green { color: #8ef0ba; }
.session-log-row i.token-orange { color: #ffbd7b; }
.session-log-row i.token-purple { color: #d2aaff; }

.a5-paper.fragment { min-height: 0; border-radius: 0; clip-path: none; }
.a5-paper.paper-slot-1,
.a5-paper.paper-slot-2 { width: 31%; height: 36%; }
.a5-paper.paper-slot-3 { top: 56%; left: 6%; width: 45%; height: 13%; min-height: 0; }
.a5-paper.paper-slot-4 { top: 50%; right: 5%; width: 49%; height: 13%; min-height: 0; }
.a5-paper.paper-slot-5 { right: 8%; bottom: 5%; width: 50%; height: 21%; min-height: 0; }
.a5-paper.folded { aspect-ratio: 3 / 4; }
.a5-paper.folded.is-open { width: min(64%,420px); height: 90%; aspect-ratio: 3 / 4; }
.is-beside-note .a5-paper.fragment { border-radius: 0; }
.is-beside-note .a5-paper.shape-wide,
.is-beside-note .a5-paper.shopping-paper { min-height: 54px; }
.is-beside-note .a5-paper.behavior-paper { min-height: 76px; }

.note2-shopping-cut { position: absolute; z-index: 6; top: 54%; right: 50%; width: 22%; height: 4.8%; background: #111614; }
.note2-shopping-cut > button:first-child { position: absolute; z-index: 2; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.note2-shopping-cut.is-active { box-shadow: 0 0 0 2px color-mix(in srgb,var(--mint) 55%,transparent); }
.note2-shopping-cut.is-restored { background: transparent; box-shadow: none; }
.note2-shopping-cut .fragment-preview,
.note2-shopping-cut .restored-fragment { inset: 0; padding: 3px 8px; background: #ddd5bd; }
.note2-shopping-cut .fragment-preview p,
.note2-shopping-cut .restored-fragment p { font-size: clamp(7px,.75vw,10px); line-height: 1.2; }

.note3-root-cut { width: 60%; min-height: 40px; margin: 8px -10px 13px auto; border: 0; border-radius: 0; background: #111614; clip-path: none; box-shadow: none; }
.note3-root-cut.is-two-lines { min-height: 68px; }
.note3-root-cut.is-restored { width: 60%; border: 0; background: transparent; box-shadow: none; clip-path: none; }
.note3-root-cut .fragment-preview,
.note3-root-cut .restored-fragment { background: #ddd5bd; }
.note2-shopping-cut .restored-fragment,
.note3-root-cut .restored-fragment {
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  display: grid;
  align-content: center;
  overflow: hidden;
}
.note3-page-copy .fragment-lead { margin-bottom: 0; }
.note3-page-copy .fragment-lead + .note3-root-cut { margin-top: 2px; }
#caseForm,
#pcUnlockForm,
#birthdayForm { scroll-margin: 18vh 0; }

@media (max-width: 640px) {
  .note2-shopping-cut { top: 54%; width: 24%; height: 5.5%; }
  .note3-root-cut,
  .note3-root-cut.is-restored { width: 68%; }
  .initial-match-sequence { font-size: clamp(15px, 4.4vw, 20px); }
  .initial-auth-status h2 { white-space: normal; }
}

@media (min-width: 641px) {
  .overlay-inner h2 { white-space: nowrap; }
}

/* Notebook body readability: one restrained standard across notes 1, 2 and 3. */
.note1-reader .notebook-page-copy,
.note2-reader .notebook-page-copy,
.note3-page-copy { color: #151713; }
.note1-reader .diary-entry p { font-size: clamp(9.25px,1.01vw,13.25px); line-height: 1.58; }
.note2-reader .diary-entry p,
.note3-page-copy p { font-size: clamp(8.25px,.93vw,12.25px); line-height: 1.58; }
.note3-page-copy .hand-note { color: #171b17; }

/* Restored note 3 fragments keep their original compact type metrics. */
.note3-root-cut .restored-fragment { padding-block: 4px; }
.note3-root-cut .restored-fragment p { font-size: clamp(7px,.72vw,10px); line-height: 1.3; }

/* Let question screens use more of the physical terminal display. The
   viewport-aware preferred height expands on roomier screens while the
   existing overflow remains a fallback for genuinely small displays. */
.iv-screen-overlay {
  top: 8%;
  left: 12%;
  width: 76%;
  height: clamp(72%, 60svh, 84%);
  max-height: 84%;
}
.iv-screen-overlay:has(.iv-question) { align-content: start; }

@media (max-width: 640px) {
  .iv-screen-overlay { top: 10%; height: 70%; max-height: 70%; }
  .note1-reader .diary-entry p,
  .note2-reader .diary-entry p,
  .note3-page-copy p { font-size: 7.25px; line-height: 1.39; }
}

/* The detached notebook pages have the same plain A5 shape in both views. */
.a5-paper.folded.paper-slot-1,
.a5-paper.folded.paper-slot-2 {
  height: auto;
  aspect-ratio: 1 / 1.414;
  background: #e5ddc8;
  clip-path: polygon(1.5% 0,100% 0,100% 100%,1.5% 100%,1% 96%,1.6% 92%,1% 88%,1.6% 84%,1% 80%,1.6% 76%,1% 72%,1.6% 68%,1% 64%,1.6% 60%,1% 56%,1.6% 52%,1% 48%,1.6% 44%,1% 40%,1.6% 36%,1% 32%,1.6% 28%,1% 24%,1.6% 20%,1% 16%,1.6% 12%,1% 8%,1.5% 0);
}
.a5-paper.folded .paper-content { opacity: 1; }
.a5-paper.folded:not(.is-open)::after { content: none; }
.a5-paper.folded:not(.is-open) p { font-size: clamp(7px,1vw,11px); line-height: 1.45; }
.a5-paper.folded:not(.is-open) em { margin-top: 8px; font-size: 9px; }
.a5-paper.folded.is-open {
  top: 50%; left: 50%; right: auto; bottom: auto;
  width: min(64%,320px,50vh); height: auto;
  aspect-ratio: 1 / 1.414;
  transform: translate(-50%,-50%);
}

.fragment-choices { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #171c1a; scroll-margin-top: 90px; }
.fragment-choice { flex: 1 1 210px; min-width: 0; min-height: 70px; padding: 12px 14px; border: 0; border-radius: 0; clip-path: none; background: #ddd5bd; color: #36362f; font-family: "Yu Mincho",serif; text-align: left; cursor: pointer; }
.fragment-choice.notebook-page { flex: 0 0 125px; min-height: 0; aspect-ratio: 1 / 1.414; background: #e5ddc8; clip-path: polygon(1.5% 0,100% 0,100% 100%,1.5% 100%,1% 96%,1.6% 92%,1% 88%,1.6% 84%,1% 80%,1.6% 76%,1% 72%,1.6% 68%,1% 64%,1.6% 60%,1% 56%,1.6% 52%,1% 48%,1.6% 44%,1% 40%,1.6% 36%,1% 32%,1.6% 28%,1% 24%,1.6% 20%,1% 16%,1.6% 12%,1% 8%,1.5% 0); }
.fragment-choice.notebook-page p { font-size: 10px; }
.fragment-choice.notebook-page em { display: block; margin-top: 8px; font-size: 10px; }
.fragment-choice.is-selected { box-shadow: inset 0 0 0 3px var(--mint); }
.fragment-choice-action { flex: 0 0 100%; }
.fragment-choice:hover,
.fragment-choice:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.fragment-choice p { margin: 0; line-height: 1.5; }
.fragment-choice.behavior-paper { min-height: 90px; }

/* Give the restored text the page width it needs without changing the paper's height. */
.note3-root-cut,
.note3-root-cut.is-restored { width: 90%; }
.note3-root-cut .restored-fragment { padding: 4px 7px; }
.note3-root-cut .restored-fragment p { font-size: clamp(7px,.72vw,10px); line-height: 1.3; writing-mode: horizontal-tb; overflow-wrap: anywhere; }
.note2-shopping-cut .restored-fragment p { writing-mode: horizontal-tb; }
@media (max-width: 640px) {
  .note3-root-cut,
  .note3-root-cut.is-restored { width: 90%; }
  .fragment-choice { flex-basis: 100%; }
  .fragment-choice.notebook-page { flex-basis: 125px; }
}