@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;600;800&family=Funnel+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
/* Phinamic components. Every value comes from the tokens or from the live site stylesheets. */
body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; background: var(--space); color: var(--ink); -webkit-font-smoothing: antialiased; }
.pnm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px; }
.pnm-row--top { align-items: flex-start; }
.pnm-pad { padding: 20px; }
.pnm-screen-ground { background: radial-gradient(circle at 50% 45%, var(--screen-lit), var(--screen-dim) 100%); }

:where(.pnm-talk, .pnm-send, .pnm-more, .pnm-chip, .pnm-ptag, .pnm-hint) { border-radius: 0; cursor: pointer; }
:where(.pnm-talk, .pnm-send, .pnm-more, .pnm-chip, .pnm-ptag, .pnm-field input, .pnm-field textarea):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Actions */
.pnm-talk { display: inline-block; border: 0; background: var(--signal); color: var(--on-color); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; line-height: 1.55; padding: 7px 11px; text-decoration: none; }
.pnm-send { border: 0; background: var(--signal); color: var(--on-color); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 13px 22px; min-height: var(--control-min); }
.pnm-more { border: 0; background: none; color: var(--signal); font: inherit; font-size: 14px; padding: 2px 0; }
.pnm-chip { background: var(--glass-soft); border: 1px solid var(--hair); color: var(--ink); font-family: var(--font-mono); font-size: 14px; letter-spacing: .03em; padding: 10px 16px; min-height: var(--control-min); }
.pnm-chip:hover { border-color: var(--signal); }
.pnm-chip[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--on-color); }
.pnm-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }

.pnm-hint { display: inline-grid; justify-items: center; gap: 7px; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: 15px; }
.pnm-hint b { font-weight: 500; text-shadow: 0 1px 10px rgba(11, 8, 32, .95); white-space: nowrap; }
.pnm-hint span { position: relative; display: block; width: 24px; height: 30px; transition: translate .18s; }
.pnm-hint:hover span { translate: 0 3px; }
.pnm-hint i { position: absolute; left: 50%; top: 2px; width: 13px; height: 13px; margin-left: -6.5px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); animation: pnm-down var(--hint-loop) ease-in-out infinite; }
.pnm-hint i + i { top: 11px; animation-delay: var(--hint-delay); }
.pnm-hint--aside { grid-auto-flow: column; align-items: center; gap: 10px; }
@keyframes pnm-down { 0% { opacity: 0; translate: 0 -6px; } 30%, 72% { opacity: 1; } 100% { opacity: 0; translate: 0 7px; } }

/* Navigation */
.pnm-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px max(20px, 4.5vw); }
.pnm-nav > a:first-child { display: block; line-height: 0; }
.pnm-nav svg { width: var(--logo-nav); height: var(--logo-nav); fill: var(--ink); }
.pnm-links { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); }
.pnm-links a:not(.pnm-talk) { color: var(--soft); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding: 7px 0; text-decoration: none; }
.pnm-links a:not(.pnm-talk):hover { color: var(--signal); }

.pnm-track { display: flex; align-items: center; gap: 10px; padding: 34px max(20px, 4.5vw) 9px; background: linear-gradient(0deg, var(--scrim) 40%, rgba(8, 7, 12, 0)); }
.pnm-track b { width: 11ch; color: var(--signal); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.pnm-track a { flex: 0 1 84px; padding: 11px 0; }
.pnm-track u { display: block; position: relative; height: 2px; background: var(--rail); text-decoration: none; }
.pnm-track a:hover u { background: var(--rail-hover); }
.pnm-track s { position: absolute; inset: 0 auto 0 0; background: var(--signal); }
.pnm-track a:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

/* Forms */
.pnm-form { display: grid; gap: clamp(9px, 1.7vh, 15px); }
.pnm-field { display: grid; }
.pnm-field > span { color: var(--soft); font-size: 15px; font-weight: 500; }
.pnm-field--line { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; }
.pnm-field--idea { gap: 4px; }
.pnm-field input, .pnm-field textarea { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong); border-radius: 0; color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; padding: 3px 2px 5px; outline: none; resize: none; }
.pnm-field textarea { font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.35; }
.pnm-field ::placeholder { color: var(--soft); opacity: 1; }
.pnm-field input:focus, .pnm-field textarea:focus { border-bottom-color: var(--signal); box-shadow: var(--focus-underline); }
.pnm-field [aria-invalid="true"] { border-bottom-color: var(--error); }
.pnm-status { margin: 0; color: var(--signal); font-size: 14px; }
.pnm-status--bad { color: var(--error); }

/* Content */
.pnm-copy { max-width: var(--copy-max); }
.pnm-copy h1, .pnm-copy h2 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; text-shadow: var(--text-lift); }
.pnm-copy h1 { font-size: clamp(40px, 4.4vw, 76px); line-height: 1; }
.pnm-copy h2 { margin-top: 12px; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.02; }
.pnm-copy p { margin: 12px 0 0; max-width: 34ch; color: var(--soft); font-size: clamp(15px, 1.25vw, 18px); text-wrap: balance; text-shadow: var(--text-lift-small); }
.pnm-copy--hero { max-width: var(--hero-max); }
.pnm-copy--hero p { margin-top: 18px; max-width: 56ch; font-size: clamp(16px, 1.4vw, 20px); }
.pnm-copy--mid { max-width: var(--mid-max); margin-inline: auto; text-align: center; }
.pnm-copy--mid p { margin-inline: auto; max-width: 46ch; }

.pnm-key { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; color: var(--signal); text-shadow: var(--text-lift); }
.pnm-key .n { margin-right: .6em; font-variant-numeric: tabular-nums; }
.pnm-key small { margin-left: .08em; color: var(--soft); font-size: .6em; font-weight: 500; }

.pnm-tag { font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1.05; letter-spacing: .01em; color: var(--signal); white-space: nowrap; text-shadow: 0 1px 14px rgba(11, 8, 32, .95), 0 0 4px rgba(11, 8, 32, .9); }
.pnm-tag em { display: block; margin-top: 4px; font-family: var(--font-body); font-style: normal; font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; letter-spacing: 0; color: var(--ink); }
.pnm-tag--call { position: relative; display: inline-block; padding-left: 0; padding-top: 12px; width: clamp(230px, 17vw, 270px); }
.pnm-tag--call i { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; background: var(--signal); }
.pnm-tag--call b { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--signal); }
.pnm-tag--plain { font-size: clamp(28px, 2.8vw, 42px); text-align: center; }
.pnm-tag--aim { font-size: clamp(18px, 1.5vw, 22px); }

.pnm-ptag { background: var(--glass); border: 1px solid var(--hair-mid); color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding: 7px 10px; min-height: var(--tag-min); white-space: nowrap; }
.pnm-ptag:hover { border-color: var(--signal); }
.pnm-ptag--lead { border-color: var(--signal); color: var(--signal); font-size: 12.5px; font-weight: 500; padding: 8px 12px; min-height: var(--control-short); }
.pnm-ptag[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--on-color); }

.pnm-sys { position: relative; box-sizing: border-box; width: min(var(--sys-width), calc(100% - 40px)); background: var(--glass-strong); border: 1px solid var(--signal-line); padding: 14px 16px; display: grid; gap: 8px; }
.pnm-sys b { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.pnm-sys p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.4; }

.pnm-scr { box-sizing: border-box; display: grid; grid-template-rows: auto 1fr; gap: clamp(10px, 1.8vh, 20px); padding: clamp(14px, 2.2vh, 26px) clamp(16px, 2.4vw, 32px); border: 1px solid var(--trace-edge); background: linear-gradient(var(--trace-grid) 1.5px, transparent 1.5px) 0 0 / 5.47% 8.87%, linear-gradient(90deg, var(--trace-grid) 1.5px, transparent 1.5px) 0 0 / 5.47% 8.87%, radial-gradient(circle at 50% 45%, var(--screen-lit), var(--screen-dim) 100%); }
.pnm-scr header { display: flex; justify-content: space-between; gap: 14px; color: var(--signal); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.pnm-scr__body { display: grid; gap: clamp(8px, 1.6vh, 16px); align-content: center; }
.pnm-scr h3 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 4.3vw, 60px); font-weight: 800; line-height: 1.03; letter-spacing: -.02em; max-width: 17ch; text-wrap: balance; }
.pnm-scr__body p { margin: 0; color: var(--ink); font-size: clamp(14.5px, 1.3vw, 18px); line-height: 1.45; max-width: 60ch; }

/* Brand moments */
.pnm-load { position: relative; display: inline-block; width: clamp(120px, 16vw, 190px); aspect-ratio: 1; }
.pnm-load svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--ink); }
.pnm-load path { transition: fill var(--mark-fill); }
.pnm-load--lock path { fill: var(--signal); }
.pnm-load__pct { position: absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; }
.pnm-load__pct::after { content: "%"; }

.pnm-hold { --k: .45; position: relative; display: inline-grid; place-items: center; width: var(--hold-size); height: var(--hold-size); }
.pnm-hold svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pnm-hold circle { fill: none; stroke: var(--signal); }
.pnm-hold .r0 { stroke-width: 1; stroke-dasharray: .018 .0263; opacity: .75; transform-origin: 60px 60px; animation: pnm-turn var(--hold-turn) linear infinite; }
.pnm-hold .r1 { stroke-width: calc(1.6px + var(--k) * 5px); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); }
.pnm-hold i { width: 12px; height: 12px; background: var(--signal); transform: rotate(45deg) scale(calc(1 + var(--k) * 1.6)); box-shadow: 0 0 calc(12px + var(--k) * 46px) var(--signal); animation: pnm-spark 1.6s ease-in-out infinite; }
.pnm-hold span { position: absolute; top: 100%; margin-top: 14px; color: var(--signal); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; white-space: nowrap; text-shadow: 0 1px 10px rgba(11, 8, 32, .9); }
@keyframes pnm-turn { to { rotate: 360deg; } }
@keyframes pnm-spark { 50% { opacity: .55; } }

.pnm-type { position: relative; }
.pnm-type::after { content: ""; display: inline-block; width: .48em; height: .95em; margin: .04em 0 0 .06em; vertical-align: -.1em; background: var(--signal); }

.pnm-cursor { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='130 -10 680 952'%3E%3Cg fill='%23D7FF3A' stroke='%230B0820' stroke-width='36' stroke-linejoin='round' transform='rotate(18 512 512) translate(1024 0) scale(-1 1)'%3E%3Cpath d='M700 593H227a17 17 0 0 1-10-31L836 112a17 17 0 0 1 26 19L716 581a17 17 0 0 1-16 12Z'/%3E%3Cpath d='M227 634h237a17 17 0 0 1 16 12l74 226a17 17 0 0 1-26 19L217 665a17 17 0 0 1 10-31Z'/%3E%3Cpath d='M544 634h131a17 17 0 0 1 16 22l-66 203a17 17 0 0 1-32 0l-66-203a17 17 0 0 1 17-22Z'/%3E%3C/g%3E%3C/svg%3E") 5 1, auto; }
.pnm-cursor a, .pnm-cursor button { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='130 -10 680 952'%3E%3Cg fill='%23FFFFFF' stroke='%230B0820' stroke-width='36' stroke-linejoin='round' transform='rotate(18 512 512) translate(1024 0) scale(-1 1)'%3E%3Cpath d='M700 593H227a17 17 0 0 1-10-31L836 112a17 17 0 0 1 26 19L716 581a17 17 0 0 1-16 12Z'/%3E%3Cpath d='M227 634h237a17 17 0 0 1 16 12l74 226a17 17 0 0 1-26 19L217 665a17 17 0 0 1 10-31Z'/%3E%3Cpath d='M544 634h131a17 17 0 0 1 16 22l-66 203a17 17 0 0 1-32 0l-66-203a17 17 0 0 1 17-22Z'/%3E%3C/g%3E%3C/svg%3E") 5 1, pointer; }

/* Composition */
.pnm-board { box-sizing: border-box; display: grid; gap: clamp(9px, 1.7vh, 15px); padding: clamp(14px, 2.2vh, 26px) clamp(16px, 2.4vw, 32px); }
.pnm-board h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -.02em; }
.pnm-board__tag { color: var(--signal); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .pnm-hint i, .pnm-hold .r0, .pnm-hold i { animation: none; }
  .pnm-hint i { opacity: 1; }
}