/* Design tokens from CouchSurfing / Figma 1:37347. */
:root{--violet:#7874ff;--lilac:#dae0fd;--paper:#f0f3ff;--ink:#7f85a5;--scale:1;--body-font:'RF Dewi','Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box;border:0 solid transparent}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);font-family:var(--body-font);color:var(--ink)}p,h1,h2,h3,figure{margin:0}img{display:block;max-width:100%}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--violet);outline-offset:5px}main{max-width:1600px;margin:auto;overflow:hidden}.case-section{position:relative;height:calc(var(--section-height)*var(--scale)*1px);isolation:isolate}.section-canvas{position:relative;width:1600px;transform:scale(var(--scale));transform-origin:top left}.slot{position:absolute}.slot-artwork{width:100%;height:100%}.unavailable{width:100%;height:100%;background:#fff}.skip{position:fixed;top:-80px;left:16px;z-index:1000;padding:12px 20px;background:white;color:var(--violet);border-radius:20px}.skip:focus{top:16px}.to-top{position:fixed;right:22px;bottom:22px;z-index:50;width:44px;height:44px;border-radius:50%;background:var(--violet);color:white;font-size:24px;box-shadow:0 4px 20px #7874ff33}.to-top[hidden]{display:none}.zoomable{cursor:zoom-in}.viewer{padding:0;background:var(--paper);color:var(--ink);border-radius:18px;width:min(1280px,96vw);max-width:96vw;max-height:92vh;overflow:auto}.viewer::backdrop{background:#191f27bb;backdrop-filter:blur(8px)}.viewer-content{position:relative;padding:52px 20px 20px;overflow:auto}.viewer-close{position:sticky;float:right;top:8px;right:8px;z-index:10;width:36px;height:36px;background:var(--violet);border-radius:50%;color:white;font-size:28px}.viewer .zoomable{cursor:default}.viewer-art{position:relative;margin:0 auto;transform-origin:top left}.zoom-hint{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:20px;background:#fffffff0;color:var(--violet);font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s}.zoomable:hover>.zoom-hint,.zoomable:focus-visible>.zoom-hint{opacity:1}
/* Explicit stacking preserves the compositing order in the source frame. */
.slot-1-37358{z-index:-1}.slot-1-37875 img{loading:eager}
@media(max-width:900px){
 main{padding:12px}.case-section{height:auto;margin-bottom:16px}.section-canvas{width:100%;height:auto!important;transform:none;display:flex;flex-direction:column;gap:20px}.slot{position:relative!important;left:auto!important;top:auto!important;max-width:100%;flex:none}.slot-artwork{transform-origin:top left}.slot[data-kind=text]{width:100%!important;height:auto!important}.slot[data-kind=text]>.slot-artwork{width:100%!important;height:auto!important;transform:none!important}.slot[data-kind=text] p{font-size:16px!important;line-height:1.5!important;height:auto!important;width:auto!important;white-space:normal!important}.slot[data-kind=text] br{display:none}.slot-1-37348,.slot-1-37374,.slot-1-37358,.slot-1-37368,.slot-1-37369,.slot-1-37401,.slot-1-37375{display:none}.slot-1-37367{display:none}#overview{padding:24px 20px;background:white;border-radius:24px}#overview .slot-1-37359{order:0}#overview .slot-1-37408{order:1}#overview .slot-1-37360{order:2}#overview .slot-1-37349{order:3}.slot-1-37359 h1{font-size:clamp(64px,16vw,112px)!important;line-height:.86!important;letter-spacing:-3px}.slot-1-37359 br{display:block!important}.slot-1-37359{margin-bottom:10px}.slot-1-37349,.slot-1-37360{width:100%!important;height:auto!important}.slot-1-37349>.slot-artwork,.slot-1-37360>.slot-artwork{width:100%!important;height:auto!important;transform:none!important}.slot-1-37349 .slot-artwork>div{display:grid!important;grid-template-columns:1fr;gap:28px}.slot-1-37349 .slot-artwork>div>div{width:100%!important}.slot-1-37349 p{font-size:16px!important;line-height:1.45!important}.slot-1-37349 br{display:none}.slot-1-37349 .slot-artwork>div>div>div{padding:9px 16px!important}.slot-1-37360 .slot-artwork>div{gap:16px;justify-content:space-between}.slot-1-37360 .slot-artwork>div>div:first-child{width:34px!important;height:34px!important}.slot-1-37360 .slot-artwork>div>div:last-child{gap:20px!important;width:auto!important}.slot-1-37360 p{font-size:14px!important}
 #process{padding:20px;background:white;border-radius:24px}.slot-1-37699{order:-1}.slot-1-37662,.slot-1-37678{width:100%!important;height:auto!important}.slot-1-37662>.slot-artwork,.slot-1-37678>.slot-artwork{width:100%!important;height:auto!important;transform:none!important}.slot-1-37662 .slot-artwork>div,.slot-1-37678 .slot-artwork>div{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}.slot-1-37662 .slot-artwork>div>div,.slot-1-37678 .slot-artwork>div>div{width:auto!important;height:130px!important;padding:14px!important;min-width:0}.slot-1-37662 .slot-artwork>div>div>div,.slot-1-37678 .slot-artwork>div>div>div{height:100%!important;width:100%!important}.slot-1-37662 p,.slot-1-37678 p{width:auto!important;height:auto!important;font-size:21px!important;line-height:1.05!important}.slot-1-37662 .slot-artwork>div>div>div>div p,.slot-1-37678 .slot-artwork>div>div>div>div p{font-size:12px!important}
 #main-page .slot-1-37390,#host-search .slot-1-37392,#events .slot-1-37396,#landing .slot-1-37398,#screens .slot-1-38898{order:-2}.slot-1-37372,.slot-1-37373,.slot-1-37402,.slot-1-37403{order:-1!important}.slot.slot-1-37372 p,.slot.slot-1-37373 p,.slot.slot-1-37402 p,.slot.slot-1-37403 p{font-size:80px!important;line-height:1!important;color:#dae0fd!important}.slot-1-37371,.slot-1-37400{display:none}.slot-1-37388{order:-1}.slot-1-37720,.slot-1-38086,.slot-1-37764,.slot-1-37876,.slot-1-37935,.slot-1-38022,.slot-1-38056,.slot-1-38900,.slot-1-38182{border-radius:12px;overflow:hidden}.slot-1-37931{order:1}.slot-1-38086{order:0}.slot-1-37764{order:2}.slot-1-37932{order:3}.slot-1-37876{order:4}.slot-1-37934{order:5}.slot-1-37701{order:6}.slot-1-37394{order:7}.slot-1-37409{order:1}.slot-1-37935{order:0}.slot.slot-1-37407 p{font-size:clamp(36px,8.8vw,68px)!important;line-height:.95!important;color:#dae0fd!important;overflow-wrap:anywhere}.zoom-hint{opacity:1;font-size:10px}.to-top{right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.viewer-toolbar{position:sticky;top:0;left:0;z-index:2;padding:0 0 12px;background:var(--paper)}.viewer-toolbar button{padding:8px 14px;border-radius:20px;background:var(--violet);color:white;font-size:14px}.viewer-image{display:block;object-fit:contain;border-radius:8px}.interface-image{display:block;border-radius:inherit}
@media(max-width:900px){#screens .slot-1-38900{order:0}#screens .slot-1-38182{order:1}}

/* Kata site navigation */
.case-nav{position:fixed;top:16px;left:16px;right:16px;z-index:60;display:flex;justify-content:space-between;pointer-events:none}
.case-nav a{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;background:#ffffffe6;color:var(--violet);font-size:15px;font-weight:500;text-decoration:none;box-shadow:0 4px 20px #7874ff22;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,color .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.case-nav a:hover{background:var(--violet);color:#fff}
.case-back:hover span{display:inline-block;transform:translateX(-4px);transition:transform .3s}
body{animation:case-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes case-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body{animation:none}}