.dhero{position:relative;width:100%;max-width:640px;justify-self:end;min-width:0}#dhero-slide>svg{display:block;width:100%;height:auto}.dhero .name{font:600 35px Poppins,Arial,sans-serif;letter-spacing:-1px;fill:#151b22}.dhero .family{font:500 12px Poppins,Arial,sans-serif;letter-spacing:2px;fill:#617389}.dhero .label{font:600 17px Poppins,Arial,sans-serif;fill:#152333}.dhero .detail{font:400 14px Poppins,Arial,sans-serif;fill:#566575}.dhero .route{fill:none;stroke:#7196bd;stroke-width:1.5;stroke-dasharray:220;stroke-dashoffset:220;animation:draw .75s ease forwards;animation-delay:var(--delay)}.dhero .callout{opacity:0;animation:callin .5s ease forwards;animation-delay:var(--delay)}.dhero .device{animation:boardin .8s cubic-bezier(.2,.7,.2,1) both;transform-origin:center}.dhero .flow{fill:none;stroke:#2f7fe8;stroke-width:2;stroke-dasharray:5 70;animation:signal 3s linear infinite;opacity:.65}.dhero .battery-level{transform-origin:left center;animation:charge 6s ease-in-out infinite}.dhero-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.dhero-controls [role=tablist]{display:flex;gap:8px;flex:1}.dhero-controls button{font:500 12px Poppins,Arial,sans-serif;cursor:pointer;background:transparent;border:0;color:#667484;padding:10px 12px;border-radius:6px}.dhero-controls [aria-selected=true]{background:#e4edf7;color:#176bc0}.dhero-controls button:hover{background:#edf1f6}.dhero-controls button:focus-visible{outline:2px solid #2f7fe8;outline-offset:3px}.art-note{font-size:11px!important;color:#7b8490!important;min-height:18px;margin:8px 0 0!important}.dhero.paused svg *{animation-play-state:paused!important}@keyframes draw{to{stroke-dashoffset:0}}@keyframes callin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes boardin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}@keyframes signal{to{stroke-dashoffset:-150}}@keyframes charge{0%,100%{transform:scaleX(.35)}45%,65%{transform:scaleX(1)}}@media(max-width:1200px){.dhero{justify-self:center}}@media(max-width:640px){.dhero-controls button{padding:9px 7px;font-size:11px}}@media(prefers-reduced-motion:reduce){.dhero svg *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}

.dhero{min-height:0}.rf-switch{animation:rfselect 7s cubic-bezier(.4,0,.2,1) infinite}@keyframes rfselect{0%,25%,100%{transform:translateX(0)}45%,75%{transform:translateX(140px)}}@media(max-width:640px){.dhero{min-height:0}}

.dhero .unique-label{font-size:16px}

.hero:has(.dhero){align-items:start}

/* A slow, anchored scale drift after the entrance settles. */
.dhero .device-drift{transform-box:fill-box;transform-origin:center;animation:device-breathe 10s ease-in-out .8s infinite}
@keyframes device-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* Keep the hero paired on smaller desktop and landscape tablet widths. */
@media(min-width:901px) and (max-width:1200px){
 .hero:has(.dhero){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;padding-inline:32px}
 .hero:has(.dhero) .h1{font-size:clamp(34px,3.8vw,46px)}
 .hero:has(.dhero) .tagline{font-size:20px}
 .hero:has(.dhero) .lead{font-size:15px}
 .hero:has(.dhero) .hero-text{gap:18px}
 .hero:has(.dhero) .dhero{justify-self:end}
}

.hero-word-cycle{display:inline-grid;vertical-align:baseline}
.hero-word-cycle>span{grid-area:1/1;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.hero-word-cycle>span.is-current{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.hero-word-cycle>span{transition:none;transform:none}}

.welcome-once{display:grid;height:auto;min-height:1.5em}
.welcome-once>span{grid-area:1/1}
.welcome-space{visibility:hidden}
.welcome-typed.typing::after{content:"";display:inline-block;height:1em;border-right:1px solid currentColor;margin-left:2px;vertical-align:-.12em}

/* Headline: "designed and made" and "by me in Australia." always stay on one line; the size scales to the text column. */
.hero-text{container-type:inline-size}
.hero .hero-text .h1{font-size:min(56px,9.6cqi)}
.hero .h1 .line:not(:first-child){white-space:nowrap}