/* The site owns navigation, Hero, page width and footer; card controls stay scoped. */
.ic-page { margin:0; font-size:14px; line-height:1.65; --ic-accent:var(--ipkk-accent); --ic-border:var(--ipkk-line); --ic-secondary:#475e6e; --ic-muted:#607583; }
.ic-page *, .ic-page *::before, .ic-page *::after { box-sizing:border-box; }
.ic-page [hidden] { display:none !important; }
.ic-page button, .ic-page input { font:inherit; }
.ic-page button, .ic-page a, .ic-page summary { -webkit-tap-highlight-color:transparent; }
.ic-page button { cursor:pointer; }
.ic-page button:disabled { cursor:not-allowed; opacity:.55; }
.ic-page :focus-visible { outline:2px solid var(--ic-accent); outline-offset:4px; }
.ic-page a { text-underline-offset:3px; }
.ic-eyebrow { margin:0 0 12px; color:var(--ipkk-mint); font-size:12px; font-weight:650; letter-spacing:.16em; }
.ic-workspace, .ic-gallery-section { padding:28px; }
.ic-workspace-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px 28px; padding-bottom:24px; margin-bottom:28px; border-bottom:1px solid #e8eef2; }
.ic-workspace-heading h2, .ic-section-heading h2, .ic-faq > h2 { margin:0; color:var(--ipkk-ink); font-size:22px; line-height:1.45; font-weight:650; letter-spacing:-.02em; }
.ic-workspace-heading > div > p, .ic-section-heading p { margin:7px 0 0; color:var(--ic-muted); font-size:14px; line-height:1.7; }
.ic-facts { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; margin:0; color:var(--ic-muted); font-size:13px; }
.ic-facts span { white-space:nowrap; }
.ic-facts strong { margin-right:4px; color:var(--ipkk-ink); font-size:20px; line-height:1.3; font-weight:650; font-variant-numeric:tabular-nums; }
.ic-facts span:first-child strong { color:var(--ic-accent); }
.ic-editor { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:32px; }
.ic-settings, .ic-output { min-width:0; scroll-margin-top:104px; }
.ic-field { min-width:0; padding:0; margin:0 0 26px; border:0; }
.ic-field legend { padding:0; margin:0 0 11px; color:var(--ipkk-ink); font-size:15px; font-weight:600; line-height:1.5; }
.ic-legend-note { margin-left:5px; color:var(--ic-muted); font-size:13px; font-weight:400; }
.ic-options { display:flex; flex-wrap:wrap; gap:8px; }
.ic-options button, .ic-random-theme, .ic-actions button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:7px 13px; border:1px solid #d7e2e8; border-radius:8px; background:#fff; color:var(--ic-secondary); font-size:14px; line-height:1.5; transition:border-color 140ms ease,background-color 140ms ease,transform 120ms cubic-bezier(.23,1,.32,1); }
.ic-options button[aria-pressed="true"], .ic-random-theme[aria-pressed="true"] { border-color:var(--ic-accent); box-shadow:inset 0 0 0 1px var(--ic-accent); color:#056c67; background:#edf8f4; }
.ic-options button:active:not(:disabled), .ic-random-theme:active, .ic-actions button:active, .ic-primary:active:not(:disabled) { transform:scale(.97); }
.ic-random-theme { margin-bottom:12px; background:#f8fafb; }
.ic-random-theme svg, .ic-actions button svg { width:17px; height:17px; flex:none; }
.ic-theme-group { display:grid; grid-template-columns:30px minmax(0,1fr); gap:8px; margin:0 0 10px; }
.ic-theme-group:last-child { margin-bottom:0; }
.ic-group-label { padding-top:8px; color:var(--ic-muted); font-size:13px; line-height:1.7; }
.ic-theme-options { gap:6px; }
.ic-theme-options button { flex:none; padding:7px 8px; gap:6px; font-size:13px; white-space:nowrap; }
/* Keep the final two choices together, while allowing a fallback on very narrow screens. */
.ic-theme-tail { display:flex; flex-wrap:wrap; max-width:100%; gap:inherit; }
.ic-swatch { display:inline-block; position:relative; width:15px; height:15px; flex:none; border:1px solid #00000018; border-radius:4px; background:var(--swatch-bg); }
.ic-swatch::after { content:""; position:absolute; right:0; bottom:0; width:7px; height:7px; border-radius:50%; background:var(--swatch-accent); }
.ic-help { margin:9px 0 0; color:var(--ic-muted); font-size:13px; line-height:1.75; overflow-wrap:anywhere; }
.ic-help:empty { display:none; }
.ic-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px; padding-top:22px; border-top:1px solid #e8eef2; }
.ic-actions button { min-height:42px; background:#f8fafb; }
.ic-ip-form { margin-top:16px; }
.ic-ip-form label { display:block; margin-bottom:7px; color:var(--ic-secondary); font-size:13px; }
.ic-input-row { display:flex; gap:8px; }
.ic-input-row input { flex:1; width:0; min-width:0; min-height:46px; padding:10px 12px; border:1px solid #cddae2; border-radius:8px; background:#fff; color:var(--ipkk-ink); font-size:16px; line-height:1.5; }
.ic-input-row input::placeholder { color:#6d7e8b; opacity:1; font-size:14px; }
.ic-input-row input[aria-invalid="true"] { border-color:#b54545; }
.ic-help.ic-error { color:#b13b38; }
.ic-output { top:104px; }
.ic-output.ic-can-stick { position:sticky; }
.ic-preview-panel, .ic-code-panel { overflow:hidden; border:1px solid var(--ic-border); border-radius:12px; background:#fff; }
.ic-preview-panel { padding:20px; }
.ic-panel-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-bottom:16px; }
.ic-panel-heading h3 { margin:0; color:var(--ipkk-ink); font-size:16px; line-height:1.5; font-weight:600; white-space:nowrap; }
.ic-panel-heading > div { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; color:var(--ic-muted); font-size:12px; line-height:1.6; }
.ic-style-label { white-space:nowrap; }
.ic-style-label b { display:inline-block; margin-left:4px; padding:2px 6px; border:1px solid #e2e9ee; border-radius:4px; background:#f4f7f9; color:var(--ic-secondary); font:600 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.04em; }
#card-dimensions { font-variant-numeric:tabular-nums; white-space:nowrap; }
.ic-preview-stage { display:flex; align-items:center; justify-content:center; min-height:140px; padding:24px 16px; border:1px solid #e9eff3; border-radius:8px; background-color:#f5f8fa; background-image:radial-gradient(#cbd7df .65px,transparent .65px); background-size:14px 14px; }
.ic-preview-stage img { display:block; max-width:100%; height:auto; border-radius:6px; box-shadow:0 3px 14px #132f4010; transition:opacity 150ms ease; }
.ic-preview-stage[aria-busy="true"] img { opacity:.45; }
.ic-preview-help { margin-top:14px; }
.ic-preview-status { margin:10px 0 0; color:#b13b38; font-size:13px; line-height:1.75; }
.ic-preview-status:empty { display:none; }
.ic-code-panel { margin-top:18px; }
.ic-code-tabs { display:flex; padding:0 10px; border-bottom:1px solid var(--ic-border); background:#fbfcfd; }
.ic-code-tabs button { position:relative; min-height:48px; padding:13px 15px; border:0; background:transparent; color:var(--ic-secondary); font-size:14px; line-height:1.5; white-space:nowrap; }
.ic-code-tabs button[aria-selected="true"] { color:#056c67; font-weight:600; }
.ic-code-tabs button[aria-selected="true"]::after { content:""; position:absolute; bottom:-1px; left:12px; right:12px; height:2px; background:var(--ic-accent); }
.ic-code-tabs button:focus-visible { outline-offset:-5px; border-radius:7px; }
.ic-code-content { padding:18px 20px 20px; }
.ic-code-description { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:0 0 11px; color:var(--ic-muted); font-size:12px; line-height:1.7; }
#card-code-length { flex:none; font-variant-numeric:tabular-nums; }
.ic-code-content pre { margin:0 0 16px; padding:13px 14px; border:1px solid #e7edf1; border-radius:7px; background:#f5f8fa; color:#3c5668; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.8; }
.ic-code-content code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.ic-code-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ic-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 17px; border:1px solid var(--ic-accent); border-radius:8px; background:var(--ic-accent); color:#fff; font-size:14px; font-weight:500; line-height:1.5; white-space:nowrap; transition:background-color 140ms ease,transform 120ms cubic-bezier(.23,1,.32,1); }
.ic-code-actions a { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:42px; color:var(--ic-secondary); font-size:13px; text-decoration:none; }
.ic-editor-jump { display:none; align-items:center; justify-content:center; gap:6px; min-height:44px; color:var(--ic-accent); font-size:14px; text-decoration:none; }
.ic-gallery-section { margin-top:24px; }
.ic-section-heading { margin-bottom:24px; }
.ic-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.ic-theme-tile { overflow:hidden; min-width:0; padding:0; border:1px solid var(--ic-border); border-radius:10px; background:#fff; text-align:left; transition:border-color 140ms ease,box-shadow 140ms ease; }
.ic-theme-tile[aria-pressed="true"] { border-color:var(--ic-accent); box-shadow:0 0 0 1px var(--ic-accent); }
.ic-tile-art { display:flex; align-items:center; justify-content:center; min-height:82px; padding:16px 12px; }
.ic-tile-art img { display:block; width:100%; height:auto; box-shadow:0 2px 8px #0000000a; }
.ic-tile-name { display:flex; align-items:center; gap:8px; min-height:46px; padding:10px 13px; border-top:1px solid #0000000a; color:var(--ic-secondary); font-size:14px; line-height:1.5; }
.ic-tile-check { display:none; margin-left:auto; color:var(--ic-accent); font-weight:700; }
.ic-theme-tile[aria-pressed="true"] .ic-tile-check { display:block; }
.ic-faq { margin-top:24px; }
.ic-faq .info-block h3 { margin:0 0 18px; font-size:22px; line-height:1.25; }
.ic-notice { padding:14px 16px; margin:0 0 24px; border:1px solid #cce3df; border-radius:8px; background:#f2faf6; color:var(--ic-secondary); }

@media (hover:hover) and (pointer:fine) {
  .ic-options button:hover, .ic-random-theme:hover, .ic-actions button:hover { border-color:#a9c9c2; background:#f0f8f5; color:#056c67; }
  .ic-primary:hover:not(:disabled) { background:#056c67; }
  .ic-code-actions a:hover, .ic-editor-jump:hover { color:#056c67; text-decoration:underline; }
  .ic-theme-tile:hover { border-color:#87b8ae; box-shadow:0 4px 16px #163e3310; }
}
@media (max-width:1100px) {
  .ic-workspace, .ic-gallery-section { padding:24px; }
  .ic-editor { grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:28px; }
  .ic-preview-panel { padding:16px; }
  .ic-code-content { padding:16px; }
  .ic-code-tabs button { padding-inline:11px; }
  .ic-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .ic-editor { grid-template-columns:minmax(0,1fr); gap:28px; }
  .ic-output { position:static; }
  .ic-editor-jump { display:inline-flex; }
  .ic-workspace-heading > .ic-editor-jump { margin-left:auto; }
  .ic-back-settings { margin:0 0 10px; }
  .ic-preview-stage { padding-block:28px; }
  .ic-theme-options button { min-height:40px; font-size:14px; }
  .ic-gallery { gap:16px; }
  .ic-faq .info-block h3 { font-size:20px; }
}
@media (max-width:640px) {
  .ic-workspace, .ic-gallery-section { padding:20px 18px; }
  .ic-workspace-heading { align-items:flex-start; gap:14px; padding-bottom:20px; margin-bottom:24px; }
  .ic-workspace-heading > div { width:100%; }
  .ic-workspace-heading h2, .ic-section-heading h2, .ic-faq > h2 { font-size:20px; }
  .ic-workspace-heading > div > p, .ic-section-heading p { font-size:13px; }
  .ic-facts { gap:12px 18px; }
  .ic-facts strong { font-size:18px; }
  .ic-workspace-heading > .ic-editor-jump { min-height:44px; margin:0; }
  .ic-settings, .ic-output { scroll-margin-top:84px; }
  .ic-field { margin-bottom:24px; }
  .ic-options button, .ic-random-theme, .ic-actions button { min-height:44px; padding:9px 12px; }
  .ic-layout-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ic-theme-group { grid-template-columns:30px minmax(0,1fr); gap:8px; margin-bottom:12px; }
  .ic-group-label { padding-top:11px; }
  .ic-theme-options { gap:7px; }
  .ic-theme-options button { padding:9px 10px; font-size:13px; }
  .ic-actions { gap:8px; padding-top:20px; }
  .ic-actions > .ic-editor-jump { margin-left:auto; }
  .ic-preview-panel { padding:16px 12px; }
  .ic-panel-heading { gap:10px; }
  .ic-panel-heading > div { gap:8px 10px; }
  .ic-preview-stage { padding:20px 10px; }
  .ic-code-tabs { padding-inline:3px; }
  .ic-code-tabs button { flex:1 0 auto; padding:13px 5px; font-size:13px; }
  .ic-code-tabs button[aria-selected="true"]::after { left:7px; right:7px; }
  .ic-code-content { padding:16px 12px; }
  .ic-code-content pre { padding:12px; }
  .ic-primary, .ic-code-actions a { min-height:44px; }
  .ic-primary { padding-inline:14px; }
  .ic-gallery-section, .ic-faq { margin-top:18px; }
  .ic-section-heading { margin-bottom:20px; }
  .ic-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .ic-tile-art { padding:12px 7px; min-height:70px; }
  .ic-tile-name { gap:6px; padding:10px 9px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .ic-shell *, .ic-shell *::before, .ic-shell *::after { transition:none !important; scroll-behavior:auto !important; }
  .ic-shell button:active { transform:none !important; }
}
.ic-shell button:active:focus-visible { transform:none; }