.pattern-preview.focus-preview{position:relative;display:grid;place-items:center;padding:18px;height:180px;overflow:hidden;isolation:isolate}.pattern-preview.focus-preview.pattern-preview--inspector{height:auto;min-height:220px;padding:28px 24px;gap:14px;align-content:center}.focus-badge{position:absolute;top:8px;right:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--focus-accent,rgba(255,255,255,.92));font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.focus-preview__hint{margin:0;font-size:.78rem;color:rgba(203,213,225,.72);text-align:center}.focus-scene{display:grid;grid-gap:12px;gap:12px;align-items:center;width:100%;max-width:280px}.focus-target{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;outline:0 solid transparent;outline-offset:0}.focus-scene--ring{grid-template-rows:auto auto;justify-items:stretch}.focus-scene--ring .focus-scene__field{display:flex;flex-direction:column;gap:4px;padding:9px 12px;border-radius:8px;background:rgba(2,6,23,.55);border:1px solid rgba(125,211,252,.18)}.focus-scene--ring .focus-scene__field-label{font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(148,163,184,.85)}.focus-scene--ring .focus-scene__field-value{font-size:.86rem;color:rgba(241,245,249,.92);letter-spacing:.01em}.focus-shell-panel .focus-target--ring{justify-self:stretch;min-height:48px;padding:11px 18px;border-radius:10px;background:linear-gradient(180deg,#1e293b,#0b1220);color:rgba(241,245,249,.96);border:1px solid rgba(125,211,252,.32);font-size:.9rem;font-weight:600;letter-spacing:.01em;transform:scale(.985);transition:transform var(--focus-duration,.18s) cubic-bezier(.45,1.4,.5,1),outline-color var(--focus-duration,.18s) ease,outline-width var(--focus-duration,.18s) ease,border-color var(--focus-duration,.18s) ease}.focus-target--ring.is-focused,.focus-target--ring:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-accent,#7dd3fc);outline-offset:var(--focus-offset,3px);transform:scale(1);border-color:rgba(125,211,252,.55)}.focus-scene--underline{display:block;margin:0;padding:0 6px;font-size:.92rem;line-height:1.55;color:rgba(203,213,225,.78);text-align:center;letter-spacing:.005em}.focus-scene--underline .focus-scene__lede{color:rgba(203,213,225,.74)}.focus-target--underline{display:inline-flex;align-items:baseline;gap:3px;padding:1px 2px;color:rgba(241,245,249,.92);font-weight:600;border-radius:3px;text-decoration:none;-webkit-text-decoration-color:transparent;text-decoration-color:transparent;transition:color var(--focus-duration,.18s) ease,text-decoration-thickness var(--focus-duration,.18s) ease,-webkit-text-decoration-color var(--focus-duration,.18s) ease;transition:color var(--focus-duration,.18s) ease,text-decoration-color var(--focus-duration,.18s) ease,text-decoration-thickness var(--focus-duration,.18s) ease;transition:color var(--focus-duration,.18s) ease,text-decoration-color var(--focus-duration,.18s) ease,text-decoration-thickness var(--focus-duration,.18s) ease,-webkit-text-decoration-color var(--focus-duration,.18s) ease}.focus-target--underline.is-focused,.focus-target--underline:focus-visible{outline:2px solid transparent;color:var(--focus-accent,#f0abfc);text-decoration:underline;-webkit-text-decoration-color:var(--focus-accent,#f0abfc);text-decoration-color:var(--focus-accent,#f0abfc);text-decoration-thickness:var(--focus-ring-width,2px);text-underline-offset:4px}.focus-target__pip{display:inline-block;font-size:.86em;opacity:0;transform:translateX(-3px);transition:opacity var(--focus-duration,.18s) ease,transform var(--focus-duration,.18s) cubic-bezier(.2,.8,.2,1)}.focus-target--underline.is-focused .focus-target__pip,.focus-target--underline:focus-visible .focus-target__pip{opacity:1;transform:translateX(0)}.focus-scene--shadow{grid-template-rows:auto auto;gap:14px;justify-items:center;padding:14px 16px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(2,6,23,.55),rgba(15,23,42,.32));border:1px solid rgba(253,224,71,.12)}.focus-scene--shadow .focus-scene__caption{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(254,240,138,.78)}.focus-target--shadow{padding:11px 26px;border-radius:999px;background:linear-gradient(180deg,#1e293b,#0f172a);color:rgba(254,252,232,.96);border:1px solid rgba(253,224,71,.34);font-size:.9rem;font-weight:600;letter-spacing:.02em;transition:box-shadow var(--focus-duration,.18s) ease,border-color var(--focus-duration,.18s) ease}.focus-target--shadow.is-focused,.focus-target--shadow:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 2px rgba(2,6,23,.9),0 0 0 calc(4px + var(--focus-shadow-blur, 6px)) var(--focus-accent,#fde047);border-color:color-mix(in srgb,var(--focus-accent,#fde047) 55%,transparent)}@media (prefers-reduced-motion:reduce){.focus-target,.focus-target__pip{transition:none}}