.hp-seed { max-width:1180px; margin:0 auto; padding:56px 20px 70px; }
.hp-seed h1 { font-family:'Silkscreen',monospace; font-weight:700; font-size:clamp(24px,3.4vw,38px); margin:0 0 10px; display:inline-flex; align-items:center; gap:14px; }
.hp-seed h1 img { width:32px; height:32px; pointer-events:none; }
.hp-lead { font-size:13.5px; font-weight:300; line-height:1.75; color:oklch(0.74 0.012 285); margin:0 0 26px; max-width:64ch; text-wrap:pretty; }

.hp-box { border:2px solid oklch(0.33 0.02 285); background:oklch(0.13 0.012 285); }
.hp-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
          background:oklch(0.2 0.016 285); border-bottom:2px solid oklch(0.33 0.02 285); padding:10px 14px;
          font-family:'Silkscreen',monospace; font-size:10px; letter-spacing:0.08em; color:oklch(0.72 0.012 285); }
.hp-live { display:inline-flex; align-items:center; gap:8px; color:oklch(0.66 0.012 285); }
.hp-live i { width:6px; height:6px; background:oklch(0.78 0.14 88); animation:hp-tick 1.8s steps(2) infinite; }

.hp-num { padding:16px 14px 14px; border-bottom:2px solid oklch(0.33 0.02 285); }
.hp-bytes { display:flex; gap:2px; margin-bottom:12px; }
.hp-bytes span { flex:1 1 0; height:14px; min-width:5px; }
.hp-hex { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hp-hex label { font-family:'Silkscreen',monospace; font-size:13px; color:oklch(0.78 0.14 88); }
.hp-hex input { flex:1 1 420px; min-width:0; appearance:none; background:transparent; border:none; border-bottom:1px solid oklch(0.27 0.018 285);
                color:oklch(0.92 0.01 90); font-family:'IBM Plex Mono',monospace; font-size:15px; letter-spacing:0.02em; padding:4px 0; outline:none; }
.hp-hex input:focus { border-bottom-color:oklch(0.78 0.14 88); }
.hp-hex input.hp-bad { color:oklch(0.62 0.16 335); border-bottom-color:oklch(0.62 0.16 335); }
.hp-hex input::placeholder { color:oklch(0.5 0.014 285); }

.hp-seedline { display:flex; align-items:center; gap:10px; margin-top:16px; }
.hp-seedline span { font-family:'Silkscreen',monospace; font-size:10px; letter-spacing:0.08em; color:oklch(0.66 0.012 285); }
.hp-seedline .hp-bytes { flex:1 1 auto; margin:0; }
.hp-seedhex { font-size:11px; font-weight:300; letter-spacing:0.02em; color:oklch(0.64 0.014 285); margin-top:7px; overflow-wrap:anywhere; }

.hp-split { display:grid; grid-template-columns:minmax(240px,360px) 1fr; }
.hp-art { padding:18px; border-right:2px solid oklch(0.33 0.02 285); }
.hp-frame { position:relative; border:2px solid oklch(0.33 0.02 285); background:oklch(0.2 0.016 285); padding:6px; overflow:hidden; }
.hp-frame canvas { display:block; width:100%; aspect-ratio:1; image-rendering:pixelated; animation:hp-reveal 0.36s steps(6) both; }
.hp-frame .hp-sweep { position:absolute; left:0; right:0; height:40px; pointer-events:none;
                      background:linear-gradient(to bottom, transparent, oklch(0.78 0.14 88 / 0.1), transparent); animation:hp-scan 3.4s linear infinite; }
.hp-cap { font-size:10.5px; font-weight:300; color:oklch(0.64 0.014 285); line-height:1.7; margin-top:11px; }

.hp-traits { padding:14px 18px 18px; }
.hp-row { display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:12.5px; animation:hp-rowin 0.24s both; }
.hp-k { font-family:'Silkscreen',monospace; font-size:10.5px; letter-spacing:0.04em; color:oklch(0.72 0.012 285); white-space:nowrap; }
.hp-dots { flex:1 1 auto; border-bottom:1px dotted oklch(0.34 0.02 285); transform:translateY(-4px); min-width:16px; }
.hp-v { color:oklch(0.92 0.01 90); white-space:nowrap; }
.hp-row.hp-off .hp-v { color:oklch(0.56 0.014 285); }
.hp-p { font-family:'Silkscreen',monospace; font-size:10.5px; width:56px; text-align:right; color:oklch(0.74 0.012 285); }
.hp-row.hp-rare .hp-p, .hp-row.hp-rare .hp-v { color:oklch(0.78 0.14 88); }
.hp-row.hp-uniq .hp-v, .hp-row.hp-uniq .hp-p { color:oklch(0.62 0.16 335); }
.hp-unote { font-size:12px; font-weight:300; line-height:1.8; color:oklch(0.7 0.014 285); margin-top:14px; padding-top:14px;
            border-top:1px solid oklch(0.27 0.018 285); max-width:56ch; }

.hp-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
           border-top:2px solid oklch(0.33 0.02 285); padding:14px; }
.hp-note { font-size:11px; font-weight:300; color:oklch(0.68 0.014 285); line-height:1.7; max-width:52ch; }
.hp-acts { display:flex; gap:8px; flex-wrap:wrap; }
.hp-btn { appearance:none; background:transparent; border:2px solid oklch(0.33 0.02 285); color:oklch(0.92 0.01 90);
          font-family:'Silkscreen',monospace; font-size:10px; letter-spacing:0.06em; padding:11px 14px; cursor:pointer; }
.hp-btn:hover { border-color:oklch(0.78 0.14 88); color:oklch(0.78 0.14 88); }
.hp-btn.hp-main { border-color:oklch(0.78 0.14 88); background:oklch(0.78 0.14 88); color:oklch(0.13 0.012 285); font-size:12px; padding:13px 20px; }
.hp-btn.hp-main:hover { background:oklch(0.16 0.014 285); color:oklch(0.78 0.14 88); }
.hp-btn.hp-on { border-color:oklch(0.62 0.16 335); color:oklch(0.62 0.16 335); }
.hp-btn:disabled { opacity:0.4; cursor:not-allowed; }

@media (max-width:760px) {
  .hp-split { grid-template-columns:1fr; }
  .hp-art { border-right:none; border-bottom:2px solid oklch(0.33 0.02 285); }
  .hp-bytes span { height:12px; }
  .hp-hex input { flex-basis:100%; font-size:12px; }
  .hp-p { width:48px; }
}

@keyframes hp-tick { 0%,100% { opacity:0.2; } 50% { opacity:1; } }
@keyframes hp-reveal { 0% { clip-path:inset(0 0 100% 0); } 30% { clip-path:inset(0 0 56% 0); } 42% { clip-path:inset(0 0 62% 0); } 100% { clip-path:inset(0 0 0 0); } }
@keyframes hp-rowin { 0% { opacity:0; transform:translateX(-5px); } 100% { opacity:1; transform:translateX(0); } }
@keyframes hp-scan { 0% { transform:translateY(-40px); } 100% { transform:translateY(380px); } }