/* v2 styles are scoped so the retained course and builder keep working independently. */
body:has(.library-page) { overflow-x: clip; background: #000; color: #e8eaed; color-scheme: dark; }
body:has(.library-page) .bloom, body:has(.library-page) .legacy-footer { display: none; }
.site-frame:has(.library-page) { max-width: 1120px; }
.library-page { --lib-muted: #9ca3af; padding: 0 40px; min-height: 100dvh; color: #e8eaed; }
.library-page a, .library-page button, .library-page input { -webkit-tap-highlight-color: transparent; }
.library-page :focus-visible { outline: 2px solid #8ab4f8; outline-offset: 5px; }
.library-page button { cursor: pointer; }
.library-header { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #ffffff0d; }
.library-wordmark { display: inline-flex; gap: 10px; align-items: center; font-size: 19px; font-weight: 400; letter-spacing: -.5px; }
.wordmark-light { color: #abb2be; font-weight: 400; }
.library-mark { width: 32px; height: 32px; flex-shrink: 0; }
.library-intro { padding: 58px 0 35px; }
.library-eyebrow { color: #8ab4f8; font-size: 12px; letter-spacing: .02em; }
.library-intro h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 400; line-height: 1.25; letter-spacing: -.045em; margin: 0 0 15px; }
.title-dot { color: #8ab4f8; }
.library-intro > p:last-child { color: #9ca3af; font-size: 15px; }
.library-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.library-tabs a { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 24px; border-radius: 24px; font-size: 14px; color: #a8aeb8; transition: background .2s, color .2s; }
.library-tabs a:hover { background: #1c1e22; color: #e8eaed; }
.library-tabs a[aria-current] { color: #d3e6ff; background: linear-gradient(115deg, #183451, #234e80); }
.library-search { display: flex; align-items: center; gap: 14px; padding: 0 22px; min-height: 60px; background: #1b1d21; border: 1px solid #ffffff06; border-radius: 32px; color: #9ca3af; }
.library-search { transition: border-color .22s, background .22s, box-shadow .22s; }
.library-search:focus-within { border-color: #8ab4f880; background: #202329; box-shadow: 0 0 0 3px #8ab4f80a; }
.library-search svg { flex-shrink: 0; }
.library-search input { width: 100%; min-width: 0; padding: 18px 0; border: 0; background: transparent; color: #e8eaed; outline: none; font-size: 14px; }
.library-search input::placeholder { color: #9399a4; }
.library-search input:focus-visible { outline: none; }
.library-search button { min-width: 36px; height: 36px; font-size: 24px; }
.library-search input::-webkit-search-cancel-button { display: none; }
.library-filters { display: flex; gap: 8px; overflow-x: auto; padding: 22px 1px 8px; scrollbar-width: none; }
.library-filters button { flex-shrink: 0; min-height: 44px; padding: 0 17px; border: 1px solid #2c2e33; border-radius: 24px; font-size: 12px; color: #b0b6c2; transition: background .2s, color .2s, border-color .2s; }
.library-filters button[aria-pressed=true] { background: #263b56; color: #c2e7ff; border-color: #8ab4f838; }
.library-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 28px 0 18px; }
.library-section-heading h2 { font-size: 17px; font-weight: 500; letter-spacing: -.03em; }
.library-section-heading > span { color: #888f9b; font-size: 11px; flex-shrink: 0; }
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px 20px; }
.library-card { min-width: 0; border-radius: 24px; }
.library-art { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.16; border-radius: 24px; background: #111214; border: 1px solid #ffffff04; }
.library-card .library-art { transition: border-color .35s, box-shadow .35s; }
.library-card:hover .library-art, .library-card:focus-visible .library-art { border-color: #8ab4f842; box-shadow: 0 8px 30px -18px #4285f455; }
.library-card:hover h3 { color: #a8c7fa; }
.library-cover { width: 100%; height: 100%; object-fit: cover; }
.library-art-badge { position: absolute; left: 15px; top: 15px; padding: 5px 10px; border-radius: 20px; background: #10121675; color: #e0e5ed; font-size: 10px; backdrop-filter: blur(10px); border: 1px solid #ffffff08; }
.library-art-caption { position: absolute; bottom: 17px; left: 19px; right: 19px; display: flex; justify-content: space-between; font-size: 11px; color: #c2d8f8; letter-spacing: .03em; }
.library-art-caption > span { font-size: 19px; line-height: 15px; }
.library-card-info { padding: 15px 3px 0; }
.library-card-info h3 { font-size: 15px; line-height: 1.5; font-weight: 500; letter-spacing: -.025em; transition: color .2s; }
.library-card-info p { display: flex; gap: 6px; align-items: center; margin-top: 7px; color: #858c98; font-size: 11px; }
.art-object { position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; animation: library-float 16s ease-in-out infinite; transition: scale .65s cubic-bezier(.2,0,0,1); }
.library-card:hover .art-object, .library-card:focus-visible .art-object { scale: 1.035; }
.library-card:nth-child(2n) .art-object { animation-delay: -5s; }
.library-card:nth-child(3n) .art-object { animation-delay: -10s; }
.art-object i { position: absolute; display: block; }
.art-orbit { background: #101113; }
.art-orbit .art-object { aspect-ratio: 1; height: auto; top: 13%; }
.art-orbit i { border-radius: 50%; inset: 0; background: radial-gradient(circle, #10151e 29%, #122747 44%, #23549b 57%, #8ab4f8 64%, #c2e7ff 65%, #4775a555 68%, transparent 74%); filter: blur(2px); opacity: .7; }
.art-orbit i:nth-child(2) { inset: 18%; background: radial-gradient(circle, #0c101a 21%, #17356a 39%, #1a73e8 58%, #8ab4f8 65%, #c2e7ff 67%, #4285f450 70%, transparent 75%); filter: blur(.7px); opacity: 1; }
.art-orbit i:nth-child(3) { inset: 41%; background: radial-gradient(circle at 38% 26%, #6a9fe8, #2458b0 48%, #122651 80%); box-shadow: 0 0 16px #4285f44a; filter: blur(.6px); opacity: 1; }
.art-orbit i:nth-child(n+4) { display: none; }
.art-sphere { background: #101113; }
.art-sphere i { border-radius: 50%; width: 90%; aspect-ratio: 1; top: 11%; left: 5%; background: radial-gradient(ellipse at 50% 100%, #101113 43%, #142647 59%, #285a99 72%, #8ab4f8 87%, #c2e7ff 94%, transparent 99%); filter: blur(1.2px); mask-image: linear-gradient(#000 45%, transparent 86%); }
.art-sphere i:nth-child(2) { width: 70%; left: 15%; top: 39%; }
.art-sphere i:nth-child(3) { width: 49%; left: 25.5%; top: 65%; opacity: .85; }
.art-sphere i:nth-child(n+4) { display: none; }
.art-wave { background: #101113; }
.art-wave .art-object { width: 130%; left: -15%; top: 22%; transform: rotate(-24deg); }
.art-wave i { width: 110%; height: 60%; border-radius: 50%; top: 0; background: radial-gradient(ellipse at 50% 100%, transparent 55%, #17366888 64%, #4285f4bb 72%, #c2e7ff 77%, transparent 79%); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.art-wave i:nth-child(2) { top: 16%; opacity: .85; }
.art-wave i:nth-child(3) { top: 32%; opacity: .7; }
.art-wave i:nth-child(4) { top: 48%; opacity: .5; }
.art-wave i:nth-child(5) { display: none; }
.art-portal { background: linear-gradient(155deg, #174783 0%, #1a73e8 28%, #4285f4 47%, #8ab4f8 75%, #c2e7ff 100%); }
.art-portal .library-art-caption { color: #15365f; }
.art-portal .art-object { width: 62%; height: 32%; left: 19%; top: 35%; border-radius: 999px; background: #d9eaff26; box-shadow: inset 0 1px 0 #ffffff18; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; }
.art-portal i { width: 37%; height: 3px; border-radius: 3px; background: #edf6ff; top: 34%; left: 32%; }
.art-portal i:nth-child(2) { top: 49%; width: 27%; }
.art-portal i:nth-child(3) { top: 64%; width: 32%; }
.art-portal i:nth-child(n+4) { display: none; }
@keyframes library-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (hover: hover) {
  .library-filters button:hover { border-color: #8ab4f866; }
}
.library-page button:active, .library-student-subscribe:active { transform: scale(.985); }
.benefit-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 19px 22px; margin-top: 48px; background: #131b29; border: 1px solid #8ab4f814; border-radius: 16px; color: #b7c9e6; font-size: 12px; }
.benefit-strip > span > span { margin-right: 9px; color: #8ab4f8; }
.benefit-strip a { flex-shrink: 0; color: #a8c7fa; padding: 5px 0; }
.library-footer { display: flex; justify-content: space-between; gap: 16px; padding: 25px 0 32px; color: #737b89; font-size: 10px; }
.library-empty { padding: 55px 20px; background: #14161a; border: 1px solid #ffffff08; border-radius: 22px; text-align: center; }
.empty-symbol { display: block; color: #8ab4f8; font-size: 34px; margin-bottom: 16px; }
.library-empty h3 { font-size: 17px; font-weight: 500; }
.library-empty p { font-size: 13px; line-height: 1.7; color: #9ca3af; margin: 12px auto 22px; max-width: 340px; }
.library-empty a { font-size: 13px; color: #a8c7fa; }
.library-tool { display: flex; gap: 24px; padding: 28px; margin-top: 14px; background: #17191e; border: 1px solid #ffffff0a; border-radius: 22px; }
.library-tool:hover { border-color: #8ab4f866; }
.tool-number { color: #8ab4f8; font-size: 13px; padding-top: 4px; }
.library-tool h3 { font-size: 20px; font-weight: 500; }
.library-tool p { color: #9ca3af; font-size: 13px; margin-top: 8px; line-height: 1.7; }
.tool-action { display: inline-block; color: #a8c7fa; font-size: 12px; margin-top: 23px; }
.library-detail { max-width: 820px; margin: 0 auto; }
.library-back { display: inline-flex; align-items: center; min-height: 44px; color: #a4acb9; font-size: 13px; margin: 22px 0 12px; }
.library-detail-visual { position: relative; }
.library-detail-visual .library-art { aspect-ratio: 1.9; }
.library-detail-visual .art-object { width: 46%; left: 27%; }
.library-detail-visual .art-wave .art-object { width: 90%; left: 5%; }
.library-detail-visual .art-portal .art-object { width: 30%; left: 35%; }
.original-post { position: absolute; right: 15px; top: 15px; font-size: 11px; border-radius: 20px; padding: 8px 12px; background: #101216d9; }
.detail-heading { margin: 32px 0; }
.detail-heading h1 { font-size: 32px; line-height: 1.35; letter-spacing: -.04em; font-weight: 400; margin-top: 12px; }
.detail-section { margin-top: 32px; }
.detail-section h2 { font-size: 18px; font-weight: 500; }
.detail-section > p { margin-top: 12px; color: #b0b6c2; font-size: 15px; line-height: 1.85; }
.library-steps { margin-top: 18px; }
.library-steps li { display: flex; align-items: baseline; gap: 16px; margin-top: 16px; }
.library-steps li > span { color: #8ab4f8; font-size: 12px; font-variant-numeric: tabular-nums; }
.library-steps p { font-size: 14px; line-height: 1.85; color: #b0b6c2; }
.library-prompt-section { background: #17191d; border: 1px solid #ffffff0b; padding: 24px; border-radius: 22px; }
.library-prompt-section .library-section-heading { margin-top: 0; }
.library-prompt-text { font-family: inherit; font-size: 14px; line-height: 1.95; color: #bec5d1; white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid #ffffff0d; padding-top: 20px; user-select: text; }
.library-copy-actions { margin-top: 24px; }
.library-copy-actions button { width: 100%; min-height: 48px; border-radius: 25px; background: linear-gradient(110deg, #8ab4f8, #c2e7ff); color: #142d51; font-size: 14px; font-weight: 600; transition: background .2s, transform .2s; }
.library-copy-actions button:hover { background: #c2d8fc; }
.library-copy-actions button span { margin-left: 8px; }
.library-copy-actions p { font-size: 12px; line-height: 1.7; color: #a8c7fa; margin-top: 8px; }
.library-copy-actions p:empty { display: none; }
.library-student-subscribe { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px; padding: 12px 16px; border: 1px solid #8ab4f847; border-radius: 25px; background: #1a2b43; color: #c2d8fc; font-size: 14px; font-weight: 500; text-align: center; }
.library-student-subscribe:hover { background: #223b5c; border-color: #8ab4f880; }
.open-gemini { display: block; text-align: center; padding: 16px 0 0; color: #a8c7fa; font-size: 12px; }
@media (max-width: 767px) {
  .library-page { padding: 0 20px; }
  .library-header { height: 72px; }
  .library-wordmark { font-size: 17px; gap: 8px; }
  .library-intro { padding: 36px 0 27px; }
  .library-intro h1 { font-size: 34px; margin: 0 0 13px; }
  .library-intro > p:last-child { font-size: 13px; }
  .library-eyebrow { font-size: 11px; }
  .library-tabs { gap: 4px; justify-content: space-between; margin-bottom: 18px; }
  .library-tabs a { padding: 0 15px; font-size: 12px; flex: 1; white-space: nowrap; }
  .library-tabs a:first-child { flex: 1.4; }
  .library-search { min-height: 54px; padding: 0 16px; gap: 10px; }
  .library-search input { font-size: 16px; padding: 15px 0; }
  .library-search input::placeholder { font-size: 12px; }
  .library-filters { padding-top: 18px; }
  .library-filters button { padding: 0 13px; min-height: 44px; }
  .library-section-heading { margin: 22px 0 16px; }
  .library-section-heading h2 { font-size: 15px; }
  .library-section-heading > span { font-size: 10px; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .library-art { aspect-ratio: 1; border-radius: 22px; }
  .library-art-badge { top: 10px; left: 10px; font-size: 9px; padding: 4px 8px; }
  .library-art-caption { left: 12px; right: 12px; bottom: 13px; font-size: 9px; }
  .library-card-info { padding: 12px 1px 0; }
  .library-card-info h3 { font-size: 13px; }
  .library-card-info p { font-size: 10px; margin-top: 6px; }
  .benefit-strip { margin-top: 34px; padding: 15px 13px; font-size: 10px; gap: 8px; }
  .benefit-strip > span > span { margin-right: 3px; }
  .library-footer { font-size: 9px; gap: 8px; }
  .library-detail-visual .library-art { aspect-ratio: 1.3; }
  .library-detail-visual .art-object { width: 65%; left: 17.5%; }
  .library-detail-visual .art-portal .art-object { width: 50%; left: 25%; }
  .detail-heading h1 { font-size: 27px; }
  .library-prompt-section { padding: 20px 17px; }
  .library-prompt-section .library-section-heading { flex-wrap: wrap; }
  .library-tool { padding: 22px 18px; gap: 16px; }
}
@media (max-width: 359px) {
  .library-page { padding: 0 14px; }
  .library-tabs a { padding: 0 10px; }
  .benefit-strip { flex-wrap: wrap; }
}
/* reduced-motion disabled on .library-page so mobile users with battery saver still see the hero & card motion graphics */

/* v3 — Figma "GSA Prompt Library v2 – UI/UX": black stage, glow hero, centered editorial layout */
.library-header { height: 80px; border-bottom: 0; }
.library-wordmark { font-size: 18px; font-weight: 500; letter-spacing: -.3px; }
.library-header-note { color: #a8aeb8; font-size: 12px; }
.library-header a.library-header-note { font-size: 14px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.library-header a.library-header-note:hover { color: #e8eaed; }
.library-intro { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; width: 100vw; margin-left: calc(50% - 50vw); height: 520px; padding: 80px 20px 0; overflow: hidden; }
.library-intro > * { position: relative; z-index: 1; }
.library-intro::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 76px; width: min(900px, 100vw); height: 420px; translate: -50% 0; background: radial-gradient(ellipse at 50% 50%, #4285f48c 0%, #9b72cb4d 45%, #d965701f 75%, transparent 100%); filter: blur(70px); pointer-events: none; }
.library-intro::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 360px; width: 1440px; height: 900px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% calc(50% + 3px), #000 99.4%, transparent 100%), linear-gradient(90deg, transparent, #4285f4b3 30%, #c2e7ff 50%, #9b72cbb3 70%, transparent);
  filter: drop-shadow(0 -4px 14px #4285f499); }
.library-eyebrow { font-size: 12px; letter-spacing: .02em; }
.library-intro h1 { margin: 0; font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.library-intro > p:last-child { margin: 0; color: #a8aeb8; font-size: 16px; line-height: 1.8; }
.library-tabs { justify-content: center; }
.library-search { max-width: 720px; margin-inline: auto; background: #1b1d21; }
.library-filters { justify-content: safe center; }
.library-filters button { color: #a8aeb8; border-color: #ffffff1a; }
.library-filters button[aria-pressed=true] { background: #f1f3f4; color: #000; border-color: transparent; font-weight: 500; }
.library-section-heading { margin: 40px 0 24px; align-items: flex-end; }
.library-section-heading h2 { font-size: 18px; font-weight: 500; }
.library-section-heading > span { font-size: 12px; color: #7a818d; }
.library-grid { gap: 48px 20px; }
.library-art { background: #0e0f11; border: 0; }
.library-card-info { padding: 16px 0 0; }
.library-card-info h3 { font-size: 18px; font-weight: 500; letter-spacing: -.3px; }
.library-card-info p { margin-top: 6px; font-size: 12px; color: #7a818d; }
.benefit-strip { margin-top: 56px; padding: 20px 24px; background: #8ab4f812; border-color: #8ab4f833; color: #a8aeb8; font-size: 14px; }
.library-footer { margin-top: 32px; padding: 24px 0 40px; border-top: 1px solid #ffffff1a; font-size: 12px; color: #7a818d; }
/* detail */
.library-detail { max-width: none; }
.detail-hero { height: 440px; padding-top: 72px; }
.detail-hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; margin: 0; }
.detail-hero .library-eyebrow { margin: 0; }
.library-detail > article { max-width: 760px; margin: 0 auto; padding: 32px 0 48px; }
.detail-section { margin-top: 56px; }
.library-detail > article > .detail-section:first-child { margin-top: 0; }
.detail-section > p { color: #a8aeb8; }
.library-steps li { align-items: flex-start; gap: 16px; }
.library-steps li > span { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #8ab4f824; color: #8ab4f8; font-size: 12px; }
.library-steps p { font-size: 14px; color: #a8aeb8; padding-top: 3px; }
.library-prompt-section { background: #0e0f11; border-color: #ffffff1a; padding: 32px; border-radius: 24px; }
.library-prompt-text { color: #a8aeb8; font-size: 14px; line-height: 1.95; }
.library-copy-actions button { min-height: 52px; border-radius: 999px; }
.library-student-subscribe { min-height: 52px; border-radius: 999px; background: transparent; border: 1px solid #8ab4f8; color: #8ab4f8; }
.library-student-subscribe:hover { background: #8ab4f81a; border-color: #8ab4f8; }
.open-gemini { color: #a8aeb8; }
@media (max-width: 767px) {
  .library-header { height: 72px; }
  .library-intro { height: 420px; padding-top: 64px; gap: 16px; }
  .library-intro::before { top: 120px; height: 260px; filter: blur(50px); }
  .library-intro::after { top: 260px; width: 840px; }
  .library-intro h1 { font-size: 40px; }
  .library-intro > p:last-child { font-size: 14px; }
  .library-grid { grid-template-columns: 1fr; gap: 32px; }
  .library-art { aspect-ratio: 1.17; border-radius: 24px; }
  .library-art-badge { top: 14px; left: 14px; font-size: 10px; padding: 5px 10px; }
  .library-art-caption { left: 18px; right: 18px; bottom: 16px; font-size: 11px; }
  .library-card-info h3 { font-size: 16px; }
  .library-card-info p { font-size: 12px; }
  .benefit-strip { margin-top: 40px; font-size: 12px; }
  .detail-hero { height: 330px; padding-top: 56px; }
  .detail-hero h1 { font-size: 32px; }
  .library-prompt-section { padding: 24px 20px; }
}
/* full-screen hero → content sheet rises over it (scroll-driven) */
.library-header { position: fixed; z-index: 10; top: 0; left: 0; right: 0; padding-inline: max(40px, calc((100vw - 1040px) / 2)); background: linear-gradient(#000 35%, transparent); }
.library-page { padding-top: 0; }
.library-intro { position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 560px; padding-top: max(112px, 17svh); margin-bottom: 0; -webkit-mask-image: none; mask-image: none; transform-origin: 50% 0; }
.detail-hero { height: 100svh; padding-top: max(112px, 17svh); }
.library-intro::before { top: 10%; height: 62%; }
.library-intro::after { top: 72%; }
.library-intro > p:not(.library-eyebrow) { margin: 0; color: #a8aeb8; font-size: 16px; line-height: 1.8; }
.library-intro > .hero-cue { position: absolute; z-index: 1; left: 50%; bottom: 28px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #7a818d; font-size: 12px; letter-spacing: .08em; }
.library-intro > .hero-cue::after { content: ""; width: 1px; height: 28px; background: linear-gradient(#8ab4f8, transparent); animation: hero-cue 2.2s ease-in-out infinite; }
@keyframes hero-cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
.library-sheet { position: relative; z-index: 2; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 max(40px, calc((100vw - 1040px) / 2)); background: #000; }
.library-sheet::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 38svh; background: linear-gradient(to bottom, transparent, #000 92%); pointer-events: none; }
.library-sheet { padding-top: 8px; }
.library-sheet > article { max-width: 760px; margin: 0 auto; padding: 24px 0 48px; }
.library-sheet > article > .detail-section:first-child { margin-top: 0; }
@keyframes hero-out { to { opacity: 0; scale: .94; } }
@keyframes hero-text-out { to { translate: 0 -60px; opacity: 0; } }
@keyframes hero-glow-drift { to { translate: -50% 120px; } }
@supports (animation-timeline: scroll()) {
  .library-intro { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  .library-intro > :not(.hero-cue) { animation: hero-text-out linear both; animation-timeline: scroll(root); animation-range: 0 55svh; }
  .library-intro > .hero-cue { animation: hero-text-out linear both, none; animation-timeline: scroll(root); animation-range: 0 20svh; }
  .library-intro::after { animation: hero-glow-drift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
}
@media (max-width: 767px) {
  .library-header { padding-inline: 20px; }
  .library-intro, .detail-hero { height: 100svh; padding-top: max(96px, 15svh); }
  .library-intro::before { top: 10%; height: 55%; }
  .library-intro::after { top: 72%; width: 900px; }
  .library-sheet { padding-inline: 20px; }
}
/* reduced-motion kept active on .library-intro */
/* "Ask Gemini" glow search (design.google ref): gradient rim, side glow, star-dot halo */
.library-search { position: relative; max-width: 720px; min-height: 64px; margin-block: 28px 8px; border: 1.5px solid transparent; color: #a8aeb8;
  background: linear-gradient(#0f0e14, #0f0e14) padding-box, linear-gradient(90deg, #ff5fa8, #9b72cb 50%, #4285f4) border-box;
  box-shadow: -14px 0 36px -10px #ff5fa880, 14px 0 36px -10px #4285f480; }
.library-search:focus-within { border-color: transparent; background: linear-gradient(#13121a, #13121a) padding-box, linear-gradient(90deg, #ff5fa8, #9b72cb 50%, #4285f4) border-box; box-shadow: -18px 0 46px -8px #ff5fa8b0, 18px 0 46px -8px #4285f4b0; }
.library-search::before { content: ""; position: absolute; z-index: -1; inset: -36px -60px; border-radius: 999px; pointer-events: none; opacity: .5; transition: opacity .5s;
  background: linear-gradient(90deg, #ff5fa8, #9b72cb 50%, #4285f4);
  -webkit-mask-image: radial-gradient(circle, #000 1px, transparent 1.7px), radial-gradient(ellipse closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(circle, #000 1px, transparent 1.7px), radial-gradient(ellipse closest-side, #000 52%, transparent 100%);
  -webkit-mask-size: 9px 9px, 100% 100%; mask-size: 9px 9px, 100% 100%; -webkit-mask-composite: source-in; mask-composite: intersect; }
.library-search:focus-within::before { opacity: 1; }
.library-search input { caret-color: #4285f4; }
/* panels rising from the bottom edge (design.google ref): blue dawn + multicolor wave */
.library-art.art-sphere, .library-art.art-portal { background: #04050a; }
.library-art.art-sphere .art-object, .library-art.art-portal .art-object { inset: 0; width: 100%; height: 100%; top: 0; left: 0; animation: none; display: block; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
.library-art.art-sphere i, .library-art.art-portal i { position: absolute; display: block; aspect-ratio: auto; mask-image: none; top: auto; border-radius: 0; filter: none; opacity: 1; }
.library-art.art-sphere i:nth-child(1) { left: -20%; width: 140%; height: 85%; bottom: -12%; background: radial-gradient(ellipse at 50% 100%, #4a86f7 0%, #2c55c4 28%, #112060 58%, transparent 82%); filter: blur(10px); }
.library-art.art-sphere i:nth-child(2) { left: 22%; width: 56%; height: 2px; bottom: 17%; background: linear-gradient(90deg, transparent, #c2e7ff, transparent); filter: blur(.8px); }
.library-art.art-sphere i:nth-child(3), .library-art.art-portal i:nth-child(2) { left: -10%; width: 120%; height: 24%; bottom: -8%; border-radius: 50% 50% 0 0; background: #07080f; box-shadow: 0 -8px 34px #4285f48a; }
.library-art.art-sphere i:nth-child(n+4), .library-art.art-portal i:nth-child(n+3) { display: none; }
.library-art.art-portal i:nth-child(1) { left: -10%; width: 120%; height: 88%; bottom: -10%; filter: blur(14px);
  background: radial-gradient(ellipse 38% 52% at 22% 100%, #b07cf0, transparent 72%), radial-gradient(ellipse 30% 78% at 55% 100%, #ffd23a, transparent 72%), radial-gradient(ellipse 32% 62% at 80% 100%, #34c46a, transparent 72%), radial-gradient(ellipse 70% 50% at 50% 100%, #4285f4aa, transparent 82%); }
.library-art.art-portal i:nth-child(2) { box-shadow: 0 -8px 34px #ffd23a55; }
.art-portal .library-art-caption { color: #e4ecfa; }
@media (max-width: 767px) { .library-search { margin-block: 24px 4px; } .library-search::before { inset: -28px -20px; } }
/* detail: compact hero so the content is visible without scrolling */
.library-intro.detail-hero { position: relative; height: 300px; min-height: 0; padding-top: 108px; animation: none; -webkit-mask-image: none; mask-image: none; }
.library-intro.detail-hero > * { animation: none; }
.detail-hero::before { top: 24px; height: 220px; filter: blur(50px); }
.detail-hero::after { top: 196px; animation: none; }
.detail-hero + .library-sheet::before { height: 90px; }
.detail-hero + .library-sheet > article { padding-top: 8px; }
@media (max-width: 767px) {
  .library-intro.detail-hero { height: 240px; min-height: 0; padding-top: 92px; }
  .detail-hero::before { top: 30px; height: 150px; }
  .detail-hero::after { top: 168px; width: 900px; }
}
/* interaction: tabs are unlit black pills; a spotlight glides behind them */
.library-tabs { position: relative; }
.tab-spot { position: absolute; z-index: -1; top: -8px; bottom: -8px; left: 0; width: var(--spot-w, 0); transform: translateX(var(--spot-x, 0)); border-radius: 999px; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, #4285f4 0%, #7b5cd6b0 48%, transparent 76%); filter: blur(16px); }
.library-tabs[data-ready] .tab-spot { opacity: .95; transition: transform .7s cubic-bezier(.22, 1, .36, 1), width .7s cubic-bezier(.22, 1, .36, 1); }
.library-tabs a { background: #07080b; border: 1px solid #ffffff14; color: #8e95a1; transition: background .45s .12s, border-color .45s .12s, color .3s .1s, box-shadow .45s .12s; }
.library-tabs a:hover { background: #0d0e13; color: #e8eaed; border-color: #ffffff2e; }
.library-tabs a[aria-current] { color: #d3e6ff; background: linear-gradient(115deg, #183451, #234e80); border-color: #8ab4f8a6; box-shadow: inset 0 0 22px #4285f433; }
.library-tabs a:active { transform: scale(.97); }
/* chips, cards, buttons */
.library-filters button { transition: background .25s, color .25s, border-color .25s, transform .2s, box-shadow .3s; }
@media (hover: hover) { .library-filters button:hover { transform: translateY(-1px); color: #e8eaed; } }
.library-filters button[aria-pressed=true] { box-shadow: 0 0 22px #f1f3f433; }
.library-card { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .library-card:hover { transform: translateY(-5px); } }
.library-card:hover .library-art, .library-card:focus-visible .library-art { box-shadow: 0 18px 50px -22px #4285f4aa; }
.library-card:active { transform: translateY(-2px) scale(.99); }
.library-card-info p svg { transition: transform .3s; }
.library-card:hover .library-card-info p svg { transform: translateY(-1px) scale(1.12); }
.library-copy-actions button { position: relative; overflow: hidden; transition: transform .2s, box-shadow .3s, background .3s; }
.library-copy-actions button::after { content: ""; position: absolute; inset: 0; translate: -120% 0; background: linear-gradient(100deg, transparent 30%, #ffffff80 50%, transparent 70%); transition: translate .7s; }
@media (hover: hover) { .library-copy-actions button:hover { box-shadow: 0 8px 30px -8px #8ab4f8aa; } .library-copy-actions button:hover::after { translate: 120% 0; } }
.library-copy-actions button.is-done { background: linear-gradient(110deg, #7fe0a5, #c2f7d8); color: #08301a; }
.library-copy-actions button span { display: inline-block; transition: transform .3s; }
.library-copy-actions button.is-done span { transform: scale(1.25) rotate(-8deg); }
.library-student-subscribe span, .benefit-strip a span, .tool-action { display: inline-block; transition: transform .3s; }
.library-student-subscribe:hover span, .benefit-strip a:hover span, .library-tool:hover .tool-action { transform: translateX(4px); }
.library-tool { transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .3s, box-shadow .3s; }
@media (hover: hover) { .library-tool:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -24px #4285f499; } }
.library-back, .library-header-note, .open-gemini, .library-footer a { transition: color .25s; }
.library-back:hover, .open-gemini:hover, .library-footer a:hover { color: #e8eaed; }
/* v4 tabs: dark glass pills; a soft, color-shifting light passes behind them (no hard lit pill) */
@property --hue-a { syntax: "<color>"; inherits: true; initial-value: #a78bfa; }
@property --hue-b { syntax: "<color>"; inherits: true; initial-value: #4285f4; }
.library-tabs { --hue-a: #a78bfa; --hue-b: #4285f4; transition: --hue-a .8s ease, --hue-b .8s ease; }
.library-tabs[data-tab=categories] { --hue-a: #4285f4; --hue-b: #22d3ee; }
.library-tabs[data-tab=ranking] { --hue-a: #ff7a3d; --hue-b: #ffc83a; }
.library-tabs[data-tab=more] { --hue-a: #34c46a; --hue-b: #22d3ee; }
.library-tabs a:nth-of-type(1) { --h: #a78bfa; } .library-tabs a:nth-of-type(2) { --h: #4285f4; }
.library-tabs a:nth-of-type(3) { --h: #ff9a3d; } .library-tabs a:nth-of-type(4) { --h: #34c46a; }
.tab-spot { top: -14px; bottom: -14px; left: -12px; width: calc(var(--spot-w, 0px) + 24px); transform: translateX(var(--spot-x, 0)); filter: blur(22px);
  background: radial-gradient(ellipse 62% 100% at 28% 50%, var(--hue-a), transparent 72%), radial-gradient(ellipse 62% 100% at 74% 50%, var(--hue-b), transparent 72%); }
.library-tabs[data-ready] .tab-spot { opacity: .62; transition: transform .8s cubic-bezier(.22, 1, .36, 1), width .8s cubic-bezier(.22, 1, .36, 1); }
.library-tabs a { background: #07080bcc; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: #ffffff12; color: #8e95a1; box-shadow: none; }
.library-tabs a:hover { background: #0b0c10cc; color: #e8eaed; border-color: color-mix(in srgb, var(--h) 40%, transparent); }
.library-tabs a[aria-current] { background: #07080bb3; color: #fff; border-color: color-mix(in srgb, var(--h) 38%, transparent); box-shadow: inset 0 -16px 24px -18px color-mix(in srgb, var(--h) 75%, transparent), 0 0 30px -14px var(--h); }
.library-tabs a:focus-visible { outline: 1px solid #ffffff99; outline-offset: 3px; }
.library-filters button[aria-pressed=true] { background: #ffffff14; color: #fff; border-color: #ffffff3d; box-shadow: 0 0 26px -8px #8ab4f877; }
/* the sheet's top fade must sit under the tab glow, or the glow is cut along the sheet edge */
.library-sheet::before { z-index: -2; }

/* v5 — design.google/library/gemini-ai-visual-design ("Neural Expressive") + UX enhancements */
.library-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .48) 72%, transparent 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Crisp, high-contrast typography + Full-Page Motion Graphics Choreography */
.library-header {
  animation: mg-header-in .85s cubic-bezier(.16, 1, .3, 1) both;
}
.library-mark {
  animation: mg-mark-float 5.5s ease-in-out infinite;
}
@keyframes mg-header-in {
  from { opacity: 0; transform: translateY(-18px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes mg-mark-float {
  0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: translateY(-2px) rotate(-3deg); filter: drop-shadow(0 4px 10px #4285f466); }
}

.library-intro:not(.detail-hero) {
  justify-content: center;
  padding-top: 0;
  padding-bottom: 12svh;
}
.library-intro:not(.detail-hero)::before {
  animation:
    mg-nebula-in 1.4s cubic-bezier(.16, 1, .3, 1) both,
    mg-nebula-breathe 9s ease-in-out 1.4s infinite;
}
.library-intro:not(.detail-hero)::after {
  animation:
    mg-horizon-in 1.25s cubic-bezier(.16, 1, .3, 1) .08s both,
    mg-horizon-pulse 6.5s ease-in-out 1.35s infinite;
}
@keyframes mg-nebula-in {
  from { opacity: 0; transform: scale(.72) translateY(48px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes mg-nebula-breathe {
  0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
  50% { transform: scale(1.08) translateY(-12px); opacity: .86; }
}
@keyframes mg-horizon-in {
  from { opacity: 0; transform: translateY(72px) scaleX(.88); }
  to { opacity: 1; transform: translateY(0) scaleX(1); }
}
@keyframes mg-horizon-pulse {
  0%, 100% { filter: drop-shadow(0 -4px 14px #4285f499); }
  50% { filter: drop-shadow(0 -8px 26px #8ab4f8cc); }
}
@keyframes mg-item-rise {
  0% { opacity: 0; transform: translateY(28px) scale(.95); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.hero-enter {
  animation: mg-item-rise .95s cubic-bezier(.16, 1, .3, 1) backwards;
}
.hero-enter-1 { animation-delay: .12s; }
.hero-enter-2 { animation-delay: .26s; }
.hero-enter-3 { animation-delay: .42s; }

.library-intro h1 {
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}
.title-dot {
  display: inline-block;
  animation: mg-dot-pulse 3.2s ease-in-out infinite;
}
@keyframes mg-dot-pulse {
  0%, 100% { color: #8ab4f8; text-shadow: 0 0 12px #4285f488; transform: scale(1); }
  50% { color: #c2e7ff; text-shadow: 0 0 24px #8ab4f8ee, 0 0 40px #9b72cb88; transform: scale(1.12); }
}
.library-intro > p:not(.library-eyebrow) {
  color: #edf2f7;
  font-weight: 400;
}
.library-sheet::before {
  height: 64px;
}

/* Entrance Motion Graphics for Tabs, Search Bar, Filters, Headings, Cards, and Footer */
.library-tabs {
  animation: mg-item-rise .85s cubic-bezier(.16, 1, .3, 1) .18s backwards;
}
.library-tabs a {
  animation: mg-pill-pop .7s cubic-bezier(.16, 1, .3, 1) backwards;
}
.library-tabs a:nth-of-type(1) { animation-delay: .22s; }
.library-tabs a:nth-of-type(2) { animation-delay: .28s; }
.library-tabs a:nth-of-type(3) { animation-delay: .34s; }
.library-tabs a:nth-of-type(4) { animation-delay: .40s; }
.library-tabs a:nth-of-type(5) { animation-delay: .46s; }
@keyframes mg-pill-pop {
  from { opacity: 0; transform: translateY(16px) scale(.88); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.library-search {
  animation:
    mg-search-expand .95s cubic-bezier(.16, 1, .3, 1) .32s backwards,
    mg-search-glow 5s ease-in-out 1.3s infinite;
}
@keyframes mg-search-expand {
  from { opacity: 0; transform: translateY(20px) scaleX(.91); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); }
}
@keyframes mg-search-glow {
  0%, 100% { box-shadow: -14px 0 36px -10px #ff5fa880, 14px 0 36px -10px #4285f480; }
  50% { box-shadow: -20px 0 44px -8px #ff5fa8aa, 20px 0 44px -8px #4285f4aa; }
}

.library-filters button {
  animation: mg-pill-pop .65s cubic-bezier(.16, 1, .3, 1) backwards;
}
.library-filters button:nth-child(1) { animation-delay: .36s; }
.library-filters button:nth-child(2) { animation-delay: .41s; }
.library-filters button:nth-child(3) { animation-delay: .46s; }
.library-filters button:nth-child(4) { animation-delay: .51s; }
.library-filters button:nth-child(5) { animation-delay: .56s; }

.library-section-heading {
  animation: mg-item-rise .75s cubic-bezier(.16, 1, .3, 1) .42s backwards;
}

@keyframes mg-card-enter {
  0% { opacity: 0; transform: translateY(34px) scale(.94); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.library-card,
.library-tool,
.library-empty {
  animation: mg-card-enter .8s cubic-bezier(.16, 1, .3, 1) backwards;
}
.library-card:nth-child(1), .library-tool:nth-of-type(1) { animation-delay: .12s; }
.library-card:nth-child(2), .library-tool:nth-of-type(2) { animation-delay: .19s; }
.library-card:nth-child(3) { animation-delay: .26s; }
.library-card:nth-child(4) { animation-delay: .33s; }
.library-card:nth-child(5) { animation-delay: .40s; }
.library-card:nth-child(6) { animation-delay: .47s; }
.library-card:nth-child(7) { animation-delay: .54s; }
.library-card:nth-child(8) { animation-delay: .61s; }
.library-card:nth-child(n+9) { animation-delay: .68s; }

.benefit-strip,
.library-footer {
  animation: mg-item-rise .85s cubic-bezier(.16, 1, .3, 1) .55s backwards;
}
@supports (animation-timeline: scroll()) {
  .library-intro:not(.detail-hero) { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 25svh 95svh; }
  .library-intro:not(.detail-hero) > :not(.hero-cue) { animation: hero-text-out linear both; animation-timeline: scroll(root); animation-range: 18svh 65svh; }
}
button.hero-cue {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  color: #c2cad6;
  transition: color .25s, transform .25s;
}
button.hero-cue:hover {
  color: #ffffff;
}

/* 8 Signature Bento Card Motifs from design.google/library/gemini-ai-visual-design */
.library-art {
  background: #06070a;
  border: 1px solid #ffffff0d;
}
.library-card:hover .library-art,
.library-card:focus-visible .library-art {
  border-color: #8ab4f855;
  box-shadow: 0 20px 52px -22px #4285f499, inset 0 1px 0 #ffffff26;
}

/* 1. Concentric Prismatic Rings (art-orbit — Image 2 top-left) */
.library-art.art-orbit {
  background: radial-gradient(circle at 50% 50%, #0d1d3a 0%, #050608 72%);
}
.library-art.art-orbit .art-object {
  width: 78%;
  aspect-ratio: 1;
  height: auto;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.library-art.art-orbit i:nth-child(1) {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 54%, transparent 48%, #1d4ed888 58%, #60a5fa 65%, #e0f2fe 67.5%, transparent 71%),
    conic-gradient(from 290deg at 50% 50%, transparent 0deg, #fde68a 45deg, #ffffff 70deg, #93c5fd 110deg, transparent 155deg);
  -webkit-mask-image: radial-gradient(circle, transparent 52%, #000 63%, #000 69%, transparent 73%);
  mask-image: radial-gradient(circle, transparent 52%, #000 63%, #000 69%, transparent 73%);
  filter: blur(1px) drop-shadow(0 0 18px #3b82f688);
  opacity: 1;
  animation: mg-orbit-spin 11s linear infinite;
}
.library-art.art-orbit i:nth-child(2) {
  inset: 19%;
  top: 23%;
  bottom: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 56%, #050811 40%, #1d4ed8 58%, #93c5fd 66%, #e0f2fe 68%, transparent 73%);
  filter: blur(.6px);
  opacity: .95;
  animation: mg-orbit-breathe 4.8s ease-in-out infinite;
}
.library-art.art-orbit i:nth-child(3) {
  inset: 40%;
  top: 43%;
  bottom: 37%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #93c5fd, #2563eb 45%, #060b18 76%);
  box-shadow: 0 0 20px #3b82f6aa;
  filter: none;
  animation: mg-core-pulse 3.6s ease-in-out infinite;
}
@keyframes mg-orbit-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.03); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes mg-orbit-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.06); }
}
@keyframes mg-core-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px #3b82f6aa; }
  50% { transform: scale(1.16); box-shadow: 0 0 32px #93c5fdee; }
}

/* 1b. Blue Dawn Horizon Motion (art-sphere — Image 4 left) */
.library-art.art-sphere i:nth-child(1) {
  animation: mg-dawn-breathe 6s ease-in-out infinite;
}
.library-art.art-sphere i:nth-child(2) {
  animation: mg-dawn-glint 4.2s ease-in-out infinite;
}
@keyframes mg-dawn-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: .92; }
  50% { transform: translateY(-8px) scaleY(1.1); opacity: 1; }
}
@keyframes mg-dawn-glint {
  0%, 100% { transform: scaleX(.85); opacity: .75; }
  50% { transform: scaleX(1.22); opacity: 1; }
}

/* 2. Stacked Prismatic Domes (art-wave — Image 2 bottom-right) */
.library-art.art-wave {
  background: #050609;
}
.library-art.art-wave .art-object {
  inset: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: none;
}
.library-art.art-wave i {
  left: 50%;
  translate: -50% 0;
  border-radius: 50%;
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 88%);
}
.library-art.art-wave i:nth-child(1) {
  width: 78%;
  height: 62%;
  top: 22%;
  background:
    radial-gradient(ellipse 46% 18% at 50% 3%, #fff7ed 0%, #fb923c 38%, transparent 75%),
    radial-gradient(ellipse 68% 55% at 50% 18%, #e0f2fe 0%, #60a5fa 32%, #1d4ed8 64%, transparent 82%);
  filter: blur(1px);
  opacity: 1;
  animation: mg-dome-ripple 4.5s ease-in-out infinite;
}
.library-art.art-wave i:nth-child(2) {
  width: 58%;
  height: 48%;
  top: 44%;
  background: radial-gradient(ellipse 70% 58% at 50% 16%, #e0f2fe 0%, #60a5fa 35%, #1e3a8a 68%, transparent 85%);
  filter: blur(.8px);
  opacity: .95;
  animation: mg-dome-ripple 4.5s ease-in-out -1.3s infinite;
}
.library-art.art-wave i:nth-child(3) {
  width: 38%;
  height: 34%;
  top: 63%;
  background: radial-gradient(ellipse 72% 60% at 50% 18%, #bae6fd 0%, #3b82f6 42%, #0f172a 75%, transparent 90%);
  filter: blur(.8px);
  opacity: .9;
  animation: mg-dome-ripple 4.5s ease-in-out -2.6s infinite;
}
.library-art.art-wave i:nth-child(n+4) { display: none; }
@keyframes mg-dome-ripple {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.045); }
}

/* 3. Multicolor Aurora Wave (art-portal — Image 4 right) */
.library-art.art-portal {
  background: #040508;
}
.art-aurora-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}
.art-aurora-stage .aurora-glow {
  position: absolute;
  left: -8%;
  width: 116%;
  height: 82%;
  bottom: -6%;
  filter: blur(16px);
  background:
    radial-gradient(ellipse 36% 58% at 18% 92%, #c084fccc, transparent 70%),
    radial-gradient(ellipse 32% 72% at 52% 96%, #facc15dd, #fb923c66 48%, transparent 74%),
    radial-gradient(ellipse 34% 64% at 82% 92%, #4ade80cc, #38bdf866 52%, transparent 74%),
    radial-gradient(ellipse 75% 55% at 50% 100%, #3b82f688, transparent 82%);
  animation: mg-aurora-sway 7s ease-in-out infinite;
}
.aurora-wave-svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 44%;
  filter: drop-shadow(0 -6px 16px #fde04766);
  animation: mg-wave-bob 5.2s ease-in-out infinite;
}
@keyframes mg-aurora-sway {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(3%) scaleY(1.08); }
}
@keyframes mg-wave-bob {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.1) translateY(2px); }
}

/* 4. Sky Gradient + Frosted Agent Pill (art-agent — Image 2 top-2nd & Image 3 top-left) */
.library-art.art-agent {
  background: linear-gradient(180deg, #0c3576 0%, #2472e2 44%, #67a9fb 76%, #e4efff 100%);
}
.library-art.art-agent .library-art-caption {
  color: #102a56;
}
.art-agent-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  display: grid !important;
  place-items: center;
}
.agent-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .36);
  box-shadow: 0 12px 32px rgba(10, 42, 98, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  animation: mg-agent-levitate 4.4s ease-in-out infinite;
}
.agent-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .38) 50%, transparent 75%);
  translate: -130% 0;
  animation: mg-agent-sheen 5.5s ease-in-out infinite;
}
.agent-pill svg {
  animation: mg-rocket-tilt 2.8s ease-in-out infinite;
}
@keyframes mg-agent-levitate {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.03); }
}
@keyframes mg-agent-sheen {
  0%, 35% { translate: -130% 0; }
  75%, 100% { translate: 130% 0; }
}
@keyframes mg-rocket-tilt {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(1.5px, -1.5px) rotate(-4deg); }
}

/* 5. Sigmoid Curves & Inflection Nodes (art-curves — Image 2 bottom-2nd) */
.library-art.art-curves {
  background: #06070a;
}
.art-curves-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  display: grid !important;
  place-items: center;
  padding: 14% 10%;
}
.curves-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.curve-nodes circle {
  filter: drop-shadow(0 0 6px #ffffffcc);
  animation: mg-node-glide 3.8s ease-in-out infinite;
}
.curve-nodes circle:nth-child(2) { animation-delay: -.6s; }
.curve-nodes circle:nth-child(3) { animation-delay: -1.2s; }
.curve-nodes circle:nth-child(4) { animation-delay: -1.8s; }
.curve-nodes circle:nth-child(5) { animation-delay: -2.4s; }
@keyframes mg-node-glide {
  0%, 100% { transform: translate(-3px, 4px) scale(.92); opacity: .82; }
  50% { transform: translate(4px, -4px) scale(1.18); opacity: 1; }
}

/* 6. Luminous Pill Bars & Line Icons (art-pills — Image 2 bottom-left) */
.library-art.art-pills {
  background: #06070a;
}
.art-pills-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0 18px;
  color: #ffffff;
}
.pill-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pill-row-top {
  animation: mg-pills-drift-a 5.4s ease-in-out infinite;
}
.pill-row-bottom {
  animation: mg-pills-drift-b 5.4s ease-in-out infinite;
}
@keyframes mg-pills-drift-a {
  0%, 100% { transform: translateX(-5px); }
  50% { transform: translateX(6px); }
}
@keyframes mg-pills-drift-b {
  0%, 100% { transform: translateX(5px); }
  50% { transform: translateX(-6px); }
}
.pill-row svg {
  flex-shrink: 0;
  opacity: .92;
}
.grad-pill {
  display: inline-block;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d64e8 0%, #5899f8 52%, #dcebff 100%);
  box-shadow: 0 0 20px -4px #3b82f688;
}
.grad-pill.pill-wide { width: 92px; }
.grad-pill.pill-half { width: 42px; background: linear-gradient(90deg, #dcebff 0%, #4285f4 100%); }
.grad-pill.pill-dot {
  width: 28px;
  background: linear-gradient(135deg, #dcebff 0%, #2563eb 100%);
  animation: mg-core-pulse 3.2s ease-in-out infinite;
}

/* 7. Vertical Axis Gradient Square (art-axis — Image 2 bottom-3rd & Image 3 bottom-right) */
.library-art.art-axis {
  background: #06070a;
}
.art-axis-stage {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  display: grid !important;
  place-items: center;
  padding: 15%;
}
.axis-card {
  position: relative;
  width: 78%;
  height: 82%;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 98%, #040b1e 0%, #091e54 26%, transparent 58%),
    linear-gradient(180deg, #f5f9ff 0%, #68a8fb 28%, #266ee0 66%, #13398c 100%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .65);
  display: flex;
  justify-content: center;
  animation: mg-agent-levitate 5.8s ease-in-out infinite;
}
.axis-line {
  position: absolute;
  top: 8%;
  bottom: 6%;
  left: 50%;
  width: 1px;
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, .35), rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, .85));
}
.axis-card .axis-dot {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  animation: mg-axis-node 3.4s ease-in-out infinite;
}
.axis-card .axis-dot-1 { top: 8%; width: 7px; height: 7px; background: #070b14; animation-delay: 0s; }
.axis-card .axis-dot-2 { top: 20%; width: 6px; height: 6px; background: #475569; animation-delay: -.8s; }
.axis-card .axis-dot-3 { top: 55%; width: 5px; height: 5px; background: #e2e8f0; box-shadow: 0 0 8px #fff; animation-delay: -1.6s; }
.axis-card .axis-dot-4 { top: 94%; width: 4px; height: 4px; background: #ffffff; box-shadow: 0 0 8px #fff; animation-delay: -2.4s; }
@keyframes mg-axis-node {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.28); }
}

/* 8. Prismatic Edge Frame & Emerging Hemisphere on Tool Cards (Image 2 top-right) */
.library-tool {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(#0a0b0f, #0a0b0f) padding-box,
    linear-gradient(135deg, #ffffff24 0%, #ffffff0d 55%, #fde04788 80%, #3b82f6cc 100%) border-box;
  border: 1.5px solid transparent;
}
.library-tool > div { flex: 1; }
.tool-hemisphere {
  width: 44px;
  height: 76px;
  margin-right: -28px;
  border-radius: 999px 0 0 999px;
  background: radial-gradient(circle at 22% 50%, #ffffff 0%, #fde68a 18%, #60a5fa 48%, #1d4ed8 74%, transparent 95%);
  filter: blur(1px) drop-shadow(-8px 0 18px #3b82f699);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  flex-shrink: 0;
}
.library-tool:hover .tool-hemisphere {
  transform: translateX(-6px) scale(1.06);
}

/* Card Info Hierarchy: Title + Description + Category/Action Meta */
.library-card-info h3 {
  color: #ffffff;
}
.library-card-desc {
  margin-top: 6px !important;
  color: #cbd5e1 !important;
  font-size: 13px !important;
  line-height: 1.55;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px !important;
  font-size: 12px !important;
  color: #7a818d !important;
}
.meta-category {
  color: #a8c7fa;
  font-weight: 500;
}
.meta-action {
  transition: color .2s, transform .2s;
}
.library-card:hover .meta-action {
  color: #e8eaed;
  transform: translateX(2px);
}

/* Empty State 4-Orb Neural Ornament */
.empty-orbs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.empty-orbs i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.empty-orbs i:nth-child(1) { background: #a78bfa; box-shadow: 0 0 12px #a78bfa99; }
.empty-orbs i:nth-child(2) { width: 18px; height: 18px; background: #fb923c; box-shadow: 0 0 16px #fb923c99; }
.empty-orbs i:nth-child(3) { width: 15px; height: 15px; background: #4ade80; box-shadow: 0 0 14px #4ade8099; }
.empty-orbs i:nth-child(4) { background: #38bdf8; box-shadow: 0 0 12px #38bdf899; }

/* Detail Page: Highlighted [변수] Tokens & Paired Primary CTA (Copy + Open Gemini) */
.prompt-var {
  background: rgba(66, 133, 244, .18);
  color: #c2e7ff;
  border: 1px solid rgba(138, 180, 248, .38);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 500;
}
.library-primary-cta {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 10px;
}
.open-gemini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  background: #14171f;
  border: 1px solid #ffffff24;
  color: #e8eaed;
  font-size: 14px;
  font-weight: 500;
  transition: background .25s, border-color .25s, box-shadow .35s, transform .2s;
}
.open-gemini-btn:hover {
  background: #1c212d;
  border-color: #8ab4f888;
  box-shadow: 0 0 24px -8px #4285f488;
}
.open-gemini-btn.is-ready {
  background: linear-gradient(#131824, #131824) padding-box,
    linear-gradient(90deg, #a78bfa, #fb923c 35%, #4ade80 68%, #38bdf8) border-box;
  border: 1.5px solid transparent;
  color: #ffffff;
  box-shadow: 0 0 28px -6px #38bdf888;
}
.library-student-subscribe {
  margin-top: 14px;
  background: rgba(138, 180, 248, .06);
  border-color: rgba(138, 180, 248, .28);
  font-size: 13px;
}

@media (max-width: 767px) {
  .library-art {
    aspect-ratio: 1.32;
  }
  .library-primary-cta {
    grid-template-columns: 1fr;
  }
}

/* v6 — User-Shared Prompt Playground (플레이그라운드) */
.library-tabs[data-tab=playground] {
  --hue-a: #f472b6;
  --hue-b: #818cf8;
}
.library-tabs a:nth-of-type(3) { --h: #f472b6; }
.library-tabs a:nth-of-type(4) { --h: #ff9a3d; }
.library-tabs a:nth-of-type(5) { --h: #34c46a; }

.playground-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
}
.playground-filters {
  padding: 0;
  justify-content: flex-start;
}
.playground-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.playground-sort {
  display: inline-flex;
  background: #101217;
  border: 1px solid #ffffff17;
  border-radius: 999px;
  padding: 3px;
}
.playground-sort button {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  color: #9ca3af;
  transition: background .2s, color .2s;
}
.playground-sort button[aria-pressed=true] {
  background: #ffffff1c;
  color: #ffffff;
  font-weight: 500;
}
.playground-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: linear-gradient(110deg, #8ab4f8, #c2e7ff 55%, #e9d5ff);
  color: #0d2142;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 26px -8px #4285f488;
  transition: transform .2s, box-shadow .3s;
}
.playground-share-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -6px #8ab4f8aa;
}
.playground-share-btn.is-open {
  background: #1a1d24;
  color: #e2e8f0;
  border: 1px solid #ffffff26;
  box-shadow: none;
}

/* Composer Form */
.playground-composer {
  margin-top: 22px;
  padding: 28px;
  border-radius: 26px;
  background: linear-gradient(#0b0c11, #0b0c11) padding-box,
    linear-gradient(125deg, #f472b688, #818cf888 48%, #38bdf888) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 60px -24px #4285f466;
}
.composer-header h3 {
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
}
.composer-header p {
  margin-top: 6px;
  font-size: 13px;
  color: #9ca3af;
}
.composer-header code {
  color: #c2e7ff;
  background: #4285f426;
  padding: 1px 6px;
  border-radius: 5px;
}
.composer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  margin-top: 20px;
}
.composer-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.composer-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 12px;
}
.composer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.composer-field > span,
.composer-label-bar > span,
.composer-preview-label {
  font-size: 12px;
  font-weight: 500;
  color: #cbd5e1;
}
.composer-field input,
.composer-field select,
.composer-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: #13151c;
  border: 1px solid #ffffff1a;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.composer-field input:focus,
.composer-field select:focus,
.composer-field textarea:focus {
  border-color: #8ab4f8;
  box-shadow: 0 0 0 3px #8ab4f81f;
}
.composer-field textarea {
  line-height: 1.7;
  resize: vertical;
}
.composer-label-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.composer-helpers {
  display: flex;
  gap: 6px;
}
.composer-helpers button {
  padding: 4px 10px;
  border-radius: 999px;
  background: #1d2433;
  border: 1px solid #8ab4f844;
  color: #c2e7ff;
  font-size: 11px;
  transition: background .2s;
}
.composer-helpers button:hover {
  background: #273249;
}
.composer-preview-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.composer-preview-card .library-art {
  aspect-ratio: 1.38;
}
.composer-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.composer-variant-grid button {
  padding: 7px 10px;
  border-radius: 10px;
  background: #13151c;
  border: 1px solid #ffffff14;
  color: #9ca3af;
  font-size: 11px;
  transition: background .2s, color .2s, border-color .2s;
}
.composer-variant-grid button[aria-pressed=true] {
  background: #1e293b;
  color: #ffffff;
  border-color: #8ab4f888;
}
.composer-error {
  margin-top: 14px;
  color: #fca5a5;
  font-size: 13px;
}
.composer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #ffffff12;
}
.composer-cancel {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #ffffff24;
  color: #cbd5e1;
  font-size: 13px;
}
.composer-submit {
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(110deg, #8ab4f8, #c2e7ff);
  color: #0d2142;
  font-size: 13px;
  font-weight: 600;
}

/* Playground Card Extras */
.playground-card {
  cursor: pointer;
}
.playground-visual-wrap {
  position: relative;
}
.playground-author-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 12, 18, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e2e8f0;
  font-size: 10px;
}
.playground-var-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.playground-var-pill {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(66, 133, 244, .14);
  border: 1px solid rgba(138, 180, 248, .28);
  color: #a8c7fa;
  font-size: 11px;
}
.playground-card-meta {
  justify-content: space-between;
}
.playground-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-like-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff0d;
  border: 1px solid #ffffff14;
  color: #cbd5e1;
  font-size: 11px;
  transition: background .2s, color .2s, border-color .2s;
}
.card-like-chip:hover,
.card-like-chip.is-liked {
  background: rgba(244, 114, 182, .18);
  border-color: rgba(244, 114, 182, .45);
  color: #f9a8d4;
}

/* Interactive Playground Runner Modal */
.playground-runner-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.playground-runner {
  width: min(720px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  padding: 28px;
  border-radius: 26px;
  background: #0c0e14;
  border: 1px solid #ffffff24;
  box-shadow: 0 28px 80px -20px #000000cc, 0 0 40px -14px #4285f466;
}
.runner-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.runner-eyebrow {
  font-size: 12px;
  color: #8ab4f8;
}
.runner-top h3 {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}
.runner-top p {
  margin-top: 6px;
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.6;
}
.runner-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff12;
  color: #e2e8f0;
  font-size: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.runner-vars {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #12151f;
  border: 1px solid #8ab4f833;
}
.runner-vars-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #c2e7ff;
  margin-bottom: 12px;
}
.runner-vars-title span {
  font-weight: 400;
  color: #9ca3af;
  font-size: 12px;
}
.runner-vars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.runner-var-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.runner-var-input span {
  font-size: 11px;
  color: #8ab4f8;
  font-weight: 500;
}
.runner-var-input input {
  padding: 9px 12px;
  border-radius: 10px;
  background: #090b10;
  border: 1px solid #ffffff1f;
  color: #ffffff;
  font-size: 13px;
  outline: none;
}
.runner-var-input input:focus {
  border-color: #8ab4f8;
}
.runner-prompt-box {
  margin-top: 18px;
  padding: 20px;
  border-radius: 18px;
  background: #08090d;
  border: 1px solid #ffffff14;
}
.runner-prompt-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #9ca3af;
}
.runner-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}
.runner-like-btn {
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffff12;
  color: #e2e8f0;
  font-size: 12px;
}
.runner-like-btn.is-liked {
  background: rgba(244, 114, 182, .2);
  color: #f9a8d4;
}
.runner-delete-btn {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, .16);
  color: #fca5a5;
  font-size: 12px;
}
.prompt-var.is-filled {
  background: rgba(52, 211, 153, .2);
  border-color: rgba(52, 211, 153, .5);
  color: #a7f3d0;
}
.runner-cta {
  margin-top: 18px;
}
.runner-copy-btn {
  min-height: 52px;
  border-radius: 999px;
  background: linear-gradient(110deg, #8ab4f8, #c2e7ff);
  color: #0d2142;
  font-size: 14px;
  font-weight: 600;
}
.runner-copy-btn.is-done {
  background: linear-gradient(110deg, #7fe0a5, #c2f7d8);
  color: #08301a;
}

@media (max-width: 767px) {
  .composer-grid,
  .composer-row,
  .runner-vars-grid {
    grid-template-columns: 1fr;
  }
  .playground-composer,
  .playground-runner {
    padding: 20px 16px;
  }
}

/* UI 개선 1~3: 첫 화면 행동 유도, 헤더 대비, 등장 블러 완화 */

/* 1. 흐릿한 "스크롤" 문구를 눈에 띄는 알약형 CTA 로 */
button.hero-cue {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #8ab4f866;
  background: #8ab4f81f;
  color: #f1f3f4;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.library-intro > button.hero-cue { flex-direction: row; justify-content: center; white-space: nowrap; }
.library-intro > button.hero-cue::after { display: none; }
button.hero-cue:hover,
button.hero-cue:focus-visible {
  background: #8ab4f833;
  border-color: #8ab4f8aa;
  color: #fff;
}
button.hero-cue:focus-visible { outline: 2px solid #c2e7ff; outline-offset: 3px; }

/* 2. 헤더: 어두운 히어로 위에서도 읽히도록 대비와 터치 영역 확보 */
.library-header-note,
.library-header a.library-header-note { color: #e8eaed; font-size: 14px; font-weight: 500; }
.library-wordmark { min-height: 44px; display: inline-flex; align-items: center; }
.library-header {
  background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .6) 70%, transparent 100%);
}
@media (max-width: 767px) {
  .library-header a.library-header-note { font-size: 13px; }
}

/* 3. 등장 애니메이션: 블러를 줄이고 시간을 단축, 움직임 줄이기 설정 존중 */
@keyframes mg-header-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mg-item-rise {
  0% { opacity: 0; transform: translateY(18px); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes mg-card-enter {
  0% { opacity: 0; transform: translateY(20px); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes mg-pill-pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mg-search-expand {
  from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.library-card,
.library-tool,
.library-empty { animation-duration: .5s; }
.library-card:nth-child(n+4) { animation-delay: .2s; }
/* mobile motion preserved */


/* v7 — GSA Campus Studio: Bespoke Blueprint Glass & Isometric Motion System (Anti-Plagiarism Original Identity) */
.library-intro:not(.detail-hero)::before {
  top: 8%;
  width: min(980px, 100vw);
  height: 70%;
  background:
    radial-gradient(ellipse 48% 44% at 36% 46%, rgba(56, 189, 248, .28) 0%, transparent 72%),
    radial-gradient(ellipse 46% 42% at 66% 52%, rgba(99, 102, 241, .26) 0%, transparent 72%),
    radial-gradient(ellipse 40% 35% at 50% 35%, rgba(45, 212, 191, .16) 0%, transparent 70%);
  filter: blur(54px);
}
.library-intro:not(.detail-hero)::after {
  top: 0;
  width: 100vw;
  height: 100%;
  border-radius: 0;
  filter: none;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .075) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 46%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 52% at 50% 46%, #000 15%, transparent 78%);
}
.hero-blueprint-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bp-chip {
  position: absolute;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #bae6fd;
  background: rgba(15, 23, 42, .62);
  border: 1px solid rgba(56, 189, 248, .28);
  box-shadow: 0 8px 24px rgba(2, 132, 199, .15), inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation:
    mg-item-rise .95s cubic-bezier(.16, 1, .3, 1) backwards,
    mg-bp-chip-float 6.5s ease-in-out 1s infinite;
}
.bp-chip-1 { top: 22%; left: max(6%, calc(50% - 410px)); animation-delay: .18s, 0s; }
.bp-chip-2 { top: 25%; right: max(6%, calc(50% - 420px)); color: #c7d2fe; border-color: rgba(129, 140, 248, .32); animation-delay: .28s, -1.6s; }
.bp-chip-3 { bottom: 26%; left: max(9%, calc(50% - 370px)); color: #99f6e4; border-color: rgba(45, 212, 191, .3); animation-delay: .38s, -3.2s; }
.bp-chip-4 { bottom: 24%; right: max(9%, calc(50% - 380px)); color: #e9d5ff; border-color: rgba(167, 139, 250, .3); animation-delay: .48s, -4.8s; }
@keyframes mg-bp-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (max-width: 767px) {
  .bp-chip { display: none; }
}

/* Search Bar: Frosted Studio Command Bar */
.library-search {
  background: linear-gradient(#0b101b, #0b101b) padding-box,
    linear-gradient(110deg, #38bdf888 0%, #6366f166 50%, #2dd4bf88 100%) border-box;
  box-shadow: 0 14px 38px -14px rgba(14, 165, 233, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.library-search::before {
  display: none;
}
.library-search:focus-within {
  background: linear-gradient(#0e1525, #0e1525) padding-box,
    linear-gradient(110deg, #38bdf8 0%, #818cf8 50%, #2dd4bf 100%) border-box;
  box-shadow: 0 18px 44px -10px rgba(56, 189, 248, .38), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* 8 Bespoke Isometric & Blueprint Studio Artworks */
.library-art,
.library-art.art-sphere,
.library-art.art-portal,
.library-art.art-orbit,
.library-art.art-wave,
.library-art.art-agent,
.library-art.art-curves,
.library-art.art-pills,
.library-art.art-axis {
  background:
    radial-gradient(circle at 50% 15%, rgba(56, 189, 248, .13), transparent 65%),
    linear-gradient(165deg, #0b1220 0%, #060911 100%);
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.library-art.art-agent .library-art-caption,
.library-art.art-portal .library-art-caption {
  color: #c2d8f8;
}
.library-card:hover .library-art,
.library-card:focus-visible .library-art {
  border-color: rgba(56, 189, 248, .45);
  box-shadow: 0 20px 48px -20px rgba(14, 165, 233, .45), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.library-art .art-object {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  translate: none !important;
  transform: none !important;
  display: grid !important;
  place-items: center;
  padding: 6%;
}
.art-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Continuous SVG Motion Graphics inside the 8 Bespoke Cards */
.mg-dash-flow { animation: mg-dash-march 3s linear infinite; }
@keyframes mg-dash-march { to { stroke-dashoffset: -24; } }

.mg-float-slow { animation: mg-svg-float 4.6s ease-in-out infinite; }
.mg-badge-float { animation: mg-svg-float 3.8s ease-in-out -1.5s infinite; }
@keyframes mg-svg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.mg-pulse-dot { animation: mg-dot-glow 2.4s ease-in-out infinite; }
@keyframes mg-dot-glow {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

.mg-card-shift-1 { animation: mg-branch-card 4.2s ease-in-out infinite; }
.mg-card-shift-2 { animation: mg-branch-card 4.2s ease-in-out -1.4s infinite; }
.mg-card-shift-3 { animation: mg-branch-card 4.2s ease-in-out -2.8s infinite; }
@keyframes mg-branch-card {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.mg-laser-scan { animation: mg-scan-sweep 4.4s ease-in-out infinite; }
@keyframes mg-scan-sweep {
  0%, 100% { transform: translateY(-28px); opacity: .85; }
  50% { transform: translateY(34px); opacity: 1; }
}

.mg-slide-back { animation: mg-svg-float 5.2s ease-in-out infinite; }
.mg-slide-mid { animation: mg-svg-float 5.2s ease-in-out -.9s infinite; }
.mg-slide-front { animation: mg-svg-float 5.2s ease-in-out -1.8s infinite; }
.mg-progress-knob { animation: mg-knob-pulse 3.2s ease-in-out infinite; }
@keyframes mg-knob-pulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

.mg-gantt-1 { animation: mg-branch-card 4.8s ease-in-out infinite; }
.mg-gantt-2 { animation: mg-branch-card 4.8s ease-in-out -1.2s infinite; }
.mg-gantt-3 { animation: mg-branch-card 4.8s ease-in-out -2.4s infinite; }
.mg-gantt-4 { animation: mg-branch-card 4.8s ease-in-out -3.6s infinite; }
.mg-playhead { animation: mg-playhead-sweep 5.5s ease-in-out infinite; }
@keyframes mg-playhead-sweep {
  0%, 100% { transform: translateX(-18px); }
  50% { transform: translateX(22px); }
}

.mg-prism-lens {
  transform-origin: 160px 110px;
  animation: mg-lens-breathe 3.8s ease-in-out infinite;
}
@keyframes mg-lens-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.mg-bar-fill-1, .mg-bar-fill-2, .mg-bar-fill-3, .mg-bar-fill-4 {
  transform-origin: 108px 50%;
  animation: mg-bar-breathe 3.6s ease-in-out infinite;
}
.mg-bar-fill-2 { animation-delay: -.8s; }
.mg-bar-fill-3 { animation-delay: -1.6s; }
.mg-bar-fill-4 { animation-delay: -2.4s; }
@keyframes mg-bar-breathe {
  0%, 100% { transform: scaleX(.92); opacity: .88; }
  50% { transform: scaleX(1.04); opacity: 1; }
}

.mg-tier-1 { animation: mg-tier-float 4s ease-in-out infinite; }
.mg-tier-2 { animation: mg-tier-float 4s ease-in-out -.8s infinite; }
.mg-tier-3 { animation: mg-tier-float 4s ease-in-out -1.6s infinite; }
@keyframes mg-tier-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.mg-eq-bars line {
  transform-origin: center 110px;
  animation: mg-eq-bounce 1.8s ease-in-out infinite;
}
.mg-eq-bars .eq-bar-2 { animation-delay: -.35s; }
.mg-eq-bars .eq-bar-3 { animation-delay: -.7s; }
.mg-eq-bars .eq-bar-4 { animation-delay: -1.05s; }
.mg-eq-bars .eq-bar-5 { animation-delay: -1.4s; }
@keyframes mg-eq-bounce {
  0%, 100% { transform: scaleY(.62); }
  50% { transform: scaleY(1.12); }
}


/* v8 — Hero Live Chat Typing Motion Graphic ("| -> 프롬프트 저장소.") */
.hero-typing-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.18em;
  white-space: pre;
}
.typing-text {
  display: inline-block;
}
.typing-caret {
  display: inline-block;
  margin-left: 3px;
  color: #38bdf8;
  font-weight: 300;
  text-shadow: 0 0 18px rgba(56, 189, 248, .85);
  animation: mg-caret-blink .68s step-end infinite;
  transform: translateY(-2px);
}
.typing-caret.is-typing {
  opacity: 1;
  animation: none;
  color: #bae6fd;
  text-shadow: 0 0 24px rgba(56, 189, 248, 1);
}
@keyframes mg-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* v9 — Hero Circular Constellation Nodes & Sequential Link-Drawing Motion Graphics */
.library-search {
  background:
    linear-gradient(#0b101b, #0b101b) padding-box,
    linear-gradient(110deg, #38bdf8 0%, #818cf8 45%, #f472b6 75%, #2dd4bf 100%) border-box;
  box-shadow:
    -14px 0 36px -10px rgba(244, 114, 182, .45),
    0 -10px 32px -12px rgba(129, 140, 248, .4),
    14px 0 36px -10px rgba(45, 212, 191, .45);
}

.hero-blueprint-backdrop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1220px, 96vw);
  height: min(500px, 84svh);
  translate: -50% -50%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.hero-constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(129, 140, 248, .45));
}

/* Initial Load Link-Drawing Choreography */
.hero-link-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: mg-link-draw .95s cubic-bezier(.22, 1, .36, 1) forwards;
}
.hero-link-1 { animation-delay: .22s; }
.hero-link-2 { animation-delay: .36s; }
.hero-link-3 { animation-delay: .52s; }
.hero-link-4 { animation-delay: .46s; }
.hero-link-5 { animation-delay: .68s; }
.hero-link-6 { animation-delay: .88s; }

@keyframes mg-link-draw {
  0% { stroke-dashoffset: 100; opacity: 0; }
  15% { opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: .88; }
}

/* Continuous Signal Pulses Flowing Between Linked Topics */
.hero-link-pulse {
  stroke-dasharray: 12 88;
  stroke-dashoffset: 100;
  opacity: 0;
  filter: drop-shadow(0 0 8px #38bdf8);
  animation: mg-link-pulse-flow 4.2s linear 1.35s infinite;
}
.hero-pulse-b {
  animation-delay: 2.4s;
}
@keyframes mg-link-pulse-flow {
  0% { stroke-dashoffset: 100; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: -12; opacity: 0; }
}

/* Terminal Link Dots near Hero Title */
.hero-term-dot {
  opacity: 0;
  animation:
    mg-term-appear .5s cubic-bezier(.16, 1, .3, 1) forwards,
    mg-dot-glow 2.8s ease-in-out 1.4s infinite;
}
.term-1 { animation-delay: .75s, 1.4s; }
.term-2 { animation-delay: .85s, 1.7s; }
.term-3 { animation-delay: 1.05s, 2.0s; }
.term-4 { animation-delay: .95s, 2.3s; }
.term-5 { animation-delay: 1.2s, 2.6s; }
@keyframes mg-term-appear {
  from { opacity: 0; transform: scale(0); }
  to { opacity: .9; transform: scale(1); }
}

/* 2 Subtle Relay Ring Nodes */
.bp-relay {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #38bdf8 22%, #0b101b 28%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #818cf8 50%, #2dd4bf 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    -6px 0 18px -4px rgba(244, 114, 182, .5),
    6px 0 18px -4px rgba(56, 189, 248, .55);
  opacity: 0;
  animation:
    mg-circle-pop .65s cubic-bezier(.16, 1, .3, 1) forwards,
    mg-relay-pulse 3.6s ease-in-out 1.2s infinite;
}
.bp-relay-top { left: 39%; top: 15%; animation-delay: .42s, 1.2s; }
.bp-relay-bottom { left: 49%; top: 86%; width: 24px; height: 24px; animation-delay: .78s, 1.8s; }
@keyframes mg-relay-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

/* 4 Main Circular Topic Nodes (Search-Bar Gradient Rim + Ambient Glow) */
.bp-circle {
  position: absolute;
  z-index: 2;
  width: 132px;
  height: 132px;
  translate: -50% -50%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 30%, #131b2e 0%, #0a0e17 78%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #818cf8 45%, #f472b6 75%, #2dd4bf 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    -12px -4px 32px -8px rgba(244, 114, 182, .42),
    0 -8px 28px -10px rgba(129, 140, 248, .38),
    12px 6px 32px -8px rgba(45, 212, 191, .45),
    inset 0 1px 0 rgba(255, 255, 255, .14);
  opacity: 0;
  animation:
    mg-circle-pop .75s cubic-bezier(.16, 1, .3, 1) forwards,
    mg-bp-chip-float 6s ease-in-out 1.2s infinite;
}
.bp-circle-tag {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #7dd3fc;
  opacity: .85;
}
.bp-circle strong {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: #f1f5f9;
}

.bp-circle-1 { left: 13%; top: 24%; animation-delay: .12s, 1.0s; }
.bp-circle-2 { left: 87%; top: 25%; animation-delay: .58s, 2.2s; }
.bp-circle-3 { left: 15%; top: 77%; animation-delay: .48s, 3.4s; }
.bp-circle-4 { left: 85%; top: 77%; animation-delay: .86s, 4.6s; }

@keyframes mg-circle-pop {
  0% { opacity: 0; transform: scale(.68); filter: blur(6px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (max-width: 960px) {
  .bp-circle { width: 108px; height: 108px; padding: 10px; }
  .bp-circle strong { font-size: 12px; }
  .bp-circle-tag { font-size: 8.5px; }
}
@media (max-width: 767px) {
  .hero-blueprint-backdrop { display: none; }
}


/* v10 — Clean Hero Stage & "|" Cursor Morphing Downward into "." Dot */
.hero-typing-title {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 1.18em;
  white-space: pre;
}
.typing-text {
  display: inline-block;
  line-height: 1.15;
}
.typing-morph-cursor {
  display: inline-block;
  flex-shrink: 0;
  margin-left: .07em;
  margin-bottom: .13em;
  width: .085em;
  height: .84em;
  border-radius: 999px;
  background: #8ab4f8;
  box-shadow: 0 0 16px rgba(138, 180, 248, .85);
  transform-origin: 50% 100%;
  transition:
    height .46s cubic-bezier(.34, 1.56, .64, 1),
    width .42s cubic-bezier(.34, 1.56, .64, 1),
    border-radius .35s ease,
    background-color .35s ease,
    box-shadow .35s ease;
}
.typing-morph-cursor.is-dot {
  width: .175em;
  height: .175em;
  border-radius: 50%;
  background: #8ab4f8;
  box-shadow: 0 0 18px rgba(138, 180, 248, .9);
  animation: mg-dot-Settle 3.2s ease-in-out .48s infinite;
}
@keyframes mg-dot-Settle {
  0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(138, 180, 248, .75); }
  50% { transform: scale(1.14); box-shadow: 0 0 24px rgba(194, 231, 255, .95); }
}


/* v11 — Unified First-Screen Layout (No Empty 100vh Curtain) + Rich Aurora & Light Beam Stage */
.library-intro:not(.detail-hero) {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 132px 20px 38px;
  gap: 16px;
  animation: none !important;
  overflow: visible;
}
.library-intro:not(.detail-hero) > .hero-enter {
  animation: mg-item-rise .75s cubic-bezier(.16, 1, .3, 1) backwards !important;
  opacity: 1;
  translate: 0 0;
}
.library-intro:not(.detail-hero) > .hero-enter-1 { animation-delay: .05s !important; }
.library-intro:not(.detail-hero) > .hero-enter-2 { animation-delay: .18s !important; }
.library-sheet {
  background: transparent;
}
.library-sheet::before {
  display: none;
}

/* Multi-layered Aurora & Perspective Light Stage behind Hero + Tabs + Search */
.hero-aurora-stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 540px;
  translate: -50% 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-aurora-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 62% 65% at 50% 42%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 65% at 50% 42%, #000 18%, transparent 78%);
}
.aurora-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(68px);
  opacity: .55;
}
.aurora-orb-1 {
  width: 460px;
  height: 260px;
  left: calc(50% - 380px);
  top: 40px;
  background: radial-gradient(circle, #38bdf8 0%, #0284c7 55%, transparent 75%);
  animation: mg-orb-drift-1 9s ease-in-out infinite;
}
.aurora-orb-2 {
  width: 520px;
  height: 280px;
  left: calc(50% - 140px);
  top: 20px;
  background: radial-gradient(circle, #818cf8 0%, #c084fc 48%, transparent 74%);
  animation: mg-orb-drift-2 11s ease-in-out infinite;
}
.aurora-orb-3 {
  width: 440px;
  height: 240px;
  left: calc(50% + 40px);
  top: 60px;
  background: radial-gradient(circle, #2dd4bf 0%, #f472b6 55%, transparent 75%);
  animation: mg-orb-drift-3 10s ease-in-out infinite;
}
.hero-light-beam {
  position: absolute;
  left: 50%;
  bottom: 86px;
  width: min(760px, 88vw);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent 0%, #38bdf888 22%, #c4b5fdcc 50%, #2dd4bf88 78%, transparent 100%);
  box-shadow: 0 0 24px 2px rgba(56, 189, 248, .45);
  animation: mg-beam-breathe 4.5s ease-in-out infinite;
}
@keyframes mg-orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, 18px) scale(1.1); }
}
@keyframes mg-orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-28px, -16px) scale(1.08); }
}
@keyframes mg-orb-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-32px, 20px) scale(1.12); }
}
@keyframes mg-beam-breathe {
  0%, 100% { opacity: .45; transform: scaleX(.88); }
  50% { opacity: .95; transform: scaleX(1.04); }
}

@media (max-width: 767px) {
  .library-intro:not(.detail-hero) {
    padding: 104px 16px 28px;
  }
}


/* v12 — Search Bar Colored Blinking "|" Caret & UI/UX Gradient Typed Text */
.search-input-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.search-input-stage input {
  position: relative;
  z-index: 2;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: transparent !important;
}
.search-input-stage input::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.search-input-stage input::selection {
  background: rgba(129, 140, 248, .28);
}

.search-mirror {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
  white-space: pre;
}
.search-mirror-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  background: linear-gradient(90deg, #38bdf8 0%, #a78bfa 38%, #f472b6 72%, #2dd4bf 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, .32));
}
.search-mirror-placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #9399a4;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-gradient-caret {
  display: inline-block;
  flex-shrink: 0;
  width: 2.5px;
  height: 20px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%);
  box-shadow: 0 0 10px rgba(244, 114, 182, .8), 0 0 18px rgba(56, 189, 248, .75);
  animation: mg-caret-blink .82s step-end infinite;
}
.search-gradient-caret.is-active {
  margin-left: 2px;
  margin-right: 0;
}
.library-search:focus-within .search-gradient-caret {
  width: 2.8px;
  box-shadow: 0 0 14px rgba(244, 114, 182, 1), 0 0 24px rgba(56, 189, 248, .95);
}

/* Also give Hero "|" -> "." Morph Cursor the UI/UX Gradient Color */
.typing-morph-cursor {
  background: linear-gradient(180deg, #38bdf8 0%, #a78bfa 52%, #f472b6 100%);
  box-shadow: 0 0 18px rgba(167, 139, 250, .85), 0 0 28px rgba(56, 189, 248, .65);
}
.typing-morph-cursor.is-dot {
  background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%);
  box-shadow: 0 0 18px rgba(244, 114, 182, .85), 0 0 28px rgba(56, 189, 248, .8);
}

@media (max-width: 767px) {
  .search-mirror-placeholder { font-size: 12px; }
}


/* v13 — Neon Glass Gacha Machine ("프롬프트 캡슐" Tab) */
.library-tabs[data-tab=capsule] {
  --hue-a: #38bdf8;
  --hue-b: #f472b6;
}
.library-tabs a:nth-of-type(4) { --h: #2dd4bf; }
.library-tabs a:nth-of-type(5) { --h: #ff9a3d; }
.library-tabs a:nth-of-type(6) { --h: #34c46a; }

.capsule-section {
  margin-top: 28px;
  animation: mg-item-rise .6s cubic-bezier(.16, 1, .3, 1) both;
}
.capsule-header-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 24px 26px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, #0c1220, #080b14) padding-box,
    linear-gradient(115deg, #38bdf855 0%, #818cf844 48%, #f472b655 100%) border-box;
  border: 1px solid transparent;
}
.capsule-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #38bdf8;
  margin-bottom: 6px;
}
.capsule-header-bar h2 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.03em;
}
.capsule-header-bar p {
  margin-top: 6px;
  font-size: 13.5px;
  color: #94a3b8;
}
.capsule-pool-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.capsule-pool-filters button {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #cbd5e1;
  background: #111726;
  border: 1px solid #ffffff1a;
  transition: all .22s;
}
.capsule-pool-filters button[aria-pressed=true] {
  background: linear-gradient(115deg, #38bdf833, #f472b633);
  border-color: #38bdf8aa;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 20px -6px #38bdf888;
}

.capsule-stage-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* Neon Glass Gacha Machine Card */
.gacha-machine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 24px 28px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 28%, rgba(56, 189, 248, .15), transparent 65%),
    linear-gradient(180deg, #0d1322 0%, #070a12 100%) padding-box,
    linear-gradient(135deg, #38bdf866 0%, #818cf855 50%, #f472b666 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 24px 60px -24px rgba(14, 165, 233, .35);
}

.gacha-top-cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #111827;
  border: 1px solid rgba(56, 189, 248, .35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #e0f2fe;
  margin-bottom: -12px;
  z-index: 3;
}
.gacha-cap-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 10px #2dd4bf;
}
.gacha-machine-card.is-mixing .gacha-cap-light {
  background: #f472b6;
  box-shadow: 0 0 14px #f472b6;
  animation: mg-caret-blink .2s linear infinite;
}

/* Glass Dome */
.gacha-dome {
  position: relative;
  width: 264px;
  height: 264px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .14) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(15, 23, 42, .45) 0%, rgba(9, 13, 24, .88) 100%) padding-box,
    linear-gradient(135deg, #38bdf8 0%, #818cf8 45%, #f472b6 78%, #2dd4bf 100%) border-box;
  border: 2px solid transparent;
  box-shadow:
    -12px -6px 36px -10px rgba(244, 114, 182, .42),
    12px 8px 36px -10px rgba(56, 189, 248, .48),
    inset 0 0 40px rgba(56, 189, 248, .16);
  overflow: hidden;
}
.gacha-dome-glare {
  position: absolute;
  top: 14px;
  left: 28px;
  width: 84px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent);
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 2;
}

/* Floating Two-Tone Capsules inside Dome */
.gacha-orbs-container {
  position: absolute;
  inset: 16px;
}
.gacha-orb {
  position: absolute;
  left: var(--orb-x);
  top: var(--orb-y);
  width: 44px;
  height: 56px;
  translate: -50% -50%;
  rotate: var(--orb-r);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 16px color-mix(in srgb, var(--orb-a) 50%, transparent);
  animation: mg-orb-float 4.2s ease-in-out infinite;
}
.gacha-orb:nth-child(2n) { animation-delay: -.9s; animation-duration: 3.8s; }
.gacha-orb:nth-child(3n) { animation-delay: -1.8s; animation-duration: 4.6s; }
.gacha-orb .orb-half-top {
  flex: 1;
  background: radial-gradient(circle at 35% 35%, #ffffffaa, var(--orb-a) 65%);
}
.gacha-orb .orb-band {
  height: 4px;
  background: rgba(255, 255, 255, .85);
}
.gacha-orb .orb-half-bot {
  flex: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--orb-b) 75%, #0b101b), #0b101b);
}

@keyframes mg-orb-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(0, -9px) rotate(8deg); }
}

/* Rapid Tumble Motion when Mixing */
.gacha-machine-card.is-mixing .gacha-dome {
  box-shadow:
    -16px -8px 48px -6px rgba(244, 114, 182, .75),
    16px 10px 48px -6px rgba(56, 189, 248, .8),
    inset 0 0 56px rgba(167, 139, 250, .38);
}
.gacha-machine-card.is-mixing .gacha-orb-1 { animation: mg-tumble-a .42s ease-in-out infinite; }
.gacha-machine-card.is-mixing .gacha-orb-2 { animation: mg-tumble-b .38s ease-in-out infinite; }
.gacha-machine-card.is-mixing .gacha-orb-3 { animation: mg-tumble-c .45s ease-in-out infinite; }
.gacha-machine-card.is-mixing .gacha-orb-4 { animation: mg-tumble-b .4s ease-in-out -.15s infinite; }
.gacha-machine-card.is-mixing .gacha-orb-5 { animation: mg-tumble-a .36s ease-in-out -.2s infinite; }
.gacha-machine-card.is-mixing .gacha-orb-6 { animation: mg-tumble-c .41s ease-in-out -.1s infinite; }
.gacha-machine-card.is-mixing .gacha-orb-7 { animation: mg-tumble-b .39s ease-in-out -.25s infinite; }
.gacha-machine-card.is-mixing .gacha-orb-8 { animation: mg-tumble-a .44s ease-in-out -.18s infinite; }

@keyframes mg-tumble-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(42px, -38px) rotate(120deg) scale(1.08); }
  50% { transform: translate(-34px, -52px) rotate(240deg) scale(.94); }
  75% { transform: translate(28px, 26px) rotate(310deg) scale(1.05); }
}
@keyframes mg-tumble-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-48px, -28px) rotate(-140deg) scale(1.1); }
  66% { transform: translate(38px, -44px) rotate(-260deg) scale(.92); }
}
@keyframes mg-tumble-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(-36px, 34px) rotate(150deg); }
  70% { transform: translate(32px, -46px) rotate(290deg); }
}

/* Gacha Base, Rotary Dial & Chute */
.gacha-base {
  width: 100%;
  margin-top: -14px;
  padding: 22px 18px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #131b2e 0%, #0b0f1b 100%);
  border: 1px solid rgba(148, 163, 184, .2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gacha-dial-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gacha-wheel-btn {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #1e293b 0%, #0f172a 100%) padding-box,
    linear-gradient(135deg, #38bdf8, #a78bfa, #f472b6) border-box;
  border: 2px solid transparent;
  box-shadow: 0 6px 20px rgba(56, 189, 248, .35);
  display: grid;
  place-items: center;
  transition: transform .65s cubic-bezier(.34, 1.56, .64, 1);
}
.gacha-wheel-btn:hover:not(:disabled) {
  transform: rotate(35deg) scale(1.05);
}
.gacha-machine-card.is-mixing .gacha-wheel-btn {
  animation: mg-wheel-turn .85s cubic-bezier(.45, 0, .55, 1) forwards;
}
@keyframes mg-wheel-turn {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.wheel-bar {
  width: 42px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #f472b6);
  box-shadow: 0 0 12px rgba(244, 114, 182, .6);
}
.wheel-center {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
}
.gacha-action-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gacha-pull-cta {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(110deg, #0284c7 0%, #6366f1 50%, #db2777 100%);
  box-shadow: 0 8px 24px -6px rgba(99, 102, 241, .65);
  transition: transform .2s, box-shadow .25s;
}
.gacha-pull-cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -6px rgba(244, 114, 182, .75);
}
.gacha-pull-cta:disabled {
  opacity: .75;
  cursor: wait;
}
.gacha-pool-count {
  font-size: 11.5px;
  color: #94a3b8;
  padding-left: 4px;
}

/* Chute & Dropping/Splitting Capsule */
.gacha-chute {
  position: relative;
  height: 68px;
  border-radius: 16px;
  background: #06080f;
  border: 1px solid #ffffff14;
  box-shadow: inset 0 6px 16px rgba(0, 0, 0, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dropped-capsule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropped-capsule.is-falling {
  animation: mg-cap-drop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes mg-cap-drop {
  0% { transform: translateY(-64px) scale(.6) rotate(-25deg); opacity: 0; }
  70% { transform: translateY(4px) scale(1.06) rotate(6deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
.cap-shell {
  width: 38px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, .6);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cap-shell-left {
  border-radius: 999px 0 0 999px;
  background: radial-gradient(circle at 35% 35%, #ffffffaa, var(--cap-a));
  box-shadow: -6px 0 18px var(--cap-a);
}
.cap-shell-right {
  border-radius: 0 999px 999px 0;
  background: radial-gradient(circle at 65% 35%, #ffffff88, var(--cap-b));
  box-shadow: 6px 0 18px var(--cap-b);
}
.cap-core-spark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 20px 6px #ffffff;
  opacity: 0;
  scale: 0;
  transition: opacity .35s, scale .45s;
}
.dropped-capsule.is-split .cap-shell-left {
  transform: translateX(-18px) rotate(-18deg);
}
.dropped-capsule.is-split .cap-shell-right {
  transform: translateX(18px) rotate(18deg);
}
.dropped-capsule.is-split .cap-core-spark {
  opacity: 1;
  scale: 1.3;
}

/* Right Panel: Opened Capsule Reveal Card */
.capsule-result-panel {
  display: flex;
  flex-direction: column;
}
.capsule-reveal-card {
  flex: 1;
  padding: 28px 30px;
  border-radius: 28px;
  background:
    linear-gradient(160deg, #0d1323 0%, #080b13 100%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #818cf8 48%, #f472b6 80%, #2dd4bf 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    -12px 0 36px -14px rgba(244, 114, 182, .35),
    12px 0 36px -14px rgba(56, 189, 248, .35);
  animation: mg-card-enter .45s cubic-bezier(.16, 1, .3, 1) both;
}
.capsule-reveal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.capsule-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rarity-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.rarity-pill.rarity-ur {
  background: linear-gradient(110deg, #fde04733, #f472b644, #38bdf833);
  border: 1.5px solid #fde047cc;
  color: #fef08a;
  box-shadow: 0 0 22px -2px #facc15aa;
}
.rarity-pill.rarity-ssr {
  background: linear-gradient(110deg, #f472b633, #38bdf833);
  border: 1px solid #f472b6aa;
  color: #fbcfe8;
  box-shadow: 0 0 18px -4px #f472b688;
}
.rarity-pill.rarity-sr {
  background: rgba(129, 140, 248, .2);
  border: 1px solid rgba(129, 140, 248, .6);
  color: #e0e7ff;
}
.rarity-pill.rarity-r {
  background: rgba(56, 189, 248, .16);
  border: 1px solid rgba(56, 189, 248, .45);
  color: #bae6fd;
}
.capsule-cat-pill {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  background: #ffffff12;
  color: #cbd5e1;
}
.capsule-detail-link {
  font-size: 12.5px;
  color: #7dd3fc;
}
.capsule-reveal-card h3 {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.03em;
}
.capsule-desc {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
}
.capsule-vars-box {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #111827;
  border: 1px solid rgba(56, 189, 248, .25);
}
.capsule-vars-title {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #bae6fd;
  margin-bottom: 10px;
}
.capsule-vars-title span {
  font-weight: 400;
  color: #64748b;
  font-size: 11.5px;
}
.capsule-vars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.capsule-var-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.capsule-var-field span {
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
}
.capsule-var-field input {
  padding: 8px 11px;
  border-radius: 10px;
  background: #070a12;
  border: 1px solid #ffffff1f;
  color: #ffffff;
  font-size: 13px;
  outline: none;
}
.capsule-var-field input:focus {
  border-color: #38bdf8;
}
.capsule-prompt-preview {
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  background: #06080f;
  border: 1px solid #ffffff14;
  max-height: 220px;
  overflow-y: auto;
}
.capsule-prompt-preview pre {
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.8;
  color: #e2e8f0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.capsule-cta-row {
  margin-top: 18px;
}
.capsule-copy-btn {
  min-height: 52px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #0b1324;
  background: linear-gradient(110deg, #38bdf8 0%, #c4b5fd 55%, #f9a8d4 100%);
  transition: transform .2s, box-shadow .25s;
}
.capsule-copy-btn:hover {
  box-shadow: 0 8px 28px -8px rgba(56, 189, 248, .8);
}
.capsule-copy-btn.is-done {
  background: linear-gradient(110deg, #34d399, #a7f3d0);
  color: #052e16;
}

/* Standby Card before First Pull */
.capsule-standby-card {
  flex: 1;
  padding: 48px 32px;
  border-radius: 28px;
  background: #0b0f1b;
  border: 1px dashed rgba(148, 163, 184, .25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.standby-capsule-graphic {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  animation: mg-svg-float 4s ease-in-out infinite;
}
.standby-shell-l {
  width: 44px;
  height: 44px;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  box-shadow: -8px 0 24px -4px #38bdf888;
}
.standby-ring {
  width: 5px;
  height: 46px;
  background: #ffffff;
}
.standby-shell-r {
  width: 44px;
  height: 44px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  box-shadow: 8px 0 24px -4px #f472b688;
}
.capsule-standby-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}
.capsule-standby-card p {
  margin-top: 10px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.7;
  color: #94a3b8;
}
.standby-pull-btn {
  margin-top: 24px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background:
    linear-gradient(#111827, #111827) padding-box,
    linear-gradient(110deg, #38bdf8, #a78bfa, #f472b6) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 24px -6px rgba(167, 139, 250, .5);
}

/* Pulled Capsule History Tray */
.capsule-history-tray {
  margin-top: 22px;
  padding: 20px 24px;
  border-radius: 22px;
  background: #0b0f1a;
  border: 1px solid #ffffff12;
}
.capsule-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.capsule-history-head h4 {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}
.capsule-history-head span {
  font-size: 12px;
  color: #64748b;
}
.capsule-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.history-capsule-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #131b2e;
  border: 1px solid #ffffff14;
  font-size: 12.5px;
  color: #cbd5e1;
  transition: border-color .2s, transform .2s;
}
.history-capsule-chip:hover,
.history-capsule-chip.is-selected {
  border-color: #38bdf8aa;
  color: #ffffff;
  transform: translateY(-1px);
}
.mini-cap-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.mini-rarity {
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
}
.mini-rarity.rarity-ur {
  color: #fde047;
}
.mini-rarity.rarity-ssr {
  color: #f472b6;
}

@media (max-width: 900px) {
  .capsule-stage-grid {
    grid-template-columns: 1fr;
  }
  .capsule-vars-grid {
    grid-template-columns: 1fr;
  }
}


/* v14 — Real-Time 60fps 2D Rigid-Body Physics Engine inside Gacha Dome */
.gacha-dome {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.gacha-dome:active {
  cursor: grabbing;
}
.gacha-orbs-container.is-physics {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gacha-orb.is-phys-orb {
  left: 0 !important;
  top: 0 !important;
  width: 42px;
  height: 52px;
  translate: none !important;
  rotate: none !important;
  animation: none !important;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* ==========================================================================
   v15 — GitHub Popular Skills (SKILL.md) & Gemini Skill Upload Guide Modal
   ========================================================================== */

.library-filters-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}
.library-filters-wrap .library-filters {
  margin-top: 0;
}

.skill-guide-banner {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 13px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background:
    linear-gradient(120deg, #0d1526 0%, #090d18 100%) padding-box,
    linear-gradient(110deg, #38bdf866 0%, #a78bfa66 50%, #2dd4bf66 100%) border-box;
  border: 1px solid transparent;
  box-shadow: 0 12px 32px -16px rgba(56, 189, 248, .35);
}
.skill-guide-banner-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
  color: #cbd5e1;
}
.skill-guide-banner-text code {
  padding: 2px 7px;
  border-radius: 6px;
  background: #1e293b;
  color: #38bdf8;
  font-size: 12.5px;
}
.skill-banner-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #06131f;
  background: linear-gradient(110deg, #38bdf8, #2dd4bf);
}
.skill-guide-open-btn {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  background:
    linear-gradient(#131c31, #131c31) padding-box,
    linear-gradient(110deg, #38bdf8, #a78bfa, #f472b6) border-box;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s;
}
.skill-guide-open-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -6px rgba(56, 189, 248, .65);
}

/* Card Wrapper & Skill Badge */
.library-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.library-card-wrapper .library-card {
  flex: 1;
}
.library-card-badges {
  margin-bottom: 6px;
}
.kind-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}
.kind-badge.is-skill {
  background: rgba(56, 189, 248, .15);
  border: 1px solid rgba(56, 189, 248, .45);
  color: #7dd3fc;
}
.kind-badge.is-gem {
  background: rgba(167, 139, 250, .15);
  border: 1px solid rgba(167, 139, 250, .4);
  color: #c4b5fd;
}
.kind-badge.is-prompt {
  background: rgba(244, 114, 182, .14);
  border: 1px solid rgba(244, 114, 182, .38);
  color: #f9a8d4;
}

.card-skill-quick-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.card-skill-dl-btn {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #06131f;
  background: linear-gradient(110deg, #38bdf8, #2dd4bf);
  transition: transform .18s, box-shadow .18s;
}
.card-skill-dl-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(45, 212, 191, .75);
}
.card-skill-guide-btn {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #bae6fd;
  background: #0d1424;
  border: 1px solid rgba(56, 189, 248, .3);
  transition: background .2s, border-color .2s, color .2s;
}
.card-skill-guide-btn:hover {
  background: #131e36;
  border-color: #38bdf8;
  color: #ffffff;
}

.skill-raw-details {
  margin-top: 16px;
  border-radius: 18px;
  background: #090d17;
  border: 1px solid rgba(148, 163, 184, .18);
  overflow: hidden;
}
.skill-raw-details summary {
  padding: 14px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 600;
  color: #cbd5e1;
  user-select: none;
  list-style: none;
}
.skill-raw-details summary::-webkit-details-marker {
  display: none;
}
.skill-raw-details summary:hover {
  background: #0f1628;
  color: #ffffff;
}
.details-toggle-hint {
  font-size: 12px;
  font-weight: 500;
  color: #38bdf8;
}
.skill-raw-details[open] summary {
  border-bottom: 1px solid rgba(148, 163, 184, .15);
}
.skill-raw-details .library-prompt-text {
  margin-top: 0;
  max-height: 360px;
  overflow-y: auto;
  border: none;
  border-radius: 0;
}

/* Detail Page Skill Action Bar */
.skill-action-bar {
  margin-bottom: 14px;
  padding: 16px 20px;
  border-radius: 18px;
  background: #0c1322;
  border: 1px solid rgba(56, 189, 248, .32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.skill-action-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skill-chip-badge {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(45, 212, 191, .16);
  color: #5eead4;
  border: 1px solid rgba(45, 212, 191, .4);
}
.skill-action-info p {
  margin: 0 !important;
  font-size: 13px !important;
  color: #cbd5e1 !important;
}
.skill-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skill-dl-btn {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #06131f;
  background: linear-gradient(110deg, #38bdf8, #2dd4bf);
}
.skill-guide-trigger-btn {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: #162038;
  border: 1px solid rgba(167, 139, 250, .5);
}

/* Skill Guide Modal Overlay (Rectangular Window Popup) */
.skill-guide-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(3, 6, 14, .78);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: mg-fade-in .2s ease-out both;
}
@keyframes mg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.skill-guide-modal {
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 30px;
  border-radius: 24px;
  background:
    linear-gradient(165deg, #0f1629 0%, #090d18 100%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, .85), 0 0 48px -12px rgba(56, 189, 248, .35);
  color: #f8fafc;
}
.skill-guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.skill-guide-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #38bdf8;
  margin-bottom: 4px;
}
.skill-guide-header h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #ffffff;
}
.skill-guide-header p {
  margin-top: 4px;
  font-size: 13.5px;
  color: #94a3b8;
}
.skill-guide-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #1e293b;
  color: #cbd5e1;
  font-size: 15px;
  display: grid;
  place-items: center;
}
.skill-guide-close:hover {
  background: #334155;
  color: #ffffff;
}

/* Visual Replica of Gemini's "기능 업로드 (Skill Upload)" UI */
.skill-ui-mockup {
  margin-top: 20px;
  padding: 18px;
  border-radius: 18px;
  background: #e2e4e9;
  color: #1f2937;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .12);
}
.mockup-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #4b5563;
}
.mockup-tab {
  padding: 4px 10px;
  border-radius: 999px;
}
.mockup-tab.is-active {
  background: #d1d5db;
  font-weight: 700;
  color: #111827;
}
.mockup-create-btn {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: #d1d5db;
  font-weight: 600;
  color: #111827;
}
.mockup-dialog-box {
  max-width: 440px;
  margin: 0 auto;
  padding: 20px 22px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
.mockup-dialog-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}
.mockup-dropzone {
  padding: 20px 16px;
  border-radius: 14px;
  border: 1.5px dashed #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  color: #374151;
}
.mockup-dropzone p {
  font-size: 13.5px;
  font-weight: 500;
  color: #1f2937;
}
.mockup-highlight {
  padding: 1px 4px;
  border: 2px solid #d97706;
  border-radius: 4px;
  font-weight: 700;
}
.mockup-underline {
  text-decoration: underline;
}
.mockup-dropzone small {
  font-size: 11.5px;
  color: #6b7280;
}
.mockup-reqs {
  margin-top: 12px;
  font-size: 12px;
  color: #374151;
}
.mockup-reqs strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
}
.mockup-reqs ul {
  padding-left: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mockup-reqs code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #0284c7;
  font-size: 11.5px;
}

.skill-guide-steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skill-guide-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #111827;
  border: 1px solid #ffffff12;
}
.skill-guide-steps .step-num {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(56, 189, 248, .18);
  color: #38bdf8;
}
.skill-guide-steps strong {
  display: block;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 3px;
}
.skill-guide-steps p {
  font-size: 12.5px;
  line-height: 1.6;
  color: #94a3b8;
}
.skill-guide-steps code {
  color: #7dd3fc;
}

.skill-guide-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.skill-download-cta {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #051923;
  background: linear-gradient(110deg, #38bdf8, #2dd4bf);
}
.skill-open-gemini-cta {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: #1e293b;
  border: 1px solid rgba(56, 189, 248, .4);
}
.skill-close-cta {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  background: #0f172a;
  border: 1px solid #ffffff1f;
}


/* ==========================================================================
   v16 — Mobile Portrait Re-engineering (PC Atmosphere, Glow Calibration,
   Full Motion Graphics Preservation, Zero-Clip Tabs/Filters/Modals)
   ========================================================================== */

@media (max-width: 767px) {
  /* 1. Page & Header Fit for Narrow Portrait Screens */
  .library-page {
    padding-inline: 16px;
  }
  .library-header {
    height: 64px;
    padding-inline: 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .65) 75%, transparent 100%);
  }
  .library-wordmark {
    font-size: 16px;
    gap: 7px;
  }
  .library-mark {
    width: 26px;
    height: 26px;
  }
  .library-header a.library-header-note {
    font-size: 12px;
    white-space: nowrap;
  }

  /* 2. Hero Brightness & Aurora Calibration + Generous Spacing Below Intro Text */
  .library-intro:not(.detail-hero) {
    padding: 96px 12px 46px;
    gap: 12px;
  }
  .library-intro:not(.detail-hero)::before {
    top: 6%;
    width: 100vw;
    height: 240px;
    background:
      radial-gradient(ellipse 46% 42% at 32% 45%, rgba(56, 189, 248, .18) 0%, transparent 70%),
      radial-gradient(ellipse 46% 42% at 68% 50%, rgba(99, 102, 241, .16) 0%, transparent 70%);
    filter: blur(42px);
    opacity: .65;
  }
  .library-intro:not(.detail-hero)::after {
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 78% 58% at 50% 44%, #000 10%, transparent 74%);
    mask-image: radial-gradient(ellipse 78% 58% at 50% 44%, #000 10%, transparent 74%);
  }
  .hero-aurora-stage {
    height: 360px;
  }
  .hero-aurora-stage::before {
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 76% 62% at 50% 40%, #000 12%, transparent 74%);
    mask-image: radial-gradient(ellipse 76% 62% at 50% 40%, #000 12%, transparent 74%);
  }
  .aurora-orb {
    filter: blur(50px);
    opacity: .34;
  }
  .aurora-orb-1 {
    width: 190px;
    height: 140px;
    left: calc(50% - 155px);
    top: 28px;
  }
  .aurora-orb-2 {
    width: 210px;
    height: 150px;
    left: calc(50% - 105px);
    top: 16px;
  }
  .aurora-orb-3 {
    width: 180px;
    height: 135px;
    left: calc(50% - 15px);
    top: 38px;
  }
  .hero-light-beam {
    bottom: 24px;
    width: 84vw;
    opacity: .75;
  }

  /* Hero Title & Subtitle Proportions */
  .library-intro h1 {
    font-size: clamp(30px, 8.6vw, 38px);
    letter-spacing: -.035em;
  }
  .library-intro > p:not(.library-eyebrow) {
    font-size: 13.5px;
    line-height: 1.55;
    color: #cbd5e1;
  }

  /* 3. Sheet & Single-Row Horizontal Drag Tabs (Subtle Edge Peek -> Brightens When Scrolled) */
  .library-sheet {
    padding-inline: 16px;
  }
  .library-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 6px -16px 18px;
    padding: 10px 20px;
    width: calc(100% + 32px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .library-tabs::-webkit-scrollbar {
    display: none;
  }
  /* Subtle corner fade mask so the peeking tab ("기타") softly emerges from the edge and brightens when dragged in */
  .library-tabs[data-fade-right]:not([data-fade-left]) {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 78%, rgba(0, 0, 0, .28) 95%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 78%, rgba(0, 0, 0, .28) 95%, transparent 100%);
  }
  .library-tabs[data-fade-left]:not([data-fade-right]) {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 5%, #000 22%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 5%, #000 22%, #000 100%);
  }
  .library-tabs[data-fade-left][data-fade-right] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 5%, #000 20%, #000 80%, rgba(0, 0, 0, .3) 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 5%, #000 20%, #000 80%, rgba(0, 0, 0, .3) 95%, transparent 100%);
  }
  .library-tabs a {
    flex: 0 0 auto !important;
    scroll-snap-align: center;
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    white-space: nowrap;
    color: #c2cad6;
    border-color: #ffffff1f;
    transition: opacity .3s ease, filter .3s ease, color .3s ease, border-color .3s ease, background .3s ease, transform .2s ease;
  }
  .library-tabs a:first-child {
    flex: 0 0 auto !important;
  }
  /* Peeking tab at the edge is subtly dimmed; scrolling it into view brightens it to full clarity */
  .library-tabs a[data-edge-dim] {
    opacity: .42;
    filter: brightness(.72);
    color: #7a8290;
    border-color: #ffffff0d;
  }
  .tab-spot {
    top: calc(var(--spot-y, 0px) - 4px);
    bottom: auto;
    height: calc(var(--spot-h, 40px) + 8px);
    left: -6px;
    width: calc(var(--spot-w, 0px) + 12px);
    filter: blur(14px);
  }
  .library-tabs[data-ready] .tab-spot {
    opacity: .52;
    transition: transform .65s cubic-bezier(.22, 1, .36, 1), width .65s cubic-bezier(.22, 1, .36, 1);
  }

  /* 4. Search Bar — Balanced Neon Glow & Clean Placeholder Fit */
  .library-search {
    min-height: 50px;
    padding: 0 15px;
    gap: 10px;
    margin-block: 14px 10px;
    border-radius: 999px;
    box-shadow:
      -8px 0 24px -8px rgba(244, 114, 182, .38),
      0 -6px 20px -10px rgba(129, 140, 248, .32),
      8px 0 24px -8px rgba(45, 212, 191, .38);
  }
  @keyframes mg-search-glow {
    0%, 100% {
      box-shadow:
        -8px 0 22px -8px rgba(244, 114, 182, .36),
        0 -6px 18px -10px rgba(129, 140, 248, .3),
        8px 0 22px -8px rgba(45, 212, 191, .36);
    }
    50% {
      box-shadow:
        -12px 0 28px -6px rgba(244, 114, 182, .52),
        0 -8px 24px -8px rgba(129, 140, 248, .45),
        12px 0 28px -6px rgba(45, 212, 191, .52);
    }
  }
  .library-search svg {
    width: 18px;
    height: 18px;
  }
  .search-input-stage input {
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
    padding: 12px 0;
  }
  .search-mirror-text {
    font-size: 14px;
  }
  .search-mirror-placeholder {
    font-size: 12.5px;
  }
  .search-gradient-caret {
    height: 17px;
    width: 2px;
    margin-right: 6px;
  }

  /* 5. Category Filters — Clean Bento 2-Column Grid (Replacing Messy 4-Row Jagged Pyramid) */
  .library-filters.is-category-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0 4px;
    overflow: visible;
  }
  .library-filters.is-category-filters button {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    font-size: 11.5px;
    border-radius: 12px;
    background: #0b0e16;
    border: 1px solid #ffffff17;
    color: #b8c0cc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .library-filters.is-category-filters button[aria-pressed=true] {
    background: linear-gradient(115deg, rgba(56, 189, 248, .18), rgba(129, 140, 248, .18));
    color: #ffffff;
    border-color: rgba(138, 180, 248, .55);
    box-shadow: 0 0 20px -8px rgba(56, 189, 248, .55);
    font-weight: 600;
  }
  .library-filters.is-period-filters {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 4px;
  }
  .library-filters.is-period-filters button {
    min-height: 36px;
    padding: 0 16px;
    font-size: 12px;
    border-radius: 999px;
  }

  /* 6. Section Heading — Single-Line Alignment Without Awkward "Skill" Word Wrap */
  .library-section-heading {
    margin: 22px 0 14px;
    align-items: center;
    gap: 8px;
  }
  .library-section-heading h2 {
    font-size: 15.5px;
    line-height: 1.35;
    letter-spacing: -.03em;
  }
  .library-section-heading > span {
    font-size: 11px;
  }

  /* 7. Prompt & Skill Cards — Full SVG Artwork Visibility & PC-Matched Proportions */
  .library-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .library-art {
    aspect-ratio: 1.45;
    border-radius: 20px;
  }
  .library-art .art-object {
    padding: 5%;
  }
  .library-art-badge {
    top: 12px;
    left: 12px;
    font-size: 10px;
    padding: 4px 10px;
  }
  .library-art-caption {
    left: 14px;
    right: 14px;
    bottom: 12px;
    font-size: 10.5px;
  }
  .library-card-info {
    padding: 12px 2px 0;
  }
  .library-card-info h3 {
    font-size: 16.5px;
    line-height: 1.4;
  }
  .library-card-desc {
    font-size: 12.5px !important;
    line-height: 1.5;
  }
  .card-skill-quick-actions {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }
  .card-skill-dl-btn,
  .card-skill-guide-btn {
    padding: 9px 12px;
    font-size: 12px;
    border-radius: 12px;
  }

  /* 8. Playground Mobile Optimization */
  .playground-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
  }
  .playground-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 0;
  }
  .playground-filters button {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    font-size: 11.5px;
    border-radius: 12px;
    background: #0b0e16;
    border: 1px solid #ffffff17;
    color: #b8c0cc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .playground-filters button[aria-pressed=true] {
    background: linear-gradient(115deg, rgba(244, 114, 182, .18), rgba(129, 140, 248, .18));
    color: #ffffff;
    border-color: rgba(244, 114, 182, .55);
    box-shadow: 0 0 20px -8px rgba(244, 114, 182, .55);
    font-weight: 600;
  }
  .playground-actions {
    justify-content: space-between;
    width: 100%;
  }
  .playground-share-btn {
    flex: 1;
    min-height: 38px;
    font-size: 12.5px;
  }

  /* 9. Capsule Machine ("프롬프트 캡슐") Mobile Fit */
  .capsule-section {
    margin-top: 16px;
  }
  .capsule-header-bar {
    padding: 18px 16px;
    border-radius: 20px;
    gap: 12px;
  }
  .capsule-header-bar h2 {
    font-size: 18.5px;
  }
  .capsule-header-bar p {
    font-size: 12.5px;
  }
  .capsule-pool-filters {
    width: 100%;
    gap: 6px;
  }
  .capsule-pool-filters button {
    min-height: 32px;
    padding: 0 11px;
    font-size: 11.5px;
  }
  .gacha-machine-card {
    padding: 20px 16px 20px;
    border-radius: 24px;
  }
  .gacha-base {
    padding: 16px 14px 14px;
  }
  .gacha-wheel-btn {
    width: 54px;
    height: 54px;
  }
  .gacha-pull-cta {
    min-height: 42px;
    font-size: 13.5px;
  }
  .capsule-reveal-card {
    padding: 20px 18px;
    border-radius: 22px;
  }
  .capsule-reveal-card h3 {
    font-size: 20px;
  }
  .capsule-standby-card {
    padding: 32px 20px;
    border-radius: 22px;
  }
  .capsule-standby-card h3 {
    font-size: 17px;
  }
  .capsule-standby-card p {
    font-size: 12.5px;
  }
  .capsule-history-tray {
    padding: 16px;
    border-radius: 18px;
  }

  /* 10. Prompt Detail & Skill Guide Modal Mobile Fit */
  .library-intro.detail-hero {
    height: auto;
    min-height: 200px;
    padding: 88px 16px 28px;
  }
  .detail-hero h1 {
    font-size: clamp(24px, 6.8vw, 32px);
    line-height: 1.3;
  }
  .detail-section {
    margin-top: 36px;
  }
  .library-prompt-section {
    padding: 20px 16px;
    border-radius: 20px;
  }
  .skill-action-bar {
    padding: 14px 16px;
  }
  .skill-action-btns {
    width: 100%;
  }
  .skill-dl-btn,
  .skill-guide-trigger-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    font-size: 12px;
    padding: 10px 12px;
  }
  .skill-guide-backdrop {
    padding: 12px;
  }
  .skill-guide-modal {
    padding: 20px 16px;
    border-radius: 20px;
    max-height: 92dvh;
  }
  .skill-guide-header h3 {
    font-size: 17.5px;
  }
  .skill-ui-mockup {
    padding: 12px;
  }
  .mockup-dialog-box {
    padding: 14px;
  }
  .skill-guide-footer button,
  .skill-guide-footer a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .library-tabs {
    gap: 6px;
  }
  .library-tabs a {
    padding: 0 14px;
    font-size: 12.5px;
    min-height: 38px;
  }
}

/* Theme controls and white palette. */
.library-header-actions { display:flex; align-items:center; gap:16px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 13px; border:1px solid #64748b66; border-radius:24px; color:inherit; font-size:12px; white-space:nowrap; }
.theme-toggle:hover { background:#88888820; }
html[data-theme="light"] body:has(.library-page) { color-scheme:light; }
@media(max-width:600px) { .library-header-actions { gap:8px; } .theme-toggle { padding:0 10px; } .theme-toggle span:last-child { display:none; } }
html[data-theme="light"] /* v2 styles are scoped so the retained course and builder keep working independently. */
body:has(.library-page) { background: #ffffff; color: #131416;}
html[data-theme="light"] .library-page { color: #131416;}
html[data-theme="light"] .wordmark-light { color: #434952;}
html[data-theme="light"] .library-intro > p:last-child { color: #525861;}
html[data-theme="light"] .library-tabs a { color: #494e55;}
html[data-theme="light"] .library-tabs a:hover { background: #dedfe2; color: #131416;}
html[data-theme="light"] .library-tabs a[aria-current] { background: linear-gradient(115deg, #b5cae0, #234e80);}
html[data-theme="light"] .library-search { background: #dfe0e3; color: #525861;}
html[data-theme="light"] .library-search:focus-within { background: #d7d9de;}
html[data-theme="light"] .library-search input { color: #131416;}
html[data-theme="light"] .library-search input::placeholder { color: #5d626a;}
html[data-theme="light"] .library-filters button { color: #3f444d;}
html[data-theme="light"] .library-filters button[aria-pressed=true] { background: #afbfd3;}
html[data-theme="light"] .library-section-heading > span { color: #666c75;}
html[data-theme="light"] .library-art { background: #ebecee;}
html[data-theme="light"] .library-card-info p { color: #696f78;}
html[data-theme="light"] .benefit-strip { background: #d9dfe9; color: #1f2c42;}
html[data-theme="light"] .library-footer { color: #797f89;}
html[data-theme="light"] .library-empty { background: #e6e7ea;}
html[data-theme="light"] .library-empty p { color: #525861;}
html[data-theme="light"] .library-tool { background: #e2e3e7;}
html[data-theme="light"] .library-tool p { color: #525861;}
html[data-theme="light"] .library-back { color: #494f58;}
html[data-theme="light"] .original-post { background: #eaebeed9;}
html[data-theme="light"] .detail-section > p { color: #3f444d;}
html[data-theme="light"] .library-steps p { color: #3f444d;}
html[data-theme="light"] .library-prompt-section { background: #e3e4e7;}
html[data-theme="light"] .library-prompt-text { color: #30363f;}
html[data-theme="light"] .library-copy-actions button { color: #334155;}
html[data-theme="light"] .library-student-subscribe { background: #c1cee0;}
html[data-theme="light"] .library-student-subscribe:hover { background: #aabdd6;}
html[data-theme="light"] .library-header-note { color: #494e55;}
html[data-theme="light"] .library-header a.library-header-note:hover { color: #131416;}
html[data-theme="light"] .library-intro::before { background: radial-gradient(ellipse at 50% 50%, #4285f48c 0%, #5e3f824d 45%, #d965701f 75%, transparent 100%);}
html[data-theme="light"] .library-intro::after {
  background: radial-gradient(ellipse 50% 50% at 50% calc(50% + 3px), #ffffff 99.4%, transparent 100%), linear-gradient(90deg, transparent, #4285f4b3 30%, #c2e7ff 50%, #5e3f82b3 70%, transparent);}
html[data-theme="light"] .library-intro > p:last-child { color: #494e55;}
html[data-theme="light"] .library-search { background: #dfe0e3;}
html[data-theme="light"] .library-filters button { color: #494e55; border-color: #0000001a;}
html[data-theme="light"] .library-filters button[aria-pressed=true] { background: #0b0d0e; color: #334155;}
html[data-theme="light"] .library-section-heading > span { color: #747a83;}
html[data-theme="light"] .library-art { background: #eeeff1;}
html[data-theme="light"] .library-card-info p { color: #747a83;}
html[data-theme="light"] .benefit-strip { color: #494e55;}
html[data-theme="light"] .library-footer { color: #747a83;}
html[data-theme="light"] .detail-section > p { color: #494e55;}
html[data-theme="light"] .library-steps p { color: #494e55;}
html[data-theme="light"] .library-prompt-section { background: #eeeff1; border-color: #0000001a;}
html[data-theme="light"] .library-prompt-text { color: #494e55;}
html[data-theme="light"] .open-gemini { color: #494e55;}
html[data-theme="light"] /* full-screen hero → content sheet rises over it (scroll-driven) */
.library-header { background: linear-gradient(#ffffff 35%, transparent);}
html[data-theme="light"] .library-intro > p:not(.library-eyebrow) { color: #494e55;}
html[data-theme="light"] .library-intro > .hero-cue { color: #747a83;}
html[data-theme="light"] .library-sheet { background: #ffffff;}
html[data-theme="light"] .library-sheet::before { background: linear-gradient(to bottom, transparent, #ffffff 92%);}
html[data-theme="light"] /* reduced-motion kept active on .library-intro */
/* "Ask Gemini" glow search (design.google ref): gradient rim, html[data-theme="light"] side glow, html[data-theme="light"] star-dot halo */
.library-search { color: #494e55;
  background: linear-gradient(#ececf0, #ececf0) padding-box, linear-gradient(90deg, #ff5fa8, #5e3f82 50%, #4285f4) border-box;}
html[data-theme="light"] .library-search:focus-within { background: linear-gradient(#e7e6ec, #e7e6ec) padding-box, linear-gradient(90deg, #ff5fa8, #5e3f82 50%, #4285f4) border-box;}
html[data-theme="light"] .library-search::before {
  background: linear-gradient(90deg, #ff5fa8, #5e3f82 50%, #4285f4);}
html[data-theme="light"] .library-tabs a { background: #f4f5f8; color: #60666f;}
html[data-theme="light"] .library-tabs a:hover { background: #edeef1; color: #131416; border-color: #0000002e;}
html[data-theme="light"] .library-tabs a[aria-current] { background: linear-gradient(115deg, #b5cae0, #234e80);}
html[data-theme="light"] .library-filters button:hover { color: #131416;}
html[data-theme="light"] .library-filters button[aria-pressed=true] { box-shadow: 0 0 22px #0b0d0e33;}
html[data-theme="light"] .library-copy-actions button::after { background: linear-gradient(100deg, transparent 30%, #00000080 50%, transparent 70%);}
html[data-theme="light"] .library-copy-actions button.is-done { color: #334155;}
html[data-theme="light"] .library-back:hover, html[data-theme="light"] .open-gemini:hover, html[data-theme="light"] .library-footer a:hover { color: #131416;}
html[data-theme="light"] .library-tabs a { background: #f4f5f8cc; border-color: #00000012; color: #60666f;}
html[data-theme="light"] .library-tabs a:hover { background: #f0f0f3cc; color: #131416;}
html[data-theme="light"] .library-tabs a[aria-current] { background: #f4f5f8b3; color: #000000;}
html[data-theme="light"] .library-filters button[aria-pressed=true] { background: #00000014; color: #000000; border-color: #0000003d;}
html[data-theme="light"] .library-intro h1 {
  color: #000000;}
html[data-theme="light"] .library-intro > p:not(.library-eyebrow) {
  color: #090d11;}
html[data-theme="light"] button.hero-cue {
  color: #2b313a;}
html[data-theme="light"] button.hero-cue:hover {
  color: #000000;}
html[data-theme="light"] .library-card:hover .library-art, html[data-theme="light"] .library-card:focus-visible .library-art {
  box-shadow: 0 20px 52px -22px #4285f499, inset 0 1px 0 #00000026;}
html[data-theme="light"] .agent-pill {
  color: #000000;}
html[data-theme="light"] .axis-card {
  background:
    radial-gradient(circle at 50% 98%, #e4eaf8 0%, #b4c4ed 26%, transparent 58%),
    linear-gradient(180deg, #f5f9ff 0%, #68a8fb 28%, #266ee0 66%, #13398c 100%);}
html[data-theme="light"] .axis-card .axis-dot-1 { background: #edf0f6;}
html[data-theme="light"] .axis-card .axis-dot-2 { background: #9aa5b4;}
html[data-theme="light"] .axis-card .axis-dot-3 { background: #11151b; box-shadow: 0 0 8px #000000;}
html[data-theme="light"] .axis-card .axis-dot-4 { background: #000000; box-shadow: 0 0 8px #000000;}
html[data-theme="light"] /* 8. Prismatic Edge Frame & Emerging Hemisphere on Tool Cards (Image 2 top-right) */
.library-tool {
  background: linear-gradient(#f1f1f4, #f1f1f4) padding-box,
    linear-gradient(135deg, #00000024 0%, #0000000d 55%, #fde04788 80%, #3b82f6cc 100%) border-box;}
html[data-theme="light"] .tool-hemisphere {
  background: radial-gradient(circle at 22% 50%, #000000 0%, #fde68a 18%, #60a5fa 48%, #1d4ed8 74%, transparent 95%);}
html[data-theme="light"] /* Card Info Hierarchy: Title + Description + Category/Action Meta */
.library-card-info h3 {
  color: #000000;}
html[data-theme="light"] .library-card-desc {
  color: #212831 !important;}
html[data-theme="light"] .library-card-meta {
  color: #747a83 !important;}
html[data-theme="light"] .library-card:hover .meta-action {
  color: #131416;}
html[data-theme="light"] .open-gemini-btn {
  background: #e1e4ea;
  color: #131416;}
html[data-theme="light"] .open-gemini-btn:hover {
  background: #d4d8e1;}
html[data-theme="light"] .open-gemini-btn.is-ready {
  background: linear-gradient(#dde1ea, #dde1ea) padding-box,
    linear-gradient(90deg, #a78bfa, #fb923c 35%, #4ade80 68%, #38bdf8) border-box;
  color: #000000;}
html[data-theme="light"] .playground-sort {
  background: #e9eaee;}
html[data-theme="light"] .playground-sort button {
  color: #525861;}
html[data-theme="light"] .playground-sort button[aria-pressed=true] {
  background: #0000001c;
  color: #000000;}
html[data-theme="light"] .playground-share-btn {
  color: #334155;}
html[data-theme="light"] .playground-share-btn.is-open {
  background: #dcdee4;
  color: #11151b;}
html[data-theme="light"] /* Composer Form */
.playground-composer {
  background: linear-gradient(#efeff3, #efeff3) padding-box,
    linear-gradient(125deg, #f472b688, #818cf888 48%, #38bdf888) border-box;}
html[data-theme="light"] .composer-header h3 {
  color: #000000;}
html[data-theme="light"] .composer-header p {
  color: #525861;}
html[data-theme="light"] .composer-field > span, html[data-theme="light"] .composer-label-bar > span, html[data-theme="light"] .composer-preview-label {
  color: #212831;}
html[data-theme="light"] .composer-field input, html[data-theme="light"] .composer-field select, html[data-theme="light"] .composer-field textarea {
  background: #e4e6eb;
  color: #000000;}
html[data-theme="light"] .composer-helpers button {
  background: #cfd4df;}
html[data-theme="light"] .composer-helpers button:hover {
  background: #bac2d4;}
html[data-theme="light"] .composer-variant-grid button {
  background: #e4e6eb;
  color: #525861;}
html[data-theme="light"] .composer-variant-grid button[aria-pressed=true] {
  background: #c8d0dd;
  color: #000000;}
html[data-theme="light"] .composer-cancel {
  color: #212831;}
html[data-theme="light"] .composer-submit {
  color: #334155;}
html[data-theme="light"] .playground-author-badge {
  color: #11151b;}
html[data-theme="light"] .card-like-chip {
  background: #0000000d;
  color: #212831;}
html[data-theme="light"] .playground-runner {
  background: #eceef2;
  box-shadow: 0 28px 80px -20px #ffffffcc, 0 0 40px -14px #4285f466;}
html[data-theme="light"] .runner-top h3 {
  color: #000000;}
html[data-theme="light"] .runner-top p {
  color: #525861;}
html[data-theme="light"] .runner-close {
  background: #00000012;
  color: #11151b;}
html[data-theme="light"] .runner-vars {
  background: #e2e4eb;}
html[data-theme="light"] .runner-vars-title span {
  color: #525861;}
html[data-theme="light"] .runner-var-input input {
  background: #f0f1f5;
  color: #000000;}
html[data-theme="light"] .runner-prompt-box {
  background: #f3f3f6;}
html[data-theme="light"] .runner-prompt-meta {
  color: #525861;}
html[data-theme="light"] .runner-like-btn {
  background: #00000012;
  color: #11151b;}
html[data-theme="light"] .runner-copy-btn {
  color: #334155;}
html[data-theme="light"] .runner-copy-btn.is-done {
  color: #334155;}
html[data-theme="light"] /* UI 개선 1~3: 첫 화면 행동 유도, html[data-theme="light"] 헤더 대비, html[data-theme="light"] 등장 블러 완화 */

/* 1. 흐릿한 "스크롤" 문구를 눈에 띄는 알약형 CTA 로 */
button.hero-cue {
  color: #0b0d0e;}
html[data-theme="light"] button.hero-cue:hover, html[data-theme="light"] button.hero-cue:focus-visible {
  color: #000000;}
html[data-theme="light"] /* 2. 헤더: 어두운 히어로 위에서도 읽히도록 대비와 터치 영역 확보 */
.library-header-note, html[data-theme="light"] .library-header a.library-header-note { color: #131416;}
html[data-theme="light"] /* Search Bar: Frosted Studio Command Bar */
.library-search {
  background: linear-gradient(#e6eaf2, #e6eaf2) padding-box,
    linear-gradient(110deg, #38bdf888 0%, #6366f166 50%, #2dd4bf88 100%) border-box;}
html[data-theme="light"] .library-search:focus-within {
  background: linear-gradient(#dde2ee, #dde2ee) padding-box,
    linear-gradient(110deg, #38bdf8 0%, #818cf8 50%, #2dd4bf 100%) border-box;}
html[data-theme="light"] /* v9 — Hero Circular Constellation Nodes & Sequential Link-Drawing Motion Graphics */
.library-search {
  background:
    linear-gradient(#e6eaf2, #e6eaf2) padding-box,
    linear-gradient(110deg, #38bdf8 0%, #818cf8 45%, #f472b6 75%, #2dd4bf 100%) border-box;}
html[data-theme="light"] /* 2 Subtle Relay Ring Nodes */
.bp-relay {
  background:
    radial-gradient(circle, #38bdf8 22%, #e6eaf2 28%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #818cf8 50%, #2dd4bf 100%) border-box;}
html[data-theme="light"] /* 4 Main Circular Topic Nodes (Search-Bar Gradient Rim + Ambient Glow) */
.bp-circle {
  background:
    radial-gradient(circle at 50% 30%, #d4dae9 0%, #eaedf3 78%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #818cf8 45%, #f472b6 75%, #2dd4bf 100%) border-box;}
html[data-theme="light"] .bp-circle strong {
  color: #070a0d;}
html[data-theme="light"] .search-mirror-placeholder {
  color: #5d626a;}
html[data-theme="light"] .capsule-header-bar {
  background:
    linear-gradient(145deg, #e2e6f0, #eceff5) padding-box,
    linear-gradient(115deg, #38bdf855 0%, #818cf844 48%, #f472b655 100%) border-box;}
html[data-theme="light"] .capsule-header-bar h2 {
  color: #000000;}
html[data-theme="light"] .capsule-header-bar p {
  color: #4b5766;}
html[data-theme="light"] .capsule-pool-filters button {
  color: #212831;
  background: #dce0eb;}
html[data-theme="light"] .capsule-pool-filters button[aria-pressed=true] {
  color: #000000;}
html[data-theme="light"] /* Neon Glass Gacha Machine Card */
.gacha-machine-card {
  background:
    radial-gradient(circle at 50% 28%, rgba(56, 189, 248, .15), transparent 65%),
    linear-gradient(180deg, #e0e4ef 0%, #eef1f7 100%) padding-box,
    linear-gradient(135deg, #38bdf866 0%, #818cf855 50%, #f472b666 100%) border-box;}
html[data-theme="light"] .gacha-top-cap {
  background: #dbe0eb;}
html[data-theme="light"] .gacha-orb .orb-half-top {
  background: radial-gradient(circle at 35% 35%, #000000aa, var(--orb-a) 65%);}
html[data-theme="light"] .gacha-orb .orb-half-bot {
  background: linear-gradient(180deg, color-mix(in srgb, var(--orb-b) 75%, #e6eaf2), #e6eaf2);}
html[data-theme="light"] /* Gacha Base, html[data-theme="light"] Rotary Dial & Chute */
.gacha-base {
  background: linear-gradient(180deg, #d4dae9 0%, #e6e9f2 100%);}
html[data-theme="light"] .gacha-wheel-btn {
  background:
    radial-gradient(circle, #c8d0dd 0%, #d8deed 100%) padding-box,
    linear-gradient(135deg, #38bdf8, #a78bfa, #f472b6) border-box;}
html[data-theme="light"] .wheel-center {
  background: #000000;}
html[data-theme="light"] .gacha-pull-cta {
  color: #000000;}
html[data-theme="light"] .gacha-pool-count {
  color: #4b5766;}
html[data-theme="light"] /* Chute & Dropping/Splitting Capsule */
.gacha-chute {
  background: #f1f3f8;}
html[data-theme="light"] .cap-shell-left {
  background: radial-gradient(circle at 35% 35%, #000000aa, var(--cap-a));}
html[data-theme="light"] .cap-shell-right {
  background: radial-gradient(circle at 65% 35%, #00000088, var(--cap-b));}
html[data-theme="light"] .cap-core-spark {
  background: #000000;
  box-shadow: 0 0 20px 6px #000000;}
html[data-theme="light"] .capsule-reveal-card {
  background:
    linear-gradient(160deg, #dfe3ef 0%, #edf0f6 100%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #818cf8 48%, #f472b6 80%, #2dd4bf 100%) border-box;}
html[data-theme="light"] .capsule-cat-pill {
  background: #00000012;
  color: #212831;}
html[data-theme="light"] .capsule-reveal-card h3 {
  color: #000000;}
html[data-theme="light"] .capsule-desc {
  color: #4b5766;}
html[data-theme="light"] .capsule-vars-box {
  background: #dbe0eb;}
html[data-theme="light"] .capsule-vars-title span {
  color: #334155;}
html[data-theme="light"] .capsule-var-field input {
  background: #eef1f7;
  color: #000000;}
html[data-theme="light"] .capsule-prompt-preview {
  background: #f1f3f8;}
html[data-theme="light"] .capsule-prompt-preview pre {
  color: #11151b;}
html[data-theme="light"] .capsule-copy-btn {
  color: #334155;}
html[data-theme="light"] .capsule-copy-btn.is-done {
  color: #334155;}
html[data-theme="light"] /* Standby Card before First Pull */
.capsule-standby-card {
  background: #e6e9f2;}
html[data-theme="light"] .standby-ring {
  background: #000000;}
html[data-theme="light"] .capsule-standby-card h3 {
  color: #000000;}
html[data-theme="light"] .capsule-standby-card p {
  color: #4b5766;}
html[data-theme="light"] .standby-pull-btn {
  color: #000000;
  background:
    linear-gradient(#dbe0eb, #dbe0eb) padding-box,
    linear-gradient(110deg, #38bdf8, #a78bfa, #f472b6) border-box;}
html[data-theme="light"] /* Pulled Capsule History Tray */
.capsule-history-tray {
  background: #e7eaf2;}
html[data-theme="light"] .capsule-history-head h4 {
  color: #11151b;}
html[data-theme="light"] .capsule-history-head span {
  color: #334155;}
html[data-theme="light"] .history-capsule-chip {
  background: #d4dae9;
  color: #212831;}
html[data-theme="light"] .history-capsule-chip:hover, html[data-theme="light"] .history-capsule-chip.is-selected {
  color: #000000;}
html[data-theme="light"] .skill-guide-banner {
  background:
    linear-gradient(120deg, #dce2ef 0%, #e9ecf4 100%) padding-box,
    linear-gradient(110deg, #38bdf866 0%, #a78bfa66 50%, #2dd4bf66 100%) border-box;}
html[data-theme="light"] .skill-guide-banner-text {
  color: #212831;}
html[data-theme="light"] .skill-guide-banner-text code {
  background: #c8d0dd;}
html[data-theme="light"] .skill-banner-pill {
  color: #334155;}
html[data-theme="light"] .skill-guide-open-btn {
  color: #000000;
  background:
    linear-gradient(#d2d8e8, #d2d8e8) padding-box,
    linear-gradient(110deg, #38bdf8, #a78bfa, #f472b6) border-box;}
html[data-theme="light"] .card-skill-dl-btn {
  color: #334155;}
html[data-theme="light"] .card-skill-guide-btn {
  background: #dee3ef;}
html[data-theme="light"] .card-skill-guide-btn:hover {
  background: #cdd6e8;
  color: #000000;}
html[data-theme="light"] .skill-raw-details {
  background: #eaedf4;}
html[data-theme="light"] .skill-raw-details summary {
  color: #212831;}
html[data-theme="light"] .skill-raw-details summary:hover {
  background: #dadfed;
  color: #000000;}
html[data-theme="light"] /* Detail Page Skill Action Bar */
.skill-action-bar {
  background: #e0e5f0;}
html[data-theme="light"] .skill-action-info p {
  color: #212831 !important;}
html[data-theme="light"] .skill-dl-btn {
  color: #334155;}
html[data-theme="light"] .skill-guide-trigger-btn {
  color: #000000;
  background: #cbd3e5;}
html[data-theme="light"] .skill-guide-modal {
  background:
    linear-gradient(165deg, #d9deed 0%, #e9ecf4 100%) padding-box,
    linear-gradient(125deg, #38bdf8 0%, #a78bfa 50%, #f472b6 100%) border-box;
  color: #030506;}
html[data-theme="light"] .skill-guide-header h3 {
  color: #000000;}
html[data-theme="light"] .skill-guide-header p {
  color: #4b5766;}
html[data-theme="light"] .skill-guide-close {
  background: #c8d0dd;
  color: #212831;}
html[data-theme="light"] .skill-guide-close:hover {
  background: #aeb9c8;
  color: #000000;}
html[data-theme="light"] /* Visual Replica of Gemini's "기능 업로드 (Skill Upload)" UI */
.skill-ui-mockup {
  background: #17181c;
  color: #cbd2dd;}
html[data-theme="light"] .mockup-top-bar {
  color: #9fa6b1;}
html[data-theme="light"] .mockup-tab.is-active {
  background: #25282d;
  color: #dbe0eb;}
html[data-theme="light"] .mockup-create-btn {
  background: #25282d;
  color: #dbe0eb;}
html[data-theme="light"] .mockup-dialog-box {
  background: #000000;}
html[data-theme="light"] .mockup-dialog-title {
  color: #dbe0eb;}
html[data-theme="light"] .mockup-dropzone {
  color: #b1b9c5;}
html[data-theme="light"] .mockup-dropzone p {
  color: #cbd2dd;}
html[data-theme="light"] .mockup-dropzone small {
  color: #828791;}
html[data-theme="light"] .mockup-reqs {
  color: #b1b9c5;}
html[data-theme="light"] .mockup-reqs strong {
  color: #dbe0eb;}
html[data-theme="light"] .mockup-reqs code {
  background: #090a0c;}
html[data-theme="light"] .skill-guide-steps li {
  background: #dbe0eb;}
html[data-theme="light"] .skill-guide-steps strong {
  color: #000000;}
html[data-theme="light"] .skill-guide-steps p {
  color: #4b5766;}
html[data-theme="light"] .skill-download-cta {
  color: #334155;}
html[data-theme="light"] .skill-open-gemini-cta {
  color: #000000;
  background: #c8d0dd;}
html[data-theme="light"] .skill-close-cta {
  color: #212831;
  background: #d8deed;}
html[data-theme="light"] .library-intro > p:not(.library-eyebrow) {
    color: #212831;}
html[data-theme="light"] .library-tabs a {
    color: #2b313a;
    border-color: #0000001f;}
html[data-theme="light"] .library-filters.is-category-filters button {
    background: #eaedf3;
    color: #363c45;}
html[data-theme="light"] .library-filters.is-category-filters button[aria-pressed=true] {
    color: #000000;}
html[data-theme="light"] .playground-filters button {
    background: #eaedf3;
    color: #363c45;}
html[data-theme="light"] .playground-filters button[aria-pressed=true] {
    color: #000000;}/* Explicit accessible contrast for light surfaces and interactive states. */
html[data-theme="light"] .library-page { --lib-muted: #475569; color: #172033; }
html[data-theme="light"] .library-page :focus-visible { outline-color: #1558b8; }
html[data-theme="light"] .library-page :is(input, textarea, select) { color: #172033; }
html[data-theme="light"] .library-page :is(input, textarea)::placeholder { color: #526174; opacity: 1; }
html[data-theme="light"] :is(.library-eyebrow, .title-dot, .tool-number, .tool-action, .open-gemini, .benefit-strip a, .library-empty a, .library-copy-actions p) { color: #1558b8; }
html[data-theme="light"] :is(.library-card-info p, .library-section-heading > span, .library-footer, .library-header-note, .wordmark-light, .capsule-vars-title span, .capsule-history-head span) { color: #475569; }
html[data-theme="light"] .library-card:hover h3 { color: #1558b8; }
html[data-theme="light"] .library-tabs a[aria-current],
html[data-theme="light"] .library-filters button[aria-pressed=true],
html[data-theme="light"] .library-filters.is-category-filters button[aria-pressed=true],
html[data-theme="light"] .playground-filters button[aria-pressed=true] { background: #dbeafe; color: #153e75; border-color: #6793cb; text-shadow: none; }
html[data-theme="light"] .library-student-subscribe { color: #1558b8; border-color: #1558b8; }
html[data-theme="light"] .library-steps li > span { background: #dbeafe; color: #153e75; }
html[data-theme="light"] :is(.capsule-copy-btn, .skill-banner-pill, .card-skill-dl-btn, .skill-dl-btn, .skill-download-cta) { background: #1558b8; color: #fff; text-shadow: none; }
html[data-theme="light"] .capsule-copy-btn.is-done { background: #166534; color: #fff; }
html[data-theme="light"] .library-copy-actions button { background: #1558b8; color: #fff; }
html[data-theme="light"] .library-copy-actions button.is-done { background: #166534; color: #fff; }
html[data-theme="light"] :is(.library-back:hover, .open-gemini:hover, .library-footer a:hover, .library-header a.library-header-note:hover) { color: #0842a0; }
/* Card metadata and secondary actions on white backgrounds. */
html[data-theme="light"] .library-card-info .meta-category { color: #1558b8; }
html[data-theme="light"] .library-card-info :is(.meta-action, .meta-dot) { color: #475569; }
html[data-theme="light"] .card-skill-guide-btn { background: #e8f0fe; color: #153e75; border-color: #6793cb; }
html[data-theme="light"] .card-skill-guide-btn:hover { background: #dbeafe; color: #0842a0; border-color: #1558b8; }
html[data-theme="light"] .kind-badge.is-skill { background: #e0f2fe; color: #075985; border-color: #7caec6; }
html[data-theme="light"] .kind-badge.is-gem { background: #ede9fe; color: #5b21b6; border-color: #a896d1; }
html[data-theme="light"] .kind-badge.is-prompt { background: #fce7f3; color: #9d174d; border-color: #cc8ba6; }
/* Fade decorative hero edges into the white content surface. */
html[data-theme="light"] .library-intro {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
html[data-theme="light"] .library-sheet::before {
  height: clamp(100px, 22svh, 240px);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff 100%);
}
html[data-theme="light"] .detail-hero + .library-sheet::before { height: 100px; }
html[data-theme="light"] .library-intro.detail-hero::after { opacity: .35; }
html[data-theme="light"] .hero-aurora-stage {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
.finder-launcher { position:fixed; bottom:calc(22px + env(safe-area-inset-bottom)); left:22px; z-index:90; padding:14px 20px; border-radius:999px; background:#1558b8; color:#fff; font-weight:700; box-shadow:0 6px 28px #0003; cursor:pointer; }
.finder-dialog { position:fixed; inset:auto auto calc(84px + env(safe-area-inset-bottom)) 22px; margin:0; padding:0; width:min(400px, calc(100vw - 32px)); max-height: min(660px, calc(100dvh - 110px)); border:1px solid #374151; border-radius:22px; background:#151922; color:#eef2f7; box-shadow:0 20px 80px #0005; }
.finder-dialog::backdrop { background:rgb(0 0 0 / .25); }
.finder-shell { display:flex; flex-direction:column; max-height: min(660px, calc(100dvh - 110px)); }
.finder-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px; border-bottom:1px solid #64748b55; }
.finder-header h2 { font-weight:700; font-size:16px; }
.finder-header p { font-size:12px; color:#b8c4d6; margin-top:4px; }
.finder-header button { min-width:40px; min-height:40px; cursor:pointer; }
.finder-messages { overflow-y:auto; overscroll-behavior:contain; padding:16px; min-height:180px; }
.finder-message { padding:13px; margin-bottom:12px; border-radius:14px; background:#232c3b; font-size:14px; line-height:1.65; }
.finder-message.is-user { margin-left:32px; background:#183d72; }
.finder-speaker { font-size:11px; font-weight:700; display:block; margin-bottom:4px; }
.finder-result { display:block; padding:12px; margin-top:10px; background:#151922; border:1px solid #64748b88; border-radius:12px; }
.finder-result strong { color:#a8c7fa; display:block; }
.finder-result span { display:block; font-size:12px; margin-top:5px; }
.finder-suggestions { display:flex; gap:6px; flex-wrap:wrap; padding:8px 16px; }
.finder-suggestions button { border:1px solid #64748b88; padding:7px 10px; border-radius:20px; font-size:11px; cursor:pointer; }
.finder-form { display:flex; gap:8px; padding:12px 16px 16px; }
.finder-form input { width:100%; min-width:0; border:1px solid #64748b; border-radius:12px; padding:12px; background:#151922; color:#eef2f7; font-size:14px; }
.finder-form input::placeholder { color:#b8c4d6; }
.finder-form button { flex-shrink:0; background:#1558b8; color:#fff; padding:10px 15px; border-radius:12px; cursor:pointer; }
.finder-form button:disabled { opacity:.5; cursor:default; }
.finder-dialog :focus-visible, .finder-launcher:focus-visible { outline:3px solid #4285f4; outline-offset:3px; }
html[data-theme="light"] .finder-dialog { background:#fff; color:#172033; border-color:#cbd5e1; color-scheme:light; }
html[data-theme="light"] .finder-header p { color:#475569; }
html[data-theme="light"] .finder-message { background:#f1f5f9; }
html[data-theme="light"] .finder-message.is-user { background:#dbeafe; }
html[data-theme="light"] .finder-result { background:#fff; border-color:#b5c3d6; }
html[data-theme="light"] .finder-result strong { color:#1558b8; }
html[data-theme="light"] .finder-form input { color:#172033; background:#fff; }
html[data-theme="light"] .finder-form input::placeholder { color:#526174; }
@media(max-width:600px) { .finder-launcher { left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); font-size:13px; } .finder-dialog { left:16px; } }
/* Keep the custom cursor inside the modal top layer. */
@media (pointer: fine) {
  dialog[open], dialog[open] *, dialog::backdrop { cursor: none !important; }
}
.draft-assistant { margin:20px 0; padding:18px; border:1px solid #64748b88; border-radius:16px; background:#172033; color:#eef2f7; font-size:14px; line-height:1.7; }
.draft-assistant summary { cursor:pointer; font-weight:700; }
.draft-assistant p { margin:10px 0; }
.draft-assistant textarea { display:block; width:100%; padding:12px; margin:8px 0; border:1px solid #64748b; border-radius:10px; background:#0f172a; color:#eef2f7; }
.draft-assistant textarea::placeholder { color:#b8c4d6; }
.draft-assistant button { padding:10px 16px; background:#1558b8; color:#fff; border-radius:10px; cursor:pointer; }
.draft-assistant button:disabled { opacity:.5; cursor:wait; }
.draft-conversation { max-height:240px; overflow:auto; white-space:pre-wrap; }
.draft-preview { border-top:1px solid #64748b; margin-top:16px; padding-top:16px; }
.draft-preview pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; margin:12px 0; max-height:320px; overflow:auto; }
html[data-theme="light"] .draft-assistant { background:#f1f5f9; color:#172033; }
html[data-theme="light"] .draft-assistant textarea { background:#fff; color:#172033; }
html[data-theme="light"] .draft-assistant textarea::placeholder { color:#526174; }
.artwork-generate { padding:12px 16px; border-radius:12px; background:#1558b8; color:#fff; font-size:13px; cursor:pointer; margin:8px 0; }
.artwork-generate:disabled { opacity:.55; cursor:wait; }
.artwork-help { font-size:12px; line-height:1.6; margin-bottom:12px; }

/* Keep scrolling independent of content scale and browser toolbar height. */
.site-frame:has(.library-page),
.library-page { min-height: 100svh; }
.library-intro,
.library-intro:not(.detail-hero),
.library-intro > :not(.hero-cue),
.library-intro:not(.detail-hero) > :not(.hero-cue),
.library-intro > .hero-cue,
.library-intro::after {
  animation: none !important;
}

@media (max-width: 767px) {
  .library-page { padding-inline: 24px; }
  .library-header { padding-inline: 24px; }
  .library-sheet { padding-inline: 24px; }
  .library-intro:not(.detail-hero) { padding: 112px 0 64px; gap: 18px; }
  .library-intro h1 { font-size: clamp(28px, 7.5vw, 36px); }
  .library-intro > p:not(.library-eyebrow) { line-height: 1.8; }
  .library-grid { gap: 40px; }
  .library-art { aspect-ratio: 1.65; }
  .library-search { margin-block: 28px 16px; }
  .library-page :is(input, textarea, select), .finder-form input { font-size: 16px; }
}
.capsule-win{--win:#94a3b8;--rgb:148,163,184;padding:0;border:1px solid var(--win);border-radius:28px;background:#10121cf5;color:white;width:min(480px,calc(100% - 32px));max-height:90dvh;overflow:auto;box-shadow:0 0 70px rgba(var(--rgb),.3);text-align:center}.capsule-win::backdrop{background:#02040bd9;backdrop-filter:blur(12px)}.win-content{position:relative;isolation:isolate;padding:38px 30px 30px;overflow:hidden}.win-close{position:absolute;right:16px;top:10px;border:0;background:transparent;color:#cbd5e1;font-size:28px;z-index:3;padding:8px;cursor:pointer}.win-eyebrow{font-size:10px;letter-spacing:4px;color:var(--win);margin:8px 0 14px}.win-rarity{font-size:76px;font-weight:900;line-height:1.1;color:var(--win);text-shadow:0 0 35px rgba(var(--rgb),.7);letter-spacing:5px}.win-tier-name{color:var(--win);font-size:14px;margin:8px 0 25px}.win-orb{width:92px;height:92px;display:grid;place-items:center;margin:24px auto;border-radius:50%;box-shadow:inset -8px -12px 18px #0005,0 0 40px rgba(var(--rgb),.4);transform:rotate(-20deg);font-size:32px}.capsule-win h2{font-size:22px;line-height:1.5;margin:24px 0 12px}.win-description{font-size:13px;line-height:1.8;color:#b6c0d2}.win-confirm{width:100%;padding:15px;border-radius:12px;border:1px solid var(--win);background:rgba(var(--rgb),.16);color:var(--win);font-weight:bold;margin-top:24px;cursor:pointer}.win-effects{position:absolute;inset:0;pointer-events:none;z-index:-1}.win-effects i{position:absolute;left:50%;top:42%;color:var(--win);font-style:normal;opacity:0}.win-wave{position:absolute;left:50%;top:42%;width:200px;height:200px;border-radius:50%;border:1px solid var(--win);transform:translate(-50%,-50%);opacity:0}.capsule-win[open]{animation:win-appear .4s ease-out}.tier-r[open] .win-orb{animation:win-glow 2s ease-in-out 2}.tier-sr{--win:#60caff;--rgb:96,202,255}.tier-sr[open] .win-wave{animation:win-wave 2s ease-out 2}.tier-sr .second{animation-delay:.5s!important}.tier-ssr{--win:#c084fc;--rgb:192,132,252}.tier-ssr[open] .win-effects i{animation:win-particle 2.8s ease-out 2;animation-delay:calc(var(--i)*.055s)}.tier-ur{--win:#ffd76b;--rgb:255,215,107;background:radial-gradient(ellipse at 50% 30%,#54401d,#16120c 65%)}.tier-ur[open] .win-wave{animation:win-wave 2s ease-out 3;border-width:3px}.tier-ur[open] .win-effects i{animation:win-particle 2s ease-out 3;animation-delay:calc(var(--i)*.045s);text-shadow:0 0 14px #ffdf80}.tier-ur[open] .win-rarity{animation:win-glow 1.5s ease-in-out 4}@keyframes win-appear{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}@keyframes win-glow{50%{filter:brightness(1.5);text-shadow:0 0 55px var(--win)}}@keyframes win-wave{0%{opacity:.8;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3)}}@keyframes win-particle{0%{opacity:0;transform:rotate(calc(var(--i)*18deg)) translateY(-35px) scale(.3)}20%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--i)*18deg)) translateY(-290px) scale(1.3)}}@media(prefers-reduced-motion:reduce){.capsule-win,.capsule-win *{animation:none!important}.win-wave,.win-effects i{display:none}}@media(max-width:480px){.win-content{padding:32px 22px 24px}.win-rarity{font-size:60px}.capsule-win h2{font-size:19px}}
/* Keep the native dialog centered despite the global margin reset. */
dialog.capsule-win{position:fixed;inset:0;margin:auto;width:min(480px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 32px);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
dialog.capsule-win::-webkit-scrollbar{display:none;width:0;height:0}
html:has(dialog.capsule-win[open]){overflow:hidden}
@media(max-height:650px){.win-content{padding-top:24px;padding-bottom:20px}.win-rarity{font-size:52px}.win-orb{width:64px;height:64px;margin:14px auto}.win-tier-name{margin-bottom:14px}.capsule-win h2{margin-top:14px}.win-confirm{margin-top:14px}}