:root {
  color-scheme: light;
}

body{min-width:0;margin:0;overflow-x:hidden;background:var(--surface)}
button{cursor:pointer}
button:disabled{cursor:default}
.catalog-shell{width:min(calc(100% - 40px),1180px);margin-inline:auto}
.desktop-only{display:inline}
.catalog-eyebrow{margin:0 0 12px;color:var(--green);font:800 11px Georgia,serif;letter-spacing:.18em}
.sample-breadcrumb{display:flex;align-items:center;gap:8px;margin:0 0 38px;color:#aab9cb;font-size:12px;font-weight:700}
.sample-breadcrumb a{color:#72dfc7;text-underline-offset:3px}

.catalog-hero{position:relative;overflow:hidden;padding:42px 0 95px;color:#fff;background:radial-gradient(circle at 83% 18%,rgba(83,227,198,.18),transparent 24%),linear-gradient(125deg,#071a36 0%,#0a3450 65%,#006a5a 130%)}
.catalog-hero::before{position:absolute;inset:0;opacity:.08;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:28px 28px;content:""}
.catalog-hero::after{position:absolute;right:-110px;bottom:-280px;width:520px;height:520px;border:1px solid rgba(112,238,211,.25);border-radius:50%;box-shadow:0 0 0 75px rgba(112,238,211,.06),0 0 0 150px rgba(112,238,211,.04);content:""}
.catalog-hero .catalog-shell{position:relative;z-index:1}
.catalog-hero .catalog-eyebrow{color:#71e6cc}
.catalog-hero h1{margin:0;font-size:clamp(52px,7vw,83px);line-height:1.2;letter-spacing:-.06em}
.catalog-lead{max-width:680px;margin:24px 0 0;color:#d6e1ec;font-size:16px;font-weight:600;line-height:1.9}

.catalog-section{padding:82px 0 100px;overflow-anchor:none}
.catalog-intro{margin:0 0 34px;color:var(--muted);font-size:15px;font-weight:700;line-height:1.85;text-align:center;white-space:nowrap}
.catalog-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:46px;align-items:start}

.catalog-preview-column{position:static;width:min(100%,780px);min-width:0;margin-inline:auto}
.catalog-preview{padding:14px;overflow:hidden;border:1px solid #b8843d;border-radius:22px;background:#0b1c35;box-shadow:0 26px 60px rgba(5,27,53,.24)}
.preview-top{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 13px;color:#c7a76e;font:800 9px Georgia,serif;letter-spacing:.15em}
.preview-top i{width:8px;height:8px;border-radius:50%;background:#50dfc1;box-shadow:0 0 9px #50dfc1}
.preview-device{position:relative;display:grid;place-items:center;width:100%;min-height:460px;overflow:hidden;border:1px solid rgba(221,183,111,.52);border-radius:13px;background:#05070d;transition:min-height .2s ease}
.preview-device.is-pc{min-height:355px}
.preview-summary{padding:15px 4px 10px;color:#fff}
.preview-summary span{display:block;margin-bottom:3px;color:#8999ad;font-size:10px;font-weight:700}
.preview-summary strong{display:block;font-size:14px;line-height:1.55}
.preview-options{margin:6px 0 14px;padding:18px 4px;border-top:1px solid rgba(255,255,255,.1)}
.preview-options-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:12px}
.preview-options-heading h2{margin:0;color:#fff;font-size:18px;line-height:1.4}
.preview-options-heading p{margin:0;color:#8e9cad;font-size:10px;font-weight:700}
.device-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 4px 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.device-switch button{min-width:0;min-height:54px;padding:7px 5px;border:1px solid rgba(255,255,255,.16);border-radius:11px;color:#b5c2d2;background:rgba(255,255,255,.04);font-size:11px;font-weight:800}
.device-switch button i{margin-right:4px;font-style:normal}
.device-switch button small{display:block;margin-top:2px;font-size:8px}
.device-switch button[aria-pressed="true"]{border-color:#68e5cd;color:#fff;background:#087664}
.preview-note{margin:12px 4px 2px;color:#8e9cad;font-size:10px;font-weight:600;line-height:1.65;text-align:center}

.catalog-editor{min-width:0}
.catalog-preview .catalog-editor{margin:8px 0 18px;padding:24px 4px 4px;border-top:1px solid rgba(255,255,255,.1)}
.catalog-preview .catalog-editor-head h3{color:#fff}
.catalog-preview .catalog-editor .catalog-eyebrow{color:#66e2cb}
.catalog-preview .selection-group{color:var(--ink)}
.catalog-editor-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.catalog-editor-head h3{margin:0;font-size:27px;line-height:1.4}
.create-from-design:disabled{opacity:.45}
.design-handoff-note{margin:0 0 18px;color:#52634d;font-size:12px;line-height:1.8}
.design-handoff-note[hidden]{display:none}
.sample-cta-action-group{min-width:0;max-width:420px}
.sample-cta-action-group .design-handoff-note{margin:0 0 14px}
.sample-cta-action-group .sample-cta-actions{flex-wrap:wrap}
.site-refresh .catalog-editor-head .create-from-design.is-authenticated{display:inline-flex;max-width:100%}
.catalog-tabs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
.catalog-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:55px;padding:10px;border:1px solid #ccd9e5;border-radius:13px;color:#617086;background:#fff;font-size:15px;font-weight:900}
.catalog-tabs button span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eaf0f5;font:800 9px Georgia,serif}
.catalog-tabs button[aria-selected="true"]{border-color:var(--green);color:#fff;background:var(--green);box-shadow:0 9px 20px rgba(0,120,101,.16)}
.catalog-tabs button[aria-selected="true"] span{color:var(--green);background:#fff}
.selection-group{padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 15px 40px rgba(8,31,61,.06)}
.selection-heading{display:flex;align-items:flex-start;gap:13px;margin-bottom:20px}
.selection-heading>span{flex:0 0 40px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:var(--green);font:800 10px Georgia,serif}
.selection-heading>div{flex:1;min-width:0}
.selection-heading h3{margin:0 0 10px;font-size:21px}
.selection-heading p{margin:0;color:#718096;font-size:12px;font-weight:600}
.body-category-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 22px;padding:5px;border:1px solid #d8dfd0;border-radius:13px;background:#f0f3e9}
.body-category-switch button{min-width:0;min-height:44px;padding:8px 4px;border:1px solid transparent;border-radius:9px;color:#52634d;background:transparent;font-family:inherit;font-size:14px;font-weight:800;line-height:1.5}
.body-category-switch button:hover{background:#e4ebda}
.body-category-switch button[aria-pressed="true"]{border-color:#145d4c;color:#fff;background:#145d4c;box-shadow:0 3px 8px #145d4c18}
.body-category-switch button:focus-visible{outline:3px solid #b28a45;outline-offset:2px}
.catalog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.catalog-card{min-width:0;padding:0;overflow:hidden;border:2px solid #dbe4ec;border-radius:14px;color:var(--ink);background:#f8fafc;text-align:left;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.catalog-card:hover{transform:translateY(-2px);border-color:#9dc8bd}
.catalog-card[data-selected="true"]{border-color:var(--green);background:#edf9f6;box-shadow:0 8px 22px rgba(0,120,101,.13)}
.catalog-card-select{display:block;width:100%;padding:0;border:0;color:inherit;background:transparent;text-align:inherit;font:inherit}
.catalog-card-select:focus-visible,.variation-button:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.catalog-card-variations{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 12px}
.catalog-card-image{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;height:132px;overflow:hidden;background:#edf2f6}
.catalog-card-image::after{position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(7,26,60,.1));content:""}
.catalog-card-image img{position:relative;z-index:1;display:block;width:88%;height:92%;min-width:0;min-height:0;max-width:88%;max-height:92%;object-fit:contain}
.catalog-card.is-stage .catalog-card-image img{width:100%;max-width:none;height:100%;max-height:none;object-fit:cover}
.catalog-card-copy{display:block;padding:12px 10px 8px}
.catalog-card-copy strong{display:block;margin:0;font-size:14px;line-height:1.45}
.variation-button{min-width:44px;min-height:44px;max-width:100%;padding:7px 8px;overflow-wrap:anywhere;border:1px solid #ccd9e5;border-radius:999px;color:#23334d;background:#fff;font-size:12px;font-weight:800}
.variation-button[aria-pressed="true"]{border-color:var(--green);color:#fff;background:var(--green)}
.variation-button:disabled{cursor:default;color:#718096;background:#eef2f5}
.catalog-pagination{display:grid;grid-template-columns:minmax(94px,auto) 1fr minmax(94px,auto);align-items:center;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid #d8dfd0}
.catalog-pagination[hidden]{display:none}
.catalog-pagination button{min-height:42px;padding:8px 15px;border:1px solid #ccd8e3;border-radius:999px;color:var(--ink);background:#fff;font-size:12px;font-weight:900}
.catalog-pagination button:hover:not(:disabled){border-color:var(--green);color:var(--green);background:#f0f8f6}
.catalog-pagination button:disabled{color:#9aa5b4;background:#eef2f5;opacity:.68}
.catalog-pagination span{text-align:center;color:var(--muted);font-size:12px;font-weight:800}
.catalog-error{margin:25px 0 0;padding:16px;border:1px solid #efb4b4;border-radius:12px;color:#b42020;background:#fff0f0;font-size:13px;font-weight:700}

.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.option-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-height:82px;padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:13px;color:#fff;background:rgba(255,255,255,.045);cursor:pointer;transition:border-color .18s ease,background .18s ease}
.option-card.has-number{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.option-main{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;min-width:0;cursor:pointer}
.option-main>input{position:absolute;width:1px;height:1px;opacity:0}
.option-card>input{position:absolute;width:1px;height:1px;opacity:0}
.option-switch{position:relative;width:48px;height:27px;border-radius:999px;background:#b9c5cf;box-shadow:inset 0 1px 3px rgba(0,0,0,.14)}
.option-switch::after{position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .18s ease;content:""}
.option-card:has(>input:checked){border-color:#68e5cd;background:rgba(8,118,100,.32)}
.option-card:has(.option-main>input:checked){border-color:#68e5cd;background:rgba(8,118,100,.32)}
.option-card>input:checked+.option-switch{background:var(--green)}
.option-main>input:checked+.option-switch{background:var(--green)}
.option-card>input:checked+.option-switch::after{transform:translateX(21px)}
.option-main>input:checked+.option-switch::after{transform:translateX(21px)}
.option-card strong{display:block;margin-bottom:3px;font-size:13px}
.option-card small{display:block;color:#aebbc9;font-size:9px;font-weight:600;line-height:1.55}
.option-number{display:flex;align-items:center;overflow:hidden;border:1px solid #ccd8e3;border-radius:9px;background:#fff}
.option-number input{width:58px;height:42px;padding:7px;border:0;color:var(--ink);background:transparent;text-align:center;font-weight:900}
.option-number b{padding-right:10px;font-size:11px}

.sample-cta{padding:82px 0;background:#f4f8fb}
.sample-cta-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.sample-cta h2{margin:0;font-size:clamp(31px,4vw,45px);line-height:1.4;letter-spacing:-.04em}
.sample-cta p:not(.catalog-eyebrow){margin:14px 0 0;color:var(--muted);font-size:14px;font-weight:600;line-height:1.8}
.sample-cta-actions{display:flex;gap:10px}
.sample-cta-actions a,.sample-cta-actions button{min-width:170px}
.back-to-preview{position:fixed;right:16px;bottom:18px;z-index:50;display:none;align-items:center;gap:7px;min-height:44px;padding:9px 14px;border:0;border-radius:999px;color:#fff;background:rgba(0,120,101,.88);box-shadow:0 9px 24px rgba(7,26,60,.25);font-size:11px;font-weight:900}

@media(max-width:920px){
  .catalog-preview-column{width:min(100%,680px)}
  .catalog-intro{white-space:normal}
  .preview-device{min-height:500px}
  .preview-device.is-pc{min-height:370px}
  .option-grid{grid-template-columns:1fr}
  .sample-cta-inner{grid-template-columns:1fr}
  .sample-cta-actions{justify-content:flex-start}
  .back-to-preview.is-visible{display:flex}
}

@media(max-width:760px){
  .catalog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  .catalog-shell{width:min(calc(100% - 24px),1180px)}
  .desktop-only{display:none}
  .catalog-hero{padding:24px 0 58px}
  .sample-breadcrumb{margin-bottom:27px}
  .catalog-hero h1{font-size:clamp(43px,13vw,61px)}
  .catalog-lead{font-size:14px}
  .catalog-section{padding:62px 0 72px}
  .catalog-intro{margin-bottom:26px;font-size:13px;white-space:normal}
  .catalog-preview{padding:10px;border-radius:17px}
  .preview-device{min-height:0}
  .preview-device.is-pc{min-height:0}
  .catalog-editor-head{align-items:flex-end}
  .catalog-editor-head h3{font-size:22px}
  .catalog-editor-head .create-from-design{display:none}
  .catalog-tabs button{font-size:13px}
  .selection-group{padding:21px 17px;border-radius:15px}
  .catalog-card-grid{grid-template-columns:1fr}
  .catalog-card-image{height:125px}
  .catalog-card-copy{padding:12px}
  .option-grid{grid-template-columns:1fr}
  .sample-cta{padding:65px 0}
  .sample-cta-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .sample-cta-actions a,.sample-cta-actions button{min-width:0}
}

@media(max-width:430px){
  .catalog-card-copy strong{font-size:14px}
  .preview-options-heading{align-items:start;flex-direction:column;gap:3px}
  .device-switch button{font-size:10px}
  .option-card.has-number{grid-template-columns:1fr}
  .option-card.has-number .option-number{margin-left:62px;justify-self:start}
}

@media(max-width:350px){
  .catalog-tabs{grid-template-columns:1fr}
  .catalog-card-image{height:150px}
  .catalog-pagination{grid-template-columns:1fr 1fr}
  .catalog-pagination span{grid-column:1/-1;grid-row:1}
  .sample-cta-actions{grid-template-columns:1fr}
}


.catalog-preview>.catalog-editor:first-child{margin-top:0;padding-top:12px;border-top:0}
.selection-preview{scroll-margin-top:90px}
.catalog-preview-column>.selection-preview{margin-bottom:24px}
.site-refresh .catalog-preview{position:relative;overflow:visible}
.site-refresh .catalog-preview::before{content:"";position:absolute;top:-10px;left:calc(50% - 10px);width:18px;height:18px;border-top:1px solid #bdc9b1;border-left:1px solid #bdc9b1;background:#fffdf7;transform:rotate(45deg);pointer-events:none}
.catalog-step-number{display:inline-block;margin-right:6px;color:#82683e;font:800 .7em Georgia,serif}
.site-refresh .catalog-editor-head h3{font-size:clamp(18px,2.6vw,25px);line-height:1.6}

/* A small settings illustration, not an embedded game screen. */
.selection-preview{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:26px;row-gap:12px;align-items:center;padding:16px;background:#f0f3e9;border:1px solid #dce2d1;border-radius:10px}
.selection-preview .preview-device{grid-row:1/3;position:relative;display:block;width:100%;min-height:0;border:0;border-radius:7px;background:transparent;overflow:hidden;touch-action:pan-y pinch-zoom}
.preview-viewport{width:100%;aspect-ratio:3/4;overflow:hidden}
.preview-composition{position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none}
.preview-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.preview-body{position:absolute;left:7%;bottom:10%;width:86%;height:80%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 3px #0002)}
.preview-image-label{position:absolute;bottom:0;left:0;right:0;padding:3px;color:#fff;background:#18372ac9;text-align:center;font-size:10px;pointer-events:none}
.selection-preview .preview-summary{padding:0;align-self:end}
.selection-preview .preview-summary>span{font-size:11px;margin-bottom:6px}
.selection-preview .preview-summary strong{font-size:16px;line-height:1.7;overflow-wrap:anywhere}
.preview-static-note{margin:8px 0 0;color:#69755f;font-size:12px;line-height:1.7}
.preview-launch{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:0;align-self:start}
.preview-launch small{font-size:11px;line-height:1.8;color:#697463}
.preview-launch .button{max-width:100%;min-height:46px;font-size:14px}
.preview-launch .button:disabled{opacity:.5;cursor:default}
.preview-launch .preview-launch-error{margin:0;padding:10px;font-size:12px;color:#a32c28;background:#fff0ec;border-radius:8px}
.preview-launch [hidden]{display:none}
@media(max-width:580px){
 .selection-preview{grid-template-columns:96px minmax(0,1fr);column-gap:14px;row-gap:16px;padding:12px}
 .selection-preview .preview-device{grid-row:1}
 .selection-preview .preview-summary{align-self:center}
 .selection-preview .preview-summary strong{font-size:13px;line-height:1.65}
 .selection-preview .preview-summary>span{font-size:10px}
 .preview-static-note{font-size:11px}
 .preview-launch{grid-column:1/-1;align-items:stretch}
 .preview-launch .button{width:100%;font-size:13px;padding-inline:8px}
 .preview-launch small{text-align:center;font-size:10px}
}


/* Keep the two setting steps legible and the trial action within reach. */
.catalog-tabs button span{font-family:inherit;font-size:11px;font-weight:800;flex-shrink:0}
.selection-heading>span{font-family:inherit;font-size:12px;font-weight:800}
.site-refresh .selection-heading h3{margin-bottom:6px}
.site-refresh .selection-heading p{font-size:12px;line-height:1.7;color:#69755f}
.site-refresh .preview-options-heading{align-items:flex-start;flex-direction:column;gap:8px}
.site-refresh .preview-options-heading h2{font-size:clamp(18px,2.6vw,25px);line-height:1.6}
.optional-label{display:inline-block;vertical-align:middle;margin-left:5px;padding:2px 8px;border:1px solid #d6ddcc;border-radius:999px;color:#69755f;font:600 11px/1.7 system-ui,sans-serif}
.site-refresh .preview-options-heading p{font-size:12px;line-height:1.7;font-weight:500}
.preview-finish{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 8px 12px;border-top:1px solid #dce2d1;text-align:center}
.preview-finish>p{margin:0;color:#52634d;font-size:13px;line-height:1.8}
.preview-finish .button{max-width:100%;min-height:48px;font-size:14px}
.preview-finish .button:disabled{opacity:.5}
.preview-finish .preview-launch-error{padding:10px;border-radius:8px;color:#a32c28;background:#fff0ec;font-size:12px}
.preview-finish [hidden]{display:none}
.option-card:has(input:focus-visible){outline:3px solid #a18440;outline-offset:3px}
@media(max-width:580px){.preview-finish .button{width:100%;padding-inline:8px;font-size:13px}}


/* Pair the sample and creation actions at both ends of the settings. */
.preview-action-buttons{display:flex;flex-wrap:wrap;gap:10px;width:100%;max-width:570px}
.preview-action-buttons .button{flex:1 1 220px;min-width:0;min-height:48px;padding:12px 16px;font-size:13px;line-height:1.6;text-align:center}
.preview-launch .design-handoff-note,.preview-finish .design-handoff-note{margin:0;color:#52634d;font-size:11px;line-height:1.8}
.preview-action-buttons .create-from-design{display:inline-flex}
@media(max-width:580px){.preview-action-buttons{flex-direction:column}.preview-action-buttons .button{flex:none;width:100%}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}