/* Lucian UX/UI element styles, unchanged. Site-level adaptations live in site.css. */

/* Lucian UX/UI Prompt #001 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#001 */
/* #001 Liquid glass button */
.u001{--g1:rgba(255,255,255,.66);--g2:rgba(255,255,255,.16);--g3:rgba(255,255,255,.4);--hi:rgba(255,255,255,.95);--rim:rgba(255,255,255,.65);--drop:rgba(70,48,160,.42);--blob:.55;
  position:relative;width:340px;height:240px;display:grid;place-items:center;isolation:isolate}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .u001{--g1:rgba(255,255,255,.2);--g2:rgba(255,255,255,.03);--g3:rgba(255,255,255,.1);--hi:rgba(255,255,255,.5);--rim:rgba(255,255,255,.16);--drop:rgba(0,0,0,.75);--blob:.5}}
:root[data-theme="dark"] .u001{--g1:rgba(255,255,255,.2);--g2:rgba(255,255,255,.03);--g3:rgba(255,255,255,.1);--hi:rgba(255,255,255,.5);--rim:rgba(255,255,255,.16);--drop:rgba(0,0,0,.75);--blob:.5}
.u001-blobs{position:absolute;inset:0;z-index:-1;pointer-events:none}
.u001-blobs i{position:absolute;border-radius:50%;filter:blur(30px);opacity:var(--blob);animation:u001-drift 12s ease-in-out infinite alternate}
.u001-blobs i:nth-child(1){left:30px;top:44px;width:150px;height:130px;background:#8B6CFF}
.u001-blobs i:nth-child(2){right:24px;bottom:34px;width:160px;height:118px;background:#33B6FF;animation-delay:-4s}
.u001-blobs i:nth-child(3){left:150px;top:36px;width:92px;height:92px;background:#3BE0B0;opacity:calc(var(--blob) * .7);animation-delay:-8s}
@keyframes u001-drift{from{transform:translate3d(-10px,-6px,0) scale(1)}to{transform:translate3d(12px,8px,0) scale(1.12)}}
.u001-mag{transition:translate .8s var(--ux-spring)}
.u001-float{animation:u001-float 6s ease-in-out infinite}
@keyframes u001-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.u001-btn{position:relative;display:block;width:252px;height:78px;padding:0;border:0;border-radius:999px;overflow:hidden;isolation:isolate;color:var(--ux-ink);
  background:linear-gradient(150deg,var(--g1),var(--g2) 55%,var(--g3));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1.5px 0 var(--hi),inset 0 -12px 20px -14px var(--hi),inset 0 0 0 1px var(--rim),0 26px 44px -22px var(--drop),0 3px 8px -4px var(--drop);
  transition:width .7s var(--ux-ease),transform .55s var(--ux-spring),box-shadow .6s var(--ux-ease)}
.u001-btn::before{content:"";position:absolute;left:9%;right:9%;top:7%;height:42%;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0))}
.u001-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ux-ease);background:radial-gradient(130px 70px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.4),transparent 70%)}
.u001-btn:hover::after{opacity:1}
.u001-btn:active{transform:scale(1.03,.92)}
.u001-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:6px}
.u001-sheen{position:absolute;top:-40%;bottom:-40%;left:0;width:38%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45) 50%,transparent);transform:translateX(-150%) skewX(-12deg);transition:transform 1.1s var(--ux-ease)}
.u001-btn:hover .u001-sheen{transform:translateX(300%) skewX(-12deg)}
.u001-txt,.u001-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:680;letter-spacing:-.025em;white-space:nowrap;transition:opacity .35s var(--ux-ease),transform .55s var(--ux-ease),filter .4s var(--ux-ease)}
.u001-done{opacity:0;transform:translateY(14px);filter:blur(4px)}
.u001-done b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--ux-mint) 22%,transparent)}
.u001-done svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.u001-done path{stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .5s var(--ux-ease) .3s}
.u001-spin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;transform:scale(.5);transition:opacity .35s var(--ux-ease),transform .6s var(--ux-spring)}
.u001-spin svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;animation:u001-rot 1s linear infinite}
.u001-spin circle{stroke-dasharray:1 56;animation:u001-arc 1.4s ease-in-out infinite}
@keyframes u001-rot{to{transform:rotate(360deg)}}
@keyframes u001-arc{0%,100%{stroke-dasharray:1 56}50%{stroke-dasharray:38 19}}
.u001[data-state="load"] .u001-btn{width:78px;cursor:progress}
.u001[data-state="load"] .u001-txt{opacity:0;transform:translateY(-14px);filter:blur(5px)}
.u001[data-state="load"] .u001-spin{opacity:1;transform:none}
.u001[data-state="ok"] .u001-btn{transition-timing-function:var(--ux-spring);box-shadow:inset 0 1.5px 0 var(--hi),inset 0 0 0 1px var(--rim),0 26px 44px -22px var(--drop),0 0 52px -8px color-mix(in srgb,var(--ux-mint) 70%,transparent)}
.u001[data-state="ok"] .u001-txt{opacity:0;transform:translateY(-14px);filter:blur(5px)}
.u001[data-state="ok"] .u001-done{opacity:1;transform:none;filter:none}
.u001[data-state="ok"] .u001-done path{stroke-dashoffset:0}
.u001-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Lucian UX/UI Prompt #008 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#008 */
/* #008 Copy button that turns into a check */
.u008{position:relative;width:340px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.u008-tabs{display:flex;gap:4px;align-self:flex-start;margin-left:12px}
.u008-tab{height:30px;padding:0 12px;border:0;border-radius:9px;background:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;color:var(--ux-ink-3);transition:background-color .3s var(--ux-ease),color .3s var(--ux-ease)}
.u008-tab[aria-selected="true"]{background:var(--ux-surface);color:var(--ux-ink);box-shadow:0 0 0 1px var(--ux-line)}
.u008-box{position:relative;display:flex;align-items:center;width:316px;height:62px;padding:0 8px 0 18px;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 18px 32px -24px var(--ux-shadow-strong);overflow:visible;transition:box-shadow .45s var(--ux-ease)}
.u008-code{position:relative;flex:1;min-width:0;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;white-space:nowrap;color:var(--ux-ink)}
.u008-code em{font-style:normal;color:var(--ux-mint);margin-right:8px;user-select:none}
.u008-code b{font-weight:500;color:var(--ux-accent)}
.u008-cmd{display:inline-block}
.u008-code::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--ux-mint) 30%,transparent) 50%,transparent 80%);transform:translateX(-110%);pointer-events:none}
.u008.is-copied .u008-code::after{animation:u008-sweep .7s var(--ux-ease)}
@keyframes u008-sweep{to{transform:translateX(110%)}}
.u008-btn{position:relative;flex:none;width:46px;height:46px;border:0;padding:0;border-radius:13px;background:var(--ux-surface-2);color:var(--ux-ink-2);display:grid;place-items:center;transition:background-color .35s var(--ux-ease),color .35s var(--ux-ease),transform .45s var(--ux-spring)}
.u008-btn:hover{background:var(--ux-surface-3);color:var(--ux-ink)}
.u008-btn:active{transform:scale(.88)}
.u008-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u008-btn svg{position:absolute;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s var(--ux-ease),transform .5s var(--ux-spring)}
.u008-ok{opacity:0;transform:scale(.4) rotate(-30deg)}
.u008-ok path{stroke-width:2.6;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--ux-ease) .1s}
.u008.is-copied .u008-btn{background:var(--ux-mint);color:var(--ux-accent-ink)}
.u008.is-copied .u008-cp{opacity:0;transform:scale(.4) rotate(30deg)}
.u008.is-copied .u008-ok{opacity:1;transform:none}
.u008.is-copied .u008-ok path{stroke-dashoffset:0}
.u008.is-copied .u008-box{box-shadow:0 0 0 1.5px var(--ux-mint),0 0 0 6px color-mix(in srgb,var(--ux-mint) 16%,transparent),0 18px 32px -24px var(--ux-shadow-strong)}
.u008-tip{position:absolute;right:-6px;top:-44px;padding:7px 12px;border-radius:10px;background:var(--ux-ink);color:var(--ux-page);font-size:13px;font-weight:650;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(8px) scale(.8);transform-origin:80% 100%;transition:opacity .25s var(--ux-ease),transform .5s var(--ux-spring)}
.u008-tip::after{content:"";position:absolute;right:24px;bottom:-5px;width:10px;height:10px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.u008.is-copied .u008-tip{opacity:1;transform:none}

/* Lucian UX/UI Prompt #009 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#009 */
/* #009 Rolling label button */
.u009{position:relative;width:320px;height:160px;display:grid;place-items:center}
.u009-btn{position:relative;display:flex;align-items:center;gap:16px;height:68px;padding:0 10px 0 30px;border:0;border-radius:999px;background:transparent;color:var(--ux-ink);overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1.5px var(--ux-ink);transition:transform .5s var(--ux-spring),color .45s var(--ux-ease)}
.u009-btn:active{transform:scale(.96)}
.u009-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:5px}
.u009-fill{position:absolute;inset:0;z-index:-1;background:var(--ux-ink);border-radius:50% 50% 0 0/40% 40% 0 0;transform:translateY(102%);transition:transform .7s var(--ux-ease),border-radius .7s var(--ux-ease)}
.u009.is-on .u009-fill{transform:none;border-radius:0}
.u009.is-on .u009-btn{color:var(--ux-page)}
.u009-word{position:relative;display:flex;height:26px;overflow:hidden;font-size:20px;font-weight:740;letter-spacing:-.03em;line-height:26px}
.u009-face>span{display:flex;flex-direction:column;transition:transform .55s var(--ux-ease);transition-delay:calc(var(--i) * 22ms)}
.u009-face>span::after{content:attr(data-c);display:block}
.u009-btn:hover .u009-face>span,.u009-btn:focus-visible .u009-face>span{transform:translateY(-26px)}
.u009-face{display:flex;transition:transform .6s var(--ux-spring),opacity .3s var(--ux-ease)}
.u009-face+.u009-face{position:absolute;left:0;top:0;transform:translateY(110%);opacity:0}
.u009.is-on .u009-face:first-child{transform:translateY(-110%);opacity:0}
.u009.is-on .u009-face+.u009-face{transform:none;opacity:1}
.u009-orb{position:relative;width:48px;height:48px;flex:none;border-radius:50%;background:var(--ux-grad);color:#fff;box-shadow:0 8px 18px -8px rgba(91,72,255,.6);overflow:hidden;transition:background-color .45s var(--ux-ease),color .45s var(--ux-ease),transform .6s var(--ux-spring)}
.u009.is-on .u009-orb{transform:rotate(90deg)}
.u009-orb svg{position:absolute;left:13px;top:13px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ux-ease)}
.u009-orb svg+svg{transform:translate(-36px,36px)}
.u009-btn:hover .u009-orb svg:first-child{transform:translate(36px,-36px)}
.u009-btn:hover .u009-orb svg+svg{transform:none;transition-delay:.08s}
.u009-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Lucian UX/UI Prompt #010 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#010 */
/* #010 Split action button */
.u010{position:relative;width:320px;height:310px}
.u010-grp{position:absolute;left:20px;top:124px;display:flex;height:62px;border-radius:19px;background:var(--ux-ink);color:var(--ux-page);box-shadow:0 22px 38px -22px var(--ux-shadow-strong);transition:background-color .5s var(--ux-ease),transform .6s var(--ux-spring)}
.u010[data-open="1"] .u010-grp{transform:translateY(-96px)}
.u010-main{position:relative;display:flex;align-items:center;gap:12px;width:222px;height:100%;padding:0 20px;border:0;border-radius:19px 0 0 19px;background:none;color:inherit;overflow:hidden;transition:transform .45s var(--ux-spring)}
.u010-main:active{transform:scale(.97)}
.u010-main:focus-visible,.u010-caret:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u010-ic{position:relative;width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--ux-grad);color:#fff}
.u010-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s var(--ux-ease),transform .5s var(--ux-spring)}
.u010-ic .u010-spin,.u010-ic .u010-ok{position:absolute;opacity:0;transform:scale(.4)}
.u010-spin{animation:u010-rot .9s linear infinite}
@keyframes u010-rot{to{rotate:360deg}}
.u010-labs{position:relative;height:24px;overflow:hidden;flex:1;text-align:left}
.u010-labs span{display:block;font-size:16.5px;font-weight:700;line-height:24px;letter-spacing:-.02em;white-space:nowrap;transition:transform .5s var(--ux-spring),opacity .3s var(--ux-ease)}
.u010-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ux-grad);transform-origin:0 50%;transform:scaleX(0);opacity:0}
.u010[data-state="busy"] .u010-bar{opacity:1;animation:u010-fill 1.5s cubic-bezier(.4,.1,.3,1) forwards}
@keyframes u010-fill{to{transform:scaleX(1)}}
.u010[data-state="busy"] .u010-main{cursor:progress}
.u010[data-state="busy"] .u010-ic .u010-go{opacity:0;transform:translate(6px,-6px) scale(.6)}
.u010[data-state="busy"] .u010-ic .u010-spin{opacity:1;transform:none}
.u010[data-state="done"] .u010-grp{background:var(--ux-mint)}
.u010[data-state="done"] .u010-main{color:var(--ux-accent-ink)}
.u010[data-state="done"] .u010-ic{background:color-mix(in srgb,var(--ux-accent-ink) 16%,transparent);color:var(--ux-accent-ink)}
.u010[data-state="done"] .u010-ic .u010-go{opacity:0}
.u010[data-state="done"] .u010-ic .u010-ok{opacity:1;transform:none}
.u010-div{width:1px;margin:14px 0;background:color-mix(in srgb,var(--ux-page) 22%,transparent)}
.u010-caret{width:58px;height:100%;border:0;border-radius:0 19px 19px 0;background:none;color:inherit;display:grid;place-items:center;transition:background-color .3s var(--ux-ease)}
.u010-caret:hover{background:color-mix(in srgb,var(--ux-page) 9%,transparent)}
.u010-caret svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ux-spring)}
.u010[data-open="1"] .u010-caret svg{transform:rotate(180deg)}
.u010-menu{position:absolute;left:20px;top:102px;width:281px;margin:0;padding:6px;list-style:none;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -28px var(--ux-shadow-strong);
  transform-origin:88% 0;opacity:0;transform:translateY(40px) scale(.92);pointer-events:none;visibility:hidden;transition:opacity .2s var(--ux-ease),transform .45s var(--ux-spring),visibility 0s linear .45s}
.u010[data-open="1"] .u010-menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s var(--ux-ease) .06s,transform .6s var(--ux-spring)}
.u010-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:14px;background:none;text-align:left;color:var(--ux-ink);opacity:0;transform:translateY(-6px);transition:background-color .25s var(--ux-ease),opacity .3s var(--ux-ease),transform .45s var(--ux-spring)}
.u010[data-open="1"] .u010-opt{opacity:1;transform:none}
.u010[data-open="1"] li:nth-child(2) .u010-opt{transition-delay:.04s}
.u010[data-open="1"] li:nth-child(3) .u010-opt{transition-delay:.08s}
.u010-opt:hover,.u010-opt:focus-visible{background:var(--ux-surface-2);outline:none}
.u010-oi{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff}
.u010-oi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u010-opt b{display:block;font-size:14.5px;font-weight:680}
.u010-opt small{display:block;margin-top:2px;font-size:12.5px;color:var(--ux-ink-3)}
.u010-chk{margin-left:auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ux-accent);color:var(--ux-accent-ink);transform:scale(0);transition:transform .45s var(--ux-spring)}
.u010-chk svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u010-opt[aria-checked="true"] .u010-chk{transform:none}
.u010-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Lucian UX/UI Prompt #013 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#013 */
/* #013 Stretchy switch */
.u013{--on:linear-gradient(135deg,#2FD8A8,#14B8A6 55%,#0EA5E9);position:relative;width:300px;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.u013-sw{position:relative;width:140px;height:76px;border:0;padding:0;border-radius:999px;background:var(--ux-surface-3);touch-action:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.12),inset 0 0 0 1px var(--ux-line);transition:box-shadow .5s var(--ux-ease)}
.u013-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--on);opacity:0;transition:opacity .45s var(--ux-ease)}
.u013-sw:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
.u013.is-on .u013-sw::before{opacity:1}
.u013.is-on .u013-sw{box-shadow:inset 0 2px 6px rgba(0,0,0,.12),0 16px 30px -16px rgba(20,184,166,.8)}

.u013-knob{position:absolute;top:8px;left:8px;width:60px;height:60px;border-radius:999px;background:#fff;display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 14px -4px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.06);
  transition:left .5s var(--ux-spring),width .32s var(--ux-ease)}
.u013.is-on .u013-knob{left:72px}
.u013.is-stretch .u013-knob{width:84px;transition:left .5s var(--ux-spring),width .18s var(--ux-ease)}
.u013.is-on.is-stretch .u013-knob{left:48px}
.u013.is-drag .u013-knob{transition:width .2s var(--ux-ease)}
.u013-knob svg{width:24px;height:24px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u013-x{stroke:#A3A0AA;stroke-dasharray:14;stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--ux-ease) .1s}
.u013-v{stroke:#14B8A6;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s var(--ux-ease)}
.u013.is-on .u013-x{stroke-dashoffset:14;transition-delay:0s}
.u013.is-on .u013-v{stroke-dashoffset:0;transition-delay:.18s}
.u013-txt{width:260px;text-align:center}
.u013-txt b{display:block;font-size:18px;font-weight:740;letter-spacing:-.03em}
.u013-sub{position:relative;display:block;height:20px;margin-top:5px;overflow:hidden;font-size:14px;color:var(--ux-ink-3)}
.u013-sub span{display:block;line-height:20px;transition:transform .5s var(--ux-spring),opacity .3s var(--ux-ease)}
.u013-sub span+span{position:absolute;left:0;right:0;top:0;transform:translateY(100%);opacity:0;color:var(--ux-mint);font-weight:620}
.u013.is-on .u013-sub span:first-child{transform:translateY(-100%);opacity:0}
.u013.is-on .u013-sub span+span{transform:none;opacity:1}

/* Lucian UX/UI Prompt #015 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#015 */
/* #015 Plan radio cards */
.u015{position:relative;width:330px}
.u015-grp{position:relative;display:flex;flex-direction:column;gap:10px}
.u015-frame{position:absolute;left:0;right:0;top:0;height:0;border-radius:22px;pointer-events:none;
  box-shadow:0 0 0 2px var(--ux-accent),0 18px 36px -20px color-mix(in srgb,var(--ux-accent) 70%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ux-accent) 9%,transparent),transparent 70%);
  transition:top .55s var(--ux-spring),height .55s var(--ux-spring)}
.u015-opt{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;border-radius:22px;background:var(--ux-surface);color:var(--ux-ink);text-align:left;
  box-shadow:0 0 0 1px var(--ux-line);transition:transform .4s var(--ux-spring),box-shadow .3s var(--ux-ease)}
.u015-opt:hover{box-shadow:0 0 0 1px var(--ux-line-2)}
.u015-opt:active{transform:scale(.98)}
.u015-opt:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
.u015-dot{position:relative;width:24px;height:24px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ux-line-2);transition:box-shadow .3s var(--ux-ease)}
.u015-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ux-accent);transform:scale(0);transition:transform .45s var(--ux-spring)}
.u015-opt[aria-checked="true"] .u015-dot{box-shadow:inset 0 0 0 2px var(--ux-accent)}
.u015-opt[aria-checked="true"] .u015-dot::after{transform:scale(1)}
.u015-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;background:var(--g)}
.u015-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u015-txt{flex:1;min-width:0}
.u015-txt b{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:720;letter-spacing:-.02em}
.u015-txt em{font-style:normal;font-size:11px;font-weight:750;padding:3px 7px;border-radius:999px;background:var(--ux-accent-soft);color:var(--ux-accent)}
.u015-txt small{display:block;margin-top:3px;font-size:13px;color:var(--ux-ink-3)}
.u015-price{text-align:right;font-variant-numeric:tabular-nums;color:var(--ux-ink-3);transition:color .35s var(--ux-ease)}
.u015-price b{display:block;font-size:17px;font-weight:760;letter-spacing:-.02em}
.u015-price small{font-size:11.5px}
.u015-opt[aria-checked="true"] .u015-price{color:var(--ux-ink)}
.u015-cta{display:flex;align-items:center;justify-content:space-between;margin:16px 0 0;padding:0 6px;font-size:14px;color:var(--ux-ink-2)}
.u015-cta b{color:var(--ux-ink);font-variant-numeric:tabular-nums}

/* Lucian UX/UI Prompt #021 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#021 */
/* #021 Day–night sky switch */
.u021{position:relative;width:300px;height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.u021-sw{position:relative;width:224px;height:94px;border:0;padding:0;border-radius:999px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#5DB7FF,#9ED8FF);box-shadow:inset 0 4px 10px rgba(0,30,80,.28),inset 0 -2px 4px rgba(255,255,255,.4),0 18px 34px -18px rgba(40,110,200,.7);transition:box-shadow .8s var(--ux-ease)}
.u021-sw::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#141A3A,#232C5C);opacity:0;transition:opacity .8s var(--ux-ease)}
.u021-sw:focus-visible{outline:2px solid var(--ux-accent);outline-offset:5px}
.u021.is-night .u021-sw::before{opacity:1}
.u021.is-night .u021-sw{box-shadow:inset 0 4px 10px rgba(0,0,0,.5),inset 0 -2px 4px rgba(255,255,255,.08),0 18px 34px -18px rgba(20,24,70,.9)}

.u021-halo{position:absolute;z-index:1;left:47px;top:47px;width:0;height:0;transition:transform .9s var(--ux-spring)}
.u021-halo i{position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.u021-halo i:nth-child(1){width:130px;height:130px;margin:-65px}
.u021-halo i:nth-child(2){width:176px;height:176px;margin:-88px}
.u021-halo i:nth-child(3){width:222px;height:222px;margin:-111px}
.u021.is-night .u021-halo{transform:translateX(130px)}
.u021-knob{position:absolute;z-index:3;left:8px;top:8px;width:78px;height:78px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,#FFD23F 45%,#F8A91E);box-shadow:0 6px 14px -4px rgba(140,80,0,.5),inset -4px -6px 10px rgba(200,110,0,.35),inset 4px 4px 8px rgba(255,255,255,.5);
  transition:transform .9s var(--ux-spring)}
.u021-moon{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4F6FB,#C9CFDD 60%,#A9B0C2);opacity:0;transform:translateX(100%);transition:transform .8s var(--ux-ease),opacity .4s var(--ux-ease)}
.u021-moon i{position:absolute;border-radius:50%;background:#A3AABC;box-shadow:inset 1px 2px 2px rgba(0,0,0,.18)}
.u021-moon i:nth-child(1){left:20px;top:16px;width:20px;height:20px}
.u021-moon i:nth-child(2){left:46px;top:40px;width:14px;height:14px}
.u021-moon i:nth-child(3){left:24px;top:48px;width:9px;height:9px}
.u021.is-night .u021-knob{transform:translateX(130px) rotate(200deg)}
.u021.is-night .u021-moon{opacity:1;transform:none}
.u021-clouds{position:absolute;z-index:2;inset:0;transition:transform .8s var(--ux-ease),opacity .6s var(--ux-ease)}
.u021-clouds i{position:absolute;border-radius:999px;background:#fff}
.u021-clouds i:nth-child(1){right:-10px;bottom:-18px;width:120px;height:56px;box-shadow:-46px 8px 0 -6px #fff,-80px 18px 0 -10px #fff}
.u021-clouds i:nth-child(2){right:20px;bottom:-30px;width:96px;height:52px;background:#E3F1FF;box-shadow:-44px 6px 0 -8px #E3F1FF;z-index:-1}
.u021.is-night .u021-clouds{transform:translateY(80px);opacity:0}
.u021-stars{position:absolute;z-index:1;inset:0;opacity:0;transform:translateY(-30px);transition:transform .8s var(--ux-ease),opacity .6s var(--ux-ease)}
.u021-stars i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:u021-tw 2.4s ease-in-out infinite}
.u021.is-night .u021-stars{opacity:1;transform:none}
@keyframes u021-tw{50%{opacity:.3;transform:scale(.6)}}
.u021-lab{margin:0;position:relative;width:200px;height:24px;overflow:hidden;text-align:center;font-size:16px;font-weight:720;letter-spacing:-.02em}
.u021-lab span{position:absolute;left:0;right:0;top:0;line-height:24px;transition:transform .55s var(--ux-spring),opacity .3s var(--ux-ease)}
.u021-lab small{font-weight:550;color:var(--ux-ink-3);margin-left:6px}
.u021-lab span+span{transform:translateY(100%);opacity:0}
.u021.is-night .u021-lab span:first-child{transform:translateY(-100%);opacity:0}
.u021.is-night .u021-lab span+span{transform:none;opacity:1}

/* Lucian UX/UI Prompt #025 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#025 */
/* #025 Notched floating label field */
.u025{position:relative;width:340px;height:268px;display:flex;flex-direction:column;gap:14px}
.u025-btn{margin-top:auto}
.u025-f{position:relative}
.u025-box{position:relative;height:62px}
.u025-in{position:absolute;inset:0;width:100%;height:100%;padding:18px 48px 0 18px;border:0;outline:0;border-radius:16px;background:var(--ux-surface);font-size:16.5px;font-weight:560;color:var(--ux-ink);letter-spacing:-.01em}

.u025-line{position:absolute;inset:0;display:flex;pointer-events:none;border-radius:16px}
.u025-line i{display:block;border:1.5px solid var(--ux-line-2);transition:border-color .3s var(--ux-ease)}
.u025-line .l{width:14px;border-right:0;border-radius:16px 0 0 16px}
.u025-line .g{width:var(--gap,0px);border-left:0;border-right:0;transition:width .35s var(--ux-ease),border-color .3s var(--ux-ease)}
.u025-line .r{flex:1;border-left:0;border-radius:0 16px 16px 0}
.u025-f.is-up .u025-line .g{border-top-color:transparent!important}
.u025-f.is-focus .u025-line i{border-color:var(--ux-accent);border-width:2px}
.u025-f.is-bad .u025-line i{border-color:var(--ux-danger)}
.u025-f.is-ok .u025-line i{border-color:var(--ux-mint)}
.u025-lab{position:absolute;left:18px;top:21px;padding:0 4px;margin-left:-4px;font-size:16px;font-weight:560;color:var(--ux-ink-3);transform-origin:0 0;pointer-events:none;white-space:nowrap;
  transition:transform .35s var(--ux-ease),color .3s var(--ux-ease)}
.u025-f.is-up .u025-lab{transform:translate(0,-30px) scale(.8);color:var(--ux-ink-2);font-weight:650}
.u025-f.is-focus .u025-lab{color:var(--ux-accent)}
.u025-f.is-bad .u025-lab{color:var(--ux-danger)}
.u025-f.is-up .u025-in{padding-top:0}
.u025-ok{position:absolute;right:16px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:var(--ux-accent-ink);transform:scale(0);transition:transform .45s var(--ux-spring)}
.u025-ok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u025-ok path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ux-ease) .15s}
.u025-f.is-ok .u025-ok{transform:none}
.u025-f.is-ok .u025-ok path{stroke-dashoffset:0}
.u025-f.is-shake .u025-box{animation:u025-shake .42s var(--ux-ease)}
@keyframes u025-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.u025-help{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ux-ease)}
.u025-help>span{overflow:hidden;min-height:0;display:flex;align-items:center;gap:6px;padding-left:4px;font-size:13px;font-weight:600;color:var(--ux-danger)}
.u025-help>span::before{content:"!";display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:50%;background:var(--ux-danger);color:var(--ux-accent-ink);font-size:11px;font-weight:800}
.u025-f.is-bad .u025-help{grid-template-rows:1fr}
.u025-f.is-bad .u025-help>span{padding-top:8px}
.u025-btn{height:56px;border:0;border-radius:16px;background:var(--ux-ink);color:var(--ux-page);font-size:16px;font-weight:700;transition:transform .4s var(--ux-spring),opacity .3s var(--ux-ease)}
.u025-btn:active{transform:scale(.97)}
.u025-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u025-btn[aria-disabled="true"]{opacity:.35}
.u025-in:focus-visible{outline:none}

/* Lucian UX/UI Prompt #026 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#026 */
/* #026 6-digit code input */
.u026{position:relative;width:350px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.u026-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#5B8CFF,#8B6CFF);box-shadow:0 14px 26px -14px rgba(91,108,255,.8);transition:background .5s var(--ux-ease)}
.u026-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u026.is-ok .u026-ic{background:linear-gradient(140deg,#2FD8A8,#119C72)}
.u026-t{margin:16px 0 0;font-size:18px;font-weight:760;letter-spacing:-.03em}
.u026-s{margin:6px 0 20px;font-size:13.5px;color:var(--ux-ink-3)}
.u026-s b{color:var(--ux-ink-2);font-weight:650}
.u026-row{position:relative;display:flex;gap:8px}
.u026-row i.sep{width:10px;align-self:center;height:2px;border-radius:2px;background:var(--ux-line-2)}
.u026-c{position:relative;width:46px;height:58px;border-radius:14px;background:var(--ux-surface);box-shadow:inset 0 0 0 1.5px var(--ux-line-2);display:grid;place-items:center;overflow:hidden;
  font-size:26px;font-weight:760;font-variant-numeric:tabular-nums;transition:box-shadow .25s var(--ux-ease),background-color .4s var(--ux-ease),color .4s,transform .45s var(--ux-spring)}
.u026-c span{display:block;animation:u026-in .4s var(--ux-spring)}
@keyframes u026-in{from{transform:translateY(70%);opacity:0}}
.u026-c.cur{box-shadow:inset 0 0 0 2px var(--ux-accent),0 0 0 4px var(--ux-accent-soft)}
.u026-c.cur::after{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ux-accent);animation:u026-blink 1s steps(1) infinite}
.u026-c.cur.has::after{display:none}
@keyframes u026-blink{50%{opacity:0}}
.u026.is-check .u026-c{animation:u026-wave .5s var(--ux-ease);animation-delay:calc(var(--i) * 60ms)}
@keyframes u026-wave{40%{transform:translateY(-8px)}}
.u026.is-ok .u026-c{background:color-mix(in srgb,var(--ux-mint) 14%,var(--ux-surface));box-shadow:inset 0 0 0 2px var(--ux-mint);color:var(--ux-mint);transition-delay:calc(var(--i) * 50ms)}
.u026.is-bad .u026-row{animation:u026-shake .45s var(--ux-ease)}
.u026.is-bad .u026-c{box-shadow:inset 0 0 0 2px var(--ux-danger);color:var(--ux-danger)}
@keyframes u026-shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.u026-real{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;font-size:16px;cursor:text;caret-color:transparent;color:transparent;background:transparent}
.u026-msg{height:20px;margin:16px 0 0;font-size:13.5px;font-weight:650;color:var(--ux-ink-3);transition:color .3s var(--ux-ease)}
.u026.is-ok .u026-msg{color:var(--ux-mint)}
.u026.is-bad .u026-msg{color:var(--ux-danger)}
.u026-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.u026-real:focus-visible{outline:none}

/* Lucian UX/UI Prompt #027 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#027 */
/* #027 Expanding top-bar search */
.u027{position:relative;width:350px;height:360px}
.u027-bar{position:absolute;left:0;right:0;top:0;height:62px;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 18px 36px -26px var(--ux-shadow-strong)}
.u027-logo{position:absolute;left:18px;top:50%;display:flex;align-items:center;gap:8px;transform:translateY(-50%);font-size:16px;font-weight:780;letter-spacing:-.03em;transition:opacity .3s var(--ux-ease),transform .5s var(--ux-ease)}
.u027-logo i{width:22px;height:22px;border-radius:7px;background:var(--ux-grad)}
.u027-nav{position:absolute;left:112px;top:50%;display:flex;gap:4px;transform:translateY(-50%);transition:opacity .25s var(--ux-ease),transform .5s var(--ux-ease)}
.u027-nav a{padding:7px 10px;border-radius:10px;font-size:14px;font-weight:620;color:var(--ux-ink-2);text-decoration:none}
.u027-nav a:hover{background:var(--ux-surface-2);color:var(--ux-ink)}
.u027.is-open .u027-logo{opacity:0;transform:translate(-20px,-50%)}
.u027.is-open .u027-nav{opacity:0;transform:translate(-30px,-50%);pointer-events:none}
.u027-field{position:absolute;right:9px;top:9px;height:44px;width:44px;border-radius:14px;background:var(--ux-surface-2);overflow:hidden;transition:width .6s var(--ux-spring),background-color .3s,box-shadow .3s}
.u027.is-open .u027-field{width:332px;background:var(--ux-surface);box-shadow:inset 0 0 0 2px var(--ux-accent)}
.u027-go{position:absolute;left:0;top:0;width:44px;height:44px;border:0;padding:0;border-radius:14px;background:none;color:var(--ux-ink);display:grid;place-items:center;z-index:1}
.u027-go:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u027-go svg,.u027-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.u027-in{position:absolute;left:44px;right:44px;top:0;height:44px;border:0;outline:0;background:none;padding:0 4px;font-size:15.5px;color:var(--ux-ink);opacity:0;transition:opacity .3s var(--ux-ease) .15s}
.u027-in::placeholder{color:var(--ux-ink-3)}
.u027.is-open .u027-in{opacity:1}
.u027-x{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;padding:0;border-radius:10px;background:var(--ux-surface-2);color:var(--ux-ink-2);display:grid;place-items:center;opacity:0;transform:scale(.6) rotate(-90deg);transition:opacity .25s,transform .5s var(--ux-spring)}
.u027.is-open .u027-x{opacity:1;transform:none}
.u027-x:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u027-pop{position:absolute;left:0;right:0;top:72px;padding:14px 10px 10px;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -30px var(--ux-shadow-strong);
  transform-origin:90% 0;opacity:0;transform:translateY(-10px) scale(.96);pointer-events:none;visibility:hidden;transition:opacity .25s var(--ux-ease),transform .45s var(--ux-spring),visibility 0s .45s}
.u027.is-open .u027-pop{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s var(--ux-ease) .1s,transform .55s var(--ux-spring) .1s}
.u027-sec{margin:0 8px 8px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ux-ink-3)}
.u027-recent{display:flex;gap:6px;flex-wrap:wrap;margin:0 6px 12px}
.u027-recent button{height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--ux-surface-2);font-size:13px;font-weight:620;color:var(--ux-ink-2)}
.u027-recent button:hover{color:var(--ux-ink)}
.u027-list{margin:0;padding:0;list-style:none;height:150px;overflow:hidden}
.u027-opt{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;cursor:pointer;opacity:0;transform:translateY(6px);transition:background-color .2s var(--ux-ease),opacity .3s var(--ux-ease),transform .45s var(--ux-spring)}
.u027.is-open .u027-opt{opacity:1;transform:none}
.u027-opt[aria-selected="true"]{background:var(--ux-surface-2)}
.u027-opt i{width:34px;height:34px;flex:none;border-radius:10px;background:var(--c)}
.u027-opt b{display:block;font-size:14.5px;font-weight:650}
.u027-opt b mark{background:none;color:var(--ux-accent);font-weight:800}
.u027-opt small{display:block;font-size:12px;color:var(--ux-ink-3)}
.u027-empty{padding:30px 8px;text-align:center;font-size:14px;color:var(--ux-ink-3)}
.u027-in:focus-visible{outline:none}

/* Lucian UX/UI Prompt #036 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#036 */
/* #036 Password strength meter */
.u036{--lv:var(--ux-line-2);position:relative;width:340px;height:262px;display:flex;flex-direction:column;justify-content:center}
.u036-lab{display:block;margin:0 4px 8px;font-size:13px;font-weight:700;color:var(--ux-ink-3)}
.u036-box{position:relative;display:flex;align-items:center;height:60px;padding:0 8px 0 18px;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1.5px var(--ux-line-2);transition:box-shadow .25s}
.u036-box:focus-within{box-shadow:0 0 0 2px var(--lv),0 0 0 6px color-mix(in srgb,var(--lv) 18%,transparent)}
.u036-in{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:18px;font-weight:650;letter-spacing:.04em;color:var(--ux-ink)}
.u036-in:focus-visible{outline:none}
.u036-eye{width:44px;height:44px;flex:none;border:0;padding:0;border-radius:13px;background:none;color:var(--ux-ink-2);display:grid;place-items:center;transition:background-color .2s}
.u036-eye:hover{background:var(--ux-surface-2)}
.u036-eye:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u036-eye svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.u036-lid{transform-origin:12px 12px;transition:transform .4s var(--ux-spring)}
.u036-pupil{transform-origin:12px 12px;transition:transform .35s var(--ux-spring) .05s}
.u036-slash{stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ux-ease)}
.u036.is-show .u036-slash{stroke-dashoffset:24}
.u036:not(.is-show) .u036-pupil{transform:scale(0)}
.u036:not(.is-show) .u036-lid{transform:scaleY(.15)}
.u036-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 4px 0}
.u036-meter i{height:7px;border-radius:4px;background:var(--ux-surface-3);overflow:hidden;position:relative}
.u036-meter i::after{content:"";position:absolute;inset:0;background:var(--lv);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ux-ease),background-color .4s}
.u036-meter i.on::after{transform:none}
.u036-meter i:nth-child(2)::after{transition-delay:.05s}
.u036-meter i:nth-child(3)::after{transition-delay:.1s}
.u036-meter i:nth-child(4)::after{transition-delay:.15s}
.u036-lv{display:flex;justify-content:space-between;margin:9px 4px 0;font-size:13px;font-weight:650;color:var(--ux-ink-3)}
.u036-lv b{color:var(--lv);transition:color .4s}
.u036-rules{margin:18px 0 0;padding:16px;list-style:none;border-radius:18px;background:var(--ux-surface-2);display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.u036-r{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ux-ink-3);transition:color .3s}
.u036-r i{position:relative;width:20px;height:20px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.8px var(--ux-line-2);transition:box-shadow .3s,background-color .3s}
.u036-r svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--ux-accent-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.u036-r path{stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .3s var(--ux-ease) .1s}
.u036-r.ok{color:var(--ux-ink)}
.u036-r.ok i{background:var(--ux-mint);box-shadow:none;animation:u036-pop .4s var(--ux-spring)}
.u036-r.ok path{stroke-dashoffset:0}
@keyframes u036-pop{from{transform:scale(.4)}}

/* Lucian UX/UI Prompt #039 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#039 */
/* #039 Sliding pill tabs */
.u039{position:relative;width:340px;height:380px}
.u039-tabs{position:relative;display:flex;padding:5px;border-radius:999px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line)}
.u039-pill{position:absolute;left:0;top:5px;bottom:5px;width:var(--w,80px);border-radius:999px;background:var(--ux-ink);transform:translateX(var(--x,5px));box-shadow:0 8px 16px -10px var(--ux-shadow-strong);transition:transform .5s var(--ux-spring),width .5s var(--ux-spring)}
.u039-tab{position:relative;flex:1;height:42px;border:0;padding:0;border-radius:999px;background:none;font-size:14px;font-weight:680;color:var(--ux-ink-2);white-space:nowrap;transition:color .35s var(--ux-ease)}
.u039-tab[aria-selected="true"]{color:var(--ux-page)}
.u039-tab:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u039-panel{position:relative;height:312px;margin-top:14px;overflow:hidden;border-radius:22px}
.u039-list{position:absolute;inset:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.u039-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);transition:transform .55s var(--ux-spring),opacity .35s var(--ux-ease)}
.u039-art{position:relative;width:52px;height:52px;flex:none;border-radius:14px;background:var(--g);overflow:hidden}
.u039-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),transparent 55%)}
.u039-row b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.u039-row small{display:block;margin-top:3px;font-size:12.5px;color:var(--ux-ink-3)}
.u039-row em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:650;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u039-badge{margin-left:6px;padding:2px 6px;border-radius:6px;font-size:10.5px;font-weight:800;background:var(--ux-accent-soft);color:var(--ux-accent);vertical-align:2px}

/* Lucian UX/UI Prompt #042 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#042 */
/* #042 Step-by-step wizard */
.u042{position:relative;width:350px;height:400px;display:flex;flex-direction:column;padding:22px 20px 18px;border-radius:28px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong)}
.u042-steps{position:relative;display:flex;justify-content:space-between;margin:0 6px;padding:0;list-style:none}
.u042-line{position:absolute;left:17px;right:17px;top:16px;height:3px;border-radius:2px;background:var(--ux-surface-3)}
.u042-line i{position:absolute;inset:0;border-radius:inherit;background:var(--ux-grad);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .6s var(--ux-ease)}
.u042-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:34px}
.u042-dot{position:relative;width:34px;height:34px;border:0;padding:0;border-radius:50%;background:var(--ux-surface);box-shadow:inset 0 0 0 2px var(--ux-line-2);font-size:13.5px;font-weight:780;color:var(--ux-ink-3);display:grid;place-items:center;transition:box-shadow .35s,background-color .35s,color .35s,transform .45s var(--ux-spring)}
.u042-dot:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u042-dot svg{position:absolute;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.u042-dot path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ux-ease) .1s}
.u042-st.cur .u042-dot{box-shadow:inset 0 0 0 2px var(--ux-accent),0 0 0 5px var(--ux-accent-soft);color:var(--ux-accent);transform:scale(1.08)}
.u042-st.done .u042-dot{background:var(--ux-accent);box-shadow:none;color:var(--ux-accent-ink);cursor:pointer}
.u042-st.done .u042-dot span{opacity:0}
.u042-st.done .u042-dot svg{opacity:1}
.u042-st.done .u042-dot path{stroke-dashoffset:0}
.u042-st small{font-size:11.5px;font-weight:700;color:var(--ux-ink-3);white-space:nowrap;transition:color .3s}
.u042-st.cur small,.u042-st.done small{color:var(--ux-ink)}
.u042-view{position:relative;flex:1;margin-top:22px;overflow:hidden}
.u042-pane{position:absolute;inset:0;transition:transform .55s var(--ux-ease),opacity .35s var(--ux-ease)}
.u042-pane h4{margin:0;font-size:19px;font-weight:780;letter-spacing:-.03em}
.u042-pane p{margin:5px 0 16px;font-size:13.5px;color:var(--ux-ink-3)}
.u042-fld{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:14px;background:var(--ux-surface-2);font-size:15px;font-weight:620;margin-bottom:8px}
.u042-url{color:var(--ux-ink-3);font-weight:560}
.u042-url b{color:var(--ux-ink);font-weight:700}
.u042-fld small{margin-left:auto;font-size:12px;color:var(--ux-ink-3)}
.u042-chips{display:flex;gap:6px}
.u042-chips span{padding:8px 12px;border-radius:999px;font-size:13px;font-weight:650;box-shadow:inset 0 0 0 1px var(--ux-line-2);color:var(--ux-ink-2)}
.u042-chips span.on{background:var(--ux-ink);color:var(--ux-page);box-shadow:none}
.u042-av{width:30px;height:30px;flex:none;border-radius:50%;background:var(--c)}
.u042-done{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center}
.u042-big{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:var(--ux-accent-ink);box-shadow:0 0 0 10px color-mix(in srgb,var(--ux-mint) 18%,transparent);transform:scale(.5);transition:transform .6s var(--ux-spring) .2s}
.u042-big svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u042-pane.on .u042-big{transform:none}
.u042-done h4{margin-top:18px}
.u042-foot{display:flex;gap:8px;margin-top:12px}
.u042-b{height:50px;border:0;border-radius:15px;font-size:15px;font-weight:700;transition:transform .35s var(--ux-spring),opacity .3s,background-color .3s}
.u042-b:active{transform:scale(.96)}
.u042-b:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u042-prev{width:96px;background:var(--ux-surface-2);color:var(--ux-ink)}
.u042-prev[aria-disabled="true"]{opacity:.35}
.u042-next{flex:1;background:var(--ux-ink);color:var(--ux-page)}
.u042.is-last .u042-next{background:var(--ux-mint);color:var(--ux-accent-ink)}

/* Lucian UX/UI Prompt #044 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#044 */
/* #044 FAQ accordion */
.u044{position:relative;width:350px;height:400px;display:flex;flex-direction:column;gap:8px}
.u044-it{position:relative;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);transition:background-color .4s var(--ux-ease),box-shadow .5s var(--ux-ease),transform .5s var(--ux-spring)}
.u044-it.open{box-shadow:0 0 0 1px var(--ux-line-2),0 22px 40px -22px var(--ux-shadow-strong);transform:translateY(-2px)}
.u044-q{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:0 14px 0 16px;border:0;border-radius:20px;background:none;font-size:14.5px;font-weight:680;letter-spacing:-.02em;color:var(--ux-ink);text-align:left}
.u044-q:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u044-n{font-size:12px;font-weight:800;color:var(--ux-ink-3);font-variant-numeric:tabular-nums;transition:color .3s}
.u044-it.open .u044-n{color:var(--ux-accent)}
.u044-t{flex:1}
.u044-pm{position:relative;width:30px;height:30px;flex:none;border-radius:50%;background:var(--ux-surface-2);box-shadow:none;transition:background-color .35s var(--ux-ease),box-shadow .35s,transform .45s var(--ux-spring)}
.u044-q:hover .u044-pm{transform:scale(1.1)}
.u044-q:active .u044-pm{transform:scale(.9)}
.u044-pm::before,.u044-pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--ux-ink);transition:transform .5s var(--ux-spring),background-color .3s}
.u044-pm::after{transform:rotate(90deg)}
.u044-it.open .u044-pm{background:var(--ux-ink);box-shadow:none}
.u044-it.open .u044-pm::before,.u044-it.open .u044-pm::after{background:var(--ux-page)}
.u044-it.open .u044-pm::after{transform:rotate(180deg)}
.u044-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ux-ease)}
.u044-it.open .u044-body{grid-template-rows:1fr}
.u044-body>div{overflow:hidden;min-height:0}
.u044-a{padding:0 18px 16px 42px;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ux-ease),transform .45s var(--ux-spring)}
.u044-it.open .u044-a{opacity:1;transform:none;transition-delay:.12s}
.u044-a p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ux-ink-2)}
.u044-a a{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:13px;font-weight:700;color:var(--ux-accent);text-decoration:none}
.u044-a a:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px;border-radius:4px}
.u044-a a i{font-style:normal;transition:transform .3s var(--ux-spring)}
.u044-a a:hover i{transform:translateX(3px)}

/* Lucian UX/UI Prompt #047 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#047 */
/* #047 Period segmented control */
.u047{position:relative;width:350px;height:330px;display:flex;flex-direction:column;padding:16px 16px 0;border-radius:28px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -38px var(--ux-shadow-strong);overflow:hidden}
.u047-seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:4px;border-radius:16px;background:var(--ux-surface-2)}
.u047-knob{position:absolute;top:4px;bottom:4px;left:var(--l,4px);right:var(--r,4px);border-radius:12px;background:var(--ux-surface);box-shadow:0 4px 12px -6px var(--ux-shadow-strong),0 0 0 1px var(--ux-line)}
.u047-seg.go-r .u047-knob{transition:right .3s var(--ux-ease),left .5s var(--ux-spring) .07s}
.u047-seg.go-l .u047-knob{transition:left .3s var(--ux-ease),right .5s var(--ux-spring) .07s}
.u047-opt{position:relative;height:38px;border:0;padding:0;border-radius:12px;background:none;font-size:14px;font-weight:680;color:var(--ux-ink-3);transition:color .3s,transform .3s var(--ux-spring)}
.u047-opt:hover{color:var(--ux-ink-2)}
.u047-opt:active{transform:scale(.94)}
.u047-opt[aria-checked="true"]{color:var(--ux-ink)}
.u047-opt:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u047-lab{margin:18px 4px 0;font-size:13px;font-weight:650;color:var(--ux-ink-3)}
.u047-row{display:flex;align-items:center;gap:10px;margin:2px 4px 0}
.u047-num{font-size:40px;font-weight:800;letter-spacing:-.055em;line-height:1.1;font-variant-numeric:tabular-nums}
.u047-chg{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:750;background:color-mix(in srgb,var(--ux-mint) 15%,transparent);color:var(--ux-mint);font-variant-numeric:tabular-nums;transition:background-color .4s,color .4s}
.u047-chg.down{background:color-mix(in srgb,var(--ux-danger) 13%,transparent);color:var(--ux-danger)}
.u047-chg svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ux-spring)}
.u047-chg.down svg{transform:rotate(180deg)}
.u047-chart{position:relative;flex:1;margin:8px -16px 0}
.u047-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.u047-line{fill:none;stroke:var(--ux-accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.u047-grid line{stroke:var(--ux-line);stroke-dasharray:3 5}
.u047-dot{fill:var(--ux-surface);stroke:var(--ux-accent);stroke-width:3}
.u047-halo{fill:var(--ux-accent);opacity:.18;transform-box:fill-box;transform-origin:center;animation:u047-p 2s ease-out infinite}
@keyframes u047-p{0%{transform:scale(.6);opacity:.35}100%{transform:scale(2.2);opacity:0}}

/* Lucian UX/UI Prompt #050 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#050 */
/* #050 Spotlight-tilt news card */
.u050{--mx:50%;--my:30%;--rx:0deg;--ry:0deg;position:relative;width:340px;height:400px;perspective:1000px}
.u050-card{position:relative;width:100%;height:100%;border-radius:28px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 50px -30px var(--ux-shadow-strong);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ux-ease),box-shadow .5s;overflow:hidden;isolation:isolate}
.u050.is-live .u050-card{transition:transform .12s linear,box-shadow .5s}
.u050-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(200px circle at var(--mx) var(--my),var(--ux-accent),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s;pointer-events:none;z-index:3}
.u050-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.28),transparent 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}
.u050.is-live .u050-card::after,.u050.is-live .u050-glare{opacity:1}
.u050-img{position:relative;height:178px;overflow:hidden;background:linear-gradient(160deg,#5B8CFF,#7B61FF 45%,#FF6B8B)}
.u050-img i{position:absolute;border-radius:50%;transition:transform .6s var(--ux-ease)}
.u050-img i:nth-child(1){width:150px;height:150px;left:-30px;top:40px;background:radial-gradient(circle at 40% 35%,#A5F2D3,#22C3A6 70%);transform:translate(calc(var(--tx,0) * -16px),calc(var(--ty,0) * -12px))}
.u050-img i:nth-child(2){width:90px;height:90px;right:40px;top:24px;background:radial-gradient(circle at 40% 35%,#FFE2B8,#FFB547 70%);transform:translate(calc(var(--tx,0) * -30px),calc(var(--ty,0) * -20px))}
.u050-img i:nth-child(3){width:220px;height:220px;right:-80px;bottom:-130px;background:radial-gradient(circle at 40% 30%,#B7A4FF,#5B3FD9 70%)}
.u050-img b{position:absolute;left:16px;top:16px;height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.06em}
.u050-body{padding:16px 20px 0}
.u050-src{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ux-ink-2)}
.u050-src i{width:20px;height:20px;border-radius:6px;background:var(--ux-ink);position:relative}
.u050-src i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--ux-page)}
.u050-dot{width:8px;height:8px;margin-left:auto;border-radius:50%;background:var(--ux-accent);box-shadow:0 0 0 4px var(--ux-accent-soft);transition:transform .45s var(--ux-spring),opacity .3s}
.u050-h{margin:10px 0 0;font-size:19px;line-height:1.32;font-weight:780;letter-spacing:-.035em;transition:color .5s}
.u050-p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ux-ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.u050-foot{position:absolute;left:20px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ux-ink-3)}
.u050-btn{position:relative;height:38px;padding:0 14px 0 12px;border:0;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:var(--ux-ink);color:var(--ux-page);font-size:13px;font-weight:720;transition:background-color .4s,color .4s,transform .35s var(--ux-spring)}
.u050-btn:active{transform:scale(.94)}
.u050-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u050-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u050-btn path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .4s var(--ux-ease) .1s}
.u050-btn circle{transition:opacity .2s}
.u050-card.is-read .u050-btn{background:color-mix(in srgb,var(--ux-mint) 16%,transparent);color:var(--ux-mint)}
.u050-card.is-read .u050-btn path{stroke-dashoffset:0}
.u050-card.is-read .u050-btn circle{opacity:0}
.u050-card.is-read .u050-dot{transform:scale(0);opacity:0}
.u050-card.is-read .u050-h{color:var(--ux-ink-3)}

/* Lucian UX/UI Prompt #056 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#056 */
/* #056 Monthly–yearly pricing toggle */
.u056{position:relative;width:340px;height:490px;display:flex;flex-direction:column;gap:14px}
.u056-sw{position:relative;display:flex;align-self:center;padding:4px;border-radius:999px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line)}
.u056-knob{position:absolute;top:4px;bottom:4px;left:4px;width:var(--w,90px);border-radius:999px;background:var(--ux-ink);transform:translateX(var(--x,0));transition:transform .5s var(--ux-spring),width .5s var(--ux-spring)}
.u056-sw button{position:relative;height:40px;padding:0 18px;border:0;border-radius:999px;background:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:720;color:var(--ux-ink-2);transition:color .3s}
.u056-sw button[aria-checked="true"]{color:var(--ux-page)}
.u056-sw button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u056-badge{height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;background:linear-gradient(120deg,#FFB547,#FF6B8B);color:#fff;font-size:11px;font-weight:800;transform-origin:20% 50%}
.u056-badge.wig{animation:u056-wig .7s var(--ux-ease)}
@keyframes u056-wig{20%{transform:rotate(-10deg) scale(1.12)}45%{transform:rotate(8deg) scale(1.12)}70%{transform:rotate(-4deg)}}
.u056-plans{position:relative;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;min-width:0}
.u056-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
.u056-ring{position:absolute;left:0;right:0;top:0;height:var(--h,108px);border-radius:22px;box-shadow:0 0 0 2px var(--ux-accent),0 18px 34px -22px var(--ux-accent);transform:translateY(var(--y,0));transition:transform .55s var(--ux-spring),height .4s;pointer-events:none;z-index:1}
.u056-p{position:relative;display:flex;align-items:center;gap:12px;min-height:108px;padding:16px 18px;border-radius:22px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);cursor:pointer;text-align:left;transition:transform .35s var(--ux-spring)}
.u056-p:active{transform:scale(.985)}
.u056-p input{position:absolute;opacity:0;pointer-events:none}
.u056-p:has(input:focus-visible){outline:2px solid var(--ux-accent);outline-offset:4px}
.u056-dot{width:22px;height:22px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ux-line-2);display:grid;place-items:center;transition:box-shadow .3s}
.u056-dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ux-accent);transform:scale(0);transition:transform .4s var(--ux-spring)}
.u056-p:has(input:checked) .u056-dot{box-shadow:inset 0 0 0 2px var(--ux-accent)}
.u056-p:has(input:checked) .u056-dot::after{transform:none}
.u056-nm{flex:1;min-width:0}
.u056-nm b{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:800;letter-spacing:-.03em}
.u056-nm b em{height:20px;padding:0 7px;border-radius:6px;display:inline-flex;align-items:center;background:var(--ux-accent-soft);color:var(--ux-accent);font-style:normal;font-size:10.5px;font-weight:800}
.u056-nm small{display:block;margin-top:3px;font-size:12.5px;font-weight:600;color:var(--ux-ink-3)}
.u056-pr{text-align:right}
.u056-od{display:flex;justify-content:flex-end;height:30px;overflow:hidden;font-size:24px;font-weight:850;line-height:30px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.u056-col{display:flex;flex-direction:column;transform:translateY(calc(var(--d) * -30px));transition:transform .7s var(--ux-spring);transition-delay:calc(var(--k) * 40ms)}
.u056-pr small{display:block;font-size:11.5px;font-weight:650;color:var(--ux-ink-3);transition:opacity .3s}
.u056-feat{position:relative;flex:1;margin:0;padding:4px 4px 0;list-style:none}
.u056-feat li{display:flex;align-items:center;gap:10px;height:30px;font-size:13.5px;font-weight:620;color:var(--ux-ink-2);animation:u056-in .45s var(--ux-spring) backwards;animation-delay:calc(var(--i) * 50ms)}
.u056-feat svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ux-mint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes u056-in{from{opacity:0;transform:translateX(-10px)}}
.u056-cta{height:54px;border:0;border-radius:17px;background:var(--ux-ink);color:var(--ux-page);font-size:15px;font-weight:760;transition:transform .35s var(--ux-spring)}
.u056-cta:active{transform:scale(.97)}
.u056-cta:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}

/* Lucian UX/UI Prompt #057 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#057 */
/* #057 Face-picker testimonial carousel */
.u057{position:relative;width:350px;height:370px;display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden;outline:none}
.u057:focus-visible{box-shadow:0 0 0 2px var(--ux-accent),0 30px 60px -36px var(--ux-shadow-strong)}
.u057-mark{position:absolute;right:20px;top:-6px;font-size:150px;line-height:1;font-weight:900;font-family:Georgia,serif;background:linear-gradient(160deg,var(--c1,#FFB547),var(--c2,#FF6B8B));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.22;transition:opacity .4s;pointer-events:none}
.u057-stars{display:flex;gap:3px;color:#FFB547}
.u057-stars svg{width:16px;height:16px;fill:currentColor}
.u057-view{position:relative;flex:1;margin-top:14px;touch-action:pan-y;cursor:grab}
.u057-view.drag{cursor:grabbing}
.u057-q{position:absolute;inset:0;margin:0;font-size:24px;line-height:1.42;font-weight:760;letter-spacing:-.045em;transition:transform .5s var(--ux-ease),opacity .3s}
.u057-q span{display:inline-block;opacity:0;transform:translateY(10px);filter:blur(4px);transition:opacity .45s var(--ux-ease),transform .6s var(--ux-spring),filter .45s;transition-delay:calc(var(--i) * 32ms)}
.u057-q.on span{opacity:1;transform:none;filter:none}
.u057-q.on mark{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c1,#FFB547) 40%,transparent) 62%);color:inherit}
.u057-q mark{background:none;color:inherit;transition:background .4s .5s}
.u057-who{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;height:22px}
.u057-who b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.u057-who small{font-size:12.5px;font-weight:600;color:var(--ux-ink-3)}
.u057-faces{display:flex;align-items:center;gap:10px}
.u057-f{position:relative;width:40px;height:40px;flex:none;border:0;padding:0;border-radius:50%;background:none;transition:width .5s var(--ux-spring),height .5s var(--ux-spring)}
.u057-f i{position:absolute;inset:4px;border-radius:50%;background:var(--g);filter:grayscale(.7);opacity:.6;transition:filter .4s,opacity .4s,inset .4s}
.u057-f:hover i{opacity:.9}
.u057-f[aria-current="true"]{width:54px;height:54px}
.u057-f[aria-current="true"] i{filter:none;opacity:1;inset:5px}
.u057-f svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);opacity:0;transition:opacity .3s}
.u057-f[aria-current="true"] svg{opacity:1}
.u057-f circle{fill:none;stroke-width:2.5}
.u057-f .tr{stroke:var(--ux-line)}
.u057-f .pr{stroke:var(--ux-accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0) * 100)}
.u057-f:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u057-n{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}

/* Lucian UX/UI Prompt #062 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#062 */
/* #062 Sign-in card feedback */
.u062{position:relative;width:340px;height:480px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u062.shake{animation:u062-no .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes u062-no{15%{transform:translateX(-9px) rotate(-.6deg)}30%{transform:translateX(8px) rotate(.5deg)}45%{transform:translateX(-6px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.u062-pane{position:absolute;inset:0;padding:30px 26px 26px;display:flex;flex-direction:column;transition:transform .6s var(--ux-ease),opacity .4s}
.u062-logo{width:44px;height:44px;border-radius:14px;background:var(--ux-grad);box-shadow:0 10px 20px -10px rgba(91,72,255,.6)}
.u062-pane h3{margin:18px 0 4px;font-size:24px;font-weight:850;letter-spacing:-.045em}
.u062-pane>p{margin:0 0 22px;font-size:13.5px;color:var(--ux-ink-3)}
.u062-f{position:relative;margin-bottom:12px}
.u062-f label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--ux-ink-2)}
.u062-box{position:relative;display:flex;align-items:center;height:52px;border-radius:15px;background:var(--ux-surface-2);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .25s,background-color .25s}
.u062-box:focus-within{background:var(--ux-surface);box-shadow:inset 0 0 0 1.5px var(--ux-accent),0 0 0 4px var(--ux-accent-soft)}
.u062-f.bad .u062-box{box-shadow:inset 0 0 0 1.5px var(--ux-danger);background:color-mix(in srgb,var(--ux-danger) 6%,var(--ux-surface))}
.u062-box input{flex:1;min-width:0;height:100%;border:0;padding:0 16px;background:none;font-size:15px;font-weight:600;color:var(--ux-ink);outline:none}
.u062-box input:focus-visible{outline:none}
.u062-box input::placeholder{color:var(--ux-ink-3);font-weight:500}
.u062-eye{width:44px;height:44px;margin-right:4px;border:0;padding:0;border-radius:12px;display:grid;place-items:center;background:none;color:var(--ux-ink-3);transition:color .2s}
.u062-eye:hover{color:var(--ux-ink)}
.u062-eye:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-4px}
.u062-eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.u062-lid{transform-origin:12px 12px;transition:transform .35s var(--ux-spring)}
.u062-eye[aria-pressed="false"] .u062-lid{transform:scaleY(.5)}
.u062-slash{stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ux-ease)}
.u062-eye[aria-pressed="true"] .u062-slash{stroke-dashoffset:24}
.u062-caps{position:absolute;right:0;top:0;font-size:11.5px;font-weight:800;color:var(--ux-warn);opacity:0;transition:opacity .2s}
.u062-caps.on{opacity:1}
.u062-err{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ux-ease)}
.u062-err>span{overflow:hidden;min-height:0;font-size:12.5px;font-weight:650;color:var(--ux-danger)}
.u062-err>span::before{content:"";display:block;height:7px}
.u062-f.bad .u062-err{grid-template-rows:1fr}
.u062-row{display:flex;justify-content:flex-end;margin:-2px 0 0}
.u062-row a{font-size:12.5px;font-weight:700;color:var(--ux-accent);text-decoration:none}
.u062-row a:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px;border-radius:4px}
.u062-go{position:relative;align-self:center;width:100%;height:54px;margin-top:auto;border:0;border-radius:17px;background:var(--ux-ink);color:var(--ux-page);font-size:15.5px;font-weight:760;overflow:hidden;transition:width .45s var(--ux-spring),border-radius .45s var(--ux-spring),background-color .4s,transform .3s var(--ux-spring)}
.u062-go:active{transform:scale(.97)}
.u062-go:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u062-go span{transition:opacity .2s}
.u062-go i{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;opacity:0;animation:u062-spin .7s linear infinite}
.u062-go svg{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u062-go svg path{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .4s var(--ux-ease) .1s}
.u062-go.busy,.u062-go.ok{width:54px;border-radius:27px}
.u062-go.busy span,.u062-go.ok span{opacity:0}
.u062-go.busy i{opacity:1}
.u062-go.ok{background:var(--ux-mint);color:var(--ux-accent-ink)}
.u062-go.ok svg path{stroke-dashoffset:0}
@keyframes u062-spin{to{transform:rotate(360deg)}}
.u062-hi{transform:translateX(100%);opacity:0;align-items:center;justify-content:center;text-align:center}
.u062.is-in .u062-login{transform:translateX(-30%);opacity:0;pointer-events:none}
.u062.is-in .u062-hi{transform:none;opacity:1}
.u062-av{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#FFE2C2,#F2A27A 45%,#B5577A);box-shadow:0 0 0 6px var(--ux-surface),0 0 0 8px var(--ux-mint)}
.u062-hi h3{margin-top:22px}
.u062-hi button{margin-top:22px;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--ux-surface-2);color:var(--ux-ink);font-size:13.5px;font-weight:700}
.u062-hi button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}

/* Lucian UX/UI Prompt #066 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#066 */
/* #066 Social sign-in buttons */
.u066{position:relative;width:340px;height:420px;display:flex;flex-direction:column;padding:28px 24px 24px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u066 h3{margin:0;font-size:23px;font-weight:850;letter-spacing:-.045em}
.u066>p{margin:6px 0 20px;font-size:13.5px;color:var(--ux-ink-3)}
.u066-list{display:flex;flex-direction:column}
.u066-it{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .45s var(--ux-ease),opacity .3s,margin .45s var(--ux-ease);margin-bottom:10px}
.u066-it>div{min-height:0;overflow:hidden;padding:2px}
.u066-it.gone{grid-template-rows:0fr;opacity:0;margin-bottom:0;transition-delay:calc(var(--i) * 40ms)}
.u066-b{position:relative;width:100%;height:54px;border:0;border-radius:16px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg);color:var(--fg);font-size:15px;font-weight:720;text-align:left;box-shadow:var(--bd,none);transition:transform .3s var(--ux-spring),height .45s var(--ux-ease),border-radius .45s}
.u066-b:hover{transform:translateY(-1px)}
.u066-b:active{transform:scale(.98)}
.u066-b:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u066-ic{width:24px;height:24px;flex:none;display:grid;place-items:center}
.u066-ic svg{width:22px;height:22px}
.u066-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u066-tx small{display:block;font-size:12px;font-weight:600;opacity:.7}
.u066-recent{height:22px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;background:var(--ux-accent-soft);color:var(--ux-accent);font-size:11px;font-weight:800}
.u066-st{width:0;height:22px;flex:none;position:relative;margin-left:-12px;transition:width .3s,margin .3s}
.u066-b.busy .u066-st,.u066-b.ok .u066-st{width:22px;margin-left:0}
.u066-b.busy .u066-recent,.u066-b.ok .u066-recent{display:none}
.u066-st i{position:absolute;inset:0;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;opacity:0;animation:u066-spin .7s linear infinite}
.u066-st svg{position:absolute;inset:0;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.u066-st path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--ux-ease)}
.u066-b.busy .u066-st i{opacity:1}
.u066-b.ok .u066-st path{stroke-dashoffset:0}
.u066-b.ok{height:72px;border-radius:20px}
@keyframes u066-spin{to{transform:rotate(360deg)}}
.u066-or{display:flex;align-items:center;gap:10px;margin:8px 0 14px;font-size:12px;font-weight:700;color:var(--ux-ink-3);transition:opacity .3s}
.u066-or::before,.u066-or::after{content:"";flex:1;height:1px;background:var(--ux-line-2)}
.u066-mail{height:50px;border:0;border-radius:15px;background:var(--ux-surface-2);color:var(--ux-ink);font-size:14.5px;font-weight:700;transition:opacity .3s,transform .3s var(--ux-spring)}
.u066-mail:focus-visible,.u066-back:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u066.is-pick .u066-or,.u066.is-pick .u066-mail{opacity:0;pointer-events:none}
.u066-back{position:absolute;left:24px;right:24px;bottom:24px;height:46px;border:0;border-radius:15px;background:none;box-shadow:inset 0 0 0 1.5px var(--ux-line-2);color:var(--ux-ink-2);font-size:14px;font-weight:700;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .4s var(--ux-spring)}
.u066.is-done .u066-back{opacity:1;transform:none;pointer-events:auto}
.u066-msg:empty{min-height:0;margin:0}
.u066-msg{margin:0 0 4px;font-size:13px;font-weight:650;color:var(--ux-ink-3);text-align:center;min-height:20px;transition:transform .45s var(--ux-ease)}

/* Lucian UX/UI Prompt #068 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#068 */
/* #068 Read-to-agree terms */
.u068{position:relative;width:340px;height:500px;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u068 h3{margin:0;font-size:21px;font-weight:850;letter-spacing:-.045em}
.u068-doc{position:relative;height:150px;margin-top:14px;border-radius:18px;background:var(--ux-surface-2);overflow:hidden}
.u068-doc::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--ux-grad);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.u068-txt{height:100%;overflow-y:auto;padding:14px 16px;font-size:12.5px;line-height:1.65;color:var(--ux-ink-2);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ux-line-2) transparent}
.u068-txt:focus-visible{outline:2px solid var(--ux-accent);outline-offset:-3px;border-radius:18px}
.u068-txt b{display:block;margin:10px 0 2px;font-size:13px;color:var(--ux-ink)}
.u068-txt b:first-child{margin-top:0}
.u068-txt p{margin:0}
.u068-read{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:700;color:var(--ux-ink-3);transition:color .3s}
.u068-read i{width:8px;height:8px;border-radius:50%;background:var(--ux-line-2);transition:background-color .3s,transform .4s var(--ux-spring)}
.u068.is-read .u068-read{color:var(--ux-mint)}
.u068.is-read .u068-read i{background:var(--ux-mint);transform:scale(1.3)}
.u068-list{margin:12px 0 0;padding:0;list-style:none}
.u068-c{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;border-radius:12px;cursor:pointer;font-size:14px;font-weight:650;color:var(--ux-ink-2);transition:opacity .3s}
.u068-c.all{min-height:54px;padding:0 14px;margin-bottom:6px;border-radius:16px;background:var(--ux-surface-2);font-size:15px;font-weight:780;color:var(--ux-ink)}
.u068-c input{position:absolute;opacity:0;pointer-events:none}
.u068-c:has(input:disabled){opacity:.45;cursor:not-allowed}
.u068-c:has(input:focus-visible) .u068-box{outline:2px solid var(--ux-accent);outline-offset:2px}
.u068-box{position:relative;width:24px;height:24px;flex:none;border-radius:8px;box-shadow:inset 0 0 0 2px var(--ux-line-2);transition:background-color .25s,box-shadow .25s,transform .35s var(--ux-spring)}
.u068-box svg{position:absolute;inset:3px;width:18px;height:18px;fill:none;stroke:var(--ux-accent-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u068-box path{stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .3s var(--ux-ease) .05s}
.u068-c:has(input:checked) .u068-box{background:var(--ux-accent);box-shadow:none;animation:u068-pop .4s var(--ux-spring)}
.u068-c:has(input:checked) .u068-box path{stroke-dashoffset:0}
@keyframes u068-pop{40%{transform:scale(1.18)}}
.u068-c em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:800;color:var(--ux-ink-3)}
.u068-c em.req{color:var(--ux-accent)}
.u068-lock{width:14px;height:14px;margin-left:-6px;fill:none;stroke:currentColor;stroke-width:2;transition:opacity .3s,transform .4s var(--ux-spring)}
.u068.is-read .u068-lock{opacity:0;transform:scale(0)}
.u068-go{height:54px;margin-top:auto;border:0;border-radius:17px;font-size:15.5px;font-weight:760;background:var(--ux-surface-2);color:var(--ux-ink-3);transition:background-color .35s,color .35s,transform .3s var(--ux-spring)}
.u068-go[aria-disabled="false"]{background:var(--ux-ink);color:var(--ux-page)}
.u068-go[aria-disabled="false"]:active{transform:scale(.97)}
.u068-go:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}

/* Lucian UX/UI Prompt #070 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#070 */
/* #070 Stacking toasts */
.u070{position:relative;width:350px;height:370px}
.u070-btns{display:flex;flex-wrap:wrap;gap:6px}
.u070-btns button{height:38px;padding:0 14px;border:0;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);font-size:13px;font-weight:720;color:var(--ux-ink);transition:transform .3s var(--ux-spring),box-shadow .3s}
.u070-btns button:hover{box-shadow:0 0 0 1px var(--ux-line-2),0 8px 16px -10px var(--ux-shadow-strong)}
.u070-btns button:active{transform:scale(.94)}
.u070-btns button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u070-btns i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.u070-zone{position:absolute;left:0;right:0;bottom:0;height:300px;outline:none}
.u070-t{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 12px 12px 14px;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 16px 30px -18px var(--ux-shadow-strong);transform-origin:50% 100%;transform:translate(var(--dx,0px),var(--y,0px)) scale(var(--s,1));opacity:var(--o,1);transition:transform .5s var(--ux-spring),opacity .35s;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.u070-t.drag{transition:none}
.u070-t.enter{transform:translateY(90px) scale(.9);opacity:0}
.u070-t.leave{transform:translate(var(--dx,0px),var(--y,0px)) scale(var(--s,1));opacity:0;pointer-events:none}
.u070-t.leave.side{transform:translate(calc(var(--dir,1) * 420px),var(--y,0px)) rotate(calc(var(--dir,1) * 8deg))}
.u070-t>*{transition:opacity .25s}
.u070-t.back>*{opacity:0}
.u070-ic{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.u070-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u070-ic i{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:u070-spin .7s linear infinite}
@keyframes u070-spin{to{transform:rotate(360deg)}}
.u070-tx{flex:1;min-width:0}
.u070-tx b{display:block;font-size:14px;font-weight:780;letter-spacing:-.02em}
.u070-tx small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--ux-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u070-act{height:32px;padding:0 11px;border:0;border-radius:10px;background:var(--ux-surface-2);font-size:12.5px;font-weight:750;color:var(--ux-ink)}
.u070-x{width:30px;height:30px;flex:none;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--ux-ink-3)}
.u070-x:hover{background:var(--ux-surface-2);color:var(--ux-ink)}
.u070-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.u070-act:focus-visible,.u070-x:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u070-bar{position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:var(--c);opacity:.5;transform-origin:0 50%;transform:scaleX(var(--left,1))}
.u070-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.u070-empty{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:13px;font-weight:650;color:var(--ux-ink-3);transition:opacity .3s}

/* Lucian UX/UI Prompt #072 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#072 */
/* #072 Collapsing inline alerts */
.u072{position:relative;width:340px;height:470px;display:flex;flex-direction:column;padding:20px 16px 16px;border-radius:30px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u072-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 12px}
.u072-head b{font-size:20px;font-weight:850;letter-spacing:-.045em}
.u072-head small{font-size:12.5px;font-weight:700;color:var(--ux-ink-3)}
.u072-list{margin:0;padding:0;list-style:none}
.u072-it{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ux-ease) .12s,margin .45s var(--ux-ease) .12s;margin-bottom:8px}
.u072-it>div{min-height:0;overflow:hidden}
.u072-it.gone{grid-template-rows:0fr;margin-bottom:0}
.u072-a{position:relative;display:flex;gap:12px;padding:14px 12px 14px 14px;border-radius:18px;background:color-mix(in srgb,var(--c) 10%,var(--ux-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);transition:transform .4s var(--ux-ease),opacity .3s}
.u072-a::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--c)}
.u072-it.gone .u072-a{transform:translateX(40px);opacity:0}
.u072-ic{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--c);color:var(--ux-accent-ink)}
.u072-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u072-tx{flex:1;min-width:0}
.u072-tx b{display:block;font-size:14px;font-weight:780;letter-spacing:-.02em}
.u072-tx p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--ux-ink-2)}
.u072-more{margin-top:8px;border:0;padding:0;background:none;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:750;color:var(--c)}
.u072-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .35s var(--ux-spring)}
.u072-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.u072-log{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ux-ease)}
.u072-log.on{grid-template-rows:1fr}
.u072-log>div{min-height:0;overflow:hidden}
.u072-log code{display:block;margin-top:8px;padding:10px;border-radius:10px;background:var(--ux-surface);font:600 11.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ux-ink-2);white-space:pre;overflow-x:auto}
.u072-prog{height:5px;margin-top:8px;border-radius:3px;background:color-mix(in srgb,var(--c) 18%,transparent);overflow:hidden}
.u072-prog i{display:block;height:100%;width:72%;border-radius:inherit;background:var(--c)}
.u072-x{width:28px;height:28px;flex:none;margin:-2px -2px 0 0;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:none;color:var(--ux-ink-3);transition:background-color .2s,color .2s,transform .3s var(--ux-spring)}
.u072-x:hover{background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--ux-ink)}
.u072-x:active{transform:scale(.85)}
.u072-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.u072-x:focus-visible,.u072-more:focus-visible,.u072-again:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u072-calm{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:10px;text-align:center;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s .3s,transform .5s var(--ux-spring) .3s}
.u072.is-clear .u072-calm{opacity:1;transform:none;pointer-events:auto}
.u072-calm i{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ux-mint) 15%,transparent);color:var(--ux-mint)}
.u072-calm i svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.u072-calm b{font-size:15px;font-weight:800}
.u072-again{height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--ux-surface-2);font-size:13px;font-weight:720;color:var(--ux-ink)}

/* Lucian UX/UI Prompt #073 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#073 */
/* #073 Rolling announcement banner */
.u073{position:relative;width:350px;height:340px;border-radius:26px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u073-ban{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ux-ease)}
.u073.is-closed .u073-ban{grid-template-rows:0fr}
.u073-ban>div{min-height:0;overflow:hidden}
.u073-bar{position:relative;display:flex;align-items:center;gap:6px;height:56px;padding:0 6px 0 12px;background:linear-gradient(100deg,#5B3FD9,#7B61FF 40%,#FF6B8B);color:#fff;overflow:hidden}
.u073-bar::after{content:"";position:absolute;top:0;bottom:0;width:80px;left:-100px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:u073-shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes u073-shine{0%,60%{transform:translateX(0)}100%{transform:translateX(560px)}}
.u073-tag{height:22px;padding:0 7px;border-radius:7px;flex:none;display:inline-flex;align-items:center;background:rgba(255,255,255,.22);font-size:10.5px;font-weight:850;letter-spacing:.06em}
.u073-msgs{position:relative;flex:1;height:100%;overflow:hidden}
.u073-m{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;transform:translateY(100%);opacity:0;transition:transform .55s var(--ux-ease),opacity .4s}
.u073-m.on{transform:none;opacity:1}
.u073-m.up{transform:translateY(-100%);opacity:0}
.u073-m b{font-size:13.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u073-m span{font-size:11.5px;font-weight:600;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u073-segs{display:flex;gap:3px;flex:none}
.u073-segs i{width:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.u073-segs i::after{content:"";display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(var(--f,0))}
.u073-b{width:30px;height:30px;flex:none;border:0;padding:0;border-radius:9px;display:grid;place-items:center;background:none;color:#fff;transition:background-color .2s,transform .3s var(--ux-spring)}
.u073-b:hover{background:rgba(255,255,255,.18)}
.u073-b:active{transform:scale(.88)}
.u073-b:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.u073-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u073-nav{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;border-bottom:1px solid var(--ux-line)}
.u073-logo{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:850;letter-spacing:-.03em}
.u073-logo i{width:20px;height:20px;border-radius:7px;background:var(--ux-grad)}
.u073-nav span{font-size:12.5px;font-weight:650;color:var(--ux-ink-3)}
.u073-bell{margin-left:auto;width:34px;height:34px;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--ux-surface-2);color:var(--ux-ink);opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .3s,transform .45s var(--ux-spring)}
.u073.is-closed .u073-bell{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.u073-bell svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u073-bell:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u073-page{padding:18px}
.u073-page h4{margin:0;font-size:22px;line-height:1.2;font-weight:850;letter-spacing:-.045em}
.u073-page p{margin:6px 0 14px;font-size:13px;color:var(--ux-ink-3)}
.u073-cards{display:flex;gap:8px}
.u073-cards i{flex:1;height:96px;border-radius:16px;background:var(--g)}

/* Lucian UX/UI Prompt #076 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#076 */
/* #076 Gliding tooltip */
.u076{position:relative;width:350px;height:340px;display:flex;flex-direction:column;border-radius:26px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong)}
.u076-bar{display:flex;align-items:center;gap:2px;padding:8px}
.u076-bar.top{border-bottom:1px solid var(--ux-line)}
.u076-bar.bot{margin-top:auto;border-top:1px solid var(--ux-line)}
.u076-sep{width:1px;height:20px;margin:0 4px;background:var(--ux-line-2)}
.u076-b{width:38px;height:38px;flex:none;border:0;padding:0;border-radius:11px;display:grid;place-items:center;background:none;color:var(--ux-ink-2);transition:background-color .2s,color .2s,transform .25s var(--ux-spring)}
.u076-b:hover,.u076-b:focus-visible{background:var(--ux-surface-2);color:var(--ux-ink)}
.u076-b:active{transform:scale(.9)}
.u076-b[aria-pressed="true"]{background:var(--ux-accent-soft);color:var(--ux-accent)}
.u076-b:focus-visible{outline:2px solid var(--ux-accent);outline-offset:1px}
.u076-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u076-send{margin-left:auto;height:38px;padding:0 14px;border:0;border-radius:11px;background:var(--ux-ink);color:var(--ux-page);font-size:13px;font-weight:750}
.u076-send:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u076-doc{flex:1;padding:16px 18px;font-size:14px;line-height:1.7;color:var(--ux-ink-2)}
.u076-doc b{color:var(--ux-ink)}
.u076-doc mark{background:color-mix(in srgb,#FFB547 35%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.u076-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transform:translate(var(--x,0px),var(--y,0px)) scale(.92);transition:opacity .16s,transform .16s}
.u076-tip.on{opacity:1;transform:translate(var(--x,0px),var(--y,0px))}
.u076-tip.glide{transition:opacity .16s,transform .32s var(--ux-spring)}
.u076-box{position:relative;display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 11px;border-radius:10px;background:var(--ux-ink);color:var(--ux-page);font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.u076-box kbd{height:22px;padding:0 6px;border-radius:6px;display:inline-flex;align-items:center;background:color-mix(in srgb,var(--ux-page) 16%,transparent);font:inherit;font-size:11px;font-weight:750}
.u076-box kbd:empty{display:none}
.u076-box:has(kbd:empty){padding-right:11px}
.u076-arr{position:absolute;width:10px;height:10px;left:var(--ax,20px);margin-left:-5px;background:var(--ux-ink);transform:rotate(45deg);border-radius:2px;transition:left .32s var(--ux-spring)}
.u076-tip.below .u076-arr{top:-4px}
.u076-tip.above .u076-arr{bottom:-4px}

/* Lucian UX/UI Prompt #083 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#083 */
/* #083 Queue bar turning into progress */
.u083{position:relative;width:350px;height:400px;display:flex;flex-direction:column;padding:20px 20px 18px;border-radius:28px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);overflow:hidden}
.u083-h{display:flex;align-items:center;gap:10px}
.u083-h i{width:36px;height:36px;border-radius:11px;background:var(--ux-ink);position:relative}
.u083-h i::after{content:"";position:absolute;left:10px;top:11px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid var(--ux-page)}
.u083-h b{display:block;font-size:15.5px;font-weight:850;letter-spacing:-.03em}
.u083-h small{display:block;font-size:12px;font-weight:650;color:var(--ux-ink-3)}
.u083-pill{margin-left:auto;height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-size:12px;font-weight:800;transition:background-color .4s,color .4s}
.u083-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:u083-blink 1.2s ease-in-out infinite}
.u083.is-done .u083-pill::before{animation:none}
@keyframes u083-blink{50%{opacity:.3}}
.u083-trk{position:relative;height:6px;margin:18px 0 6px;border-radius:3px;background:var(--ux-surface-3);overflow:hidden}
.u083-seg{position:absolute;top:0;bottom:0;border-radius:inherit;background:var(--ux-accent);transition:opacity .4s}
.u083-seg.a{animation:u083-a 1.6s cubic-bezier(.65,.05,.35,1) infinite}
.u083-seg.b{animation:u083-b 1.6s cubic-bezier(.25,.6,.4,1) .55s infinite}
@keyframes u083-a{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}
@keyframes u083-b{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}
.u083-fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:inherit;background:var(--ux-accent);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:0;transition:transform .5s var(--ux-ease),opacity .3s,background-color .4s}
.u083.is-det .u083-seg{opacity:0}
.u083.is-det .u083-fill{opacity:1}
.u083.is-done .u083-fill{background:var(--ux-mint)}
.u083-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u083-log{flex:1;margin:12px 0 0;padding:12px;border-radius:16px;background:var(--ux-surface-2);list-style:none;overflow:hidden;display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:600;line-height:1.4}
.u083-log li{display:flex;align-items:center;gap:8px;color:var(--ux-ink-2);animation:u083-in .4s var(--ux-ease)}
@keyframes u083-in{from{opacity:0;transform:translateY(8px)}}
.u083-log time{color:var(--ux-ink-3);font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace}
.u083-st{width:14px;height:14px;flex:none;position:relative}
.u083-st::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--ux-accent);border-right-color:transparent;animation:u083-spin .7s linear infinite}
.u083-log li.ok .u083-st::before{border:0;animation:none;background:var(--ux-mint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.u083-log li.ok{color:var(--ux-ink-3)}
@keyframes u083-spin{to{transform:rotate(360deg)}}
.u083-re{margin-top:12px;height:44px;border:0;border-radius:14px;background:var(--ux-ink);color:var(--ux-page);font-size:14px;font-weight:750;transition:opacity .3s,transform .3s var(--ux-spring)}
.u083-re:active{transform:scale(.97)}
.u083-re[aria-disabled="true"]{opacity:.35}
.u083-re:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}