@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#f5f3eb;--ink:#20211e;--muted:#62635c;--line:#d4d4ca;--orange:#fa5835;--panel:#ebe9e1;--white:#fffdf8;color-scheme:light;font-family:'DM Sans',sans-serif;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #385cff;outline-offset:5px}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}em{font-family:Georgia,serif;font-weight:400}h1,h2{letter-spacing:-.045em;line-height:.98}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(4rem,9.6vw,9.5rem);font-weight:700}h2{font-size:clamp(2.6rem,5.2vw,5.8rem);font-weight:500}h3{font-size:clamp(2rem,3.5vw,3.6rem);letter-spacing:-.055em;font-weight:600}p{line-height:1.6}a,button{touch-action:manipulation}section[id],article[id]{scroll-margin-top:2rem}.header{margin:0 4%;min-height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:1.65rem;font-weight:700;letter-spacing:-1.4px;min-height:48px}.brand-light{font-weight:400;margin-left:3px}.brand-dot{font-size:.6rem;vertical-align:top;margin-left:3px}.brand-mark{width:36px;height:36px;background:var(--orange);border-radius:9px;font-size:2rem;line-height:30px;text-align:center;color:#20211e;position:relative}.brand-mark span{font-size:.8rem;position:absolute;right:2px;top:0}.header nav{display:flex;align-items:center;gap:30px;font-size:.88rem}.header nav a{display:inline-flex;align-items:center;min-height:48px;gap:24px}.header nav a:hover,.text-link:hover{color:var(--orange)}.theme-toggle{width:48px;min-height:48px;border:1px solid var(--line);border-radius:50%;background:none;font-size:1.5rem}.contact-nav{border-bottom:1px solid var(--ink)}.hero{padding:34px 4% 0}.hero-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}.eyebrow,.edition,.index-label,.stage-note,.stage-stamp,.visual-label,.product-meta,.ticker,.footer-bottom{font-size:.69rem;letter-spacing:.1em;font-weight:600}.status-dot{display:inline-block;background:var(--orange);width:7px;height:7px;border-radius:50%;margin-right:8px}.edition{text-align:right;line-height:1.5}.hero h1{position:relative;max-width:1100px}.hero h1 em{font-size:.83em;letter-spacing:-.07em}.asterisk{display:inline-block;font-family:Arial,sans-serif;color:var(--orange);font-size:.65em;vertical-align:top;margin-left:30px;animation:turn 32s linear infinite}.hero-bottom{display:flex;align-items:center;justify-content:space-between;margin:32px 0 28px;gap:25px}.hero-bottom p{font-size:1rem}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;border-radius:100px;padding:15px 24px;font-size:.88rem;font-weight:500;border:1px solid transparent;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button span{font-size:1.35rem}.ink{background:var(--ink);color:var(--paper)}.button.orange{background:var(--orange);color:#1e1e1a}.index-label{color:var(--muted)}.product-stage{height:435px;position:relative;overflow:hidden;background:var(--panel);border-radius:12px 12px 0 0;isolation:isolate}.stage-lines{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:60px 60px;opacity:.4;mask-image:linear-gradient(transparent,#000)}.stage-note{position:absolute;top:28px;left:28px;color:var(--muted);line-height:1.6}.stage-stamp{position:absolute;right:28px;bottom:28px;line-height:1.6;text-align:right}.floating-card{position:absolute;box-shadow:0 14px 30px #14141c23;transition:transform .4s;will-change:transform;border-radius:16px;overflow:hidden}.floating-card:hover,.floating-card:focus-visible{transform:translateY(-14px) rotate(0);z-index:5}.mini-bar{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:600;padding:20px 22px}.card-knot{width:250px;left:15%;top:65px;transform:rotate(-11deg);background:#414de1;color:white}.knot-art{width:100%;height:200px;padding:0 15px}.knot-art path{fill:none;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}.card-caption{display:flex;justify-content:space-between;padding:17px 20px;font-size:.75rem}.card-fable{width:310px;left:calc(50% - 155px);top:34px;transform:rotate(2deg);background:#21162e;color:#fff;z-index:2}.card-fable img{height:267px;width:100%;object-fit:cover;object-position:62% center}.fable-card-title{position:absolute;left:20px;bottom:67px;font-size:2rem;font-weight:700;letter-spacing:-.08em;text-shadow:0 2px 20px #000}.fable-card-title span{color:#d1b5ff;margin-left:4px}.card-custorra{width:250px;right:14%;top:75px;transform:rotate(11deg);background:#c7dfb3;color:#233b27}.paper-sheet{margin:0 20px 20px;padding:20px;background:#fffef6;border-radius:6px;min-height:230px}.paper-icon{display:block;font-size:1.3rem;margin-bottom:14px}.paper-sheet strong{font-size:1.4rem;font-weight:500;line-height:1.1;letter-spacing:-.04em}.paper-rule{display:block;height:3px;background:#d2d5c8;margin:16px 0 8px}.paper-rule.short{width:60%;margin-top:8px}.paper-tag{display:block;font-size:.55rem;margin-top:20px;letter-spacing:.1em}.ticker{display:flex;justify-content:space-around;gap:30px;padding:19px 0;background:var(--orange);color:#251b14;overflow:hidden;white-space:nowrap;font-size:.72rem}.section{padding:90px 6%}.section-heading{display:grid;grid-template-columns:1fr 2.3fr 1fr;gap:30px;align-items:start;margin-bottom:38px}.section-heading h2{font-size:clamp(2.5rem,4vw,4.5rem)}.section-heading>p:last-child{font-size:.9rem;color:var(--muted);padding-top:8px}.filters{display:flex;gap:8px;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:30px;flex-wrap:wrap}.filters button{border:1px solid var(--line);border-radius:30px;background:transparent;padding:12px 20px;min-height:48px;font-size:.85rem}.filters button span{font-size:.6rem;margin-left:10px}.filters button.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}.product{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white)}.product-fable{display:grid;grid-template-columns:1.15fr 1fr;margin-bottom:24px}.product-copy{padding:32px}.product-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:.04em;font-size:.61rem;margin-bottom:25px}.pill{border:1px solid var(--line);padding:6px 10px;border-radius:30px;white-space:nowrap;letter-spacing:0}.product-copy h3{margin-bottom:16px}.product-copy h3 span{margin-left:12px;color:#8564ad;font-size:.7em}.product-copy p{max-width:36ch;font-size:1.05rem;margin-bottom:18px}.product-copy .small-copy{font-size:.87rem;color:var(--muted)}.product-copy .button{margin-top:12px}.fable-visual{position:relative;background:#352142;min-height:480px;overflow:hidden}.feature-art{width:100%;height:100%;position:absolute;object-fit:cover;object-position:65%;opacity:.55}.phone-screen{position:relative;width:190px;border:6px solid #18151c;border-radius:25px;margin:38px auto 58px;box-shadow:0 20px 50px #0009;transform:rotate(-6deg)}.visual-label{position:absolute;bottom:20px;left:24px;color:#fff;font-size:.6rem}.product-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.mini-visual{height:300px;position:relative;padding:35px;display:flex;align-items:center;gap:25px;overflow:hidden}.mini-visual img{width:100px;height:100px;border-radius:24px;transform:rotate(-10deg);box-shadow:0 10px 20px #0002}.knot-visual{background:#404bd6;color:#fff}.custorra-visual{background:#d0dfba;color:#23402a}.custorra-visual .visual-label{color:#23402a}.visual-word{font-family:'Barlow Condensed',Impact,sans-serif;font-size:3.7rem;line-height:.92;letter-spacing:-.04em}.visual-word em{font-size:.7em}.text-link{display:inline-flex;gap:24px;align-items:center;border-bottom:1px solid currentColor;min-height:48px;font-size:.88rem}.compact .product-copy p{min-height:3.2em}.studio{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.studio h2{margin-top:35px;font-size:clamp(2.7rem,5vw,5rem)}.studio-symbol{font-size:8rem;line-height:1;color:var(--orange);margin-top:25px}.studio-copy{padding-top:50px}.studio-copy p{margin-bottom:22px;color:var(--muted);max-width:42ch}.studio-copy .lead{font-size:1.6rem;line-height:1.4;color:var(--ink);letter-spacing:-.03em}.hello{background:var(--orange);color:#251e16}.hello h2{font-size:clamp(3.5rem,7.6vw,8rem);margin:30px 0}.hello h2>span{float:right}.hello-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px}.hello .ink{background:#251e16;color:#fff6e8}.hello-bottom p{font-size:.9rem}footer{padding:32px 4% 20px;background:#20211e;color:#f5f3eb;overflow:hidden}.footer-word{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(4rem,16.5vw,17rem);letter-spacing:-.055em;font-weight:600;line-height:1;display:flex;justify-content:space-between;align-items:center;white-space:nowrap;padding-bottom:30px}.footer-word span{font-family:Arial;font-size:.65em;color:var(--orange)}.footer-bottom{border-top:1px solid #ffffff40;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.58rem}.footer-bottom a{display:flex;align-items:center;min-height:48px}.skip{position:absolute;left:20px;top:-100px;padding:15px;background:var(--ink);color:var(--paper);z-index:99}.skip:focus{top:10px}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.product[hidden]{display:none}.product-pair:has(>.product[hidden]){grid-template-columns:1fr}.product-pair:has(>.product[hidden])>.product:not([hidden]){display:grid;grid-template-columns:1fr 1fr}.product-pair:has(>.product[hidden]) .mini-visual{height:100%;min-height:300px}.dark{--paper:#1c1e1b;--ink:#f1f0e7;--muted:#b4b6ab;--line:#484c42;--panel:#282c25;--white:#232720;color-scheme:dark}.dark .hello{--ink:#251e16}.dark .brand-mark{color:#20211e}.dark .pill{color:var(--ink)}
/* Product detail */
.detail-hero{padding:55px 6% 65px;background:#21162d;color:#faf5ff;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}.detail-hero h1{font-family:'DM Sans',sans-serif;font-size:clamp(3rem,6vw,6.5rem);margin:25px 0;line-height:1.02;letter-spacing:-.07em}.detail-hero h1 em{color:#d2bbef}.detail-hero p{max-width:43ch;color:#d7cadd}.detail-art{border-radius:16px;width:100%;aspect-ratio:1;object-fit:cover;object-position:66% center}.detail-hero .button{margin-top:28px}.detail-features{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-bottom:1px solid var(--line)}.detail-features h2{font-size:2.2rem;margin:20px 0}.detail-features p{color:var(--muted);font-size:.95rem}.feature-number{font-size:.75rem;color:var(--muted)}.join-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}.join-layout h2{margin:24px 0}.join-layout p{color:var(--muted);max-width:38ch}.steps{list-style:none;padding:0;margin:0;counter-reset:step}.steps li{counter-increment:step;border-top:1px solid var(--line);padding:24px 0;display:grid;grid-template-columns:40px 1fr;gap:14px}.steps li:before{content:'0' counter(step);font-size:.75rem;padding-top:7px;color:var(--muted)}.steps h3{font-size:1.4rem;letter-spacing:-.03em;margin-bottom:8px}.steps p{font-size:.9rem;margin-bottom:10px}.faq{padding-top:0}.faq h2{font-size:2.6rem;margin-bottom:30px}.faq details{border-top:1px solid var(--line);padding:8px 0}.faq summary{padding:17px 30px 17px 0;cursor:pointer;font-size:1.1rem;min-height:56px}.faq details p{max-width:70ch;color:var(--muted);padding:0 0 20px}.back-link{display:inline-flex;min-height:48px;align-items:center;font-size:.8rem;gap:10px}.detail-hero .eyebrow{color:#d2bbef}
img.phone-screen{height:auto}.product-fable{align-items:stretch}.product-fable .product-copy{display:flex;flex-direction:column;justify-content:center}.product-fable .product-copy .button{align-self:flex-start}.detail-art{height:auto}.brand-mark{font-size:30px!important;line-height:30px}.brand-mark span{font-size:12px}.button>span{flex-shrink:0}html.large-text .button{border-radius:22px}html.large-text .button>span{display:none}@media(max-width:700px){.card-knot,.card-custorra{display:none}.card-fable{transform:rotate(0deg)}.product-stage{height:350px}}
@keyframes turn{to{transform:rotate(360deg)}}
@media(min-width:1600px){body{max-width:1800px;margin:auto}}
@media(max-width:1000px){.card-knot{left:7%}.card-custorra{right:7%}.section-heading{grid-template-columns:1fr 2fr}.section-heading>p:last-child{grid-column:2}.section{padding:65px 5%}.index-label{display:none}.mini-visual{padding:25px;gap:18px}.mini-visual img{width:75px;height:75px}.visual-word{font-size:3.1rem}.product-copy{padding:26px}.studio{gap:35px}.detail-hero{gap:30px}}
@media(max-width:700px){.header{min-height:85px;gap:10px;flex-wrap:wrap;padding:15px 0}.brand{font-size:1.35rem}.brand-mark{width:30px;height:32px;font-size:1.7rem}.header nav{gap:10px;font-size:.73rem;flex-wrap:wrap}.header nav a{min-width:48px}.header .contact-nav{display:none}.theme-toggle{width:48px}.hero{padding-top:25px}.hero-top{gap:20px}.edition{display:none}.hero h1{font-size:clamp(3.5rem,12vw,5.7rem)}.hero h1 em{font-size:.8em}.asterisk{margin-left:8px;font-size:.5em}.hero-bottom{flex-wrap:wrap;gap:16px;margin:24px 0}.hero-bottom p{font-size:.9rem}.button{font-size:.83rem;gap:20px}.product-stage{height:350px}.stage-note{display:none}.stage-stamp{display:none}.card-fable{width:210px;left:calc(50% - 105px);top:28px}.card-fable img{height:225px}.fable-card-title{font-size:1.65rem;bottom:67px;left:15px}.card-caption{font-size:.65rem;padding:15px}.card-knot{width:180px;left:-54px;top:68px}.card-custorra{width:180px;right:-54px;top:75px}.mini-bar{font-size:.95rem;padding:16px}.paper-sheet{margin:0 15px 15px;padding:14px;min-height:205px}.paper-sheet strong{font-size:1rem}.knot-art{height:180px}.ticker{justify-content:flex-start;padding-left:20px;font-size:.65rem}.section-heading{display:block}.section-heading h2{margin:24px 0}.section-heading>p:last-child{font-size:.88rem}.section{padding:55px 5%}.product-fable,.product-pair{display:block}.product-pair .product{margin-top:24px}.product-fable .product-copy{padding:24px}.fable-visual{min-height:420px}.phone-screen{width:156px;margin-top:30px}.product-meta{margin-bottom:18px}.product-copy h3{font-size:2.6rem}.product-copy p{font-size:1rem}.mini-visual{height:270px;padding:30px;justify-content:center;gap:28px}.mini-visual img{width:85px;height:85px}.visual-word{font-size:3.5rem}.compact .product-copy p{min-height:0}.studio{display:block}.studio h2{font-size:3.2rem}.studio-symbol{font-size:5rem;margin-top:25px}.studio-copy{padding-top:25px}.studio-copy .lead{font-size:1.4rem}.hello h2{font-size:3.8rem}.hello h2>span{display:none}.hello-bottom{display:block}.hello-bottom .button{margin-top:25px}.footer-word{font-size:17vw;padding:15px 0 25px}.footer-bottom{flex-wrap:wrap;gap:8px}.footer-bottom>span:nth-child(2){display:none}.product-pair:has(>.product[hidden])>.product:not([hidden]){display:block}.detail-hero{display:flex;flex-direction:column;padding:30px 5% 45px;gap:30px}.detail-hero h1{font-size:3.5rem}.detail-art{max-height:420px}.detail-features{display:block}.detail-features>div+div{margin-top:35px}.join-layout{display:block}.steps{margin-top:35px}.faq{padding-top:5px}.filters button{padding:12px 16px}.header nav a{gap:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:700px){html.large-text .hero h1,html.large-text .detail-hero h1{font-size:2rem!important}html.large-text h2,html.large-text .studio h2,html.large-text .hello h2{font-size:1.6rem!important}html.large-text h3,html.large-text .product-copy h3{font-size:1.65rem!important}html.large-text .visual-word{font-size:1.8rem!important}html.large-text .hello-bottom .button{font-size:.7rem}html.large-text .footer-word{font-size:1.6rem!important}html.large-text .visual-label{position:static;flex-basis:100%;line-height:1.7}html.large-text .mini-visual{padding:24px!important}html.large-text .fable-visual .visual-label{position:absolute;right:20px;left:20px;bottom:15px}html.large-text .product-meta{overflow-wrap:anywhere}html.large-text .hero h1 em{letter-spacing:-.08em}html.large-text .asterisk{display:none}}
/* Text zoom preserves content flow instead of forcing fixed card heights. */
html.large-text .hero h1,html.large-text .detail-hero h1{font-size:3rem}html.large-text .section-heading,html.large-text .studio,html.large-text .detail-features,html.large-text .join-layout,html.large-text .product-fable,html.large-text .product-pair,html.large-text .detail-hero{display:block}html.large-text .header,html.large-text .hero-bottom,html.large-text .hello-bottom{flex-wrap:wrap}html.large-text .header nav{flex-wrap:wrap}html.large-text .product-stage{display:none}html.large-text .mini-visual{height:auto;min-height:320px;flex-wrap:wrap;padding-bottom:75px}html.large-text .visual-word{font-size:2.5rem}html.large-text h2{font-size:2.5rem}html.large-text .detail-art{max-width:600px;margin-top:30px}html.large-text .steps{margin-top:35px}html.large-text .footer-word{white-space:normal;font-size:3rem}html.large-text .hello-bottom .button{overflow-wrap:anywhere}html.large-text .section-heading h2{margin:25px 0}html.large-text .product-pair .product{margin-top:24px}html.large-text .button{max-width:100%;flex-wrap:wrap}html.large-text .brand{font-size:1.1rem}html.large-text .section{padding-left:5%;padding-right:5%}html.large-text .detail-features>div{margin-bottom:35px}

/* ==========================================================================
   Additions, 27 Oct 2026 (Claude). Everything below layers on top of the
   original design. Nothing above this line was changed.
   ========================================================================== */

/* Fix: show Knotwork and Custorra cards on phones (the original phone
   positions further down were being cancelled by an earlier display:none). */
@media(max-width:700px){
  .card-knot,.card-custorra{display:block}
  .card-knot{transform:rotate(-9deg)}
  .card-custorra{transform:rotate(9deg)}
  .header .contact-nav{display:inline-flex}
}
@media(max-width:420px){.header nav a[href="#studio"]{display:none}}

/* Smooth page-to-page morph (cross-document view transitions) */
@view-transition{navigation:auto}
.header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
::view-transition-group(fable-art){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* Scroll progress line */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;background:var(--orange);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* Hero: one orchestrated entrance */
.hero h1{animation:rise .9s cubic-bezier(.2,.8,.2,1) .05s backwards}
.hero-bottom{animation:rise .9s cubic-bezier(.2,.8,.2,1) .2s backwards}
.card-fable{animation:deal-center .9s cubic-bezier(.2,.8,.2,1) .35s backwards}
.card-knot{animation:deal-left 1s cubic-bezier(.2,.8,.2,1) .5s backwards}
.card-custorra{animation:deal-right 1s cubic-bezier(.2,.8,.2,1) .5s backwards}
.knot-art path{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.4s cubic-bezier(.6,0,.2,1) 1s backwards}
.knot-art path:nth-of-type(2){animation-delay:1.15s}
.knot-art path:nth-of-type(3){animation-delay:1.3s}
@keyframes rise{from{opacity:0;translate:0 26px}}
@keyframes deal-center{from{translate:0 120px}}
@keyframes deal-left{from{translate:min(28vw,340px) 90px;rotate:11deg}}
@keyframes deal-right{from{translate:max(-28vw,-340px) 90px;rotate:-11deg}}
@keyframes draw{from{stroke-dashoffset:1}}

/* Hero: cards lean toward the cursor, with a soft light that follows it */
.product-stage{--mx:0;--my:0}
.product-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),color-mix(in srgb,var(--orange) 22%,transparent),transparent 70%)}
.product-stage:hover::after{opacity:1}
@media (pointer:fine){
  .card-knot{translate:calc(var(--mx)*-26px) calc(var(--my)*-18px)}
  .card-fable{translate:calc(var(--mx)*14px) calc(var(--my)*10px)}
  .card-custorra{translate:calc(var(--mx)*-30px) calc(var(--my)*-20px)}
  .floating-card{transition:transform .4s,translate .25s ease-out}
}

/* Ticker: a real, endless moving strip */
.ticker.is-moving{display:block;padding-left:0}
.ticker-track{display:flex;width:max-content;animation:ticker 38s linear infinite}
.ticker-track>span{padding:0 22px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Scroll-linked motion, only where the browser supports it.
   Nothing starts hidden: elements only move or turn, so the page reads fully at rest. */
@supports (animation-timeline: view()){
  .scroll-progress{animation:progress linear both;animation-timeline:scroll(root)}
  .product{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .phone-screen{animation:phone-lift linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
  .mini-visual img{animation:icon-turn linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  .visual-word{animation:word-slide linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .studio-symbol{animation:spin-scroll linear both;animation-timeline:view()}
  .footer-word{animation:footer-rise linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  .detail-art{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
@keyframes progress{to{transform:scaleX(1)}}
@keyframes settle{from{scale:.94;translate:0 40px}}
@keyframes phone-lift{from{translate:0 70px;rotate:-8deg}}
@keyframes icon-turn{from{rotate:-24deg;scale:.85}}
@keyframes word-slide{from{translate:0 34px}}
@keyframes spin-scroll{from{rotate:-120deg}to{rotate:120deg}}
@keyframes footer-rise{from{translate:0 35%;letter-spacing:-.02em}}

/* Knotwork: play a puzzle right on the site */
.product-links{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center}
.try-puzzle{background:none;border:0;border-bottom:1px solid currentColor;padding:0;font-size:.88rem;display:inline-flex;gap:14px;align-items:center;min-height:48px;color:#414de1}
.dark .try-puzzle{color:#9fa6ff}
.try-puzzle:hover{color:var(--orange)}
.try-puzzle .spark{display:inline-block;transition:rotate .5s}
.try-puzzle:hover .spark{rotate:180deg}
.puzzle-dialog{border:0;padding:0;border-radius:22px;background:var(--paper);color:var(--ink);width:min(460px,calc(100vw - 32px));box-shadow:0 40px 90px -20px #0007;overflow:hidden}
.puzzle-dialog::backdrop{background:color-mix(in srgb,#20211e 62%,transparent);backdrop-filter:blur(6px)}
.puzzle-dialog[open]{animation:pop-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop-in{from{opacity:0;scale:.94;translate:0 16px}}
.pz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 22px 14px}
.pz-head h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:2.4rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.pz-head p{font-size:.85rem;color:var(--muted);margin-top:6px;line-height:1.45}
.pz-close{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:50%;background:none;font-size:1.1rem}
.pz-board{display:block;width:calc(100% - 44px);margin:0 22px;aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;border-radius:16px}
.pz-foot{padding:14px 22px 22px;display:grid;gap:12px}
.pz-status{font-size:.88rem;min-height:1.6em}
.pz-status a{color:#414de1;font-weight:600;border-bottom:1px solid currentColor}
.dark .pz-status a{color:#9fa6ff}
.pz-actions{display:flex;gap:8px;flex-wrap:wrap}
.pz-actions button{border:1px solid var(--line);border-radius:30px;background:transparent;padding:10px 16px;min-height:44px;font-size:.82rem}
.pz-actions button:hover{border-color:var(--ink)}
.pz-board.solved .gem{animation:gem-pop .6s ease both}
@keyframes gem-pop{50%{scale:1.2}}
.gem{transform-box:fill-box;transform-origin:center}

/* Footer: privacy links */
.footer-links{display:flex;flex-wrap:wrap;gap:0 22px}
.footer-links a:hover{color:var(--orange)}

/* 404 page */
.lost{padding:70px 6% 90px;display:grid;gap:26px;justify-items:start}
.lost h1{font-size:clamp(7rem,22vw,20rem);line-height:.85}
.lost h1 span{font-family:Arial,sans-serif;color:var(--orange);font-size:.5em;vertical-align:top;display:inline-block;animation:turn 32s linear infinite}
.lost p{font-size:1.2rem;max-width:34ch;color:var(--muted)}