html[data-portfolio-page=studio]{--studio-ink:#17143a;--studio-saffron:#f0a030;--studio-rose:#d6457a;--studio-lilac:#c9bbe5;--studio-cream:#f6f2ea;--studio-muted:#656174;--studio-line:#d8d2dc;--studio-teal:#138a80;--studio-violet:#5b4bd1;--studio-shadow:6px 6px 0 var(--studio-saffron);--studio-overlay:color-mix(in srgb, var(--studio-ink) 70%, transparent);--studio-display:"Bricolage Grotesque", system-ui, sans-serif;--studio-body:"DM Sans", "Instrument Sans", sans-serif;background:var(--studio-cream);--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html[data-portfolio-page=studio] body{background:var(--studio-cream);color:var(--studio-ink);margin:0}:where(html[data-portfolio-page=studio]) .studio-ui,:where(html[data-portfolio-page=studio]) .studio-ui *{box-sizing:border-box;letter-spacing:0}:where(html[data-portfolio-page=studio]) .studio-ui{font-family:var(--studio-body);color:var(--studio-ink);line-height:1.5}:where(html[data-portfolio-page=studio]) .studio-ui h1,:where(html[data-portfolio-page=studio]) .studio-ui h2,:where(html[data-portfolio-page=studio]) .studio-ui h3,:where(html[data-portfolio-page=studio]) .studio-ui strong{font-family:var(--studio-display)}:where(html[data-portfolio-page=studio]) .studio-ui h1,:where(html[data-portfolio-page=studio]) .studio-ui h2,:where(html[data-portfolio-page=studio]) .studio-ui h3{color:var(--studio-ink);margin:0;font-weight:800;line-height:1.08}:where(html[data-portfolio-page=studio]) .studio-ui p{margin:0 0 20px;line-height:1.75}:where(html[data-portfolio-page=studio]) .studio-ui a{color:inherit;text-decoration:none}:where(html[data-portfolio-page=studio]) .studio-ui :focus-visible{outline-offset:5px;outline:3px solid var(--studio-rose)!important}html[data-portfolio-page=studio]{--bg:#f2f0f8;--ink:#17143a;--ink-2:#5c5880;--line:#dcd8ec;--display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--max:1200px}@media (prefers-color-scheme:dark){html[data-portfolio-page=studio]:not([data-theme=light]){--bg:#0e0c24;--ink:#eeebfa;--ink-2:#a7a2c8;--line:#2a2655}}:where(html[data-portfolio-page=studio]) nav.top,:where(html[data-portfolio-page=studio]) nav.top *{box-sizing:border-box}:where(html[data-portfolio-page=studio]) nav.top{top:env(safe-area-inset-top,0px);z-index:30;font-family:var(--body);background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);position:absolute;left:0;right:0}:where(html[data-portfolio-page=studio]) .wrap{max-width:var(--max);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));margin:0 auto}:where(html[data-portfolio-page=studio]) nav.top .wrap{align-items:center;gap:28px;padding-block:16px;display:flex}:where(html[data-portfolio-page=studio]) .mark{font-family:var(--display);letter-spacing:-.01em;white-space:nowrap;color:var(--ink);align-items:center;gap:10px;font-size:1.05rem;font-weight:700;text-decoration:none;display:flex}:where(html[data-portfolio-page=studio]) .mark i{background:var(--ink);width:30px;height:30px;color:var(--bg);font-size:.78rem;font-style:normal;font-family:var(--mono);letter-spacing:0;border-radius:50%;place-items:center;display:grid}:where(html[data-portfolio-page=studio]) .navlinks{scrollbar-width:none;gap:28px;min-width:0;margin-left:auto;display:flex;overflow-x:auto}:where(html[data-portfolio-page=studio]) .navlinks::-webkit-scrollbar{display:none}:where(html[data-portfolio-page=studio]) .navlinks a{color:var(--ink-2);white-space:nowrap;font-size:.92rem;text-decoration:none}:where(html[data-portfolio-page=studio]) .navlinks a:hover{color:var(--ink)}:where(html[data-portfolio-page=studio]) .navcta{font-family:var(--mono);border:1.5px solid var(--ink);white-space:nowrap;color:var(--ink);border-radius:999px;padding:6px 14px;font-size:.78rem;text-decoration:none}:where(html[data-portfolio-page=studio]) .navcta:hover{background:var(--ink);color:var(--bg)}:where(html[data-portfolio-page=studio]) nav.top :focus-visible{outline:3px solid var(--studio-violet);outline-offset:3px;border-radius:8px}@media (width<=640px){:where(html[data-portfolio-page=studio]) .navlinks .opt,:where(html[data-portfolio-page=studio]) .mark span{display:none}:where(html[data-portfolio-page=studio]) .navlinks{gap:20px}}:where(html[data-portfolio-page=studio]) .studio-room{background:var(--studio-lilac);min-height:100svh;position:relative;overflow:hidden}:where(html[data-portfolio-page=studio]) .studio-stage{height:100svh;position:relative;overflow:hidden}:where(html[data-portfolio-page=studio]) .studio-frame{position:absolute}:where(html[data-portfolio-page=studio]) .studio-wide-frame{transition:transform .7s cubic-bezier(.65,0,.35,1);position:absolute;inset:0}:where(html[data-portfolio-page=studio]) .studio-poster,:where(html[data-portfolio-page=studio]) .studio-video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}:where(html[data-portfolio-page=studio]) .studio-video{opacity:0}:where(html[data-portfolio-page=studio]) .studio-video.visible{opacity:1}:where(html[data-portfolio-page=studio]) .studio-closeup{opacity:0;pointer-events:none;transition:opacity .2s;position:absolute;inset:0}:where(html[data-portfolio-page=studio]) .studio-closeup.visible{opacity:1;transition-duration:.25s}:where(html[data-portfolio-page=studio]) .studio-closeup img,:where(html[data-portfolio-page=studio]) .studio-closeup video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}:where(html[data-portfolio-page=studio]) .studio-closeup.is-reduced video{display:none}:where(html[data-portfolio-page=studio]) .studio-ui .studio-hotspot{box-shadow:none;cursor:pointer;border:0;border-radius:0;padding:0;position:absolute;background:0 0!important}:where(html[data-portfolio-page=studio]) .hotspot-work{width:12%;height:14%;top:43%;left:51%}:where(html[data-portfolio-page=studio]) .hotspot-process{width:25%;height:39%;top:19%;left:6%}:where(html[data-portfolio-page=studio]) .hotspot-about{width:29%;height:26%;top:61%;left:62%}:where(html[data-portfolio-page=studio]) .studio-plates{z-index:5;gap:12px;display:flex;position:absolute;bottom:40px;left:45px}:where(html[data-portfolio-page=studio]) .studio-actions{z-index:5;gap:12px;display:flex;position:absolute;top:40px;right:45px}:where(html[data-portfolio-page=studio]) .studio-ui .studio-plate{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:220px;height:56px;color:var(--studio-ink);font-family:var(--studio-body);background:#ffffff8c;border:1px solid #fffc;border-radius:16px;align-items:center;gap:12px;padding:0 18px;font-size:18px;font-weight:500;line-height:1;transition:background .2s,transform .2s;display:flex;box-shadow:0 8px 24px -12px #17143a59}:where(html[data-portfolio-page=studio]) .studio-plate .studio-plate-title{color:#17143a;font-size:18px;font-weight:500}:where(html[data-portfolio-page=studio]) .studio-plate .studio-plate-arrow{color:#17143a;width:18px;height:18px;margin-left:auto;transition:transform .2s}:where(html[data-portfolio-page=studio]) .studio-ui .studio-plate:hover,:where(html[data-portfolio-page=studio]) .studio-ui .studio-plate:focus-visible{background:#ffffffd1;transform:translateY(-2px)}:where(html[data-portfolio-page=studio]) .studio-ui .studio-plate:hover .studio-plate-arrow,:where(html[data-portfolio-page=studio]) .studio-ui .studio-plate:focus-visible .studio-plate-arrow{transform:translate(2px,-2px)}:where(html[data-portfolio-page=studio]) .studio-ui .studio-plate:focus-visible{outline:2px solid var(--studio-ink);outline-offset:3px}:where(html[data-portfolio-page=studio]) .studio-loader{z-index:40;background:var(--studio-lilac);flex-direction:column;justify-content:center;align-items:center;gap:40px;display:flex;position:absolute;inset:0}@media (width>=768px) and (width<=1000px){:where(html[data-portfolio-page=studio]) .studio-plates{gap:12px;left:30px}:where(html[data-portfolio-page=studio]) .studio-actions{right:30px}}@media (width<=767px){:where(html[data-portfolio-page=studio]) .studio-room{min-height:100svh}:where(html[data-portfolio-page=studio]) .studio-stage{aspect-ratio:16/9;width:100%;height:auto}:where(html[data-portfolio-page=studio]) .studio-wide-frame{transition:none!important;transform:none!important}:where(html[data-portfolio-page=studio]) .studio-plates{flex-direction:column;gap:12px;padding:28px 25px 45px;display:flex;position:relative;bottom:auto;left:auto}:where(html[data-portfolio-page=studio]) .studio-ui .studio-plate{width:100%;height:56px}:where(html[data-portfolio-page=studio]) .studio-actions{z-index:5;gap:12px;display:flex;position:absolute;top:16px;right:16px}:where(html[data-portfolio-page=studio]) .studio-loader{position:fixed}}@media (prefers-reduced-motion:reduce){:where(html[data-portfolio-page=studio]) .studio-ui *{transition-duration:.01ms!important;animation-duration:.01ms!important}:where(html[data-portfolio-page=studio]) .studio-frame{transform:none!important}}html[data-portfolio-page=studio]{--studio-layer-surface:#f6f2ea;--studio-wire:#9794ab;--studio-layer-shadow:0 12px 30px color-mix(in srgb, var(--studio-ink) 28%, transparent)}:where(html[data-portfolio-page=studio]) .studio-loader{z-index:60;background:var(--studio-ink);color:var(--studio-cream);opacity:1;pointer-events:all;gap:20px;transition:opacity .45s;position:fixed}:where(html[data-portfolio-page=studio]) .studio-loader.is-ready{opacity:0;pointer-events:none}:where(html[data-portfolio-page=studio]) .studio-layer-perspective{perspective:800px;place-items:center;width:280px;height:240px;display:grid}:where(html[data-portfolio-page=studio]) .studio-layer-stack{width:176px;height:132px;transform-style:preserve-3d;animation:14.4s linear infinite studio-stack-rotate;position:relative;transform:rotateX(55deg)rotate(-30deg)}:where(html[data-portfolio-page=studio]) .studio-design-layer{border:1px solid var(--studio-lilac);background:var(--studio-layer-surface);box-shadow:var(--studio-layer-shadow);backface-visibility:visible;transform-style:preserve-3d;border-radius:12px;position:absolute;inset:0}:where(html[data-portfolio-page=studio]) .layer-grid{background-color:var(--studio-lilac);background-image:radial-gradient(var(--studio-ink) 1px,transparent 1px);background-size:12px 12px;animation:2.4s ease-in-out infinite studio-layer-bottom;transform:translateZ(-30px)}:where(html[data-portfolio-page=studio]) .layer-wire{animation:2.4s ease-in-out infinite studio-layer-middle;transform:translateZ(0)}:where(html[data-portfolio-page=studio]) .studio-design-layer i{border-radius:3px;display:block;position:absolute}:where(html[data-portfolio-page=studio]) .layer-wire i{border:1px solid var(--studio-wire);background:color-mix(in srgb,var(--studio-wire) 12%,transparent)}:where(html[data-portfolio-page=studio]) .layer-wire i:first-child,:where(html[data-portfolio-page=studio]) .layer-header{height:10px;top:12px;left:12px;right:12px}:where(html[data-portfolio-page=studio]) .layer-wire i:nth-child(2),:where(html[data-portfolio-page=studio]) .layer-image{width:60px;height:62px;top:32px;left:12px}:where(html[data-portfolio-page=studio]) .layer-wire i:nth-child(3),:where(html[data-portfolio-page=studio]) .layer-text{width:76px;height:7px;top:37px;left:84px}:where(html[data-portfolio-page=studio]) .layer-wire i:nth-child(4),:where(html[data-portfolio-page=studio]) .layer-text.short{width:58px;height:7px;top:53px;left:84px}:where(html[data-portfolio-page=studio]) .layer-wire i:nth-child(5),:where(html[data-portfolio-page=studio]) .layer-pill{border-radius:12px;width:52px;height:18px;top:76px;left:84px}:where(html[data-portfolio-page=studio]) .layer-finished{background:var(--studio-ink);animation:2.4s ease-in-out infinite studio-layer-top;transform:translateZ(30px)}:where(html[data-portfolio-page=studio]) .layer-header{background:var(--studio-saffron)}:where(html[data-portfolio-page=studio]) .layer-image{background:var(--studio-rose)}:where(html[data-portfolio-page=studio]) .layer-text{background:var(--studio-lilac)}:where(html[data-portfolio-page=studio]) .layer-text.short{background:var(--studio-teal)}:where(html[data-portfolio-page=studio]) .layer-pill{background:var(--studio-violet)}:where(html[data-portfolio-page=studio]) .studio-loader-caption{text-align:center}:where(html[data-portfolio-page=studio]) .studio-loader-caption span{font-variant-numeric:tabular-nums;min-width:5ch;font:400 13px DM Mono,monospace;display:block}:where(html[data-portfolio-page=studio]) .studio-loader-caption p{color:var(--studio-cream);margin:12px 0 0;font-size:13px}@keyframes studio-stack-rotate{0%{transform:rotateX(55deg)rotate(-30deg)}to{transform:rotateX(55deg)rotate(330deg)}}@keyframes studio-layer-bottom{0%,to{transform:translateZ(-5px)}45%,65%{transform:translateZ(-48px)}85%{transform:translateZ(-5px)}}@keyframes studio-layer-middle{0%,to{transform:translateZ(0)}45%,65%{transform:translateZ(4px)}85%{transform:translateZ(0)}}@keyframes studio-layer-top{0%,to{transform:translateZ(5px)}45%,65%{transform:translateZ(56px)}85%{transform:translateZ(5px)}}@media (prefers-reduced-motion:reduce){:where(html[data-portfolio-page=studio]) .studio-loader .studio-layer-stack,:where(html[data-portfolio-page=studio]) .studio-loader .studio-design-layer{animation:none!important}:where(html[data-portfolio-page=studio]) .studio-wide-frame{transform:none!important}:where(html[data-portfolio-page=studio]) .studio-closeup,:where(html[data-portfolio-page=studio]) .studio-closeup.visible{transition:opacity .2s!important}}:where(html[data-portfolio-page=studio]) .studio-ui .studio-pill{width:auto;height:40px;box-shadow:none;-webkit-backdrop-filter:none;color:#17143a;font-family:var(--studio-body);background:0 0;border:1.5px solid #17143a;border-radius:999px;align-items:center;gap:8px;padding:0 16px;font-size:15px;font-weight:500;line-height:1;text-decoration:none;transition:background-color .2s,color .2s;display:inline-flex}:where(html[data-portfolio-page=studio]) .studio-ui .studio-pill .studio-pill-arrow{color:currentColor;width:15px;height:15px}:where(html[data-portfolio-page=studio]) .studio-ui .studio-pill:hover,:where(html[data-portfolio-page=studio]) .studio-ui .studio-pill:focus-visible{color:#f6f2ea;background:#17143a}:where(html[data-portfolio-page=studio]) .studio-ui .studio-pill:focus-visible{outline-offset:3px;outline:2px solid #17143a}
