/* Icon pack guide: keep the established detail type and theme; real SVG samples supply the visual comparison. */
/* Center the selected cover inside its black frame with a little more breathing room. */
[data-study="quiet-cards"] [data-resource-id="icons-untitled-pack"] .ip-pack-hero--image > img,
[data-study="quiet-cards"] [data-resource-id="icons-untitled-pack"] .quiet-pack-preview--image > img {
  transform:scale(.96);
  transform-origin:50% 50%;
}
[data-study="quiet-cards"] button.fp-download.tdl-action.fp-download--unavailable:disabled { opacity:.45; cursor:not-allowed; }
/* 2026-10-11 simplified beginner detail: meta line, three steps, illustrations, collapsed advanced use. */
.uig-meta { font-size:12px; line-height:1.7; color:var(--muted); margin:10px 0 0; }
.uig-body { max-width:1040px; }
.uig-section { border-top:1px solid var(--line); margin-top:44px; padding-top:28px; }
.uig-section h2 { margin-bottom:12px; }
.uig-intro { font-size:14px; line-height:1.9; color:var(--muted); max-width:72ch; margin:0; }
.uig-prompt button:focus-visible,.uig-prompt pre:focus-visible,.uig-advanced summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.uig-steps { list-style:none; counter-reset:use-step; padding:0; margin:20px 0 24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 32px; }
.uig-steps li { counter-increment:use-step; padding-left:28px; position:relative; min-width:0; }
.uig-steps li::before { content:counter(use-step); position:absolute; left:0; top:2px; font-size:12px; color:var(--muted); }
.uig-steps strong { font-size:14px; font-weight:500; line-height:1.7; }
.uig-steps p { font-size:13px; line-height:1.9; margin-top:6px; color:var(--muted); }
.uig-prompt { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); }
.uig-prompt-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:12px; }
.uig-prompt-head button { font-size:12px; color:var(--ink); text-decoration:underline; text-underline-offset:4px; background:transparent; padding:4px 0; }
.uig-prompt pre { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.9 var(--mono); padding:18px; margin:0; color:var(--ink); max-width:100%; }
.uig-prompt code { font:inherit; }
.uig-copy-status { font-size:12px; color:var(--muted); margin:0; padding:0 18px; }
.uig-copy-status:not(:empty) { padding-bottom:14px; }
.uig-tip { font-size:13px; line-height:1.9; color:var(--ink); margin-top:18px; }
.uig-style-list { margin-top:20px; }
.uig-style-row { display:grid; grid-template-columns:minmax(200px,.9fr) minmax(240px,1.1fr); align-items:center; gap:30px; padding:20px 0; border-bottom:1px solid var(--line); }
.uig-style-row:first-child { padding-top:4px; }
.uig-style-row:last-child { border-bottom:0; }
.uig-style-copy h3 { font-size:15px; font-weight:500; line-height:1.6; margin:0 0 4px; }
.uig-style-copy p { font-size:13px; line-height:1.9; color:var(--muted); margin:0; }
.uig-icon-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; justify-items:center; color:var(--ink); padding:20px 0; }
.uig-icon-strip svg { width:32px; height:32px; display:block; }

.uig-prompt-tip { font-size:12px; line-height:1.9; color:var(--muted); margin:12px 0 0; max-width:76ch; }
.uig-mini-steps { margin:0 0 16px; padding-left:20px; font-size:13px; line-height:1.9; color:var(--muted); }
.uig-mini-steps li + li { margin-top:4px; }
.uig-figure { margin:24px 0 0; min-width:0; }
.uig-figure img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; border-radius:12px; border:1px solid var(--line); box-sizing:border-box; background:#f4f5f7; }
.uig-advanced { margin-top:28px; border-top:1px solid var(--line); padding-top:18px; }
.uig-advanced summary { cursor:pointer; font-size:13px; line-height:1.7; color:var(--muted); list-style:none; display:flex; align-items:center; gap:8px; }
.uig-advanced summary::-webkit-details-marker { display:none; }
.uig-advanced summary::before { content:'+'; display:inline-flex; width:16px; justify-content:center; font-size:14px; color:var(--ink); }
.uig-advanced[open] summary::before { content:'−'; }
.uig-advanced summary:hover { color:var(--ink); }
.uig-advanced-body { padding-top:16px; }
.uig-advanced-body > p { font-size:13px; line-height:1.9; color:var(--muted); margin:0 0 14px; }
.uig-links { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; margin-top:12px; }
.uig-section a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:1100px) {
  .uig-style-row { grid-template-columns:1fr; gap:6px; }
  .uig-icon-strip { justify-items:start; max-width:420px; padding:12px 0; }
}
@media(max-width:759px) {
  .uig-section { margin-top:32px; padding-top:24px; }
  .uig-steps { grid-template-columns:1fr; gap:18px; }
  .uig-prompt-head { padding:12px 14px; }
  .uig-prompt pre { padding:14px; font-size:12px; }
  .uig-icon-strip { gap:12px; }
  .uig-icon-strip svg { width:28px; height:28px; }
}