.pyrolytic-page{background:#101010;color:#f1f1ed}
.pyrolytic-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:end;padding:48px 5% 36px}
.pyrolytic-intro .standard-kicker{margin:0 0 20px}
.pyrolytic-intro h1{font-size:clamp(38px,4.5vw,68px);font-weight:400;letter-spacing:-.045em;line-height:1.06;margin:0;overflow-wrap:anywhere}
.pyrolytic-intro>p{max-width:560px;font-size:18px;line-height:1.7;color:#bcbcbc;margin:0 0 4px}
.pyrolytic-display{margin:0 5% 56px;border:1px solid #454545;background:#0a0c0e}
.pyrolytic-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #454545;font-size:14px;color:#ccc}
.pyrolytic-display button{background:transparent;color:#eee;border:1px solid #62676a;padding:11px 16px;font:14px Arial,Helvetica,sans-serif;cursor:pointer}
.pyrolytic-display button:hover,.pyrolytic-display button:focus-visible{background:#eee;color:#111}
.pyrolytic-viewport{position:relative;height:clamp(440px,49vw,760px);overflow:hidden;background:#030507}
.pyrolytic-loading{position:absolute;inset:0;z-index:4;background:#090909;color:#f5f5f2;transition:opacity .35s ease}
.pyrolytic-loading.is-ready{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.pyrolytic-loading,.pyrolytic-loading .brand-intro-center img,.pyrolytic-loading .brand-intro-line{animation:none;transition:none}}
#pyrolytic-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#pyrolytic-canvas:active{cursor:grabbing}
#pyrolytic-canvas:focus-visible{outline:2px solid #eeeeee;outline-offset:-3px}
.pyrolytic-labels{position:absolute;inset:0;pointer-events:none}
.pyrolytic-display .pyrolytic-label{position:absolute;pointer-events:auto;background:#090c10db;white-space:normal;max-width:230px;line-height:1.35;text-align:center;border-color:#8992928f;color:#e9ebeb;font-size:12px;padding:7px 10px;border-left:2px solid #cfaa56}
.pyrolytic-display .pyrolytic-label:hover{background:#eee;color:#111}
.pyrolytic-label-lines{position:absolute;inset:0;width:100%;height:100%;stroke:#cfaa56;stroke-width:1;opacity:.85;pointer-events:none}
.pyrolytic-display .pyrolytic-product-label{border-left-color:#d0d0d0;font-size:12px;max-width:170px}
.pyrolytic-display .pyrolytic-product-label[aria-pressed=true]{background:#e7e7e1;color:#111}
.pyrolytic-display [hidden]{display:none!important}
.pyrolytic-fallback{position:absolute;inset:30%;padding:22px;background:#161616;color:#ddd;font-size:16px;line-height:1.7;margin:0;overflow:auto}
.pyrolytic-fallback[hidden]{display:none}
.pyrolytic-controls{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid #454545;border-bottom:1px solid #454545}
.pyrolytic-controls button{flex:1 1 auto;border:0;border-right:1px solid #454545;padding:18px 20px;line-height:1.4}
.pyrolytic-controls button:last-child{border-right:0}
.pyrolytic-controls button[aria-pressed=true]{background:#e7e7e1;color:#111}
.pyrolytic-products{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 24px;border-bottom:1px solid #454545;background:#12171b}
.pyrolytic-products>span{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#bfbfbf;margin-right:8px}
.pyrolytic-products button{font-size:.875rem;padding:10px 13px}
.pyrolytic-products button[aria-pressed=true]{background:#dcdcdc;border-color:#dcdcdc;color:#111}
.pyrolytic-detail{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding:25px 24px 12px;min-height:105px}
.pyrolytic-detail h2{font-size:24px;line-height:1.2;font-weight:400;letter-spacing:-.025em;margin:0}
.pyrolytic-detail p{font-size:16px;line-height:1.7;margin:0;color:#bcbcbc;max-width:780px}
.pyrolytic-hint{font-size:14px;line-height:1.6;color:#ccc;margin:12px 24px 0}
.pyrolytic-credit{font-size:12px;color:#91999c;line-height:1.7;margin:12px 24px 22px;max-width:1100px}
.pyrolytic-credit a{color:inherit;text-underline-offset:3px}
@media(max-width:750px){.pyrolytic-intro{grid-template-columns:1fr;gap:24px;padding-top:32px}.pyrolytic-intro>p{font-size:16px}.pyrolytic-detail{grid-template-columns:1fr;gap:12px}.pyrolytic-controls button{flex:1 1 45%;border-bottom:1px solid #454545}.pyrolytic-controls button:first-child{flex-basis:100%}.pyrolytic-viewport{height:470px}.pyrolytic-display .pyrolytic-label{display:none}.pyrolytic-fallback{inset:15%}.pyrolytic-toolbar{padding:12px;flex-wrap:wrap}.pyrolytic-detail{padding:22px 18px 10px}.pyrolytic-hint,.pyrolytic-credit{margin-left:18px;margin-right:18px}}
@media(max-width:750px){.pyrolytic-display .pyrolytic-product-label{display:block}.pyrolytic-products{padding:12px 18px}.pyrolytic-products>span{flex-basis:100%}}

/* Phone controls remain separate from the draggable surface. */
.pyrolytic-intro>*,.pyrolytic-detail>*{min-width:0}
.pyrolytic-toolbar>span{min-width:0;line-height:1.5}
.pyrolytic-toolbar button,.pyrolytic-controls button,.pyrolytic-products button{min-height:44px}
.pyrolytic-controls button{min-width:0;overflow-wrap:anywhere}
.pyrolytic-toolbar button{flex-shrink:0}
@media(max-width:650px){
 .pyrolytic-viewport{height:clamp(340px,62dvh,500px)}
 .pyrolytic-toolbar{gap:8px 12px}
 .pyrolytic-detail h2{overflow-wrap:anywhere}
 .pyrolytic-display .pyrolytic-product-label{font-size:12px;max-width:min(150px,45vw);padding:7px 9px}
 .pyrolytic-products button{flex:1 0 auto}
}
@media(max-height:500px) and (orientation:landscape){.pyrolytic-viewport{height:78dvh;min-height:240px}}
