/* Shared cartoon pixel theme. Pattern drawing and printable charts keep their own colours. */
:root {
  --pixel-ink: #3b2e51;
  --pixel-purple: #7651d6;
  --pixel-cream: #fff8e7;
  --pixel-yellow: #ffdc78;
  --pixel-mint: #b9e4cc;
  --ink: #3b2e51;
  --muted: #756780;
  --border: #ded2ea;
  --bg: #fff8e7;
  --accent: #7651d6;
  --soft-shadow: 4px 4px 0 #e3d8ed;
}
body {
  color: var(--pixel-ink);
  background-color: var(--pixel-cream);
  background-image: radial-gradient(#cbbad5 0.7px, transparent 0.7px);
  background-size: 20px 20px;
}
.site-header { border-bottom: 2px solid var(--pixel-ink); }
.brand { color: var(--pixel-ink); letter-spacing: 0; }
.brand-icon { transform: none; }
.brand-icon i { border: 2px solid var(--pixel-ink); border-radius: 2px; box-shadow: none; }
.beta { border: 1px solid var(--pixel-ink); border-radius: 2px; background: var(--pixel-yellow); color: var(--pixel-ink); }
.site-header nav { gap: 14px; }
.site-header nav a { height: auto; min-height: 44px; padding: 8px 12px; border: 2px solid transparent; border-radius: 4px; color: #756780; }
.site-header nav a.nav-active { background: #e8ddff; color: #583493; border-color: var(--pixel-ink); box-shadow: 2px 2px 0 var(--pixel-ink); }
.privacy-dot { border-radius: 0; background: #448365; }
.privacy-pill { color: #52715c; }
.btn, .button {
  border: 2px solid var(--pixel-ink);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--pixel-ink);
  transition: transform 120ms, box-shadow 120ms, background-color 120ms;
}
.btn:hover, .button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pixel-ink); }
.btn:active, .button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pixel-ink); }
.btn-primary, .button.primary { background: var(--pixel-purple); color: #fff; }
.btn-primary:hover, .button.primary:hover { background: #6240be; }
.btn-secondary, .btn-outline, .button.secondary { background: #fffdf5; border-color: var(--pixel-ink); color: var(--pixel-ink); }
.btn-secondary:hover, .btn-outline:hover, .button.secondary:hover { background: #e8f5e9; }
.btn:disabled, .button:disabled { transform: none; box-shadow: 2px 2px 0 #a59aaf; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #7651d6; outline-offset: 4px; }
.panel { border: 2px solid #d0c2df; border-radius: 7px; box-shadow: 4px 4px 0 #e6dced; }
.form-field, .pattern-search-label input, .feedback-panel textarea { border: 2px solid #b4a3c5; border-radius: 4px; background: #fffefa; color: var(--pixel-ink); }
.beta-notice { color: #70617e; border-bottom: 1px dashed #b8a5ce; }
.beta-notice a { color: #5a398e; border: 1px solid #bba7d2; border-radius: 3px; background: #eee6fc; }
.mobile-studio-nav a { border-radius: 4px; }
.mobile-studio-nav a[aria-current=page] { background: #e8ddff; box-shadow: inset 0 0 0 2px #9a7abc; color: #56358a; }

/* The landing page is a small game window built around the original pixel cat. */
.discovery-hero {
  position: relative;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 54px;
  padding: 58px 18px 52px;
}
.discovery-hero .pixel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #765083;
  background: #fff0b8;
  border: 1px solid #c3a764;
  padding: 6px 11px;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 2px 2px 0 #e4c877;
}
.pixel-eyebrow > span { color: #8d5fc9; font-size: 17px; }
.discovery-hero h1 { font-size: clamp(38px, 4.4vw, 62px); font-weight: 900; line-height: 1.3; letter-spacing: -1.5px; margin: 21px 0 20px; }
.discovery-hero h1 span { color: #7651d6; text-shadow: 3px 3px 0 #ddcafa; }
.discovery-hero p { color: #756780; font-size: 15px; line-height: 1.95; }
.home-upload-card { max-width: 400px; margin-top: 27px; gap: 13px; }
.home-upload-card .btn { min-height: 60px; font-size: 17px; letter-spacing: 0.5px; border-radius: 4px; box-shadow: 5px 5px 0 var(--pixel-ink); }
.home-upload-card .btn:hover { box-shadow: 6px 6px 0 var(--pixel-ink); }
.home-upload-card > span { color: #81738c; font-size: 10px; }
.home-continue { color: #6b508a; font-size: 13px; margin-top: 14px; }
.pixel-start-steps { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 9px; margin: 17px 0 0; }
.pixel-start-steps li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #766580; }
.pixel-start-steps b { display: grid; place-items: center; width: 25px; height: 25px; background: #dcefdc; border: 1px solid #b8c9ad; font-family: ui-monospace, monospace; font-size: 11px; color: #527057; }
.pixel-start-steps li:nth-child(2) b { background: #eadbfb; border-color: #ccb5e5; color: #795495; }
.pixel-start-steps li:nth-child(3) b { background: #ffe2d0; border-color: #e5bda6; color: #9a6a4d; }
.discovery-preview {
  width: 100%;
  max-width: 470px;
  padding: 0;
  justify-self: center;
  transform: rotate(2deg);
  background: #fffdf4;
  border: 3px solid var(--pixel-ink);
  border-radius: 5px;
  box-shadow: 8px 8px 0 #c4a5df, 11px 11px 0 var(--pixel-ink);
}
.pixel-window-bar { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 8px 14px; background: #b9a0e4; border-bottom: 3px solid var(--pixel-ink); font: bold 12px ui-monospace, monospace; letter-spacing: 1px; }
.pixel-window-dots { display: flex; gap: 5px; }
.pixel-window-dots i { width: 11px; height: 11px; background: #fff0a5; border: 2px solid var(--pixel-ink); }
.pixel-window-dots i:nth-child(2) { background: #b9e4cc; }
.pixel-window-dots i:nth-child(3) { background: #f3afc1; }
.pixel-scene { position: relative; height: 340px; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; background: #e4dafb; }
.discovery-preview .pixel-scene canvas { position: relative; z-index: 2; width: 270px; max-width: 75%; height: auto; margin: 0 0 19px; background: none; image-rendering: pixelated; filter: drop-shadow(0 8px 0 #88739935); }
.pixel-ground { position: absolute; inset: auto 0 0; height: 48px; background: #a8d7ae; border-top: 3px solid #6f9a80; }
.pixel-ground::after { content: ''; position: absolute; top: 18px; left: 0; width: 100%; height: 15px; background: repeating-linear-gradient(90deg, transparent 0 23px, #86bd933e 23px 30px); }
.pixel-cloud { position: absolute; width: 62px; height: 18px; background: #fffdf5; filter: drop-shadow(3px 3px 0 #c3b2df); }
.pixel-cloud::before { content: ''; position: absolute; width: 36px; height: 15px; top: -12px; left: 12px; background: #fffdf5; }
.pixel-cloud-left { left: 35px; top: 62px; }
.pixel-cloud-right { right: 30px; top: 103px; transform: scale(0.8); }
.pixel-star { position: absolute; width: 6px; height: 24px; background: #f6bd4a; }
.pixel-star::after { content: ''; position: absolute; width: 24px; height: 6px; left: -9px; top: 9px; background: #f6bd4a; }
.pixel-star-left { top: 155px; left: 47px; transform: rotate(10deg); }
.pixel-star-right { top: 42px; right: 53px; transform: scale(0.7); }
.pixel-speech { position: absolute; z-index: 3; top: 30px; left: 25%; transform: rotate(-5deg); border: 2px solid var(--pixel-ink); padding: 8px 13px; background: #fff4bc; box-shadow: 3px 3px 0 #b8a4cf; font-size: 12px; font-weight: 750; }
.pixel-bloom { position: absolute; width: 9px; height: 9px; z-index: 3; bottom: 21px; background: #f8df83; box-shadow: -9px 0 #f397bd, 9px 0 #f397bd, 0 -9px #f397bd, 0 9px #f397bd; }
.pixel-bloom-left { left: 36px; }
.pixel-bloom-right { right: 38px; bottom: 28px; transform: scale(0.8); }
.pixel-preview-caption { padding: 17px 19px; border-top: 3px solid var(--pixel-ink); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pixel-preview-caption strong { font-size: 14px; }
.pixel-preview-caption > span { font-size: 10px; color: #8b7599; }

/* Original sample cards keep their direct entry into the existing creator. */
.pattern-discovery { padding: 25px 4px 28px; border-top: 2px dashed #cfbedc; }
.pattern-discovery-heading h2 { font-size: 26px; color: var(--pixel-ink); }
.pattern-discovery-heading h2::before { content: '✦'; color: #c58b22; margin-right: 10px; }
.pattern-discovery-heading p { color: #82718d; }
.pattern-search-label input { background: #fffdf6; min-height: 46px; box-shadow: 3px 3px 0 #e3d2e9; }
.pattern-categories button { border: 2px solid #ad96c1; border-radius: 4px; color: #6a527d; background: #fffcf5; min-height: 44px; }
.pattern-categories button[aria-pressed=true] { border-color: var(--pixel-ink); background: #b9e4cc; color: #315c46; box-shadow: 3px 3px 0 var(--pixel-ink); }
.pattern-search-status { color: #84718e; }
.pattern-library { gap: 24px; }
.pattern-card { border: 2px solid var(--pixel-ink); border-radius: 5px; box-shadow: 4px 4px 0 #c4afdb; }
.pattern-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #bca1d6; }
.pattern-card-image { background-color: #f1e4fc; background-image: linear-gradient(45deg, #ffffff44 25%, transparent 25%, transparent 75%, #ffffff44 75%), linear-gradient(45deg, #ffffff44 25%, transparent 25%, transparent 75%, #ffffff44 75%); background-position: 0 0, 10px 10px; background-size: 20px 20px; border-bottom: 2px solid var(--pixel-ink); }
.pattern-card:nth-child(3n+2) .pattern-card-image { background-color: #deefdf; }
.pattern-card:nth-child(3n) .pattern-card-image { background-color: #ffebca; }
.pattern-card h3 { color: var(--pixel-ink); }
.pattern-card-info p { color: #867390; }
.pattern-card .btn { background: #fff0b8; color: #5e4730; border: 1px solid #9d7b49; border-radius: 3px; box-shadow: 2px 2px 0 #b7915e; }
.home-secondary-links { gap: 24px; padding: 3px 4px 0; }
.home-secondary-links a { border: 2px solid #bca7cc; border-radius: 5px; background: #f8f0ff; box-shadow: 4px 4px 0 #e0d0eb; }
.home-secondary-links a:nth-child(2) { background: #edf6e7; }
.home-secondary-links a:nth-child(3) { background: #fff1d2; }
.home-secondary-links strong { color: #5b456f; }
.home-secondary-links span { color: #806c8b; }

/* The workspace uses quieter panels around the readable pattern canvas. */
.studio-shell-toolbar h1, .solid-intro h1, .feedback-intro h1 { color: var(--pixel-ink); text-shadow: 2px 2px 0 #e8d5f7; }
.studio-shell-toolbar a { color: #795992; }
.generation-state { border: 1px solid #d0c0e1; border-radius: 4px; }
.canvas-stage { border: 1px solid #dcd0e7; border-radius: 4px; background: #f7f4fa; }
.photo-quality { border: 1px solid #d5c3e6; border-radius: 5px; background: #faf5ff; }
.photo-quality-choices button, .photo-style-choices button, .view-mode-tab { border-radius: 4px; }
.photo-quality-choices button[aria-pressed=true], .photo-style-choices button[aria-pressed=true], .view-mode-tab.active { background: #e6d8fa; color: #613b8d; border-color: #9471b6; }
.simple-workspace-links a { border-radius: 4px; color: #6c4c88; background: #eee2fa; }
.stats-grid .stat { border-radius: 4px; }
.ai-redraw-dialog { border: 3px solid var(--pixel-ink); border-radius: 5px; box-shadow: 7px 7px 0 #b8a4d0; }
.feedback-storage-note, .solid-fit-note { border: 2px solid #cfba8c; border-radius: 5px; background: #fff0cc; }
footer { color: #8b7897; border-top-color: #d9c6e2; }

@media (max-width: 1150px) {
  .site-header nav { gap: 2px; }
  .site-header nav a { padding: 8px; }
  .discovery-hero { gap: 32px; padding: 42px 5px; }
  .pixel-scene { height: 300px; }
  .discovery-preview .pixel-scene canvas { width: 240px; }
  .pixel-preview-caption { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .discovery-hero { grid-template-columns: 1fr; padding: 30px 2px 35px; gap: 30px; }
  .discovery-hero .pixel-eyebrow { font-size: 10px; padding: 5px 8px; letter-spacing: 0.5px; }
  .discovery-hero h1 { font-size: clamp(32px, 8.4vw, 44px); line-height: 1.3; letter-spacing: -0.8px; margin: 17px 0 14px; }
  .discovery-hero p { font-size: 13px; }
  .home-upload-card { max-width: none; margin-top: 22px; }
  .home-upload-card .btn { font-size: 15px; min-height: 55px; }
  .home-upload-card > span { font-size: 9px; }
  .pixel-start-steps { gap: 11px; margin-top: 12px; }
  .pixel-start-steps li { font-size: 10px; gap: 5px; }
  .pixel-start-steps b { width: 23px; height: 23px; }
  .discovery-preview { display: block; max-width: 360px; transform: rotate(1deg); margin: 0 8px 4px 0; }
  .pixel-window-bar { min-height: 34px; font-size: 10px; padding: 6px 10px; }
  .pixel-scene { height: 230px; }
  .discovery-preview .pixel-scene canvas { width: 190px; margin-bottom: 13px; }
  .pixel-ground { height: 34px; }
  .pixel-cloud-left { top: 46px; left: 19px; transform: scale(0.7); }
  .pixel-cloud-right { top: 83px; right: 10px; transform: scale(0.6); }
  .pixel-star-left { top: 126px; left: 27px; transform: scale(0.7); }
  .pixel-star-right { top: 31px; right: 35px; transform: scale(0.6); }
  .pixel-speech { top: 21px; left: 29%; font-size: 10px; padding: 5px 8px; }
  .pixel-preview-caption { padding: 12px; }
  .pixel-preview-caption strong { font-size: 12px; }
  .pixel-preview-caption > span { font-size: 9px; }
  .pixel-bloom-left { left: 25px; bottom: 15px; transform: scale(0.7); }
  .pixel-bloom-right { right: 24px; bottom: 20px; transform: scale(0.6); }
  .pattern-discovery { padding: 24px 2px; }
  .pattern-discovery-heading h2 { font-size: 21px; }
  .pattern-discovery-heading h2::before { margin-right: 6px; }
  .pattern-discovery-heading p { font-size: 12px; line-height: 1.8; }
  .pattern-library { gap: 17px; padding-right: 4px; }
  .pattern-card-info { padding: 11px 10px; }
  .pattern-card h3 { font-size: 13px; }
  .pattern-card .btn { font-size: 10px; padding: 8px; }
  .home-secondary-links { gap: 15px; padding-right: 4px; }
  .panel { box-shadow: 3px 3px 0 #e6dced; }
  .preview-zoom-controls .btn { padding: 8px 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pixel-star-right { animation: pixel-twinkle 4s steps(2, end) infinite; }
  @keyframes pixel-twinkle { 50% { opacity: 0.45; } }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .button, .pattern-card { transition: none; }
}
@media print {
  body { background: #fff; }
  .panel, .btn, .button { box-shadow: none; }
}

/* A direct return to the work library on small screens. */
.mobile-works-link{display:none!important}
@media(max-width:760px){.mobile-works-link{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;flex-shrink:0;font-size:12px;padding:8px 12px}}