/* Native DOT adaptations of the supplied Bencho interaction references. */
.header .theme-toggle{position:relative;display:block;width:70px;height:40px;padding:0;border-radius:24px;background:var(--soft);border:1px solid var(--line);overflow:visible;isolation:isolate;touch-action:pan-y}.theme-toggle::before{content:'';position:absolute;left:5px;top:5px;width:28px;height:28px;border-radius:50%;background:#be1e2d;transition:transform .6s cubic-bezier(.22,1.4,.4,1);z-index:-1}.header .liquid-thumb{position:absolute;left:5px;top:5px;width:28px;height:28px;border-radius:50%;color:#fff;background:#be1e2d;transition:transform .48s cubic-bezier(.22,1.4,.4,1)}.header .liquid-thumb svg{width:17px;height:17px}[data-theme=dark] .header .liquid-thumb,[data-theme=dark] .theme-toggle::before{transform:translateX(30px)}.theme-toggle.is-liquid .liquid-thumb{animation:dot-liquid .55s both}@keyframes dot-liquid{0%,100%{border-radius:50%;scale:1 1}40%{border-radius:45%;scale:1.35 .72}70%{scale:.9 1.08}}
.project-grid.dot-accordion{display:flex;gap:10px;height:540px;isolation:isolate}.dot-accordion .project{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:10px;transition:flex-grow .7s cubic-bezier(.22,1,.36,1);background:var(--soft);grid-column:auto}.dot-accordion .project[hidden]{display:none}.dot-accordion .project.is-active{flex-grow:4.5}.dot-accordion .project-open{height:100%;position:absolute;inset:0}.dot-accordion .project-image,.dot-accordion .project-featured .project-image{height:100%;aspect-ratio:auto;border-radius:0}.dot-accordion .project-image img,.dot-accordion .project-featured .project-image img{height:100%;width:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1);background:var(--soft)}.dot-accordion .project.is-active img{transform:scale(1.015)}.dot-accordion .project-open::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,#000b);pointer-events:none}.dot-accordion .project-link{display:none}.dot-accordion .project-caption{position:absolute;bottom:27px;left:22px;right:22px;margin:0;display:block;pointer-events:none;color:#fff;z-index:1}.dot-accordion .project-caption h3{color:#fff;font-size:30px;line-height:1.05;margin:7px 0 0;text-wrap:balance}.dot-accordion .project-category{color:#fff;opacity:.8;font-size:12px;letter-spacing:.06em;text-transform:uppercase}.dot-accordion .project-caption p{color:#fff;font-size:18px;line-height:1.2;margin-top:9px}.dot-accordion .project-external{pointer-events:auto;display:inline-flex;color:#fff;min-height:36px;margin-top:9px;font-size:15px}.dot-accordion .project-context{display:none}.dot-accordion .project:not(.is-active) .project-caption{left:14px;right:14px;bottom:26px;transform:none;writing-mode:horizontal-tb}.dot-accordion .project:not(.is-active) .project-caption h3{font-size:20px;white-space:normal;max-height:none;overflow:visible;text-overflow:clip;line-height:1.15}.dot-accordion .project:not(.is-active) .project-caption p,.dot-accordion .project:not(.is-active) .project-external,.dot-accordion .project:not(.is-active) .project-category{display:none}.dot-accordion .project-open:focus-visible{outline:3px solid #be1e2d;outline-offset:-5px;z-index:2;border-radius:10px}.accordion-context{display:flex;justify-content:space-between;gap:30px;padding-top:20px;font-size:19px;line-height:1.45;min-height:90px;color:var(--muted)}.accordion-description{max-width:70ch}.accordion-hint{font-size:14px;flex:none;max-width:22ch;text-align:right}.dot-accordion .cms-empty{margin:auto}
.inspiration{border-top:1px solid var(--line)}.inspiration .section-heading{margin-bottom:48px}.inspiration .section-heading h2{font-size:clamp(43px,5.2vw,76px)}.inspiration-swatches{display:flex;gap:9px;min-height:300px}.inspiration-swatch{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}.inspiration-colour{position:relative;display:block;width:100%;height:280px;border:0;border-radius:14px;background:var(--colour);overflow:hidden;color:var(--on-colour);transition:border-radius .3s,transform .35s;box-shadow:inset 0 0 0 1px #0000000c}.inspiration-colour:hover{border-radius:70px 14px 14px 14px;transform:translateY(-5px)}.inspiration-colour span{position:absolute;bottom:18px;left:0;right:0;font:500 16px Afacad,Arial,sans-serif;letter-spacing:.04em}.inspiration-colour::before{content:'↗';position:absolute;top:14px;right:18px;font-size:24px;opacity:0;transition:opacity .2s}.inspiration-colour:hover::before{opacity:1}.colour-lock{min-height:44px;display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:0;color:var(--muted);font:inherit;font-size:14px;border-radius:8px}.colour-lock svg{width:14px;height:14px}.colour-lock[aria-pressed=true]{color:var(--ink);background:var(--soft)}.palette-controls{display:flex;align-items:center;gap:24px;margin-top:26px;flex-wrap:wrap}.palette-generate{min-height:52px}.palette-generate>span{font-size:26px;line-height:1}.palette-copy-all{background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;color:var(--ink);font:inherit;font-size:18px;min-height:44px}.palette-copy-all:hover{border-color:var(--red)}.palette-mood{margin-left:auto;color:var(--muted);font-size:14px}.palette-help{margin-top:23px;color:var(--muted);font-size:16px}.inspiration-status{min-height:24px;margin-top:8px;font-size:16px;color:var(--ink)}
.dot-companion{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:24;display:flex;flex-direction:column;align-items:flex-start;gap:14px}.dot-character{position:relative;width:76px;height:76px;border:0;border-radius:50%;padding:0;background:transparent;filter:drop-shadow(0 4px 8px #0002);touch-action:manipulation}.dot-character svg{width:100%;height:100%;display:block;transition:transform .4s cubic-bezier(.22,1.6,.4,1)}.dot-character:hover svg,.dot-character[aria-expanded=true] svg{transform:rotate(-7deg) scale(1.05)}.dot-face,.dot-pupils{transform:translate(var(--eye-x,0px),var(--eye-y,0px));transition:transform .12s ease-out;transform-origin:center}.dot-invite{position:absolute;left:85px;top:24px;padding:5px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:30px;white-space:nowrap;font:500 14px/1.3 Afacad,Arial,sans-serif;opacity:0;transform:translateX(-5px);transition:opacity .2s,transform .2s;pointer-events:none}.dot-character:hover .dot-invite,.dot-character:focus-visible .dot-invite{opacity:1;transform:none}.dot-character[aria-expanded=true] .dot-invite{opacity:0}.dotip-bubble{position:relative;width:min(330px,calc(100vw - 40px));padding:21px 23px 15px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px 20px 20px 5px;box-shadow:0 16px 55px #00000018;max-height:calc(100svh - 140px);overflow-y:auto}.dotip-bubble[hidden]{display:none}.dotip-top,.dotip-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}.dotip-top{font-size:13px;letter-spacing:.1em;font-weight:600}.dotip-top>span>span{color:var(--red);font-size:21px;margin-left:4px}.dotip-close{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;min-width:44px;min-height:44px;margin:-11px -12px -6px 0;border-radius:50%}.dotip-close:hover{background:var(--soft)}.dotip-greeting{font-size:14px;color:var(--muted);margin-top:16px}.dotip-text{font-size:25px;line-height:1.2;letter-spacing:-.02em;margin:8px 0 22px;text-wrap:pretty}.dotip-bottom{border-top:1px solid var(--line);padding-top:9px}.dotip-count{font-size:12px;color:var(--muted)}.dotip-next{background:transparent;border:0;color:var(--ink);font:500 16px Afacad,Arial,sans-serif;min-height:44px}.dotip-next span{margin-left:10px;color:var(--red)}body.modal-open .dot-companion,body:has(.mobile-nav.open) .dot-companion{visibility:hidden}
@media(min-width:1440px){.project-grid.dot-accordion{height:600px}}@media(max-width:1000px){.project-grid.dot-accordion{height:460px}.dot-accordion .project.is-active{flex-grow:5}.dot-accordion .project-caption{left:18px;right:18px}.dot-accordion .project-caption h3{font-size:26px}.dot-accordion .project:not(.is-active) .project-caption{left:10px;right:10px}.dot-accordion .project:not(.is-active) .project-caption h3{font-size:16px}.inspiration-colour{height:230px}}
@media(max-width:760px){.header .theme-toggle{width:64px;height:36px}.header .liquid-thumb{left:4px;top:4px;width:26px;height:26px}.theme-toggle::before{left:4px;top:4px;width:26px;height:26px}[data-theme=dark] .header .liquid-thumb,[data-theme=dark] .theme-toggle::before{transform:translateX(28px)}.project-grid.dot-accordion{flex-direction:column;height:720px;gap:7px}.dot-accordion .project.is-active{flex-grow:5}.dot-accordion .project-caption{bottom:18px;left:20px;right:20px}.dot-accordion .project:not(.is-active) .project-caption{writing-mode:horizontal-tb;transform:none;left:20px;right:15px;bottom:50%;translate:0 50%}.dot-accordion .project:not(.is-active) .project-caption h3{margin:0;font-size:20px;white-space:normal;max-height:none}.dot-accordion .project-open::after{background:linear-gradient(transparent,#000b)}.dot-accordion .project:not(.is-active) .project-open::after{background:#0007}.dot-accordion .project-image img{object-position:center 44%}.accordion-context{display:block;font-size:17px;min-height:0}.accordion-hint{text-align:left;margin-top:10px;max-width:none;font-size:13px}.inspiration .section-heading{margin-bottom:30px}.inspiration-swatches{gap:5px;min-height:220px}.inspiration-colour{height:210px;border-radius:9px}.inspiration-colour span{font-size:11px;letter-spacing:0;bottom:14px}.inspiration-colour:hover{border-radius:35px 9px 9px 9px;transform:none}.colour-lock{font-size:0;gap:0}.colour-lock svg{width:17px;height:17px}.palette-controls{gap:18px}.palette-mood{width:100%;margin:0}.palette-help{font-size:15px;line-height:1.4}.dot-companion{left:14px;bottom:max(14px,env(safe-area-inset-bottom))}.dot-character{width:62px;height:62px}.dotip-bubble{width:min(320px,calc(100vw - 28px))}.dot-invite{left:70px;top:18px}.dotip-text{font-size:23px}}
@media(prefers-reduced-motion:reduce){.dot-accordion .project,.dot-accordion img,.dot-character svg,.dot-face,.dot-pupils,.inspiration-colour,.theme-toggle::before,.header .liquid-thumb{transition:none!important}.theme-toggle.is-liquid .liquid-thumb{animation:none}.dot-character:hover svg,.dot-character[aria-expanded=true] svg{transform:none}}
/* Two opaque drops merge while one follows the other; icons stay sharp above. */
.theme-toggle::before{display:none}.header .liquid-thumb{background:transparent;z-index:1}.liquid-track{position:absolute;inset:0;filter:url(#dot-goo);pointer-events:none}.liquid-blob,.liquid-trail{position:absolute;left:5px;top:5px;width:28px;height:28px;background:#be1e2d;border-radius:50%;transition:transform .44s cubic-bezier(.22,1.3,.4,1)}.liquid-trail{width:22px;height:22px;left:8px;top:8px;transition-duration:.7s}[data-theme=dark] .liquid-blob,[data-theme=dark] .liquid-trail{transform:translateX(30px)}body:has(.menu[aria-expanded=true]) .dot-companion{visibility:hidden}.dotip-bubble:focus{outline:none}.inspiration-status{overflow-wrap:anywhere;user-select:text}.palette-generate:disabled{opacity:.65;cursor:wait}.colour-lock:disabled{cursor:wait}
@media(max-width:760px){.liquid-blob{left:4px;top:4px;width:26px;height:26px}.liquid-trail{left:7px;top:7px;width:20px;height:20px}[data-theme=dark] .liquid-blob,[data-theme=dark] .liquid-trail{transform:translateX(28px)}}
@media(prefers-reduced-motion:reduce){.liquid-blob,.liquid-trail{transition:none!important}}
/* A short visual hello, once per tab; it is silent until a visitor interacts. */
.header .sound-toggle{display:grid;place-items:center;flex:none;width:36px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);padding:0}.sound-toggle:hover{color:var(--ink);background:var(--soft)}.sound-slash{display:none}.sound-toggle[aria-pressed=false] .sound-slash{display:block}.sound-toggle[aria-pressed=false] .sound-waves{display:none}.header-actions{gap:9px}
.dot-invite{pointer-events:auto;white-space:normal;text-align:left;width:max-content;max-width:220px;top:0;padding:12px 16px;border-radius:17px 17px 17px 3px;line-height:1.3;box-shadow:0 5px 20px #0000000a}.dot-invite strong{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}.dot-invite>span{display:block;max-width:24ch;color:var(--muted);font-size:14px}.dot-companion.is-introducing .dot-invite{opacity:1;transform:none}.dot-companion.is-introducing .dot-character>svg{animation:dot-hello 1.5s .5s both;transform-origin:50% 85%}.dot-companion.is-introducing .dot-eyes{animation:dot-blink 2.3s .5s both;transform-box:view-box;transform-origin:50px 44px}@keyframes dot-hello{0%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(3deg)}}@keyframes dot-blink{0%,30%,38%,72%,80%,100%{transform:scaleY(1)}34%,76%{transform:scaleY(.08)}}
@media(max-width:760px){.header-actions{gap:3px}.header .sound-toggle{width:32px;min-width:32px}.dot-invite{left:70px;top:-5px;max-width:min(210px,calc(100vw - 110px));padding:10px 13px}.dot-invite strong{font-size:16px}.dot-invite>span{font-size:13px}}
@media(max-width:380px){.header{gap:6px}.header .brand img{width:68px}.header .theme-toggle{width:60px}[data-theme=dark] .header .liquid-thumb,[data-theme=dark] .liquid-blob,[data-theme=dark] .liquid-trail{transform:translateX(24px)}.language-switch{gap:2px}.language-switch a{padding:4px}}
@media(prefers-reduced-motion:reduce){.dot-companion.is-introducing .dot-character>svg,.dot-companion.is-introducing .dot-eyes{animation:none!important}}