/* case pages: the monitor's look, readable on a phone, no script needed. Shindo 5+ badges pulse like the monitor's alarms. */
:root{--void:#050407;--panel:#0e0a0c;--line:#3a2418;--ink:#f6ece0;--dim:#ad9784;--orange:#ff8a1f;--amber:#ffc46b;--red:#ff2b2b;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;--display:"Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN",serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{background:var(--void);color:var(--ink);font:16px/1.75 var(--body);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:linear-gradient(rgba(255,138,31,.035) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,138,31,.035) 1px,transparent 1px) 0 0/24px 24px,var(--void)}
a{color:var(--amber)}a:hover{color:var(--ink)}
.bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-right));background:rgba(5,4,7,.92);border-bottom:2px solid var(--orange);backdrop-filter:blur(6px)}
.logo{display:grid;text-decoration:none;color:var(--ink);font:800 22px/1.05 var(--display)}
.logo small{font:700 10px/1.4 var(--cond);letter-spacing:.32em;color:var(--orange)}
.bar nav{display:flex;border:1px solid var(--line)}
.bar nav a{padding:4px 12px;font:700 13px var(--cond);letter-spacing:.14em;text-decoration:none;color:var(--dim)}
.bar nav a[aria-current]{background:var(--orange);color:#07060a}
main{max-width:880px;margin:0 auto;padding:22px 16px 40px}
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.shindo{display:grid;place-items:center;width:96px;height:96px;background:var(--sc);color:var(--sci);clip-path:polygon(0 0,100% 0,100% 82%,82% 100%,0 100%)}
.shindo small{font:700 12px var(--cond);letter-spacing:.2em;margin-top:8px}.shindo b{font:900 58px/1 var(--display);margin-top:-14px}
h1{margin:0;font:800 clamp(28px,6vw,44px)/1.15 var(--display);overflow-wrap:anywhere}
.legal,.svc{margin:2px 0 0;color:var(--dim);font-size:14px}.svc{font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.head{display:grid;gap:0;margin:22px 0 6px;padding:14px 16px;border-left:4px solid var(--sc);background:var(--panel)}
.head small{color:var(--dim);font-weight:700}
.head strong{font:900 clamp(34px,8vw,58px)/1.1 var(--body);color:var(--red);letter-spacing:-.01em}.head strong span{font-size:.45em;margin-left:4px;color:var(--ink)}
.head em{font-style:normal;color:var(--amber);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.chips span{padding:3px 10px;font-weight:700;font-size:13.5px;border:1px solid var(--line);background:var(--panel)}
.chips .c-red{background:var(--red);border-color:var(--red);color:#fff}.chips .c-hot{border-color:var(--red);color:#ff9c8a}.chips .c-amber{border-color:var(--amber);color:var(--amber)}.chips .c-dim{color:var(--dim)}
.cta{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--orange);color:#07060a;font-weight:900;text-decoration:none;clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 12px) 100%,0 100%)}
.cta:hover{background:var(--amber);color:#07060a}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));margin:22px 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}.facts div{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{background:var(--void);padding:10px 14px}.facts dt{font:700 12px var(--cond);letter-spacing:.14em;color:var(--orange)}.facts dd{margin:0;font-weight:700}
section{margin:26px 0 0}
h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:700 16px var(--cond);letter-spacing:.2em;color:var(--orange)}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
section p{margin:0;color:var(--ink)}
ul{margin:0;padding:0 0 0 1.2em}li{margin:2px 0}li::marker{color:var(--orange)}
small{color:var(--dim)}
.cats{display:grid;gap:8px}.cat{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:12px;padding:8px 12px;background:var(--panel);border-left:3px solid var(--red)}
.cat b{color:var(--amber)}
@media (max-width:520px){.cat{grid-template-columns:1fr;gap:2px}.shindo{width:78px;height:78px}.shindo b{font-size:46px}}
.tl{list-style:none;padding:0;border-left:2px solid var(--line);margin-left:6px}
.tl li{position:relative;display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:12px;padding:6px 0 6px 18px}
.tl li::before{content:"";position:absolute;left:-6px;top:15px;width:10px;height:10px;background:var(--orange)}
.tl time{font-family:var(--mono);font-size:13.5px;color:var(--amber)}
@media (max-width:520px){.tl li{grid-template-columns:1fr;gap:0}}
.suit{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--panel)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;max-width:880px;margin:0 auto;padding:18px 16px max(28px,env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--dim);font-size:13px}
@media (prefers-reduced-motion:no-preference){[data-s="5"] .shindo,[data-s="6"] .shindo,[data-s="7"] .shindo{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{filter:brightness(1.18)}}}
.adv{padding:0;list-style:none;counter-reset:a;display:grid;gap:8px}
.adv li{counter-increment:a;display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:8px;padding:10px 12px;background:var(--panel);border-left:3px solid var(--orange)}
.adv li::before{content:counter(a,decimal-leading-zero);font:500 14px var(--mono);color:var(--orange)}.adv.b li{border-left-color:var(--amber)}
mark{background:none;color:var(--red);font-weight:700}
