/* ============================================================================
   RUDQP, UX/UI case study page (/uxui). Loaded after core.css and theme-dark.css.
   Everything is scoped under .uxui so nothing here can leak into other pages.
   ========================================================================== */
@property --ms-bg   { syntax:'<color>'; inherits:true; initial-value:#FFFFFF }
@property --ms-card { syntax:'<color>'; inherits:true; initial-value:#F5F5F7 }
@property --ms-ink  { syntax:'<color>'; inherits:true; initial-value:#1D1D1F }
.uxui{--lead:#515154;--mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--loop:linear-gradient(100deg,#FF7A3D,#FF3D8B,#9B5CFF,#3D9BFF,#FF7A3D);--mease:cubic-bezier(.16,1,.3,1)}
html[data-theme="dark"] .uxui{--lead:#A1A1A6}
.uxui .wrap{max-width:1240px}
.uxui .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.uxui .center{text-align:center}.uxui .mx{margin-left:auto;margin-right:auto}
.uxui .credit{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);margin-top:26px}
.uxui .credit i{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 0deg,#FF7A3D,#FF3D8B,#9B5CFF,#3D9BFF,#FF7A3D);flex:none;position:relative;animation:spin 6s linear infinite}
.uxui .credit i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cream)}
.uxui .kband .credit i::after{background:var(--k-bg)}
.uxui .credit b{color:var(--ink);font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}
.uxui .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.uxui .in .rv{opacity:1;transform:none}
.uxui ul{list-style:none}
.uxui .crumbs{margin-bottom:0}
/* ======================= shared: the miniature rudqp.com ================= */.uxui .bw{border-radius:16px;border:1px solid var(--line-2);background:var(--paper);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.35)}.uxui .bw__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}.uxui .bw__bar u{width:9px;height:9px;border-radius:50%;background:var(--line-2);text-decoration:none}.uxui .bw__url{margin:0 auto;font-size:11px;color:var(--muted);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:3px 22px}.uxui .ms{--ms-bg:#FFFFFF;--ms-card:#F5F5F7;--ms-ink:#1D1D1F;background:var(--ms-bg);color:var(--ms-ink);padding:14px 16px 18px;position:relative}.uxui .ms__nav{display:flex;align-items:center;gap:10px}.uxui .ms__brand{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:-.02em}.uxui .ms__brand i{font-style:normal;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}.uxui .ms__links{display:flex;gap:7px;margin-left:auto}.uxui .ms__links s{display:block;width:26px;height:5px;border-radius:3px;background:var(--ms-ink);opacity:.22}.uxui .ms__tog{width:26px;height:14px;border-radius:999px;background:var(--ms-card);border:1px solid rgba(128,128,128,.35);position:relative;flex:none}.uxui .ms__tog::after{content:"";position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;background:var(--ms-ink)}.uxui .ms__hero{margin-top:22px}.uxui .ms__h{height:13px;border-radius:4px;background:var(--ms-ink);width:62%;transform-origin:left}.uxui .ms__h--2{width:44%;margin-top:7px;background:var(--spec)}.uxui .ms__p{height:5px;border-radius:3px;background:var(--ms-ink);opacity:.25;width:70%;margin-top:12px;transform-origin:left}.uxui .ms__p--2{width:52%;margin-top:6px}.uxui .ms__btn{display:inline-block;margin-top:13px;width:74px;height:20px;border-radius:999px;background:var(--spec)}.uxui .ms__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:18px}.uxui .ms__grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;display:block;background:var(--ms-card)}/* ======================= 01  LIVE BUILD ================================== */.uxui .c1__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,72px);align-items:center}@media(max-width:900px){.uxui .c1__grid{grid-template-columns:1fr}}.uxui .c1 ul{list-style:none;margin-top:24px;display:grid;gap:12px}.uxui .c1 li{display:flex;gap:12px;font-size:15.5px;line-height:1.5}.uxui .c1 li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--spec);margin-top:8px}.uxui .c1__stage{position:relative}.uxui .c1__stage::before{content:"";position:absolute;inset:8% -4% -6% 6%;background:var(--spec);filter:blur(70px);opacity:.22;border-radius:50%;z-index:0}.uxui .c1 .bw{position:relative;z-index:1;transform:translateY(40px) scale(.96);opacity:0;transition:transform 1.1s var(--mease),opacity .9s var(--ease)}.uxui .c1.in .bw{transform:none;opacity:1}.uxui .c1 .ms__nav, .uxui .c1 .ms__btn, .uxui .c1 .ms__grid img{opacity:0}.uxui .c1 .ms__h, .uxui .c1 .ms__p{transform:scaleX(0)}.uxui .c1.in .ms__nav{animation:fadeUp .6s var(--ease) .5s forwards}.uxui .c1.in .ms__h{animation:wipe .7s var(--mease) .85s forwards}.uxui .c1.in .ms__h--2{animation-delay:1.05s}.uxui .c1.in .ms__p{animation:wipe .6s var(--mease) 1.3s forwards}.uxui .c1.in .ms__p--2{animation-delay:1.42s}.uxui .c1.in .ms__btn{animation:pop .5s var(--mease) 1.7s forwards}.uxui .c1.in .ms__grid img{animation:pop .6s var(--mease) forwards;animation-delay:calc(2s + var(--i)*.12s)}.uxui .c1.in .ms{animation:msTheme 9s var(--ease) 3.6s infinite}.uxui .c1.in .ms__tog::after{animation:msKnob 9s var(--ease) 3.6s infinite}.uxui .c1__cur{position:absolute;z-index:3;right:12%;bottom:14%;width:20px;height:20px;opacity:0;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.uxui .c1.in .c1__cur{animation:cur 9s var(--ease) 3.6s infinite}.uxui .c1__tag{position:absolute;z-index:2;font-size:11.5px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--cream);border:1px solid var(--line-2);box-shadow:0 10px 24px -12px rgba(0,0,0,.4);opacity:0;white-space:nowrap}.uxui .c1__tag--a{left:10%;top:-15px}.uxui .c1__tag--b{right:-10px;top:58%}.uxui .c1__tag--c{left:8%;bottom:-14px}.uxui .c1.in .c1__tag{animation:pop .6s var(--mease) forwards,bob 5s ease-in-out infinite}.uxui .c1.in .c1__tag--a{animation-delay:2.7s,3.3s}.uxui .c1.in .c1__tag--b{animation-delay:2.9s,3.5s}.uxui .c1.in .c1__tag--c{animation-delay:3.1s,3.7s}@media(max-width:600px){.uxui .c1__tag--b{right:-6px}}@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes wipe{to{transform:scaleX(1)}}@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes msTheme{0%,22%{--ms-bg:#FFFFFF;--ms-card:#F5F5F7;--ms-ink:#1D1D1F}30%,72%{--ms-bg:#000000;--ms-card:#1C1C1E;--ms-ink:#F5F5F7}80%,100%{--ms-bg:#FFFFFF;--ms-card:#F5F5F7;--ms-ink:#1D1D1F}}@keyframes msKnob{0%,22%{transform:none}30%,72%{transform:translateX(12px)}80%,100%{transform:none}}@keyframes cur{0%{opacity:0;right:12%;bottom:14%}6%{opacity:1}20%,24%{right:2.4%;bottom:75.5%;transform:scale(1)}22%{transform:scale(.8)}40%{opacity:1;right:30%;bottom:40%}64%,68%{right:2.4%;bottom:75.5%;transform:scale(1)}72%{transform:scale(.8)}74%{transform:scale(1)}90%{opacity:1;right:12%;bottom:14%}100%{opacity:0;right:12%;bottom:14%}}/* ======================= 04  EXPLODED LAYERS ============================= */.uxui .c4__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;margin-top:clamp(20px,3vw,36px)}@media(max-width:900px){.uxui .c4__grid{grid-template-columns:1fr}}.uxui .c4__scene{height:clamp(380px,44vw,540px);perspective:1600px;display:grid;place-items:center;position:relative}.uxui .c4__stack{width:min(340px,70%);aspect-ratio:4/3;position:relative;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg) translateZ(-150px)}.uxui .pl{position:absolute;inset:0;border-radius:16px;border:1px solid var(--line-2);background:var(--paper);transform:translateZ(0);transition:transform 1.4s var(--mease),box-shadow .5s,border-color .4s,opacity .4s;transition-delay:calc(var(--i)*.08s),0s,0s,0s;display:flex;align-items:flex-end;padding:12px 14px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);overflow:hidden}.uxui .in .pl{transform:translateZ(calc(var(--i)*62px))}.uxui .pl.hot{border-color:transparent;box-shadow:0 0 0 2px #FF3D8B,0 30px 60px -20px rgba(255,61,139,.55);transform:translateZ(calc(var(--i)*62px + 22px))}.uxui .c4__stack.dim .pl:not(.hot){opacity:.45}.uxui .pl--top{padding:0;background:var(--cream);display:block}.uxui .pl--top .ms{height:100%;padding:10px 12px;background:var(--cream);--ms-ink:var(--ink);--ms-card:var(--paper)}.uxui .pl--top .ms__grid{margin-top:10px;gap:5px}.uxui .pl--top .ms__hero{margin-top:12px}.uxui .pl--top .ms__h{height:9px}.uxui .pl i{position:absolute;inset:0;opacity:.16;font-style:normal}.uxui .pl--2 i{background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,var(--ink) 0 1px,transparent 1px 22px)}.uxui .pl--3 i{background:radial-gradient(circle at 30% 40%,#9B5CFF,transparent 55%),radial-gradient(circle at 75% 60%,#3D9BFF,transparent 50%);opacity:.5}.uxui .pl--4 i{background:radial-gradient(circle at 70% 35%,#FF7A3D,transparent 55%),radial-gradient(circle at 25% 65%,#FF3D8B,transparent 50%);opacity:.5}.uxui .pl--5{background:var(--ink);color:var(--cream)}.uxui .c4__list{list-style:none;display:grid;gap:4px}.uxui .c4__list li{display:grid;grid-template-columns:44px 1fr;gap:6px;padding:16px 16px;border-radius:18px;cursor:default;transition:background .35s var(--ease);border-top:1px solid var(--line)}.uxui .c4__list li:first-child{border-top:0}.uxui .c4__list li.hot{background:var(--paper);border-color:transparent}.uxui .c4__list li.hot + li{border-color:transparent}.uxui .c4__list .n{font-family:var(--display);font-weight:700;font-size:14px;color:var(--muted);padding-top:2px}.uxui .c4__list li.hot .n{background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}.uxui .c4__list b{font-family:var(--display);font-size:18px;letter-spacing:-.01em;display:block}.uxui .c4__list span{font-size:14.5px;color:var(--lead);display:block;margin-top:2px;line-height:1.5}@media(max-width:600px){.uxui .c4__scene{height:360px}.uxui .c4__stack{width:62%}.uxui .in .pl{transform:translateZ(calc(var(--i)*44px))}.uxui .pl.hot{transform:translateZ(calc(var(--i)*44px + 16px))}}/* ======================= ROUND 2 shared bits ============================ */.uxui .kband{background:var(--k-bg);color:var(--k-ink);--ink:var(--k-ink);--muted:var(--k-muted);--lead:var(--k-muted);--paper:var(--k-paper);--cream:var(--k-bg);--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.22)}.uxui .kband .pill--ghost:hover{background:var(--k-ink);color:#000}.uxui .kband .pill--accent{background:var(--spec);color:#fff;border-color:transparent}.uxui :root{--loop:linear-gradient(100deg,#FF7A3D,#FF3D8B,#9B5CFF,#3D9BFF,#FF7A3D)}@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes draw{0%{stroke-dashoffset:1;opacity:.9}22%,84%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}@keyframes ping{to{transform:scale(3.2);opacity:0}}@keyframes flow{to{background-position:-200% 0}}@keyframes bob{50%{transform:translateY(-7px)}}@keyframes msTheme{0%,40%{--ms-bg:#FFFFFF;--ms-card:#F5F5F7;--ms-ink:#1D1D1F}50%,90%{--ms-bg:#000000;--ms-card:#1C1C1E;--ms-ink:#F5F5F7}100%{--ms-bg:#FFFFFF;--ms-card:#F5F5F7;--ms-ink:#1D1D1F}}.uxui .flow{background:var(--loop);background-size:200% 100%;animation:flow 6s linear infinite}.uxui .flowtxt{background:var(--loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}.uxui .tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.uxui .tagrow span{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink)}.uxui .lv{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}.uxui .lv i{width:9px;height:9px;border-radius:50%;background:#30D158;position:relative}.uxui .lv i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#30D158;animation:ping 2s var(--ease) infinite}/* wireframe that draws itself */.uxui .wf{width:100%;height:100%;display:block}.uxui .wf *{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}.uxui .wf .hl{stroke:#FF3D8B}.uxui .go .wf *{animation:draw 6s var(--ease) infinite;animation-delay:calc(.3s + var(--i)*.22s)}/* swatches */.uxui .sw{display:grid;gap:8px}.uxui .sw i{display:block;aspect-ratio:1/1;border-radius:18px;border:1px solid var(--line)}.uxui .sw b{font-family:var(--display);font-size:13.5px;letter-spacing:-.01em;display:block;line-height:1.2}.uxui .sw em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}/* theme cards: the 8 colour directions that were tested */.uxui .tc{width:118px;height:84px;border-radius:12px;background:var(--b);border:1px solid rgba(128,128,128,.3);padding:10px;box-shadow:0 14px 28px -16px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:5px}.uxui .tc u{display:block;height:7px;width:70%;border-radius:3px;background:var(--i);text-decoration:none}.uxui .tc u + u{width:46%;opacity:.45;height:5px}.uxui .tc s{display:block;margin-top:auto;height:14px;width:44px;border-radius:999px;background:var(--a);text-decoration:none}.uxui .tc small{position:absolute;left:50%;transform:translateX(-50%);bottom:-20px;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .4s}/* 3D plates (from favourite 04) */.uxui .stack{width:min(340px,70%);aspect-ratio:4/3;position:relative;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg) translateZ(-150px)}.uxui .pl{position:absolute;inset:0;border-radius:16px;border:1px solid var(--line-2);background:var(--paper);transform:translateZ(0);transition:transform 1.4s var(--mease),box-shadow .5s,border-color .4s,opacity .4s;transition-delay:calc(var(--i)*.08s),0s,0s,0s;display:flex;align-items:flex-end;padding:12px 14px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);overflow:hidden}.uxui .pl.hot{border-color:transparent;box-shadow:0 0 0 2px #FF3D8B,0 30px 60px -20px rgba(255,61,139,.55)}.uxui .stack.dim .pl:not(.hot){opacity:.4}.uxui .pl i{position:absolute;inset:0;font-style:normal}.uxui .pl--srv{background:#1D1D1F;color:#F5F5F7;border-color:rgba(255,255,255,.2)}.uxui .pl--sys i{background:radial-gradient(circle at 70% 35%,#FF7A3D,transparent 55%),radial-gradient(circle at 25% 65%,#FF3D8B,transparent 50%);opacity:.5}.uxui .pl--book i{background:radial-gradient(circle at 30% 40%,#9B5CFF,transparent 55%),radial-gradient(circle at 75% 60%,#3D9BFF,transparent 50%);opacity:.5}.uxui .pl--fe i{opacity:.16;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,var(--ink) 0 1px,transparent 1px 22px)}.uxui .pl--brand{padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;align-items:stretch}.uxui .pl--brand b{display:block;min-height:0}.uxui .pl--res{background:var(--cream)}.uxui .pl--res i{background:repeating-linear-gradient(0deg,transparent 0 17px,var(--line-2) 17px 18px);opacity:.9}.uxui .pl--top{padding:0;background:var(--cream);display:block}.uxui .pl--top .ms{height:100%;padding:10px 12px;background:var(--cream);--ms-ink:var(--ink);--ms-card:var(--paper)}.uxui .pl--top .ms__grid{margin-top:10px;gap:5px}.uxui .pl--top .ms__hero{margin-top:12px}.uxui .pl--top .ms__h{height:9px}/* ======================= R2  BRAND BOARD (dark bento) =================== */.uxui .r2__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:clamp(28px,4vw,48px)}.uxui .bt{background:var(--k-paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}.uxui .bt h3{font-family:var(--display);font-size:17px;letter-spacing:-.01em;line-height:1.25}.uxui .bt p{font-size:14px;color:var(--k-muted);margin-top:4px;line-height:1.5}.uxui .bt .cap2{position:absolute;left:24px;top:20px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--k-muted)}.uxui .bt--wm{grid-column:span 4;min-height:300px}.uxui .bt--grad{grid-column:span 2;padding:0;min-height:300px}.uxui .bt--col{grid-column:span 3}.uxui .bt--type{grid-column:span 3}.uxui .bt--res{grid-column:span 2}.uxui .bt--rules{grid-column:span 2}.uxui .bt--num{grid-column:span 2}@media(max-width:900px){.uxui .r2__grid{grid-template-columns:repeat(2,1fr)}.uxui .bt--wm, .uxui .bt--col, .uxui .bt--type{grid-column:span 2}.uxui .bt--grad, .uxui .bt--res, .uxui .bt--rules, .uxui .bt--num{grid-column:span 1}}@media(max-width:560px){.uxui .r2__grid{grid-template-columns:1fr}.uxui .r2__grid>*{grid-column:auto!important}}.uxui .wmx{position:absolute;inset:0;display:grid;place-items:center}.uxui .wmx b{font-family:var(--display);font-weight:800;font-size:clamp(64px,11vw,150px);letter-spacing:-.05em;line-height:1;position:relative;z-index:1}.uxui .wmx svg{position:absolute;inset:0;width:100%;height:100%}.uxui .wmx svg *{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1.6s var(--mease);transition-delay:calc(.3s + var(--i)*.15s)}.uxui .in .wmx svg *{stroke-dashoffset:0}.uxui .bt--grad .flow{position:absolute;inset:0;animation-duration:5s}.uxui .bt--grad .stops{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:10.5px;color:#fff;background:rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.uxui .bt--grad .stops span{padding:10px 0;text-align:center;border-left:1px solid rgba(255,255,255,.2)}.uxui .bt--grad .cap2{color:#fff;z-index:1}.uxui .cchips{position:absolute;left:24px;right:24px;top:52px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;perspective:700px}.uxui .cchips div{opacity:0;transform:rotateX(-80deg);transform-origin:top;transition:transform .9s var(--mease),opacity .5s;transition-delay:calc(.2s + var(--i)*.1s)}.uxui .in .cchips div{opacity:1;transform:none}.uxui .cchips i{display:block;aspect-ratio:1/1.15;border-radius:14px;border:1px solid rgba(255,255,255,.18);transition:transform .3s var(--ease)}.uxui .cchips div:hover i{transform:translateY(-6px)}.uxui .cchips em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--k-muted);margin-top:6px}@media(max-width:560px){.uxui .cchips{grid-template-columns:repeat(3,1fr);position:static;margin-bottom:18px}.uxui .bt--col{justify-content:flex-start}.uxui .cchips em{font-size:9.5px}}.uxui .bt--col{min-height:260px}.uxui .aa{position:absolute;left:24px;top:40px;font-family:var(--display);font-size:clamp(80px,9vw,120px);letter-spacing:-.05em;line-height:1;animation:wght 3.5s ease-in-out infinite alternate}.uxui .aa2{position:absolute;right:24px;top:56px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--k-muted);line-height:1.7}.uxui .bt--type{min-height:260px}.uxui .orbit{position:absolute;left:50%;top:36%;width:0;height:0}.uxui .bt--res{min-height:330px}.uxui .orbit i{position:absolute;width:26px;height:26px;margin:-13px;border-radius:50%;background:var(--c);border:1px solid rgba(255,255,255,.3);transform:rotate(calc(var(--i)*45deg)) translateX(64px);transition:transform 1.2s var(--mease);transition-delay:calc(var(--i)*.05s)}.uxui .orbit{animation:spin 18s linear infinite}.uxui .orbit i.win{background:var(--loop);background-size:200% 100%;animation:flow 4s linear infinite}.uxui .in .orbit i.win{transform:rotate(calc(var(--i)*45deg)) translateX(0) scale(1.9);transition-delay:1.4s}.uxui .rules{position:absolute;left:24px;right:24px;top:52px;list-style:none;display:grid;gap:9px;font-size:13.5px}.uxui .rules li{display:flex;gap:9px;align-items:center;opacity:0;transform:translateX(-10px);transition:.6s var(--mease);transition-delay:calc(.4s + var(--i)*.25s)}.uxui .in .rules li{opacity:1;transform:none}.uxui .rules li::before{content:"\2713";width:18px;height:18px;border-radius:50%;background:#30D158;color:#000;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}.uxui .bignum{font-family:var(--display);font-weight:800;font-size:clamp(64px,7vw,96px);letter-spacing:-.05em;line-height:.9;margin-bottom:8px;align-self:flex-start}/* ======================= CASE STUDY: new sections ======================= */.uxui .sec--tight{padding-top:clamp(40px,5vw,64px)}.uxui .eyebrow--step{display:inline-flex;align-items:center;gap:10px}.uxui .eyebrow--step::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--spec)}.uxui h2.display.big{font-size:clamp(34px,6vw,76px);letter-spacing:-.04em;line-height:1}.uxui .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}@media(max-width:900px){.uxui .grid2{grid-template-columns:1fr}}/* ---- cover ---- */.uxui .cover{padding-top:clamp(40px,6vw,90px)}.uxui .cover__kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.uxui .cover__kicker .dot{width:10px;height:10px;border-radius:50%;background:var(--spec)}.uxui .cover h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,9vw,120px);letter-spacing:-.05em;line-height:.95;margin-top:14px}.uxui .cover h1 .flowtxt{display:inline-block}.uxui .meta{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.uxui .meta div{padding:18px 20px 18px 0;border-right:1px solid var(--line)}.uxui .meta div:last-child{border-right:0}.uxui .meta div + div{padding-left:20px}.uxui .meta b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.uxui .meta span{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}@media(max-width:800px){.uxui .meta{grid-template-columns:1fr 1fr}.uxui .meta div:nth-child(2){border-right:0}.uxui .meta div:nth-child(n+3){border-top:1px solid var(--line)}.uxui .meta div:nth-child(3){padding-left:0}}.uxui .cover .c1__stage{margin-top:clamp(36px,5vw,64px)}/* ---- brief ---- */.uxui .brief__q{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,56px);letter-spacing:-.035em;line-height:1.05;max-width:22ch;text-wrap:balance}.uxui .brief__q .w{color:var(--ink);opacity:.14;transition:opacity .35s var(--ease)}.uxui .brief__q .w.lit{opacity:1}.uxui .brief__q .w.g.lit{background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}.uxui .goals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(30px,4vw,48px)}@media(max-width:800px){.uxui .goals{grid-template-columns:1fr}}.uxui .goal{background:var(--paper);border-radius:var(--r-lg);padding:26px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.uxui .goal h3{font-family:var(--display);font-size:20px;letter-spacing:-.02em}.uxui .goal p{font-size:14.5px;color:var(--lead);margin-top:6px;line-height:1.5}.uxui .goal .ico{position:absolute;left:26px;top:24px;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--cream);border:1px solid var(--line)}.uxui .goal .ico svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.uxui .goal .ico svg *{stroke-dasharray:1;stroke-dashoffset:1}.uxui .in .goal .ico svg *{animation:draw 5s var(--ease) infinite;animation-delay:calc(.4s + var(--i)*.4s)}.uxui .goal .ico::after{content:"";position:absolute;inset:-2px;border-radius:18px;background:var(--spec);z-index:-1;opacity:0;transition:opacity .5s}.uxui .in .goal .ico::after{opacity:1;transition-delay:calc(1.6s + var(--i)*.4s)}.uxui .goal .tick{position:absolute;right:22px;top:24px;width:26px;height:26px;border-radius:50%;background:#30D158;color:#000;display:grid;place-items:center;font-size:13px;font-weight:700;transform:scale(0)}.uxui .in .goal .tick{animation:pop .5s var(--mease) forwards;animation-delay:calc(2s + var(--i)*.4s)}/* ---- research ---- */.uxui .res__stage{position:relative;height:clamp(300px,34vw,420px);border-radius:var(--r-lg);background:var(--paper);display:grid;place-items:center;overflow:hidden}.uxui .res__stage::before{content:"";position:absolute;inset:-30%;background:var(--loop);background-size:200% 100%;filter:blur(90px);opacity:.12;animation:flow 10s linear infinite}.uxui .res__stage .fanx .tc{transform:none}.uxui .in .res__stage .fanx .tc{transform:translateX(calc((var(--i) - 3.5)*52px)) rotate(calc((var(--i) - 3.5)*5deg)) translateY(calc((var(--i) - 3.5)*(var(--i) - 3.5)*3px))}.uxui .in .res__stage .fanx .tc.win{transform:translateY(-118px) scale(1.5);transition-delay:1.3s;z-index:5;box-shadow:0 30px 60px -18px rgba(155,92,255,.6)}.uxui .in .res__stage .fanx .tc.win small{opacity:1;transition-delay:1.9s}@media(max-width:600px){.uxui .in .res__stage .fanx .tc{transform:translateX(calc((var(--i) - 3.5)*30px)) rotate(calc((var(--i) - 3.5)*5deg))}.uxui .in .res__stage .fanx .tc.win{transform:translateY(-84px) scale(1.25)}}.uxui .dirs{list-style:none;display:grid;gap:0;margin-top:22px;border-top:1px solid var(--line)}.uxui .dirs li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-10px);transition:.6s var(--mease);transition-delay:calc(.3s + var(--i)*.12s)}.uxui .in .dirs li{opacity:1;transform:none}.uxui .dirs .n{font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted)}.uxui .dirs b{font-family:var(--display);font-size:16px;letter-spacing:-.01em}.uxui .dirs span{font-size:13px;color:var(--muted)}.uxui .dirs li.win b{background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}.uxui .dirs li.win span{color:var(--ink);font-weight:600}.uxui .rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}.uxui .stat{padding:18px 0 0;border-top:2px solid var(--line)}.uxui .stat b{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,52px);letter-spacing:-.05em;line-height:1;display:block;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}.uxui .stat span{display:block;font-size:13.5px;color:var(--lead);margin-top:6px;line-height:1.4}/* ---- interface details (bento of live demos) ---- */.uxui .ui{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:clamp(30px,4vw,48px)}.uxui .ui>div{background:var(--paper);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}.uxui .ui h3{font-family:var(--display);font-size:17px;letter-spacing:-.01em;line-height:1.25}.uxui .ui p{font-size:14px;color:var(--lead);margin-top:4px;line-height:1.5}.uxui .ui .cap2{position:absolute;left:24px;top:20px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);z-index:2}.uxui .ui .demo{position:relative;height:140px;margin:30px 0 18px}.uxui .ui--3{grid-column:span 3}.uxui .ui--2{grid-column:span 2}.uxui .ui--4{grid-column:span 4}@media(max-width:900px){.uxui .ui{grid-template-columns:1fr 1fr}.uxui .ui--3, .uxui .ui--4{grid-column:span 2}.uxui .ui--2{grid-column:span 1}}@media(max-width:560px){.uxui .ui{grid-template-columns:1fr}.uxui .ui>div{grid-column:auto!important}}/* nav with photo preview */.uxui .dnav{display:flex;gap:14px;height:100%}.uxui .dnav__list{flex:1;display:grid;gap:6px;align-content:start}.uxui .dnav__list span{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:10px;transition:background .3s}.uxui .dnav__list span i{width:22px;height:22px;border-radius:6px;background:var(--line-2);flex:none;background-size:cover}.uxui .dnav__list span.on{background:var(--cream)}.uxui .dnav__pv{width:34%;border-radius:12px;overflow:hidden;position:relative;background:var(--cream)}.uxui .dnav__pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}.uxui .dnav__pv img.on{opacity:1}/* hero wheel */.uxui .wheel{position:absolute;left:50%;top:14px;width:320px;height:320px;margin-left:-160px;animation:none}.uxui .in .wheel{animation:spin 26s linear infinite}.uxui .wheel img{position:absolute;left:50%;top:50%;width:52px;height:66px;object-fit:cover;border-radius:6px;margin:-33px -26px;transform:rotate(calc(var(--i)*36deg)) translateY(-136px)}.uxui .ui--wheel .demo{overflow:hidden}.uxui .ui--wheel .demo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,var(--paper))}/* theme flip without a flash */.uxui .flash{position:relative;height:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.uxui .flash div{border-radius:12px;border:1px solid var(--line-2);position:relative;overflow:hidden;font-size:11px;font-weight:600;padding:10px;display:flex;flex-direction:column;justify-content:flex-end}.uxui .flash div s{position:absolute;inset:0;text-decoration:none}.uxui .flash .bad s{background:#fff}.uxui .in .flash .bad s{animation:flashBad 4s steps(1) infinite}.uxui .flash .good s{background:#000}.uxui .in .flash .good s{animation:flashGood 4s steps(1) infinite}.uxui .flash div em{position:relative;font-style:normal;color:#fff;mix-blend-mode:difference}@keyframes flashBad{0%,45%{background:#fff}50%,100%{background:#000}}@keyframes flashGood{0%,100%{background:#000}}/* magnetic button, real */.uxui .magwrap{display:grid;place-items:center;height:100%}.uxui .magnetic{transition:transform .25s var(--ease)}/* fonts: no layout shift */.uxui .cls{height:100%;display:grid;align-content:center;gap:10px}.uxui .cls__row{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;color:var(--muted)}.uxui .cls__row b{width:70px;flex:none;color:var(--ink)}.uxui .cls__bar{flex:1;height:10px;border-radius:5px;background:var(--cream);position:relative;overflow:hidden}.uxui .cls__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--line-2);width:0}.uxui .in .cls__bar.shift i{animation:shift 4s var(--ease) infinite}.uxui .in .cls__bar.stable i{animation:stable 4s var(--ease) infinite}.uxui .cls__bar.stable i{background:var(--spec)}@keyframes shift{0%{width:52%}40%{width:52%}50%{width:78%}100%{width:78%}}@keyframes stable{0%{width:66%}100%{width:66%}}.uxui .cls__row em{font-style:normal;font-family:var(--mono);font-size:11px;width:44px;text-align:right}/* search */.uxui .srch{height:100%;display:grid;align-content:center;gap:8px}.uxui .srch__box{display:flex;align-items:center;gap:10px;background:var(--cream);border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;font-size:13px}.uxui .srch__box kbd{margin-left:auto;font:600 10.5px var(--sans);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;color:var(--muted)}.uxui .srch__q::after{content:"";display:inline-block;width:1.5px;height:12px;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}.uxui .srch__hits{display:grid;gap:4px}.uxui .srch__hits span{font-size:12px;padding:6px 10px;border-radius:8px;background:var(--cream);opacity:0;transform:translateY(4px);transition:.4s var(--ease)}.uxui .srch__hits span.on{opacity:1;transform:none}.uxui .srch__hits b{font-weight:600}@keyframes blink{50%{opacity:0}}/* presence */.uxui .pres{height:100%;display:grid;place-items:center}.uxui .pres__pill{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);border-radius:999px;padding:12px 18px;font-size:13.5px;font-weight:600;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}.uxui .pres__pill i{width:9px;height:9px;border-radius:50%;background:#30D158;position:relative}.uxui .pres__pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#30D158;animation:ping 2s var(--ease) infinite}.uxui .pres__pill b{font-variant-numeric:tabular-nums}/* load more */.uxui .lm{height:100%;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-content:start}.uxui .lm i{aspect-ratio:1;border-radius:6px;background:var(--line-2);opacity:0;transform:scale(.8)}.uxui .in .lm i{animation:pop .5s var(--mease) forwards;animation-delay:calc(var(--i)*.06s)}.uxui .in .lm i.late{animation-delay:calc(2.2s + var(--i)*.06s)}.uxui .lm__btn{grid-column:1/-1;justify-self:center;font-size:11.5px;font-weight:600;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;margin-top:2px;opacity:0}.uxui .in .lm__btn{animation:pop .4s var(--mease) .8s forwards,tap 4s ease-in-out 1.8s infinite}@keyframes tap{0%,4%{transform:scale(1)}6%{transform:scale(.92)}8%,100%{transform:scale(1)}}/* gallery lightbox / reduced motion */.uxui .rm{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}.uxui .rm div{border-radius:12px;background:var(--cream);border:1px solid var(--line);padding:12px;font-size:11.5px;font-weight:600;color:var(--muted);display:grid;gap:8px}.uxui .rm s{display:block;height:7px;border-radius:4px;background:var(--spec);width:60%;text-decoration:none}.uxui .rm s + s{width:80%;opacity:.5}.uxui .rm .move s{animation:bob 1.6s ease-in-out infinite}.uxui .rm .move s + s{animation-delay:.3s}/* ---- booking flow ---- */.uxui .flowline{position:relative;margin-top:clamp(30px,4vw,48px)}.uxui .flowline__bar{position:absolute;left:0;right:0;top:17px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}.uxui .flowline__bar::after{content:"";position:absolute;inset:0;background:var(--spec);transform:scaleX(0);transform-origin:left;transition:transform 2.6s var(--mease) .3s}.uxui .in .flowline__bar::after{transform:scaleX(1)}.uxui .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}.uxui .stp__dot{width:36px;height:36px;border-radius:50%;background:var(--cream);border:2px solid var(--line-2);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;transition:border-color .5s,box-shadow .5s;transition-delay:calc(.3s + var(--i)*.5s)}.uxui .in .stp__dot{border-color:#FF3D8B;box-shadow:0 0 0 6px rgba(255,61,139,.14)}.uxui .stp__card{background:var(--paper);border-radius:var(--r);margin-top:18px;padding:18px;height:calc(100% - 54px);display:flex;flex-direction:column}.uxui .stp__card h3{font-family:var(--display);font-size:17px;letter-spacing:-.02em;line-height:1.2}.uxui .stp__card p{font-size:13.5px;color:var(--lead);margin-top:6px;line-height:1.5}.uxui .stp__viz{height:96px;border-radius:12px;background:var(--cream);border:1px solid var(--line);margin-bottom:14px;position:relative;overflow:hidden;display:grid;place-items:center;padding:12px}@media(max-width:900px){.uxui .steps{grid-template-columns:1fr;gap:20px;padding-left:52px}.uxui .flowline__bar{left:17px;right:auto;top:0;bottom:0;width:2px;height:auto}.uxui .flowline__bar::after{transform:scaleY(0);transform-origin:top}.uxui .in .flowline__bar::after{transform:scaleY(1)}.uxui .stp{position:relative}.uxui .stp__dot{position:absolute;left:-52px;top:0}.uxui .stp__card{margin-top:0;height:auto}}.uxui .field{width:100%;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--paper);display:flex;align-items:center;padding:0 10px;font-size:12px;color:var(--ink)}.uxui .field .t::after{content:"";display:inline-block;width:1.5px;height:12px;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}.uxui .otp{display:flex;gap:5px;align-items:center}.uxui .otp span{width:24px;height:32px;border-radius:7px;border:1px solid var(--line-2);background:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:14px}.uxui .otp span b{opacity:0}.uxui .in .otp span b{animation:digit 7s steps(1) infinite;animation-delay:calc(var(--i)*.28s + .8s)}.uxui .otp em{margin-left:4px;width:22px;height:22px;border-radius:50%;background:#30D158;display:grid;place-items:center;color:#fff;font-style:normal;font-size:11px;font-weight:700;transform:scale(0)}.uxui .in .otp em{animation:okay 7s var(--mease) .8s infinite}@keyframes digit{0%{opacity:1}72%{opacity:0}100%{opacity:0}}@keyframes okay{0%,28%{transform:scale(0)}34%,70%{transform:scale(1)}76%,100%{transform:scale(0)}}.uxui .cchips2{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.uxui .cchips2 span{font-size:10.5px;font-weight:600;border:1px solid var(--line-2);border-radius:999px;padding:4px 9px;transition:.4s}.uxui .in .cchips2 span.pick{animation:pick 5s var(--ease) infinite;animation-delay:1s}@keyframes pick{0%,20%{background:transparent;color:inherit}30%,100%{background:var(--ink);color:var(--cream);border-color:var(--ink)}}.uxui .quote{width:100%;display:grid;gap:5px}.uxui .quote s{height:6px;border-radius:3px;background:var(--line-2);text-decoration:none;display:block;width:70%}.uxui .quote b{font-family:var(--display);font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.uxui .done{width:40px;height:40px;border-radius:50%;background:#30D158;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:700;transform:scale(0)}.uxui .in .done{animation:pop .5s var(--mease) 2.6s forwards}.uxui .mails{display:flex;gap:12px;margin-top:clamp(26px,3vw,40px);overflow:hidden;padding:6px 0}.uxui .mail{flex:1;min-width:0;border-radius:14px;border:1px solid var(--line);background:var(--paper);padding:14px;opacity:0;transform:translateY(16px);transition:.7s var(--mease);transition-delay:calc(.2s + var(--i)*.12s)}.uxui .in .mail{opacity:1;transform:none}.uxui .mail i{display:block;height:6px;width:36%;border-radius:3px;background:var(--spec)}.uxui .mail b{display:block;font-family:var(--display);font-size:13px;letter-spacing:-.01em;margin-top:10px;line-height:1.25}.uxui .mail span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}@media(max-width:800px){.uxui .mails{display:grid;grid-template-columns:1fr 1fr}}@media(max-width:480px){.uxui .mails{grid-template-columns:1fr}}/* ---- studio dashboard + automations ---- */.uxui .dash{background:var(--k-paper);color:var(--k-ink);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}.uxui .dash__hd{display:flex;justify-content:space-between;align-items:center;font-size:13px}.uxui .dash__hd b{font-family:var(--display);font-size:15px}.uxui .dkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.uxui .dkpi{background:rgba(255,255,255,.06);border-radius:14px;padding:14px}.uxui .dkpi .l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--k-muted)}.uxui .dkpi .v{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.03em;margin-top:4px;font-variant-numeric:tabular-nums}.uxui .dkpi .v em{font-style:normal;font-size:12px;color:#3D9BFF;margin-left:6px}.uxui .chart{display:flex;align-items:flex-end;gap:5px;height:80px;margin-top:18px}.uxui .chart i{flex:1;border-radius:4px 4px 0 0;background:rgba(255,255,255,.18);height:var(--h);transform:scaleY(0);transform-origin:bottom;transition:transform 1s var(--mease);transition-delay:calc(.4s + var(--i)*.07s)}.uxui .in .chart i{transform:none}.uxui .chart i.hi{background:var(--spec)}.uxui .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:16px}.uxui .cal span{aspect-ratio:1;border-radius:6px;background:rgba(255,255,255,.06);font-size:9px;display:grid;place-items:center;color:var(--k-muted)}.uxui .cal span.b{background:var(--spec);color:#fff;font-weight:700}.uxui .dash__tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.uxui .dash__tabs span{font-size:10.5px;font-weight:600;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 9px;color:var(--k-muted)}.uxui .dash__tabs span.on{background:#fff;color:#000;border-color:#fff}.uxui .auto{margin-top:16px;position:relative}.uxui .auto__row{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;align-items:center;gap:6px}.uxui .auto__node{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 10px;text-align:center;font-size:12px;font-weight:600;line-height:1.3}.uxui .auto__node small{display:block;font-weight:500;color:var(--muted);font-size:10.5px;margin-top:2px}.uxui .auto__arrow{height:2px;background:var(--line-2);position:relative;border-radius:2px}.uxui .auto__arrow::after{content:"";position:absolute;top:-4px;left:-5px;width:10px;height:10px;border-radius:50%;background:var(--spec);opacity:0}.uxui .in .auto__arrow::after{animation:travel 4.5s var(--ease) infinite;animation-delay:calc(var(--i)*1.1s)}@keyframes travel{0%{left:-5px;opacity:0}10%{opacity:1}30%{left:calc(100% - 5px);opacity:1}40%,100%{left:calc(100% - 5px);opacity:0}}.uxui .in .auto__node{animation:nodeGlow 4.5s var(--ease) infinite;animation-delay:calc(var(--i)*1.1s)}@keyframes nodeGlow{0%,5%{box-shadow:none;border-color:var(--line)}12%,28%{box-shadow:0 0 0 2px #FF3D8B;border-color:transparent}36%,100%{box-shadow:none;border-color:var(--line)}}@media(max-width:700px){.uxui .auto__row{grid-template-columns:1fr;gap:8px}.uxui .auto__arrow{width:2px;height:22px;margin:0 auto}.uxui .auto__arrow::after{left:-4px;top:-5px}.uxui .in .auto__arrow::after{animation-name:travelV}@keyframes travelV{0%{top:-5px;opacity:0}10%{opacity:1}30%{top:calc(100% - 5px);opacity:1}40%,100%{top:calc(100% - 5px);opacity:0}}}.uxui .cms{margin-top:18px;border-radius:14px;border:1px dashed var(--line-2);padding:14px;position:relative;font-size:13px}.uxui .cms__lbl{position:absolute;top:-10px;left:12px;background:var(--cream);padding:0 8px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FF3D8B}.uxui .cms b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;display:block}.uxui .cms b .edit{background:rgba(255,61,139,.14);border-radius:4px;padding:0 3px;outline:1.5px solid #FF3D8B}.uxui .in .cms b .edit{animation:editTxt 6s steps(1) infinite}@keyframes editTxt{0%,40%{content:""}}/* ---- craft principles ---- */.uxui .rulesgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(30px,4vw,48px)}@media(max-width:900px){.uxui .rulesgrid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.uxui .rulesgrid{grid-template-columns:1fr}}.uxui .rule{background:var(--paper);border-radius:var(--r-lg);padding:24px;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.uxui .rule h3{font-family:var(--display);font-size:17px;letter-spacing:-.01em;line-height:1.25}.uxui .rule p{font-size:13.5px;color:var(--lead);margin-top:4px;line-height:1.5}.uxui .rule .k2{position:absolute;left:24px;top:22px;font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.05em;line-height:1;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}.uxui .rule .glyph{position:absolute;right:22px;top:22px;width:44px;height:44px;border-radius:12px;background:var(--cream);border:1px solid var(--line);display:grid;place-items:center;font-size:18px;font-weight:700}.uxui .rule .glyph.dash{position:absolute}.uxui .rule .glyph.dash s{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px}.uxui .rule .glyph.dash::after{content:"";position:absolute;width:26px;height:2px;background:#FF3D8B;transform:rotate(-45deg);border-radius:1px}.uxui .rule .glyph.cur{font-family:'Fraunces',Georgia,serif;font-style:italic;text-decoration:line-through;color:#FF3D8B}/* ---- close ---- */.uxui .close2{text-align:center}.uxui .close2 h2{font-size:clamp(34px,6.4vw,84px);letter-spacing:-.045em;line-height:.98}.uxui .nums{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:clamp(30px,4vw,48px)}@media(max-width:900px){.uxui .nums{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.uxui .nums{grid-template-columns:repeat(2,1fr)}}.uxui .nums div{background:var(--paper);border-radius:var(--r);padding:20px 14px}.uxui .nums b{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.05em;line-height:1;display:block;background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}.uxui .nums span{display:block;font-size:12.5px;color:var(--lead);margin-top:6px;line-height:1.35}.uxui .stackrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}.uxui .stackrow span{font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:999px;background:var(--paper);color:var(--ink)}/* fan (from round 2) */.uxui .fanx{position:relative;width:118px;height:84px}.uxui .fanx .tc{position:absolute;inset:0;transition:transform 1s var(--mease),box-shadow .6s;transition-delay:calc(var(--i)*.06s)}.uxui .res__stage .tc.win small{bottom:auto;top:-20px}

@media(prefers-reduced-motion:reduce){.uxui *,.uxui *::before,.uxui *::after{animation:none!important;transition:none!important}
 .uxui .rv,.uxui .c1 .bw,.uxui .c1 .ms__nav,.uxui .c1 .ms__btn,.uxui .c1 .ms__grid img,.uxui .c1__tag,.uxui .cchips div,.uxui .rules li,.uxui .dirs li,.uxui .mail,.uxui .lm i,.uxui .lm__btn,.uxui .srch__hits span,.uxui .brief__q .w,.uxui .otp span b,.uxui .chart i,.uxui .pl{opacity:1!important}
 .uxui .rv,.uxui .c1 .bw,.uxui .c1 .ms__h,.uxui .c1 .ms__p,.uxui .cchips div,.uxui .rules li,.uxui .dirs li,.uxui .mail{transform:none!important}
 .uxui .wmx svg *,.uxui .wf *,.uxui .goal .ico svg *{stroke-dashoffset:0!important}}

/* ---- project 02: website design (moved from the Media page) ---- */
.uxui .cover--2{border-top:1px solid var(--line)}
.uxui .cover__t{font-family:var(--display);font-weight:800;font-size:clamp(36px,6.4vw,84px);letter-spacing:-.045em;line-height:1;margin-top:14px;max-width:16ch;text-wrap:balance}
.uxui .web-strip{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(30px,4vw,48px)}
.uxui .banner{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--paper);box-shadow:0 30px 60px -48px rgba(0,0,0,.5);transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .4s var(--ease)}
.uxui .banner:hover{box-shadow:0 40px 80px -44px rgba(0,0,0,.55)}
.uxui .banner img{width:100%;height:auto;display:block}