/* ARworks egészségügyi portfólió — az eszköztár (négy kipróbálható koncepciódemó): betegmonitor, anatómia, AED-tréner, tünetnapló.
   Szkript nélkül minden panel látszik egymás alatt; a `.hp-js` osztállyal fülekre vált. A színpad kezdőállapota a HTML-ben áll. */

/* ------------------------------------------------------------ a munkapad: fülek + panelek */
.hp .hp-bench { border: 1px solid var(--hp-line-2); background: #fff; box-shadow: 0 1px 2px rgba(18, 24, 29, 0.04), 0 40px 70px -50px rgba(18, 24, 29, 0.4); }
.hp .hp-tabs { display: none; }
.hp.hp-js .hp-tabs { display: flex; overflow-x: auto; background: var(--hp-paper); border-bottom: 1px solid var(--hp-line-2); scrollbar-width: thin; }
.hp .hp-tab {
  flex: 1 0 auto; display: grid; justify-items: start; align-content: start; gap: 7px; min-width: 132px; padding: 15px 18px 13px; text-align: left; cursor: pointer;
  background: none; border: 0; border-right: 1px solid var(--hp-line); border-top: 3px solid transparent; color: var(--hp-mute);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.hp .hp-tab:last-child { border-right: 0; }
.hp .hp-tab__ic .hpi { width: 30px; height: 30px; }
.hp .hp-tab__n { font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.14em; color: var(--hp-orange-ink); }
.hp .hp-tab b { font: 400 14px/1.2 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.hp .hp-tab:hover { color: var(--hp-ink); background: #fff; }
.hp .hp-tab.is-on { background: #fff; color: var(--hp-ink); border-top-color: var(--hp-orange); margin-bottom: -1px; }
.hp .hp-tab.is-on .hpi { color: var(--hp-orange); }
.hp.hp-js .hp-tool:not(.is-on) { display: none; }
.hp .hp-tool { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.hp .hp-tool + .hp-tool { border-top: 1px solid var(--hp-line-2); }
.hp .hp-tool__main { padding: 22px 22px 24px; border-right: 1px solid var(--hp-line); min-width: 0; }
.hp .hp-tool__side { display: flex; flex-direction: column; gap: 14px; padding: 28px 30px 30px; background: var(--hp-paper); min-width: 0; }
.hp .hp-tool__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hp .hp-tool__t { font: 300 28px/1.1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; }
.hp .hp-tool__lead { font-size: 15px; line-height: 1.55; color: var(--hp-mute); }
@media (max-width: 1080px) {
  .hp .hp-tool { grid-template-columns: 1fr; }
  .hp .hp-tool__main { border-right: 0; border-bottom: 1px solid var(--hp-line); padding: 16px 16px 18px; }
  .hp .hp-tool__side { padding: 22px 20px 26px; }
}

/* a „mire használható” négyes */
.hp .hp-use { display: grid; gap: 0; border-top: 1px solid var(--hp-line-2); }
.hp .hp-use__i { display: grid; gap: 4px; padding: 11px 0 12px; border-bottom: 1px solid var(--hp-line); }
.hp .hp-use dt { font: 400 10.5px/1.3 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-orange-ink); }
.hp .hp-use dd { font-size: 14.5px; line-height: 1.5; color: var(--hp-ink-2); }
.hp .hp-use__i--main dd { font-size: 16px; line-height: 1.5; color: var(--hp-ink); }
.hp .hp-built { display: grid; gap: 8px; }
.hp .hp-built__l { font: 400 10.5px/1.3 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-dim); }
.hp .hp-built__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp .hp-built__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; cursor: pointer; font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-ink); background: #fff; border: 1px solid var(--hp-line-2); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.hp .hp-built__chip:hover { background: var(--hp-ink); color: #fff; border-color: var(--hp-ink); }
.hp .hp-built__chip svg { transition: transform 0.35s var(--hp-ease); }
.hp .hp-built__chip:hover svg { transform: rotate(90deg); }
.hp .hp-tool__more { margin-top: auto; padding-top: 4px; }

/* ------------------------------------------------------------ a színpad */
.hp .hp-tool__stage {
  position: relative; aspect-ratio: 800 / 520; overflow: hidden; border: 1px solid var(--hp-line);
  background:
    linear-gradient(var(--hp-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--hp-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(80% 70% at 50% 108%, rgba(239, 84, 34, 0.1), transparent 70%), linear-gradient(#fbfcfd, #f1f5f8);
}
.hp .hp-tool__tag { position: absolute; left: 12px; top: 12px; z-index: 4; padding: 5px 9px; pointer-events: none; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-ink); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--hp-line-2); }
.hp .hp-tool__hint { position: absolute; left: 12px; bottom: 12px; z-index: 4; padding: 6px 10px; pointer-events: none; font: 400 10px/1.2 var(--font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hp-orange-ink); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hp-line); transition: opacity 0.4s; max-width: 64%; }
.hp .hp-tool.is-used .hp-tool__hint, .hp .hp-tool__body.is-used .hp-tool__hint { opacity: 0; }

@media (max-width: 760px) {
  .hp .hp-tool__hint { display: none; }
  .hp .hp-tool__tag { left: 8px; top: 8px; font-size: 8.5px; padding: 4px 7px; }
}

/* ------------------------------------------------------------ vezérlők */
.hp .hp-tool__ctl { display: grid; gap: 12px; padding-top: 16px; }
.hp .hp-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hp .hp-ctl { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 190px; }
.hp .hp-ctl__l { font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-mute); white-space: nowrap; }
.hp .hp-ctl output { font: 400 12px/1 var(--font-mono, monospace); letter-spacing: 0.04em; color: var(--hp-ink); min-width: 6.4ch; text-align: right; font-variant-numeric: tabular-nums; }
.hp .hp-ctl--wide { flex-basis: 100%; }
.hp .hp-ctl input[type='range'] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 90px; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.hp .hp-ctl input[type='range']::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--hp-orange) var(--fill, 0%), rgba(18, 24, 29, 0.18) var(--fill, 0%)); }
.hp .hp-ctl input[type='range']::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(18, 24, 29, 0.18); }
.hp .hp-ctl input[type='range']::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--hp-orange); }
.hp .hp-ctl input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--hp-orange); box-shadow: 0 2px 8px rgba(18, 24, 29, 0.28); }
.hp .hp-ctl input[type='range']::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--hp-orange); box-shadow: 0 2px 8px rgba(18, 24, 29, 0.28); }
.hp .hp-seg { display: inline-flex; border: 1px solid var(--hp-ink); border-radius: 2px; overflow: hidden; background: #fff; }
.hp .hp-seg button { padding: 9px 14px; cursor: pointer; font: 500 12.5px/1 var(--font-body, sans-serif); color: var(--hp-ink); background: #fff; border: 0; border-left: 1px solid var(--hp-line-2); transition: background 0.2s, color 0.2s; }
.hp .hp-seg button:first-child { border-left: 0; }
.hp .hp-seg button:hover { background: var(--hp-paper-2); }
.hp .hp-seg button.is-on { background: var(--hp-ink); color: #fff; }
.hp .hp-tgl { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 10px; cursor: pointer; font: 500 12.5px/1 var(--font-body, sans-serif); color: var(--hp-ink); background: #fff; border: 1px solid var(--hp-line-2); border-radius: 2px; transition: border-color 0.2s, background 0.2s; }
.hp .hp-tgl:hover { border-color: var(--hp-ink); }
.hp .hp-tgl i { position: relative; width: 26px; height: 14px; flex: none; border-radius: 8px; background: rgba(18, 24, 29, 0.22); transition: background 0.25s; }
.hp .hp-tgl i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--hp-ease); }
.hp .hp-tgl.is-on i { background: var(--hp-orange); }
.hp .hp-tgl.is-on i::after { transform: translateX(12px); }
.hp .hp-play { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 124px; padding: 10px 16px; cursor: pointer; font: 500 13px/1 var(--font-body, sans-serif); color: #fff; background: var(--hp-orange); border: 1px solid var(--hp-orange); border-radius: 2px; transition: background 0.2s; }
.hp .hp-play:hover { background: var(--orange-600, #d3431a); }
.hp .hp-tool__info { min-height: 2.9em; font-size: 14px; line-height: 1.45; color: var(--hp-ink-2); border-left: 2px solid var(--hp-orange); padding: 3px 0 3px 12px; }
.hp .hp-chipsrow { gap: 8px; }

/* a tipp-sáv: alapból bal alul; ahol ott tartalom van, felül jobbra */
.hp .hp-tool__stage--monitor .hp-tool__hint, .hp .hp-tool__stage--procedure .hp-tool__hint, .hp .hp-tool__stage--diary .hp-tool__hint { left: auto; right: 12px; top: 12px; bottom: auto; max-width: 56%; }

/* ------------------------------------------------------------ 01 — betegmonitor-szimulátor */
.hp .hp-tool__stage--monitor { background: #0b141d; border-color: #0b141d; }
.hp .hp-tool__stage--monitor .hp-tool__tag { background: rgba(255, 255, 255, 0.92); }
.hp .hp-mon { position: absolute; inset: 0; color: #d7e5f2; container-type: inline-size; }
.hp .hp-mon__screen { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); padding: 46px 0 42px; background: radial-gradient(70% 70% at 30% 20%, rgba(57, 217, 138, 0.07), transparent 70%); }
.hp .hp-mon__traces { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 0 16px; min-width: 0; }
.hp .hp-mon__tr { position: relative; flex: 1; min-height: 0; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.hp .hp-mon__tr svg { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hp .hp-mon__tl { position: absolute; left: 2px; top: 2px; z-index: 2; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; }
.hp .hp-mon__tr--ecg .hp-mon__tl { color: #39d98a; } .hp .hp-mon__tr--pl .hp-mon__tl { color: #5fd0ff; }
.hp .hp-mon__tr path { fill: none; stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hp .hp-mon__tr--ecg path { stroke: #39d98a; filter: drop-shadow(0 0 3px rgba(57, 217, 138, 0.7)); }
.hp .hp-mon__tr--pl path { stroke: #5fd0ff; filter: drop-shadow(0 0 3px rgba(95, 208, 255, 0.6)); }
.hp .hp-mon__run { animation: hp-mon-run var(--dur, 3.333s) linear infinite; }
@keyframes hp-mon-run { to { transform: translateX(-600px); } }
.hp .hp-mon.is-paused .hp-mon__run, .hp .hp-mon.is-paused .hp-mon__alarm { animation-play-state: paused; }
.hp .hp-mon__nums { display: grid; grid-template-rows: 1.35fr 1fr 1fr 1fr; padding: 0 16px 0 14px; border-left: 1px solid rgba(255, 255, 255, 0.1); min-width: 0; }
.hp .hp-mon__num { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; align-content: center; gap: 0 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 2px 0; }
.hp .hp-mon__num:last-child { border-bottom: 0; }
.hp .hp-mon__num span { grid-column: 1 / -1; font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(215, 229, 242, 0.62); }
.hp .hp-mon__num b { font: 300 clamp(30px, 8.6cqw, 74px)/1.02 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 300; }
.hp .hp-mon__num i { font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.06em; color: rgba(215, 229, 242, 0.62); font-style: normal; padding-bottom: 5px; }
.hp .hp-mon__num--hr b { color: #39d98a; font-size: clamp(40px, 12cqw, 104px); }
.hp .hp-mon__num--spo2 b { color: #5fd0ff; }
.hp .hp-mon__num--bp b { color: #eef3f8; font-size: clamp(24px, 6.4cqw, 54px); }
.hp .hp-mon__num--rr b { color: #f5d76e; }
.hp .hp-mon__alarm { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; display: grid; place-items: center; font: 700 12.5px/1 var(--font-mono, monospace); letter-spacing: 0.22em; background: rgba(31, 157, 99, 0.2); color: #7fe7b3; transition: background 0.3s, color 0.3s; }
.hp .hp-mon:not([data-alarm='']) .hp-mon__alarm { background: #c22b1c; color: #fff; animation: hp-alarm 0.9s steps(2, jump-none) infinite; }
@keyframes hp-alarm { 50% { background: #7e170d; } }
.hp .hp-mon[data-alarm='hrhi'] .hp-mon__num--hr b, .hp .hp-mon[data-alarm='hrlo'] .hp-mon__num--hr b, .hp .hp-mon[data-alarm='spo2'] .hp-mon__num--spo2 b, .hp .hp-mon[data-alarm='arrest'] .hp-mon__num b { color: #ff6b5c; animation: hp-blink 0.9s steps(2, jump-none) infinite; }
.hp .hp-mon[data-alarm='arrest'] .hp-mon__tr path { stroke: #ff6b5c; filter: none; }

/* ------------------------------------------------------------ 02 — anatómia-rétegek */
.hp .hp-tool__stage--anatomy { background: radial-gradient(40% 80% at 42% 48%, rgba(19, 138, 138, 0.13), transparent 72%), linear-gradient(var(--hp-grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--hp-grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(#fbfcfd, #eaf1f6); }
.hp .hp-an { position: absolute; inset: 0; --beat: 0.833s; --breath: 4.2s; }
.hp .hp-an__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp .hp-an .hv-body, .hp .hp-an .hv-mesh, .hp .hp-an .hv-marks, .hp .hp-an .hv-bones, .hp .hp-an .hv-organs, .hp .hp-an .hv-vessels, .hp .hp-an .hv-heart { transition: opacity 0.45s; }
.hp .hp-an[data-skin='0'] .hv-mesh, .hp .hp-an[data-skin='0'] .hv-marks { opacity: 0; }
.hp .hp-an[data-skin='0'] .hv-body { opacity: 0.3; }
.hp .hp-an[data-bones='0'] .hv-bones { opacity: 0; }
.hp .hp-an[data-organs='0'] .hv-organs { opacity: 0; pointer-events: none; }
.hp .hp-an[data-vessels='0'] .hv-vessels, .hp .hp-an[data-vessels='0'] .hv-heart { opacity: 0; pointer-events: none; }
.hp .hp-an [data-organ] { cursor: pointer; transition: filter 0.25s; }
.hp .hp-an [data-organ]:hover { filter: drop-shadow(0 0 7px rgba(239, 84, 34, 0.55)); }
.hp .hp-an[data-sel='heart'] [data-organ='heart'], .hp .hp-an[data-sel='lungs'] [data-organ='lungs'], .hp .hp-an[data-sel='brain'] [data-organ='brain'],
.hp .hp-an[data-sel='vessels'] [data-organ='vessels'], .hp .hp-an[data-sel='liver'] [data-organ='liver'] { filter: drop-shadow(0 0 9px rgba(239, 84, 34, 0.9)); }
.hp .hp-an.is-paused * { animation-play-state: paused !important; }
.hp .hp-an__card { position: absolute; right: 14px; top: 14px; z-index: 5; width: min(250px, 44%); display: grid; gap: 7px; padding: 13px 15px 14px; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--hp-teal); border-left-width: 3px; box-shadow: 0 18px 34px -18px rgba(18, 24, 29, 0.45); }
.hp .hp-an__card.is-in { animation: hp-card-in 0.5s var(--hp-ease) both; }
.hp .hp-an__card b { font: 400 17px/1.15 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; }
.hp .hp-an__card p { font-size: 13px; line-height: 1.45; color: var(--hp-ink-2); }
.hp .hp-an__card .hp-built__chip { justify-self: start; }
@keyframes hp-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ 03 — AED-eljárás-tréner */
.hp .hp-tool__stage--procedure { background: linear-gradient(var(--hp-grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--hp-grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(#fbfcfd, #f1f5f8); }
.hp .hp-pr { position: absolute; inset: 0; display: grid; grid-template-columns: 32% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0 14px; padding: 44px 16px 14px; }
.hp .hp-pr__left { display: grid; place-items: center; min-height: 0; }
.hp .hp-pr__dev { height: 100%; max-height: 330px; width: auto; max-width: 100%; }
.hp .hp-pr__body { fill: #e8ecf0; stroke: #9fb0c2; stroke-width: 2; }
.hp .hp-pr__lcd { fill: #12263a; }
.hp .hp-pr__txt { font: 700 11px 'Space Mono', monospace; fill: #7fe7b3; letter-spacing: 0.08em; }
.hp .hp-pr__led { fill: #c9d4df; transition: fill 0.3s; }
.hp .hp-pr:not([data-n='0']) .hp-pr__led { fill: #39d98a; }
.hp .hp-pr__pwr { fill: #fff; stroke: #1c3d63; stroke-width: 2.4; }
.hp .hp-pr__ic { fill: none; stroke: #1c3d63; stroke-width: 2.4; stroke-linecap: round; }
.hp .hp-pr__shock { fill: #ef5422; stroke: #ac3512; stroke-width: 2; }
.hp .hp-pr__bolt { fill: #fff; }
.hp .hp-pr__cable { fill: none; stroke: #9fb0c2; stroke-width: 3; stroke-linecap: round; }
.hp .hp-pr[data-n='4'] .hp-pr__shock { animation: hp-flash 0.7s steps(2, jump-none) infinite; }
@keyframes hp-flash { 50% { fill: #ffd2c0; } }
.hp .hp-pr__list { display: grid; gap: 7px; align-content: center; min-width: 0; }
.hp .hp-pr__s { display: grid; grid-template-columns: 30px 24px minmax(0, 1fr) 14px; align-items: center; gap: 9px; width: 100%; padding: 7px 11px; text-align: left; cursor: pointer; background: #fff; border: 1px solid var(--hp-line-2); border-radius: 2px; transition: border-color 0.2s, background 0.2s; }
.hp .hp-pr__s:hover { border-color: var(--hp-ink); }
.hp .hp-pr__s .hpi { width: 28px; height: 28px; color: var(--hp-blue); }
.hp .hp-pr__n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--hp-line-2); font: 700 11px/1 var(--font-mono, monospace); color: #fff; }
.hp .hp-pr__s b { font: 500 13px/1.25 var(--font-body, sans-serif); }
.hp .hp-pr__s .hp-ic-svg { color: #fff; opacity: 0; }
.hp .hp-pr__s.is-done { border-color: var(--hp-ok); background: #f0faf4; }
.hp .hp-pr__s.is-done .hp-pr__n { background: var(--hp-ok); border-color: var(--hp-ok); }
.hp .hp-pr__s.is-done .hp-ic-svg { color: var(--hp-ok); opacity: 1; }
.hp .hp-pr__s.is-wrong { border-color: #c22b1c; background: #fdeeec; animation: hp-shake 0.4s; }
@keyframes hp-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.hp .hp-pr__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hp-line); }
.hp .hp-pr__stat { display: grid; gap: 4px; }
.hp .hp-pr__stat em { font: 400 10px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-mute); font-style: normal; }
.hp .hp-pr__stat b { font: 300 24px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; font-weight: 300; }
.hp .hp-pr__prog { flex: 1; height: 6px; background: rgba(18, 24, 29, 0.12); border-radius: 3px; overflow: hidden; }
.hp .hp-pr__prog i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--hp-teal); transition: width 0.4s var(--hp-ease); }
.hp .hp-pr__res { position: absolute; inset: 0; z-index: 6; display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; background: rgba(255, 255, 255, 0.97); animation: hp-card-in 0.5s var(--hp-ease) both; }
.hp .hp-pr__res b { font: 300 44px/1 var(--font-display, 'Jost', sans-serif); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 300; color: var(--hp-teal-ink); }
.hp .hp-pr__res p { font: 400 14px/1.4 var(--font-mono, monospace); letter-spacing: 0.06em; color: var(--hp-ink-2); }
.hp .hp-pr.is-paused * { animation-play-state: paused !important; }

/* ------------------------------------------------------------ 04 — tünetnapló */
.hp .hp-tool__stage--diary { background: linear-gradient(#fff, #f6f8fa); }
.hp .hp-dy { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding: 46px 20px 16px; }
.hp .hp-dy__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hp .hp-dy__head b { font: 400 10.5px/1 var(--font-mono, monospace); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-mute); font-weight: 400; }
.hp .hp-dy__legend { display: flex; gap: 14px; flex-wrap: wrap; }
.hp .hp-dy__legend li { display: inline-flex; align-items: center; gap: 7px; font: 400 11px/1 var(--font-mono, monospace); letter-spacing: 0.04em; color: var(--hp-ink-2); }
.hp .hp-dy__legend i { width: 16px; height: 4px; border-radius: 2px; }
.hp .hp-dy__svg { width: 100%; height: 100%; min-height: 0; }
.hp .hp-dy__alert { padding: 9px 12px; font-size: 13px; line-height: 1.4; border-left: 3px solid; }
.hp .hp-dy__alert.is-ok { background: #f0faf4; border-color: var(--hp-ok); color: #14663f; }
.hp .hp-dy__alert.is-alert { background: #fdeeec; border-color: #c22b1c; color: #8d1d12; animation: hp-card-in 0.4s var(--hp-ease) both; }
.hp .hp-ctl-row--diary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px 20px; }
.hp .hp-ctl-row--diary > .hp-ctl__l { grid-column: 1 / -1; }
.hp .hp-ctl-row--diary .hp-ctl { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'l o' 's s'; align-items: center; gap: 0 8px; min-width: 0; }
.hp .hp-ctl-row--diary .hp-ctl .hp-ctl__l { grid-area: l; }
.hp .hp-ctl-row--diary .hp-ctl output { grid-area: o; min-width: 2ch; }
.hp .hp-ctl-row--diary .hp-ctl input { grid-area: s; width: 100%; }
@media (max-width: 560px) { .hp .hp-ctl-row--diary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hp .hp-ctl-row--diary .hp-play { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .hp .hp-seg { display: flex; width: 100%; }
  .hp .hp-seg button { flex: 1 1 0; min-width: 0; padding: 9px 4px; font-size: 11.5px; line-height: 1.15; white-space: normal; }
  .hp .hp-ctl { min-width: 0; flex-basis: 100%; }
  .hp .hp-tool__stage--monitor { aspect-ratio: 4 / 4.7; }
  .hp .hp-mon__screen { grid-template-columns: 1fr; grid-template-rows: minmax(0, 44%) minmax(0, 1fr); padding: 42px 0 34px; }
  .hp .hp-mon__traces { padding: 0 12px; }
  .hp .hp-mon__nums { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 4px 12px 0; column-gap: 12px; }
  .hp .hp-mon__num { border-bottom: 0; padding: 2px 0; }
  .hp .hp-mon__num b, .hp .hp-mon__num--hr b, .hp .hp-mon__num--bp b { font-size: clamp(30px, 12cqw, 48px); }
  .hp .hp-mon__num span { font-size: 9px; }
  .hp .hp-an__card { width: 56%; padding: 9px 10px; }
  .hp .hp-an__card p { font-size: 11.5px; }
  .hp .hp-pr { grid-template-columns: 1fr; padding-top: 34px; }
  .hp .hp-pr__left { display: none; }
  .hp .hp-pr__s b { font-size: 12px; }
  .hp .hp-dy { padding: 38px 10px 10px; }
}
@media (max-width: 420px) { .hp .hp-seg { display: grid; grid-template-columns: 1fr 1fr; } .hp .hp-seg button { border-top: 1px solid var(--hp-line-2); } .hp .hp-seg button:nth-child(-n + 2) { border-top: 0; } .hp .hp-seg button:nth-child(odd) { border-left: 0; } }