@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root {
  /* Brand primaries */
  --op-ink-700:   #202028;   /* default text, primary button bg, logo outline */
  --op-navy-700:  #182848;   /* tagline, links, branded headings, dark hero bg */
  --op-navy-600:  #25386A;   /* card footer links, hyperlinks */
  --op-gold-500:  #F0C070;   /* CTA button, focus ring, active icon tint */
  --op-gold-600:  #B88322;   /* gold-as-text, ghost hover, checkbox accent */

  /* Surfaces — light mode */
  --bg-1:           #FBFAF7;   /* alias: --op-paper-050 — default app background */
  --op-paper-050:   #FBFAF7;
  --bg-2:           #F6F4EE;   /* alias: --op-paper-100 — recessed surface, input bg hover */
  --op-paper-100:   #F6F4EE;
  --op-paper-200:   #ECE8DD;   /* dividers, skeleton */
  --bg-inverse:     #202028;   /* dark hero, footer, code blocks */

  /* Borders */
  --border-1:       #E4E0D3;   /* default border for inputs, cards */

  /* Foreground aliases */
  --fg-1:           #202028;   /* primary text */
  --fg-2:           #3E4653;   /* secondary text */
  --fg-3:           #5B6472;   /* captions */
  --fg-on-dark:     #FBFAF7;   /* text on dark bg */
  --fg-on-gold:     #202028;   /* text on gold bg */
  --fg-brand:       #182848;   /* branded copy (navy on light; flip to --op-gold-500 in dark mode) */
  --fg-accent:      #B88322;   /* gold as text */
  --fg-link:        #25386A;   /* hyperlinks */

  /* Semantic — success */
  --op-success-bg:     #E4F3EB;
  --op-success-fg:     #1F6744;
  --op-success-border: #C8E3D4;

  /* Semantic — warning */
  --op-warning-bg:     #FBEED4;
  --op-warning-fg:     #7A5110;
  --op-warning-border: #F0DFB6;

  /* Semantic — danger */
  --op-danger-bg:  #FADFD8;
  --op-danger-fg:  #7A2B1C;
  --op-danger:     #B8432E;   /* invalid border / error text */

  /* Semantic — info */
  --op-info-bg:     #E2EAF5;
  --op-info-fg:     #182848;
  --op-info-border: #CBD8EA;

  /* Semantic — gold / new */
  --op-gold-new-bg:     #FDF3E3;
  --op-gold-new-fg:     #6B4A10;
  --op-gold-new-border: #F8DCAC;
  --op-gold-100:        #FDF3E3;   /* alias — select selected option, gold badge */
  --op-gold-300:        #F8DCAC;   /* selection highlight */

  /* Spacing — 4pt grid */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;
  --sp-4: 16px;   --sp-5: 20px;   --sp-6: 24px;
  --sp-8: 32px;   --sp-10: 40px;  --sp-12: 48px;
  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs:        0 1px 2px rgba(32,32,40,0.06);
  --shadow-sm:        0 2px 6px rgba(32,32,40,0.07), 0 1px 2px rgba(32,32,40,0.05);
  --shadow-md:        0 6px 18px -4px rgba(32,32,40,0.12), 0 2px 6px rgba(32,32,40,0.06);
  --shadow-lg:        0 20px 40px -12px rgba(32,32,40,0.18), 0 4px 10px rgba(32,32,40,0.06);
  --shadow-xl:        0 32px 64px -16px rgba(32,32,40,0.22);
  --shadow-glow-gold: 0 0 0 1px rgba(240,192,112,0.5), 0 8px 24px -6px rgba(240,192,112,0.45);
  --shadow-inset:     inset 0 1px 0 rgba(255,255,255,0.5);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--op-paper-050);color:var(--op-ink-700);font-family:'Inter Tight',Arial,sans-serif;line-height:1.5}
body.panel-open{overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:var(--op-navy-600)}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--op-gold-500);outline-offset:3px}
[hidden]{display:none!important}
.shell{width:min(100% - 48px,1320px);margin-inline:auto}
.skip-link{position:absolute;top:-60px;left:16px;z-index:100;padding:10px 16px;background:var(--op-gold-500);color:var(--op-ink-700)}
.skip-link:focus{top:12px}
.site-header{position:relative;z-index:10;background:var(--op-paper-050);border-bottom:1px solid var(--border-1)}
.header-inner{min-height:78px;display:flex;align-items:center;gap:44px}
.brand{display:inline-flex;align-items:center;flex:none;min-height:61px;text-decoration:none}
.brand-logo{display:block;width:210px;height:auto}
.site-header nav{display:flex;align-items:center;gap:26px;align-self:stretch}
.site-header nav a{display:inline-flex;align-items:center;position:relative;color:var(--fg-2);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.site-header nav a:hover,.site-header nav .nav-active{color:var(--op-navy-700)}
.nav-active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;border-radius:3px;background:var(--op-gold-500)}
.bucket-button,.back-button{display:inline-flex;align-items:center;gap:10px;margin-left:auto;padding:11px 14px;min-height:44px;border:1px solid var(--op-navy-700);border-radius:10px;background:var(--op-navy-700);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.bucket-button:hover,.back-button:hover{background:var(--op-navy-600)}
.bucket-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:50%;background:var(--op-gold-500);color:var(--op-ink-700);font-size:11px}
.hero,.credits-hero{overflow:hidden;background:var(--op-navy-700);color:#fff}
.hero-layout{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:48px;min-height:468px;padding-block:66px 72px}
.eyebrow{margin:0 0 12px;color:var(--op-gold-600);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.eyebrow.light{color:var(--op-gold-500)}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.045em}
h1{max-width:690px;margin-bottom:18px;font-size:clamp(46px,5.1vw,75px);line-height:1.06}
.hero-copy{max-width:580px;margin-bottom:26px;color:#dbe2f0;font-size:17px;line-height:1.6}
.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:12px 18px;border:1px solid transparent;border-radius:10px;font-weight:700;text-decoration:none}
.button-gold{background:var(--op-gold-500);color:var(--op-ink-700)}
.button-gold:hover{background:#ffd692}
.button-dark{background:var(--op-navy-700);color:#fff}
.button-dark:hover{background:var(--op-navy-600)}
.button-outline{background:#fff;border-color:var(--border-1);color:var(--op-navy-700)}
.button-outline:hover{border-color:var(--op-navy-700)}
.text-link{font-weight:700;text-decoration:none}
.light-link{color:#f6f2e9}
.light-link:hover{text-decoration:underline}
.hero-visual{position:relative;height:305px;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:var(--op-paper-100);box-shadow:0 22px 55px rgba(0,0,0,.23)}
.hero-landscape{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero-ground{position:absolute;right:0;bottom:0;left:0;height:62px;background:url('https://br-wild-tooth-b3a467t5.storage.c-4.ap-southeast-1.aws.neon.tech/game-assets/Nature%20Platformer%20Illustrated/Files/png/Tiles/1.png') repeat-x center top/62px 62px}
.hero-cat{position:absolute;bottom:50px;left:45%;width:auto;height:150px;filter:drop-shadow(0 8px 5px rgba(32,32,40,.18))}
.hero-bush{position:absolute;bottom:52px;left:15%;width:128px;height:auto}
.hero-mushroom{position:absolute;right:18%;bottom:54px;width:48px;height:auto}
.visual-label{position:absolute;bottom:14px;left:16px;padding:8px 12px;border:1px solid rgba(255,255,255,.24);border-radius:7px;background:rgba(24,40,72,.86);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.starter-section,.library-section,.credits-body{padding-block:66px 76px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}
.section-heading h2,.credits-heading h2{margin-bottom:8px;color:var(--op-navy-700);font-size:clamp(32px,3vw,43px);line-height:1.14}
.section-heading p:not(.eyebrow),.credits-heading p:not(.eyebrow){max-width:650px;margin-bottom:0;color:var(--fg-2);font-size:15px}
.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.collection-card{display:grid;grid-template-columns:43% minmax(0,1fr);width:100%;min-height:220px;padding:0;overflow:hidden;border:1px solid var(--border-1);border-radius:15px;background:#fff;box-shadow:var(--shadow-xs);font:inherit;text-align:left;cursor:pointer}
.collection-card:hover{border-color:var(--op-gold-500);box-shadow:var(--shadow-sm)}
.collection-card:focus-visible{outline:3px solid var(--op-gold-500);outline-offset:3px}
.collection-image{position:relative;display:grid;place-items:center;min-height:220px;padding:12px;background:var(--op-paper-100)}
.collection-image img{width:100%;height:190px;object-fit:contain}
.collection-image span{position:absolute;bottom:9px;left:9px;right:9px;padding:6px 8px;border-radius:5px;background:var(--op-paper-050);color:var(--fg-2);font-size:10px;font-weight:700}
.collection-card-body{display:flex;flex-direction:column;min-width:0;padding:19px}
.collection-heading{display:flex;align-items:start;justify-content:space-between;gap:9px}
.collection-title{color:var(--op-navy-700);font-size:19px;font-weight:700;line-height:1.2}
.difficulty{flex:none;padding:5px 7px;border-radius:5px;background:var(--op-success-bg);color:var(--op-success-fg);font-size:10px;font-weight:700}
.difficulty-2{background:var(--op-warning-bg);color:var(--op-warning-fg)}
.difficulty-3{background:var(--op-danger-bg);color:var(--op-danger-fg)}
.collection-card p{margin-bottom:9px;color:var(--fg-2);font-size:13px;line-height:1.45}
.collection-card .familiar-example{margin-top:9px;color:var(--op-navy-700);font-size:14px;font-weight:700}
.collection-loop{margin-top:9px;color:var(--fg-2);font-size:13px;line-height:1.4}
.collection-action{margin-top:auto;padding-top:18px;color:var(--op-navy-600);font-size:13px;font-weight:700}
.collection-card:hover .collection-action{text-decoration:underline}
.collection-card .difficulty-reason{color:var(--fg-3);font-size:12px}
.collection-card .collection-view{color:var(--op-navy-700);font-size:11px;font-weight:700}
.collection-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.collection-foot button{min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--op-navy-600);font-size:13px;font-weight:700;text-align:left}
.collection-foot button:hover{text-decoration:underline}
.collection-foot a{font-size:11px;white-space:nowrap}
.featured-section{padding-block:18px 76px}
.featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.featured-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-1);border-radius:14px;background:#fff;box-shadow:var(--shadow-xs)}
.featured-card:hover{border-color:var(--op-gold-500);box-shadow:var(--shadow-sm)}
.featured-thumb{display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;height:170px;padding:12px;border:0;border-bottom:1px solid var(--border-1);background:var(--op-paper-100);cursor:pointer}
.featured-thumb img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.featured-card-body{display:flex;flex:1;flex-direction:column;padding:17px}
.featured-label{align-self:start;padding:5px 8px;border-radius:5px;background:var(--op-gold-100);color:var(--op-gold-new-fg);font-size:11px;font-weight:700}
.featured-card h3{margin:11px 0 7px;color:var(--op-navy-700);font-size:18px}
.featured-includes{margin:0;color:var(--fg-2);font-size:13px;line-height:1.45}
.featured-note{margin:9px 0 0;color:var(--fg-3);font-size:12px;line-height:1.4}
.featured-card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:18px}
.featured-card-actions button{min-height:38px;padding:8px 10px;border:1px solid var(--border-1);border-radius:7px;background:#fff;color:var(--op-navy-700);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.featured-card-actions button:last-child{border-color:var(--op-navy-700);background:var(--op-navy-700);color:#fff}
.featured-card-actions button:hover{border-color:var(--op-gold-600)}
.featured-card-actions button:focus-visible,.featured-thumb:focus-visible{outline:3px solid var(--op-gold-500);outline-offset:2px}
.library-section{padding-top:18px}
.result-count{padding-bottom:4px;color:var(--op-navy-700)!important;font-weight:700;white-space:nowrap}
.library-layout{display:grid;grid-template-columns:258px minmax(0,1fr);align-items:start;gap:23px}
.filters{position:sticky;top:18px;padding:20px;border:1px solid var(--border-1);border-radius:14px;background:#fff;box-shadow:var(--shadow-xs)}
.filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.filters-head h3{margin:0;color:var(--op-navy-700);font-size:17px}
.quiet-button{padding:6px;border:0;background:none;color:var(--op-navy-600);font-size:12px;font-weight:700;text-decoration:underline}
.field-label{display:block;margin:16px 0 7px;color:var(--fg-2);font-size:12px;font-weight:700}
.filters input[type=search],.filters select,.credits-search-label input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border-1);border-radius:9px;background:#fff;color:var(--op-ink-700);font-size:13px}
.filters input[type=search]::placeholder{color:#7b818b}
.check-group{display:grid;gap:11px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border-1)}
.check-group label{display:flex;align-items:start;gap:9px;color:var(--fg-2);font-size:13px;cursor:pointer}
.check-group input{width:17px;height:17px;accent-color:var(--op-navy-700)}
.filter-note{margin-top:25px;padding:14px;border-radius:9px;background:var(--op-paper-100);font-size:12px}
.filter-note strong{color:var(--op-navy-700)}
.filter-note p{margin:5px 0 0;color:var(--fg-3)}
.results-top{display:flex;justify-content:space-between;gap:12px;margin:2px 0 12px;color:var(--fg-3);font-size:12px}
.results-top span:first-child{color:var(--op-navy-700);font-weight:700}
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.pack-card{overflow:hidden;border:1px solid var(--border-1);border-radius:14px;background:#fff;box-shadow:var(--shadow-xs)}
.pack-card:hover{border-color:#c5bdab;box-shadow:var(--shadow-md);transform:translateY(-2px);transition:transform var(--dur-base),box-shadow var(--dur-base)}
.pack-thumb{position:relative;display:block;overflow:hidden;width:100%;height:176px;padding:0;border:0;border-bottom:1px solid var(--border-1);background:linear-gradient(135deg,#ece8db,#f8f6ee)}
.pack-thumb img{position:absolute;top:16px;left:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;image-rendering:pixelated}
.pack-thumb .thumb-label{position:absolute;bottom:10px;left:10px;padding:4px 7px;border-radius:5px;background:rgba(255,255,255,.92);color:var(--op-navy-700);font-size:10px;font-weight:700}
.pack-card-body{padding:14px 15px 16px}
.pack-card-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.pill{display:inline-flex;align-items:center;min-height:23px;padding:3px 7px;border-radius:5px;background:var(--op-paper-100);color:var(--fg-2);font-size:10px;font-weight:700}
.pill.gold{background:var(--op-gold-100);color:#674611}
.pack-card h3{margin-bottom:5px;color:var(--op-navy-700);font-size:16px;line-height:1.28}
.pack-card p{min-height:38px;margin-bottom:12px;color:var(--fg-3);font-size:12px;line-height:1.5}
.pack-card-foot{display:flex;align-items:center;justify-content:space-between;gap:7px;padding-top:11px;border-top:1px solid var(--border-1)}
.pack-card-foot span{color:var(--fg-3);font-size:11px}
.pack-card-foot button{padding:6px 0 6px 6px;border:0;background:none;color:var(--op-navy-600);font-size:12px;font-weight:700}
.pack-card-foot button:hover{text-decoration:underline}
.empty-state{padding:36px;border:1px dashed var(--border-1);border-radius:13px;background:#fff;color:var(--fg-2);text-align:center}
.site-footer{background:var(--op-ink-700);color:#fff}
.footer-inner{display:flex;justify-content:space-between;gap:20px;padding-block:39px}
.footer-inner strong{font-family:'Playfair Display',Georgia,serif;font-size:25px}
.footer-inner p{margin:4px 0 0;color:#d4d6df;font-size:13px}
.footer-inner>div:last-child{display:flex;align-items:end;flex-direction:column;gap:8px;color:#d4d6df;font-size:12px}
.footer-inner a{color:var(--op-gold-500);font-weight:700}
.overlay{position:fixed;inset:0;z-index:20;background:rgba(20,29,49,.56)}
.side-panel{position:fixed;z-index:21;top:0;right:0;bottom:0;width:min(100%,620px);background:var(--op-paper-050);box-shadow:-12px 0 40px rgba(0,0,0,.2)}
.bucket-panel{width:min(100%,510px)}
.guide-panel{width:min(100%,760px)}
.panel-top{display:flex;align-items:center;justify-content:space-between;height:69px;padding:0 26px;border-bottom:1px solid var(--border-1);background:#fff}
.panel-return{min-height:44px;padding:6px 0;border:0;background:transparent;color:var(--op-navy-700);font-size:13px;font-weight:700;cursor:pointer}
.panel-return:hover{text-decoration:underline}
.panel-kicker{color:var(--op-navy-700);font-size:14px;font-weight:700}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-1);border-radius:8px;background:#fff;color:var(--op-navy-700);font-size:25px;line-height:1}
.panel-scroll{height:calc(100% - 69px);overflow:auto;padding:25px 27px 36px}
.detail-title{display:flex;justify-content:space-between;gap:15px;align-items:start}
.detail-title h2{margin:4px 0 7px;color:var(--op-navy-700);font-size:34px;line-height:1.12}
.detail-title p{margin:0;color:var(--fg-3);font-size:13px}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin:19px 0 22px}
.detail-actions button{font-size:13px}
.preview-main{display:grid;place-items:center;height:260px;overflow:hidden;border:1px solid var(--border-1);border-radius:12px;background:linear-gradient(135deg,#e7e4d9,#f7f5ec)}
.preview-main img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
.preview-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;color:var(--fg-3);font-size:12px}
.preview-caption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-caption a{flex:none;font-weight:700}
.image-gallery-section{margin-top:23px}
.image-gallery-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.image-gallery-head h3{margin:0;color:var(--op-navy-700);font-size:17px}
.image-gallery-head span{color:var(--fg-3);font-size:12px}
#image-search{width:100%;min-height:44px;margin-bottom:12px;padding:9px 11px;border:1px solid var(--border-1);border-radius:8px;background:#fff;color:var(--op-ink-700);font-size:13px}
.image-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.image-tile{min-width:0;min-height:114px;padding:6px;border:1px solid var(--border-1);border-radius:8px;background:#fff;color:var(--fg-2);text-align:left}
.image-tile:hover,.image-tile.selected{border-color:var(--op-gold-600);box-shadow:0 0 0 1px var(--op-gold-600)}
.image-tile img{width:100%;height:74px;object-fit:contain;image-rendering:pixelated;background:var(--op-paper-100)}
.image-tile span{display:block;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.image-empty{margin:13px 0;color:var(--fg-3);font-size:13px}
#show-all-images{margin-top:10px}
.detail-section{margin-top:26px;padding-top:20px;border-top:1px solid var(--border-1)}
.detail-section h3{margin-bottom:10px;color:var(--op-navy-700);font-size:17px}
.detail-section p{margin-bottom:0;color:var(--fg-2);font-size:13px}
.detail-facts{display:flex;gap:7px;flex-wrap:wrap}
.detail-facts .pill{font-size:11px}
.file-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.file-controls input{width:min(100%,240px);min-height:38px;padding:7px 9px;border:1px solid var(--border-1);border-radius:7px;font-size:12px}
.file-list{max-height:360px;overflow:auto;border:1px solid var(--border-1);border-radius:9px;background:#fff}
.file-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border-1);font-size:11px}
.file-row:last-child{border-bottom:0}
.file-row img{width:33px;height:33px;flex:none;object-fit:contain;image-rendering:pixelated;background:#f4f1e8}
.file-row .file-preview-button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:4px;border:1px solid var(--border-1);border-radius:6px;background:#f4f1e8}
.file-row .file-preview-button:hover{border-color:var(--op-navy-700)}
.file-row .file-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .file-size{color:var(--fg-3);white-space:nowrap}
.file-row button{min-width:44px;min-height:33px;padding:4px 6px;border:1px solid var(--border-1);border-radius:6px;background:#fff;color:var(--op-navy-700);font-size:11px;font-weight:700}
.file-row button:hover{background:var(--op-gold-100)}
.source-link{display:inline-block;margin-top:9px;font-weight:700}
.guide-title h2{margin:4px 0 8px;color:var(--op-navy-700);font-size:34px;line-height:1.12}
.guide-title p:last-child{color:var(--fg-2);font-size:13px}
.guide-choices{display:grid;gap:16px;margin:22px 0}
.guide-choices fieldset{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;border:0}
.guide-choices legend{width:100%;margin-bottom:9px;color:var(--op-navy-700);font-size:15px;font-weight:700}
.guide-choices fieldset>p{margin:0;color:var(--fg-3);font-size:13px}
.choice-chip{position:relative;cursor:pointer}
.choice-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice-chip span{display:block;min-height:44px;padding:10px 14px;border:1px solid var(--border-1);border-radius:8px;background:#fff;color:var(--fg-2);font-size:13px;font-weight:700}
.choice-chip input:checked+span{border-color:var(--op-navy-700);background:var(--op-info-bg);color:var(--op-navy-700)}
.choice-chip input:focus-visible+span{outline:3px solid var(--op-gold-500);outline-offset:3px}
.guide-view-note,.guide-next-step{padding:13px;border-radius:8px;background:var(--op-paper-100);color:var(--fg-2);font-size:13px}
.guide-asset-heading{margin-top:28px}
.guide-asset-heading h3{color:var(--op-navy-700);font-size:21px}
.guide-asset-heading p{margin:5px 0 0;color:var(--fg-3);font-size:13px}
.guide-role{margin-top:21px;padding-top:18px;border-top:1px solid var(--border-1)}
.guide-role h4{margin:0 0 5px;color:var(--op-navy-700);font-size:16px}
.guide-role>p{margin:0 0 11px;color:var(--fg-3);font-size:12px}
.guide-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.guide-option{display:flex;align-items:center;gap:4px;min-width:0;padding:6px;border:1px solid var(--border-1);border-radius:9px;background:#fff}
.guide-option:has(input:checked){border-color:var(--op-navy-700);background:var(--op-info-bg)}
.guide-option label{display:flex;align-items:center;gap:8px;min-width:0;flex:1;cursor:pointer}
.guide-option input{width:19px;height:19px;flex:none;accent-color:var(--op-navy-700)}
.guide-option img{width:54px;height:54px;flex:none;object-fit:contain;image-rendering:pixelated;background:var(--op-paper-100)}
.guide-option label span{min-width:0}
.guide-option strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--op-navy-700);font-size:12px}
.guide-option small{display:block;margin-top:3px;color:var(--fg-3);font-size:10px}
.guide-option button{min-height:44px;padding:5px 8px;border:0;background:transparent;color:var(--op-navy-600);font-size:11px;font-weight:700}
.guide-option button:hover,.guide-back:hover{text-decoration:underline}
.guide-no-match{padding:11px;border-radius:8px;background:var(--op-warning-bg);color:var(--op-warning-fg)!important}
.guide-pack-preview{margin-top:23px;padding:15px;border:1px solid var(--border-1);border-radius:10px;background:#fff}
.guide-pack-preview>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide-pack-preview strong{color:var(--op-navy-700);font-size:13px}
.guide-pack-preview button,.guide-back{min-height:44px;border:0;background:transparent;color:var(--op-navy-600);font-size:12px;font-weight:700}
.guide-pack-preview img{display:block;width:100%;height:210px;margin-top:9px;object-fit:contain;image-rendering:pixelated;background:var(--op-paper-100)}
.guide-action-bar{position:sticky;bottom:-36px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:24px -27px 0;padding:13px 27px;border-top:1px solid var(--border-1);background:var(--op-paper-050);box-shadow:0 -7px 18px rgba(32,32,40,.08)}
.guide-action-bar span{color:var(--op-navy-700);font-size:13px;font-weight:700}
.guide-action-bar button:disabled{opacity:.55;cursor:not-allowed}
.guide-action-bar p{width:100%;margin:0;color:var(--op-danger-fg);font-size:12px}
.guide-action-bar p:empty{display:none}
.guide-example-credit{margin:17px 0 0;color:var(--fg-3);font-size:11px}
.guide-example-credit a{font-weight:700}
.bucket-intro{color:var(--fg-2);font-size:13px}
.bucket-profile{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:19px}
.bucket-profile label{color:var(--op-navy-700);font-size:12px;font-weight:700}
.bucket-profile select{display:block;width:100%;min-height:44px;margin-top:6px;padding:8px 10px;border:1px solid var(--border-1);border-radius:8px;background:#fff;color:var(--fg-1)}
.bucket-warning{padding:12px;border-radius:8px;background:var(--op-warning-bg);color:var(--op-warning-fg);font-size:12px}
.bucket-item-mismatch{border-color:var(--op-danger)}
.bucket-credit-note{margin:9px 0 0;color:var(--fg-3);font-size:11px}
.bucket-items{display:grid;gap:8px;margin:19px 0}
.bucket-item{display:flex;align-items:start;justify-content:space-between;gap:9px;padding:12px;border:1px solid var(--border-1);border-radius:9px;background:#fff}
.bucket-item strong{display:block;color:var(--op-navy-700);font-size:13px}
.bucket-item small{display:block;max-width:320px;margin-top:4px;color:var(--fg-3);font-size:11px;overflow-wrap:anywhere}
.bucket-item button{min-width:44px;min-height:36px;padding:5px 7px;border:0;background:none;color:#8c392e;font-size:11px;font-weight:700}
.bucket-summary{padding:16px;border-radius:10px;background:var(--op-paper-100);font-size:13px}
.bucket-summary strong{color:var(--op-navy-700)}
.bucket-download{width:100%;margin-top:15px}
.bucket-download:disabled{opacity:.58;cursor:wait}
.download-status{margin:11px 0 0;color:var(--fg-2);font-size:12px}
.after-download{margin-top:20px;padding:18px;border:1px solid var(--border-1);border-radius:10px;background:var(--op-paper-100)}
.after-download h3{margin:0 0 10px;color:var(--op-navy-700);font-family:'Inter Tight',Arial,sans-serif;font-size:20px}
.after-download ol{margin:0 0 17px;padding-left:21px;color:var(--fg-2);font-size:13px;line-height:1.55}
.after-download li+li{margin-top:7px}
.after-download label{display:block;margin-bottom:7px;color:var(--op-navy-700);font-size:13px;font-weight:700}
.after-download textarea{display:block;box-sizing:border-box;width:100%;min-height:245px;padding:12px;border:1px solid var(--border-1);border-radius:8px;background:#fff;color:var(--fg-1);font:12px/1.55 Arial,sans-serif;resize:vertical}
.after-download button{width:100%;margin-top:10px}
.after-download [role=status]{min-height:18px;margin:7px 0 0;color:var(--fg-2);font-size:12px}
.toast{position:fixed;z-index:30;bottom:22px;left:50%;transform:translateX(-50%);max-width:min(90vw,520px);padding:12px 16px;border-radius:9px;background:var(--op-ink-700);color:#fff;font-size:13px;box-shadow:var(--shadow-lg)}
.credits-hero .shell{padding-block:64px 68px}
.credits-hero h1{font-size:clamp(48px,5vw,70px)}
.credits-hero p:last-child{max-width:710px;margin-bottom:0;color:#dbe2f0;font-size:17px}
.rights-card{display:grid;grid-template-columns:54px 1fr;gap:17px;margin-bottom:65px;padding:25px;border:1px solid #c8e3d4;border-radius:14px;background:#f0f8f3}
.rights-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#d6eddf;color:#1f6744;font-size:21px;font-weight:700}
.rights-card h2{margin-bottom:10px;color:var(--op-navy-700);font-family:'Inter Tight',Arial,sans-serif;font-size:21px;letter-spacing:-.02em}
.rights-card p{max-width:860px;margin-bottom:10px;color:var(--fg-2);font-size:14px}
.rights-card a{font-size:13px;font-weight:700}
.credits-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:24px}
.credits-search-label{width:250px;color:var(--fg-2);font-size:12px;font-weight:700}
.credits-search-label input{display:block;margin-top:7px}
.credits-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.credit-card{padding:17px 18px;border:1px solid var(--border-1);border-radius:11px;background:#fff}
.credit-card-head{display:flex;align-items:start;justify-content:space-between;gap:9px}
.credit-card h3{margin-bottom:2px;color:var(--op-navy-700);font-size:15px}
.credit-card p{margin:0;color:var(--fg-3);font-size:12px}
.credit-card a{display:inline-block;max-width:100%;margin-top:9px;font-size:12px;font-weight:700;overflow-wrap:anywhere}
.credit-card .pill{flex:none}
.example-credits{margin-top:70px}
@media(max-width:1100px){.pack-grid,.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-card{grid-template-columns:40% minmax(0,1fr)}}
@media(max-width:780px){.shell{width:min(100% - 32px,1320px)}.header-inner{gap:14px;flex-wrap:wrap;padding-block:11px}.brand{min-width:auto;font-size:17px}.site-header nav{order:3;width:100%;height:38px;gap:20px}.bucket-button,.back-button{margin-left:auto}.hero-layout{grid-template-columns:1fr;gap:28px;padding-block:45px}.hero-visual{height:220px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.library-layout{grid-template-columns:1fr}.filters{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:0 12px}.filters-head,.check-group,.filter-note{grid-column:1/-1}.section-heading{align-items:start}.credits-list{grid-template-columns:1fr}}
@media(max-width:520px){.shell{width:min(100% - 28px,1320px)}.site-header nav{justify-content:space-between}.site-header nav a{font-size:12px}.bucket-button{gap:5px;padding-inline:9px;font-size:12px}.hero-layout{padding-block:42px}.hero-visual{height:185px}.starter-section,.library-section,.credits-body{padding-block:44px}.featured-section{padding-block:0 44px}.section-heading{display:block}.section-heading h2,.credits-heading h2{font-size:33px}.collection-grid,.featured-grid,.pack-grid{grid-template-columns:1fr}.collection-card{display:block}.collection-image{min-height:180px}.collection-image img{height:170px}.filters{display:block}.results-top span:last-child{display:none}.pack-thumb{height:195px}.footer-inner{display:block}.footer-inner>div:last-child{align-items:start;margin-top:20px}.panel-scroll{padding:19px 16px 32px}.panel-top{padding-inline:14px}.preview-main{height:215px}.image-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.guide-options{grid-template-columns:1fr}.guide-action-bar{bottom:-32px;margin-inline:-16px;padding-inline:16px}.credits-heading{display:block}.credits-search-label{display:block;width:100%;margin-top:20px}.rights-card{grid-template-columns:1fr;padding:19px}}

@media(max-width:520px){.hero-ground{height:42px;background-size:42px 42px}.hero-cat{bottom:34px;left:42%;height:100px}.hero-bush{bottom:36px;left:10%;width:76px}.hero-mushroom{right:15%;bottom:37px;width:31px}.visual-label{bottom:8px;left:10px;padding:5px 8px;font-size:10px}}
@media(max-width:520px){.brand-logo{width:185px}}
@media(max-width:360px){.brand-logo{width:155px}.header-inner{gap:10px}}

img[src*="%20Illustrated"],img[src*="Racing%20Pack%202D"]{image-rendering:auto}