/* Anubi-inspired editorial homepage; KK identity and original reference media. */
:root{--canvas:#fcfcfa;--ink:#171717;--page:clamp(22px,3.4vw,64px)}
html{scroll-behavior:smooth;scroll-padding-top:110px}body{background:var(--canvas);color:var(--ink)}
.topbar{position:sticky;top:14px;margin:14px var(--page) 0;height:64px;min-height:64px;padding:0 22px;border:1px solid #eeeeeb;border-radius:40px;background:#fffffff5;box-shadow:0 5px 24px #0000000b;gap:18px}
.wordmark{gap:9px;flex-shrink:0}.wordmark b{border-radius:8px;transform:none;width:35px;height:35px;font-size:22px;letter-spacing:-2px}.wordmark>span{font-size:19px;letter-spacing:-.6px}.wordmark small{display:block;font-size:8px;font-weight:400;letter-spacing:0;color:#8e8e8b;margin-top:2px}.topnav a,.topnav button{color:#444;font-size:12px;padding:9px 12px}.export-button{border:1px solid #e7e7e4;border-radius:30px;background:#fafaf8;color:#222;padding:12px 17px}.export-button:after{content:' ↗';margin-left:10px}.export-button:hover{background:#171717;color:white}
.library-intro{position:relative;height:calc(100svh - 78px);min-height:610px;max-height:900px;margin:0;display:block;overflow:hidden;background:transparent;border:0;border-radius:0;padding:0}
.hero-atmosphere{display:none!important}.hero-content{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:5;width:70%;text-align:center;pointer-events:none;padding:0}
.hero-content h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(100px,14.8vw,225px);font-weight:900;letter-spacing:-.095em;line-height:.85;transform:scaleX(1.07);color:#141414;margin:0;white-space:nowrap;padding-right:.09em}
.hero-content .intro-copy{font-size:12px;line-height:1.6;letter-spacing:0;color:#383838;margin:22px auto 0;max-width:none}.hero-content .hero-cta{display:inline-flex;align-items:center;background:transparent;border:0;border-bottom:1px solid #cececa;border-radius:0;color:#70706b;padding:7px 0;font:11px inherit;margin-top:12px;pointer-events:auto}.hero-cta span{color:#222;background:none}
.hero-bottom{display:flex;position:absolute;left:var(--page);right:var(--page);bottom:32px;align-items:flex-end;justify-content:space-between;z-index:5;text-align:left;font:22px/1.3 inherit}.hero-bottom p{margin:0;font-size:22px;line-height:1.35;letter-spacing:-.7px}.hero-bottom p span{color:#969691}.hero-bottom>a{color:#202020;font-size:12px;border-bottom:1px solid #ccc;padding-bottom:8px}.hero-bottom b{margin-left:25px;font-size:21px;font-weight:400}
.hero-doodles{position:absolute;left:0;top:0;width:100%;height:100%;z-index:6;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.doodle-blue{stroke:#3977ed;stroke-width:3.5}.doodle-yellow{stroke:#f4d839;stroke-width:6}.doodle-orange{stroke:#fb5f3e;stroke-width:4}.doodle-star{stroke:#8272e5;stroke-width:3.5}
.orbit-gallery{position:absolute;inset:0;z-index:2;pointer-events:none}.orbit-card{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;aspect-ratio:1.45;transform:rotate(var(--rot,0deg));border-radius:2px;background:#eee;box-shadow:0 5px 12px #00000014;padding:0;border:0;overflow:hidden;pointer-events:auto;animation:none;transition:transform .3s,box-shadow .3s;cursor:pointer}.orbit-card:hover{transform:rotate(0deg) scale(1.1);z-index:8;box-shadow:0 12px 32px #0003}.orbit-card video{display:block;width:100%;height:100%;object-fit:cover}.orbit-caption{display:none!important}
.orbit-card:nth-child(1){--x:9%;--y:39%;--w:6%}.orbit-card:nth-child(2){--x:17%;--y:29%;--w:7%;--rot:-3deg}.orbit-card:nth-child(3){--x:27%;--y:19%;--w:8%}.orbit-card:nth-child(4){--x:40%;--y:11%;--w:9%;--rot:3deg}.orbit-card:nth-child(5){--x:54%;--y:6%;--w:10%}.orbit-card:nth-child(6){--x:71%;--y:9%;--w:8%;--rot:-4deg}.orbit-card:nth-child(7){--x:85%;--y:20%;--w:8%}.orbit-card:nth-child(8){--x:83%;--y:41%;--w:12%;--rot:2deg}.orbit-card:nth-child(9){--x:67%;--y:64%;--w:14%;--rot:-2deg}.orbit-card:nth-child(10){--x:40%;--y:70%;--w:11%}.orbit-card:nth-child(11){--x:18%;--y:68%;--w:13%;--rot:2deg}.orbit-card:nth-child(12){--x:7%;--y:54%;--w:9%;--rot:-4deg}
.motion-words{margin:0 var(--page);padding:60px 4%;display:flex;justify-content:space-between;gap:25px;border-bottom:1px solid #deded9}.motion-words>span{font:900 clamp(15px,2vw,27px) Arial,sans-serif;letter-spacing:-1px}.motion-words>span>span{display:block;font:10px/2.5 KKUIText,sans-serif;letter-spacing:1px;text-align:center;color:#9a9a94}
.hands-on{padding:100px var(--page) 80px;scroll-margin-top:100px}.hands-title{text-align:center;margin-bottom:60px}.hands-title>p,.collection-lead>p{font:10px/1.5 Consolas,monospace;letter-spacing:2px;color:#91918a;margin:0 0 28px}.hands-title h2,.collection-lead h2{font:600 clamp(46px,6.5vw,95px)/1.15 KKUIText,sans-serif;letter-spacing:-4px;margin:0}.hands-title h2 span{position:relative}.hands-title h2 span:after{content:'';position:absolute;left:0;right:0;height:6px;bottom:0;background:#f5d434;transform:rotate(-4deg)}.hands-title>div{color:#92928a;font-size:13px;line-height:1.9;margin-top:28px}.home-interactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.hands-footer{display:flex;justify-content:space-between;align-items:center;margin-top:26px}.hands-footer p{font-size:10px;color:#92928a}.hands-footer button{border:1px solid #ddd;background:transparent;padding:13px 20px;border-radius:25px;font:12px inherit;cursor:pointer}.hands-footer button span{margin-left:30px}
.pointer-study{min-width:0;background:#f0f0ed;border-radius:18px;overflow:hidden}.pointer-stage{height:320px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.pointer-meta{display:flex;justify-content:space-between;align-items:center;padding:18px 23px;border-top:1px solid #e4e4df}.pointer-meta h3{font:13px/1.4 inherit;margin:0}.pointer-meta span{font:10px/1.5 inherit;color:#97978f}.pointer-study button{font-family:inherit;cursor:pointer}.pointer-stage button:focus-visible{outline:2px solid #6d66ec;outline-offset:5px}.pointer-note{position:absolute;bottom:22px;margin:0;font-size:10px;color:#96968d;pointer-events:none}
.live-dock{display:flex;align-items:flex-end;gap:10px;padding:12px;border-radius:23px;background:#ffffffd9;box-shadow:0 8px 25px #2420200a}.live-dock button{height:47px;width:47px;flex-shrink:0;border:0;border-radius:13px;background:var(--c);font:23px Arial;color:white;transform-origin:bottom center;transition:transform .13s ease;position:relative}.live-dock button[aria-pressed=true]:after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#52524e;bottom:-8px;left:calc(50% - 2px)}.live-dock button:nth-child(2){font-size:17px;font-weight:bold}.dock-output{top:44px;bottom:auto;font-size:12px;color:#777}
.ball-arena{position:absolute;inset:22px 22px 65px;border:1px dashed #d8d8d2;border-radius:17px;overflow:hidden;background:radial-gradient(#d3d3cd .7px,transparent .7px) 0 0/16px 16px}.drag-ball{position:absolute;left:0;top:0;width:66px;height:66px;border-radius:50%;border:0;background:radial-gradient(circle at 28% 25%,#c6bfff,#8e7aec 45%,#6654c2);color:white;font-size:22px;box-shadow:0 12px 23px #7262bc35,inset 0 1px 4px #fff8;touch-action:none;cursor:grab!important;user-select:none}.drag-ball:active{cursor:grabbing!important}
.reorder-demo{width:260px;display:flex;flex-direction:column;gap:7px}.reorder-demo button{border:1px solid #e3e3df;background:#fff;border-radius:11px;padding:13px 15px;display:flex;align-items:center;gap:12px;text-align:left;touch-action:none;font-size:12px;box-shadow:0 2px 3px #00000003;user-select:none}.reorder-demo button b{width:21px;height:21px;display:grid;place-items:center;background:var(--c);border-radius:6px;font-size:10px;font-weight:400}.reorder-demo button span{color:#aaa;margin-left:auto}.reorder-demo button.dragging{background:#f7f5ff;border-color:#a899ed;box-shadow:0 9px 20px #81739622;z-index:2;scale:1.03}
.carousel-demo{width:100%;height:235px;overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}.carousel-track{display:flex;gap:16px;height:205px;will-change:transform;padding-left:0}.carousel-card{flex:0 0 190px;border-radius:15px;display:flex;flex-direction:column;justify-content:space-between;padding:18px;color:#fff;position:relative;overflow:hidden}.carousel-card>i{font:80px/1 Arial;text-align:center;font-style:normal;opacity:.8}.carousel-card>span{font:10px Consolas;letter-spacing:1px}.carousel-card>strong{font:15px Arial;font-weight:500}.carousel-controls{position:absolute;bottom:23px;display:flex;align-items:center;gap:18px}.carousel-controls button{border:1px solid #d5d5cf;border-radius:50%;width:28px;height:28px;background:transparent}.carousel-controls output{font:10px Consolas;color:#87877e}
.collection-lead{border-top:1px solid #deded9;margin:0 var(--page);padding:90px 0 60px;text-align:center}.collection-lead>div{font-size:12px;color:#8c8c85;margin-top:30px}.app-shell{margin-top:0}.gallery{gap:40px 22px}.tile{border-radius:7px}.tile-info{background:var(--canvas)}.preview-hint{border-radius:20px}.studio-root{padding-top:28px}
@media(min-width:1600px){.pointer-stage{height:390px}}
@media(max-width:1050px){.topnav a,.topnav button{padding:8px;font-size:11px}.topbar{gap:8px}.wordmark small{display:none}.wordmark>span{font-size:16px}.export-button{font-size:10px;padding:10px}.library-intro{min-height:600px}.hero-content h1{font-size:16vw}.hero-doodles{width:120%;left:-10%}.hands-on{padding-top:75px}}
@media(max-width:700px){.topbar{margin:10px 14px 0;top:10px;border-radius:26px;min-height:94px;height:auto;padding:12px 15px;flex-wrap:wrap;gap:8px}.wordmark b{width:29px;height:29px;font-size:18px}.wordmark>span{font-size:16px}.nav-cluster{order:3;width:100%}.topnav{width:100%;justify-content:space-between}.topnav a,.topnav button{font-size:10px;padding:6px 7px}.export-button{margin-left:auto}.library-intro{height:640px;min-height:0}.hero-content{top:42%;width:90%}.hero-content h1{font-size:19vw;letter-spacing:-.09em}.hero-content .intro-copy{font-size:10px;max-width:none;margin-top:17px}.hero-content .hero-cta{font-size:10px}.hero-doodles{width:160%;height:90%;left:-30%;top:0}.hero-bottom{bottom:30px}.hero-bottom p{font-size:18px}.hero-bottom>a{font-size:10px}.orbit-card:nth-child(1){--x:6%;--y:26%;--w:12%}.orbit-card:nth-child(2){--x:23%;--y:17%;--w:15%}.orbit-card:nth-child(3){--x:46%;--y:8%;--w:18%}.orbit-card:nth-child(4){--x:74%;--y:17%;--w:18%}.orbit-card:nth-child(5){--x:80%;--y:56%;--w:15%}.orbit-card:nth-child(6){--x:52%;--y:66%;--w:22%}.orbit-card:nth-child(7){--x:22%;--y:69%;--w:20%}.orbit-card:nth-child(8){--x:4%;--y:57%;--w:20%}.orbit-card:nth-child(n+9){display:none}.motion-words{padding:30px 0;gap:8px}.motion-words>span{font-size:14px;letter-spacing:-.7px}.motion-words>span>span{font-size:9px}.hands-on{padding:65px var(--page) 60px}.hands-title h2,.collection-lead h2{font-size:48px;letter-spacing:-2px}.hands-title>div{font-size:11px}.home-interactions{grid-template-columns:1fr;gap:16px}.hands-footer{align-items:flex-start;gap:15px}.hands-footer p{max-width:150px;line-height:1.8}.hands-footer button{font-size:10px;padding:12px}.hands-footer button span{margin-left:8px}.collection-lead{padding:65px 0 45px}.collection-lead>div{font-size:10px;line-height:1.8}.pointer-stage{height:310px}.pointer-meta{padding:16px 20px}.live-dock{gap:8px;padding:10px}.live-dock button{width:40px;height:40px}.gallery{gap:27px}.hero-content h1 br{display:none}}
.hero-doodles{transform:none}.hero-doodles .doodle-star{stroke-width:3.5!important}.hero-doodles .doodle-blue{stroke-width:3.5}.hero-doodles .doodle-orange{stroke-width:4}.hero-content .intro-copy{position:relative;z-index:1;background:var(--canvas);width:fit-content;padding:0 8px}.hero-content h1{max-width:none}

/* Shared pointer feedback. The existing hero layout owns these rules. */
.topbar{position:relative;top:0;z-index:30}
.hero-content h1{font-size:clamp(100px,11.5vw,178px);letter-spacing:-.085em}
.hero-content{top:45%}
.hero-doodles{z-index:4}
.hero-doodles path{transform-box:fill-box;transform-origin:center}
.hero-bottom-actions{display:flex;align-items:center;gap:28px}
.hero-bottom-actions>a{display:flex;align-items:center;color:#292925;font-size:12px;border-bottom:1px solid #c7c7c0;padding:8px 0}
.hero-bottom-actions>a b{margin-left:25px}
.motion-toggle{font:10px/1.4 KKUIText,sans-serif;color:#68685f;border:1px solid #dcdcd5;border-radius:20px;padding:8px 12px;background:transparent;cursor:pointer;white-space:nowrap}
.motion-toggle[aria-pressed=true]:before{content:'';display:inline-block;width:5px;height:5px;background:#3977ed;border-radius:50%;margin-right:7px;vertical-align:middle}
.topnav a,.topnav button,.export-button,.hero-cta,.hero-bottom-actions>a,.wordmark{transition:translate 280ms cubic-bezier(.2,.8,.2,1),background 180ms,color 180ms;will-change:auto}
.pointer-magnet-active{transition:translate 100ms linear,background 180ms,color 180ms!important}
.topnav a:hover,.topnav button:hover{background:#eeeee9;color:#171717}
.hero-content h1,.hero-doodles path{transition:translate .18s ease-out}
.orbit-gallery{perspective:1000px}
.pointer-scene-ready .orbit-card{transform:perspective(750px) translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) rotateX(var(--pointer-rx,0deg)) rotateY(var(--pointer-ry,0deg)) rotate(calc(var(--rot,0deg) + var(--pointer-turn,0deg))) scale(var(--pointer-scale,1));transition:box-shadow 280ms ease,filter 280ms ease;will-change:transform;backface-visibility:hidden}
.pointer-scene-ready .orbit-card.pointer-hover{z-index:12;box-shadow:0 18px 35px #16161629,0 2px 5px #16161613}
.orbit-card:focus-visible{outline:3px solid #3977ed;outline-offset:6px;z-index:12}
.orbit-card video{pointer-events:none}
.pointer-ink{position:fixed;inset:0;width:100%;height:100%;z-index:31;pointer-events:none;contain:strict}
.scene-cursor{position:fixed;top:0;left:0;width:0;height:0;z-index:100;pointer-events:none;visibility:hidden;opacity:0;transition:opacity 140ms;will-change:transform}
.scene-cursor.is-visible{visibility:visible;opacity:1}
.scene-cursor:before{content:'';position:absolute;width:7px;height:7px;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;background:#3977ed;transition:width 220ms,height 220ms,background 160ms,border-radius 220ms,scale 140ms;box-sizing:border-box}
.scene-cursor span{position:absolute;left:0;top:0;white-space:nowrap;transform:translate(-50%,-50%);color:#fff;font:11px/1 KKUIText,sans-serif;opacity:0;transition:opacity 100ms}
.scene-cursor[data-mode=link]:before{width:25px;height:25px;background:#3977ed18;border:1px solid #3977edaa}
.scene-cursor[data-mode=view]:before,.scene-cursor[data-mode=drag]:before{width:78px;height:38px;border-radius:22px;background:#242420;box-shadow:0 4px 18px #0002}
.scene-cursor[data-mode=drag]:before{background:#3977ed}
.scene-cursor[data-mode=view] span,.scene-cursor[data-mode=drag] span{opacity:1}
.scene-cursor.is-pressed:before{scale:.88}
.pointer-active body,.pointer-active a,.pointer-active button,.pointer-active summary,.pointer-active .carousel-demo{cursor:none!important}
.pointer-active input,.pointer-active textarea,.pointer-active [contenteditable=true]{cursor:text!important}
.pointer-active select,.pointer-active dialog,.pointer-active dialog *,.pointer-active video[controls]{cursor:auto!important}
.pointer-project-caption{position:absolute;left:50%;bottom:110px;transform:translate(-50%,5px);z-index:13;max-width:min(440px,76%);background:#fcfcfaf2;border:1px solid #e6e6df;border-radius:20px;padding:9px 16px;color:#48483f;font:11px/1.5 KKUIText,sans-serif;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;text-align:center}
.pointer-project-caption.is-visible{opacity:1;transform:translate(-50%,0)}
.pointer-lit{box-shadow:0 8px 24px #17171713}
.pointer-meta span,.pointer-note,.hands-title>div,.hands-footer p,.collection-lead>div{color:#696960}
@media(max-width:700px){
 .topbar{min-height:62px;height:auto;margin:10px 12px 0;padding:11px 14px;border-radius:22px;gap:10px}
 .wordmark>span{font-size:14px}.wordmark b{width:27px;height:27px;font-size:17px}
 .nav-cluster{order:3;width:100%;border-top:1px solid #f0f0e9;padding-top:7px}
 .topnav a,.topnav button{font-size:10px;min-height:32px;padding:6px}.export-button{font-size:9px;padding:8px 10px}
 .library-intro{height:620px}.hero-content h1{font-size:18.5vw}.hero-content{top:42%}
 .hero-content .intro-copy{font-size:10px;line-height:1.8;max-width:240px}
 .hero-bottom p{font-size:16px}.hero-bottom-actions{gap:12px}.hero-bottom-actions>a{font-size:10px}.hero-bottom-actions>a b{margin-left:10px}
 .motion-toggle{display:none}.scene-cursor,.pointer-ink,.pointer-project-caption{display:none}
}
@media(hover:none),(pointer:coarse){.scene-cursor,.pointer-ink{display:none}.motion-toggle{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit-card,.live-dock button,.carousel-track{transition:none!important}}