*, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      color: #f3e7c9;
      background: #0b0f14;
      line-height: 1.65;
    }
    #app { min-height: 100vh; display: grid; place-items: start center; padding: clamp(16px, 2vw, 28px); }
    .panel {
      width: min(980px, 96vw);
      background: rgba(60, 48, 30, 0.52);
      border: 1px solid rgba(255, 230, 180, .22);
      border-radius: 18px;
      box-shadow: 0 18px 40px rgba(165, 90, 0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
      overflow: hidden;
    }
    .content { padding: clamp(18px, 3vw, 30px); }
    .head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom: 14px; }
    .brand { display:flex; align-items:center; gap:12px; }
    .brand-copy { display: grid; gap: 6px; }
    .logo { width: 72px; height: 72px; object-fit: contain; }
    h1 { margin: 0; font-size: clamp(20px, 2.6vw, 32px); text-transform: uppercase; }
    .home {
      display:inline-block; color:#f3e7c9; text-decoration:none; border:1px solid rgba(255,230,180,0.32);
      border-radius:999px; padding:8px 12px; font-size:13px; background: rgba(0,0,0,0.2);
    }
    .lore-body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255,230,180,0.2); }
    .lore-body .detail-hero {
      width: 100%;
      max-height: 320px;
      object-fit: cover;
      object-position: center 24%;
      display: block;
      margin-bottom: 16px;
    }
    .lore-body .detail-slogan {
      margin: -2px 0 20px;
      padding: 14px 18px;
      border-left: 3px solid rgba(245, 195, 90, 0.95);
      border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(20, 14, 8, 0.92)),
        rgba(0, 0, 0, 0.6);
      box-shadow:
        inset 0 0 0 1px rgba(255, 230, 180, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.18);
    }
    .lore-body .detail-slogan-label {
      display: block;
      margin-bottom: 6px;
      font-size: 11px;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      color: #cfb06d;
    }
    .lore-body .detail-slogan-text {
      margin: 0;
      font-size: clamp(20px, 2.6vw, 30px);
      line-height: 1.15;
      font-weight: 500;
      font-style: normal;
      color: #f3c76a;
      overflow-wrap: anywhere;
    }
    .lore-body .group-banner {
      float: right;
      width: min(320px, 40%);
      margin: 0 0 16px 20px;
      object-fit: contain;
      object-position: top right;
      display: block;
      background: rgba(0,0,0,0.18);
    }
    .lore-body h2 { clear: none; }
    .lore-body h2:nth-of-type(2) { clear: both; }
    @media (max-width: 760px) {
      .lore-body .group-banner {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
      }
    }
    .lore-body .detail-gallery {
      display: grid;
      gap: 18px;
      margin: 24px 0 8px;
      clear: both;
    }
    .lore-body .detail-gallery img {
      width: 100%;
      max-width: 100%;
      max-height: 560px;
      object-fit: cover;
      object-position: center 24%;
    }
    .lore-body a { color: #f59e0b; }
    .lore-body pre { overflow-x:auto; background: rgba(0,0,0,0.25); padding:12px; border-radius:10px; }
    .lore-body code { background: rgba(0,0,0,0.2); padding: 2px 6px; border-radius: 4px; }