.tracking-box{max-width:700px;margin:auto;background:#fff;padding:46px;box-shadow:0 16px 54px #102d2220}.tracking-box label{display:block;margin:18px 0;font-size:12px;font-weight:700}.tracking-box input{display:block;width:100%;padding:15px;border:1px solid #d0dad2;margin-top:10px}.tracking-box .btn{margin-top:12px}.track-status{margin-top:28px;padding:27px;background:#e6f0e8}.track-status h3{font-size:30px;margin:12px 0}.track-status p{color:#537060}.catalog-edit{padding:18px 0;border-bottom:1px solid #e5e9df}.catalog-edit .active-toggle{align-self:center}.catalog-edit .active-toggle input{width:auto;display:inline}.catalog-edit button{align-self:end}
@media(max-width:670px){.tracking-box{padding:24px}}

/* Workshop 2.0 — architectural editorial treatment, interaction as a product story. */
:root{--green:#132521;--soft:#f4f1eb;--clay:#c29a6e;--text:#182c27}
body{font-family:Arial,Helvetica,sans-serif;background:var(--soft)}
.bar{background:#0c1c19;color:#efece3}
.bar span{color:#d1a977}
header{background:#f9f8f4ed;backdrop-filter:blur(18px);border-color:#ddd8cc}
.logo{font-family:Georgia,serif;font-size:24px;letter-spacing:-.5px}
.hero{height:min(860px,92svh);min-height:610px;background-image:linear-gradient(90deg,rgba(7,20,17,.9) 0%,rgba(8,22,18,.65) 44%,rgba(9,24,19,.05) 100%),url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=2000&q=88');overflow:hidden}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(8,23,17,.45),transparent 32%)}
.hero-copy{position:relative;z-index:2;max-width:850px;padding-top:clamp(85px,11vh,145px)}
.hero h1{font-size:clamp(64px,7.5vw,130px);letter-spacing:-.065em;line-height:.99;font-weight:500}
.hero h1 em{color:#efd0a2}
.hero p{font-size:16px;max-width:490px}
.hero-ambient{position:absolute;right:8%;top:18%;width:min(33vw,480px);aspect-ratio:1;pointer-events:none;z-index:1;perspective:900px}
.orbit{position:absolute;inset:10%;border:1px solid rgba(244,212,164,.6);border-radius:50%;box-shadow:0 0 32px rgba(227,172,103,.08),inset 0 0 29px rgba(227,172,103,.07);animation:orbitFloat 14s ease-in-out infinite alternate}
.orbit-two{inset:25%;transform:rotateX(72deg);border-color:rgba(219,238,203,.5);animation-duration:9s}
.coordinate{position:absolute;right:0;bottom:0;font-size:10px;letter-spacing:3px;color:#e8dbcc}
@keyframes orbitFloat{from{transform:translate3d(0,-15px,0) rotateX(55deg) rotateZ(0deg)}to{transform:translate3d(0,24px,0) rotateX(20deg) rotateZ(125deg)}}
.intro{padding-top:140px;padding-bottom:140px}
.intro h2,.kinetic h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}
.section-head h2{font-family:Georgia,serif}
.categories button{position:relative;overflow:hidden;transition:background-size .8s,transform .7s,box-shadow .7s;box-shadow:0 20px 55px #15272020}
.categories button:hover{transform:translateY(-8px);box-shadow:0 28px 65px #15272037}
.categories button strong{font-family:Georgia,serif;font-size:clamp(30px,2.6vw,42px)}
.btn{transition:transform .3s,background .3s,box-shadow .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px #0002}
.kinetic{position:relative;height:335vh;background:#071713;color:#f8f4e9;margin:0;--phase:0}
.kinetic-head{position:sticky;top:76px;z-index:2;margin:0 auto;padding:8vh 7% 0;max-width:1480px;pointer-events:none}
.kinetic-head h2{font-size:clamp(45px,5vw,80px);margin:18px 0 14px;max-width:740px}
.kinetic-head p{font-size:13px;color:#b7c7bc;max-width:425px;line-height:1.8}
.kinetic-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(circle at 70% 52%,#234337 0%,#102820 30%,#071713 69%)}
.holo-grid{position:absolute;inset:0;opacity:.3;background-image:linear-gradient(#ffffff13 1px,transparent 1px),linear-gradient(90deg,#ffffff13 1px,transparent 1px);background-size:64px 64px;transform:perspective(800px) rotateX(67deg) translateY(36%);mask-image:linear-gradient(transparent 10%,#000 90%)}
.kinetic-scenes{position:absolute;inset:4% 5% 13% 35%;perspective:1200px}
.kinetic-scene{position:absolute;inset:0;opacity:0;transform:translateX(10%) scale(.87) rotateY(-9deg);transition:opacity .65s,transform 1s;pointer-events:none}
.kinetic-scene.is-active{opacity:1;transform:translateX(0) scale(1) rotateY(0)}
.assembly{position:absolute;width:min(68vh,88%);height:75%;left:12%;top:12%;filter:drop-shadow(0 45px 60px #0009);transform:rotateY(calc(var(--phase)*-6deg)) rotateX(4deg);transform-style:preserve-3d}
.slab{display:block;position:absolute;background-image:var(--visual);background-size:300% 100%;height:100%;width:33.333%;top:0;border:1px solid #ffffff25;box-shadow:0 0 45px #d6b9801a;transition:transform .4s}
.slab-a{left:0;background-position:left center;transform:translate3d(calc((.45 - var(--phase))*-65px),calc((.45 - var(--phase))*-78px),58px) rotateY(-6deg)}
.slab-b{left:33.333%;background-position:center center;transform:translate3d(0,calc((.45 - var(--phase))*70px),-38px) rotateY(5deg)}
.slab-c{left:66.666%;background-position:right center;transform:translate3d(calc((.45 - var(--phase))*65px),calc((.45 - var(--phase))*-55px),63px) rotateY(7deg)}
.kinetic-meta{position:absolute;bottom:7%;left:7%;right:7%;display:flex;gap:28px;align-items:baseline;border-top:1px solid #c1d6c54a;padding-top:24px}
.identity-proposal{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:8%;min-height:610px}.identity-proposal h2{font-family:Georgia,serif}.identity-proposal p{line-height:2;color:#687d70;max-width:440px;margin:26px 0}.identity-proposal img{width:100%;box-shadow:0 30px 70px #081d1533}
.kinetic-index{font-size:12px;color:#d7b282;letter-spacing:3px}.kinetic-name{font-family:Georgia,serif;font-size:clamp(22px,3vw,46px);font-weight:400}.kinetic-hint{margin-left:auto;font-size:10px;letter-spacing:2px;color:#9cbea7}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}.reveal.revealed{opacity:1;transform:translateY(0)}
.login{margin:8vh auto;border-radius:2px;max-width:500px;box-shadow:0 28px 90px #0f28252b;border-top:5px solid #c1a07a}
.login h1{font-family:Georgia,serif;letter-spacing:-1px;font-weight:400;font-size:42px}
.text-action{padding:10px 0;border:0;background:transparent;text-decoration:underline;color:#275648}
.sidebar-role{padding:8px 14px;color:#d6bc98}
.invite-result{overflow-wrap:anywhere;margin:15px 0}.invite-result input{width:100%;margin:10px 0;padding:12px;border:1px solid #ccd9c8}
@media(max-width:800px){.kinetic{height:280vh}.kinetic-head{top:70px;padding:7vh 6%}.kinetic-head h2{font-size:clamp(35px,9vw,57px);max-width:520px}.kinetic-head p{max-width:300px}.kinetic-scenes{inset:29% 4% 17% 4%}.assembly{left:12%;width:76%;height:88%;top:2%}.kinetic-meta{bottom:5%;flex-wrap:wrap;gap:9px}.kinetic-hint{display:none}.hero-ambient{right:-17%;width:50vw;top:35%;opacity:.45}.hero h1{font-size:clamp(53px,9vw,77px)}.hero-copy{padding-top:125px}.identity-proposal{grid-template-columns:1fr;gap:30px}}
@media(max-width:670px){.hero{height:710px;min-height:680px}.hero-copy{padding:92px 6% 25px}.hero p{max-width:310px}.kinetic-head p{font-size:12px;max-width:250px}.kinetic-scenes{inset:33% 0 17% 0}.assembly{left:8%;width:85%;height:85%}.login{margin:5vh 4%;padding:29px}.admin-mobile{overflow-x:auto;justify-content:flex-start;gap:8px;padding:0 6px;max-width:100vw}.admin-mobile button{min-width:72px;flex:none}.admin-head button{font-size:10px}.stats{gap:8px}.stat{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}.slab{transform:none!important}}