/* with icons — generated pages: icons/<name>.html, categories/<cat>.html, styles/<style>.html.
   Built on tokens.css (colour, type, radii, motion) and chrome.css (.wrap, .btn, header, footer). */

.ip-page {
  --sc: var(--style, #2F5BFF);
  --ip-e: var(--e-out, cubic-bezier(.2, .8, .2, 1));
  --ip-spring: var(--e-spring, cubic-bezier(.34, 1.56, .64, 1));
  --ic: var(--ink);
}
.ip-page main { overflow-x: clip; }
.ip, .hub { --sc: var(--style, #2F5BFF); }

/* breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 13.5px/1.4 var(--font-sans); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5 }
.crumbs a { color: inherit; text-decoration: none }
.crumbs a:hover { color: var(--ink); text-decoration: underline }
.crumbs [aria-current] { color: var(--ink); font-weight: 600 }

/* shared type */
.ip-eyebrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font: 600 12.5px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ip-eyebrow a { color: inherit }
.ip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 22%, transparent); transition: background .5s var(--ip-e); }
.ip-h1 { margin: 0; font: 800 clamp(44px, 6.5vw, 92px)/.94 var(--font-display); letter-spacing: -.04em; text-wrap: balance; }
.ip-hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0; color: var(--style-text, var(--sc)); display: inline-block; transform: rotate(-3deg); font-size: 1.08em; transition: color .5s var(--ip-e); }
.ip-lede { max-width: 54ch; margin: 18px 0 0; font: 400 clamp(17px, 1.5vw, 20px)/1.5 var(--font-sans); color: var(--ink-2, var(--ink)); text-wrap: pretty; }
.ip-aka-line { max-width: 60ch; margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ip-aka-line b { color: var(--ink); font-weight: 650; margin-right: 4px }
.ip-h2 { margin: 0; font: 780 clamp(28px, 3.6vw, 48px)/1 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.ip-section { padding: clamp(48px, 7vw, 96px) 0 0; }
.ip-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(20px, 3vw, 32px); }
.ip-head > p { margin: 0; max-width: 48ch; color: var(--muted); font-size: 16px; line-height: 1.5 }
.ip-head a, .ip-apps a, .ip-note a, .ip-devlead a, .hub-when a { color: var(--ink); font-weight: 650; text-decoration-color: var(--sc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ip-head .arr, .ip-app .arr { width: 16px; height: 16px; vertical-align: -3px; transition: transform .3s var(--ip-spring) }
.ip-head a:hover .arr, .ip-app a:hover .arr { transform: translateX(3px) }

/* ─────────── hero ─────────── */
.ip-hero { padding: clamp(18px, 3vw, 32px) 0 0; }
.ip-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(18px, 3vw, 36px); }
.ip-intro { min-width: 0 }
.ip-pick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin: 26px 0 0; }
.ip-pick-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 11px 2px 9px; border-radius: 16px; border: 1.5px solid var(--rule-strong); background: var(--card); color: var(--ink); font: 600 12.5px/1 var(--font-sans); cursor: pointer; transition: transform .25s var(--ip-spring), background .25s, border-color .25s, color .25s; }
.ip-pick-b span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ip-pick-b svg { width: 24px; height: 24px; color: var(--sc) }
.ip-pick-b:hover { transform: translateY(-2px); border-color: var(--sc) }
.ip-pick-b[aria-checked="true"] { background: var(--sc-fill, var(--sc)); border-color: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff); box-shadow: 0 10px 22px -12px var(--sc) }
.ip-pick-b[aria-checked="true"] svg { color: inherit }


/* the stage */
.ip-stage {
  position: relative; border-radius: clamp(24px, 3vw, 36px); padding: clamp(20px, 3vw, 32px); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--sc) 34%, transparent), transparent 62%), var(--paper-2);
  border: 1px solid var(--rule); transition: background .6s var(--ip-e);
}
.ip-stage::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: linear-gradient(var(--rule) 1px, transparent 1px) 0 0/calc(100% / 12) calc(100% / 12), linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0/calc(100% / 12) calc(100% / 12);
  mask: radial-gradient(circle at 50% 45%, #000 20%, transparent 70%); -webkit-mask: radial-gradient(circle at 50% 45%, #000 20%, transparent 70%); }
.ip-stage-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; color: var(--ic); cursor: grab; }
.ip-stage-art:active { cursor: grabbing }
.ip-stage-art svg { width: 64%; max-width: 380px; height: auto; aspect-ratio: 1; overflow: visible; scale: var(--opt, 1); transition: color .4s var(--ip-e), scale .4s var(--ip-e); filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--sc) 30%, transparent)); }
.ip.is-white .ip-stage { background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--sc) 60%, transparent), transparent 70%), #1B1E26 }
.ip-stage-hint { position: absolute; right: clamp(18px, 3vw, 30px); top: clamp(16px, 2.5vw, 26px); margin: 0; font: 700 22px/1 var(--font-hand); color: var(--style-text, var(--sc)); transform: rotate(-5deg); }
.ip-sizes { position: relative; display: flex; justify-content: center; align-items: end; gap: clamp(14px, 3vw, 34px); margin: 4px 0 0; padding-top: 18px; border-top: 1px dashed var(--rule-strong); color: var(--ic) }
.ip-sizes figure { margin: 0; display: grid; justify-items: center; gap: 8px }
.ip-sizes figcaption { font: 600 11px/1 var(--font-mono); color: var(--muted) }

/* ─────────── use it in… ─────────── */
.ip-app-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none }
.ip-app { position: relative; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); transition: transform .3s var(--ip-spring), border-color .3s, box-shadow .3s; }
.ip-app:hover { transform: translateY(-4px); border-color: var(--app); box-shadow: 0 20px 40px -26px var(--app) }
.ip-app h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 750 19px/1.1 var(--font-display); letter-spacing: -.01em }
.ip-app-dot { width: 14px; height: 14px; border-radius: 5px; background: var(--app); transform: rotate(45deg) }
.ip-app ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 7px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2, var(--ink)); flex: 1; align-content: start }
.ip-app ol li::marker { font: 700 12px var(--font-mono); color: var(--muted) }
.ip-app kbd { font-size: 11.5px }
.ip-app > a { font-size: 14px; text-decoration-color: var(--app) }

/* ─────────── every style ─────────── */
.ip-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none }
.ip-sc { position: relative; display: flex; flex-direction: column; padding: 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--rule); transition: transform .3s var(--ip-spring), box-shadow .3s; }
.ip-sc:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px var(--sc) }
.ip-sc-art { height: 150px; padding: 28px; box-sizing: border-box; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--sc) 12%, var(--card)); color: var(--ink); margin-bottom: 14px; transition: background .3s }
.ip-sc:hover .ip-sc-art { background: var(--sc); color: #fff }
.ip-sc-art svg { width: 80px; height: 80px; overflow: visible; scale: var(--opt, 1); transition: transform .45s var(--ip-spring) }
.ip-sc:hover .ip-sc-art svg { transform: scale(1.1) rotate(-4deg) }
.ip-sc h3 { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 750 20px/1.1 var(--font-display) }
.ip-sc h3 a { color: inherit; text-decoration: none }
.ip-sc h3 a:hover { text-decoration: underline; text-decoration-color: var(--sc) }
.ip-sc h3 small { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--style-text, var(--sc)) }
.ip-sc p { margin: 6px 0 14px; font-size: 14px; line-height: 1.45; color: var(--muted); flex: 1 }
.ip-sc-act { display: flex; gap: 6px }
.ip-sc-act button { flex: 1; display: grid; place-items: center; height: 38px; border-radius: 11px; border: 1.5px solid var(--rule-strong); background: none; color: var(--ink); font: 700 13.5px/1 var(--font-sans); cursor: pointer; transition: background .2s, border-color .2s, color .2s }
.ip-sc-act button:last-child { flex: none; width: 44px }
.ip-sc-act button svg { width: 18px; height: 18px }
.ip-sc-act button:hover { background: var(--sc-fill, var(--sc)); border-color: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff) }

/* ─────────── also known as ─────────── */
.ip-names { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start }
.ip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none }
.ip-chips a, .ip-chips span { display: inline-block; padding: 9px 15px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); font: 550 15px/1.2 var(--font-sans); text-decoration: none; transition: transform .25s var(--ip-spring), border-color .2s, background .2s }
.ip-chips a:hover { transform: translateY(-2px) rotate(-1deg); border-color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, var(--card)) }
.ip-facts { display: grid; gap: 0; margin: 0; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); overflow: hidden }
.ip-facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--rule) }
.ip-facts > div:first-child { border-top: 0 }
.ip-facts dt { font: 600 12px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted) }
.ip-facts dd { margin: 0; font-size: 15px; line-height: 1.5 }
.ip-facts a { color: var(--ink) }

/* ─────────── developers ─────────── */
.ip-dev { border-radius: clamp(24px, 3vw, 32px); background: var(--dark); color: var(--on-dark); overflow: hidden }
.ip-dev > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(22px, 3vw, 32px); cursor: pointer }
.ip-dev > summary::-webkit-details-marker { display: none }
.ip-dev-t { display: grid; gap: 6px }
.ip-dev-t .ip-h2 { color: var(--on-dark) }
.ip-dev-t small { font: 500 14px/1.4 var(--font-sans); color: var(--on-dark-2, rgba(247, 243, 236, .7)) }
.ip-dev-plus { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--sun); transition: transform .4s var(--ip-spring) }
.ip-dev-plus::before, .ip-dev-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 3px; margin: -1.5px 0 0 -10px; border-radius: 2px; background: #111318 }
.ip-dev-plus::after { transform: rotate(90deg) }
.ip-dev[open] .ip-dev-plus { transform: rotate(135deg) }
.ip-dev > :not(summary) { margin-left: clamp(22px, 3vw, 32px); margin-right: clamp(22px, 3vw, 32px) }
.ip-devlead { margin-top: 0; font-size: 15px; line-height: 1.5; color: var(--on-dark-2, rgba(247, 243, 236, .75)) }
.ip-devlead b { color: var(--on-dark) }
.ip-devlead code, .ip-panel > p code, .ip-note code { font: 500 .88em var(--font-mono); background: rgba(255, 255, 255, .1); padding: .1em .4em; border-radius: 6px }
.ip-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06) }
.ip-tabs::-webkit-scrollbar { display: none }
.ip-tabs button { flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--on-dark-2, rgba(247, 243, 236, .7)); font: 600 14px/1 var(--font-sans); cursor: pointer }
.ip-tabs button:hover { color: var(--on-dark) }
.ip-tabs button[aria-selected="true"] { background: var(--on-dark); color: #111318 }
.ip-tabs button:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px }
.ip-panel { padding: 18px 0 clamp(22px, 3vw, 32px) }
.ip-panel > p { max-width: 70ch; margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--on-dark-2, rgba(247, 243, 236, .8)) }
.ip-install { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.ip-install code { font-size: 14px !important; padding: .35em .7em !important }
.ip-code { border-radius: 16px; background: #07080B; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden }
.ip-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 600 11.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: rgba(247, 243, 236, .55) }
.ip-copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font: 600 13px/1 var(--font-sans); cursor: pointer; text-transform: none; letter-spacing: 0 }
.ip-copy svg { width: 15px; height: 15px }
.ip-copy:hover { background: rgba(255, 255, 255, .18) }
.ip-copy.is-done { background: #22A861 }
.ip-code pre { margin: 0; padding: 16px; overflow: auto; font: 13px/1.65 var(--font-mono); color: #E9E5DD; tab-size: 2 }
.ip-code pre:focus-visible { outline: 2px solid var(--sc, #2F5BFF); outline-offset: -2px }
.tk-c { color: #7E8696 } .tk-s { color: #9BE3B4 } .tk-k { color: #FF8FC4 } .tk-t { color: #8EA6FF }
.ip-note { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--on-dark-2, rgba(247, 243, 236, .7)) }
.ip-note a { color: var(--on-dark) }
.ip-intro .ip-note { color: var(--muted) }

/* ─────────── grids: related + hubs ─────────── */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none }
.ip-grid a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1; padding: 12px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; text-align: center; transition: transform .3s var(--ip-spring), border-color .2s, box-shadow .3s }
.ip-grid a svg { width: 32px; height: 32px; transition: transform .35s var(--ip-spring), color .2s }
.ip-grid a span { font: 550 12.5px/1.2 var(--font-sans); color: var(--muted) }
.ip-grid a small { font: 500 11px/1.2 var(--font-sans); color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ip-grid a:hover { transform: translateY(-3px); border-color: var(--sc); box-shadow: 0 16px 32px -22px var(--sc) }
.ip-grid a:hover svg { transform: scale(1.15); color: var(--sc) }
.ip-grid a:hover span { color: var(--ink) }
.ip-grid.is-hub { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) }

/* faq */
.ip-faq { display: grid; gap: 10px; max-width: 900px }
.ip-q { border-radius: 18px; background: var(--card); border: 1px solid var(--rule); }
.ip-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; font: 680 17px/1.35 var(--font-display) }
.ip-q summary::-webkit-details-marker { display: none }
.ip-q summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); font: 600 18px/1 var(--font-mono); transition: transform .3s var(--ip-spring), background .2s }
.ip-q[open] summary::after { transform: rotate(45deg); background: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff) }
.ip-q p { margin: 0; padding: 0 20px 20px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2, var(--ink)); max-width: 72ch }
.ip-q code { font: 500 .88em var(--font-mono); background: var(--paper-2); padding: .1em .4em; border-radius: 6px }

/* pager */
.ip-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: clamp(48px, 8vw, 96px) }
.ip-pager a { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: transform .3s var(--ip-spring), border-color .2s }
.ip-pager a.next { justify-content: flex-end; text-align: right }
.ip-pager a:hover { border-color: var(--sc); transform: translateY(-2px) }
.ip-pager svg { width: 34px; height: 34px; flex: none }
.ip-pager small { display: block; font: 600 11.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px }
.ip-pager b { font: 720 18px/1.2 var(--font-display) }

/* ─────────── hubs ─────────── */
.hub-hero { padding: clamp(18px, 3vw, 32px) 0 0 }
.hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(18px, 3vw, 36px) }
.hub-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0 }
.hub-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.4vw, 14px) }
.hub-strip span { aspect-ratio: 1; display: grid; place-items: center; border-radius: clamp(18px, 2vw, 28px); background: var(--sc); color: #fff; box-shadow: 0 18px 34px -24px var(--sc); animation: hub-in .7s var(--ip-spring) both; animation-delay: calc(var(--i) * 60ms) }
.hub-strip span svg { width: 46%; height: auto; aspect-ratio: 1 }
.hub-strip span:nth-child(odd) { transform: rotate(-3deg) }
.hub-strip span:nth-child(3n) { transform: rotate(4deg) translateY(6px) }
@keyframes hub-in { from { opacity: 0; transform: translateY(18px) scale(.7) rotate(-12deg) } }
.hub-strip.is-mono span { background: var(--card); color: var(--sc); border: 1px solid var(--rule); box-shadow: none }
.hub-strip.is-mono span:nth-child(5) { background: var(--sc); color: #fff }
.hub-hero.is-style { position: relative }
.hub-style .ip-hand { color: var(--style-text, var(--sc)) }
.hub-when { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.hub-when article { padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule) }
.hub-when h3 { margin: 0 0 8px; font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--style-text, var(--sc)) }
.hub-when p { margin: 0; font-size: 15px; line-height: 1.55 }
.hub-when code { font: 500 .85em var(--font-mono); background: var(--paper-2); padding: .1em .35em; border-radius: 5px }
.hub-group { margin-top: 32px }
.hub-group h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font: 720 22px/1.1 var(--font-display) }
.hub-group h3 a { color: inherit; text-decoration: none }
.hub-group h3 a:hover { text-decoration: underline; text-decoration-color: var(--sc) }
.hub-group h3 small { font: 600 12px/1 var(--font-mono); color: var(--muted) }
.hub-table-wrap { overflow: auto; border-radius: 22px; background: var(--card); border: 1px solid var(--rule) }
.hub-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45 }
.hub-table th, .hub-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule) }
.hub-table thead th { border-top: 0; font: 600 11.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 16px }
.hub-table tbody th { white-space: nowrap }
.hub-table tbody th a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; text-decoration: none }
.hub-table tbody th a:hover { text-decoration: underline; text-decoration-color: var(--sc) }
.hub-table td:last-child { color: var(--muted) }
.hub-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none }
.hub-cats a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: 600 14.5px/1 var(--font-sans); transition: transform .25s var(--ip-spring), border-color .2s }
.hub-cats a svg { width: 18px; height: 18px; color: var(--muted) }
.hub-cats a small { font: 600 11.5px/1 var(--font-mono); color: var(--muted) }
.hub-cats a:hover { transform: translateY(-2px); border-color: var(--ink) }
.hub-cats a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.hub-cats a[aria-current] svg, .hub-cats a[aria-current] small { color: inherit }
.hub-styles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none }
.hub-styles a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 14px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: transform .3s var(--ip-spring), background .25s, color .25s }
.hub-styles a svg { width: 40px; height: 40px; color: var(--sc); margin-bottom: 6px; transition: transform .4s var(--ip-spring), color .25s }
.hub-styles b { font: 720 16px/1 var(--font-display) }
.hub-styles small { font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.hub-styles a:hover, .hub-styles a[aria-current] { background: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff); transform: translateY(-3px) }
.hub-styles a:hover svg, .hub-styles a[aria-current] svg { color: inherit; transform: rotate(-6deg) scale(1.08) }
.hub-styles a:hover small, .hub-styles a[aria-current] small { color: inherit }
.hub > .ip-section:last-child { padding-bottom: clamp(48px, 8vw, 96px) }

/* fallback toast (site.js provides the shared one) */
.ip-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; padding: 12px 18px; border-radius: 14px; background: var(--dark); color: var(--on-dark); font: 500 15px/1.4 var(--font-sans); transition: opacity .2s, transform .35s var(--ip-spring); pointer-events: none; max-width: calc(100vw - 32px) }
.ip-toast.is-on { opacity: 1; transform: translate(-50%, 0) }

/* ─────────── responsive ─────────── */
@media (max-width: 1100px) {
  .ip-app-list { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .hub-when { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hub-styles { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .ip-hero-grid, .hub-hero-grid { grid-template-columns: minmax(0, 1fr) }
  .ip-stage { order: -1 }
  .ip-names { grid-template-columns: minmax(0, 1fr) }
  .hub-strip { grid-template-columns: repeat(5, 1fr) }
  .hub-strip span:nth-child(n+6) { display: none }
}
@media (max-width: 640px) {
  .ip-app-list { grid-template-columns: minmax(0, 1fr) }
  .ip-h1 { font-size: clamp(40px, 12vw, 60px) }
  .ip-pick { gap: 5px }
  .ip-pick-b { padding: 10px 0; border-radius: 14px }
  .ip-pick-b span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
  .ip-facts > div { grid-template-columns: 1fr; gap: 2px }
  .ip-pager { grid-template-columns: 1fr }
  .ip-stage-hint { font-size: 18px }
  .hub-when { grid-template-columns: minmax(0, 1fr) }
  .hub-styles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ip-grid, .ip-grid.is-hub { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ip-grid a small { display: none }
  .hub-table thead th:nth-child(2), .hub-table td:nth-child(2) { display: none }
}
@media (hover: none) {
  .ip-app:hover, .ip-sc:hover, .ip-grid a:hover { transform: none; box-shadow: none }
}
@media (prefers-reduced-motion: reduce) {
  /* ...except what the visitor asked to see ("Play them anyway" marks it .wm-force) */
  .ip-page :not(.wm-force, .wm-force *), .ip-page :not(.wm-force, .wm-force *)::before, .ip-page :not(.wm-force, .wm-force *)::after { animation-duration: .001ms !important; transition-duration: .001ms !important }
}
@media print { .ip-actions, .ip-pick, .ip-dev, .ip-pager { display: none } }
.ip-head a, .ip-app > a { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px }
.ip-head a .arr, .ip-app a .arr { display: inline-block; flex: none; margin: 0 }
.hub-hero.is-style { background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 18%, var(--paper)) 0%, var(--paper) 100%); padding-bottom: clamp(24px, 4vw, 48px) }
.hub-strip.is-mono span:nth-child(odd) { background: var(--sc); color: #fff; border-color: transparent; box-shadow: 0 18px 34px -22px var(--sc) }
.hub-strip.is-mono span:nth-child(5) { background: var(--ink); color: var(--paper) }
/* palette and studio styles bring their own colours: a solid tile of the style colour would swallow them (sapphire luxe on
   sapphire), so their "accent" tiles are a soft wash of it instead */
.hub-style.is-palette .hub-strip.is-mono span:nth-child(odd):not(:nth-child(5)) { background: color-mix(in srgb, var(--sc) 18%, var(--card)); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent), 0 18px 34px -24px var(--sc) }

/* ─────────── optical balance: filled styles read heavier than outlines at the same grid size ─────────── */
.ip-sc, .ip { --opt: 1 }
.ip[data-style="solid"], .ip-sc.s-solid { --opt: .94 }
.ip[data-style="gloss"], .ip-sc.s-gloss { --opt: .93 }
.ip[data-style="engrave"], .ip-sc.s-engrave { --opt: .97 }
.ip[data-style="duo"], .ip-sc.s-duo { --opt: .98 }
.ip[data-style="blueprint"], .ip-sc.s-blueprint { --opt: .96 }
.ip-sizes svg, .ip-pick-b svg, .ip-ask-tile svg { overflow: visible }

/* ─────────── hero side column: stage + related + library link ─────────── */
.ip-side { display: grid; gap: 14px; min-width: 0 }
.ip-lib-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--rule-strong); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .25s var(--ip-spring) }
.ip-lib-link > svg:first-child { width: 22px; height: 22px; color: var(--sc) }
.ip-lib-link b { display: block; font: 720 16px/1.2 var(--font-display) }
.ip-lib-link small { font: 500 13px/1.3 var(--font-sans); color: var(--muted) }
.ip-lib-link .arr { width: 18px; height: 18px; transition: transform .3s var(--ip-spring) }
.ip-lib-link:hover { border-color: var(--sc); transform: translateY(-2px) }
.ip-lib-link:hover .arr { transform: translateX(3px) }

/* compact entry near the downloads: jumps to the Ask-AI task picker */

/* the prominent Ask-AI section */
.ip-ask-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: clamp(24px, 3vw, 36px); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--sc) 22%, transparent), transparent 60%), var(--card); border: 1.5px solid color-mix(in srgb, var(--sc) 35%, var(--rule)); box-shadow: 0 30px 60px -44px var(--sc); overflow: hidden; transition: border-color .5s var(--ip-e), box-shadow .5s var(--ip-e) }
.ip-ask-copy p:last-child { margin: 16px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: var(--ink-2, var(--ink)) }
.ip-ask-demo { display: grid; align-content: center; gap: 10px }
.ip-ask-bubble { margin: 0; max-width: 92%; padding: 12px 16px; border-radius: 18px; font: 500 15px/1.4 var(--font-sans); box-shadow: var(--shadow-s, 0 2px 8px rgba(0, 0, 0, .08)) }
.ip-ask-bubble.is-user { justify-self: end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 6px }
.ip-ask-bubble.is-ai { display: flex; align-items: center; gap: 12px; background: var(--paper-2); color: var(--ink); border-bottom-left-radius: 6px }
.ip-ask-bubble i { font-style: normal; font-weight: 650 }
.ip-ask-tile { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff); transition: background .5s var(--ip-e) }
.ip-ask-tile svg { width: 32px; height: 32px; scale: var(--opt, 1) }
.ip-ask-widget { grid-column: 1 / -1; min-width: 0; min-height: 64px }
.ip-ask { scroll-margin-top: calc(var(--header-h, 72px) + 16px) }

@media (max-width: 900px) {
  .ip-side { display: contents }
  .ip-stage-art { aspect-ratio: 1.6 }
  .ip-stage-art svg { width: auto; height: 74%; max-width: none }
  .ip-ask-card { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .ip-ask-demo { display: none }
  .ip-sc-art { height: 128px; padding: 24px }
  .ip-sc-art svg { width: 68px; height: 68px }
}
.ip-ask-widget.is-tasks .ask-task[aria-checked="true"] { border-color: var(--sc); box-shadow: inset 0 0 0 1px var(--sc), 0 10px 22px -16px var(--sc) }
.ip-ask-widget.is-tasks .ask-task[aria-checked="true"] .ask-task-t::before { color: var(--sc) }
.ip-ask-widget .ask-need-in:focus { border-color: var(--sc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 18%, transparent) }
.ip-ask-widget .ask-ai-btn { min-height: 48px; padding: 0 18px 0 14px; font-size: 15px }
.ip-ask-widget .ask-ai-logo, .ip-ask-widget .ask-ai-logo svg { width: 22px; height: 22px }

/* ─────────── the <i> tag: the quickest copy for websites ─────────── */
.ip-tag { display: grid; gap: 8px }
.ip-tag-btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k go" "code go"; align-items: center; gap: 6px 14px; width: 100%; padding: 14px 14px 14px 18px; border-radius: 18px; border: 0; background: var(--dark); color: var(--on-dark); text-align: left; cursor: pointer; box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--sc) 70%, #000); transition: transform .25s var(--ip-spring), box-shadow .3s }
.ip-tag-btn:hover { transform: translateY(-2px) }
.ip-tag-btn:active { transform: scale(.98) }
.ip-tag-btn:focus-visible, .ip-tag-css:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px }
.ip-tag-k { grid-area: k; display: inline-flex; align-items: center; gap: 8px; font: 650 12.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark-2, rgba(247, 243, 236, .75)) }
.ip-tag-k svg { width: 16px; height: 16px; color: var(--sc); transition: color .5s var(--ip-e) }
.ip-tag-btn code { grid-area: code; min-width: 0; font: 600 clamp(14px, 1.45vw, 17px)/1.35 var(--font-mono); color: #fff; overflow-wrap: anywhere }
.ip-tag-go { grid-area: go; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 13px; background: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff); font: 750 16px/1 var(--font-display); transition: background .5s var(--ip-e) }
.ip-tag-go svg { width: 18px; height: 18px }
.ip-tag-btn.is-done .ip-tag-go { background: #22A861 }
.ip-tag-hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted) }
.ip-tag-hint b { color: var(--ink); font-weight: 650 }
.ip-tag-hint > code { font: 500 .9em var(--font-mono) }
.ip-tag-css { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 2px 0; padding: 4px 8px; border-radius: 8px; border: 1px dashed var(--rule-strong); background: var(--paper-2); color: var(--ink); cursor: pointer; text-align: left; vertical-align: middle }
.ip-tag-css code { font: 500 11.5px/1.35 var(--font-mono); overflow-wrap: anywhere }
.ip-tag-css svg { flex: none; width: 14px; height: 14px; color: var(--muted) }
.ip-tag-css:hover { border-color: var(--sc) }
@media (max-width: 640px) {
  .ip-tag-btn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "code" "go"; }
  .ip-tag-go { justify-content: center }
}
.ip-styles { gap: 10px }
.ip-sc { padding: 12px }
.ip-sc h3 { flex-direction: column; align-items: flex-start; gap: 6px }
.ip-sc-act { gap: 5px }
.ip-sc-act button { min-width: 0; height: 36px; font-size: 12.5px }
.ip-sc-act button:last-child { width: 36px }
.ip-tag-btn { border: 1px solid rgba(255, 255, 255, .12) }
.ip-ask .ip-hand { margin-right: .14em }

/* ─────────── text on a style-coloured fill: AA in every style ───────────
   every styled element carries --sc / --sc-on inline (the --c-<style> / --c-<style>-on tokens, theme-aware) */
.ip-page { --sc-on: var(--style-on, #fff) }
.s-duo, .ip[data-style="duo"] { --sc-fill: color-mix(in srgb, var(--sc) 86%, #000) }

/* ─────────── final review (2026-10-02) ─────────── */
/* stylesheet hint: label line, then the copyable line full width */
.ip-tag-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px }
.ip-tag-css { display: flex; width: 100%; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 10px }
.ip-tag-css code { min-width: 0 }
/* related: 12 icons, always full rows */
.ip-grid:not(.is-hub) { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.ip-grid:not(.is-hub) a { aspect-ratio: auto; min-height: 118px }
/* FAQ: heading column + questions */
@media (min-width: 1000px) {
  .ip-faq-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 80px); align-items: start }
  .ip-faq-grid > .ip-head { position: sticky; top: calc(var(--header-h, 72px) + 24px); flex-direction: column; align-items: flex-start; margin: 0 }
  .ip-faq-grid .ip-faq { max-width: none }
}
@media (max-width: 900px) {
  .ip-stage-art { aspect-ratio: auto; height: clamp(190px, 50vw, 340px) }
  .ip-stage-art svg { width: clamp(150px, 40vw, 272px); height: auto }
  .ip-grid:not(.is-hub) { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .ip-grid:not(.is-hub) { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 640px) { .ip-pick-now { min-height: 2.9em } }
@media (max-width: 640px) {
  .ip-ask-widget .ask-ai-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ip-ask-widget .ask-ai-btn { justify-content: center; padding: 0 10px }
}
.ip-app .nw { white-space: nowrap }
@media (max-width: 640px) {
  .ip-app-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 16px)); padding: 4px var(--gutter, 16px) 12px; scroll-padding-inline: var(--gutter, 16px) }
  .ip-app-list::-webkit-scrollbar { display: none }
  .ip-app { scroll-snap-align: start }
}
/* every-style cards: one row of 7 on desktop, a snap row on tablets, compact rows on phones (never an orphan card) */
@media (min-width: 1100px) { .ip-styles { grid-template-columns: repeat(7, minmax(0, 1fr)) } }
@media (min-width: 641px) and (max-width: 1099px) {
  .ip-styles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 200px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; margin-inline: calc(-1 * var(--gutter, 16px)); padding: 6px var(--gutter, 16px) 14px; scroll-padding-inline: var(--gutter, 16px) }
  .ip-sc { scroll-snap-align: start }
}
@media (max-width: 640px) {
  .ip-styles { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .ip-sc { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "art h" "art p" "art act"; column-gap: 14px; padding: 10px; border-radius: 20px }
  .ip-sc-art { grid-area: art; height: 92px; padding: 0; margin: 0; align-self: center; border-radius: 14px }
  .ip-sc-art svg { width: 50px; height: 50px }
  .ip-sc h3 { grid-area: h; flex-direction: row; align-items: baseline; gap: 8px; font-size: 18px; margin-top: 2px }
  .ip-sc p { grid-area: p; margin: 3px 0 8px; font-size: 13.5px; line-height: 1.4 }
  .ip-sc-act { grid-area: act }
  .ip-sc-act button { height: 34px }
}
@media (min-width: 641px) and (max-width: 1199px) { .ip-pick-b { font-size: 11.5px; letter-spacing: -.01em } }
@media (max-width: 640px) { .ip-grid:not(.is-hub) a { min-height: 96px } }
@media (min-width: 641px) and (max-width: 1099px) {
  .ip-app-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 272px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; margin-inline: calc(-1 * var(--gutter, 16px)); padding: 6px var(--gutter, 16px) 14px; scroll-padding-inline: var(--gutter, 16px) }
  .ip-app { scroll-snap-align: start }
}
/* code is copied verbatim: never let the mono font turn -- or <!-- into ligatures */
.ip-page code, .ip-page pre, .ip-page kbd { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0 }
.ip-note code, .ip-devlead code, .ip-panel > p code { white-space: nowrap }
.ip-q code { overflow-wrap: anywhere }
/* dark theme: the developer slab must still read as a slab on a near-black page */
[data-theme="dark"] .ip-dev { background: var(--dark-2); border: 1px solid var(--rule-strong) }
[data-theme="dark"] .ip-tag-btn { background: var(--dark-2) }
@media (max-width: 640px) {
  .hub-cta { flex-wrap: nowrap; gap: 8px }
  .hub-cta .btn { flex: 1 1 auto; justify-content: center; min-width: 0; padding-inline: 16px; font-size: 16px; white-space: nowrap }
  .hub-cta .btn-ghost { flex: 0 0 auto }
}
.hub-dev { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none }
.hub-dev code { display: inline-block; max-width: 100%; font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; white-space: normal }
.hub-dev-more { font-size: 14px !important; color: var(--muted) }
/* style hubs: show the style in its own colour, a touch larger (creative styles read best at 32px+) */
.ip-grid.is-hub a svg { width: 36px; height: 36px }
.hub-style .ip-grid a svg { color: var(--style-text, var(--sc)) }
.hub-style .ip-grid a:hover svg { color: var(--ink) }
.ip-tag-btn code .nw { white-space: nowrap }

/* ═══════════ v3 (2026-10-02): beginner-first icon pages ═══════════
   hero = see it · 1 pick a style · 2 grab it; then a sticky section nav, the live studio (css/editor.css),
   ten placements, and the rest of the reference further down. More air between everything. */
.ip-section { padding-top: clamp(84px, 10vw, 144px) }
.ip-head { margin-bottom: clamp(28px, 4vw, 48px) }
.ip-head > div { min-width: 0 }
.ip-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 12.5px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
.ip-hero-grid { gap: clamp(32px, 5vw, 88px) }

/* steps */

/* style picker, grouped: Everyday · Crafted · Playful */
.ip-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: none; margin: 0 }
.ip-pick-g { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px }
.ip-pick-gl { display: grid; gap: 4px; justify-items: start; font: 600 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.ip-pick-gl em { font-style: normal; padding: 3px 7px; border-radius: 999px; background: var(--sun); color: #111318; font-size: 9.5px; letter-spacing: .08em }
.ip-pick-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px }
.ip-pick-b { padding: 10px 2px 8px }
.ip-pick-b svg { color: var(--style-text, var(--sc)) }

/* grab it */

/* the stage + its motion */
.ip-stage { display: grid; align-content: start }
.ip-stage-art .ip-mo { display: grid; place-items: center; width: 64%; max-width: 380px; aspect-ratio: 1 }
.ip-stage-art .ip-mo > svg { width: 100%; max-width: none; height: 100% }
.ip-intent { position: absolute; z-index: 2; left: clamp(16px, 2.6vw, 28px); top: clamp(14px, 2.4vw, 24px); display: flex; align-items: center; gap: 10px; max-width: min(62%, 320px); padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); text-align: left; cursor: pointer; box-shadow: var(--shadow-s); transition: transform .3s var(--ip-spring), border-color .2s }
.ip-intent:hover { transform: translateY(-1px); border-color: var(--sc) }
.ip-intent-ic { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sc-fill, var(--sc)); transition: background .4s var(--ip-e) }
.ip-intent-ic::before { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--sc-on, #fff) }
.ip-intent[aria-pressed="true"] .ip-intent-ic::before { left: 11px; top: 11px; width: 4px; height: 12px; border: 0; background: var(--sc-on, #fff); box-shadow: 8px 0 0 var(--sc-on, #fff) }
.ip-intent-t { display: grid; gap: 2px; min-width: 0 }
.ip-intent-t b { font: 700 14px/1.15 var(--font-display) }
.ip-intent-t small { font: 500 12.5px/1.3 var(--font-sans); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.ip-stage-hint { top: auto; bottom: 132px }

/* in-page section nav */
/* keyboard focus never lands under the sticky header + section bar (WCAG 2.4.11): a focused control scrolls clear of both */

/* studio + placements */
.ip-studio { min-height: 200px }
.ip-studio-static { padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--rule) }
.ip-studio-static p { margin: 0 0 12px; color: var(--ink-2, var(--ink)) }
.ip-tag-code { display: block; padding: 14px 16px; border-radius: 14px; background: var(--dark); color: var(--on-dark); font: 600 15px/1.4 var(--font-mono); overflow-wrap: anywhere }
.ip-setup { margin: 12px 0 }
.ip-setup > summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; font: 650 14px/1.3 var(--font-sans); color: var(--ink) }
.ip-setup > summary::-webkit-details-marker { display: none }
.ip-setup > summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--paper-2); font: 600 14px/1 var(--font-mono); transition: transform .3s var(--ip-spring) }
.ip-setup[open] > summary::before { transform: rotate(45deg) }
.ip-setup-line code { font: 500 12.5px/1.4 var(--font-mono); overflow-wrap: anywhere }
.ip-places { min-height: 120px }

/* related: the library card sits under the grid */
.ip-lib-link { max-width: 520px; margin-top: 14px }

/* facts */
.ip-fact-code { display: block; margin-top: 2px; font-size: 13px; color: var(--muted) }
.ip-fact-code code { font: 500 .95em var(--font-mono) }

/* developers: the <i> tag + its setup live at the end of the slab */
.ip-dev-tag { display: grid; gap: 12px; padding: 22px 0 clamp(22px, 3vw, 32px); border-top: 1px solid rgba(255, 255, 255, .1) }
.ip-dev-tag-l { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-dark-2, rgba(247, 243, 236, .75)) }
.ip-dev-tag-l code { font: 500 .9em var(--font-mono); background: rgba(255, 255, 255, .1); padding: .1em .4em; border-radius: 6px }
.ip-dev .ip-tag-btn { background: #07080B; border-color: rgba(255, 255, 255, .14) }
.ip-setup.is-dark { margin: 0 }
.ip-setup.is-dark > summary { color: var(--on-dark) }
.ip-setup.is-dark > summary::before { background: rgba(255, 255, 255, .12); color: var(--on-dark) }
.ip-setup.is-dark .ip-tag-hint { margin: 6px 0 10px; color: var(--on-dark-2, rgba(247, 243, 236, .75)) }
.ip-setup.is-dark .ip-tag-hint b { color: var(--on-dark) }
.ip-setup.is-dark .ip-tag-css { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: var(--on-dark) }
.ip-setup.is-dark .ip-tag-css svg { color: var(--on-dark-2, rgba(247, 243, 236, .7)) }

/* fifteen styles: three rows of five */
@media (min-width: 1100px) { .ip-styles { grid-template-columns: repeat(5, minmax(0, 1fr)) } }
.hub-styles { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.ip[data-style="pixel"] .ip-stage-art svg, .ip-sc.s-pixel svg { shape-rendering: crispEdges }

@media (max-width: 1100px) { .hub-styles { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
@media (max-width: 900px) {
  .ip-stage:has(.ip-intent) .ip-stage-art { margin-top: 52px }
  .ip-stage-art .ip-mo { width: clamp(150px, 40vw, 272px); height: auto }
  .ip-stage-hint { bottom: auto }
}
@media (max-width: 640px) {
  .ip-pick-g { grid-template-columns: minmax(0, 1fr); gap: 6px }
  .ip-pick-gl { display: flex; align-items: center; gap: 6px }
  .ip-intent { max-width: calc(100% - 28px); padding-right: 12px }
  .ip-stage-hint { display: none }
  .ip-section { padding-top: clamp(64px, 16vw, 88px) }
  .hub-styles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media print { .ip-map, .ip-make, .ip-sheet, .ip-use-sec { display: none } }

/* without JavaScript: hide what cannot work, keep every note readable */
.ip-intro .ip-note a, .ip-ask-widget .ip-note, .ip-ask-widget .ip-note a, .ip-places .ip-note, .ip-studio-static a { color: var(--ink-2, var(--ink)) }
.ip-ask-widget .ip-note a, .ip-intro .ip-note a { color: var(--ink) }

/* Windows High Contrast / forced colours: swatch colours stay (they are the information); selected states, drawn with
   backgrounds and shadows that forced colours remove, become a Highlight outline. */
@media (forced-colors: active) {
  .ip-pick-b[aria-checked="true"], .ip-sheet-modes [aria-selected="true"], .ip-map-card a[aria-current],
  .ip-ask-widget.is-tasks .ask-task[aria-checked="true"] { outline: 3px solid Highlight; outline-offset: 1px }
}

/* ─────────── live versions: editable live icons that grow out of this one (site-seo liveBlock) ─────────── */
.ip-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: 18px 28px; margin-top: 16px; padding: 20px 22px; border-radius: 22px; background: var(--paper-2); border: 1px solid var(--rule) }
.ip-live-k { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ip-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 22%, transparent) }
.ip-live h3 { margin: 0 0 6px; font: 720 20px/1.2 var(--font-display); color: var(--ink); text-wrap: balance }
.ip-live-copy > p:not(.ip-live-k) { margin: 0 0 10px; font: 450 14.5px/1.45 var(--font-sans); color: var(--muted) }
.ip-live-copy > a { display: inline-flex; align-items: center; gap: 4px; font: 650 14px/1.2 var(--font-sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--sc); text-underline-offset: 3px }
.ip-live-copy > a .arr { width: 15px; height: 15px; transition: transform .3s var(--ip-spring) }
.ip-live-copy > a:hover .arr { transform: translateX(3px) }
.ip-live-list { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: 100%; max-width: calc(var(--n, 3) * 150px); justify-self: end; gap: 10px; margin: 0; padding: 0; list-style: none }
.ip-live-list a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; text-align: center; transition: transform .3s var(--ip-spring), border-color .2s, box-shadow .3s }
.ip-live-list svg { width: 36px; height: 36px; overflow: visible; transition: transform .35s var(--ip-spring), color .2s }
.ip-live-list span { font: 550 12.5px/1.2 var(--font-sans); color: var(--muted) }
.ip-live-list a:hover { transform: translateY(-3px); border-color: var(--sc); box-shadow: 0 16px 32px -22px var(--sc) }
.ip-live-list a:hover svg { transform: scale(1.12); color: var(--sc) }
.ip-live-list a:hover span { color: var(--ink) }
@media (max-width: 760px) { .ip-live { grid-template-columns: 1fr; padding: 18px 16px } .ip-live-list { grid-template-columns: repeat(var(--m, 2), minmax(0, 1fr)); max-width: none; justify-self: stretch } }
@media (prefers-reduced-motion: reduce) { .ip-live-list a, .ip-live-list svg, .ip-live-copy > a .arr { transition: none } .ip-live-list a:hover { transform: none } }

/* ═══════════ v4 (launch): calm icon pages ═══════════
   Above the fold: the icon, a compact style picker, one Download (with every other format one step away), Copy image and
   a quiet Customize. Everything else waits in a "Make it yours" entry, a studio sheet (a modal <dialog>: Customize ·
   Download) and a floating "On this page" map. Only the site header is sticky. */
.ip-page { --ip-out: cubic-bezier(.22, 1, .36, 1) }
@media (min-width: 901px) { .ip-hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 5vw, 80px); align-items: start } }
.ip-lede { max-width: 50ch }
.ip-aka-line { font-size: 14.5px }

/* the style picker: four small groups, icon-only tiles, the name and its one-line story above */
.ip-pickwrap { margin-top: clamp(26px, 3vw, 36px); max-width: 560px }
.ip-pick-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 2.6em; margin: 0 0 12px; font-size: 14.5px; line-height: 1.4; color: var(--muted) }
.ip-pick-k { font: 650 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.ip-pick-head b { font: 750 17px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--style-text, var(--ink)) }
.ip-pick-say { flex: 1 1 260px; min-width: 0 }
.ip-pick { --t: min(52px, calc((100vw - 2 * var(--gutter, 16px) - 18px - 42px) / 8)); display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0 }
/* three rows: Everyday + Crafted (7) · Playful + Studio (8) · Storybook (5); the two pseudo-elements are the line breaks */
.ip-pick::after, .ip-pick::before { content: ""; flex-basis: 100%; height: 14px; order: 1 }
.ip-pick::before { order: 3 }
.ip-pick-g.is-playful, .ip-pick-g.is-studio { order: 2 }
.ip-pick-g.is-storybook, .ip-pick-g.is-more { order: 4 }
.ip-pick-g { display: grid; grid-template-columns: none; gap: 6px; align-content: start }
.ip-pick-gl { display: flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.ip-pick-gl em { padding: 2px 6px; font-size: 9px }
.ip-pick-row { display: flex; gap: 6px }
.ip-pick-b { position: relative; flex: none; width: var(--t); height: var(--t); padding: 0; border-radius: calc(var(--t) * .3); border: 1.5px solid var(--rule); background: var(--card); box-shadow: 0 1px 0 rgba(17, 19, 24, .03); transition: transform .35s var(--ip-spring), border-color .2s, background .3s, box-shadow .3s }
.ip-pick-b span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ip-pick-b svg { width: 54%; height: 54%; color: var(--style-text, var(--sc)) }
.ip-pick-b:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sc) 60%, var(--rule)); box-shadow: 0 12px 22px -16px var(--sc) }
.ip-pick-b[aria-checked="true"] { background: color-mix(in srgb, var(--sc) 14%, var(--card)); border-color: var(--sc); color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 22%, transparent), 0 14px 26px -18px var(--sc); transform: translateY(-2px) }
.ip-pick-b[aria-checked="true"] svg { color: var(--style-text, var(--sc)) }
.ip-pick-b[aria-checked="true"]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--sc) }
.ip-pick-b:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo) }

/* the actions: one primary (Download, with a door to every other format), Copy image, and a quiet Customize */
.ip-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; max-width: 560px; margin-top: clamp(26px, 3vw, 34px) }
.ip-split { position: relative; display: flex; flex: 1 1 300px; min-width: 0; border-radius: 20px; background: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff); box-shadow: 0 22px 40px -24px var(--sc), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background .5s var(--ip-e), box-shadow .3s, transform .3s var(--ip-spring) }
.ip-split:hover { transform: translateY(-2px); box-shadow: 0 28px 46px -24px var(--sc), inset 0 1px 0 rgba(255, 255, 255, .18) }
.ip-go, .ip-go-more { border: 0; background: none; color: inherit; cursor: pointer }
.ip-go { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; flex: 1; min-width: 0; min-height: 68px; padding: 12px 10px 12px 18px; border-radius: 20px 0 0 20px; text-align: left }
.ip-go > svg { width: 26px; height: 26px; transition: transform .35s var(--ip-spring) }
.ip-go:hover > svg { transform: translateY(2px) }
.ip-go-t { min-width: 0 }
.ip-go b { display: block; font: 780 20px/1.1 var(--font-display); letter-spacing: -.015em }
.ip-go small { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 550 13px/1.3 var(--font-sans); opacity: .92 }
.ip-go-more { position: relative; display: grid; place-items: center; flex: none; width: 56px; border-radius: 0 20px 20px 0 }
.ip-go-more::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: currentColor; opacity: .28 }
.ip-go-more svg { width: 22px; height: 22px; transition: transform .35s var(--ip-spring) }
.ip-go-more:hover svg { transform: translateY(2px) }
.ip-go:active, .ip-go-more:active { transform: scale(.97) }
.ip-go:focus-visible, .ip-go-more:focus-visible, .ip-ghost:focus-visible, .ip-minor :focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo) }
.ip-ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 68px; padding: 0 20px 0 16px; border-radius: 20px; border: 1.5px solid var(--rule-strong); background: var(--card); color: var(--ink); font: 720 16px/1.1 var(--font-display); cursor: pointer; transition: transform .3s var(--ip-spring), border-color .2s }
.ip-ghost svg { width: 22px; height: 22px; flex: none }
.ip-ghost:hover { transform: translateY(-2px); border-color: var(--sc) }
.ip-ghost:active { transform: scale(.97) }
.ip-ghost.is-quiet { flex: 1 0 100%; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 680 16px/1.2 var(--font-sans) }
.ip-ghost.is-quiet span { text-decoration: underline; text-decoration-color: var(--sc); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-underline-offset .25s }
.ip-ghost.is-quiet svg { color: var(--style-text, var(--sc)) }
.ip-ghost.is-quiet:hover { transform: none }
.ip-ghost.is-quiet:hover span { text-underline-offset: 7px }
.ip-ghost.is-quiet::after { content: "colour, palettes, size, motion"; font: 500 14px/1.2 var(--font-sans); color: var(--muted) }
.is-busy { cursor: progress }
.ip-ghost.is-busy svg, .ip-go.is-busy > svg { animation: ip-pulse 1s ease-in-out infinite }
@keyframes ip-pulse { 50% { opacity: .35 } }
.ip-minor { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 10px 0 0; font: 600 14px/1.2 var(--font-sans) }
.ip-minor > * { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--muted); text-decoration: none; cursor: pointer; transition: color .2s }
.ip-minor svg { width: 17px; height: 17px }
.ip-minor > *:hover { color: var(--ink) }

/* the live version, under the stage */
.ip-live-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--card); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: transform .3s var(--ip-spring), border-color .2s, box-shadow .3s }
.ip-live-chip-art { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--sc) 12%, var(--paper-2)); color: var(--ink) }
.ip-live-chip-art svg { width: 26px; height: 26px }
.ip-live-chip b { display: flex; align-items: center; gap: 8px; font: 720 15.5px/1.2 var(--font-display) }
.ip-live-chip small { display: block; margin-top: 3px; font: 500 13px/1.3 var(--font-sans); color: var(--muted) }
.ip-live-chip .arr { width: 18px; height: 18px; transition: transform .3s var(--ip-spring) }
.ip-live-chip:hover { transform: translateY(-2px); border-color: var(--sc); box-shadow: 0 18px 32px -24px var(--sc) }
.ip-live-chip:hover .arr { transform: translateX(3px) }
.ip-live-chip .ip-live-dot { animation: ip-live 2.4s ease-in-out infinite }
@keyframes ip-live { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--sc) 0%, transparent) } }

/* ─────────── "On this page": a floating pill + its section map ─────────── */
.ip-map { position: relative; z-index: 70 }
html:not(.js) .ip-map { box-sizing: border-box; max-width: var(--maxw, 1200px); margin: clamp(48px, 6vw, 72px) auto 0; padding-inline: var(--gutter, 16px) }
html:not(.js) .ip-map-l::after { content: " +"; color: var(--muted) }
html:not(.js) .ip-map-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 700 16px/1.2 var(--font-display); color: var(--ink) }
html:not(.js) .ip-map-ic, html:not(.js) .ip-map-now { display: none }
html:not(.js) .ip-map-card { margin-top: 10px }
.ip-map-btn { position: relative; list-style: none }
.ip-map-btn::-webkit-details-marker { display: none }
.js .ip-map { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: auto; margin: 0; transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; transition: transform .55s var(--ip-spring), opacity .3s }
.js .ip-map.is-shown { transform: none; opacity: 1; pointer-events: auto }
.js .ip-map-btn { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: 999px; background: #111318; color: #F7F3EC; box-shadow: 0 18px 40px -16px rgba(17, 19, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .08); cursor: pointer; user-select: none; transition: transform .3s var(--ip-spring), box-shadow .3s }
.js[data-theme="dark"] .ip-map-btn { background: #F4F0E8; color: #111318; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8) }
.js .ip-map-btn:hover { transform: translateY(-2px) }
.js .ip-map-btn:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 7px var(--focus-halo) }
.ip-map-ic { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px }
.ip-map-ic svg { position: absolute; inset: 0; transform: rotate(-90deg) }
.ip-map-track { fill: none; stroke: currentColor; stroke-width: 2.5; opacity: .18 }
.ip-map-prog { fill: none; stroke: var(--sc); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s linear, stroke .4s }
.ip-map-ic i { position: absolute; left: 11px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ip-spring), opacity .2s }
.ip-map-ic i:nth-of-type(1) { top: 12px }
.ip-map-ic i:nth-of-type(2) { top: 17px; width: 10px }
.ip-map-ic i:nth-of-type(3) { top: 22px; width: 12px }
.ip-map[open] .ip-map-ic i:nth-of-type(1) { transform: translateY(5px) rotate(45deg); width: 14px }
.ip-map[open] .ip-map-ic i:nth-of-type(2) { opacity: 0 }
.ip-map[open] .ip-map-ic i:nth-of-type(3) { transform: translateY(-5px) rotate(-45deg); width: 14px }
.ip-map-l { font: 700 15px/1 var(--font-display); letter-spacing: -.005em; white-space: nowrap }
.ip-map-now { max-width: 0; overflow: hidden; white-space: nowrap; font: 500 13.5px/1 var(--font-sans); opacity: .72; transition: max-width .45s var(--ip-out), opacity .3s }
.ip-map-now:not(:empty) { max-width: 180px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent) }
.js .ip-map-card { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - var(--header-h, 72px) - 110px)); overflow: auto; overscroll-behavior: contain; padding: 10px; border-radius: 26px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-l); transform-origin: 100% 100% }
.ip-map-k { margin: 6px 10px 8px; font: 650 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.ip-map-card ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none }
.ip-map-card a { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px; border-radius: 16px; color: var(--ink); text-decoration: none; transition: background .2s }
.ip-map-n { font: 600 11.5px/1 var(--font-mono); color: var(--muted); text-align: center }
.ip-map-t { min-width: 0 }
.ip-map-t b { display: block; font: 680 15px/1.2 var(--font-display) }
.ip-map-t small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1.3 var(--font-sans); color: var(--muted) }
.ip-map-card a:hover { background: var(--paper-2) }
.ip-map-card a[aria-current] { background: color-mix(in srgb, var(--sc) 12%, var(--card)) }
.ip-map-card a[aria-current]::before { content: ""; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--sc) }
.ip-map-card a[aria-current] .ip-map-n { color: var(--style-text, var(--sc)); font-weight: 700 }
.ip-map-card a:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: -2px }
.ip-map-hint { position: absolute; right: 40px; bottom: calc(100% + 6px); display: flex; align-items: flex-end; gap: 2px; margin: 0; white-space: nowrap; font: 700 22px/1 var(--font-hand); color: var(--style-text, var(--sc)); transform: rotate(-4deg) translateY(8px); opacity: 0; pointer-events: none; transition: opacity .4s, transform .6s var(--ip-spring) }
.ip-map-hint.is-on { opacity: 1; transform: rotate(-4deg) }
.ip-map-hint svg { margin-bottom: -12px }
.ip-map[open] .ip-map-hint { display: none }

/* ─────────── "Make it yours": the studio and the downloads, one step away ─────────── */
.ip-make-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: stretch }
.ip-make-card { min-width: 0; border-radius: clamp(26px, 3vw, 34px); background: var(--card); border: 1px solid var(--rule) }
.ip-make-card.is-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); padding: 14px clamp(18px, 2.4vw, 32px) 14px 14px }
.ip-make-prev { position: relative; display: grid; place-items: center; min-height: 300px; padding: 0; border: 0; border-radius: clamp(20px, 2.4vw, 26px); cursor: pointer; overflow: hidden; color: var(--ic);
  background: radial-gradient(90% 80% at 50% 100%, color-mix(in srgb, var(--sc) 30%, transparent), transparent 70%), var(--dot-grid), var(--paper-2); transition: background .6s var(--ip-e) }
.ip-make-art { display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 30px; transition: transform .5s var(--ip-spring) }
.ip-make-art .ip-mo { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ic) }
.ip-make-art svg { width: 100%; height: 100%; overflow: visible; scale: var(--opt, 1); filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--sc) 32%, transparent)) }
.ip-make-prev:hover .ip-make-art { transform: scale(1.06) rotate(-3deg) }
.ip-make-tags { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px }
.ip-make-tags > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 620 12.5px/1 var(--font-sans); color: var(--ink) }
.ip-make-dot { width: 10px; height: 10px; border-radius: 50%; background: #111318; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent) }
.ip-make-prev:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 7px var(--focus-halo) }
.ip-make-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(6px, 1.2vw, 14px) 0 }
.ip-make-card h3 { margin: 0; font: 790 clamp(24px, 2.4vw, 32px)/1.05 var(--font-display); letter-spacing: -.025em }
.ip-make-card h3 small { font: 500 15px/1 var(--font-sans); letter-spacing: 0; color: var(--muted) }
.ip-make-card p { margin: 10px 0 0; max-width: 42ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2, var(--ink)) }
.ip-make-go { display: grid; gap: 14px; margin-top: 22px }
.ip-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 20px; border-radius: 16px; border: 1.5px solid var(--rule-strong); background: var(--card); color: var(--ink); font: 720 16px/1 var(--font-display); cursor: pointer; transition: transform .3s var(--ip-spring), border-color .2s, background .2s }
.ip-btn2 svg { width: 20px; height: 20px; flex: none }
.ip-btn2:hover { transform: translateY(-2px); border-color: var(--sc) }
.ip-btn2:active { transform: scale(.97) }
.ip-btn2.is-ink { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.ip-btn2.is-ink svg { color: currentColor }
.ip-btn2:focus-visible, .ip-make-starts button:focus-visible, .ip-goals button:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo) }
.ip-make-go .ip-btn2.is-ink { justify-self: start }
.ip-make-starts { display: flex; flex-wrap: wrap; gap: 6px }
.ip-make-starts button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 11px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); font: 620 14px/1 var(--font-sans); cursor: pointer; transition: transform .3s var(--ip-spring), border-color .2s, background .2s }
.ip-make-starts svg { width: 17px; height: 17px; color: var(--style-text, var(--sc)) }
.ip-make-starts button:hover { transform: translateY(-2px); border-color: var(--sc); background: var(--card) }
.ip-make-card.is-dl { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 32px); scroll-margin-top: calc(var(--header-h, 72px) + 24px) }
.ip-goals { display: grid; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none }
.ip-goals button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: 18px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); text-align: left; cursor: pointer; transition: transform .3s var(--ip-spring), border-color .2s, background .2s }
.ip-goal-i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 19, 24, .08); transition: background .3s, color .3s, transform .35s var(--ip-spring) }
.ip-goal-i svg { width: 21px; height: 21px }
.ip-goal-t { min-width: 0 }
.ip-goal-t b { display: block; font: 700 15.5px/1.2 var(--font-display) }
.ip-goal-t small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.5px/1.3 var(--font-sans); color: var(--muted) }
.ip-goals .arr { width: 18px; height: 18px; color: var(--muted); transition: transform .3s var(--ip-spring), color .2s }
.ip-goals button:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--sc) 60%, var(--rule)); background: var(--card) }
.ip-goals button:hover .ip-goal-i { background: var(--sc-fill, var(--sc)); color: var(--sc-on, #fff); transform: rotate(-6deg) }
.ip-goals button:hover .arr { transform: translateX(3px); color: var(--ink) }
html:not(.js) .ip-make-grid { display: none }

/* ─────────── the studio sheet ─────────── */
html.ip-locked { overflow: hidden }
.ip-sheet { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: transparent; color: var(--ink); overflow: hidden }
.ip-sheet[open] { display: grid; place-items: center }
.ip-sheet::backdrop { background: rgba(13, 15, 20, .46); -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1); animation: ip-fade .35s ease both }
.ip-sheet.is-closing::backdrop { animation: ip-fade-out .3s ease both }
@keyframes ip-fade { from { opacity: 0 } }
@keyframes ip-fade-out { to { opacity: 0 } }
.ip-sheet-in { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1240px, 100%); height: min(940px, 100%); border-radius: 28px; background: var(--paper); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05); overflow: hidden }
.ip-sheet-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--rule); background: var(--paper) }
.ip-sheet-grab { display: none }
.ip-sheet-id { display: flex; align-items: center; gap: 12px; min-width: 0 }
.ip-sheet-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--sc) 16%, var(--card)); color: var(--ic, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent); transition: background .4s }
.ip-sheet-ic svg { width: 26px; height: 26px; overflow: visible }
.ip-sheet-id > div { min-width: 0 }
.ip-sheet-h { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 780 19px/1.15 var(--font-display); letter-spacing: -.015em }
.ip-sheet-h span { font-family: var(--font-hand); font-weight: 700; font-size: 1.12em; letter-spacing: 0; color: var(--style-text, var(--sc)) }
.ip-sheet-now { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--font-sans); color: var(--muted) }
.ip-sheet-modes { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--rule) }
.ip-sheet-modes button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 150px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: 700 15px/1 var(--font-display); cursor: pointer; transition: color .25s }
.ip-sheet-modes button svg { width: 18px; height: 18px }
.ip-sheet-modes button:hover, .ip-sheet-modes button[aria-selected="true"] { color: var(--ink) }
.ip-sheet-modes button[aria-selected="true"] svg { color: var(--style-text, var(--sc)) }
.ip-sheet-modes button:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 1px }
.ip-sheet-ink { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(17, 19, 24, .1), 0 8px 18px -12px rgba(17, 19, 24, .45); transition: transform .5s var(--ip-spring), width .4s var(--ip-out) }
[data-theme="dark"] .ip-sheet-ink { background: #2B303C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) }
.ip-sheet-x { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; transition: transform .35s var(--ip-spring), border-color .2s }
.ip-sheet-x svg { width: 20px; height: 20px }
.ip-sheet-x:hover { transform: rotate(90deg); border-color: var(--ink) }
.ip-sheet-x:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo) }
.ip-sheet-body { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px clamp(14px, 2vw, 22px) 28px; outline: none }
.ip-sheet-body .wied { --wied-sticky: 0px }
.ip-sheet-body[data-mode="customize"] .wied-out { display: none }
.ip-sheet-body[data-mode="download"] .wied-main { display: none }
.ip-sheet-body[data-mode="download"] .wied-out { padding: 0; border: 0; background: none }
.ip-sheet-wait { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50vh; font: 600 15px/1.4 var(--font-sans); color: var(--muted) }
.ip-sheet-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--rule-strong); border-top-color: var(--sc); animation: ip-spin .8s linear infinite }
@keyframes ip-spin { to { transform: rotate(360deg) } }
.ip-sheet-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px 12px 22px; border-top: 1px solid var(--rule); background: var(--paper) }
.ip-sheet-sum { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.4 var(--font-sans); color: var(--muted) }
.ip-sheet-sum b { color: var(--ink); font-weight: 700 }
.ip-sheet-acts { display: flex; gap: 8px; flex: none }
.ip-sheet-acts .ip-btn2 { min-height: 46px; padding: 0 18px; font-size: 15px }
.ip-sheet .toast, .ip-sheet .wied-toast, .ip-sheet .ip-toast { z-index: 5; bottom: 112px }

@media (max-width: 1100px) {
  .ip-make-grid { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 900px) {
  .ip-pickwrap, .ip-cta { max-width: none }
  .ip-side { display: grid; gap: 12px; order: -1 }
}
@media (max-width: 640px) {
  /* phones: the preview stays first, the title and the Download button follow it closely; the Live version card
     waits until after the buttons */
  .ip-side { display: contents }
  .ip-stage { order: -1 }
  .ip-live-chip { order: 1; margin-top: -8px }
}
@media (max-width: 720px) {
  .ip-make-card.is-studio { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 20px }
  .ip-make-prev { min-height: 230px }
  .ip-make-copy { padding: 4px 10px 0 }
  .ip-make-go .ip-btn2.is-ink { justify-self: stretch }
  /* the sheet becomes a bottom sheet: thumb-reachable, dragged down to close */
  .ip-sheet { padding: 0; padding-top: max(12px, env(safe-area-inset-top)) }
  .ip-sheet[open] { place-items: end stretch }
  .ip-sheet-in { width: 100%; height: min(100%, 94dvh); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5) }
  .ip-sheet-head { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 18px 12px 12px 14px; touch-action: none }
  .ip-sheet-grab { display: block; position: absolute; left: 50%; top: 7px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--rule-strong) }
  .ip-sheet-modes { grid-column: 1 / -1; grid-row: 2 }
  .ip-sheet-modes button { flex: 1; min-width: 0 }
  .ip-sheet-ic { width: 40px; height: 40px }
  .ip-sheet-body { padding: 12px 10px 24px }
  .ip-sheet-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 14px }
  .ip-sheet-sum { display: none }
  .ip-sheet-acts { flex: 1 }
  .ip-sheet-acts .ip-btn2 { flex: 1 }
  .ip-sheet-acts [data-proxy] { flex: 2.2; min-width: 0 }
  .ip-sheet-acts [data-proxy] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .ip-sheet-acts [data-proxy].is-near { display: none }
  .ip-sheet .toast, .ip-sheet .wied-toast, .ip-sheet .ip-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) }
  .js .ip-map { right: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translate(50%, calc(100% + 32px)) }
  .js .ip-map.is-shown { transform: translate(50%, 0) }
  .js .ip-map-card { right: 50%; transform: translateX(50%); transform-origin: 50% 100% }
  .ip-map-now { display: none }
  .ip-map-hint { right: auto; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(8px); font-size: 19px }
  .ip-map-hint.is-on { transform: translateX(-50%) }
  .ip-map-hint svg { display: none }
}
@media (max-width: 640px) {
  .ip-pick { column-gap: 14px; --t: min(48px, calc((100vw - 2 * var(--gutter, 16px) - 14px - 42px) / 8)) }
  .ip-pick-gl { font-size: 10px }
  .ip-pick-head { min-height: 4.2em }
  .ip-go { min-height: 62px; padding-left: 16px; gap: 12px }
  .ip-go b { font-size: 18px }
  .ip-split { flex-basis: 100% }
  .ip-ghost:not(.is-quiet) { flex: 1 1 auto; justify-content: center; min-height: 54px }
  .ip-ghost.is-quiet::after { display: none }
  .ip-goals button { min-height: 58px }
}
@media (hover: none) {
  .ip-pick-b:hover, .ip-split:hover, .ip-ghost:hover, .ip-goals button:hover, .ip-make-starts button:hover, .ip-btn2:hover, .ip-live-chip:hover { transform: none }
  .ip-pick-b[aria-checked="true"] { transform: translateY(-2px) }
}
@media (prefers-reduced-motion: reduce) {
  .js .ip-map, .ip-map-hint, .ip-sheet-ink { transition: none }
  .ip-live-chip .ip-live-dot, .ip-sheet-spin { animation: none }
}
html:not(.js) .ip-intent, html:not(.js) .ip-use-sec, html:not(.js) .ip-map a[href="#in-use"], html:not(.js) .ip-map a[href="#download"] { display: none }
html:not(.js) .ip-cta, html:not(.js) .ip-minor > button { display: none }

/* every-style cards: their buttons wait for a hover or focus (always there on touch screens) */
@media (hover: hover) {
  .ip-sc-act { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .35s var(--ip-spring) }
  .ip-sc:hover .ip-sc-act, .ip-sc:focus-within .ip-sc-act { opacity: 1; transform: none }
}
.ip-sc-act button:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px }
/* inside the sheet the header already names the mode: the panel keeps its one-line promise, not a second title */
.ip-sheet-body .wdl-top { justify-content: flex-start }
.ip-sheet-body .wdl-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@media (max-width: 720px) { .ip-sheet-body .wied-canvas { min-height: 240px } .ip-sheet-body .wied-art { min-height: 150px } .ip-sheet-body .wied-sizes { min-height: 84px; padding-block: 10px 8px } }
/* keyboard: the map sits right after the hero in tab order, and shows itself when it receives focus (a skip link to any section) */
.js .ip-map:focus-within { transform: none; opacity: 1; pointer-events: auto }
@media (max-width: 720px) { .js .ip-map:focus-within { transform: translate(50%, 0) } }