.hre{margin:8px 0 28px}.hre-head{margin-bottom:16px}.hre-label{font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--purple);margin:0 0 6px}.hre-title{font:500 clamp(21px,2.4vw,28px) /1.15 var(--display);letter-spacing:-.4px;margin:0}.hre-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.hre-tabs button{display:inline-flex;align-items:center;gap:8px;font:13px var(--mono);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:30px;padding:8px 14px;cursor:pointer;position:relative;overflow:hidden}.hre-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--lime);transform-origin:left;animation:hre-fill linear forwards}@keyframes hre-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.hre-progress{display:none}}.hre-tabs button span{font-size:10px;color:var(--muted)}.hre-tabs button.on,.hre-tabs button:hover{border-color:var(--purple)}.hre-tabs button.on{background:var(--purple);color:#fff}.hre-tabs button.on span{color:#c9d7ff}.hre-panel{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:24px;align-items:start;background-color:#e7eeff;background-image:linear-gradient(rgba(31,79,209,.12) 1px,transparent 0),linear-gradient(90deg,rgba(31,79,209,.12) 1px,transparent 0);background-size:24px 24px;border:1px solid #c3d2fb;border-radius:14px;padding:20px}.hre-shot{margin:0;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 18px 40px -22px rgba(15,26,58,.55);border:1px solid #c3d2fb}.hre-browser{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f3f6fd;border-bottom:1px solid #dde3f0}.hre-browser i{width:9px;height:9px;border-radius:50%;background:#c3d2fb}.hre-browser span{margin-left:10px;font:11px var(--mono);color:#5a6b99;background:#fff;border:1px solid #dde3f0;border-radius:20px;padding:3px 12px}.hre-shot img{display:block;width:100%;height:auto}.hre-copy{padding-top:6px}.hre-copy .hre-when{font:600 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--purple);margin:0 0 6px}.hre-copy .hre-name{font:600 24px/1.15 var(--display);margin:0 0 10px}.hre-copy p{font-size:15px;line-height:1.55}.hre-copy .hre-note{margin-top:16px;padding-top:12px;border-top:1px solid #c3d2fb;font-size:13px;color:var(--muted)}@media (max-width:900px){.hre-panel{grid-template-columns:1fr;padding:14px}}@media (max-width:640px){.hre-tabs{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}.hre-tabs button{flex:none}}