.arta-hero-widget {
    --ah-text: #fff7fc;
    --ah-light: #e4a6ed;
    --ah-background: #302036;
    --ah-background-end: #4b2b42;
    --ah-glow: #c982a333;
    --ah-muted: #e1d2e3;
    --ah-separator: #d9b9df45;
    --ah-face-top: #775471;
    --ah-face-bottom: #301a3c;
    --ah-face-light: #c18dac55;
    --ah-roof-top: #af829f;
    --ah-roof-bottom: #674364;
    --ah-edge: #e0badbaa;
    --ah-face-text: #fff7fc;
    --ah-icon: #f2cbea;
    --ah-media-shade: #100014cb;
    --ah-primary-bg: #e4b7dd;
    --ah-primary-text: #29132f;
    --ah-secondary-bg: #ffffff08;
    --ah-secondary-text: #fff7fc;
    --ah-button-border: #e4b7dd70;
    --ah-control-bg: #ffffff08;
    --ah-size: min(var(--ah-requested-size, var(--ah-auto-size)), calc((100vw - 140px) / 3.1));
    --ah-auto-size: clamp(210px, 23vw, 330px);
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    min-height: var(--arta-view-height, calc(100svh - var(--arta-header-height, 0px)));
    display: grid;
    align-items: center;
    padding: clamp(28px, 4.5vh, 56px) clamp(24px, 5vw, 96px);
    color: var(--ah-text);
    background: radial-gradient(ellipse at 23% 35%, var(--ah-glow), transparent 62%),
        linear-gradient(135deg, var(--ah-background), var(--ah-background-end));
    box-shadow: inset 0 1px 0 var(--ah-separator);
    font-family: var(--e-global-typography-primary-font-family, inherit);
    text-align: start;
    overflow-wrap: anywhere;
}
.arta-hero-widget *, .arta-hero-widget *::before, .arta-hero-widget *::after { box-sizing: border-box; }
.arta-hero-widget .arta-hero__layout {
    width: 100%; max-width: 1500px; margin-inline: auto;
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 88px); align-items: center;
}
.arta-hero-widget .arta-hero__intro, .arta-hero-widget .arta-hero__visual { min-width: 0; }
.arta-hero-widget .arta-hero__eyebrow { margin: 0 0 24px; color: var(--ah-light); font-size: 15px; font-weight: 500; }
.arta-hero-widget .arta-hero__eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-inline-end: 12px; vertical-align: middle; background: currentColor; }
.arta-hero-widget .arta-hero__title { margin: 0; color: var(--ah-text); font-size: clamp(36px, 3.5vw, 64px); font-weight: 700; line-height: 1.55; white-space: pre-line; text-wrap: balance; }
.arta-hero-widget .arta-hero__description { margin: 24px 0 0; max-width: 31em; color: var(--ah-muted); font-size: clamp(16px, 1.1vw, 20px); line-height: 2; }
.arta-hero-widget .arta-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.arta-hero-widget .arta-hero__actions:empty { display: none; }
.arta-hero-widget .arta-hero__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; border: 1px solid var(--ah-button-border); border-radius: 14px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.8; text-decoration: none; text-align: center; transition: transform .3s ease, background .3s ease; }
.arta-hero-widget .arta-hero__button--primary { background: var(--ah-primary-bg); color: var(--ah-primary-text); box-shadow: 0 8px 32px #c25ca21a; }
.arta-hero-widget .arta-hero__button--secondary { background: var(--ah-secondary-bg); color: var(--ah-secondary-text); }
.arta-hero-widget .arta-hero__button:hover { transform: translateY(-2px); }
.arta-hero-widget :is(a, button):focus-visible { outline: 3px solid var(--ah-light); outline-offset: 4px; }
.arta-hero-widget .arta-hero__visual { width: 100%; max-width: 620px; margin-inline: auto; }
.arta-hero-widget .arta-hero__toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; color: #cdb4d0; font-size: 12px; }
.arta-hero-widget .arta-hero__controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.arta-hero-widget .arta-hero__controls button, .arta-hero-widget .arta-hero__play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--ah-button-border); border-radius: 12px; color: var(--ah-text); background: var(--ah-control-bg); font: inherit; font-size: 12px; cursor: pointer; touch-action: manipulation; }
.arta-hero-widget .arta-hero__controls button:hover { border-color: var(--ah-light); }
.arta-hero-widget .arta-hero__controls .arta-hero__play { margin-inline-start: auto; }
.arta-hero-widget .arta-hero__count { min-width: 44px; color: var(--ah-muted); font-size: 12px; text-align: center; }
.arta-hero-widget .arta-hero__play-icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.arta-hero-widget .arta-hero__play[data-state="paused"] .arta-hero__play-icon { width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.arta-hero-widget .arta-hero__controls button:disabled { cursor: default; opacity: .65; }
.arta-hero-widget .arta-hero__play[hidden] { display: none; }
.arta-hero-widget .arta-hero__stage { position: relative; display: grid; place-items: center; height: calc(var(--ah-size) * 1.52); touch-action: pan-y pinch-zoom; user-select: none; }
.arta-hero-widget .arta-hero__stage::before { content: ""; position: absolute; width: 78%; height: 74%; border-radius: 50%; background: radial-gradient(ellipse, #c261b51c, transparent 68%); pointer-events: none; }
.arta-hero-widget .arta-hero__stage::after { content: ""; position: absolute; width: 64%; max-width: 360px; height: 24px; bottom: 12px; border-radius: 50%; background: #0009; filter: blur(18px); z-index: -1; }
.arta-hero-widget .arta-hero__view { position: relative; width: var(--ah-size); height: var(--ah-size); perspective: 1800px; }
.arta-hero-widget .arta-hero__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--ah-size) / -2)) rotateX(calc(var(--ah-angle-x, -22deg) + var(--ah-pointer-x, 0deg))) rotateY(calc(var(--ah-angle-y, -32deg) + var(--ah-pointer-y, 0deg))) rotateZ(-2deg); transition: transform .45s cubic-bezier(.2,.65,.2,1); }
.arta-hero-widget .arta-hero__cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(var(--ah-turn, 0deg)); transition: transform 1.35s cubic-bezier(.22,.61,.36,1); }
.arta-hero-widget .arta-hero__face, .arta-hero-widget .arta-hero__roof, .arta-hero-widget .arta-hero__floor { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--ah-edge); border-radius: 1px; }
.arta-hero-widget .arta-hero__face { overflow: hidden; color: var(--ah-text); background: radial-gradient(ellipse at 24% 10%, var(--ah-face-light), transparent 66%), linear-gradient(145deg, var(--ah-face-top), var(--ah-face-bottom) 85%); box-shadow: inset 0 0 30px #e8aff514; transform: rotateY(calc(var(--ah-face) * 90deg)) translateZ(calc(var(--ah-size) / 2)); text-align: start; }
.arta-hero-widget .arta-hero__face::after { content: ""; position: absolute; inset: 0; background: #100014; opacity: var(--ah-shade, .04); pointer-events: none; transition: opacity 1.35s ease; z-index: 2; }
.arta-hero-widget .arta-hero__number { position: absolute; inset-inline-start: 9%; top: 8%; z-index: 3; color: var(--ah-icon); font-size: 14px; text-shadow: 0 2px 10px #000; }
.arta-hero-widget .arta-hero__face > svg { position: absolute; width: 29%; height: 29%; left: 35.5%; top: 31%; color: var(--ah-icon); }
.arta-hero-widget .arta-hero__face strong { position: absolute; inset-inline: 9%; bottom: 9%; z-index: 3; color: var(--ah-face-text); font-size: clamp(15px, 1.2vw, 23px); font-weight: 500; line-height: 1.6; text-shadow: 0 2px 12px #100014; }
.arta-hero-widget .arta-hero__roof { display: grid; place-items: center; transform: rotateX(90deg) translateZ(calc(var(--ah-size) / 2)); background: linear-gradient(140deg, var(--ah-roof-top), var(--ah-roof-bottom)); color: var(--ah-icon); font: 500 24px/1 Arial, sans-serif; letter-spacing: .2em; }
.arta-hero-widget .arta-hero__floor { background: var(--ah-face-bottom); transform: rotateX(-90deg) translateZ(calc(var(--ah-size) / 2)); }
.arta-hero-widget .arta-hero__media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.arta-hero-widget .arta-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #10001438, transparent 35%, var(--ah-media-shade)); }
.arta-hero-widget .arta-hero__media img, .arta-hero-widget .arta-hero__media video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: var(--ah-fit, cover); }
.arta-hero-widget .arta-hero__media [hidden], .arta-hero-widget .arta-hero__media video:not(.is-playing) { display: none; }
.arta-hero-widget .arta-hero__narrative { margin-top: 4px; }
.arta-hero-widget .arta-hero__panels { display: grid; }
.arta-hero-widget .arta-hero__panel { grid-area: 1 / 1; }
.arta-hero-widget .arta-hero__panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.arta-hero-widget .arta-hero__panel h2 { margin: 0; color: var(--ah-text); font-size: 20px; font-weight: 500; line-height: 1.7; }
.arta-hero-widget .arta-hero__panel h2 span { color: var(--ah-light); margin-inline-end: 8px; font-size: 12px; }
.arta-hero-widget .arta-hero__panel p { margin: 8px 0 0; color: var(--ah-muted); font-size: 14px; line-height: 1.9; }
.arta-hero-widget.is-ready .arta-hero__panel:not([hidden]) { animation: artaHeroText .5s ease-out both; }
.arta-hero-widget .arta-hero__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.arta-hero-widget .arta-hero__tabs button { appearance: none; min-width: 0; min-height: 56px; padding: 10px 2px 4px; border: 0; border-top: 1px solid var(--ah-button-border); border-radius: 0; color: var(--ah-muted); background: transparent; font: inherit; font-size: 12px; line-height: 1.8; cursor: pointer; text-align: start; touch-action: manipulation; }
.arta-hero-widget .arta-hero__tabs button span { display: block; font-size: 10px; margin-bottom: 2px; }
.arta-hero-widget .arta-hero__tabs button[aria-selected="true"] { border-color: var(--ah-light); color: var(--ah-text); }
.arta-hero-widget .arta-hero__tabs button:hover { color: var(--ah-light); }
.arta-hero-widget .arta-hero__editor-note { margin-top: 20px; font-size: 13px; color: var(--ah-muted); }
.arta-hero-widget .arta-hero__fallback { max-width: 900px; margin: 32px auto; }
.arta-hero-widget.is-paused .arta-hero__cube, .arta-hero-widget.is-paused .arta-hero__tilt, .arta-hero-widget.is-paused .arta-hero__face::after { transition: none; }
.arta-hero-widget.is-paused .arta-hero__panel { animation: none; }
@keyframes artaHeroText { from { opacity: .65; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) and (max-height: 800px) {
    .arta-hero-widget { --ah-auto-size: clamp(180px, 28vh, 230px); padding-block: 24px; }
    .arta-hero-widget .arta-hero__title { font-size: clamp(32px, 3.3vw, 52px); }
    .arta-hero-widget .arta-hero__tabs { margin-top: 14px; }
}
@media (max-width: 1024px) {
    .arta-hero-widget { padding-inline: 28px; }
    .arta-hero-widget .arta-hero__layout { gap: 28px; }
}
@media (max-width: 900px) {
    .arta-hero-widget { --ah-size: min(var(--ah-requested-size, var(--ah-auto-size)), calc((100vw - 48px) / 1.7)); --ah-auto-size: clamp(170px, 37vw, 250px); padding: 36px 24px; }
    .arta-hero-widget .arta-hero__layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .arta-hero-widget .arta-hero__intro { max-width: 640px; margin-inline: auto; width: 100%; }
    .arta-hero-widget .arta-hero__title { font-size: clamp(30px, 5vw, 44px); }
    .arta-hero-widget .arta-hero__visual { max-width: 540px; }
}
@media (max-width: 480px) {
    .arta-hero-widget { --ah-auto-size: clamp(152px, 44vw, 205px); padding: 32px 20px; }
    .arta-hero-widget .arta-hero__eyebrow { font-size: 12px; margin-bottom: 14px; }
    .arta-hero-widget .arta-hero__title { font-size: clamp(28px, 7.4vw, 34px); }
    .arta-hero-widget .arta-hero__description { font-size: 15px; margin-top: 16px; }
    .arta-hero-widget .arta-hero__actions { margin-top: 22px; }
    .arta-hero-widget .arta-hero__button { width: 100%; min-height: 48px; font-size: 14px; }
    .arta-hero-widget .arta-hero__tabs { gap: 8px; margin-top: 16px; }
    .arta-hero-widget .arta-hero__tabs button { font-size: 11px; }
    .arta-hero-widget .arta-hero__panel h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .arta-hero-widget *, .arta-hero-widget *::before, .arta-hero-widget *::after { transition: none !important; animation: none !important; }
}