@font-face{
  font-family:"Inter Framer";
  src:url("https://framerusercontent.com/assets/GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* Local draft: delayed project affordance without intercepting the cursor. */
@media (hover:hover) and (pointer:fine){
  .real-field.collage-home .project-card:not(.locked-project-card):not(.opening-clone)::after{
    content:"CLICK TO OPEN";
    display:block;
    position:absolute;
    z-index:4;
    right:10px;
    bottom:10px;
    padding:3px 5px 2px;
    border-radius:var(--draft-ui-radius);
    background:var(--draft-ui-paper);
    color:var(--draft-ui-ink);
    font:400 calc(var(--draft-ui-size) * .92)/1 var(--draft-ui-font);
    letter-spacing:var(--draft-ui-track);
    text-transform:uppercase;
    opacity:0;
    transform:translateY(3px);
    pointer-events:none;
    transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1);
    transition-delay:0s;
  }
  .real-field.collage-home .project-card:not(.locked-project-card):not(.dragging):not(.opening-clone):hover::after{
    opacity:1;
    transform:translateY(0);
    transition-delay:3s;
  }
}

:root{font-family:"Inter Framer","Inter","Inter Placeholder",sans-serif;color:#111;background:#dfe0e1;--paper:#dfe0e1;--panel:rgba(250,250,250,.95)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{font:inherit;color:inherit}button{border:0}button:focus-visible,a:focus-visible{outline:2px solid #246bff;outline-offset:2px}
body,:where(button,a,p,h1,h2,h3,time,span,b,strong,small){letter-spacing:-.56px!important}
.canvas{position:fixed;inset:0;overflow:hidden;background:var(--paper)}
.switcher{display:flex;align-items:center;padding:4px;border-radius:12px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);font-size:14px;line-height:18px;letter-spacing:-.7px}
.switcher button{padding:6px 7px;background:transparent;color:#929292;cursor:pointer;white-space:nowrap}.switcher button.active{color:#111}.switcher i{display:block;width:1px;height:19px;background:#a8a8a8}
.top-nav{position:fixed;z-index:50;left:19px;top:20px;height:38px}
.real-field,.fun-field{position:absolute;inset:0;transition:opacity .32s ease,visibility 0s linear .32s}.real-field{opacity:1;visibility:visible}.fun-field{visibility:hidden;opacity:0;background:var(--paper)}.canvas.fun-mode .real-field{visibility:hidden;opacity:0}.canvas.fun-mode .fun-field{visibility:visible;opacity:1;transition:opacity .42s cubic-bezier(.22,1,.36,1)}.canvas.fun-mode .top-nav{gap:3px;padding:0;background:transparent;backdrop-filter:none}.canvas.fun-mode .top-nav i{display:none}.canvas.fun-mode .top-nav button{padding:7px 8px;background:#0c30ff;color:rgba(255,255,255,.42);border-radius:4px;animation:playgroundNavIn .58s cubic-bezier(.16,1,.3,1) both}.canvas.fun-mode .top-nav button:last-child{animation-delay:.1s}.canvas.fun-mode .top-nav button.active{color:#fff;border-radius:15px}@keyframes playgroundNavIn{0%{opacity:0;transform:translateY(-12px) scale(.82);filter:blur(5px)}100%{opacity:1;transform:none;filter:blur(0)}}
.real-field{pointer-events:auto}
.fun-field{pointer-events:none}
.canvas.fun-mode .real-field{pointer-events:none}
.canvas.fun-mode .fun-field{pointer-events:auto}
.project-card{position:absolute;overflow:hidden;border-radius:12px;cursor:grab;touch-action:none;user-select:none;box-shadow:0 2px 4px rgba(0,0,0,.04)}.project-card.dragging{cursor:grabbing;z-index:70!important}.project-card.opening-clone{z-index:200!important;pointer-events:none;cursor:default;box-shadow:0 18px 55px rgba(0,0,0,.1)}.project-card img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.project-card .label{position:absolute;z-index:2;left:13px;top:12px;color:#fff;font-family:"Helvetica Neue",Arial,sans-serif;font-size:12.6px;line-height:15.8px}.project-card:nth-child(3) .label{color:#111}
.bio{position:fixed;z-index:60;bottom:17px;left:50%;display:flex;gap:8px;height:47px;transform:translateX(-50%)}.bio-copy{position:relative;height:47px}.bio p{position:relative;z-index:2;margin:0;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.9);font-size:14px;line-height:18px;letter-spacing:-.7px;white-space:nowrap;transition:color .4s,background .4s}.fun-bottom-shape{position:absolute;z-index:1;inset:0;width:100%;height:100%;opacity:0;transform:scaleX(.94);transition:opacity .45s,transform .65s cubic-bezier(.22,1,.36,1)}.portrait{width:47px;height:47px;padding:0;overflow:hidden;border-radius:11px;background:#fff;cursor:pointer;transition:border-radius .45s,border .45s}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1)}
.profile-popover{--panel-height:548px;position:fixed;z-index:55;left:50%;bottom:73px;width:334px;height:calc(var(--panel-height) + 47px);transform:translate(-1%,70%) scale(.05);transform-origin:60% 100%;opacity:0;pointer-events:none;transition:height .52s cubic-bezier(.22,1,.36,1),transform .46s cubic-bezier(.22,1,.36,1),opacity .15s}.profile-popover.contact-active{--panel-height:212px}.profile-popover.open{transform:translate(-1%,0) scale(1);opacity:1;pointer-events:auto}.profile-tabs{position:relative;z-index:3;width:max-content;margin:0;background:#f7f7f7}.profile-panel{position:absolute;left:0;top:47px;width:334px;border-radius:12px;background:var(--panel);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(9px);pointer-events:none;transition:opacity .24s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s}.profile-panel.active{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:.1s,0s,0s}.career-panel{height:548px;padding:17px 16px;overflow:hidden}.muted{color:#999;font-size:14px;line-height:18px;letter-spacing:-.6px}.heading{margin:0 0 18px}.section-heading{margin:25px 0 17px}.profile-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #dedede;font-size:14px;line-height:18px;letter-spacing:-.5px}.profile-row span{display:block;color:#888}.profile-row time{color:#888;white-space:nowrap}.contact-panel{height:212px;padding:23px 17px}.contact-title{margin:0;font-size:18px;line-height:22px;letter-spacing:-.7px}.contact-copy{max-width:240px;margin:13px 0 20px;color:#8b8b8b;font-size:13px;line-height:17px}.contact-panel>a{display:inline-block;padding:0 0 3px;border-bottom:1px solid #111;text-decoration:none;font-size:14px}.contact-socials{position:absolute;left:17px;right:17px;bottom:17px;display:flex;gap:15px}.contact-socials a{color:#929292;text-decoration:none;font-size:12px}.contact-panel>*{opacity:0;transform:translateY(5px);transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}.contact-panel.active>*{opacity:1;transform:none}.contact-panel.active>*:nth-child(1){transition-delay:.1s}.contact-panel.active>*:nth-child(2){transition-delay:.15s}.contact-panel.active>*:nth-child(3){transition-delay:.2s}.contact-panel.active>*:nth-child(4){transition-delay:.25s}
.fun-item{position:absolute;display:block;object-fit:cover;border:2px solid #dcdcdc;border-radius:13px;box-shadow:0 3px 7px rgba(0,0,0,.13);cursor:grab;touch-action:none;user-select:none;will-change:left,top;transition:box-shadow .2s ease}.fun-item:hover{box-shadow:0 14px 34px rgba(0,0,0,.14)}.fun-item.dragging{z-index:80!important;cursor:grabbing;box-shadow:0 22px 50px rgba(0,0,0,.18)}.fun-rou{left:-1%;top:16%;width:25%;height:55%;transform:rotate(-9deg)}.fun-hand{left:24%;top:24%;width:25%;height:53%;transform:rotate(8deg)}.fun-flower{left:45%;top:20%;width:23%;height:52%;transform:rotate(-4deg)}.fun-fuzzy{left:55%;top:-13%;width:28%;height:44%;object-fit:contain;border:0;box-shadow:none}.fun-yellow{left:8%;top:69%;width:31%;height:30%;object-position:center 54%;transform:rotate(3deg)}.fun-club{right:-4%;top:30%;width:31%;height:54%;transform:rotate(7deg)}.fun-smile{right:5%;top:55%;width:24%;height:38%;object-fit:contain;border:0;box-shadow:none;transform:rotate(-7deg)}.fun-mode .bio p{color:#fff;background:transparent}.fun-mode .fun-bottom-shape{opacity:1;transform:scaleX(1)}.fun-mode .portrait{border-radius:50%;border:3px solid #0c30ff}
.project-view{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}.project-view.preparing,.project-view.open{visibility:visible}.view-backdrop{position:absolute;inset:0;width:100%;height:100%;opacity:0;background:rgba(225,226,227,0);backdrop-filter:blur(0);transition:opacity .62s ease,background-color .62s ease,backdrop-filter .62s cubic-bezier(.22,1,.36,1);pointer-events:none}.project-view.reveal .view-backdrop{opacity:1;background:rgba(225,226,227,.42);backdrop-filter:blur(12px)}.project-view.open{pointer-events:auto}.project-view.open .view-backdrop{pointer-events:auto}.project-scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;opacity:0}.project-view.open .project-scroll{opacity:1}.project-scroll::-webkit-scrollbar{display:none}.slide{min-height:43vh;margin:0;padding:10px 0;display:grid;place-items:center}.slide-media{position:relative;width:min(43vw,648px);height:min(40vh,414px);overflow:hidden;border-radius:13px;background:var(--color);box-shadow:inset 0 0 28px -16px rgba(0,0,0,.19)}.slide-media.selected{width:var(--selected-w);height:var(--selected-h)}.slide-media.selected span{color:var(--selected-label-color)}.slide-media img{width:100%;height:100%;object-fit:cover;display:block}.slide-media span{position:absolute;left:13px;top:13px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:12.6px}.slide:first-child{padding-top:0}.project-info{position:absolute;z-index:5;right:17px;top:17px;width:304px;height:350px;padding:84px 13px 18px;border-radius:15px;background:var(--panel);backdrop-filter:blur(18px);opacity:0;transform:translateY(-9px) scale(.98);transition:opacity .35s .08s ease,transform .5s .04s cubic-bezier(.22,1,.36,1)}.project-view.open .project-info{opacity:1;transform:none}.project-info h1{margin:0 0 7px;font-size:20px;line-height:24px;font-weight:400;letter-spacing:-.8px}.project-info .year{margin:0;color:#8c8c8c;font-size:14px}.project-info strong{margin-left:6px;padding:1px 4px;border-radius:3px;background:#111;color:#fff;font-weight:500}.close{position:absolute;right:8px;top:7px;background:transparent;font-size:22px;cursor:pointer}.rule{height:1px;margin:18px 0;background:#ddd}.project-info>p:last-child{color:#999;font-size:14px;line-height:18px;letter-spacing:-.45px}.scroll-hint{position:absolute;z-index:6;left:42px;top:50%;width:16px;height:72px;padding:4px;border-radius:99px;background:#fff;transform:translateY(-50%);opacity:0;transition:opacity .35s .15s}.project-view.open .scroll-hint{opacity:1}.scroll-hint i{display:block;width:8px;height:19px;border-radius:99px;background:#111}
@media(max-width:760px){.project-card{transform:none!important}.bio{bottom:10px;width:calc(100% - 20px)}.bio-copy{flex:1}.bio p{width:100%;padding:10px 12px;font-size:11px;white-space:normal}.profile-popover{left:auto;right:10px;bottom:65px;transform-origin:100% 100%}.profile-popover.open{transform:scale(1)}.project-info{left:10px;right:10px;top:10px;width:auto;height:180px;padding-top:47px}.slide{min-height:60vh}.slide-media,.slide-media.tall{width:88vw;height:46vh}.scroll-hint{display:none}.fun-item{transform:none}.fun-rou{left:-7%;top:17%;width:48%}.fun-hand{left:28%;top:27%;width:44%}.fun-flower{left:54%;top:17%;width:44%}.fun-club{right:-12%;top:52%;width:58%}.fun-yellow{left:-7%;top:66%;width:55%}.fun-smile{right:3%;top:68%;width:43%}}

/* The profile always opens leftwards from the portrait and stays over draggable work. */
.top-nav,.bio{z-index:310}
.profile-popover{z-index:300;transform:translateY(70%) scale(.05);transform-origin:100% 100%}
.profile-popover.open{transform:translateY(0) scale(1)}
.project-card.dragging,.fun-item.dragging{z-index:40!important}

/* Compact sizing measured from the supplied Framer reference. */
.switcher{font-size:13px;line-height:17px}
.top-nav{left:20px;height:41px;border-radius:8px}
.top-nav button:first-child{padding:6px 15px 6px 7px}
.top-nav button:last-child{padding:6px 3px 6px 11px}
.bio{bottom:19px;height:45px}
.bio-copy{height:45px}
.bio p{height:45px;padding:14px 14px;font-size:13px;line-height:17px}
.portrait{width:45px;height:45px;min-width:45px}

/* Keep these last so older experimental rules cannot override the reference motion. */
.top-nav{animation:realNavAppear 1.5s cubic-bezier(.22,1,.36,1) both}
.bio-copy,.portrait{animation:realInfoAppear 1.5s cubic-bezier(.22,1,.36,1) both}
.canvas.fun-mode .top-nav{animation:funNavFade .4s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .top-nav button:first-child{animation:funNavDrop .6s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .top-nav button:last-child{animation:funNavFlip .4s cubic-bezier(.22,1.12,.36,1) both;animation-delay:0s}
.canvas.fun-mode .bio-copy{animation:funInfoScale .4s cubic-bezier(.22,1.12,.36,1) both}

/* Portrait: stable mode switch, visible stroke and image-only press morph. */
.portrait{
  box-sizing:border-box;
  padding:2px;
  border:2px solid #fff;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.portrait img{
  display:block;
  width:100%;
  height:100%;
  border-radius:4px;
  transform:translateZ(0);
  transition:border-radius .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1);
  will-change:border-radius,transform;
}
.portrait:active img{
  border-radius:50%;
  transform:scale(.96) translateZ(0);
}
@keyframes portraitTurn{
  0%{transform:rotate(0deg) scale(1) translateZ(0)}
  48%{transform:rotate(190deg) scale(.94) translateZ(0)}
  100%{transform:rotate(360deg) scale(1) translateZ(0)}
}
.portrait img.portrait-spin{
  animation:portraitTurn .68s cubic-bezier(.22,1,.36,1) both;
}
@keyframes portraitMusicSpin{
  from{transform:rotate(0deg) translateZ(0)}
  to{transform:rotate(360deg) translateZ(0)}
}
.canvas.fun-mode .portrait img.music-spinning{
  transform-origin:50% 50%!important;
  animation-name:portraitMusicSpin!important;
  animation-duration:2.4s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-play-state:running!important;
}
.canvas.fun-mode .portrait{
  width:47px;
  height:47px;
  min-width:47px;
  padding:3px;
  border:3px solid #0c30ff;
  border-radius:50%;
  animation:none;
}
.canvas.fun-mode .portrait img{border-radius:50%}

/* Project information contracts cleanly into its top-right corner. */
.project-info{
  transform-origin:100% 0;
  will-change:transform;
}
.project-view.closing .project-info{
  opacity:0;
  transform:translate3d(0,0,0) scale(.045);
  transition:
    transform .52s cubic-bezier(.76,0,.24,1),
    opacity .2s .24s ease-out;
}

/* Final label sizing lock. */
.canvas.fun-mode .fun-field .fun-item span{
  left:13px;
  top:12px;
  font-size:12.6px;
  line-height:15.8px;
}

/* Work for fun project labels match Real work exactly. */
.fun-field .fun-item span{
  left:13px;
  top:12px;
  font-size:12.6px;
  line-height:15.8px;
}

/* Profile popup: minimal on Real work, gentle scale on Playground. */
.profile-popover{
  transform:translateY(6px);
  transform-origin:100% 100%;
  transition:height .52s cubic-bezier(.22,1,.36,1),opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1);
}

/* Content-sized project information panels */
.project-info {
  height: auto;
  min-height: 0;
}

.project-info h1,
.project-info > p:last-child {
  letter-spacing: -.56px !important;
}

@media (max-width: 760px) {
  .project-info {
    height: auto;
    min-height: 0;
  }
}
.profile-popover.open{transform:translateY(0)}
.canvas.fun-mode .profile-popover{transform:translateY(8px) scale(.92)}
.canvas.fun-mode .profile-popover.open{transform:translateY(0) scale(1)}

/* Profile popup: minimal on Real work, gentle scale on Playground. */
.profile-popover{
  transform:translateY(6px);
  transform-origin:100% 100%;
  transition:height .52s cubic-bezier(.22,1,.36,1),opacity .3s ease,transform .38s cubic-bezier(.22,1,.36,1);
}
.profile-popover.open{transform:translateY(0)}
.canvas.fun-mode .profile-popover{transform:translateY(8px) scale(.92)}
.canvas.fun-mode .profile-popover.open{transform:translateY(0) scale(1)}

/* Final motion precedence: preserve the reference animations over legacy rules. */
.top-nav{animation:realNavAppear 1.5s cubic-bezier(.22,1,.36,1) both}
.bio-copy,.portrait{animation:realInfoAppear 1.5s cubic-bezier(.22,1,.36,1) both}
.canvas.fun-mode .top-nav{animation:funNavFade .4s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .top-nav button:first-child{animation:funNavDrop .6s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .top-nav button:last-child{animation:funNavFlip .4s cubic-bezier(.22,1.12,.36,1) both;animation-delay:0s}
.canvas.fun-mode .bio-copy{animation:funInfoScale .4s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .portrait{animation:none}

/* Every textual element stays Inter Regular: never synthesize bold. */
body :where(button,a,p,h1,h2,h3,b,strong,small,time,span){
  font-family:"Inter",Arial,sans-serif!important;
  font-weight:400!important;
  font-synthesis:none!important;
}

/* Appear motions copied from the Framer reference values. */
.top-nav{
  animation:realNavAppear 1.5s cubic-bezier(.22,1,.36,1) both;
}
.bio-copy,.portrait{
  animation:realInfoAppear 1.5s cubic-bezier(.22,1,.36,1) both;
}
.canvas.fun-mode .top-nav{
  animation:funNavFade .4s cubic-bezier(.22,1.12,.36,1) both;
}
.canvas.fun-mode .top-nav button:first-child{
  animation:funNavDrop .6s cubic-bezier(.22,1.12,.36,1) both;
}
.canvas.fun-mode .top-nav button:last-child{
  animation:funNavFlip .4s cubic-bezier(.22,1.12,.36,1) both;
  animation-delay:0s;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.canvas.fun-mode .bio-copy,
.canvas.fun-mode .portrait{
  animation:funInfoScale .4s cubic-bezier(.22,1.12,.36,1) both;
}
@keyframes realNavAppear{
  from{opacity:.001;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes realInfoAppear{
  from{opacity:.001}
  to{opacity:1}
}
@keyframes funNavFade{
  from{opacity:.001}
  to{opacity:1}
}
@keyframes funNavDrop{
  from{opacity:.001;transform:translateY(-150px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes funNavFlip{
  from{transform:rotateY(-180deg)}
  to{transform:rotateY(0)}
}
@keyframes funInfoScale{
  from{opacity:.001;transform:scale(.5)}
  to{opacity:1;transform:scale(1)}
}
.canvas.fun-mode .top-nav button{font-weight:400;font-synthesis:none}
.canvas.fun-mode .bio p{font-weight:400;font-synthesis:none}

/* Exact navigation geometry from the Framer reference. */
.top-nav{
  left:20px;
  top:20px;
  width:auto;
  height:40.796875px;
  padding:12px 10px;
  gap:10px;
  border-radius:6px;
  background:#f5f5f5;
  backdrop-filter:none;
}
.top-nav button,
.top-nav button:first-child,
.top-nav button:last-child{
  padding:0;
  border-radius:0;
  font-size:14px;
  font-weight:400;
  line-height:16.8px;
  letter-spacing:-.56px!important;
}
.top-nav button:first-child{width:60.03125px;text-align:left}
.top-nav button:last-child{width:auto;text-align:left}
.top-nav i{
  position:relative;
  width:4.1015625px;
  height:16.8px;
  flex:none;
  background:transparent;
}
.top-nav i::before{
  content:"|";
  position:absolute;
  inset:0;
  color:#c2c2c2;
  font-size:14px;
  font-weight:400;
  line-height:16.8px;
  letter-spacing:-.56px;
}
.top-nav .nav-separator{
  display:block;
  width:4.1015625px;
  height:16.8px;
  flex:none;
  color:#c2c2c2;
  background:transparent;
  font-size:14px;
  font-weight:400;
  line-height:16.8px;
  letter-spacing:-.56px!important;
}
.canvas.fun-mode .top-nav .nav-separator{display:none}
.canvas.fun-mode .top-nav{
  width:auto;
  height:40.796875px;
  padding:0;
  gap:3px;
  background:transparent;
}
.canvas.fun-mode .top-nav button,
.canvas.fun-mode .top-nav button:first-child,
.canvas.fun-mode .top-nav button:last-child{
  width:auto;
  height:40.796875px;
  padding:12px 10px;
  background:#0c30ff;
  animation:referenceNavIn .36s ease-out both;
}
.canvas.fun-mode .top-nav button:first-child{border-radius:6px;color:rgba(255,255,255,.42)}
.canvas.fun-mode .top-nav button:last-child{border-radius:999px;color:#fff;animation-delay:.035s}
@keyframes referenceNavIn{from{opacity:0}to{opacity:1}}

/* Exact lower information capsule from the same reference. */
.bio{bottom:20px;height:45px;gap:6px}
.bio-copy{height:44.796875px}
.bio p{
  height:44.796875px;
  padding:14px 12px;
  border-radius:6px;
  background:#f5f5f5;
  font-size:14px;
  font-weight:400;
  line-height:16.8px;
  letter-spacing:-.56px!important;
}
.portrait{width:45px;height:45px;min-width:45px}

/* Final reference motion overrides. */
.top-nav{animation:realNavAppear 1.5s cubic-bezier(.22,1,.36,1) both}
.bio-copy,.portrait{animation:realInfoAppear 1.5s cubic-bezier(.22,1,.36,1) both}
.canvas.fun-mode .top-nav{animation:funNavFade .4s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .top-nav button:first-child{animation:funNavDrop .6s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .top-nav button:last-child{animation:funNavFlip .4s cubic-bezier(.22,1.12,.36,1) both;animation-delay:0s}
.canvas.fun-mode .bio-copy{animation:funInfoScale .4s cubic-bezier(.22,1.12,.36,1) both}
.canvas.fun-mode .portrait{
  padding:3px;
  border:3px solid #0c30ff;
  background:#0c30ff;
  animation:none;
}

/* The white rail clips the thumb while it enters from above. */
.scroll-hint{
  --thumb-y:0px;
  opacity:0;
  overflow:hidden;
  clip-path:none;
  transform:translateY(-50%);
  transition:opacity .24s .18s ease;
}
.project-view.open .scroll-hint{
  opacity:1;
  transform:translateY(-50%);
  transition-delay:0s;
}
.scroll-hint i{
  transform:translate3d(0,var(--thumb-y),0);
  transition:none;
  will-change:transform;
  backface-visibility:hidden;
}
.project-view.open .scroll-hint i{
  transform:translate3d(0,var(--thumb-y),0);
}

/* Seamless handoff between a card and its centered project view. */
.project-scroll{transition:opacity .19s cubic-bezier(.22,1,.36,1)}
.project-card.opening-clone{will-change:left,top,opacity}
.project-card.opening-clone{animation:none!important;transition:none!important}
.project-return-clone{
  box-sizing:border-box;
  z-index:40!important;
  overflow:hidden;
  margin:0;
  border-radius:12px;
  background:var(--color,#eee);
  pointer-events:none;
  box-shadow:0 18px 55px rgba(0,0,0,.1);
}
.project-return-clone img{width:100%;height:100%;display:block;object-fit:cover}
.project-return-clone span{position:absolute;left:13px;top:13px;font-size:12.6px}

/* Project names live on the overview only, not inside the opened loop. */
.project-card .label{transition:opacity .28s ease}
.project-card.project-active .label{opacity:0}

/* Exact wider lower frame used by the Work for fun reference page. */
.canvas.fun-mode .bio-copy{
  width:521px;
  height:46px;
  flex:none;
}
.canvas.fun-mode .bio-copy p{
  width:100%;
  height:46px;
  padding:14px 18px;
  text-align:center;
}
.bio-text-fun{display:none}
.canvas.fun-mode .bio-text-real{display:none}
.canvas.fun-mode .bio-text-fun{display:block}
.canvas.fun-mode .fun-bottom-shape{width:100%;height:46px}

@media(max-width:760px){
  .real-field.collage-home{
    padding-bottom:60px!important;
  }
  .canvas.fun-mode .fun-field{
    padding-bottom:51px!important;
  }
  .canvas.fun-mode .bio-copy{width:auto;flex:1}
}

/* Keep the blur composited before reveal; only opacity changes on opening. */
.view-backdrop{
  opacity:0;
  background:rgba(225,226,227,.42);
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
  transform:translateZ(0);
  backface-visibility:hidden;
  contain:strict;
  will-change:opacity;
  transition:opacity .58s cubic-bezier(.22,1,.36,1);
}
.project-view.reveal .view-backdrop{
  opacity:1;
  background:rgba(225,226,227,.42);
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
}

/* Work for fun portrait is born circular; it never morphs from the square. */
@keyframes funPortraitScaleIn{
  0%{opacity:0;transform:scale(.5)}
  100%{opacity:1;transform:scale(1)}
}
.canvas.fun-mode .portrait{
  width:47px;
  height:47px;
  min-width:47px;
  padding:3px;
  border:3px solid #0c30ff;
  border-radius:50%;
  background:#0c30ff;
  transition:none;
  transform-origin:50% 50%;
  animation:funPortraitScaleIn .4s cubic-bezier(.22,1.12,.36,1) both;
}
.canvas.fun-mode .portrait img{
  border-radius:50%;
  transition:none;
}

/* Work for fun projects: reference composition at 1280 × 810. */
.fun-field .fun-item{margin:0;overflow:hidden;border:0;border-radius:15px;background:transparent;box-shadow:none;transform:none}
.fun-field .fun-item img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;border-radius:inherit}
.fun-field .fun-item span{position:absolute;z-index:2;left:13px;top:12px;font-size:12.6px;line-height:15.8px;letter-spacing:-.4px!important;pointer-events:none}
.fun-type{left:52.75%;top:54.8%;width:31.7%;height:34.2%}
.fun-character{left:6.85%;top:20.5%;width:24.4%;height:33.8%}
.fun-image{left:25.234%;top:50%;width:22.813%;height:31.481%}
.fun-square{left:48.828%;top:26.111%;width:30.234%;height:47.778%}
.fun-skating{left:13%;top:57%;width:22%;height:35%;overflow:visible!important}
.fun-skating img{object-fit:contain!important}
.fun-picara{left:70%;top:2%;width:23%;height:61%;overflow:visible!important}
.fun-picara img{object-fit:contain!important;transform:rotate(-11deg);transform-origin:center;transition:transform .72s cubic-bezier(.22,1,.36,1)}
.fun-bocata{left:41.5%;top:23.2%;width:28.3%;height:25%}
.fun-bocata img{object-fit:cover!important}
.fun-learning{left:37%;top:12%;width:31%;height:auto;aspect-ratio:2280/1350}
.fun-learning img{object-fit:cover!important}

/* Work for fun: free composition / ordered horizontal gallery switch. */
.fun-utility{
  position:fixed;
  z-index:500;
  top:16px;
  right:20px;
  display:flex;
  align-items:center;
  gap:0;
  width:auto;
  height:40.796875px;
  box-sizing:border-box;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
/* Fixed children can briefly outlive a fading parent in Chromium. Hide the
   Playground controls immediately when returning to Real work so their pill
   background can never flash around the eyes. */
.canvas:not(.fun-mode) .fun-utility{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.canvas.fun-mode .fun-utility{
  opacity:1;
  visibility:visible;
}
.fun-tools{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:21px;
  height:21px;
  padding:0;
  border-radius:50%;
  background:transparent;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.fun-tools::after{
  content:"";
  position:absolute;
  left:auto;
  right:-7.5px;
  top:3.5px;
  width:1px;
  height:14px;
  display:block;
  background:rgba(12,48,255,.16);
}
.layout-eyes{
  position:relative;
  z-index:1;
  display:block;
  width:39px;
  height:20px;
  padding:0;
  cursor:pointer;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.layout-eyes svg{display:block;width:39px;height:20px;overflow:visible}
.fun-utility .layout-eyes circle[stroke]{stroke:#0c30ff}
.fun-utility .layout-eyes .animated-pupil{fill:#0c30ff}
.layout-eyes .animated-pupil{
  transition:transform .52s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.music-toggle{
  position:relative;
  z-index:1;
  width:21px;
  height:21px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#0c30ff;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .25s ease,color .25s ease;
}
.music-toggle:hover{transform:scale(1.06)}
.music-toggle[aria-expanded="true"]{background:transparent;color:#0c30ff}
.music-toggle .vinyl-icon{display:block;width:21px;height:21px;margin:auto;pointer-events:none;transform-origin:50% 50%}
.fun-utility .music-toggle .vinyl-icon{filter:none}
.music-toggle[aria-expanded="true"] .vinyl-icon{filter:none}
.fun-utility .music-toggle[aria-expanded="true"] .vinyl-icon{filter:none}
.music-toggle.is-playing .vinyl-icon{animation:vinylSpin 1.8s linear infinite}
@keyframes vinylSpin{to{transform:rotate(360deg)}}
.thought-toggle{width:25px;height:25px;padding:0;background:transparent;color:#0c30ff;cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.thought-toggle:hover{transform:scale(1.06)}
.thought-toggle svg{display:block;width:24px;height:21px;overflow:visible;fill:#0c30ff}
.thought-panel{position:fixed;z-index:490;top:64px;right:83px;width:245px;min-height:126px;padding:18px;border-radius:14px;background:rgba(245,245,245,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.97);transform-origin:100% 0;transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s}
.thought-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.thought-panel>span{display:block;color:#9e9e9e;font-size:13px;line-height:17px}
.thought-panel p{margin:20px 0 0;font-size:14px;line-height:18px;color:#111}
.thought-close{position:absolute;right:10px;top:7px;padding:0;background:transparent;font-size:19px;line-height:19px;cursor:pointer}
.now-playing{
  position:fixed;
  z-index:490;
  top:70px;
  right:20px;
  display:grid;
  grid-template-columns:66px 1fr auto;
  grid-template-rows:1fr 30px;
  gap:5px 10px;
  width:286px;
  min-height:98px;
  padding:9px;
  border-radius:14px;
  background:#fff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-7px) scale(.97);
  transform-origin:100% 0;
  transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s;
}
.now-playing.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.track-art{position:relative;grid-row:1/3;width:66px;height:80px;overflow:hidden;border-radius:9px;background:#0c30ff}
.track-art.has-cover{background-position:center;background-size:cover;background-repeat:no-repeat}
.track-art.has-cover i{display:none}
.track-art i{position:absolute;width:40px;height:40px;border:2px solid #fff;border-radius:50%}
.track-art i:nth-child(1){left:-12px;top:8px}.track-art i:nth-child(2){right:-10px;top:-7px}.track-art i:nth-child(3){left:18px;bottom:-18px;background:#fff}
.track-copy{align-self:center;min-width:0;font:400 12px/14px "Inter",Arial,sans-serif;letter-spacing:-.48px}
.track-copy span{display:block;color:#9e9e9e}.track-copy p{margin:1px 0 0;overflow:hidden;color:#111;white-space:nowrap;text-overflow:ellipsis}
.track-play{grid-column:2;grid-row:2;align-self:end;justify-self:start;width:28px;height:28px;padding:0;border-radius:50%;background:#ededed;color:#0c30ff;cursor:pointer;transition:transform .25s ease,background .25s ease}
.track-play:hover{transform:scale(1.07);background:#e2e2e2}
.track-play img{display:block;width:12px;height:12px;margin:auto;pointer-events:none}
.track-play .pause-icon{display:none}
.track-play[aria-pressed="true"] .play-icon{display:none}
.track-play[aria-pressed="true"] .pause-icon{display:block}
.track-next{grid-column:2;grid-row:2;align-self:end;justify-self:start;width:28px;height:28px;margin-left:34px;padding:0;border-radius:50%;background:#ededed;color:#0c30ff;cursor:pointer;transition:transform .25s ease,background .25s ease}
.track-next:hover{transform:scale(1.07);background:#e2e2e2}
.track-next img{display:block;width:12px;height:12px;margin:auto;pointer-events:none}
.track-levels{grid-column:3;grid-row:2;display:flex;align-items:center;justify-content:flex-end;align-self:center;gap:2px;height:20px;padding-right:5px}
.track-levels i{display:block;width:2px;height:4px;border-radius:9px;background:#0c30ff;transform-origin:50% 100%}
.now-playing.playing .track-levels i{animation:trackLevel .72s ease-in-out infinite alternate}
.now-playing.playing .track-levels i:nth-child(2){animation-delay:-.3s}.now-playing.playing .track-levels i:nth-child(3){animation-delay:-.5s}.now-playing.playing .track-levels i:nth-child(4){animation-delay:-.15s}
@keyframes trackLevel{to{height:17px}}
.fun-field.ordered .layout-eyes .pupil-left{transform:translate(-2.9423px,7.2735px)}
.fun-field.ordered .layout-eyes .pupil-right{transform:translate(2.3985px,2.2735px)}
.fun-field .fun-item{
  transition:box-shadow .2s ease;
}
.fun-field.layout-changing .fun-item{
  transition:left .72s cubic-bezier(.22,1,.36,1),top .72s cubic-bezier(.22,1,.36,1),width .72s cubic-bezier(.22,1,.36,1),height .72s cubic-bezier(.22,1,.36,1),border-radius .5s ease;
}
.fun-field .fun-item.dragging{
  transition:none!important;
  will-change:transform;
}
.fun-field .fun-item span{
  opacity:0;
  transition:opacity .3s ease,color .3s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.fun-field.ordered{
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:ew-resize;
}
.fun-field.ordered::-webkit-scrollbar{display:none}
.fun-field.ordered::after{content:"";position:absolute;left:0;top:0;width:calc(193.5vw + 20px);height:1px;pointer-events:none}
.fun-field.ordered .fun-item{
  top:29%!important;
  width:27vw!important;
  height:43vh!important;
  overflow:visible;
  border-radius:13px;
  cursor:default;
  box-shadow:none!important;
}
.fun-field.ordered .fun-item img{overflow:hidden;border-radius:13px;object-fit:cover}
.fun-field.ordered .fun-item span{
  left:0!important;
  top:-30px!important;
  color:#0c30ff;
  opacity:1;
  transform:translateY(0);
}
.fun-field.ordered .fun-type{left:36.5vw!important}
.fun-field.ordered .fun-skating{left:66.5vw!important;overflow:visible!important}
.fun-field.ordered .fun-character{left:96.5vw!important}
.fun-field.ordered .fun-bocata{left:126.5vw!important}
.fun-field.ordered .fun-picara{left:156.5vw!important;overflow:visible!important}
.fun-field.ordered .fun-picara img{transform:scale(1) rotate(0deg)}
.fun-field.ordered .fun-learning{left:186.5vw!important;width:31vw!important;height:calc(31vw * 1350 / 2280)!important;aspect-ratio:2280/1350!important}
@media(max-width:760px){
  .fun-type{left:51%;top:53%;width:45%;height:27%}
  .fun-character{left:4%;top:24%;width:42%;height:31%}
  .fun-image{left:12%;top:58%;width:40%;height:27%}
  .fun-square{left:48%;top:35%;width:48%;height:36%}
  .fun-picara{left:64%;top:1%;width:34%;height:56%}
  .fun-bocata{left:32%;top:70%;width:55%;height:23%}
  .fun-learning{left:36%;top:11%;width:56%;height:auto;aspect-ratio:2280/1350}
}

/* The body has the same breathing room above and below. */
.project-info{padding-right:13px;padding-bottom:18px;padding-left:13px}
.project-info>p:last-child{margin:0}

/* Gallery media keeps each source image's own dimensions and aspect ratio. */
.slide-media.has-image,
.slide-media.has-image.selected{
  width:auto;
  height:auto;
  max-width:70vw;
  max-height:76vh;
  display:inline-block;
  background:transparent;
}
.slide-media.has-image img{
  width:auto;
  height:auto;
  max-width:70vw;
  max-height:76vh;
  object-fit:contain;
}

/* Keep a permanent clear rail for the project information panel. */
@media(min-width:761px){
  .project-scroll .slide{
    box-sizing:border-box;
    padding-right:338px;
  }
  .slide-media,
  .slide-media.has-image,
  .slide-media.has-image.selected,
  .slide-media.has-image img{
    max-width:min(70vw,calc(100vw - 390px));
  }
  .slide-media.has-image.selected{
    width:min(var(--selected-w),calc(100vw - 390px));
    height:min(var(--selected-h),72vh);
  }
}

/* Playground is outside this experiment. Restore its established UI exactly. */
.canvas.fun-mode .top-nav{
  top:20px;
  left:20px;
  width:auto;
  height:40.796875px;
  min-height:0;
  padding:0!important;
  gap:3px;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font:400 14px/16.8px "Inter",Arial,sans-serif!important;
  letter-spacing:-.56px!important;
  text-transform:none!important;
}
.canvas.fun-mode .top-nav .nav-separator{display:none!important}
.canvas.fun-mode .top-nav button,
.canvas.fun-mode .top-nav button:first-child,
.canvas.fun-mode .top-nav button:last-child{
  width:auto!important;
  height:40.796875px!important;
  padding:12px 10px!important;
  border-radius:6px!important;
  background:#0c30ff!important;
  color:rgba(255,255,255,.42)!important;
  font:400 14px/16.8px "Inter",Arial,sans-serif!important;
  letter-spacing:-.56px!important;
  text-transform:none!important;
}
.canvas.fun-mode .top-nav button.active,
.canvas.fun-mode .top-nav button:last-child{
  border-radius:999px!important;
  color:#fff!important;
}
.canvas.fun-mode .bio{
  bottom:20px;
  height:47px;
  gap:6px;
}
.canvas.fun-mode .bio-copy{height:44.796875px}
.canvas.fun-mode .bio p{
  width:auto;
  max-width:none;
  height:44.796875px;
  padding:14px 12px;
  overflow:visible;
  border-radius:6px!important;
  background:transparent!important;
  color:#fff!important;
  font:400 14px/16.8px "Inter",Arial,sans-serif!important;
  letter-spacing:-.56px!important;
  text-transform:none!important;
  text-overflow:clip;
  white-space:nowrap;
}
.canvas.fun-mode .portrait{
  width:47px;
  min-width:47px;
  height:47px;
  padding:3px;
  border:3px solid #0c30ff;
  border-radius:50%!important;
}
.canvas.fun-mode .portrait img{border-radius:50%!important}

@media(max-width:760px){
  .canvas.fun-mode .top-nav{top:20px;left:20px}
  .canvas.fun-mode .bio{
    bottom:10px;
    width:calc(100% - 20px);
    max-width:none;
  }
  .canvas.fun-mode .bio-copy{min-width:0;flex:1}
  .canvas.fun-mode .bio p{
    width:100%;
    max-width:none;
    padding:10px 12px;
    font-size:11px!important;
    line-height:16.8px!important;
    white-space:normal;
  }
}

@media(max-width:760px){
  .slide-media.has-image,
  .slide-media.has-image.selected,
  .slide-media.has-image img{width:auto;height:auto;max-width:88vw;max-height:68vh}
}

/* The selected cover keeps the exact size it had on the overview. */
.slide-media.has-image.selected{
  width:var(--selected-w);
  height:var(--selected-h);
  max-width:none;
  max-height:none;
}
.slide-media.has-image.selected img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  transform:scale(var(--selected-scale,1));
}

/* Real work profile panel — geometry and typography from the reference. */
.profile-popover{
  --panel-height:548px;
  z-index:300;
  bottom:68px;
  width:334px;
  height:calc(var(--panel-height) + 47px);
  opacity:0;
  transform:translateY(8px);
  transform-origin:100% 100%;
  pointer-events:none;
  transition:height .52s cubic-bezier(.22,1,.36,1),opacity .24s ease,transform .42s cubic-bezier(.22,1,.36,1);
}
.profile-popover.contact-active{--panel-height:212px}
.profile-popover.open{opacity:1;transform:translateY(0);pointer-events:auto}
.profile-popover:not(.open),
.profile-popover:not(.open) *{
  pointer-events:none!important;
}
.profile-popover.open .profile-tabs,
.profile-popover.open .profile-tabs *,
.profile-popover.open .profile-panel.active,
.profile-popover.open .profile-panel.active *{
  pointer-events:auto;
}
.profile-tabs{
  width:max-content;
  height:40.796875px;
  margin:0;
  padding:0 10px;
  gap:10px;
  border-radius:6px;
  background:#f5f5f5;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  font-family:"Inter",Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:16.8px;
  letter-spacing:-.56px!important;
}
.profile-tabs button{padding:0;background:transparent;font-weight:400}
.profile-tabs i{width:1px;height:16.8px;background:#c2c2c2}
.profile-panel{
  top:47px;
  width:334px;
  border-radius:12px;
  background:rgba(245,245,245,.96);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  color:#111;
  font-family:"Inter",Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:18px;
  letter-spacing:-.56px!important;
}
.career-panel{height:548px;padding:17px 16px}
.contact-panel{height:212px;padding:23px 17px}
.muted,.profile-row span,.profile-row time,.contact-copy,.contact-socials a{color:#8c8c8c}
.profile-row{font-size:14px;line-height:18px;letter-spacing:-.56px!important;border-color:#dedede}
.canvas.fun-mode .portrait{cursor:default}
.canvas.fun-mode .profile-popover{display:none!important}

/* Exact profile modal measurements from the Framer reference (1280 px viewport). */
.profile-popover{
  --panel-height:475.1875px;
  z-index:320;
  width:281px;
  height:522px;
  transition:height .52s cubic-bezier(.22,1,.36,1),opacity .24s ease,transform .42s cubic-bezier(.22,1,.36,1);
}
.profile-popover.contact-active{--panel-height:212px;height:258.796875px}
.profile-tabs{
  width:max-content;
  height:40.796875px;
  padding:12px 10px;
  gap:10px;
  border-radius:6px;
  background:#f5f5f5;
}
.profile-tabs button{
  height:16.796875px;
  color:#c2c2c2;
  font:400 14px/16.8px "Inter",Arial,sans-serif;
  letter-spacing:-.56px!important;
}
.profile-tabs button.active{color:#000}
.profile-tabs i{flex:0 0 1px;width:1px;height:16.796875px;background:#c2c2c2}
.profile-panel{
  top:47px;
  width:281px;
  border-radius:6px;
  clip-path:none;
  overflow:clip;
  background-clip:padding-box;
  -webkit-mask-image:none;
  isolation:isolate;
  background:#f5f5f5;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  font:400 14px/16.8px "Inter",Arial,sans-serif;
  letter-spacing:-.56px!important;
}
.career-panel{
  height:475px;
  padding:20px 10px;
}
.career-panel .muted{color:#9e9e9e;font-size:14px;line-height:16.8px;letter-spacing:-.56px!important}
.career-panel .heading{margin:0 0 40px}
.career-panel .section-heading{margin:0 0 40px}
.career-panel .profile-row{
  position:relative;
  display:block;
  flex:none;
  width:261px;
  margin:0 0 20px;
  padding:0 0 20px;
  border-bottom:1px solid #dedede;
  font:400 14px/16.8px "Inter",Arial,sans-serif;
  letter-spacing:-.56px!important;
}
.career-panel .profile-row:nth-of-type(-n+2){height:85.796875px}
.career-panel .profile-row:nth-of-type(n+3){height:55px}
.career-panel .profile-row:nth-of-type(4){margin-bottom:0}
.career-panel .profile-row:last-child{border-bottom:0}
.career-panel .profile-row div{line-height:16.8px}
.career-panel .profile-row span{display:block;color:#696969;line-height:16.8px}
.career-panel .profile-row span:first-child{margin-top:1px}
.career-panel .profile-row span+span{margin-top:14px}
.career-panel .profile-row time{position:absolute;top:0;right:0;color:#696969;line-height:16.8px}
.career-panel .profile-row:nth-of-type(2)+.section-heading{margin-top:0}
.career-panel .profile-row:nth-of-type(4)+.section-heading{margin-top:0}

/* Keep the whole project surface draggable—never show text/image editing cursors. */
.project-card,
.project-card *,
.fun-item,
.fun-item *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.project-card,.project-card *{cursor:grab!important}
.project-card.dragging,.project-card.dragging *{cursor:grabbing!important}
.project-card.opening-clone,.project-card.opening-clone *{cursor:default!important}

/* Exact Let´s talk panel from the reference. */
.profile-popover.contact-active{
  --panel-height:241.9875px;
  height:288.784375px;
}
.contact-panel{
  top:46.796875px;
  width:281px;
  height:241.9875px;
  padding:20px 10px;
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow:hidden;
  border-radius:6px;
  background:#f5f5f5;
  font:400 14px/16.8px "Inter",Arial,sans-serif;
  letter-spacing:-.56px!important;
}
.contact-panel .talk-social{
  flex:0 0 146.9875px;
  padding:0 0 20px;
  border-bottom:1px solid #dedede;
}
.contact-panel .talk-heading{
  margin:0 0 40px;
  color:#9e9e9e;
  font:inherit;
}
.contact-panel .talk-links{display:flex;flex-direction:column;gap:1px}
.contact-panel .talk-links a{color:#000}
.contact-panel a{
  display:block;
  width:max-content;
  padding:0;
  border:0;
  color:#929292;
  font:inherit;
  letter-spacing:inherit;
  text-decoration:none;
}
.contact-panel .talk-email{display:flex;flex-direction:column;gap:1px}
.contact-panel .talk-email p{margin:0;color:#000;font:inherit}
.contact-panel .talk-email a{color:#696969}
.contact-panel>*{
  opacity:0;
  transform:translateY(5px);
  transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.contact-panel.active>*{opacity:1;transform:none}
.contact-panel.active>*:nth-child(1){transition-delay:.08s}
.contact-panel.active>*:nth-child(2){transition-delay:.13s}

/* Tabs swap directly; only the modal's height performs the smooth bounce. */
.profile-panel,
.profile-panel.active{
  transform:none!important;
  transition:none!important;
}
.contact-panel>*,
.contact-panel.active>*{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

/* Flat project handoff: no elevation or shadow while travelling to/from center. */
.project-card.opening-clone,
.project-return-clone,
.slide-media.selected{
  box-shadow:none!important;
}

/* Maison Vérité artwork is slightly smaller; its opening cover stays unchanged. */
.project-scroll.afterlight-gallery .slide-media.has-image:not(.selected),
.project-scroll.afterlight-gallery .slide-media.has-image:not(.selected) img{
  max-width:66vw;
  max-height:72vh;
}

/* Reliable full-card hit area for click + free drag. */
#projectField{
  -webkit-user-select:none!important;
  user-select:none!important;
  caret-color:transparent;
}
.project-card:not(.opening-clone){
  pointer-events:auto!important;
  -webkit-touch-callout:none;
  caret-color:transparent;
  isolation:isolate;
}
.project-card:not(.opening-clone)::after{
  content:none;
  display:none;
  pointer-events:none;
}
.project-card,
.project-card:not(.opening-clone){
  cursor:grab!important;
  pointer-events:auto!important;
}
.project-card.dragging{cursor:grabbing!important;will-change:transform}
.project-card .label,
.project-card .label *,
.project-card img{pointer-events:none!important}

/* Per-letter decoder without text reflow. */
.decoder-word{white-space:nowrap}
.decoder-char{
  display:inline-block;
  text-align:center;
  vertical-align:baseline;
  pointer-events:auto;
}
.decoder-probe{
  position:absolute!important;
  visibility:hidden!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}

/* Every gallery item has the same edge-to-edge spacing, regardless of its size. */
.project-scroll .slide{
  min-height:0;
  margin:0 0 40px;
  padding:0;
  overflow-anchor:none;
  contain:layout paint style;
}
.project-scroll .slide:first-child{padding:0}
.project-scroll{overflow-anchor:none}

/* Project artwork enters softly once the loop has been positioned. */
.project-view .project-scroll .slide-media.has-image img{
  opacity:0;
  transition:opacity .48s cubic-bezier(.22,1,.36,1);
  transition-delay:0s;
}
.project-view.gallery-ready .project-scroll{
  opacity:1;
  transition:none;
}
.project-view.closing .project-scroll{
  opacity:0!important;
  transition:none!important;
}
.project-view.gallery-ready .project-scroll .slide-media.selected img{
  opacity:1;
  transition:none;
}
.project-view.open .project-scroll .slide-media.has-image img{
  opacity:1;
  transition-delay:var(--image-fade-delay,0ms);
}
/* Artwork always fills its measured frame. If a custom frame uses a different
   proportion, crop the image instead of exposing grey/transparent side bands. */
.project-view .project-scroll .slide-media.has-image img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
}
.project-view .project-scroll .slide-media.has-image img[src*="locked-project-cover.jpg"]{
  object-fit:contain!important;
}
.project-view .project-scroll .slide-media.has-image:has(img[src*="locked-project-cover.jpg"]){
  background:#151515!important;
}
.project-scroll.mordida-gallery .slide-media.has-image{
  background:#151515!important;
}
.project-scroll.mordida-gallery .slide-media.has-image img{
  object-fit:cover!important;
}
@media(max-width:760px){
  .project-scroll .slide{min-height:0;margin-bottom:28px;padding:0}
}

/* Profile tabs only change on click; hover has no visual state. */
.profile-tabs button,
.profile-tabs button:hover{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
}
.profile-tabs button:not(.active):hover{color:#c2c2c2!important}
.profile-tabs button.active:hover{color:#000!important}

/* Reference-strength frosted background behind the open project. */
.project-view.reveal .view-backdrop{
  background:rgba(225,226,227,.3);
  -webkit-backdrop-filter:blur(11px);
  backdrop-filter:blur(11px);
}

/* Keep the navigation recognizable underneath the frosted project layer. */
body:has(.project-view.preparing) .top-nav{
  visibility:visible;
  opacity:1;
}

/* One clean portrait frame—remove the doubled border/focus ring. */
.portrait,
.portrait:focus,
.portrait:focus-visible{
  padding:3px!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:#fff;
  border-radius:7px;
}
.portrait img{border-radius:4px}
.canvas.fun-mode .portrait,
.canvas.fun-mode .portrait:focus,
.canvas.fun-mode .portrait:focus-visible{
  padding:3px!important;
  border:0!important;
  outline:0!important;
  background:#0c30ff;
  border-radius:50%;
}
.canvas.fun-mode .portrait img{border-radius:50%}

/* Keep the portrait strokes thick while only the inner photo rotates. */
.portrait,
.portrait:focus,
.portrait:focus-visible{
  box-sizing:border-box;
  padding:4px!important;
  background:#fff!important;
}
.canvas.fun-mode .portrait,
.canvas.fun-mode .portrait:focus,
.canvas.fun-mode .portrait:focus-visible{
  padding:4px!important;
  background:#0c30ff!important;
}

/* Quiet project entrance in both portfolio modes. */
@keyframes projectSoftAppear{
  0%{opacity:0;transform:translateY(5px) scale(.996)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes funSoftAppear{
  0%{opacity:0}
  100%{opacity:1}
}
.canvas:not(.fun-mode) .project-card:not(.opening-clone){
  animation:projectSoftAppear .58s cubic-bezier(.22,1,.36,1) both;
}
.canvas:not(.fun-mode) .project-card:nth-child(2){animation-delay:.08s}
.canvas:not(.fun-mode) .project-card:nth-child(3){animation-delay:.16s}
.canvas.fun-mode .fun-item{
  animation:funSoftAppear .58s cubic-bezier(.22,1,.36,1) both;
}
.canvas.fun-mode .fun-item:nth-of-type(2){animation-delay:.08s}
.canvas.fun-mode .fun-item:nth-of-type(3){animation-delay:.16s}
.canvas.fun-mode .fun-item:nth-of-type(4){animation-delay:.24s}

/* Give the Real work → Work for fun handoff the same calm pacing. */
.canvas.switching-to-fun .real-field{
  transition:opacity .46s cubic-bezier(.22,1,.36,1),visibility 0s linear .46s;
}
.canvas.switching-to-fun .fun-field{
  transition:opacity .54s .08s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
}
.canvas.switching-to-fun.fun-mode .fun-item{
  animation-duration:.68s;
  animation-delay:.12s;
}
.canvas.switching-to-fun.fun-mode .fun-item:nth-of-type(2){animation-delay:.19s}
.canvas.switching-to-fun.fun-mode .fun-item:nth-of-type(3){animation-delay:.26s}
.canvas.switching-to-fun.fun-mode .fun-item:nth-of-type(4){animation-delay:.33s}

/* Returning to Real Work restarts each card independently instead of fading
   the complete group as one layer. */
.canvas.switching-to-real .real-field{transition:none}
.canvas.switching-to-real .project-card:not(.opening-clone){
  animation:projectSoftAppear .66s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.06s;
}
.canvas.switching-to-real .project-card:nth-child(2){animation-delay:.18s}
.canvas.switching-to-real .project-card:nth-child(3){animation-delay:.30s}

/* Real work cards stay completely flat. */
.real-field .project-card,
.project-card.opening-clone,
.project-return-clone{
  box-shadow:none!important;
}
.project-info>p:last-child{white-space:pre-line}

/* Static editorial Real Work layout, measured from the Framer reference. */
.real-field.collage-home{
  display:grid;
  grid-template-columns:repeat(1240,minmax(0,1fr));
  grid-auto-flow:row;
  align-content:start;
  column-gap:0;
  row-gap:10px;
  padding:270px 20px 20px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:none;
  overscroll-behavior-y:contain;
}
.real-field.collage-home::-webkit-scrollbar{display:none}
.real-field.collage-home .project-card:not(.opening-clone){
  position:relative!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  width:auto!important;
  cursor:pointer!important;
  touch-action:auto;
  user-select:none;
  transition:filter .25s ease,opacity .25s ease;
}
.real-field.collage-home .collage-tile:nth-child(1){grid-column:1/-1;height:648px!important}
.real-field.collage-home .collage-tile:nth-child(2){grid-column:1/669;height:562px!important}
.real-field.collage-home .collage-tile:nth-child(3){grid-column:679/1241;height:562px!important;align-self:start}
.real-field.collage-home .collage-tile:nth-child(4){grid-column:1/709;height:661px!important}
.real-field.collage-home .collage-tile:nth-child(5){grid-column:719/1241;height:661px!important}
.real-field.collage-home .collage-tile:nth-child(6){grid-column:1/780;height:410px!important}
.real-field.collage-home .collage-tile:nth-child(7){grid-column:790/1241;height:410px!important}
.real-field.collage-home .collage-tile:nth-child(8){grid-column:1/-1;height:648px!important}
.real-field.collage-home .collage-tile:nth-child(9){grid-column:1/747;height:478px!important}
.real-field.collage-home .collage-tile:nth-child(10){grid-column:757/1241;height:478px!important}
.real-field.collage-home .project-card:not(.opening-clone) *{cursor:pointer!important}
.real-field.collage-home .project-card:not(.opening-clone):hover{filter:brightness(.975)}
.real-field.collage-home .collage-tile .label{display:none!important}
.real-field.collage-home .collage-tile{border-radius:11px}
.real-field.collage-home .collage-tile img{object-fit:cover;object-position:50% 50%}
.real-field.collage-home .collage-tile[data-project="0"]{background:#151515}
.real-field.collage-home .collage-tile[data-project="0"] img{object-fit:cover!important}
.real-field.collage-home .mobile-gallery-tile{display:none}
.locked-mobile-gallery{display:none}

@media(max-width:760px){
  .real-field.collage-home{grid-template-columns:1fr;padding:150px 10px 10px;gap:8px}
  .real-field.collage-home .collage-tile{grid-column:1!important;height:54vw!important;transform:none!important}
}

/* Native touch momentum is smoother than animated programmatic scrolling on
   the image-heavy mobile feeds. Avoid keeping every card on a compositor layer. */
@media(max-width:760px){
  .real-field.collage-home,
  .canvas.fun-mode .fun-field{
    scroll-behavior:auto!important;
  }
  .real-field.collage-home .collage-tile,
  .canvas.fun-mode .fun-item{
    will-change:auto!important;
  }
  .real-field.collage-home img,
  .canvas.fun-mode .fun-item img{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}

/* Mobile is a calm, document-like portfolio. Everything belongs to the main
   vertical scroll; desktop dragging, the eye switch and the infinite project
   gallery remain desktop-only. */
@media(max-width:760px){
  .canvas{overflow:hidden}
  .top-nav{top:12px;left:12px}

  .bio{
    --mobile-bio-surface:rgba(248,248,248,.78);
    --mobile-bio-border:rgba(255,255,255,.42);
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    height:auto;
    transform:none;
    gap:8px;
    align-items:center;
    justify-content:center;
  }
  .bio-copy{
    flex:1 1 auto;
    min-width:0;
    height:auto;
  }
  .bio p{
    display:flex;
    align-items:center;
    width:100%;
    min-height:47px;
    margin:0;
    padding:12px 14px;
    box-sizing:border-box;
    border-radius:10px;
    background:var(--mobile-bio-surface)!important;
    -webkit-backdrop-filter:blur(16px) saturate(115%);
    backdrop-filter:blur(16px) saturate(115%);
    border:1px solid var(--mobile-bio-border)!important;
    white-space:normal;
    line-height:20px;
  }
  .bio .portrait{
    flex:0 0 47px;
    width:47px;
    height:47px;
    padding:3px!important;
    box-sizing:border-box;
    border-radius:10px;
    background:var(--mobile-bio-surface)!important;
    -webkit-backdrop-filter:blur(16px) saturate(115%);
    backdrop-filter:blur(16px) saturate(115%);
    border:1px solid var(--mobile-bio-border)!important;
  }
  .bio .portrait img{
    display:block;
    width:100%;
    height:100%;
    border-radius:7px!important;
  }

  .real-field.collage-home{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:112px 12px 77px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }
  .real-field.collage-home .collage-tile:nth-child(n){
    position:relative!important;
    flex:0 0 auto;
    width:100%!important;
    height:calc((100vw - 24px) * .75)!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    touch-action:pan-y!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }
  .real-field.collage-home .collage-tile:not(.mobile-gallery-tile){display:none!important}
  .real-field.collage-home .mobile-gallery-tile{display:block!important}
  .real-field.collage-home .locked-mobile-gallery{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    width:100%;
    margin:0;
    padding:0;
  }
  .locked-mobile-gallery-item{
    position:relative;
    width:100%;
    margin:0;
    overflow:hidden;
    border-radius:16px;
    background:#f5f5f5;
    opacity:0;
    transform:translateY(7px);
    filter:blur(4px);
    transition:opacity .48s cubic-bezier(.22,1,.36,1),transform .56s cubic-bezier(.22,1,.36,1),filter .5s cubic-bezier(.22,1,.36,1);
    transition-delay:calc(var(--locked-gallery-index) * 50ms);
    content-visibility:auto;
    contain-intrinsic-size:auto 70vw;
  }
  .locked-mobile-gallery.is-visible .locked-mobile-gallery-item{
    opacity:1;
    transform:none;
    filter:none;
  }
  .locked-mobile-gallery-item img{
    display:block;
    width:100%;
    height:auto;
    border-radius:16px;
    object-fit:contain;
    pointer-events:none;
  }
  .real-field.collage-home .collage-tile img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
    border-radius:16px!important;
    -webkit-clip-path:inset(0 round 16px)!important;
    clip-path:inset(0 round 16px)!important;
    overflow:hidden;
    pointer-events:none;
  }
  .real-field.collage-home .collage-tile .label{
    display:block!important;
    left:0;
    top:-30px;
    color:#111!important;
    font-size:18px!important;
    line-height:22px!important;
  }
  .real-field.collage-home .collage-tile:not([data-primary="true"]) .label{
    display:none!important;
  }
  .real-field.collage-home .collage-tile[data-primary="true"]:not(:first-child){
    margin-top:40px!important;
  }

  .canvas.fun-mode .fun-field{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:112px 12px 12px;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  }
  .canvas.fun-mode .fun-utility{display:none!important}
  .canvas.fun-mode .fun-item,
  .canvas.fun-mode .fun-field.ordered .fun-item{
    position:relative!important;
    inset:auto!important;
    flex:0 0 auto;
    width:100%!important;
    height:calc((100vw - 24px) * .75)!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    transform:none!important;
    overflow:visible!important;
    cursor:default!important;
    touch-action:pan-y!important;
    transition:none!important;
    aspect-ratio:auto!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }
  .canvas.fun-mode .fun-item img,
  .canvas.fun-mode .fun-field.ordered .fun-item img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
    border-radius:16px!important;
    -webkit-clip-path:inset(0 round 16px)!important;
    clip-path:inset(0 round 16px)!important;
    overflow:hidden!important;
    pointer-events:none;
  }
  .canvas.fun-mode .fun-item span,
  .canvas.fun-mode .fun-field.ordered .fun-item span{
    display:none!important;
    left:0!important;
    top:-23px!important;
    color:#0c30ff!important;
    font-size:13px!important;
    line-height:17px!important;
    opacity:1!important;
    transform:none!important;
  }
  .canvas.fun-mode .fun-type,
  .canvas.fun-mode .fun-character,
  .canvas.fun-mode .fun-skating,
  .canvas.fun-mode .fun-picara,
  .canvas.fun-mode .fun-bocata{
    width:100%!important;
    height:calc((100vw - 24px) * .75)!important;
    aspect-ratio:auto!important;
    max-height:none!important;
  }
  /* Transparent cut-outs need their natural silhouette, not a cover crop. */
  .canvas.fun-mode .fun-skating,
  .canvas.fun-mode .fun-field.ordered .fun-skating{
    height:calc((100vw - 24px) * 1.02)!important;
  }
  .canvas.fun-mode .fun-picara,
  .canvas.fun-mode .fun-field.ordered .fun-picara{
    height:calc((100vw - 24px) * 1.28)!important;
  }
  .canvas.fun-mode .fun-skating img,
  .canvas.fun-mode .fun-picara img,
  .canvas.fun-mode .fun-field.ordered .fun-skating img,
  .canvas.fun-mode .fun-field.ordered .fun-picara img{
    object-fit:contain!important;
    object-position:center!important;
    -webkit-clip-path:none!important;
    clip-path:none!important;
  }
  .canvas.fun-mode .fun-learning,
  .canvas.fun-mode .fun-field.ordered .fun-learning{
    height:calc((100vw - 24px) * 1350 / 2280)!important;
    aspect-ratio:2280/1350!important;
  }
  .canvas.fun-mode .fun-learning img,
  .canvas.fun-mode .fun-field.ordered .fun-learning img{
    object-fit:cover!important;
  }
  .canvas.fun-mode .fun-field::after{display:none!important}

  .canvas.fun-mode .bio{
    left:auto;
    right:12px;
    bottom:12px;
    width:45px;
    transform:none;
  }
  .canvas.fun-mode .bio-copy{display:none!important}
  .canvas.fun-mode .portrait{
    flex-basis:45px;
    width:45px;
    height:45px;
    padding:3px!important;
    background:#0c30ff!important;
    border:1px solid #0c30ff!important;
    margin-left:auto;
  }
  .canvas.fun-mode .portrait img{border-radius:50%!important}

  .project-view.mobile-info-only .project-scroll,
  .project-view.mobile-info-only .scroll-hint{display:none!important}
  .project-view.mobile-info-only .view-backdrop{
    background:rgba(225,226,227,.38);
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
  }
  .project-view.mobile-info-only .project-info{
    position:absolute;
    left:50%;
    right:auto;
    top:50%;
    bottom:auto;
    width:calc(100% - 48px);
    max-width:520px;
    height:auto;
    max-height:72vh;
    padding:54px 18px 22px;
    overflow-y:auto;
    border-radius:16px;
    transform:translate(-50%,calc(-50% + 12px)) scale(.985);
    transform-origin:50% 50%;
  }
  .project-view.mobile-info-only.open .project-info{transform:translate(-50%,-50%) scale(1)}
  .project-view.mobile-info-only.closing .project-info{transform:translate(-50%,calc(-50% + 8px)) scale(.98)}
  .project-view.mobile-info-only .project-info h1{font-size:22px;line-height:26px}
  .project-view.mobile-info-only .project-info>p:last-child{font-size:15px;line-height:20px}
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .locked-mobile-gallery-item{transition:none;transition-delay:0s}
}

/* Exact Framer Inter face and measured typography metrics. */
html body,
html body *{
  font-family:"Inter Framer","Inter","Inter Placeholder",sans-serif!important;
  font-weight:400!important;
  font-synthesis:none!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
html body b,
html body strong{font-weight:400!important}

@media (hover:hover) and (pointer:fine){
  html,
  body,
  a,
  button,
  [role="button"],
  .project-card,
  .fun-item{cursor:none!important}
  .custom-cursor{
    position:fixed;
    z-index:10000;
    left:-40px;
    top:-40px;
    width:9px;
    height:9px;
    border:1px solid transparent;
    box-sizing:border-box;
    border-radius:50%;
    background:#fff;
    opacity:0;
    pointer-events:none;
    mix-blend-mode:difference;
    transform:translate(-50%,-50%) scale(1);
    transform-origin:center;
    transition:opacity .18s ease,transform .28s cubic-bezier(.22,1,.36,1),width .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1),background-color .28s ease,border-color .28s ease;
    will-change:left,top,transform,width,height;
  }
  .custom-cursor.is-visible{opacity:1}
  .custom-cursor.is-hovering{
    width:22px;
    height:22px;
    background:transparent;
    border-color:#fff;
  }
  .custom-cursor.is-pressed{transform:translate(-50%,-50%) scale(1.18)}
  body.playground-cursor .custom-cursor{
    background:#0c30ff;
    border-color:transparent;
    mix-blend-mode:normal;
  }
  body.playground-cursor .custom-cursor.is-hovering{
    background:transparent;
    border-color:#0c30ff;
  }
}

/* Keep the native pointer hidden across every interactive and draggable area. */
@media (hover:hover) and (pointer:fine){
  html,
  body,
  html body *,
  html body *::before,
  html body *::after{
    cursor:none!important;
  }
}

/* Occasional music thoughts emerging from the portrait in Playground. */
.music-thought{
  position:absolute;
  right:0;
  bottom:57px;
  max-width:250px;
  width:max-content;
  padding:7px 10px;
  border-radius:7px;
  background:#0c30ff;
  color:#fff;
  font-size:13px;
  line-height:17px;
  letter-spacing:-.4px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px) scale(.98);
  transform-origin:calc(100% - 23px) 100%;
  pointer-events:none;
  transition:opacity .28s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s;
}
.music-thought::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:-5px;
  width:10px;
  height:10px;
  border-radius:2px;
  background:#0c30ff;
  transform:rotate(45deg);
}
.canvas.fun-mode .music-thought.show{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.canvas .real-field .project-card .label,
.canvas.fun-mode .fun-field .fun-item span,
.canvas.switching-to-real .fun-field .fun-item span,
.project-view .slide-media span{
  font-size:13px!important;
  line-height:17px!important;
  letter-spacing:-.4px!important;
}
.top-nav button,
.top-nav .nav-separator,
.bio p{
  font-size:14px!important;
  line-height:16.8px!important;
  letter-spacing:-.56px!important;
  font-weight:400!important;
}
/* First-visit editorial intro */
.intro-screen{
  position:fixed;
  inset:-2px;
  width:calc(100vw + 4px);
  height:calc(100dvh + 4px);
  z-index:10000;
  display:grid;
  place-items:center;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  background:#101010;
  color:#fff;
  transform:translate3d(0,-100%,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.intro-title{
  margin:0;
  font-family:"Inter Framer","Inter","Inter Placeholder",sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:16.8px;
  letter-spacing:-.56px!important;
  white-space:nowrap;
  opacity:1;
}
.intro-title span span{display:inline-block;min-width:.1em}
html.show-intro .intro-screen{
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0);
}
html.show-intro,
html.show-intro body{
  background:#101010;
}
html.show-intro:not(.intro-leaving) .canvas,
html.show-intro:not(.intro-leaving) .project-view{
  visibility:hidden!important;
}
html.show-intro.intro-ready .intro-title{
  opacity:1;
  transform:none;
  transition:none;
}
html.show-intro.intro-leaving .intro-screen{
  transform:translate3d(0,calc(-100% - 4px),0);
  transition:transform .9s cubic-bezier(.76,0,.24,1);
}
html.show-intro.intro-leaving .intro-title{
  transform:none;
  opacity:1;
  transition:none;
}
@media (prefers-reduced-motion:reduce){
  html.show-intro.intro-ready .intro-title{transition:none}
  html.show-intro.intro-leaving .intro-screen{transition:transform .3s ease}
}

/* Playground colour study: blue field with white interface accents. */
.canvas.fun-mode,
.canvas.fun-mode .fun-field{
  background:#dedfe1!important;
}
.canvas.fun-mode .top-nav button,
.canvas.fun-mode .top-nav button:first-child,
.canvas.fun-mode .top-nav button:last-child{
  background:#0c30ff;
}
.canvas.fun-mode .top-nav button:first-child{color:rgba(255,255,255,.5)}
.canvas.fun-mode .top-nav button:last-child{color:#fff}
.canvas.fun-mode .fun-utility{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.canvas.fun-mode .fun-utility .layout-eyes circle[stroke]{stroke:#0c30ff}
.canvas.fun-mode .fun-utility .layout-eyes .animated-pupil{fill:#0c30ff}
.canvas.fun-mode .fun-utility .music-toggle .vinyl-icon,
.canvas.fun-mode .fun-utility .music-toggle[aria-expanded="true"] .vinyl-icon{
  filter:none;
}
.canvas.fun-mode .fun-tools::after{background:#343434}
.canvas.fun-mode .fun-item span,
.canvas.fun-mode .fun-field.ordered .fun-item span{color:#0c30ff}
.canvas.fun-mode .fun-bottom-shape{filter:none}
.canvas.fun-mode .bio p{color:#fff}
.canvas.fun-mode .portrait,
.canvas.fun-mode .portrait:focus,
.canvas.fun-mode .portrait:focus-visible{
  background:#0c30ff!important;
}
.canvas.fun-mode .music-thought{
  background:#0c30ff;
  color:#fff;
}
.canvas.fun-mode .music-thought::after{background:#0c30ff}

/* Mobile Playground keeps the same concise portfolio bio as Real Work.
   The alternate "When I'm bored" line is desktop-only. */
@media(max-width:760px){
  .canvas.fun-mode .bio{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    gap:8px;
  }
  .canvas.fun-mode .bio-copy{
    display:block!important;
    flex:1 1 auto;
    min-width:0;
  }
  .canvas.fun-mode .bio-text-real{display:flex!important}
  .canvas.fun-mode .bio-text-fun{display:none!important}
  .canvas.fun-mode .fun-bottom-shape{display:none!important}
  .canvas.fun-mode .bio p{
    color:#111;
    background:var(--mobile-bio-surface)!important;
  }
  .canvas.fun-mode .portrait{margin-left:0}

  /* Match every mobile Real Work media container to the main nav surface. */
  .real-field.collage-home .collage-tile,
  .real-field.collage-home .mobile-gallery-tile,
  .real-field.collage-home .collage-tile img{
    background:#f5f5f5!important;
  }
}

/* Final mobile bio: one fixed glass text panel plus the portrait at its right.
   Keep it below the work, mirroring the calm Craft Whims header treatment. */
@media(max-width:760px){
  .bio,
  .canvas.fun-mode .bio{
    display:flex!important;
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    width:auto!important;
    height:auto!important;
    gap:8px!important;
    align-items:stretch!important;
    transform:none!important;
  }
  .bio-copy,
  .canvas.fun-mode .bio-copy{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
  }
  .bio-text-real,
  .canvas.fun-mode .bio-text-real{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:47px!important;
    padding:12px 14px!important;
    overflow:hidden!important;
    color:#111!important;
    background:rgba(245,245,245,.88)!important;
    border:1px solid rgba(255,255,255,.58)!important;
    border-radius:10px!important;
    -webkit-backdrop-filter:blur(16px) saturate(112%)!important;
    backdrop-filter:blur(16px) saturate(112%)!important;
    white-space:normal!important;
    line-height:20px!important;
  }
  .bio-text-fun,
  .canvas.fun-mode .bio-text-fun,
  .canvas.fun-mode .fun-bottom-shape{
    display:none!important;
  }
  .bio .portrait,
  .canvas.fun-mode .portrait{
    align-self:stretch!important;
    flex:0 0 47px!important;
    width:47px!important;
    height:auto!important;
    min-height:47px!important;
    margin:0!important;
  }

  /* Playground mobile uses only the portrait/music control. */
  .canvas.fun-mode .bio{
    left:auto!important;
    right:12px!important;
    width:47px!important;
  }
  .canvas.fun-mode .bio-copy{
    display:none!important;
  }
  .canvas.fun-mode .portrait{
    width:47px!important;
    height:47px!important;
    min-height:47px!important;
  }
}

/* Balanced mobile portrait: square beside the bio, circular in Playground. */
@media(max-width:760px){
  .bio,
  .canvas.fun-mode .bio{align-items:center!important}
  .bio .portrait{
    align-self:center!important;
    flex:0 0 64px!important;
    width:64px!important;
    height:64px!important;
    min-height:64px!important;
    aspect-ratio:1/1!important;
    padding:3px!important;
    overflow:hidden!important;
    border-radius:10px!important;
  }
  .bio .portrait img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 18%!important;
    transform:scale(1.08);
    border-radius:8px!important;
  }
  .canvas.fun-mode .bio{
    width:64px!important;
  }
  .canvas.fun-mode .portrait{
    flex-basis:64px!important;
    width:64px!important;
    height:64px!important;
    min-height:64px!important;
    border-radius:50%!important;
  }
  .canvas.fun-mode .portrait img{
    transform:scale(1.08);
    border-radius:50%!important;
  }

  /* Real Work mobile footer uses the exact solid nav surface—no glass. */
  .canvas:not(.fun-mode) .bio-text-real,
  .canvas:not(.fun-mode) .bio .portrait{
    background:#f5f5f5!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    border-color:#f5f5f5!important;
  }
}

/* Equal-height mobile bio pair with a clearer inner portrait stroke. */
@media(max-width:760px){
  .canvas:not(.fun-mode) .bio-text-real{
    height:64px!important;
    min-height:64px!important;
    box-sizing:border-box!important;
  }
  .bio .portrait,
  .canvas.fun-mode .portrait{
    width:64px!important;
    height:64px!important;
    min-height:64px!important;
    padding:4px!important;
    box-sizing:border-box!important;
  }
  .canvas:not(.fun-mode) .bio .portrait{
    background:#f5f5f5!important;
    box-shadow:none!important;
  }
  .canvas.fun-mode .portrait{
    background:#0c30ff!important;
    box-shadow:inset 0 0 0 1px #0c30ff!important;
  }
  .canvas:not(.fun-mode) .bio .portrait .portrait-photo{
    transform:scale(1.1)!important;
  }
}

/* Compact and optically centered mobile bio. */
@media(max-width:760px){
  .canvas:not(.fun-mode) .bio-text-real{
    height:56px!important;
    min-height:56px!important;
    padding:9px 14px 7px!important;
    line-height:18px!important;
    display:block!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-align:left!important;
  }
  .bio .portrait,
  .canvas.fun-mode .portrait{
    flex-basis:56px!important;
    width:56px!important;
    height:56px!important;
    min-height:56px!important;
    padding:6px!important;
  }
  .canvas.fun-mode .bio{width:56px!important}
  .canvas:not(.fun-mode) .bio .portrait img{
    transform:scale(1.13)!important;
  }
}
.canvas.fun-mode .now-playing{background:#0c30ff;color:#fff}
.canvas.fun-mode .now-playing .track-copy span{color:rgba(255,255,255,.6)}
.canvas.fun-mode .now-playing .track-copy p{color:#fff}
.canvas.fun-mode .now-playing .track-play,
.canvas.fun-mode .now-playing .track-next{background:rgba(255,255,255,.18)}
.canvas.fun-mode .now-playing .track-play img,
.canvas.fun-mode .now-playing .track-next img{
  filter:brightness(0) invert(1);
}
.canvas.fun-mode .now-playing .track-levels i{background:#fff}

/* Mobile music portrait: the blue stroke never changes. Only the image rotates
   while audio is playing; size, padding and stroke stay visually identical. */
@media(max-width:760px){
  .canvas.fun-mode .portrait,
  .canvas.fun-mode .portrait:focus,
  .canvas.fun-mode .portrait:focus-visible{
    padding:0!important;
    border:3px solid #0c30ff!important;
    background:#0c30ff!important;
    box-shadow:none!important;
  }
  .canvas.fun-mode .portrait img{
    width:100%!important;
    height:100%!important;
    transform:scale(1);
    transform-origin:50% 50%!important;
  }
  .canvas.fun-mode .portrait img.music-spinning{
    animation:portraitMusicSpinMobile 2.4s linear infinite!important;
  }
  .canvas:not(.fun-mode) .portrait:active img{
    transform:scale(1.085)!important;
  }
  .canvas.fun-mode .portrait:active img:not(.music-spinning){
    transform:scale(.96);
  }
}
@keyframes portraitMusicSpinMobile{
  from{transform:rotate(0deg) scale(1)}
  to{transform:rotate(360deg) scale(1)}
}

/* Prevent Playground items from briefly reverting to their desktop size while
   the mobile view switches back to Real Work. */
@media(max-width:760px){
  .canvas.switching-to-real .fun-field{
    opacity:0!important;
    visibility:hidden!important;
    transition:none!important;
    pointer-events:none!important;
  }
  .canvas.switching-to-real .portrait,
  .canvas.switching-to-real .portrait:focus,
  .canvas.switching-to-real .portrait:focus-visible{
    padding:6px!important;
    border:1px solid #f5f5f5!important;
    border-radius:10px!important;
    background:#f5f5f5!important;
    box-shadow:none!important;
    transition:none!important;
  }
  .canvas.switching-to-real .portrait img{
    border-radius:8px!important;
    transform:scale(1.13)!important;
    animation:none!important;
    transition:none!important;
  }
  .canvas .real-field.collage-home .collage-tile .label{
    font-size:18px!important;
    line-height:22px!important;
    letter-spacing:-.72px!important;
  }
}

/* Final cursor override: the ID specificity beats legacy grab/pointer rules. */
@media (hover:hover) and (pointer:fine){
  html body main#canvas,
  html body main#canvas *,
  html body main#canvas *::before,
  html body main#canvas *::after{
    cursor:none!important;
  }
  html body>.project-card.opening-clone,
  html body>.project-card.opening-clone *,
  html body>.project-return-clone,
  html body>.project-return-clone *{
    cursor:none!important;
  }
}

/* About entry at the end of Little context. Keep this final so the panel's
   established desktop and mobile measurements resolve around the new row. */
.profile-popover:not(.contact-active){
  --panel-height:min(520px,calc(100dvh - 110px));
  height:calc(var(--panel-height) + 53px);
}
.career-panel{
  height:calc(var(--panel-height) + 6px);
  padding-bottom:17px;
  overflow:hidden;
  scrollbar-width:none;
}
.career-panel::-webkit-scrollbar{display:none}
.career-panel .about-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  width:100%;
  min-height:42px;
  margin-top:4px;
  padding:0;
  border-top:1px solid #dedede;
  background:transparent;
  color:#000;
  opacity:1!important;
  font:400 14px/16.8px "Inter",Arial,sans-serif;
  letter-spacing:-.56px!important;
  text-decoration:none;
}
.career-panel .profile-row:nth-of-type(4){border-bottom:0}
.career-panel .about-link span:first-child{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.career-panel .about-link span:last-child{color:#000;font-size:18px;line-height:1;opacity:1;transform:translateY(-1px);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.career-panel .about-link:hover span:last-child{transform:translate(2px,-3px)}

/* About lives inside the portfolio canvas as a third content state. */
.about-field{
  position:absolute;
  z-index:1;
  inset:0 0 84px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:#dfe0e1;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.about-field::-webkit-scrollbar{display:none}
.canvas.about-mode .real-field,
.canvas.about-mode .fun-field{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.canvas.about-mode .about-field{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .45s cubic-bezier(.22,1,.36,1),visibility 0s;
}
.about-story{
  display:flex;
  width:min(520px,calc(100% - 56px));
  min-height:100%;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  box-sizing:border-box;
  margin:0 auto;
  padding:80px 0 96px;
  transform:translateY(28px);
}
.about-story-paragraph{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(16px,1.25vw,20px);
  font-weight:500;
  line-height:1.22;
  letter-spacing:-.05em!important;
  text-align:center;
}
.about-story-sentence{display:inline}
.about-story-sentence::after{content:" "}
.about-story-closing{
  position:relative;
  align-self:center;
  width:max-content;
  max-width:100%;
}
.about-story-closing::after{
  content:"";
  position:absolute;
  left:2%;
  bottom:-8px;
  width:96%;
  height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C38 3 70 9 106 6 S175 4 208 7 S264 8 298 4' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity:0;
  transform:scaleX(0);
  transform-origin:left center;
}
.canvas.about-mode .about-story-closing::after{
  animation:about-doodle-underline .58s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(1280ms + var(--closing-line-index,0) * 85ms);
}
@keyframes about-doodle-underline{
  0%{opacity:0;transform:scaleX(0)}
  14%{opacity:1}
  100%{opacity:1;transform:scaleX(1)}
}
.about-story-word{
  display:inline-block;
  color:#111;
  opacity:0;
  filter:blur(10px);
  transform:translateY(20px);
  will-change:opacity,filter,transform;
}
.canvas.about-mode .about-story-word{
  animation:about-line-reveal .8s cubic-bezier(.25,.1,.25,1) both;
  animation-delay:calc(140ms + var(--line-index,0) * 60ms);
}
@keyframes about-line-reveal{
  0%{opacity:0;filter:blur(10px);transform:translateY(20px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0)}
}
.canvas.about-mode .bio-text-real{display:block}
.canvas.about-mode .bio-text-fun{display:none}

/* About contracts the persistent bio into the portrait itself. The measured
   width keeps the motion continuous across desktop and fluid mobile widths. */
.bio{transition:gap .68s cubic-bezier(.34,1.35,.64,1)}
.bio.bio-measured .bio-copy{
  width:var(--bio-copy-width)!important;
  flex:0 0 var(--bio-copy-width)!important;
  overflow:hidden!important;
  opacity:1;
  transform:scaleX(1);
  transform-origin:100% 50%;
  transition:
    width .68s cubic-bezier(.76,0,.24,1),
    flex-basis .68s cubic-bezier(.76,0,.24,1),
    opacity .28s .16s ease,
    transform .55s cubic-bezier(.22,1,.36,1)!important;
}
.canvas.about-mode .bio{gap:0!important}
.canvas.about-mode .bio.bio-measured .bio-copy{
  width:0!important;
  min-width:0!important;
  flex-basis:0!important;
  opacity:0!important;
  transform:scaleX(.72);
  pointer-events:none;
  transition:
    width .68s cubic-bezier(.76,0,.24,1),
    flex-basis .68s cubic-bezier(.76,0,.24,1),
    opacity .2s ease,
    transform .5s ease!important;
}
/* Outside About, the mobile bar must always resolve to its exact available
   width. This prevents the measured desktop width from surviving the morph
   and pushing the text/portrait outside the viewport. */
@media(max-width:760px){
  .canvas:not(.about-mode) .bio.bio-measured .bio-copy{
    width:auto!important;
    min-width:0!important;
    max-width:calc(100% - 64px)!important;
    flex:1 1 0!important;
    opacity:1!important;
    transform:none;
  }
}
.canvas.about-mode .portrait{
  animation:aboutPortraitBounceIn .72s cubic-bezier(.34,1.5,.64,1) both!important;
}
.canvas.leaving-about .portrait{
  animation:aboutPortraitBounceOut .72s cubic-bezier(.34,1.5,.64,1) both!important;
}
.canvas:not(.about-mode):not(.fun-mode):not(.leaving-about) .bio.bio-measured .portrait{
  animation:none!important;
}
.canvas .bio .portrait{position:relative}
.canvas .bio .portrait .portrait-photo{
  opacity:1;
  transition:opacity .28s ease,transform .42s cubic-bezier(.22,1,.36,1)!important;
}
.canvas .bio .portrait .about-back-icon{
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  width:23px!important;
  height:23px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  opacity:0;
  transform:translate(-50%,-50%) scale(.72)!important;
  transition:opacity .28s ease,transform .5s cubic-bezier(.34,1.5,.64,1)!important;
  pointer-events:none;
}
.canvas.about-mode .bio .portrait .portrait-photo{
  opacity:0;
  transform:scale(.78)!important;
}
.canvas.about-mode .bio .portrait .about-back-icon{
  opacity:1;
  transform:translate(-50%,-50%) scale(1)!important;
}
@media(max-width:760px){
  .canvas .bio .portrait .about-back-icon{width:25px!important;height:25px!important}
}
@keyframes aboutPortraitBounceIn{
  0%{transform:scale(1)}
  48%{transform:scale(.82)}
  74%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@keyframes aboutPortraitBounceOut{
  0%{transform:scale(.9)}
  58%{transform:scale(1.07)}
  100%{transform:scale(1)}
}

/* About already keeps the portrait control visible. When it opens Playground,
   do not start the second opacity/scale entrance that would flash the photo. */
.canvas.fun-mode.fun-from-about .portrait{
  opacity:1!important;
  animation:none!important;
}

@media(max-width:760px){
  .about-field{inset:0 0 72px}
  .about-story{width:min(320px,calc(100% - 48px));min-height:100%;justify-content:center;gap:16px;box-sizing:border-box;padding:42px 0 52px;transform:translateY(8px)}
  .about-story-paragraph{font-size:clamp(14px,3.5vw,16px);line-height:1.18;letter-spacing:-.05em!important}
  .about-story-word{opacity:1;filter:none;transform:none;will-change:auto}
  .canvas.about-mode .about-story-word{animation:none}
  .canvas.about-mode .about-story-paragraph{
    animation:about-mobile-paragraph .8s cubic-bezier(.25,.1,.25,1) both;
  }
  .canvas.about-mode .about-story-paragraph:nth-child(1){animation-delay:140ms}
  .canvas.about-mode .about-story-paragraph:nth-child(2){animation-delay:200ms}
  .canvas.about-mode .about-story-paragraph:nth-child(3){animation-delay:260ms}
  .canvas.about-mode .about-story-paragraph:nth-child(4){animation-delay:320ms}
  .canvas.about-mode .about-story-paragraph:nth-child(5){animation-delay:380ms}
  .canvas.about-mode .about-story-closing::after{animation-delay:1250ms}
}

@keyframes about-mobile-paragraph{
  0%{opacity:0;filter:blur(10px);transform:translateY(20px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .about-story-word{opacity:1;filter:none;transform:none}
  .canvas.about-mode .about-story-word{animation:none}
  .canvas.about-mode .about-story-closing::after{opacity:1;transform:none;animation:none}
}

/* Lab is a compact extension of Real work: one control, one experiment, and
   no route change until the visitor deliberately opens the external tool. */
.lab-shell{
  position:static;
}
.lab-toggle{
  position:fixed;
  z-index:85;
  top:20px;
  right:20px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-left:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  box-shadow:none;
  cursor:pointer;
  mix-blend-mode:difference;
}
.lab-toggle svg{
  width:25px;
  height:25px;
  overflow:visible;
  fill:currentColor;
  transition:transform .42s cubic-bezier(.34,1.55,.64,1);
}
.lab-toggle:focus{outline:none}
.lab-toggle:focus-visible{outline:2px solid #111;outline-offset:2px}
.lab-shell.is-open .lab-toggle svg{transform:scale(.88) rotate(-4deg)}
.lab-panel{
  position:fixed;
  z-index:84;
  top:60px;
  right:20px;
  width:min(360px,calc(100vw - 24px));
  padding:0;
  box-sizing:border-box;
  border:0;
  border-radius:12px;
  background:transparent;
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin:100% 0;
  pointer-events:none;
  transition:
    opacity .24s ease,
    visibility 0s linear .38s,
    transform .48s cubic-bezier(.22,1,.36,1);
}
.lab-shell.is-open .lab-panel{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition-delay:0s;
}
.lab-project{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:92px;
  padding:10px;
  box-sizing:border-box;
  border:0;
  border-radius:12px;
  background:#f8f8f8;
  color:#111;
  text-decoration:none;
  transition:transform .42s cubic-bezier(.22,1,.36,1),background-color .25s ease;
}
.lab-preview{
  position:relative;
  overflow:hidden;
  width:72px;
  height:72px;
  border-radius:9px;
  background:#111;
}
.lab-preview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.lab-project-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:0 26px 0 0;
}
.lab-project-copy>div{
  min-width:0;
  max-height:72px;
  overflow:hidden;
}
.lab-project-copy h2{
  margin:0 0 3px;
  font-size:14px;
  line-height:17px;
  font-weight:400;
  letter-spacing:-.45px;
}
.lab-project-copy p{
  max-width:228px;
  margin:0;
  color:#8b8b8b;
  display:-webkit-box;
  overflow:hidden;
  font-size:12px;
  line-height:14px;
  letter-spacing:-.3px;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.lab-project-arrow{
  position:absolute;
  top:10px;
  right:10px;
  font-size:17px;
  line-height:17px;
}
@media(hover:hover) and (pointer:fine){
  .lab-project:hover{transform:translateY(-1px)}
}
.canvas.fun-mode .lab-toggle,
.canvas.about-mode .lab-toggle,
.canvas.fun-mode .lab-panel,
.canvas.about-mode .lab-panel{
  opacity:0;
  pointer-events:none;
}
@media(max-width:760px){
  .lab-toggle{top:12px;right:12px;width:32px;height:32px}
  .lab-toggle svg{width:24px;height:24px}
  .lab-panel{
    top:60px;
    right:12px;
    width:min(340px,calc(100vw - 24px));
    padding:0;
    border-radius:12px;
  }
  .lab-project{
    grid-template-columns:64px minmax(0,1fr);
    gap:10px;
    min-height:80px;
    padding:8px;
    border-radius:12px;
  }
  .lab-preview{width:64px;height:64px;border-radius:8px}
  .lab-project-copy{gap:8px;padding:0 24px 0 0}
  .lab-project-copy>div{max-height:64px}
  .lab-project-copy h2{font-size:14px;line-height:17px;letter-spacing:-.4px}
  .lab-project-copy p{max-width:205px;font-size:12px;line-height:14px;letter-spacing:-.3px}
  .lab-project-arrow{top:8px;right:8px;font-size:18px;line-height:18px}
}
@media(prefers-reduced-motion:reduce){
  .lab-shell,.lab-toggle svg,.lab-panel,.lab-project{transition:none!important}
}

/* --------------------------------------------------------------------------
   LOCAL STYLE DRAFT 01 — Artemii Lebedev-inspired interface chrome.
   This block is intentionally isolated at the end of the file so the visual
   test can be removed without touching project, playground or scroll logic.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Fragment Mono";
  src:url("./assets/fonts/fragment-mono-regular.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
:root{
  --draft-ui-font:"Fragment Mono","SFMono-Regular",ui-monospace,monospace;
  --draft-ui-paper:#e6e6e6;
  --draft-ui-ink:#010101;
  --draft-ui-muted:#777;
  --draft-ui-rule:#cfcfcf;
  --draft-ui-radius:2px;
  --draft-ui-size:.65rem;
  --draft-ui-track:-.02em;
  --draft-ui-leading:1.2;
  --draft-ui-gap:5px;
}

/* Compact navigation label, matching the measured reference proportions. */
.top-nav{
  top:17px;
  left:17px;
  width:max-content;
  height:auto;
  min-height:21px;
  gap:.5rem;
  padding:.5rem!important;
  border-radius:var(--draft-ui-radius)!important;
  background:var(--draft-ui-paper)!important;
  color:var(--draft-ui-ink);
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  font:400 var(--draft-ui-size)/var(--draft-ui-leading) var(--draft-ui-font)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase;
}
.top-nav button,
.top-nav button:first-child,
.top-nav button:last-child{
  width:auto!important;
  height:auto!important;
  padding:0!important;
  color:var(--draft-ui-muted);
  font:inherit!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:inherit!important;
  text-transform:inherit;
}
.top-nav button.active{color:var(--draft-ui-ink)!important}
.top-nav .nav-separator{
  margin:0!important;
  color:#aaa!important;
  font:inherit!important;
  line-height:var(--draft-ui-leading)!important;
}

/* Context / Let's talk tabs and their panels keep Kiara's placement and data. */
.profile-tabs{
  width:max-content;
  height:auto;
  min-height:21px;
  gap:.5rem;
  padding:.5rem!important;
  border-radius:var(--draft-ui-radius)!important;
  background:var(--draft-ui-paper)!important;
  color:var(--draft-ui-ink);
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  font:400 var(--draft-ui-size)/var(--draft-ui-leading) var(--draft-ui-font)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase;
}
.profile-tabs button{
  width:auto!important;
  height:auto!important;
  padding:0!important;
  color:var(--draft-ui-muted)!important;
  font:inherit!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:inherit!important;
  text-transform:inherit;
}
.profile-tabs button.active{color:var(--draft-ui-ink)!important}
.profile-tabs i{
  width:1px!important;
  height:11px!important;
  background:var(--draft-ui-rule)!important;
}
.profile-panel,
.career-panel,
.contact-panel{
  border-radius:var(--draft-ui-radius)!important;
  background:var(--draft-ui-paper)!important;
  color:var(--draft-ui-ink)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:1.28!important;
  letter-spacing:var(--draft-ui-track)!important;
}
.career-panel .muted,
.career-panel .profile-row,
.career-panel .profile-row div,
.career-panel .profile-row span,
.career-panel .profile-row time,
.career-panel .about-link,
.contact-panel,
.contact-panel a,
.contact-panel p{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:1.28!important;
  letter-spacing:var(--draft-ui-track)!important;
}
.career-panel .muted,
.career-panel .profile-row span,
.career-panel .profile-row time,
.contact-panel .talk-heading,
.contact-panel .talk-email a{color:var(--draft-ui-muted)!important}
.career-panel .profile-row,
.contact-panel .talk-social,
.career-panel .about-link{border-color:var(--draft-ui-rule)!important}
.career-panel .about-link span:last-child{font-size:15px!important}

/* Project information uses one restrained mono scale instead of a large card. */
.project-info{
  border-radius:var(--draft-ui-radius)!important;
  background:var(--draft-ui-paper)!important;
  color:var(--draft-ui-ink)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  font-family:var(--draft-ui-font)!important;
}
.project-info h1,
.project-info .year,
.project-info .year strong,
.project-info>p:last-child,
.project-info .close{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:1.28!important;
  letter-spacing:var(--draft-ui-track)!important;
}
.project-info h1,
.project-info .year{text-transform:uppercase}
.project-info .rule{background:var(--draft-ui-rule)!important}
.project-info .close{color:var(--draft-ui-ink)!important}

/* Lab control keeps its original position; its panel adopts the same flat UI. */
.lab-panel{border-radius:var(--draft-ui-radius)!important}
.lab-project{
  border-radius:var(--draft-ui-radius)!important;
  background:var(--draft-ui-paper)!important;
  color:var(--draft-ui-ink)!important;
  box-shadow:none!important;
  font-family:var(--draft-ui-font)!important;
}
.lab-preview{border-radius:var(--draft-ui-radius)!important}
.lab-project-copy h2,
.lab-project-copy p,
.lab-project-arrow{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:var(--draft-ui-track)!important;
}
.lab-project-copy h2{text-transform:uppercase}
.lab-project-copy p{color:var(--draft-ui-muted)!important}

@media(max-width:760px){
  .top-nav{top:12px;left:12px}
  .profile-tabs{padding:.5rem!important}
  .project-info,
  .profile-panel,
  .lab-project{border-radius:var(--draft-ui-radius)!important}
}

/* DRAFT 01 refinement: scale the complete interface, not only its type. */
.top-nav,
.profile-tabs,
.profile-panel,
.profile-panel *,
.project-info,
.project-info *,
.lab-project,
.lab-project *,
.bio-copy,
.bio-copy *{
  text-transform:uppercase!important;
}

/* The permanent information capsule follows the same compact label system. */
.bio{
  bottom:17px;
  height:25px;
  gap:var(--draft-ui-gap);
}
.bio-copy{height:25px}
.bio p{
  height:25px;
  padding:.4375rem;
  border-radius:var(--draft-ui-radius)!important;
  background:var(--draft-ui-paper)!important;
  color:var(--draft-ui-ink)!important;
  font:400 var(--draft-ui-size)/1 var(--draft-ui-font)!important;
  letter-spacing:var(--draft-ui-track)!important;
}
.canvas:not(.fun-mode) .bio p,
.canvas:not(.fun-mode) .bio p *{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase!important;
}
.canvas:not(.fun-mode) .bio p{
  min-height:calc(var(--draft-ui-size) + .875rem);
  height:calc(var(--draft-ui-size) + .875rem);
  padding:.5rem!important;
  border-radius:var(--draft-ui-radius)!important;
}
.portrait{
  width:25px;
  min-width:25px;
  height:25px;
  padding:1px;
  border:0;
  background:var(--draft-ui-paper)!important;
  border-radius:var(--draft-ui-radius)!important;
}
.portrait img{border-radius:1px!important}

/* Context is rebuilt on the same small scale so no legacy empty space remains. */
.profile-popover,
.profile-popover:not(.contact-active){
  --panel-height:342px;
  width:246px;
  height:371px;
}
.profile-popover.contact-active{
  --panel-height:156px;
  width:246px;
  height:185px;
}
.profile-panel,
.career-panel,
.contact-panel{
  top:33.5px!important;
  left:0;
  width:246px;
}
.career-panel{
  height:342px!important;
  padding:12px!important;
}
.career-panel .heading{
  margin:0 0 14px!important;
}
.career-panel .section-heading{
  margin:16px 0 14px!important;
}
.career-panel .profile-row,
.career-panel .profile-row:nth-of-type(-n+2),
.career-panel .profile-row:nth-of-type(n+3),
.career-panel .profile-row:nth-of-type(4){
  position:relative;
  display:block;
  width:100%;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:7px 0!important;
}
.career-panel .profile-row div,
.career-panel .profile-row span,
.career-panel .profile-row time{line-height:1.25!important}
.career-panel .profile-row span:first-child{margin-top:2px!important}
.career-panel .profile-row span+span{margin-top:5px!important}
.career-panel .profile-row time{top:7px!important;right:0!important}
.career-panel .about-link{
  min-height:25px!important;
  height:25px;
  margin:0!important;
  padding:7px 0 0!important;
  gap:6px;
}
.career-panel .about-link span:last-child{font-size:var(--draft-ui-size)!important}
.contact-panel{
  height:160px!important;
  padding:12px 12px 16px!important;
  gap:12px!important;
}
.contact-panel .talk-social{
  flex:0 0 auto!important;
  padding:0 0 12px!important;
}
.contact-panel .talk-heading{margin:0 0 12px!important}
.contact-panel .talk-links{gap:1px!important}
.contact-panel .talk-email{gap:1px!important}

/* Project info now contracts with its typography instead of retaining the old card. */
.project-info{
  width:246px;
  height:auto!important;
  min-height:0!important;
  padding:32px 12px 12px!important;
}
.project-info h1{margin:0 0 5px!important}
.project-info .year{margin:0!important}
.project-info strong{
  margin-left:5px!important;
  padding:1px 3px!important;
  border-radius:1px!important;
}
.project-info .rule{margin:12px 0!important}
.project-info>p:last-child{
  margin:0!important;
  color:var(--draft-ui-muted)!important;
  line-height:1.28!important;
}
.project-info .close{
  top:4px!important;
  right:4px!important;
  width:20px!important;
  height:20px!important;
  padding:0!important;
  font-size:1rem!important;
  line-height:20px!important;
  text-align:center!important;
}

/* Dot Grid Lab receives the same proportional reduction. */
.lab-panel{
  top:52px;
  width:min(292px,calc(100vw - 34px));
}
.lab-project{
  grid-template-columns:54px minmax(0,1fr);
  gap:8px;
  min-height:70px;
  padding:9px;
}
.lab-preview{
  width:54px;
  height:54px;
}
.lab-project-copy{
  gap:6px;
  padding-right:18px;
}
.lab-project-copy>div{max-height:54px}
.lab-project-copy h2{margin:0 0 3px}
.lab-project-copy p{
  max-width:198px;
  line-height:1.18!important;
  -webkit-line-clamp:3;
}
.lab-project-arrow{
  top:7px;
  right:7px;
}

@media(max-width:760px){
  .bio{
    bottom:10px;
    width:auto;
    max-width:calc(100% - 20px);
  }
  .bio-copy{min-width:0;flex:1}
  .bio p{
    width:auto;
    max-width:calc(100vw - 49px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .profile-popover,
  .profile-popover:not(.contact-active),
  .profile-popover.contact-active{width:246px}
  .profile-panel,
  .career-panel,
  .contact-panel{width:246px}
  .project-info{
    left:auto;
    right:10px;
    top:10px;
    width:min(246px,calc(100vw - 20px));
  }
  .lab-panel{
    top:52px;
    right:12px;
    width:min(292px,calc(100vw - 24px));
  }
  .lab-project{
    grid-template-columns:54px minmax(0,1fr);
    min-height:70px;
    padding:8px;
  }
  .lab-preview{width:54px;height:54px}
}

/* DRAFT 01 palette and exact shared capsule geometry. */
.canvas:not(.fun-mode){background:#fff!important}
.canvas:not(.fun-mode) .real-field{background:#fff!important}
.canvas.fun-mode{background:var(--paper)!important}

.canvas:not(.fun-mode) .top-nav .nav-separator{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto!important;
  margin:0!important;
  transform:translateY(-.04em);
}

.canvas:not(.fun-mode) .bio,
.canvas:not(.fun-mode) .bio-copy{
  height:auto!important;
}
.canvas:not(.fun-mode) .bio p{
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:.5rem!important;
  border-radius:var(--draft-ui-radius)!important;
  background:var(--draft-ui-paper)!important;
}
.canvas:not(.fun-mode) .portrait{
  width:28.5px!important;
  min-width:28.5px!important;
  height:28.5px!important;
  padding:2px!important;
}

/* One typographic system across every Real Work project surface. */
.canvas:not(.fun-mode) .real-field .project-card .label,
.canvas:not(.fun-mode) .real-field .project-card .label *,
.project-view .slide-media span,
.project-view .slide-media span *,
.project-info,
.project-info *{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase!important;
}

/* Context wraps tightly around its content with a consistent 12px inset. */
.profile-popover,
.profile-popover:not(.contact-active){
  --panel-height:334px;
  bottom:50.5px!important;
  height:367.5px;
}
.profile-popover.contact-active{
  bottom:50.5px!important;
  height:193.5px;
}
.career-panel{
  height:334px!important;
  padding:12px!important;
}
.career-panel .heading{margin:0 0 14px!important}
.career-panel .section-heading{margin:16px 0 14px!important}
.profile-tabs i{
  align-self:stretch;
  height:auto!important;
  min-height:var(--draft-ui-size);
}
.career-panel .about-link,
.career-panel .about-link *{
  color:var(--draft-ui-ink)!important;
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:var(--draft-ui-track)!important;
  opacity:1!important;
}
.career-panel .about-link:hover,
.career-panel .about-link:hover *{color:var(--draft-ui-ink)!important}
.profile-panel,
.career-panel,
.contact-panel{line-height:1.34!important}
.contact-panel,
.contact-panel a,
.contact-panel p{line-height:1.34!important}
.career-panel .profile-row div,
.career-panel .profile-row span,
.career-panel .profile-row time{line-height:1.32!important}
.project-info>p:last-child,
.lab-project-copy p{
  color:var(--draft-ui-muted)!important;
}
.project-info>p:last-child{line-height:1.38!important}

/* About is part of the same white, monospaced Real Work system. */
.canvas.about-mode,
.canvas.about-mode .about-field{
  background:#fff!important;
}
.canvas.about-mode .about-field{
  inset:0!important;
}
.canvas.about-mode .about-story,
.canvas.about-mode .about-story *,
.canvas.about-mode .about-story-paragraph,
.canvas.about-mode .about-story-word,
.canvas.about-mode .about-story-sentence{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:1.4!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase!important;
}
.canvas.about-mode .about-story{
  width:min(52ch,calc(100% - 56px));
  gap:18px;
  padding:64px 0 72px;
  transform:none;
}
.canvas.about-mode .bio .portrait .about-back-icon{
  width:11px!important;
  height:11px!important;
}
@media(max-width:760px){
  .canvas.about-mode .about-field{inset:0!important}
  .canvas.about-mode .about-story{
    width:min(38ch,calc(100% - 48px));
    gap:16px;
    padding:44px 0 58px;
    transform:none;
  }
  .canvas.about-mode .bio .portrait .about-back-icon{
    width:11px!important;
    height:11px!important;
  }
}

/* Playground adopts the compact typography without losing its blue language. */
.lab-toggle svg{
  width:22px;
  height:22px;
}
.canvas.fun-mode .top-nav{
  top:17px;
  left:17px;
  height:34px;
  font:400 var(--draft-ui-size)/var(--draft-ui-leading) var(--draft-ui-font)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase!important;
}
.canvas.fun-mode .top-nav button,
.canvas.fun-mode .top-nav button:first-child,
.canvas.fun-mode .top-nav button:last-child{
  height:34px!important;
  padding:9px!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  text-transform:inherit!important;
}
.canvas.fun-mode .fun-item span,
.canvas.fun-mode .fun-field.ordered .fun-item span{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase!important;
}
.canvas.fun-mode .bio{
  height:34px;
  gap:5px;
  align-items:center;
}
.canvas.fun-mode .bio-copy{
  width:550px;
  height:34px;
}
.canvas.fun-mode .bio p,
.canvas.fun-mode .bio-copy p{
  display:block;
  height:34px;
  box-sizing:border-box;
  padding:10.75px 20px;
  text-align:center;
  font:400 var(--draft-ui-size)/var(--draft-ui-leading) var(--draft-ui-font)!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase!important;
}
.canvas.fun-mode .bio-text-real{display:none!important}
.canvas.fun-mode .bio-text-fun{
  display:block!important;
  line-height:var(--draft-ui-leading)!important;
}
.canvas.fun-mode .bio-text-fun,
.canvas.fun-mode .bio-text-fun *{
  font-family:var(--draft-ui-font)!important;
  font-size:var(--draft-ui-size)!important;
  font-weight:400!important;
  line-height:var(--draft-ui-leading)!important;
  letter-spacing:var(--draft-ui-track)!important;
  text-transform:uppercase!important;
  font-synthesis:none!important;
}
.canvas.fun-mode .fun-bottom-shape{height:34px}
.canvas.fun-mode .portrait{
  width:40px;
  min-width:40px;
  height:40px;
  margin-left:0;
}
.canvas.fun-mode .bio{
  left:50%!important;
  right:auto!important;
  bottom:17px!important;
  width:auto!important;
  transform:translateX(-50%)!important;
}
.canvas.fun-mode .bio-copy{display:block!important}
.canvas.fun-mode .portrait{display:none!important}
.canvas.fun-mode .top-nav button:last-child{
  letter-spacing:var(--draft-ui-track)!important;
}
.canvas.fun-mode .fun-utility{
  right:20px;
}
.canvas.fun-mode .layout-eyes{
  width:36px;
  height:18px;
}
.canvas.fun-mode .layout-eyes svg{
  width:36px;
  height:18px;
}
@media(max-width:760px){
  .canvas.fun-mode .top-nav{
    top:12px;
    left:12px;
  }
  .canvas.fun-mode .bio{
    left:50%!important;
    right:auto!important;
    bottom:12px!important;
    width:calc(100% - 24px)!important;
    transform:translateX(-50%)!important;
  }
  .canvas.fun-mode .bio-copy{
    display:block!important;
    width:100%!important;
  }
  .canvas.fun-mode .bio p,
  .canvas.fun-mode .bio-copy p{
    display:block!important;
    line-height:18px!important;
    padding:9px 14px!important;
    white-space:normal!important;
  }
  .canvas.fun-mode .bio-text-real{display:none!important}
  .canvas.fun-mode .bio-text-fun{display:block!important}
  .canvas.fun-mode .portrait{display:none!important}
}

/* Final mobile balance: the portrait follows the measured text capsule, and
   Playground keeps one compact blue information bar. */
@media(max-width:760px){
  .profile-popover,
  .profile-popover:not(.contact-active),
  .profile-popover.contact-active{
    bottom:58px!important;
  }
  .canvas:not(.fun-mode) .bio{
    gap:var(--draft-ui-gap)!important;
    bottom:10px!important;
  }
  .canvas:not(.fun-mode) .bio-copy,
  .canvas:not(.fun-mode) .bio p.bio-text-real{
    height:43px!important;
    min-height:43px!important;
  }
  .canvas:not(.fun-mode) .bio p.bio-text-real{
    box-sizing:border-box!important;
    padding:8px 10px!important;
    line-height:13.5px!important;
    text-align:center!important;
    border:0!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .canvas:not(.fun-mode) .bio .portrait,
  .canvas:not(.fun-mode) .bio .portrait:focus,
  .canvas:not(.fun-mode) .bio .portrait:focus-visible{
    width:43px!important;
    min-width:43px!important;
    height:43px!important;
    min-height:43px!important;
    flex:0 0 43px!important;
    padding:3px!important;
    border:0!important;
    border-radius:3px!important;
    background:var(--draft-ui-paper)!important;
    box-shadow:none!important;
  }
  .canvas:not(.fun-mode) .bio .portrait img{
    width:100%!important;
    height:100%!important;
    border-radius:1px!important;
    transform:none!important;
  }
  .canvas.fun-mode .bio{
    height:34px!important;
  }
  .canvas.fun-mode .bio-copy{
    position:relative!important;
    height:34px!important;
    overflow:hidden!important;
    border-radius:0!important;
    background:transparent!important;
    -webkit-mask:none!important;
    mask:none!important;
  }
  .canvas.fun-mode .bio p.bio-text-real{
    display:none!important;
  }
  .canvas.fun-mode .bio p.bio-text-fun{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    min-height:34px!important;
    height:34px!important;
    margin:0!important;
    padding:10.75px 12px!important;
    background:transparent!important;
    color:#fff!important;
    border:0!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    font-size:var(--draft-ui-size)!important;
    line-height:var(--draft-ui-leading)!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  .canvas.fun-mode .bio p.bio-text-fun,
  .canvas.fun-mode .bio p.bio-text-fun *{
    font-size:var(--draft-ui-size)!important;
    line-height:var(--draft-ui-leading)!important;
    letter-spacing:var(--draft-ui-track)!important;
    color:#fff!important;
  }
  .canvas.fun-mode .bio-copy .fun-bottom-shape{
    content:normal!important;
    display:block!important;
    position:absolute!important;
    z-index:1!important;
    inset:0!important;
    width:100%!important;
    height:34px!important;
    object-fit:fill!important;
    opacity:1!important;
    transform:none!important;
  }
  .canvas.fun-mode .bio-copy .fun-bottom-shape-picture{
    display:none!important;
  }
}

/* Diagonal action arrows match the close icon optically. */
.career-panel .about-link span:last-child,
.lab-project-arrow{
  font-size:16px!important;
  line-height:1!important;
}

.fun-bottom-shape-inline{display:none}
.bio-text-fun-mobile{display:none!important}
@media(max-width:760px){
  .canvas.fun-mode .bio-copy .fun-bottom-shape-desktop{display:none!important}
  .canvas.fun-mode .bio-copy .fun-bottom-shape-inline{display:block!important}
  .canvas.fun-mode .bio p.bio-text-fun-desktop{display:none!important}
  .canvas.fun-mode .bio p.bio-text-fun-mobile{display:block!important}
}

/* Password-protected project card, matched to the selected Figma frame. */
.real-field.collage-home .collage-tile:nth-child(11){
  grid-column:1/-1;
  height:auto!important;
  aspect-ratio:1109/361;
}
.locked-project-card{
  position:relative;
  display:block;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#f4f4f4!important;
  box-shadow:5.407px 2.703px 8.11px rgba(0,0,0,.05);
}
.locked-project-art{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#f4f4f4;
}
.locked-project-art::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:rgba(255,255,255,.48);
  pointer-events:none;
  opacity:1;
  transition:opacity .34s cubic-bezier(.22,1,.36,1);
}
.locked-project-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(24px) brightness(1.08) saturate(.68);
  transform:scale(1.12);
  transition:filter .68s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.22,1,.36,1);
  will-change:filter,transform;
}
.locked-project-art span{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:30px;
  height:30px;
  background:url("./assets/figma/locked-project-icon.svg") center/contain no-repeat;
  transform:translate(-50%,-50%);
  transform-origin:center;
  opacity:1;
  transition:opacity .2s ease,transform .34s cubic-bezier(.22,1,.36,1);
}
.locked-project-card.is-unlocking-cover .locked-project-art img{
  filter:blur(0) brightness(1) saturate(1);
  transform:scale(1);
}
.locked-project-card.is-unlocking-cover .locked-project-art::after{opacity:0;transition-duration:.62s}
.locked-project-card.is-unlocking-cover .locked-project-art span{
  opacity:0;
  transform:translate(-50%,-50%) scale(.88);
}
.locked-project-card.is-unlocked{background:#0c0c0c!important}
.locked-project-card.is-unlocked>img{display:block;width:100%;height:100%;object-fit:cover}

.locked-project-modal{position:fixed;inset:0;z-index:240;visibility:hidden;pointer-events:none;transition:visibility 0s linear .52s}
.locked-project-modal,
.locked-project-modal *{
  font-family:"Fragment Mono","SFMono-Regular",ui-monospace,monospace!important;
  font-synthesis:none;
}
.locked-project-modal.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.locked-project-backdrop{position:absolute;inset:0;width:100%;height:100%;background:rgba(230,230,230,.58);opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:opacity .44s cubic-bezier(.22,1,.36,1),-webkit-backdrop-filter .52s cubic-bezier(.22,1,.36,1),backdrop-filter .52s cubic-bezier(.22,1,.36,1)}
.locked-project-modal.open .locked-project-backdrop{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.locked-project-panel{position:absolute;left:50%;top:50%;width:min(280px,calc(100vw - 32px));height:87px;min-height:0;overflow:hidden;border-radius:var(--draft-ui-radius);background:#e6e6e6;opacity:0;filter:blur(4px);transform:translate(-50%,calc(-50% + 7px)) scale(.975);transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1),filter .46s cubic-bezier(.22,1,.36,1);will-change:opacity,transform,filter}
.locked-project-modal.open .locked-project-panel{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}
.locked-project-copy{display:flex;flex-direction:column;justify-content:flex-start;gap:11px;width:100%;height:100%;padding:12px 6px 6px;color:#111;font:400 var(--draft-ui-size)/var(--draft-ui-leading) var(--draft-ui-font);letter-spacing:var(--draft-ui-track);text-transform:uppercase;opacity:1;transform:translateY(0);transition:opacity .2s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.locked-project-modal.unlocking .locked-project-backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.locked-project-modal.unlocking .locked-project-panel{opacity:0;filter:blur(3px);transform:translate(-50%,calc(-50% - 5px)) scale(.985)}
.locked-project-modal.unlocking .locked-project-copy{opacity:0;transform:translateY(-3px)}
.locked-project-intro{margin:0;text-align:center;color:#111;font:400 var(--draft-ui-size)/1.45 var(--draft-ui-font);letter-spacing:var(--draft-ui-track)}
.locked-project-form{position:relative;margin:0}
.locked-project-label,.locked-project-submit{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.locked-project-field{display:block}
.locked-project-field input{display:block;width:100%;height:28px;min-width:0;padding:0 8px;border:1px solid rgba(0,0,0,.06);border-radius:var(--draft-ui-radius);background:#f7f7f7;color:#111;text-align:center;outline:0;font:400 var(--draft-ui-size)/1 var(--draft-ui-font);letter-spacing:var(--draft-ui-track);text-transform:uppercase}
.locked-project-field input::placeholder{color:#9c9c9c;opacity:1}
.locked-project-field input:focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.locked-project-message{position:absolute;left:0;right:0;bottom:3px;margin:0;color:#d42f2f;text-align:center;font:400 var(--draft-ui-size)/1 var(--draft-ui-font);letter-spacing:var(--draft-ui-track);pointer-events:none}
.locked-project-unlocked{margin:auto;text-align:center;font:400 var(--draft-ui-size)/1.4 var(--draft-ui-font);letter-spacing:var(--draft-ui-track)}
.locked-project-unlocked p{margin:0 0 9px}
.locked-project-form[hidden],.locked-project-unlocked[hidden]{display:none!important}

@media (hover:hover) and (pointer:fine){
  .locked-project-card:hover .locked-project-art span{
    transform:translate(-50%,calc(-50% - 2px)) rotate(-1.5deg);
  }
}

@media(max-width:760px){
  .real-field.collage-home .locked-project-card{
    display:block!important;
    height:calc((100vw - 24px) * .52)!important;
    min-height:0!important;
    margin-top:40px!important;
  }
  .locked-project-art span{width:27px;height:27px}
  .locked-project-panel{width:min(280px,calc(100vw - 32px));height:87px;border-radius:var(--draft-ui-radius)}
  .locked-project-copy{padding:12px 6px 6px}
  .locked-project-field input{height:28px;border-radius:var(--draft-ui-radius)}

}

/* Keep the Real Work information bar inside narrow viewports. Its copy owns
   the remaining width while the portrait stays fixed, so neither side can be
   pushed beyond the screen by the long label. */
.bio-mobile-break{display:none}
@media(max-width:760px){
  .canvas:not(.fun-mode) .bio{
    left:50%!important;
    right:auto!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    transition:width .68s cubic-bezier(.76,0,.24,1),gap .68s cubic-bezier(.34,1.35,.64,1)!important;
  }
  .canvas:not(.fun-mode):not(.about-mode) .bio{
    width:calc(100% - 20px)!important;
  }
  .canvas:not(.fun-mode):not(.about-mode) .bio-copy{
    width:calc(100% - 51px)!important;
    min-width:0!important;
    max-width:calc(100% - 51px)!important;
    flex:0 0 calc(100% - 51px)!important;
    opacity:1!important;
    transform:scaleX(1)!important;
    overflow:hidden!important;
  }
  .canvas:not(.fun-mode) .bio-copy{
    transition:width .68s cubic-bezier(.76,0,.24,1),flex-basis .68s cubic-bezier(.76,0,.24,1),opacity .24s ease,transform .5s ease!important;
  }
  .canvas.about-mode .bio{
    width:43px!important;
  }
  .canvas.about-mode .bio-copy{
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    flex:0 0 0!important;
    opacity:0!important;
    overflow:hidden!important;
    transform:scaleX(.72)!important;
    pointer-events:none!important;
  }
  .canvas.about-returned:not(.about-mode) .bio-copy,
  .canvas.about-returned:not(.about-mode) .portrait{
    animation:none!important;
  }
  .canvas .bio .portrait img.about-back-icon{
    width:11px!important;
    height:11px!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:0!important;
    transform:translate(-50%,-50%) scale(.72)!important;
  }
  .canvas.about-mode .bio .portrait .about-back-icon{
    transform:translate(-50%,-50%) scale(1)!important;
  }
  .canvas:not(.fun-mode):not(.about-mode) .bio p.bio-text-real{
    display:block!important;
    text-align:center!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  .bio-mobile-break{display:block}
}