:root {
  --i-ink: #edf5ed;
  --i-muted: #99a79f;
  --i-line: rgba(220, 239, 225, .18);
  --i-green: #a5e0bd;
  --i-red: #d95656;
  --i-black: #0b1010;
}

html { background: var(--i-black); }

body.i-property-page {
  min-height: 100vh;
  margin: 0;
  color: var(--i-ink);
  background:
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px) 0 0 / 48px 100%,
    radial-gradient(circle at 76% 10%, rgba(129, 210, 169, .1), transparent 25rem),
    var(--i-black) !important;
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  letter-spacing: 0;
  transition: filter .45s ease, background .45s ease;
}

body.i-property-page::before,
body.i-property-page::after { display: none !important; }

.i-property-shell {
  width: min(1280px, calc(100vw - 32px));
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 34px) 0 34px;
}

.i-titlebar,
.i-console,
.i-shelf {
  border: 1px solid var(--i-line);
  background: rgba(9, 14, 15, .9);
}

.i-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 13px 20px;
  border-bottom: 0;
}

.i-titlebar p,
.i-inspector-header p,
.i-transfer p {
  margin: 0 0 6px;
  color: var(--i-green);
  font: 800 10px/1.2 "Courier New", monospace;
  letter-spacing: .08em;
}

.i-titlebar h1 {
  margin: 0;
  color: #f2f8f2;
  font: 700 clamp(23px, 3vw, 38px)/1.1 "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.i-counter { display: grid; grid-template-columns: auto auto auto; align-items: baseline; gap: 6px; color: #78867d; font-family: "Courier New", monospace; }
.i-counter span { color: var(--i-green); font-size: 10px; }.i-counter b { color: #f4fbf4; font-size: 28px; }.i-counter i { font-style: normal; font-size: 13px; }

.i-console {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, .72fr);
  min-height: min(46dvh, 480px);
}

.i-evidence-table { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #090b0d; }
.i-evidence-table::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(217,255,231,.025) 3px 4px); pointer-events: none; }
.i-evidence-table img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.74) contrast(1.08) brightness(.86); transition: filter .7s ease, transform .7s ease; }
.i-evidence-table figcaption { position: absolute; top: 13px; left: 13px; z-index: 2; margin: 0; padding: 7px 9px; border: 1px solid rgba(240,255,245,.22); color: rgba(240,255,245,.74); background: rgba(3,6,7,.72); font: 10px/1 "Courier New", monospace; }
.i-object-markers { position: absolute; inset: 0; z-index: 3; }
.i-marker { position: absolute; width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(239,255,244,.85); border-radius: 50%; color: #07110b; background: var(--i-green); font: 800 10px/1 "Courier New", monospace; cursor: pointer; transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.i-marker:hover, .i-marker:focus-visible, .i-marker.is-active { outline: none; color: #fff; background: var(--i-red); transform: scale(1.14); box-shadow: 0 0 0 5px rgba(217,86,86,.22); }
.i-marker.is-held { color: #08120c; background: #edf9f0; box-shadow: 0 0 0 4px rgba(237,249,240,.2); }
.i-marker-umbrella { left: 21%; top: 43%; }.i-marker-mirror { left: 45%; top: 39%; }.i-marker-pass { left: 65%; top: 38%; }.i-marker-ticket { left: 48%; top: 68%; }.i-marker-tape { left: 77%; top: 69%; }

.i-inspector { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; border-left: 1px solid var(--i-line); background: linear-gradient(180deg, rgba(17,27,25,.96), rgba(6,9,10,.98)); }
.i-inspector-header { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px 15px; border-bottom: 1px solid var(--i-line); }.i-inspector h2 { margin: 0; color: #f3f8f4; font-size: 20px; line-height: 1.35; }.i-inspector-header > span { height: min-content; padding: 6px 7px; border: 1px solid rgba(166,224,188,.34); color: var(--i-green); font: 800 11px/1 "Courier New", monospace; }
.i-inspector-body { display: grid; align-content: space-between; gap: 16px; padding: 21px 20px; }.i-inspector dl { display: grid; gap: 12px; margin: 0; }.i-inspector dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 9px; padding-bottom: 12px; border-bottom: 1px dotted rgba(220,238,225,.2); }.i-inspector dt { color: #859289; font: 800 10px/1.6 "Courier New", monospace; }.i-inspector dd { margin: 0; color: #dbe5de; font-size: 13px; line-height: 1.75; }.i-observation { margin: 0; color: #f0eee7; font: 600 16px/1.75 "Yu Mincho", serif; }.i-stamp-row { display: grid; gap: 9px; }.i-hold { min-height: 45px; border: 1px solid rgba(166,224,188,.66); border-radius: 0; color: #eaffef; background: rgba(130,215,164,.12); font: 800 13px/1 "Yu Gothic", sans-serif; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }.i-hold:not(:disabled):hover, .i-hold:not(:disabled):focus-visible { outline: none; color: #061009; background: var(--i-green); transform: translateY(-2px); }.i-hold:disabled { border-color: rgba(220,238,225,.13); color: #6c7970; background: rgba(255,255,255,.025); cursor: not-allowed; }.i-stamp-row span { min-height: 17px; color: #95a29a; font-size: 11px; }.i-stage-message { min-height: 50px; margin: 0; padding: 13px 20px; border-top: 1px solid var(--i-line); color: #c8d2ca; background: rgba(164,223,188,.05); font: 11px/1.65 "Courier New", monospace; transition: color .35s ease, background .35s ease; }

.i-shelf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr); min-height: 86px; border-top: 0; }.i-shelf-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }.i-shelf-list button { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-content: center; min-height: 86px; padding: 11px 12px; border: 0; border-right: 1px solid rgba(220,238,225,.11); color: #d7e1da; background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }.i-shelf-list button span { grid-row: 1 / 3; color: var(--i-green); font: 800 10px/1 "Courier New", monospace; }.i-shelf-list button b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.i-shelf-list button small { color: #7f8c84; font: 10px/1 "Courier New", monospace; }.i-shelf-list button:hover, .i-shelf-list button:focus-visible, .i-shelf-list button.is-active { outline: none; color: #fff; background: rgba(166,224,188,.1); box-shadow: inset 0 3px 0 var(--i-green); }.i-shelf-list button.is-held { background: rgba(166,224,188,.06); }.i-shelf-list button.is-held b::after { content: "　保留"; color: var(--i-green); font-size: 9px; }

/* The blue tape's record does not use the mirror's reflection scare. */
.i-tape-scare { position: fixed; inset: 0; z-index: 6300; display: grid; place-items: center; overflow: hidden; background: #000; opacity: 0; transition: opacity .08s linear; pointer-events: none; }
.i-tape-scare[hidden] { display: none; }
.i-tape-scare::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(135,230,255,.2) 0 1px, transparent 1px 4px), linear-gradient(90deg, rgba(0,128,255,.22), transparent 34%, rgba(255,0,0,.14)); mix-blend-mode: screen; animation: iTapeScan .13s steps(2, end) infinite; }
.i-tape-scare img { width: min(760px, 100vw); height: 100vh; object-fit: cover; filter: contrast(1.35) saturate(1.28) brightness(.72); transform: scale(1.08); }
.i-tape-scare p { position: absolute; z-index: 2; margin: 0; color: #d7f6ff; font: 900 clamp(26px, 7vw, 78px)/1 "MS Gothic", monospace; letter-spacing: .16em; text-shadow: 4px 0 #004e77, -4px 0 #a60013; opacity: 0; }
.i-tape-scare.is-active { opacity: 1; }
.i-tape-scare.is-active img { animation: iTapeLurch .22s steps(2, end) infinite; }
.i-tape-scare.is-active p { opacity: 1; animation: iTapeWords .31s steps(2, end) infinite; }
@keyframes iTapeScan { 50% { transform: translateY(3px); opacity: .42; } }
@keyframes iTapeLurch { 0%,100% { transform: scale(1.08) translate(0); } 45% { transform: scale(1.25) translate(-2%, 1%); } 70% { transform: scale(1.17) translate(2%, -1%); } }
@keyframes iTapeWords { 0%,100% { transform: translate(0); } 48% { transform: translate(8px, -5px); } 75% { transform: translate(-6px, 5px); } }

.i-transfer { display: grid; align-content: center; padding: 9px; border-left: 1px solid rgba(220,238,225,.12); background: #050606; animation: iGateStir 1s steps(2, end) infinite; }.i-transfer[hidden] { display: none; }.i-transfer p { margin: 0 0 6px; color: #ffd9cf; text-align: center; font-size: 8px; }.i-transfer a { position: relative; display: grid; gap: 4px; min-height: 64px; padding: 11px 13px; overflow: hidden; border: 1px solid #ffe8dc; color: #fff6ef; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px), rgba(170,30,34,.22); text-decoration: none; text-align: center; box-shadow: 0 0 0 1px rgba(225,73,69,.4), 0 0 24px rgba(217,74,68,.23); animation: iGateSignal .82s steps(2, end) infinite; }.i-transfer a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: translateX(-100%); animation: iGateSweep 1.4s linear infinite; }.i-transfer a span, .i-transfer a i, .i-transfer a strong { position: relative; z-index: 1; }.i-transfer a span { color: #ffb7a2; font: 800 9px/1 "Courier New", monospace; }.i-transfer a strong { font-size: 14px; }.i-transfer a i { color: #ffe1d5; font: 800 8px/1 "Courier New", monospace; font-style: normal; letter-spacing: .08em; }.i-transfer a:hover, .i-transfer a:focus-visible { outline: 2px solid #fff; background: rgba(224,56,50,.72); transform: scale(1.018); }

.i-mirror-scare { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: #000; opacity: 0; pointer-events: none; }.i-mirror-scare[hidden] { display: none; }.i-mirror-scare.is-active { opacity: 1; animation: iScareFlicker 1.7s steps(2, end) both; }.i-mirror-scare img { width: 100%; height: 100%; display: block; object-fit: cover; animation: iScareRush 1.7s cubic-bezier(.08,.72,.17,1) both; }.i-mirror-scare p { position: absolute; left: 50%; bottom: 7vh; margin: 0; color: #eef6ed; font: 900 clamp(28px, 7vw, 88px)/1 "Yu Mincho", serif; text-shadow: 3px 0 #7b0000, -3px 0 #004d4a; transform: translateX(-50%); animation: iScareText .35s steps(2, end) .8s both; }

body[data-hold-stage="1"] .i-stage-message { color: #d6e7da; background: rgba(166,224,188,.1); } body[data-hold-stage="2"] .i-console { box-shadow: 0 0 28px rgba(100,207,155,.13); } body[data-hold-stage="3"] { background: radial-gradient(circle at 78% 10%, rgba(138,20,29,.18), transparent 24rem), #0a0d0d !important; } body[data-hold-stage="3"] .i-evidence-table img { filter: saturate(.35) contrast(1.25) brightness(.76); } body[data-hold-stage="4"] .i-stage-message { color: #ffe0d6; background: rgba(172,43,45,.16); } body[data-hold-stage="4"] .i-evidence-table::before { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,158,158,.07) 2px 3px); } body[data-hold-stage="5"] .i-console { border-color: rgba(255,194,178,.48); box-shadow: 0 0 40px rgba(205,51,48,.24); } body[data-hold-stage="5"] .i-titlebar { border-color: rgba(255,194,178,.38); }
body.i-mirror-scare-active { filter: contrast(1.22) saturate(.6); }

@keyframes iGateStir { 0%, 100% { filter: brightness(.88); } 50% { filter: brightness(1.25); } }
@keyframes iGateSignal { 0%, 100% { clip-path: inset(0); } 48% { clip-path: inset(2px 0 0); } 54% { clip-path: inset(0 5px 0 0); } }
@keyframes iGateSweep { to { transform: translateX(100%); } }
@keyframes iScareFlicker { 0% { opacity: 0; } 8%, 17%, 25%, 100% { opacity: 1; } 12%, 21% { opacity: .18; } 76% { opacity: 1; } }
@keyframes iScareRush { from { transform: scale(1.36); filter: contrast(1.9) brightness(1.5); } to { transform: scale(1); filter: contrast(1.08) brightness(1); } }
@keyframes iScareText { from { opacity: 0; transform: translateX(-50%) scale(.5); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

@media (max-width: 850px) { .i-console { grid-template-columns: 1fr; }.i-evidence-table { min-height: 54vw; }.i-inspector { border-top: 1px solid var(--i-line); border-left: 0; }.i-inspector-body { min-height: 240px; }.i-shelf { grid-template-columns: 1fr; }.i-transfer { min-height: 102px; border-top: 1px solid rgba(220,238,225,.12); border-left: 0; } }
@media (max-width: 600px) { .i-property-shell { width: min(100% - 18px, 1280px); padding-top: 15px; }.i-titlebar { min-height: 62px; padding: 11px 13px; }.i-titlebar h1 { font-size: 26px; }.i-counter b { font-size: 23px; }.i-evidence-table { min-height: 63vw; }.i-evidence-table figcaption { top: 8px; left: 8px; font-size: 8px; }.i-marker { width: 27px; height: 27px; }.i-inspector-header { padding: 15px; }.i-inspector-body { padding: 17px 15px; }.i-inspector dl div { grid-template-columns: 68px minmax(0, 1fr); }.i-observation { font-size: 14px; }.i-shelf-list button { min-height: 70px; padding: 8px 6px; }.i-shelf-list button b { font-size: 10px; }.i-shelf-list button small { font-size: 8px; }.i-shelf-list button.is-held b::after { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }