.comet-ui-comparison { position: absolute; inset: 0; overflow: auto; box-sizing: border-box; padding: 30px 24px 22px; color: #203f3a; background: radial-gradient(ellipse at 50% 0%, #fff9e9d9, #dde9ddd9 65%, #a3c6b8e6), url('../../assets/reference-art-v3/sky-temples-v2.png') center / cover; font: 15px/1.45 system-ui, sans-serif; }
.ui-study-header { text-align: center; margin: 0 auto 18px; }
.ui-study-eyebrow { font-size: 10px; letter-spacing: .22em; font-weight: 750; }
.ui-study-header h1 { font: 38px/1.1 Georgia, serif; margin: 10px 0; }
.ui-study-header p, .ui-study-description { color: #486258; }
.ui-study-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 48px; }
.ui-study-column h2 { font: 750 16px/1.3 system-ui; margin: 0 0 7px; text-align: center; }
.ui-study-description { font-size: 12px; text-align: center; margin: 0 0 8px; min-height: 36px; }
.ui-study-stage.comet-play { width: 100%; position: relative; inset: auto; height: auto; aspect-ratio: 360 / 420; background: none; overflow: visible; touch-action: auto; container-type: inline-size; }
.ui-study-panel { position: absolute; inset: 4.286% 3.33%; border-radius: 30px; border: 1px solid var(--ui-edge); background: var(--ui-panel); box-shadow: inset 0 0 0 4px #fffdf2, inset 0 0 0 5px #c9c3a085, 0 7px 0 #859988, 0 20px 42px #163e3b40; }
.ui-study-title { position: absolute; top: 29px; left: 0; right: 0; font: 750 32px/1.15 Georgia, serif; text-align: center; margin: 0; }
.ui-study-caption { position: absolute; top: 72px; left: 0; right: 0; text-align: center; font-size: 13px; margin: 0; color: #486258; }
.ui-study-button { position: absolute; min-height: 0; height: 56px; padding: 0; }
.ui-study-button-0, .ui-study-button-1 { left: calc(50% - 138px); width: 276px; }
.ui-study-button-0 { top: 119px; }.ui-study-button-1 { top: 199px; }
.ui-study-button-2, .ui-study-button-3, .ui-study-button-4 { top: 288px; width: 58px; }
.ui-study-button-2 { left: calc(50% - 121px); }.ui-study-button-3 { left: calc(50% - 29px); }.ui-study-button-4 { left: calc(50% + 63px); }
.ui-study-button-0::before, .ui-study-button-1::before { position: absolute; left: 30px; }
.ui-study-button-label { padding-left: 17px; }
.ui-study-stage .comet-icon-button:disabled { opacity: .6; filter: saturate(.35); }
.ui-study-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 15px 15px #163e3b30); }
.ui-study-model .ui-study-panel { background: none; border-color: transparent; box-shadow: none; }
.ui-study-model .ui-study-button { border: none; background: none; box-shadow: none; transition: none; }
.ui-study-model .ui-study-button:enabled:active { transform: none; background: none; box-shadow: none; }
.ui-study-model .ui-study-button:enabled:active .ui-study-button-label { transform: translateY(3px); }
.ui-study-model .ui-study-button:enabled:hover { filter: none; }
.ui-study-model.is-inspecting .ui-study-panel { visibility: hidden; }
.ui-study-model.is-disabled .ui-study-canvas { filter: saturate(.35) opacity(.6) drop-shadow(0 15px 15px #163e3b30); }
.ui-study-footer { text-align: center; margin-top: 20px; }
.ui-study-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.ui-study-controls button, .ui-study-controls a { box-sizing: border-box; min-height: 44px; padding: 10px 15px; border: 1px solid #9bb3a6; border-radius: 12px; color: #244d42; background: #f7f8ee; font: 650 13px/22px system-ui; cursor: pointer; }
.ui-study-controls :focus-visible { outline: 3px solid #214b45; outline-offset: 3px; }
.ui-study-footer p { font-size: 12px; margin: 10px 0 0; }.ui-study-status { min-height: 18px; }
@media (max-width: 720px) { .comet-ui-comparison { padding: 22px 14px; }.ui-study-grid { grid-template-columns: minmax(0, 360px); gap: 30px; }.ui-study-header h1 { font-size: 30px; } }
@container (max-width: 359px) {
  .ui-study-title { top: 8cqw; font-size: 8.89cqw; }.ui-study-caption { top: 20cqw; font-size: 3.61cqw; }
  .ui-study-button { height: 15.56cqw; font-size: 4.44cqw; }
  .ui-study-button-0, .ui-study-button-1 { left: calc(50% - 38.33cqw); width: 76.67cqw; }
  .ui-study-button-0 { top: 33.06cqw; }.ui-study-button-1 { top: 55.28cqw; }
  .ui-study-button-2, .ui-study-button-3, .ui-study-button-4 { top: 80cqw; width: 16.11cqw; }
  .ui-study-button-2 { left: calc(50% - 33.61cqw); }.ui-study-button-3 { left: calc(50% - 8.06cqw); }.ui-study-button-4 { left: calc(50% + 17.5cqw); }
  .ui-study-button-0::before, .ui-study-button-1::before { left: 8.33cqw; }
}