.price-sort{margin-inline-start:auto;display:flex;gap:10px;align-items:center;color:#c4d2ef;font-size:13px}.price-sort select{color:#dff8ff;background:#12112b;border:1px solid #76dcff55;border-radius:14px;padding:11px 35px 11px 14px;font:inherit;box-shadow:0 0 20px #76dcff0d}.price-sort select:focus-visible{outline:2px solid #8ce7ff;outline-offset:3px}.filters{flex-wrap:wrap}.studio-player{width:100%;position:relative;background:#05040d;border-radius:18px;overflow:hidden}.studio-player video{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain}.studio-controls{display:flex;gap:10px;align-items:center;padding:13px;background:linear-gradient(100deg,#12142e,#17102c);border-top:1px solid #7de4ff44;direction:ltr}.studio-controls button{border:1px solid #9ceaff55;border-radius:50%;width:36px;height:36px;background:#11132c;color:#b6f3ff;font-size:18px;flex-shrink:0;cursor:pointer}.studio-controls button:hover{box-shadow:0 0 17px #75ddff66}.studio-controls button:focus-visible,.studio-controls input:focus-visible{outline:2px solid #a9f1ff;outline-offset:3px}.studio-time{color:#d6e4ff;font:12px ui-monospace,monospace;white-space:nowrap}.studio-seek{min-width:40px;flex:1;accent-color:#8ee7ff}.studio-volume{width:65px;accent-color:#b39bff}.studio-player:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0}.studio-player:fullscreen video{max-height:calc(100vh - 70px);flex:1}.studio-player:fullscreen .studio-controls{flex-shrink:0}.chat .msg b{unicode-bidi:isolate;display:inline-block;margin-inline-end:6px}.chat .msg{line-height:1.8}/* Glows stay lit instead of pulsing: a blur that animates (or sits on something animating) is recomputed by the graphics card every frame, which froze Art Gallery. */.atelier-relic-hoop,.gallery-button>i,.workshop-portal>i,.gallery-pattern-piece .pattern-symbol,.workshop-object svg,.gallery-mini-spool{animation:none}@media not all and (pointer:coarse){.atelier-relic-hoop,.gallery-button>i,.workshop-portal>i,.gallery-pattern-piece .pattern-symbol,.workshop-object svg,.gallery-mini-spool{filter:drop-shadow(0 0 5px #80dfff) drop-shadow(0 0 9px #9b7fff)!important;opacity:.75!important}}.workshop-portal:nth-child(2n)>i{animation-delay:-3s}.gallery-pattern-piece.piece-two .pattern-symbol{animation-delay:-2s}@keyframes studio-relic-glow{0%,100%{opacity:.3;filter:drop-shadow(0 0 1px #80dfff)}50%{opacity:1;filter:drop-shadow(0 0 9px #80dfff) drop-shadow(0 0 16px #9b7fff)}}@media(prefers-reduced-motion:reduce){.atelier-relic-hoop,.gallery-button>i,.workshop-portal>i,.gallery-pattern-piece .pattern-symbol,.workshop-object svg,.gallery-mini-spool{animation:none}}@media(max-width:600px){.price-sort{margin-inline-start:0;width:100%;justify-content:space-between}.studio-controls{gap:6px;padding:10px}.studio-volume{display:none}.studio-time{font-size:10px}.studio-controls button{width:32px;height:32px}}
.workshop-portal{animation:workshopOrbit 35s linear infinite}@media not all and (pointer:coarse){.workshop-portal{box-shadow:0 0 16px #80dfff40,inset 0 0 12px #a58aff26;opacity:.5}}.workshop-portal.portal-1{animation-delay:0s,-2s}.workshop-portal.portal-2{animation-delay:0s,-4s}.workshop-portal.portal-3{animation-delay:0s,-1s}@keyframes studio-portal-glow{0%,100%{opacity:.2;box-shadow:0 0 3px #80dfff11,inset 0 0 3px #80dfff11}50%{opacity:.8;box-shadow:0 0 28px #80dfff55,inset 0 0 22px #a58aff33}}@media(prefers-reduced-motion:reduce){.workshop-portal{animation:none}}

/* Motion switch (gwen-motion.js): the button beside sound shows a slash while the site's motion is off. */
#motionBtn .motion-off-mark{display:none}
html.gw-calm #motionBtn{opacity:.75}
html.gw-calm #motionBtn .motion-spark{opacity:.5}
html.gw-calm #motionBtn .motion-off-mark{display:block;stroke:#aaa5d6}
@media(pointer:coarse){#motionBtn{display:none}}
/* Turning motion off or on cross-fades the page for a moment instead of jumping. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}
/* First-visit message, centred over a dimmed page so it is read: "Is the site lagging? Pause the animations."
   No blur behind it on purpose: the people it is for have computers that struggle with blur. */
html.gw-tip-open main *,html.gw-tip-open main *::before,html.gw-tip-open main *::after,html.gw-tip-open .foot *{animation-play-state:paused!important}
.gw-motion-tip{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(460px,calc(100vw - 32px));height:fit-content;max-height:calc(100vh - 32px);overflow:auto;padding:34px 32px 30px;border:1px solid rgba(143,230,255,.46);border-radius:24px;background:radial-gradient(ellipse at 100% 0,#6745c838,transparent 55%),radial-gradient(ellipse at 0 100%,#39cee51c,transparent 50%),#090d22;color:#dfe7ff;text-align:center;font:400 15px/1.6 var(--sans);box-shadow:0 0 0 1px #997bff22,0 0 60px #7361ff30,0 30px 100px #000b;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.gw-motion-tip.on{opacity:1;transform:none}
.gw-motion-tip::backdrop{background:rgba(2,4,16,0);transition:background .4s ease}
.gw-motion-tip.on::backdrop{background:rgba(2,4,16,.76)}
.gw-motion-tip:focus{outline:none}
.gw-motion-tip::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(143,230,255,.2);border-radius:18px;pointer-events:none}
.gw-motion-tip-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;border-radius:50%;border:1px solid rgba(143,230,255,.55);background:radial-gradient(circle at 35% 30%,rgba(93,220,255,.38),rgba(122,92,255,.18) 70%);color:#effcff;font-size:23px;text-shadow:0 0 12px #5ddcff;box-shadow:0 0 28px -6px rgba(93,220,255,.6)}
.gw-motion-tip h2{margin:0 0 10px;font:600 23px/1.25 var(--serif);letter-spacing:.05em;text-transform:none;color:#fff;text-shadow:0 0 18px #9682ff50}
.gw-motion-tip p{max-width:36ch;margin:0 auto 24px;color:#bac6ec;font-size:15px;line-height:1.7}
.gw-motion-tip-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.gw-motion-tip-actions button{min-height:46px;padding:12px 22px;border-radius:999px;font:700 12px/1.1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,color .25s,filter .25s}
.gw-motion-tip-pause{border:0;background:linear-gradient(120deg,#5ddcff,#8f7bff);color:#05030c;box-shadow:0 8px 26px -10px rgba(93,220,255,.8)}
.gw-motion-tip-pause:hover{filter:brightness(1.08)}
.gw-motion-tip-keep{border:1px solid rgba(190,215,255,.32);background:transparent;color:#cfd8f5}
.gw-motion-tip-keep:hover{border-color:var(--cyan);color:#fff}
.gw-motion-tip button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
[dir=rtl] .gw-motion-tip h2{font-family:var(--sans);font-weight:800;letter-spacing:0}
[dir=rtl] .gw-motion-tip p{font-size:16px}
[dir=rtl] .gw-motion-tip-actions button{font-size:14px;letter-spacing:0}
@media(max-width:520px){.gw-motion-tip{padding:28px 20px 24px}.gw-motion-tip h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.gw-motion-tip,.gw-motion-tip::backdrop{transition:none}}

/* Five worlds on phones and tablets. With mandatory snapping, iOS Safari pulled a short or slow swipe back to the first
   card, so the carousel felt stuck until it was pushed hard (proximity snapping still did it for short swipes). On touch
   screens it now has no snapping at all: it follows the finger and keeps its momentum, and stops where it is left. It
   scrolls sideways only, and touching a card no longer lights the heavy scissors glow behind the carousel. */
@media(max-width:980px){#arches{overflow-y:hidden;overscroll-behavior-x:contain}}
@media(max-width:980px) and (hover:none){#arches{scroll-snap-type:none}}
@media(hover:none){#collections:has(.arch:is(:hover,:focus-within)) .atelier-shear{opacity:.3;filter:drop-shadow(0 0 12px #77dfff)}}
@media(hover:none) and (max-width:1250px){#collections:has(.arch:is(:hover,:focus-within)) .atelier-shear{opacity:.18}}

/* Customer reviews in "Heard in chat": approved reviews from verified buyers, or an invitation before the first one. */
/* auto-fill keeps the empty columns, so one or two reviews stay card-sized instead of stretching across the page. */
#rvGrid.has-reviews{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.rv-card{--a:#8fe6ff;position:relative;display:flex;flex-direction:column;gap:14px;margin:0;min-width:0;padding:24px 22px 20px;border:1px solid color-mix(in srgb,var(--a) 34%,#35314e);border-radius:22px;background:radial-gradient(120% 80% at 0 0,color-mix(in srgb,var(--a) 12%,transparent),transparent 60%),#0b0d26e6;box-shadow:0 18px 50px -30px #000}
.rv-card::before{content:"";position:absolute;inset:7px;border:1px dashed color-mix(in srgb,var(--a) 22%,transparent);border-radius:16px;pointer-events:none}
.rv-stars{color:#ffd27a;font-size:18px;letter-spacing:3px;text-shadow:0 0 12px #ffcf6a55}
.rv-card blockquote{margin:0;color:#e6ecff;font-size:16px;line-height:1.7;overflow-wrap:anywhere;text-align:left}
/* The quote follows its own language (dir=auto) but keeps the page's side, so it lines up with the rest of the card. */
[dir=rtl] .rv-card blockquote{text-align:right}
.rv-card blockquote::before{content:"“"}.rv-card blockquote::after{content:"”"}
/* A review written in Arabic reads right to left, so its quote marks are mirrored to face the text. */
.rv-card blockquote:dir(rtl)::before{content:"”"}.rv-card blockquote:dir(rtl)::after{content:"“"}
.rv-card figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:auto;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--a) 18%,transparent);font-size:13px;color:#aebbdf}
.rv-card figcaption b{color:#fff;font-size:15px}
.rv-card figcaption em{font-style:normal;padding:3px 9px;border-radius:999px;border:1px solid #6be3b066;color:#8ff0c6;font-size:12px}
.rv-invite{grid-column:1/-1;display:grid;justify-items:center;gap:12px;max-width:620px;margin:0 auto;padding:34px 26px;text-align:center;border:1px dashed #8fe6ff66;border-radius:24px;background:#0b0d26cc}
.rv-invite-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid #8fe6ff88;color:#effcff;font-size:20px;text-shadow:0 0 12px #5ddcff}
.rv-invite h3{margin:0;font:600 22px/1.3 var(--serif);color:#fff;letter-spacing:.04em}
.rv-invite p{margin:0;color:#b9c4ea;line-height:1.7;max-width:46ch}
[dir=rtl] .rv-invite h3{font-family:var(--sans);font-weight:800;letter-spacing:0}
.rv-cta a{color:#8fe6ff;text-decoration:none;border-bottom:1px dashed #8fe6ff77}
.rv-cta a:hover{color:#fff}
@media(max-width:700px){#rvGrid.has-reviews{grid-template-columns:1fr}.rv-invite{padding:26px 18px}}
/* Launch offer (owner, 26 Oct 2026): Gwen's scissors cut the regular price in two next to the launch price.
   Transforms only, played once; the halves rest apart, so "reduce motion" (and the ✦ switch) just skips the cut. */
.snip-price{display:inline-flex;align-items:baseline;gap:.4em;white-space:nowrap;direction:ltr;unicode-bidi:isolate;text-align:left}
.snip-old{position:relative;display:inline-block;padding-right:.95em;font-size:.62em;line-height:1;color:#9aa3cf}
.snip-old .snip-half{display:block}
.snip-old .snip-b{position:absolute;inset:0}
.snip-old .snip-a{clip-path:polygon(0 0,100% 0,100% 40%,0 62%);transform:translate(-.08em,-.16em) rotate(-4deg);animation:snip-a .35s ease-out .65s both}
.snip-old .snip-b{clip-path:polygon(0 62%,100% 40%,100% 100%,0 100%);transform:translate(.08em,.16em) rotate(3deg);animation:snip-b .35s ease-out .65s both}
/* the cut itself: a thin cyan slit along the same line the halves part on, ending at the scissors */
.snip-old::after{content:"";position:absolute;left:-.12em;right:.3em;top:51%;border-top:1.5px solid #5ddcff;transform:rotate(-4.4deg);transform-origin:left;opacity:.9;animation:snip-line .55s ease-in-out .2s both}
.snip-old .snip-sc{position:absolute;right:0;top:12%;width:.85em;height:.85em;fill:none;stroke:#5ddcff;stroke-width:2.2;stroke-linecap:round;animation:snip-cut .55s ease-in-out .2s both}
.snip-new{color:#fff}
@keyframes snip-a{from{transform:none}}
@keyframes snip-b{from{transform:none}}
@keyframes snip-cut{from{transform:translateX(-1.6em);opacity:0}30%{opacity:1}}
@keyframes snip-line{from{transform:rotate(-4.4deg) scaleX(0)}}
@media(prefers-reduced-motion:reduce){.snip-old .snip-a,.snip-old .snip-b,.snip-old .snip-sc,.snip-old::after{animation:none}}
.gallery-meta .snip-old{font-size:.8em}
/* The cart makes every span a 12px block and is narrow: the cut price sits small above the launch price. */
.ci .snip-price{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:inherit;color:inherit}
.ci .snip-old{display:inline-block;font-size:.8em;color:#9aa3cf}
.ci .snip-half{display:block;font-size:inherit;color:inherit}
.ci .snip-new{display:inline;font-size:inherit;color:#fff}
/* The product page styles every span inside .pp-price; the offer keeps its own sizes and colours. */
.pp-price{flex-wrap:wrap}
.pp-price .price .snip-price,.pp-price .price .snip-half,.pp-price .price .snip-new{font-size:inherit;color:inherit}
.pp-price .price .snip-old{font-size:.6em;color:#9aa3cf}
.pp-price .launch-note{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pp-price .launch-badge{padding:3px 11px;border:1.5px dashed #5ddcff;border-radius:999px;font:700 11px var(--sans);letter-spacing:.06em;color:#5ddcff}
.pp-price .launch-until{font-size:13px;color:#b9c4ea}