/* Prompt-Vault original Open-source Reference Library.
   Styles for our own specimens, NOT shipped or copied vendor components. MIT. */
.ref-hero { border-bottom:1px solid var(--ink); padding-top:22px }
.ref-topline,.ref-hero-foot { display:flex; justify-content:space-between; align-items:center; gap:12px }
.ref-topline{border-bottom:1px solid var(--line);padding:14px 0;color:var(--mid)}
.ref-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.72fr);gap:clamp(20px,5vw,84px);align-items:stretch;padding:44px 0 55px}
.ref-kicker{margin:0;color:var(--mid)}
.ref-kicker span{color:var(--coral);margin-right:9px;font-size:1.25rem}
.ref-hero h1{font:500 clamp(4rem,7.6vw,8.6rem)/.93 var(--display);letter-spacing:-.085em;margin:47px 0 28px;max-width:12ch}
.ref-hero h1 em,.ref-index-intro h2 em,.ref-rules h2 em{color:var(--coral);font-weight:400}
.ref-intro{font-size:clamp(1.06rem,1.55vw,1.36rem);line-height:1.5;max-width:33rem;color:#25382d}
.ref-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px}
.ref-hero-poster{background:#d6ec7e;color:#15251c;border:1px solid var(--ink);min-height:460px;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,43px);position:relative;overflow:hidden}
.ref-hero-poster::after{content:"";position:absolute;top:15%;right:-30%;width:110%;aspect-ratio:1;border-radius:50%;border:1px solid #1e342a;opacity:.18;pointer-events:none}
.ref-poster-top,.ref-poster-rule{display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid #283a31;padding-bottom:13px}
.ref-poster-symbol{align-self:flex-end;font-size:clamp(8rem,18vw,18rem);line-height:.75;margin-right:13%;font-weight:300;transform:rotate(-16deg);z-index:1}
.ref-poster-quote{font:400 clamp(2.3rem,4vw,4.7rem)/1 var(--display);letter-spacing:-.06em;max-width:11ch;z-index:1;margin:20px 0 35px}
.ref-poster-quote em{font-style:italic;color:#8d3d2b}
.ref-poster-rule{border-top:1px solid #283a31;border-bottom:0;padding:14px 0 0;font-size:.63rem;font-weight:800;letter-spacing:.11em}
.ref-hero-foot{border-top:1px solid var(--line);padding:18px 0}
.ref-index-intro{padding:92px 0 64px}
.ref-intro-row{display:grid;grid-template-columns:1fr minmax(0,.85fr);gap:30px;align-items:end}
.ref-index-intro h2,.ref-rules h2{font:400 clamp(3.8rem,6vw,6.5rem)/.97 var(--display);letter-spacing:-.073em;margin:35px 0 0}
.ref-intro-row p{color:#3a5044;line-height:1.65;max-width:36rem;font-size:1rem;margin:0}
.ref-gallery-area{background:#ecece3;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:42px 0 82px}
.ref-filter-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}
.ref-filter-top h2{margin:0}
.ref-legend{font-size:.78rem;color:var(--mid)}
.ref-search{display:grid;gap:9px;max-width:100%;margin:0}
.ref-search>label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.ref-search-field{display:flex;gap:12px;align-items:center;background:#fffdf8;border:1px solid #27392e;padding:0 14px}
.ref-search-field>span{font-size:2rem;line-height:1}
.ref-search-field input{width:100%;height:58px;outline:none;border:0;background:transparent;font-size:1.05rem}
.ref-search-field:focus-within{outline:3px solid var(--coral);outline-offset:2px}
.ref-search-field input:focus-visible{outline:none}
.ref-search-field button{border:0;background:none;font-size:.78rem;text-decoration:underline;text-underline-offset:3px;font-weight:700;min-height:44px}
.ref-filter-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:22px 0}
.ref-filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.ref-filter-chips button{font-weight:750;font-size:.78rem;min-height:44px;border:1px solid #85968a;background:transparent;padding:8px 14px;transition:background .15s ease}
.ref-filter-chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fffcf5}
.ref-filter-chips button:hover:not([aria-pressed=true]){background:#d8decf}
.ref-sort-label{display:flex;gap:9px;align-items:center;font-size:.76rem;font-weight:800}
.ref-sort-label select{min-height:44px;padding:9px 14px;border:1px solid #85968a;background:#fffcf5}
.ref-count{font-size:.79rem;color:#3c5247;font-weight:700;min-height:1.5rem;margin:16px 0 24px}
.ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.ref-card{background:#fffcf5;border:1px solid var(--ink);display:flex;flex-direction:column;min-width:0;box-shadow:8px 8px 0 #d4dacd}
.ref-card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px 16px;border-bottom:1px solid #adb8a9}
.ref-card-header .micro{color:#52645a}
.ref-license-tag{font-size:.63rem;font-weight:850;letter-spacing:.04em;border:1px solid #718477;padding:7px 9px;text-transform:uppercase}
.ref-license-tag[data-status=unknown]{background:#f7e0c4;color:#67331c;border-color:#b98161}
.ref-license-tag[data-status=verify-file]{background:#faedc4;color:#53431a;border-color:#b1a261}
.ref-license-tag[data-status=verified]{background:#e6f1d5;color:#2b4b23}
.ref-card-body{padding:22px 22px 15px}
.ref-card-body h3{font:500 clamp(1.9rem,3vw,3.05rem)/1.02 var(--display);letter-spacing:-.057em;margin:8px 0 8px}
.ref-card-body p{margin:0;color:#3e5448;line-height:1.55;font-size:.88rem;max-width:40rem}
.ref-card-type{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.ref-study-container{padding:8px 22px 18px;flex:1}
.resource-study{height:280px;background:#eff0e6;border:1px solid #acb6a9;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;color:#17251e;font:14px/1.4 var(--sans)}
.ref-card[data-source=motion-primitives] .resource-study{background:#f0ebf5}
.ref-card[data-source=magic-ui] .resource-study{background:#141d1a;color:#e7efe6}
.ref-card[data-source=ui-promptly] .resource-study{background:#e3e7dc}
.ref-card[data-source=superdesign-prompts] .resource-study{background:#e9dccc}
.ref-card[data-source=uiverse-galaxy] .resource-study{background:#dae4ed}
.ref-card[data-source=origin-ui] .resource-study{background:#e3e8e9}
.ref-card[data-source=react-native-reusables] .resource-study{background:#dce5d9}
.ref-card[data-source=gluestack-ui] .resource-study{background:#e8e1da}
.ref-study-caption{font-size:.68rem;color:#506459;padding:10px 0 0;margin:0}
.ref-card-actions{display:flex;align-items:center;gap:12px;padding:16px 22px 22px;flex-wrap:wrap;margin-top:auto}
.ref-detail-button{font-size:.8rem;min-height:46px;border:1px solid var(--ink);background:var(--ink);color:#fffcf5;padding:10px 14px;font-weight:800}
.ref-card-actions a{font-size:.78rem;font-weight:750}
.ref-card-actions a:hover{text-decoration-thickness:2px}
.ref-empty{border:1px dashed var(--line);padding:55px;background:#f9f7ef;text-align:center}
.ref-empty h3{font:500 2.4rem var(--display);letter-spacing:-.05em}
.ref-reset{border:1px solid var(--ink);background:var(--acid);padding:12px 18px;min-height:48px}
.ref-rules{padding:83px 0 98px}
.ref-rules h2{margin:33px 0 35px}
.ref-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.ref-rule-grid>div{border-top:1px solid var(--ink);padding-top:20px}
.ref-rule-index{display:block;font-size:.77rem;font-weight:850;color:var(--coral)}
.ref-rule-grid h3{font:500 clamp(1.7rem,2.4vw,2.5rem) var(--display);letter-spacing:-.05em;margin:15px 0}
.ref-rule-grid p{font-size:.87rem;line-height:1.65;color:#405448}
.ref-source-note{margin-top:37px;border-left:3px solid var(--coral);padding-left:16px;font-size:.86rem;max-width:62rem}
/* Shared original preview components */
.ref-mini-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.58rem;text-transform:uppercase;letter-spacing:.09em;font-weight:850;border-bottom:1px solid currentColor;padding-bottom:11px}
.ref-mini-board{margin:20px auto;max-width:340px;width:calc(100% - 42px);min-height:214px;padding:14px 17px;background:#fffcf3;border:1px solid #22372c;box-shadow:8px 8px 0 rgba(20,30,25,.12);display:flex;flex-direction:column;justify-content:space-between}
.ref-mini-title{font:500 clamp(1.8rem,2.9vw,2.6rem)/.94 var(--display);letter-spacing:-.065em;margin:10px 0}
.ref-mini-copy{font-size:.73rem;line-height:1.35;margin:5px 0 12px;max-width:26ch}
.ref-mini-button{background:#17291e;color:#fff;padding:8px 12px;border:1px solid #17291e;font-size:.65rem;font-weight:850;min-height:32px;display:inline-flex;align-items:center;gap:8px}
.ref-mini-rule{border-top:1px solid #8c9c8e;display:flex;justify-content:space-between;padding-top:9px;font-size:.61rem}
.ref-mini-tabs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 12px}
.ref-mini-tabs button{font:750 .67rem var(--sans);background:transparent;border:1px solid #718377;padding:8px 10px;min-height:34px;cursor:pointer}
.ref-mini-tabs button[aria-pressed=true]{background:#17291e;color:white}
.ref-mini-tabs button:focus-visible,.resource-study button:focus-visible,.resource-study input:focus-visible{outline:2px solid #d35c38;outline-offset:3px}
.ref-faux-dashboard{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;flex:1;margin-top:12px}
.ref-faux-dashboard>div{background:#dce4d3;padding:10px;display:flex;flex-direction:column;gap:7px}
.ref-faux-dashboard .ref-faux-row{height:9px;background:#aebfa7;display:block}
.ref-faux-dashboard .ref-faux-row.short{width:60%}
.ref-faux-dashboard strong{font:600 1.6rem var(--display)}
.ref-spec-document{max-width:345px;margin:auto;padding:18px;background:#fffefa;min-height:200px;width:calc(100% - 40px);border:1px solid #252b28;box-shadow:7px 7px 0 rgba(65,40,20,.18);display:flex;flex-direction:column;gap:8px}
.ref-spec-badge{background:#193228;color:#ebf0d0;padding:5px 9px;align-self:flex-start;font-size:.63rem}
.ref-spec-document strong{font:500 1.8rem var(--display);letter-spacing:-.05em}
.ref-spec-document p{font-size:.78rem;margin:0;line-height:1.4}
.ref-spec-rail{display:flex;align-items:center;justify-content:space-between;gap:9px;border-top:1px solid #b5ab97;padding-top:8px;font-size:.65rem;margin-top:auto}
.ref-expand-demo{max-width:345px;width:calc(100% - 38px);margin:auto}
.ref-expand-demo>button{display:flex;justify-content:space-between;width:100%;background:#1e1b2b;color:#f8f0fd;border:1px solid #1e1b2b;padding:14px 17px;min-height:55px;align-items:center;text-align:left;font-weight:800}
.ref-expand-body{background:#fffaff;border:1px solid #282039;border-top:0;padding:14px;color:#342946;font-size:.82rem}
.ref-expand-body[hidden]{display:none}
.ref-switch-demo{max-width:350px;width:calc(100% - 35px);margin:auto;padding:22px;background:#fbfcfa;border:1px solid #607787;display:flex;align-items:center;gap:23px;justify-content:space-between}
.ref-switch-demo[data-active=true]{background:#1d3350;color:#f1fafb}
.ref-switch-demo strong{font:500 1.8rem var(--display)}
.ref-switch-demo small{display:block;font-size:.7rem;margin-top:5px}
.ref-switch{width:77px;height:44px;border-radius:30px;border:2px solid #193044;background:#bdcbd5;padding:3px;flex:0 0 auto;display:flex;align-items:center;justify-content:flex-start}
.ref-switch[aria-checked=true]{justify-content:flex-end;background:#d5ed7e}
.ref-switch-ball{height:32px;width:32px;display:block;border-radius:50%;background:#183849;transition:transform .2s ease}
.ref-reveal-demo{max-width:370px;width:calc(100% - 34px);min-height:215px;margin:auto;border:1px solid #697668;background:#1b2b24;padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.ref-reveal-demo p{font-size:.72rem;color:#b7cabc;max-width:30ch;margin:9px 0}
.ref-reveal-demo strong{font:400 2rem var(--display);letter-spacing:-.06em;color:#ecf6ef}
.ref-reveal-demo button{align-self:flex-start;background:#d7ec84;color:#1a2b20;border:0;padding:9px 15px;font-size:.72rem;font-weight:800;min-height:38px}
.ref-reveal-target{font:600 .85rem var(--sans);color:#d7ec84;min-height:28px;padding:7px 0}
.ref-reveal-target[hidden]{display:none}
.ref-form-demo{width:calc(100% - 40px);max-width:348px;margin:auto;padding:17px;background:#fff;border:1px solid #889ba3;box-shadow:7px 7px 0 #b9c9d3}
.ref-form-demo label{font-size:.72rem;font-weight:850;display:block;margin-bottom:8px}
.ref-form-demo .ref-form-row{display:flex;gap:7px}
.ref-form-demo input{min-width:0;width:100%;font-size:.75rem;background:#fff;border:1px solid #60737a;min-height:38px;padding:7px}
.ref-form-demo button{background:#1c313b;color:white;min-height:38px;padding:7px 11px;border:0;font-size:.69rem;font-weight:850}
.ref-form-status{font-size:.71rem;margin:9px 0 0;color:#324954;min-height:1.3rem}
.ref-phone{width:min(240px,72%);min-height:253px;margin:6px auto;background:#fffefb;border:5px solid #21372d;border-bottom-width:6px;border-radius:22px;padding:14px 12px;box-shadow:11px 13px 0 rgba(34,49,38,.1);display:flex;flex-direction:column;gap:11px}
.ref-phone-top{display:flex;justify-content:space-between;font-size:.6rem;align-items:center;font-weight:800;letter-spacing:.09em}
.ref-phone strong{font:500 1.7rem var(--display);letter-spacing:-.06em}
.ref-phone .ref-mini-tabs button{flex:1;border-radius:0;padding:6px;font-size:.6rem;min-height:33px}
.ref-phone-row{display:flex;gap:8px;align-items:center;padding:8px;background:#eff3e9;font-size:.68rem;min-height:34px}
.ref-phone-row span:first-child{font-size:1rem}
.ref-adaptive-board{width:calc(100% - 40px);max-width:390px;min-height:213px;margin:auto;background:#fffefc;border:1px solid #535b55;padding:15px;display:flex;flex-direction:column;gap:12px}
.ref-adaptive-board .ref-mini-tabs{margin:0}
.ref-adaptive-columns{display:grid;grid-template-columns:1fr;gap:10px;flex:1}
.ref-adaptive-columns[data-layout=tablet]{grid-template-columns:.75fr 1.25fr}
.ref-adaptive-rail{background:#e3e9de;padding:10px;font-size:.7rem;display:grid;gap:10px;align-content:start}
.ref-adaptive-detail{background:#f9f5ef;padding:12px;font-size:.75rem;display:flex;align-items:center}
.ref-adaptive-detail[hidden]{display:none}
.ref-adaptive-columns[data-layout=tablet] .ref-adaptive-detail{display:flex}
.ref-art-annotation{font-size:.6rem;letter-spacing:.08em;color:#51665a;text-transform:uppercase;margin:0 20px 4px}
.ref-mini-tabs button:hover,.ref-mini-button:hover,.ref-reveal-demo button:hover{filter:brightness(.92)}
/* Dialog is a user-triggered detail document with a second interactive original sample. */
.ref-dialog{width:min(960px,calc(100% - 22px));max-height:min(94vh,1000px);border:1px solid var(--ink);padding:0;color:var(--ink);background:#faf8f0;box-shadow:16px 22px 0 rgba(5,19,12,.2)}
.ref-dialog::backdrop{background:rgba(10,20,14,.68)}
.ref-dialog-head{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:27px 30px 16px}
.ref-dialog-head h2{font:500 clamp(2.4rem,5vw,4.2rem)/1 var(--display);letter-spacing:-.075em;margin:9px 0}
.ref-dialog-close{min-width:48px;min-height:48px;border:1px solid var(--ink);background:transparent;font-size:1.2rem}
.ref-dialog-tabs{display:flex;gap:7px;border-bottom:1px solid var(--line);padding:0 30px;flex-wrap:wrap}
.ref-dialog-tabs button{padding:13px 14px;min-height:44px;background:transparent;border:0;border-bottom:3px solid transparent;font-size:.8rem;font-weight:800}
.ref-dialog-tabs button[aria-selected=true]{border-bottom-color:var(--coral);color:#a23a24}
.ref-dialog-panel{padding:25px 30px 35px;min-height:260px}
.ref-dialog-description{font-size:.88rem;max-width:740px;color:#3b5043;line-height:1.55}
.ref-preview-warning{font-size:.72rem;color:#825340;margin-bottom:20px}
.ref-detail-study .resource-study{height:370px;max-width:790px;margin:20px auto;border:1px solid var(--ink)}
.ref-detail-study .ref-mini-board,.ref-detail-study .ref-spec-document{transform:scale(1.14)}
.ref-dialog-focus{border-top:1px solid var(--line);padding-top:13px;font-size:.85rem;font-weight:750}
.ref-prompt-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin:15px 0}
.ref-action-primary{min-height:44px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:12px 17px;font-weight:800}
.ref-prompt-actions a{font-size:.85rem}
.ref-prompt-box{white-space:pre-wrap;overflow-wrap:anywhere;max-height:410px;overflow:auto;padding:20px;border:1px solid var(--line);background:#f2f0e7;color:#18261e;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}
.ref-license-text{font-weight:750;font-size:1.05rem}
.ref-license-standard{border-left:3px solid var(--coral);padding-left:14px;color:#4b5c4e;font-size:.82rem;margin:20px 0 0}
.ref-dialog-footer{border-top:1px solid var(--ink);display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;padding:20px 30px;background:#ddecbe;font-size:.82rem;font-weight:800}
.ref-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;background:#17281e;color:#fffef5;padding:14px 25px;box-shadow:4px 4px 0 var(--coral);font-size:.82rem;max-width:calc(100% - 20px)}
@media(max-width:1050px){.ref-hero-grid{grid-template-columns:minmax(0,1fr) minmax(275px,.8fr);gap:25px}.ref-hero h1{font-size:clamp(3.5rem,7.4vw,6.5rem)}.ref-grid{gap:18px}}
@media(max-width:780px){.ref-hero-grid{grid-template-columns:1fr}.ref-hero-poster{min-height:320px}.ref-poster-symbol{font-size:11rem}.ref-intro-row{grid-template-columns:1fr}.ref-rule-grid{grid-template-columns:1fr;gap:15px}.ref-grid{grid-template-columns:1fr}.ref-hero h1{font-size:clamp(3.75rem,9.6vw,6.7rem)}.ref-intro-row p{max-width:55rem}}
@media(max-width:520px){.ref-hero-grid{padding:25px 0 38px}.ref-hero h1{font-size:clamp(3.3rem,11vw,5rem);margin:27px 0}.ref-hero-poster{min-height:260px}.ref-poster-symbol{font-size:8rem}.ref-hero-foot{flex-wrap:wrap;font-size:.6rem}.ref-index-intro,.ref-rules{padding:55px 0}.ref-index-intro h2,.ref-rules h2{font-size:3.4rem}.ref-card-header,.ref-card-body,.ref-card-actions{padding-left:15px;padding-right:15px}.ref-study-container{padding:7px 15px 15px}.resource-study{height:280px}.ref-dialog-head,.ref-dialog-panel{padding-left:15px;padding-right:15px}.ref-dialog-tabs{padding:0 10px}.ref-dialog-tabs button{font-size:.67rem;padding:10px}.ref-dialog-footer{padding:15px}.ref-detail-study .resource-study{height:340px}.ref-detail-study .ref-mini-board{transform:none}.ref-mini-title{font-size:1.8rem}.ref-hero-poster{padding:20px}.ref-hero-actions{align-items:stretch}.ref-hero-actions>.btn{justify-content:center}.ref-filter-top{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.resource-study *, .resource-study *::before,.resource-study *::after{transition:none!important;animation:none!important}.ref-filter-chips button{transition:none!important}}