:root{
  --bg:#f3f0e8;
  --bg-2:#ece8df;
  --ink:#131313;
  --muted:#666;
  --yellow:#f5ea61;
  --pink:#f59bc8;
  --mint:#8be6ad;
  --cyan:#7ce4ef;
  --red:#ef4b3f;
  --blue:#2f63ff;
  --paper:#f4eddc;
  --line:#151515;
  --stage-w:1440px;
  --stage-h:860px;
  --stage-padding:18px;
}

*{
  box-sizing:border-box;
}

html, body{
  width:100%;
  min-height:100%;
}

body{
  margin:0;
  overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color:var(--ink);
  font-family:"Inter", sans-serif;
}

img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}

a, button{
  font:inherit;
  color:inherit;
}

button{
  cursor:pointer;
  border:none;
  background:none;
}

.loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  transition:opacity .7s ease, visibility .7s ease, transform .7s ease;
}

.loader.hide{
  opacity:0;
  visibility:hidden;
  transform:scale(1.03);
}

.loader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.loader-badge{
  position:relative;
  width:84px;
  height:84px;
  border:2px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  animation:loaderFloat 1.8s ease-in-out infinite;
}

.loader-dot{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid var(--line);
}

.dot-1{
  left:14px;
  top:16px;
  background:var(--yellow);
  animation:dotPulse 1.2s ease-in-out infinite;
}

.dot-2{
  right:14px;
  top:26px;
  background:var(--red);
  animation:dotPulse 1.2s ease-in-out .15s infinite;
}

.dot-3{
  left:32px;
  bottom:14px;
  background:var(--blue);
  animation:dotPulse 1.2s ease-in-out .3s infinite;
}

.loader-text{
  margin:0;
  font-size:.92rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

@keyframes loaderFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-6px) rotate(-2deg); }
}

@keyframes dotPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.25); }
}

@keyframes worldFloat{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}

@keyframes worldFloatSlow{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-14px); }
}

@keyframes memoFloat{
  0%,100%{ transform:rotate(-3deg) translateY(0); }
  50%{ transform:rotate(-3deg) translateY(-3px); }
}

@keyframes graphicBreath{
  0%,100%{
    transform:rotate(2deg) translateY(0);
  }
  50%{
    transform:rotate(2deg) translateY(-3px);
  }
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  pointer-events:none;
}

.topbar > *{
  pointer-events:auto;
}

.brand-lockup{
  display:flex;
  align-items:center;
}

.brand-name-plain{
  text-decoration:none;
  color:var(--ink);
  line-height:1;
  text-transform:uppercase;
}

.brand-name-tag{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:0 16px 0 18px;
  background:var(--ink);
  border:2px solid var(--line);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  font-weight:900;
  font-size:2rem;
  letter-spacing:-.11em;
  transform:translateY(1px);

  color:#ffffff;
  -webkit-text-stroke:1px rgb(0, 0, 0);
  text-stroke:1px #111;
}

.brand-name-tag::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:8px;
  height:2px;
  background:#111;
  opacity:.18;
}

.brand-name-tag:hover{
  transform:translateY(-1px);
}

.circle-btn{
  width:40px;
  height:40px;
  border:2px solid var(--line);
  background:rgba(255,255,255,.84);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.circle-btn:hover{
  transform:translateY(-1px) scale(1.04);
  background:#fff;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}

.side-tools{
  position:fixed;
  z-index:140;
}

.left-tools{
  left:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.menu-wrap{
  position:relative;
}

.menu-btn{
  width:54px;
  height:54px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 10px 24px rgba(0,0,0,.08);
}

.menu-btn span{
  display:block;
  width:22px;
  height:2px;
  background:#151515;
}

.menu-pop{
  position:absolute;
  left:54px;
  top:0;
  width:260px;
  opacity:0;
  pointer-events:none;
  transform:translateY(0) scale(.98);
  transition:opacity .22s ease, transform .22s ease;
}

.menu-wrap:hover .menu-pop,
.menu-wrap:focus-within .menu-pop{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.menu-panel{
  background:rgba(255,255,255,.94);
  padding:16px 18px;
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 14px 28px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
}

.menu-heading{
  font-weight:800;
  font-size:.98rem;
  margin-bottom:12px;
}

.menu-list{
  margin:0;
  padding-left:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:.92rem;
  line-height:1.4;
}

.menu-link{
  width:100%;
  text-align:left;
  padding:0;
  background:none;
  border:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  font-weight:600;
}

.menu-link:hover{
  opacity:.65;
}

.social-dots{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.social-dot{
  width:44px;
  height:44px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 4px 10px rgba(0,0,0,.05);
}

.social-dot:hover{
  transform:scale(1.08);
  background:#f6f6f6;
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 8px 16px rgba(0,0,0,.10);
}

.social-dot span{
  font-size:.95rem;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.03em;
}

.zoom-btn{
  width:54px;
  height:54px;
  background:#fff;
  font-size:1.3rem;
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 10px 24px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.zoom-btn:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 14px 28px rgba(0,0,0,.12);
  background:#f7f7f7;
}

.zoom-btn.active{
  background:var(--cyan);
}

.zoom-floating{
  position:fixed;
  left:18px;
  top:calc(100vh - 78px);
  z-index:180;
  touch-action:none;
  user-select:none;
}

.viewport{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.world-backdrop{
  position:absolute;
  inset:-16vh -16vw;
  z-index:0;
  pointer-events:none;
  transform:scale(1);
  transition:transform .55s ease, opacity .4s ease;
}

.zoom-mode .world-backdrop{
  transform:scale(1.12);
}

.world-object{
  position:absolute;
  opacity:.58;
  background:#fff;
  box-shadow:inset 0 0 0 3px #111, 0 14px 26px rgba(0,0,0,.08);
}

.obj-a{
  width:280px;
  height:180px;
  left:-1%;
  top:2%;
  background:linear-gradient(90deg, var(--yellow) 0 36%, #fff 36% 100%);
}

.obj-b{
  width:300px;
  height:270px;
  right:-1%;
  top:4%;
  background:
    linear-gradient(0deg, #fff 0 56%, var(--red) 56% 100%),
    linear-gradient(90deg, var(--blue) 0 38%, #fff 38% 100%);
}

.obj-c{
  width:110px;
  height:110px;
  left:8%;
  bottom:10%;
  background:linear-gradient(180deg, var(--blue), #fff);
}

.obj-d{
  width:280px;
  height:90px;
  right:8%;
  bottom:8%;
  background:linear-gradient(90deg, #fff 0 72%, #111 72% 100%);
}

.obj-e{
  width:90px;
  height:320px;
  left:20%;
  top:16%;
  background:linear-gradient(0deg, #fff 0 62%, var(--yellow) 62% 100%);
}

.obj-f{
  width:360px;
  height:160px;
  right:19%;
  bottom:20%;
  background:linear-gradient(90deg, var(--red) 0 28%, #fff 28% 100%);
}

.loop-float{
  animation:worldFloat 4.2s ease-in-out infinite;
}

.loop-float-slow{
  animation:worldFloatSlow 6s ease-in-out infinite;
}

.page-shell{
  position:absolute;
  inset:0;
  overflow:hidden;
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  padding:0;
  z-index:2;
}

.canvas{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--stage-w);
  height:var(--stage-h);
  transform-origin:center center;
  transition:transform .3s ease;
  will-change:transform;
  overflow:visible;
}

.designer-canvas{
  background:linear-gradient(180deg, #faf8f1 0%, #f2eee4 100%);
  box-shadow:
    0 0 0 1px rgba(20,20,20,.12),
    0 1px 0 rgba(255,255,255,.7) inset,
    0 14px 24px rgba(0,0,0,.06),
    12px 12px 0 rgba(20,20,20,.06);
}

.hero-center{
  position:absolute;
  left:50%;
  top:118px;
  transform:translate(-50%, -50%);
  z-index:90;
  width:min(90vw, 1280px);
  text-align:center;
  pointer-events:none;
}

.hero-center-inner{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-title{
  margin:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.26rem;
  flex-wrap:wrap;
  font-size:clamp(2.6rem, 5.6vw, 6.6rem);
  line-height:1;
  letter-spacing:-.08em;
  font-weight:900;
  stroke: var(--bg);
}

.designer-title{
  color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.hero-title .slash{
  opacity:.8;
}
.highlight{
  position:relative;
  display:inline-block;
  z-index:1;
}
.highlight::before{
  content:"";
  position:absolute;

  left:-6px;
  right:-6px;
  bottom:0.2em;
  height:0.6em;

  background:rgba(80, 140, 255, 0.45);

  z-index:-1;

  transform:rotate(-1.5deg);

  filter:blur(0.3px);
}

.reveal-up{
  opacity:0;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.reveal-up:not(.canvas){
  transform:translateY(18px) scale(.98);
}

.reveal-up.show{
  opacity:1;
}

.reveal-up.show:not(.canvas){
  transform:translateY(0) scale(1);
}

.designer-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.grid-block{
  position:absolute;
  box-shadow:inset 0 0 0 3px #111;
}

.block-yellow{
  left:1%;
  top:3%;
  width:24%;
  height:17%;
  background:var(--yellow);
}

.block-red{
  right:3%;
  top:4%;
  width:18%;
  height:26%;
  background:var(--red);
}

.block-blue{
  left:3%;
  bottom:7%;
  width:8%;
  height:12%;
  background:var(--blue);
}

.block-black{
  right:6%;
  bottom:10%;
  width:16%;
  height:7%;
  background:#111;
}

.grid-line{
  position:absolute;
  background:#111;
}

.line-v1{
  width:3px;
  height:100%;
  left:22%;
  top:0;
}

.line-v2{
  width:3px;
  height:100%;
  left:69%;
  top:0;
}

.line-h1{
  height:3px;
  width:100%;
  left:0;
  top:26%;
}

.line-h2{
  height:3px;
  width:100%;
  left:0;
  top:74%;
}

.floating-card{
  position:absolute;
  z-index:20;
  user-select:none;
  will-change:transform;
  transition:transform .25s ease, filter .25s ease;
}

.floating-card:hover{
  z-index:200;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.12))
    drop-shadow(0 20px 36px rgba(0,0,0,.14));
}

.web-preview{
  width:100%;
  height:110px;
  margin-bottom:14px;

  background:url("./Images/网页设计/主页图片.jpg") center/cover no-repeat;

  box-shadow:
    inset 0 0 0 2px var(--line),
    0 6px 12px rgba(0,0,0,.08);
}

.web-card:hover .web-preview{
  transform:translateY(-4px) scale(1.02);
  transition:transform .25s ease;
}
.web-card .manifesto-line{
  font-size:1.3rem;
  font-weight:900;
}

.web-card .manifesto-kicker{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#666;
  margin-bottom:10px;
}

.web-card .manifesto-line{
  font-size:1.35rem;
  font-weight:900;
  line-height:1.05;
}

.designer-label-card{
  left:72px;
  top:138px;
  width:240px;
  z-index:10;
}

.designer-label{
  position:relative;
  width:240px;
  min-height:130px;
  background:#fbfbf7;
  box-shadow:inset 0 0 0 3px #111, 0 14px 26px rgba(0,0,0,.08);
  padding:18px 18px 16px;
  transition:transform .28s ease;
}

.hover-peel:hover{
  transform:rotate(-2deg) translateY(-4px);
}

.label-peel-corner{
  position:absolute;
  top:0;
  right:0;
  width:34px;
  height:34px;
  background:linear-gradient(135deg, rgba(255,255,255,0) 49%, #eae7dd 50% 100%);
  transform-origin:top right;
  transition:transform .28s ease;
}

.hover-peel:hover .label-peel-corner{
  transform:rotate(-8deg) scale(1.05);
}

.label-small{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6f6f6f;
  margin-bottom:12px;
}

.label-big{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:10px;
}

.label-meta{
  font-size:.92rem;
  color:#4d4d4d;
  line-height:1.45;
}

.designer-manifesto-card{
  left:115px;
  top:438px;
  width:250px;
  z-index:10;
}

.designer-manifesto{
  width:250px;
  min-height:220px;
  background:#fff;
  box-shadow:inset 0 0 0 3px #111, 0 14px 26px rgba(0,0,0,.08);
  padding:20px;
}

.manifesto-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#666;
  margin-bottom:18px;
}

.manifesto-line{
  font-size:1.2rem;
  font-weight:800;
  line-height:1.1;
  margin-bottom:14px;
  letter-spacing:-.03em;
  transition:transform .22s ease;
}

.hover-shift-lines:hover .manifesto-line:nth-child(2){
  transform:translateX(8px);
}

.hover-shift-lines:hover .manifesto-line:nth-child(3){
  transform:translateX(-6px);
}

.hover-shift-lines:hover .manifesto-line:nth-child(4){
  transform:translateX(12px);
}

.designer-case-card{
  left:677px !important;
  top:155px !important;
  width:540px !important;
  z-index:34 !important;
  transform:translateX(-50%) !important;
}

.case-stack{
  position:relative;
  width:540px !important;
  height:400px !important;
}

.case-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 3px #111, 0 16px 28px rgba(0,0,0,.10);
  transition:transform .28s ease, opacity .28s ease;
}

.case-photo-1{
  background-image:url("./Images/Casestudy/Cuepo广告KV.png");
  transform:translate(12px, 12px);
  opacity:.88;
}

.case-photo-2{
  background-image:url("./Images/Casestudy/截屏2026-04-18 下午10.33.39.png");
  transform:translate(24px, 24px);
  opacity:.78;
}

.case-photo-3{
  background-image:url("./Images/Casestudy/Life Tile UI 草稿.jpg");
  transform:translate(36px, 36px);
  opacity:.70;
}

.case-main{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(252,248,242,.98));
  box-shadow:
    inset 0 0 0 3px #111,
    0 24px 34px rgba(0,0,0,.14),
    0 8px 0 rgba(20,20,20,.05);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:transform .28s ease;
}

.hover-fan-out:hover .case-photo-1{
  transform:translate(56px, -10px) rotate(3deg);
}

.hover-fan-out:hover .case-photo-2{
  transform:translate(92px, 12px) rotate(-3deg);
}

.hover-fan-out:hover .case-photo-3{
  transform:translate(126px, 34px) rotate(4deg);
}

.hover-fan-out:hover .case-main{
  transform:translate(-12px, -12px);
}

.designer-case-card:hover{
  z-index:260;
}

.case-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#666;
  margin-bottom:14px;
}

.case-title{
  font-size:3rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.05em;
  margin-bottom:12px;
}

.case-sub{
  font-size:1rem;
  color:#4c4c4c;
  line-height:1.5;
  max-width:320px;
}

.designer-magazine-card{
  position:absolute !important;
  left:821px !important;
  top:215px !important;
  width:390px !important;
  z-index:26 !important;
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  transform:rotate(2deg) !important;
  filter:
    drop-shadow(0 8px 14px rgba(0,0,0,.08))
    drop-shadow(0 18px 24px rgba(0,0,0,.08));
  animation:graphicBreath 4.8s ease-in-out infinite;
}

.magazine-spread{
  position:relative;
  width:390px !important;
  height:272px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:visible;
  perspective:1200px;
}

.magazine-spine{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.18);
  z-index:4;
}

.magazine-right-page{
  position:absolute;
  inset:0;
  background:#fff;
  box-shadow:inset 0 0 0 3px #111, 0 16px 28px rgba(0,0,0,.10);
  overflow:hidden;
}

.magazine-right-cover{
  position:absolute;
  inset:0;
  z-index:5;
  background:linear-gradient(135deg, #fff7df, #fffdf6);
  transform-origin:left center;
  transition:transform .5s ease;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.mag-kicker{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#666;
  margin-bottom:10px;
}

.mag-title{
  font-size:2.35rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.05em;
  margin-bottom:10px;
}

.mag-sub{
  font-size:.92rem;
  color:#555;
}

.magazine-left-inner,
.magazine-right-inner{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  background-size:cover;
  background-position:center;
}

.magazine-left-inner{
  left:0;
  background-image:url("./Images/GraphicDesign/Image 1 (1).png");
}

.magazine-right-inner{
  right:0;
  background-image:url("./Images/GraphicDesign/Image 9.png");
}

.magazine-left-cover{
  position:absolute;
  inset:0;
  z-index:6;
  background:#f7f3e8;
  box-shadow:inset 0 0 0 3px #111, 0 16px 28px rgba(0,0,0,.10);
  transform-origin:left center;
  transition:transform .52s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.left-cover-text{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.designer-magazine-card:hover .magazine-left-cover{
  transform:rotateY(-162deg);
}

.designer-magazine-card:hover .magazine-right-cover{
  transform:rotateY(-154deg);
}

.designer-magazine-card::before{
  content:"Graphic Design";
  position:absolute;
  left:-18px;
  top:20px;
  width:18px;
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#111;
  background:#fff;
  box-shadow:inset 0 0 0 2px #111;
  z-index:60;
}

.designer-magazine-card::after{
  content:"";
  position:absolute;
  right:-16px;
  top:16px;
  width:56px;
  height:34px;
  background:var(--blue) !important;
  box-shadow:
    inset 0 0 0 2px #111,
    0 6px 10px rgba(0,0,0,.08);
  z-index:60;
}

.designer-magazine-card:hover{
  transform:translate(-18px, -6px) rotate(1deg) scale(1.02) !important;
  z-index:220 !important;
  filter:
    drop-shadow(0 14px 22px rgba(0,0,0,.12))
    drop-shadow(0 24px 34px rgba(0,0,0,.14));
  animation:none;
}

.designer-strip-card{
  left:346px;
  top:688px;
  width:490px;
  z-index:10;
}

.designer-strip{
  position:relative;
  width:100%;
  min-height:116px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 3px #111, 0 12px 22px rgba(0,0,0,.08);
  overflow:hidden;
}

.strip-front,
.strip-back{
  padding:18px 22px;
  transition:transform .32s ease;
}

.strip-front{
  position:relative;
  z-index:2;
  background:#fffdf9;
}

.strip-back{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, var(--yellow), #fff);
  transform:translateY(100%);
}

.hover-drawer:hover .strip-front{
  transform:translateY(-14px);
}

.hover-drawer:hover .strip-back{
  transform:translateY(0);
}

.strip-back span{
  display:none;
}

.strip-title{
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:10px;
}

.designer-strip-card .strip-front p{
  margin:0;
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.01em;
  color:#4f4f4f;
}

.annotation-card{
  position:absolute;
  left:12px;
  bottom:12px;
  transform:translateY(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:10;
  background:rgba(255,255,255,.92);
  padding:10px 12px;
  box-shadow:inset 0 0 0 2px #111;
  max-width:85%;
}

.floating-card:hover .annotation-card{
  opacity:1;
  transform:translateY(0);
}

.annotation-title{
  font-weight:700;
  font-size:.95rem;
  margin-bottom:6px;
  letter-spacing:-.02em;
  color:var(--ink);
}

.annotation-body{
  margin:0;
  font-size:.88rem;
  line-height:1.5;
  color:#3c3c3c;
}

.annotation-right,
.annotation-left{
  left:12px;
  right:auto;
  top:auto;
  bottom:12px;
}

.annotation-bubble{
  background:rgba(255,255,255,.96);
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 14px 24px rgba(0,0,0,.14);
}

.play-dice{
  position:absolute;
  left:60%;
  top:60%;
  width:78px;
  height:78px;
  transform-style:preserve-3d;
  transform:translate(-50%, -50%) rotateX(-22deg) rotateY(28deg);
  z-index:60;
  cursor:grab;
  user-select:none;
  touch-action:none;
}

.play-dice.dragging{
  cursor:grabbing;
}

.dice-face{
  position:absolute;
  inset:0;
  background:#fff;
  box-shadow:inset 0 0 0 3px #111;
}

.face-front{ transform:translateZ(39px); }
.face-back{ transform:rotateY(180deg) translateZ(39px); }
.face-right{ transform:rotateY(90deg) translateZ(39px); }
.face-left{ transform:rotateY(-90deg) translateZ(39px); }
.face-top{ transform:rotateX(90deg) translateZ(39px); }
.face-bottom{ transform:rotateX(-90deg) translateZ(39px); }

.pip{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#111;
  box-shadow:0 0 0 2px #111, inset 0 0 0 1px rgba(255,255,255,.18);
}

.face-front .pip,
.face-top .pip{ background:var(--red); }

.face-right .pip,
.face-bottom .pip{ background:var(--blue); }

.face-left .pip{ background:var(--yellow); }

.face-back .pip{ background:#111; }

.pip-c{ left:50%; top:50%; transform:translate(-50%,-50%); }
.pip-tl{ left:13px; top:13px; }
.pip-tr{ right:13px; top:13px; }
.pip-bl{ left:13px; bottom:13px; }
.pip-br{ right:13px; bottom:13px; }
.pip-ml{ left:13px; top:50%; transform:translateY(-50%); }
.pip-mr{ right:13px; top:50%; transform:translateY(-50%); }

.story-sticker-card{
  left:1123px;
  top:585px;
  width:150px;
  z-index:18;
}

.story-sticker{
  position:relative;
  width:150px;
  height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:12px 10px 10px;
  background:#fffdf8;
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 12px 20px rgba(0,0,0,.10);
  transform:rotate(-6deg);
  transition:transform .22s ease, box-shadow .22s ease;
  cursor:pointer;
}

.story-sticker:hover{
  transform:rotate(-4deg) translateY(-6px) scale(1.03);
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 18px 28px rgba(0,0,0,.14);
}

.story-sticker:active{
  transform:rotate(-4deg) translateY(-1px) scale(.96);
}

.story-sticker.is-pressed{
  transform:rotate(-4deg) translateY(-1px) scale(.98);
}

.story-sticker-image{
  position:relative;
  width:100%;
  height:108px;
  margin-bottom:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:inset 0 0 0 2px var(--line);
}

.sticker-img{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:opacity .25s ease;
}

.sticker-img.base{
  background-image:url("./Images/自拍/mystory1.jpeg");
  opacity:1;
}

.sticker-img.hover{
  background-image:url("./Images/自拍/mystory2.JPEG");
  opacity:0;
}

.story-sticker-image::before{
  display:none;
}

.story-sticker-label{
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.story-sticker-card .annotation-card{
  max-width:120px;
  padding:6px 8px;
}

.story-sticker-card .annotation-title{
  display:none;
}

.story-sticker-card .annotation-body{
  font-size:.72rem;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.story-sticker:hover .sticker-img.base{
  opacity:0;
}

.story-sticker:hover .sticker-img.hover{
  opacity:1;
}

.mode-switch{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  z-index:220;
  display:flex;
  gap:8px;
  padding:8px;
  background:rgba(255,255,255,.86);
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 10px 24px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
}

.mode-btn{
  min-width:110px;
  height:42px;
  padding:0 18px;
  background:#fff;
  box-shadow:inset 0 0 0 2px var(--line);
  font-weight:800;
  transition:all .18s ease;
  position:relative;
}

.mode-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 6px 14px rgba(0,0,0,.12);
}

.mode-btn:active{
  transform:translateY(0) scale(.96);
}

.mode-btn.active{
  background:var(--yellow);
}

.mode-btn.active::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  height:2px;
  background:#111;
  opacity:.2;
}

@media (hover: hover) and (pointer: fine){
  html, body, *{
    cursor:none !important;
  }
}

.cursor-dot,
.cursor-ring{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:99999;
  opacity:0;
  will-change:transform;
  transform:translate3d(-100px, -100px, 0);
  transition:opacity .18s ease;
}

.cursor-dot{
  width:10px;
  height:10px;
  margin-left:-5px;
  margin-top:-5px;
  border-radius:50%;
  background:#111;
}

.cursor-ring{
  width:36px;
  height:36px;
  margin-left:-18px;
  margin-top:-18px;
  border:2px solid rgba(17,17,17,.88);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(2px);
  transition:
    width .18s ease,
    height .18s ease,
    margin-left .18s ease,
    margin-top .18s ease,
    border-color .18s ease,
    background .18s ease,
    opacity .18s ease;
}

.cursor-dot.is-visible,
.cursor-ring.is-visible{
  opacity:1;
}

.cursor-ring.is-hover{
  width:52px;
  height:52px;
  margin-left:-26px;
  margin-top:-26px;
}

.cursor-ring.is-card{
  width:58px;
  height:42px;
  margin-left:-29px;
  margin-top:-21px;
}

.cursor-ring.is-button{
  width:28px;
  height:28px;
  margin-left:-14px;
  margin-top:-14px;
}

.cursor-ring.is-about{
  width:62px;
  height:62px;
  margin-left:-31px;
  margin-top:-31px;
}

.cursor-ring.is-social{
  width:64px;
  height:36px;
  margin-left:-32px;
  margin-top:-18px;
}

.cursor-ring.is-down{
  transform:scale(.9);
}

.cursor-dot.is-down{
  opacity:.86;
}

.cursor-ring.is-dragging{
  width:64px;
  height:40px;
  margin-left:-32px;
  margin-top:-20px;
}

@media (max-width: 980px){
  .hero-title{
    font-size:clamp(2rem, 6vw, 4.9rem);
  }

  .designer-case-card{
    width:420px !important;
  }

  .case-stack{
    width:420px !important;
    height:330px !important;
  }

  .case-title{
    font-size:2.4rem;
  }

  .designer-magazine-card{
    width:340px !important;
    left:61% !important;
    top:26% !important;
  }

  .magazine-spread{
    width:340px !important;
    height:245px !important;
  }

  .designer-strip-card{
    width:440px;
    left:24%;
  }

  .designer-strip{
    width:440px;
  }
}

@media (max-width: 768px){
  .topbar{
    padding:10px 12px;
  }

  .page-shell{
    padding:10px;
  }

  .canvas{
    left:50%;
    top:50%;
    width:var(--stage-w);
    height:var(--stage-h);
  }

  .left-tools{
    left:10px;
  }

  .zoom-floating{
    left:10px;
    top:calc(100vh - 68px);
  }

  .hero-center{
    top:12%;
    width:min(94vw, 680px);
  }

  .hero-title{
    font-size:clamp(1.6rem, 8vw, 2.4rem);
    line-height:1.02;
  }

  .designer-case-card{
    left:50% !important;
    top:18% !important;
    width:min(88vw, 430px) !important;
    transform:translateX(-50%) !important;
    z-index:34 !important;
  }

  .case-stack{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
  }

  .case-title{
    font-size:clamp(1.9rem, 6vw, 2.6rem) !important;
  }

  .case-sub{
    font-size:.88rem;
    max-width:80%;
  }

  .designer-magazine-card{
    left:56% !important;
    top:48% !important;
    width:min(62vw, 300px) !important;
    z-index:26 !important;
  }

  .magazine-spread{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1.44 / 1 !important;
  }

  .designer-magazine-card::before{
    display:none !important;
  }

  .designer-magazine-card::after{
    width:38px !important;
    height:24px !important;
    right:-10px !important;
    top:10px !important;
  }

  .mag-title{
    font-size:clamp(1.3rem, 5vw, 1.9rem) !important;
  }

  .mag-sub{
    font-size:.8rem;
  }

  .designer-label-card{
    left:5% !important;
    top:16% !important;
    width:150px !important;
  }

  .designer-label{
    width:150px !important;
    min-height:96px !important;
    padding:12px;
  }

  .label-big{
    font-size:.95rem;
  }

  .label-meta{
    font-size:.72rem;
  }

  .designer-manifesto-card{
    left:5% !important;
    top:52% !important;
    width:160px !important;
  }

  .designer-manifesto{
    width:160px !important;
    min-height:150px !important;
    padding:14px;
  }

  .manifesto-line{
    font-size:.9rem;
    margin-bottom:10px;
  }

  .designer-strip-card{
    left:50% !important;
    top:auto !important;
    bottom:11% !important;
    width:min(82vw, 340px) !important;
    transform:translateX(-50%);
  }

  .designer-strip{
    width:100% !important;
    min-height:92px !important;
  }

  .strip-front,
  .strip-back{
    padding:14px 16px;
  }

  .designer-strip-card .strip-front p{
    font-size:.82rem;
    line-height:1.4;
  }

  .story-sticker-card{
    left:76% !important;
    top:72% !important;
    width:104px !important;
  }

  .story-sticker{
    width:104px !important;
    height:126px !important;
    padding:8px 8px 8px;
  }

  .story-sticker-image{
    height:70px !important;
    margin-bottom:8px;
  }

  .story-sticker-label{
    font-size:.68rem;
  }

  .story-sticker-card .annotation-card{
    display:none !important;
  }

  .annotation-card{
    max-width:74% !important;
    padding:8px 10px !important;
  }

  .annotation-title{
    font-size:.82rem !important;
  }

  .annotation-body{
    font-size:.76rem !important;
    line-height:1.32 !important;
  }

  .mode-switch{
    bottom:10px !important;
    padding:6px !important;
  }

  .mode-btn{
    min-width:84px !important;
    height:36px !important;
    font-size:.88rem;
  }
}

@media (max-width: 480px){
  .designer-case-card{
    top:20% !important;
    width:min(90vw, 360px) !important;
  }

  .designer-magazine-card{
    left:58% !important;
    top:49% !important;
    width:min(60vw, 240px) !important;
  }

  .designer-label-card{
    width:132px !important;
  }

  .designer-manifesto-card{
    width:142px !important;
  }

  .story-sticker-card{
    left:76% !important;
    top:74% !important;
    width:92px !important;
  }

  .story-sticker{
    width:92px !important;
    height:116px !important;
  }

  .story-sticker-image{
    height:62px !important;
  }
}

@media (hover: none), (pointer: coarse){
  .cursor-dot,
  .cursor-ring{
    display:none !important;
  }

  html, body, *{
    cursor:auto !important;
  }
}

@media (max-width: 768px) and (orientation: portrait){
  html,
  body{
    width:100%;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  body{
    background:linear-gradient(180deg, #f7f3ea 0%, #eee8dd 100%);
  }

  .loader{
    background:linear-gradient(180deg, #f7f3ea 0%, #eee8dd 100%);
  }

  .topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    padding:10px 12px;
    background:rgba(247,243,234,.78);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(17,17,17,.12);
  }

  .brand-name-tag{
    height:38px;
    padding:0 12px 0 13px;
    font-size:1.48rem;
    letter-spacing:-.1em;
    box-shadow:0 6px 12px rgba(0,0,0,.07);
  }

  .viewport{
    width:100%;
    height:auto;
    min-height:100vh;
    overflow:visible !important;
    padding:76px 14px 102px;
    background:
      linear-gradient(90deg, rgba(17,17,17,.05) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(180deg, rgba(17,17,17,.04) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(180deg, #f7f3ea 0%, #eee8dd 100%);
  }

  .world-backdrop,
  .designer-grid,
  .zoom-floating{
    display:none !important;
  }

  .page-shell{
    position:relative !important;
    inset:auto !important;
    overflow:visible !important;
    padding:0 !important;
    width:100%;
    min-height:100vh;
  }

  .canvas,
  .designer-canvas{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    transform:none !important;
    transform-origin:initial !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .hero-center{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    text-align:left;
    pointer-events:auto;
    order:1;
    padding:18px 16px 14px;
    background:#fffdf7;
    border:2px solid var(--line);
    box-shadow:8px 8px 0 rgba(17,17,17,.08);
  }

  .hero-center-inner{
    justify-content:flex-start;
  }

  .hero-title{
    justify-content:flex-start;
    align-items:flex-start;
    gap:.14em;
    font-size:clamp(2.1rem, 12vw, 3.55rem) !important;
    line-height:.92;
    letter-spacing:-.09em;
  }

  .hero-title span:not(.slash){
    display:block;
  }

  .hero-title .slash{
    opacity:.42;
  }

  .highlight::before{
    left:-3px;
    right:-3px;
    bottom:.05em;
    height:.48em;
    background:rgba(47,99,255,.25);
  }

  .floating-card,
  .designer-label-card,
  .designer-manifesto-card,
  .designer-case-card,
  .designer-magazine-card,
  .designer-strip-card,
  .story-sticker-card{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
    animation:none !important;
    filter:none !important;
    z-index:auto !important;
  }

  .floating-card:hover{
    filter:none !important;
  }

  .designer-case-card{ order:2; }
  .designer-magazine-card{ order:3; }
  .designer-manifesto-card{ order:4; }
  .designer-label-card{ order:5; }
  .story-sticker-card{ order:6; }
  .designer-strip-card{ order:7; }

  .case-stack{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1.16 / 1 !important;
  }

  .case-photo{
    display:none !important;
  }

  .case-main{
    position:relative !important;
    min-height:320px;
    padding:22px 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,239,.98)),
      url("./Images/Casestudy/Cuepo广告KV.png") center/cover no-repeat;
    box-shadow:
      inset 0 0 0 2px var(--line),
      8px 8px 0 rgba(17,17,17,.08),
      0 16px 24px rgba(0,0,0,.08);
  }

  .case-kicker,
  .manifesto-kicker,
  .mag-kicker,
  .strip-title,
  .label-small{
    font-size:.68rem !important;
    letter-spacing:.14em;
  }

  .case-title{
    font-size:clamp(2.45rem, 13vw, 4.3rem) !important;
    max-width:7ch;
  }

  .case-sub{
    max-width:26ch;
    font-size:.96rem !important;
    line-height:1.45;
    color:#333;
  }

  .magazine-spread{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1.32 / 1 !important;
    transform:none !important;
  }

  .designer-magazine-card::before,
  .designer-magazine-card::after{
    display:none !important;
  }

  .magazine-left-cover,
  .magazine-right-cover{
    transform:none !important;
  }

  .magazine-left-cover{
    display:none !important;
  }

  .magazine-right-cover{
    width:52%;
    left:auto;
    right:0;
    padding:18px;
    background:rgba(255,253,246,.92);
    box-shadow:inset 0 0 0 2px var(--line);
  }

  .magazine-right-page{
    position:relative !important;
    height:100%;
    min-height:260px;
    box-shadow:
      inset 0 0 0 2px var(--line),
      8px 8px 0 rgba(17,17,17,.08);
  }

  .mag-title{
    font-size:clamp(2rem, 10vw, 3.2rem) !important;
  }

  .designer-manifesto,
  .designer-label,
  .designer-strip,
  .story-sticker{
    width:100% !important;
    box-shadow:
      inset 0 0 0 2px var(--line),
      8px 8px 0 rgba(17,17,17,.08);
  }

  .designer-manifesto{
    min-height:0 !important;
    padding:18px !important;
    background:#fff;
  }

  .web-preview{
    height:154px;
    margin-bottom:14px;
  }

  .web-card .manifesto-line,
  .manifesto-line{
    font-size:clamp(1.5rem, 7vw, 2.2rem) !important;
    line-height:1;
    margin-bottom:8px;
  }

  .designer-label{
    min-height:0 !important;
    padding:18px !important;
    background:#fffdf7;
  }

  .label-big{
    font-size:1.6rem !important;
    letter-spacing:-.05em;
  }

  .label-meta{
    font-size:.92rem !important;
  }

  .story-sticker{
    height:auto !important;
    min-height:0 !important;
    transform:rotate(-2deg) !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:112px 1fr;
    align-items:center;
    gap:14px;
    text-align:left;
  }

  .story-sticker:hover,
  .story-sticker:active,
  .story-sticker.is-pressed{
    transform:rotate(-2deg) !important;
  }

  .story-sticker-image{
    width:112px !important;
    height:112px !important;
    margin:0 !important;
  }

  .story-sticker-label{
    font-size:1rem !important;
    line-height:1.05;
  }

  .designer-strip{
    min-height:0 !important;
  }

  .strip-front,
  .strip-back{
    padding:18px !important;
  }

  .designer-strip-card .strip-front p{
    font-size:.94rem !important;
    word-break:break-word;
  }

  .annotation-card,
  .annotation-bubble,
  .story-sticker-card .annotation-card{
    display:none !important;
  }

  .left-tools{
    position:fixed !important;
    left:12px !important;
    top:auto !important;
    bottom:68px !important;
    transform:none !important;
    flex-direction:row !important;
    gap:8px;
    z-index:260;
  }

  .menu-btn{
    width:44px;
    height:44px;
    background:rgba(255,255,255,.94);
  }

  .menu-pop{
    left:0 !important;
    top:auto !important;
    bottom:50px !important;
    width:min(260px, calc(100vw - 24px));
  }

  .menu-panel{
    padding:14px;
    background:rgba(255,255,255,.96);
  }

  .social-dots{
    flex-direction:row;
    gap:8px;
  }

  .social-dot{
    width:44px;
    height:44px;
    background:rgba(255,255,255,.94);
  }

  .mode-switch{
    position:fixed;
    left:50%;
    bottom:10px !important;
    transform:translateX(-50%);
    width:calc(100vw - 24px);
    justify-content:center;
    padding:6px !important;
    background:rgba(255,255,255,.9);
  }

  .mode-btn{
    flex:1;
    min-width:0 !important;
    height:38px !important;
    font-size:.86rem;
  }

}

@media (max-width: 390px) and (orientation: portrait){
  .viewport{
    padding-left:10px;
    padding-right:10px;
  }

  .case-main{
    min-height:286px;
  }

  .magazine-right-page{
    min-height:230px;
  }

  .web-preview{
    height:128px;
  }

  .story-sticker{
    grid-template-columns:92px 1fr;
  }

  .story-sticker-image{
    width:92px !important;
    height:92px !important;
  }
}

:root{
  --bg:#f1ede3;
  --bg-2:#e7dfd0;
  --ink:#12110f;
  --muted:#68635a;
  --yellow:#efe15a;
  --red:#df4d3e;
  --blue:#2c5fdf;
  --cyan:#8edee0;
  --paper:#fffaf0;
  --line:#12110f;
  --ghost-line:rgba(18,17,15,.095);
  --soft-shadow:0 18px 38px rgba(20,18,14,.12);
}

body{
  background:
    radial-gradient(circle at 24% 12%, rgba(239,225,90,.18), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(44,95,223,.10), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

@media (min-width:769px){
  .designer-canvas{
    width:var(--stage-w);
    height:var(--stage-h);
    overflow:hidden;
    background:
      linear-gradient(90deg, rgba(18,17,15,.045) 1px, transparent 1px) 0 0 / 72px 72px,
      linear-gradient(180deg, rgba(18,17,15,.035) 1px, transparent 1px) 0 0 / 72px 72px,
      radial-gradient(circle at 52% 44%, rgba(255,255,255,.96), transparent 38%),
      linear-gradient(180deg, #fbf7ec 0%, #efe7d8 100%);
    box-shadow:
      0 0 0 1px rgba(18,17,15,.16),
      14px 16px 0 rgba(18,17,15,.045),
      0 32px 80px rgba(18,17,15,.12);
  }

  .designer-grid{ z-index:1; opacity:.88; }
  .grid-line{ background:rgba(18,17,15,.42); }
  .line-v1{ left:356px; width:2px; opacity:.34; }
  .line-v2{ left:1014px; width:2px; opacity:.28; }
  .line-h1{ top:176px; height:2px; opacity:.34; }
  .line-h2{ top:668px; height:2px; opacity:.24; }
  .grid-block{
    box-shadow:none;
    mix-blend-mode:multiply;
  }
  .block-yellow{ left:44px; top:42px; width:270px; height:104px; background:rgba(239,225,90,.72); }
  .block-red{ right:54px; top:58px; width:148px; height:214px; background:rgba(223,77,62,.78); }
  .block-blue{ left:62px; bottom:92px; width:90px; height:118px; background:rgba(44,95,223,.76); }
  .block-black{ right:82px; bottom:104px; width:196px; height:46px; background:rgba(18,17,15,.92); }

  .world-backdrop{ opacity:.26; filter:saturate(.78) contrast(.9); }
  .world-object{ opacity:.28; box-shadow:none; }

  .hero-center{
    left:718px;
    top:110px;
    width:980px;
    transform:translate(-50%, -50%);
    z-index:70;
  }
  .hero-title{
    font-size:74px;
    letter-spacing:-.085em;
    line-height:.92;
  }
  .hero-title span:not(.slash){ background:transparent; padding:0; }
  .hero-title .slash{ opacity:.34; transform:translateY(-1px); }
  .highlight::before{
    left:-4px;
    right:-4px;
    bottom:.08em;
    height:.46em;
    background:rgba(44,95,223,.23);
    transform:rotate(-1deg);
    filter:none;
  }

  .floating-card{ transition:transform .25s ease, filter .25s ease; }
  .floating-card::before,
  .floating-card::after{ display:none !important; }
  .floating-card:hover{
    filter:drop-shadow(0 16px 30px rgba(18,17,15,.16));
  }

  .designer-case-card{
    left:430px !important;
    top:194px !important;
    width:560px !important;
    z-index:42 !important;
    transform:none !important;
  }
  .case-stack{ width:560px !important; height:392px !important; }
  .case-main{
    background:
      linear-gradient(180deg, rgba(255,252,244,.94), rgba(250,244,232,.98));
    box-shadow:
      inset 0 0 0 2px rgba(18,17,15,.92),
      0 24px 42px rgba(18,17,15,.16),
      12px 12px 0 rgba(18,17,15,.05);
    padding:28px;
  }
  .case-kicker::before{ content:"PROJECT 01 / "; color:#111; }
  .case-title{ font-size:54px; letter-spacing:-.07em; }
  .case-sub{ color:#5c554d; font-weight:650; max-width:352px; }
  .case-photo{
    box-shadow:0 16px 30px rgba(18,17,15,.12);
    outline:1px solid rgba(18,17,15,.42);
    outline-offset:-1px;
    filter:saturate(.96) contrast(.97);
  }
  .hover-fan-out:hover .case-photo-1{ transform:translate(48px, -16px) rotate(2.6deg); }
  .hover-fan-out:hover .case-photo-2{ transform:translate(94px, 16px) rotate(-2.4deg); }
  .hover-fan-out:hover .case-photo-3{ transform:translate(132px, 44px) rotate(3.2deg); }
  .hover-fan-out:hover .case-main{ transform:translate(-10px, -10px); }

  .designer-magazine-card{
    left:940px !important;
    top:268px !important;
    width:390px !important;
    z-index:30 !important;
    transform:rotate(1.5deg) !important;
    animation:graphicBreath 6s ease-in-out infinite;
  }
  .magazine-spread{ width:390px !important; height:272px !important; }
  .magazine-right-page,
  .magazine-left-cover{
    box-shadow:0 18px 34px rgba(18,17,15,.13);
    outline:1.5px solid rgba(18,17,15,.86);
    outline-offset:-1px;
  }
  .magazine-left-cover{
    background:
      linear-gradient(135deg, rgba(255,255,255,.70), transparent 32%),
      #f5efe2;
  }
  .designer-magazine-card::before{
    background:transparent;
    box-shadow:none;
    left:-24px;
    color:rgba(18,17,15,.56);
  }
  .designer-magazine-card::after{
    box-shadow:none;
    background:rgba(44,95,223,.88) !important;
    right:-10px;
  }

  .designer-manifesto-card{
    left:122px !important;
    top:456px !important;
    width:252px !important;
    z-index:24 !important;
  }
  .designer-manifesto{
    width:252px;
    min-height:218px;
    background:rgba(255,250,240,.72);
    backdrop-filter:blur(12px);
    box-shadow:0 18px 34px rgba(18,17,15,.09);
    outline:1px solid rgba(18,17,15,.28);
    outline-offset:-1px;
  }
  .web-preview{
    box-shadow:none;
    outline:1px solid rgba(18,17,15,.36);
    outline-offset:-1px;
  }
  .web-card .manifesto-kicker::before{ content:"PROJECT 03 / "; }

  .designer-label-card{
    left:86px !important;
    top:180px !important;
    width:236px !important;
    z-index:22 !important;
  }
  .designer-label{
    width:236px;
    background:rgba(255,252,245,.64);
    backdrop-filter:blur(10px);
    box-shadow:0 12px 24px rgba(18,17,15,.07);
    outline:1px solid rgba(18,17,15,.24);
    outline-offset:-1px;
  }
  .label-small{ color:rgba(18,17,15,.48); }
  .label-peel-corner{ opacity:.55; }

  .designer-strip-card{
    left:356px !important;
    top:716px !important;
    width:620px !important;
    z-index:26 !important;
  }
  .designer-strip{
    min-height:104px;
    background:rgba(255,252,245,.50);
    backdrop-filter:blur(10px);
    box-shadow:none;
    border-top:2px solid rgba(18,17,15,.86);
    border-bottom:1px solid rgba(18,17,15,.22);
  }
  .strip-front{ background:transparent; }
  .strip-back{ background:linear-gradient(90deg, rgba(239,225,90,.70), rgba(255,255,255,.08)); }
  .strip-title::before{ content:"CONTACT / "; }

  .story-sticker-card{
    left:1120px !important;
    top:600px !important;
    width:150px !important;
    z-index:28 !important;
  }
  .story-sticker{
    box-shadow:0 16px 28px rgba(18,17,15,.13);
    outline:1px solid rgba(18,17,15,.58);
    outline-offset:-1px;
  }
  .story-sticker-image{ box-shadow:none; outline:1px solid rgba(18,17,15,.36); outline-offset:-1px; }

  .annotation-card{
    background:rgba(255,252,245,.86);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 24px rgba(18,17,15,.12);
    outline:1px solid rgba(18,17,15,.22);
    outline-offset:-1px;
  }

}

@media (max-width:768px){
  body{ background:linear-gradient(180deg, #f7f1e5 0%, #ebe1d1 100%); }
  .designer-canvas{
    background:
      linear-gradient(90deg, rgba(18,17,15,.04) 1px, transparent 1px) 0 0 / 32px 32px,
      linear-gradient(180deg, rgba(18,17,15,.035) 1px, transparent 1px) 0 0 / 32px 32px,
      #f8f2e6;
  }

  .floating-card:hover{ filter:none; }
  .designer-label,
  .designer-manifesto,
  .case-main,
  .magazine-right-page,
  .magazine-left-cover,
  .story-sticker,
  .designer-strip{
    box-shadow:0 12px 24px rgba(18,17,15,.08);
  }
}

@keyframes figmaDotDrift{
  0%{ background-position:0 0, 0 0, 0 0; opacity:.42; }
  50%{ background-position:18px -12px, -24px 14px, 0 0; opacity:.58; }
  100%{ background-position:36px -24px, -48px 28px, 0 0; opacity:.42; }
}

@keyframes gridSignalMove{
  0%{
    transform:translate3d(-22px, -16px, 0);
    opacity:.08;
    clip-path:inset(0 72% 58% 0);
  }
  22%{
    opacity:.22;
    clip-path:inset(6% 46% 44% 8%);
  }
  48%{
    transform:translate3d(18px, 10px, 0);
    opacity:.12;
    clip-path:inset(30% 12% 24% 48%);
  }
  72%{
    opacity:.24;
    clip-path:inset(58% 54% 8% 12%);
  }
  100%{
    transform:translate3d(-22px, -16px, 0);
    opacity:.08;
    clip-path:inset(0 72% 58% 0);
  }
}

@keyframes softMeasureBlink{
  0%, 100%{ opacity:.16; }
  36%{ opacity:.28; }
  46%{ opacity:.08; }
  52%{ opacity:.22; }
}

.designer-canvas{
  isolation:isolate;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.38), transparent 36%),
    linear-gradient(180deg, #faf8f1 0%, #f2eee4 100%);
}

.designer-canvas::before,
.designer-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.designer-canvas::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.22) 1.05px, transparent 1.35px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(44,95,223,.14) .9px, transparent 1.25px) 12px 12px / 48px 48px,
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  mix-blend-mode:multiply;
  opacity:.44;
  animation:figmaDotDrift 18s ease-in-out infinite;
}

.designer-canvas::after{
  background:
    linear-gradient(90deg, transparent 0 23px, rgba(18,17,15,.14) 24px, transparent 25px) 0 0 / 96px 96px,
    linear-gradient(180deg, transparent 0 23px, rgba(18,17,15,.11) 24px, transparent 25px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(44,95,223,.18), transparent 28%, transparent 70%, rgba(223,77,62,.13));
  mix-blend-mode:multiply;
  opacity:.12;
  animation:gridSignalMove 14s cubic-bezier(.4,0,.2,1) infinite;
}

.designer-grid{
  z-index:2;
}

.grid-line{
  animation:softMeasureBlink 9s ease-in-out infinite;
}
.line-v2{ animation-delay:1.2s; }
.line-h1{ animation-delay:2.1s; }
.line-h2{ animation-delay:3.4s; }

.designer-canvas.is-inspecting::before{
  opacity:.58;
  animation-duration:12s;
}
.designer-canvas.is-inspecting::after{
  opacity:.22;
  animation-duration:9s;
}
.designer-canvas.is-inspecting .grid-line{
  opacity:.42;
}

.tappable{
  transform-origin:center center;
}
.tappable:hover{
  filter:drop-shadow(0 18px 34px rgba(18,17,15,.15));
}
.designer-label-card:hover .designer-label,
.designer-manifesto-card:hover .designer-manifesto{
  background:rgba(255,252,245,.80);
}
.designer-case-card:hover .case-main{
  box-shadow:
    inset 0 0 0 3px rgba(18,17,15,.90),
    0 30px 52px rgba(18,17,15,.18),
    0 8px 0 rgba(18,17,15,.045);
}

.world-backdrop{
  opacity:.20;
}
.world-object{
  transition:opacity .35s ease, transform .35s ease;
}
.designer-canvas.is-inspecting ~ .world-backdrop,
body.is-card-hovering .world-backdrop{
  opacity:.16;
}

.annotation-card{
  border:none !important;
  box-shadow:0 14px 26px rgba(18,17,15,.10) !important;
  outline:1px solid rgba(18,17,15,.18);
  transform:translateY(8px) translateX(0);
}
.floating-card:hover .annotation-card{
  transform:translateY(0) translateX(0);
}
.annotation-title{
  font-size:.82rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.annotation-body{
  font-size:.78rem;
  color:rgba(18,17,15,.62);
}

.menu-btn:hover span:nth-child(1){ transform:translateX(-4px); }
.menu-btn:hover span:nth-child(2){ transform:translateX(3px); }
.menu-btn:hover span:nth-child(3){ transform:translateX(-1px); }
.menu-btn span{ transition:transform .18s ease; }

.social-dot:hover{
  transform:translateX(3px) scale(1.04);
}

@media (max-width:768px){
  .designer-canvas::before{
    background:
      radial-gradient(circle, rgba(18,17,15,.18) 1px, transparent 1.35px) 0 0 / 22px 22px,
      linear-gradient(180deg, rgba(255,255,255,.18), transparent 44%);
    opacity:.34;
    animation:none;
  }
  .designer-canvas::after{
    display:none;
  }
  .designer-canvas{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.50), transparent 280px),
      #f8f2e6;
  }
  .tappable:hover,
  .floating-card:hover{
    filter:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .designer-canvas::before,
  .designer-canvas::after,
  .grid-line{
    animation:none !important;
  }
}

.viewport{
  isolation:isolate;
  background:
    radial-gradient(circle at 14% 18%, rgba(245,234,97,.20), transparent 22%),
    radial-gradient(circle at 86% 78%, rgba(47,99,255,.14), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.viewport::before,
.viewport::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.viewport::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.18) 1px, transparent 1.35px) 0 0 / 28px 28px,
    radial-gradient(circle, rgba(47,99,255,.12) .85px, transparent 1.2px) 14px 14px / 56px 56px,
    linear-gradient(90deg, rgba(18,17,15,.045) 1px, transparent 1px) 0 0 / 112px 112px,
    linear-gradient(180deg, rgba(18,17,15,.04) 1px, transparent 1px) 0 0 / 112px 112px;
  opacity:.36;
  animation:bigGridBreath 16s ease-in-out infinite;
}

.viewport::after{
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(18,17,15,.10) 18.1%, transparent 18.35%, transparent 62%, rgba(239,75,63,.10) 62.1%, transparent 62.35%),
    linear-gradient(180deg, transparent 0 31%, rgba(47,99,255,.10) 31.1%, transparent 31.35%, transparent 74%, rgba(18,17,15,.08) 74.1%, transparent 74.28%);
  opacity:.16;
  animation:bigSignalSlide 22s linear infinite;
}

@keyframes bigGridBreath{
  0%,100%{ opacity:.26; filter:saturate(.92); }
  50%{ opacity:.42; filter:saturate(1.05); }
}

@keyframes bigSignalSlide{
  0%{ transform:translate3d(-18px, 0, 0); opacity:.10; }
  38%{ opacity:.18; }
  100%{ transform:translate3d(18px, 0, 0); opacity:.10; }
}

.world-backdrop{
  z-index:1;
  opacity:.18;
}

.page-shell{
  z-index:2;
}

.designer-canvas{
  isolation:isolate;
  background:
    radial-gradient(circle at 58% 42%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(180deg, rgba(250,248,241,.92) 0%, rgba(242,238,228,.92) 100%);
}

.designer-canvas::before,
.designer-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  animation:none !important;
  transform:none !important;
}

.designer-canvas::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.16) .95px, transparent 1.25px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(18,17,15,.055) .8px, transparent 1.15px) 12px 12px / 48px 48px;
  opacity:.30;
  mix-blend-mode:multiply;
}

.designer-canvas::after{
  background:
    linear-gradient(90deg, transparent 0 23px, rgba(18,17,15,.05) 24px, transparent 25px) 0 0 / 96px 96px,
    linear-gradient(180deg, transparent 0 23px, rgba(18,17,15,.04) 24px, transparent 25px) 0 0 / 96px 96px;
  opacity:.10;
}

.designer-canvas.is-inspecting::before,
.designer-canvas.is-inspecting::after{
  opacity:inherit;
  animation:none !important;
  transform:none !important;
}

.designer-canvas.is-inspecting::before{ opacity:.30; }
.designer-canvas.is-inspecting::after{ opacity:.10; }

.sticker-img.base,
.sticker-img.hover{
  filter:saturate(.64) contrast(.90) brightness(.98);
}

.story-sticker:hover .sticker-img.base,
.story-sticker:hover .sticker-img.hover{
  filter:saturate(.72) contrast(.92) brightness(1);
}

.overview-toys{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}

.zoom-mode .overview-toys,
.toy-mode .overview-toys{
  opacity:1;
  pointer-events:auto;
}

.overview-toy{
  position:absolute;
  min-width:72px;
  height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  outline:1px solid rgba(18,17,15,.32);
  background:rgba(255,253,247,.62);
  color:rgba(18,17,15,.72);
  backdrop-filter:blur(10px);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 12px 26px rgba(18,17,15,.08);
  cursor:grab;
  user-select:none;
  transition:transform .22s ease, background .22s ease, outline-color .22s ease;
}

.overview-toy:hover{
  transform:translateY(-4px) rotate(-1deg);
  background:rgba(255,253,247,.86);
  outline-color:rgba(18,17,15,.62);
}

.overview-toy.is-dragging{
  cursor:grabbing;
  transform:scale(1.04) rotate(2deg);
  z-index:30;
}

.overview-toy.toy-pop{
  animation:toyPop .42s cubic-bezier(.2,.95,.22,1);
}

@keyframes toyPop{
  0%{ transform:scale(1); }
  42%{ transform:scale(1.18) rotate(-3deg); }
  100%{ transform:scale(1); }
}

.toy-ruler{
  left:7vw;
  top:14vh;
  width:138px;
  background:
    repeating-linear-gradient(90deg, rgba(18,17,15,.20) 0 1px, transparent 1px 12px),
    rgba(255,253,247,.58);
}

.toy-color{
  right:8vw;
  top:18vh;
  width:86px;
  background:linear-gradient(90deg, rgba(239,75,63,.75), rgba(245,234,97,.78), rgba(47,99,255,.70));
  color:#111;
}

.toy-node{
  left:12vw;
  bottom:16vh;
  border-radius:999px;
}

.toy-node::before,
.toy-node::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#111;
  opacity:.64;
}
.toy-node::before{ left:-18px; top:50%; transform:translateY(-50%); }
.toy-node::after{ right:-18px; top:50%; transform:translateY(-50%); }

.toy-pin{
  right:13vw;
  bottom:14vh;
  min-width:52px;
  width:52px;
  border-radius:50% 50% 50% 6px;
  transform:rotate(-12deg);
  background:rgba(245,234,97,.72);
}
.toy-pin:hover{ transform:translateY(-4px) rotate(-7deg); }

body.is-card-hovering .world-backdrop{
  opacity:.14;
}

.zoom-mode .viewport::before,
.toy-mode .viewport::before{
  opacity:.48;
}
.zoom-mode .viewport::after,
.toy-mode .viewport::after{
  opacity:.22;
}

@media (max-width: 768px) and (orientation: portrait){

  .overview-toys{
    display:none !important;
  }
  .viewport::before{
    animation:none;
    opacity:.22;
  }
  .viewport::after{
    display:none;
  }
  .designer-canvas::before{
    opacity:.22 !important;
    animation:none !important;
  }
  .designer-canvas::after{
    display:none !important;
  }
}

@media (prefers-reduced-motion: reduce){

}

body,
.viewport{
  background:
    linear-gradient(180deg, #f6f2e8 0%, #eee8dc 100%) !important;
}

.viewport::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.15) .95px, transparent 1.25px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(18,17,15,.045) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(180deg, rgba(18,17,15,.04) 1px, transparent 1px) 0 0 / 120px 120px !important;
  opacity:.32 !important;
  filter:none !important;
  animation:bigGridBreath 18s ease-in-out infinite;
}

.viewport::after{
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(18,17,15,.08) 22.08%, transparent 22.24%, transparent 67%, rgba(18,17,15,.06) 67.08%, transparent 67.22%),
    linear-gradient(180deg, transparent 0 34%, rgba(18,17,15,.06) 34.08%, transparent 34.22%, transparent 78%, rgba(18,17,15,.05) 78.08%, transparent 78.2%) !important;
  opacity:.13 !important;
  animation:none !important;
}

.world-backdrop{
  opacity:.12 !important;
  filter:none !important;
}

.world-object{
  background:rgba(255,252,244,.32) !important;
  box-shadow:inset 0 0 0 1px rgba(18,17,15,.18) !important;
  opacity:.42 !important;
}

.obj-a,
.obj-b,
.obj-c,
.obj-d,
.obj-e,
.obj-f{
  background:
    linear-gradient(90deg, rgba(255,252,244,.28), rgba(255,252,244,.08)) !important;
}

.topbar{
  justify-content:flex-start !important;
}

.designer-canvas{
  background:
    radial-gradient(circle at 58% 42%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, rgba(250,248,241,.94) 0%, rgba(242,238,228,.94) 100%) !important;
}
.designer-canvas::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.14) .9px, transparent 1.2px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(18,17,15,.045) .8px, transparent 1.1px) 12px 12px / 48px 48px !important;
  opacity:.26 !important;
  animation:none !important;
  transform:none !important;
}
.designer-canvas::after{
  background:
    linear-gradient(90deg, transparent 0 23px, rgba(18,17,15,.038) 24px, transparent 25px) 0 0 / 96px 96px,
    linear-gradient(180deg, transparent 0 23px, rgba(18,17,15,.032) 24px, transparent 25px) 0 0 / 96px 96px !important;
  opacity:.10 !important;
  animation:none !important;
  transform:none !important;
}
.designer-canvas.is-inspecting::before{ opacity:.26 !important; }
.designer-canvas.is-inspecting::after{ opacity:.10 !important; }

.overview-toys{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
.zoom-mode .overview-toys{
  opacity:1;
  pointer-events:auto;
}
.toy-mode .overview-toys{ opacity:0; pointer-events:none; }

.zoom-mode .viewport::before{ opacity:.42 !important; }
.zoom-mode .viewport::after{ opacity:.20 !important; }

.overview-ruler-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
  background:
    linear-gradient(90deg, transparent calc(var(--play-x, 50vw) - 1px), rgba(18,17,15,.28) var(--play-x, 50vw), transparent calc(var(--play-x, 50vw) + 1px)),
    linear-gradient(180deg, transparent calc(var(--play-y, 50vh) - 1px), rgba(18,17,15,.24) var(--play-y, 50vh), transparent calc(var(--play-y, 50vh) + 1px));
}
.ruler-mode.zoom-mode .overview-ruler-lines{
  opacity:1;
}
.ruler-mode.zoom-mode .viewport::after{
  opacity:.32 !important;
}

.overview-toy{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  outline:1px solid rgba(18,17,15,.28);
  background:rgba(255,252,244,.62);
  color:rgba(18,17,15,.74);
  backdrop-filter:blur(12px);
  box-shadow:0 14px 30px rgba(18,17,15,.08);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  user-select:none;
  cursor:grab;
  transition:transform .22s cubic-bezier(.2,.9,.2,1), background .2s ease, outline-color .2s ease, box-shadow .2s ease;
}
.overview-toy:hover{
  background:rgba(255,252,244,.86);
  outline-color:rgba(18,17,15,.50);
  box-shadow:0 18px 38px rgba(18,17,15,.12);
}
.overview-toy.is-dragging{
  cursor:grabbing;
  transform:scale(1.045) rotate(1.5deg) !important;
  z-index:40;
}
.overview-toy.toy-pop{
  animation:toyPop .44s cubic-bezier(.2,.95,.22,1);
}

.toy-name{ position:relative; z-index:2; }
.toy-hint{
  position:absolute;
  right:8px;
  bottom:5px;
  font-size:.46rem;
  letter-spacing:.08em;
  opacity:.46;
}

.toy-ruler{
  left:5.5vw;
  top:16vh;
  width:176px;
  height:34px;
  justify-content:flex-start;
  padding-left:12px;
  background:
    repeating-linear-gradient(90deg, rgba(18,17,15,.22) 0 1px, transparent 1px 10px),
    rgba(255,252,244,.54) !important;
  transform:rotate(-2deg);
}
.toy-ruler:hover{ transform:translateY(-4px) rotate(-2deg); }

.toy-color{
  right:8vw;
  top:17vh;
  width:96px;
  height:46px;
  gap:7px;
  background:rgba(255,252,244,.58) !important;
  transform:rotate(2deg);
}
.toy-color:hover{ transform:translateY(-4px) rotate(1deg); }
.chip{
  width:18px;
  height:18px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(18,17,15,.55), inset 0 0 0 3px rgba(255,255,255,.28);
}
.chip-red{ background:#ef4b3f; }
.chip-yellow{ background:#f5ea61; }
.chip-blue{ background:#2f63ff; }

.toy-node{
  left:12vw;
  bottom:15vh;
  width:120px;
  height:40px;
  border-radius:999px;
  gap:8px;
  background:rgba(255,252,244,.56) !important;
}
.node-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#111;
  opacity:.72;
}
.node-line{
  width:54px;
  height:1px;
  background:rgba(18,17,15,.55);
}
.overview-toys.node-web-on::before,
.overview-toys.node-web-on::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.30;
  background:rgba(18,17,15,.36);
  transform-origin:left center;
}
.overview-toys.node-web-on::before{
  left:18vw;
  top:24vh;
  width:36vw;
  height:1px;
  transform:rotate(16deg);
}
.overview-toys.node-web-on::after{
  right:18vw;
  bottom:22vh;
  width:32vw;
  height:1px;
  transform:rotate(-20deg);
}

.toy-pin{
  right:14vw;
  bottom:14vh;
  width:58px;
  min-width:58px;
  height:58px;
  border-radius:50% 50% 50% 8px;
  background:rgba(245,234,97,.70) !important;
  transform:rotate(-13deg);
  color:#111;
}
.toy-pin:hover{ transform:translateY(-4px) rotate(-8deg); }
.toy-pin-mark{
  position:absolute;
  width:30px;
  height:30px;
  border-radius:50% 50% 50% 5px;
  background:rgba(245,234,97,.58);
  box-shadow:inset 0 0 0 1px rgba(18,17,15,.35), 0 8px 20px rgba(18,17,15,.06);
  pointer-events:none;
  transform:translate(-50%, -50%);
  animation:pinDrop .38s cubic-bezier(.2,.95,.2,1);
}
.toy-pin-mark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#111;
  opacity:.45;
  transform:translate(-50%, -50%);
}

.toy-lens{
  left:50%;
  top:8vh;
  width:72px;
  min-width:72px;
  height:72px;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.86), rgba(255,252,244,.56) 55%, rgba(255,252,244,.25) 100%) !important;
  transform:rotate(-8deg);
}
.toy-lens::after{
  content:"";
  position:absolute;
  width:34px;
  height:8px;
  right:-25px;
  bottom:6px;
  background:rgba(18,17,15,.52);
  transform:rotate(38deg);
  border-radius:999px;
}
.lens-mode.zoom-mode .viewport::before{
  background:
    radial-gradient(circle at var(--play-x, 50vw) var(--play-y, 50vh), rgba(255,255,255,.62) 0 54px, rgba(18,17,15,.18) 55px 57px, transparent 58px),
    radial-gradient(circle, rgba(18,17,15,.15) .95px, transparent 1.25px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(18,17,15,.045) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(180deg, rgba(18,17,15,.04) 1px, transparent 1px) 0 0 / 120px 120px !important;
}

.toy-orbit{
  right:26vw;
  bottom:9vh;
  width:68px;
  min-width:68px;
  height:68px;
  border-radius:50%;
  background:rgba(255,252,244,.52) !important;
  overflow:visible;
}
.toy-orbit span{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#111;
  opacity:.70;
  transform:translateX(24px);
}
.toy-orbit::before,
.toy-orbit::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px dashed rgba(18,17,15,.36);
  border-radius:50%;
}
.toy-orbit::after{
  inset:21px;
  border-style:solid;
  opacity:.35;
}
.toy-orbit.is-spinning span,
.toy-orbit:hover span{
  animation:orbitDot 1.2s linear infinite;
}

.toy-burst{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#111;
  pointer-events:none;
  transform:translate(-50%, -50%);
  animation:toyBurst .82s cubic-bezier(.16,.82,.22,1) forwards;
}
.toy-burst-color:nth-child(3n){ background:#ef4b3f; }
.toy-burst-color:nth-child(3n+1){ background:#f5ea61; }
.toy-burst-color:nth-child(3n+2){ background:#2f63ff; }

body[data-play-palette="1"] .viewport::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.13) .95px, transparent 1.25px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(47,99,255,.055) 1px, transparent 1px) 0 0 / 104px 104px,
    linear-gradient(180deg, rgba(47,99,255,.05) 1px, transparent 1px) 0 0 / 104px 104px !important;
}
body[data-play-palette="2"] .viewport::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.13) .95px, transparent 1.25px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(239,75,63,.05) 1px, transparent 1px) 0 0 / 132px 132px,
    linear-gradient(180deg, rgba(239,75,63,.045) 1px, transparent 1px) 0 0 / 132px 132px !important;
}

@keyframes toyBurst{
  0%{ opacity:1; transform:translate(-50%, -50%) scale(1); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.35); }
}
@keyframes pinDrop{
  0%{ opacity:0; transform:translate(-50%, -50%) scale(1.5) rotate(14deg); }
  100%{ opacity:1; transform:translate(-50%, -50%) scale(1) rotate(0deg); }
}
@keyframes orbitDot{
  from{ transform:rotate(0deg) translateX(24px) rotate(0deg); }
  to{ transform:rotate(360deg) translateX(24px) rotate(-360deg); }
}

@media (max-width: 768px) and (orientation: portrait){
  .overview-toys{ display:none !important; }
  .viewport::before{
    background:
      radial-gradient(circle, rgba(18,17,15,.13) .9px, transparent 1.2px) 0 0 / 26px 26px !important;
    opacity:.20 !important;
    animation:none !important;
  }
  .viewport::after{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .overview-toy,
  .toy-burst,
  .toy-pin-mark,
  .toy-orbit span{
    animation:none !important;
    transition:none !important;
  }
}

.zoom-mode .overview-toys.playground-advanced{
  z-index:260 !important;
  pointer-events:auto !important;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy,
.zoom-mode .overview-toys.playground-advanced .play-node{
  pointer-events:auto !important;
}

.viewport::before{
  background:
    radial-gradient(circle, rgba(18,17,15,.105) .82px, transparent 1.12px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(18,17,15,.035) 1px, transparent 1px) 0 0 / 112px 112px,
    linear-gradient(180deg, rgba(18,17,15,.032) 1px, transparent 1px) 0 0 / 112px 112px !important;
  opacity:.24 !important;
}
.zoom-mode .viewport::before{
  opacity:.38 !important;
}

.overview-toy{
  border-radius:0 !important;
  outline:1px solid rgba(18,17,15,.24) !important;
  background:rgba(255,253,246,.56) !important;
  box-shadow:
    0 10px 24px rgba(18,17,15,.06),
    inset 0 0 0 1px rgba(255,255,255,.48) !important;
  backdrop-filter:blur(10px) !important;
}
.overview-toy:hover,
.overview-toy.is-active{
  background:rgba(255,253,246,.90) !important;
  outline-color:rgba(18,17,15,.62) !important;
  box-shadow:
    0 16px 36px rgba(18,17,15,.12),
    0 0 0 4px rgba(245,234,97,.22) !important;
}
.overview-toy.is-active::after{
  content:"ON";
  position:absolute;
  right:-10px;
  top:-9px;
  padding:3px 6px;
  background:#111;
  color:#fff;
  font-size:.48rem;
  letter-spacing:.08em;
}

.play-link-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  opacity:0;
  transition:opacity .25s ease;
}
.zoom-mode .overview-toys.thread-play-on .play-link-svg,
.zoom-mode .overview-toys.playground-advanced .play-link-svg{
  opacity:.72;
}
.play-link-svg line{
  stroke:rgba(18,17,15,.34);
  stroke-width:1.35;
  stroke-dasharray:5 7;
  vector-effect:non-scaling-stroke;
}
.thread-play-on .play-link-svg line{
  stroke:rgba(47,99,255,.42);
  stroke-width:1.7;
  stroke-dasharray:8 5;
}

.play-node{
  position:absolute;
  z-index:18;
  min-width:62px;
  height:30px;
  padding:0 10px;
  border:0;
  outline:1px solid rgba(18,17,15,.28);
  background:rgba(255,253,246,.62);
  color:rgba(18,17,15,.76);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(18,17,15,.07);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.09em;
  transform:translate(-50%, -50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease, transform .22s ease, background .18s ease, box-shadow .18s ease;
}
.zoom-mode .play-node{
  opacity:1;
  pointer-events:auto;
}
.play-node::before{
  content:"";
  position:absolute;
  left:7px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#111;
  opacity:.38;
  transform:translateY(-50%);
}
.play-node:hover,
.play-node.is-dragging{
  background:#fffdf6;
  box-shadow:0 18px 40px rgba(18,17,15,.14);
  transform:translate(-50%, -50%) scale(1.08);
}
.play-node.is-dragging{
  outline-color:#111;
  z-index:80;
}

.magnet-particle{
  position:absolute;
  z-index:4;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(18,17,15,.34);
  opacity:0;
  pointer-events:none;
  transform:translate(0,0) scale(1);
  transition:transform .18s ease-out, opacity .18s ease-out;
  animation:particleIdle 5.8s ease-in-out var(--delay, 0s) infinite;
}
.zoom-mode .magnet-particle{
  opacity:.30;
}
.magnet-mode.zoom-mode .magnet-particle{
  background:#111;
}
.magnet-mode.zoom-mode .toy-orbit{
  box-shadow:
    0 0 0 1px rgba(18,17,15,.55),
    0 0 0 10px rgba(47,99,255,.08),
    0 22px 46px rgba(18,17,15,.16) !important;
}

.measure-line{
  position:absolute;
  z-index:90;
  left:0;
  top:0;
  height:0;
  border-top:2px solid rgba(18,17,15,.78);
  transform-origin:left center;
  opacity:0;
  pointer-events:none;
}
.measure-line.show{
  opacity:1;
}
.measure-line::before,
.measure-line::after{
  content:"";
  position:absolute;
  top:-7px;
  width:2px;
  height:14px;
  background:rgba(18,17,15,.78);
}
.measure-line::before{ left:0; }
.measure-line::after{ right:0; }
.measure-label{
  position:absolute;
  left:50%;
  top:-30px;
  transform:translateX(-50%);
  white-space:nowrap;
  background:#111;
  color:#fff;
  padding:4px 7px;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.05em;
}

.toy-stamp-mark{
  position:absolute;
  z-index:34;
  pointer-events:none;
  animation:stampIn .22s cubic-bezier(.2,.95,.2,1) both;
}
.stamp-square{
  width:24px;
  height:18px;
  border:1.5px solid rgba(18,17,15,.62);
  background:rgba(255,253,246,.64);
}
.stamp-dot{
  width:13px;
  height:13px;
  border-radius:50%;
  background:#111;
  opacity:.62;
}
.stamp-cross{
  width:20px;
  height:20px;
}
.stamp-cross::before,
.stamp-cross::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:20px;
  background:rgba(18,17,15,.62);
}
.stamp-cross::before{ transform:translateX(-50%) rotate(45deg); }
.stamp-cross::after{ transform:translateX(-50%) rotate(-45deg); }
.stamp-chip{
  width:30px;
  height:12px;
  background:#f5ea61;
  border:1px solid rgba(18,17,15,.56);
}
.toy-stamp-mark.soft{ opacity:.58; }
.stamp-mode.zoom-mode .overview-toys{ cursor:crosshair; }
.ruler-mode.zoom-mode .overview-toys{ cursor:cell; }
.magnet-mode.zoom-mode .overview-toys{ cursor:none; }

@keyframes particleIdle{
  0%,100%{ margin-top:0; margin-left:0; }
  50%{ margin-top:-8px; margin-left:3px; }
}
@keyframes stampIn{
  from{ opacity:0; transform:translate(-50%, -50%) scale(1.7) rotate(8deg); }
  to{ opacity:1; }
}

@media (max-width: 768px) and (orientation: portrait){
  .play-node,
  .play-link-svg,
  .magnet-particle,
  .measure-line,
  .toy-stamp-mark{
    display:none !important;
  }
}

.zoom-mode .overview-toys.playground-advanced{
  z-index:260 !important;
  pointer-events:none !important;
}
.zoom-mode .overview-toys.playground-advanced .overview-toy,
.zoom-mode .overview-toys.playground-advanced .play-node{
  pointer-events:auto !important;
}

.overview-toy.is-dragging,
.play-node.is-dragging{
  transition:none !important;
}
.overview-toy.is-dragging:hover,
.play-node.is-dragging:hover{
  transform:none !important;
}
.overview-toy[data-placed="true"]:hover{
  transform:none !important;
}

.toy-burst,
.toy-pin-mark,
.toy-stamp-mark,
.magnet-particle,
.measure-line,
.play-link-svg{
  pointer-events:none !important;
}

.zoom-mode .page-shell{
  z-index:20 !important;
  pointer-events:auto !important;
}
.zoom-mode .floating-card,
.zoom-mode .mode-switch,
.zoom-mode .zoom-floating,
.zoom-mode .menu-wrap,
.zoom-mode .social-dot{
  pointer-events:auto !important;
}

.zoom-mode .overview-toy,
.zoom-mode .play-node{
  opacity:.86;
}
.zoom-mode .overview-toy:hover,
.zoom-mode .overview-toy.is-active,
.zoom-mode .play-node:hover{
  opacity:1;
}

.toy-reset{
  left:50vw;
  bottom:7.5vh;
  width:82px;
  height:34px;
  background:rgba(255,253,246,.70) !important;
  color:rgba(18,17,15,.70) !important;
  transform:rotate(1.5deg);
}
.toy-reset:hover{
  transform:translateY(-3px) rotate(1deg);
  background:#fffdf6 !important;
}
.toy-reset::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  width:8px;
  height:8px;
  border:1.5px solid currentColor;
  border-left-color:transparent;
  border-radius:50%;
  transform:translateY(-50%) rotate(-25deg);
  opacity:.68;
}

.ruler-mode.zoom-mode .viewport,
.stamp-mode.zoom-mode .viewport{
  cursor:crosshair;
}
.ruler-mode.zoom-mode .canvas,
.stamp-mode.zoom-mode .canvas,
.lens-mode.zoom-mode .canvas{
  cursor:crosshair;
}

.toy-stamp-mark{
  z-index:120 !important;
  mix-blend-mode:multiply;
}
.zoom-mode .toy-stamp-mark{
  opacity:.78;
}

.measure-line{
  z-index:180 !important;
  border-top-color:rgba(18,17,15,.86) !important;
}
.measure-line::before,
.measure-line::after{
  background:rgba(18,17,15,.86) !important;
}
.measure-label{
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.real-lens{
  position:fixed;
  left:0;
  top:0;
  width:178px;
  height:178px;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -50%) scale(.94);
  z-index:99998;
  border:2px solid rgba(18,17,15,.82);
  background:#fffdf6;
  box-shadow:
    0 18px 50px rgba(18,17,15,.18),
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 26px rgba(255,255,255,.44);
  transition:opacity .16s ease, transform .16s ease;
}
.real-lens.show{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
.real-lens::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.30), transparent 40%),
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), transparent 22%);
  pointer-events:none;
}

.lens-mode.zoom-mode .viewport::before{
  opacity:.30 !important;
}
.lens-mode.zoom-mode .viewport::after{
  opacity:.16 !important;
}

@media (max-width: 768px) and (orientation: portrait){
  .real-lens{ display:none !important; }
}

.zoom-mode .overview-toys.playground-advanced{
  z-index:260 !important;
  pointer-events:none !important;
}
.zoom-mode .overview-toys.playground-advanced .overview-toy,
.zoom-mode .overview-toys.playground-advanced.node-web-on .play-node{
  pointer-events:auto !important;
}
.zoom-mode .overview-toys.playground-advanced .play-node{
  opacity:0 !important;
  pointer-events:none !important;
}
.zoom-mode .overview-toys.playground-advanced.node-web-on .play-node{
  opacity:.92 !important;
}
.zoom-mode .overview-toys.playground-advanced .play-link-svg{
  opacity:0 !important;
}
.zoom-mode .overview-toys.playground-advanced.node-web-on .play-link-svg{
  opacity:1 !important;
}
.overview-toy,
.overview-toy:hover,
.overview-toy[data-placed="true"]:hover{
  transform:none !important;
}
.overview-toy.is-dragging,
.play-node.is-dragging{
  transition:none !important;
  transform:none !important;
}
.overview-toy.is-active{
  outline-color:rgba(18,17,15,.68) !important;
  background:rgba(255,253,246,.92) !important;
  box-shadow:0 16px 34px rgba(18,17,15,.13), 0 0 0 4px rgba(245,234,97,.18) !important;
}
.toy-stamp-mark,
.measure-line,
.real-lens,
.play-link-svg,
.magnet-particle,
.toy-burst,
.toy-pin-mark{
  pointer-events:none !important;
}
.stable-lens{
  width:168px !important;
  height:168px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,.03) 58%, rgba(17,17,17,.04) 100%) !important;
  backdrop-filter:brightness(1.18) contrast(1.22) saturate(1.12) blur(.2px) !important;
  border:1px solid rgba(17,17,17,.42) !important;
  box-shadow:0 18px 42px rgba(17,17,17,.18), inset 0 0 0 1px rgba(255,255,255,.58) !important;
  overflow:hidden !important;
}
.stable-lens .lens-cross::before,
.stable-lens .lens-cross::after{
  content:"";
  position:absolute;
  background:rgba(17,17,17,.28);
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.stable-lens .lens-cross::before{ width:74%; height:1px; }
.stable-lens .lens-cross::after{ width:1px; height:74%; }
.stable-lens .lens-label{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.12em;
  color:rgba(17,17,17,.56);
}
.ruler-mode.zoom-mode .viewport,
.stamp-mode.zoom-mode .viewport{ cursor:crosshair !important; }
.lens-mode.zoom-mode .viewport{ cursor:none !important; }

:root{
  --lens-x:-200px;
  --lens-y:-200px;
}

.zoom-mode .overview-toys.playground-advanced .toy-reset,
.toy-reset{
  left:auto !important;
  top:auto !important;
  right:24px !important;
  bottom:24px !important;
  width:112px !important;
  height:42px !important;
  z-index:312 !important;
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
  outline-color:rgba(17,17,17,.38) !important;
  box-shadow:0 16px 34px rgba(17,17,17,.18), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}
.toy-reset:hover,
.toy-reset.is-active{
  background:#fff !important;
  color:#111 !important;
}
.toy-reset .toy-name{ font-size:.72rem; letter-spacing:.12em; }
.reset-icon{
  width:17px;
  height:17px;
  border:2px solid currentColor;
  border-left-color:transparent;
  border-radius:50%;
  display:inline-block;
  margin-right:7px;
  position:relative;
  transform:translateY(3px);
}
.reset-icon::after{
  content:"";
  position:absolute;
  right:-4px;
  top:-2px;
  width:0;
  height:0;
  border-left:6px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:rotate(-26deg);
}

.zoom-mode .overview-toy{
  border-radius:3px !important;
  letter-spacing:.08em;
}
.toy-ruler{
  background:#fff6a6 !important;
  color:#16130b !important;
  border-color:#111 !important;
  overflow:hidden;
}
.toy-ruler::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:7px;
  height:12px;
  background:repeating-linear-gradient(90deg, #111 0 1px, transparent 1px 8px);
  opacity:.48;
}
.toy-ruler .toy-name{ padding-top:10px; }
.toy-ruler.is-active{
  box-shadow:0 14px 30px rgba(166,139,0,.18), 0 0 0 5px rgba(245,234,97,.28) !important;
}

.toy-pin{
  background:#fff2ee !important;
  color:#111 !important;
  border-color:#ef4b3f !important;
  min-width:102px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.stamp-icon{
  width:18px;
  height:14px;
  display:inline-block;
  border:2px solid #ef4b3f;
  border-radius:2px 2px 5px 5px;
  position:relative;
}
.stamp-icon::before{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  top:-9px;
  height:8px;
  border:2px solid #ef4b3f;
  border-bottom:0;
  border-radius:6px 6px 0 0;
}
.toy-pin.is-active{
  background:#ef4b3f !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(239,75,63,.22), 0 0 0 5px rgba(239,75,63,.16) !important;
}
.toy-pin.is-active .stamp-icon,
.toy-pin.is-active .stamp-icon::before{ border-color:#fff; }

.toy-lens{
  background:#eef5ff !important;
  color:#111 !important;
  border-color:#2f63ff !important;
  min-width:94px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.lens-icon{
  width:17px;
  height:17px;
  border:2px solid #2f63ff;
  border-radius:50%;
  display:inline-block;
  position:relative;
}
.lens-icon::after{
  content:"";
  position:absolute;
  right:-8px;
  bottom:-5px;
  width:9px;
  height:2px;
  background:#2f63ff;
  transform:rotate(45deg);
  transform-origin:left center;
}
.toy-lens.is-active{
  background:#2f63ff !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(47,99,255,.22), 0 0 0 5px rgba(47,99,255,.16) !important;
}
.toy-lens.is-active .lens-icon{ border-color:#fff; }
.toy-lens.is-active .lens-icon::after{ background:#fff; }

.toy-node{
  background:#f1fff8 !important;
  border-color:#19a56b !important;
}
.toy-color{
  background:#fff !important;
  border-color:#111 !important;
}
.toy-orbit{
  background:#f8f3ff !important;
  border-color:#8d5cff !important;
}

.lens-secret{
  position:fixed;
  inset:0;
  z-index:274;
  pointer-events:none;
  opacity:0;
  clip-path:circle(0 at var(--lens-x) var(--lens-y));
  transition:opacity .18s ease, clip-path .08s linear;
}
.lens-mode.zoom-mode .lens-secret{
  opacity:1;
  clip-path:circle(96px at var(--lens-x) var(--lens-y));
}
.secret-ghost{
  position:absolute;
  left:72%;
  top:30%;
  width:76px;
  height:92px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(17,17,17,.72);
  border-radius:42px 42px 18px 18px;
  box-shadow:0 10px 28px rgba(17,17,17,.10), inset 0 0 0 1px rgba(255,255,255,.9);
  transform:rotate(-7deg);
}
.secret-ghost::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:20px;
  background:radial-gradient(circle at 12px 0, transparent 0 11px, rgba(255,255,255,.82) 12px),
             radial-gradient(circle at 38px 0, transparent 0 11px, rgba(255,255,255,.82) 12px),
             radial-gradient(circle at 64px 0, transparent 0 11px, rgba(255,255,255,.82) 12px);
}
.ghost-eye{
  position:absolute;
  top:34px;
  width:9px;
  height:13px;
  background:#111;
  border-radius:50%;
}
.ghost-eye.left{ left:23px; }
.ghost-eye.right{ right:23px; }
.ghost-mouth{
  position:absolute;
  left:50%;
  top:57px;
  width:17px;
  height:8px;
  border:2px solid #111;
  border-top:0;
  border-radius:0 0 20px 20px;
  transform:translateX(-50%);
}
.secret-copy{
  position:absolute;
  left:calc(72% - 38px);
  top:calc(30% + 108px);
  width:210px;
  padding:8px 10px;
  background:rgba(255,253,246,.82);
  border-left:2px solid #111;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(17,17,17,.78);
  transform:rotate(-2deg);
}
.lens-secret.is-near .secret-ghost{
  animation:secretPeek .42s steps(2, end) infinite;
}
@keyframes secretPeek{
  0%,100%{ transform:rotate(-7deg) translateY(0); }
  50%{ transform:rotate(-3deg) translateY(-3px); }
}

.stable-lens{
  width:192px !important;
  height:192px !important;
  border:2px solid rgba(47,99,255,.72) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(47,99,255,.08) 100%) !important;
  backdrop-filter:brightness(1.12) contrast(1.16) saturate(1.06) !important;
  box-shadow:0 18px 42px rgba(47,99,255,.16), inset 0 0 0 1px rgba(255,255,255,.7) !important;
}
.stable-lens .lens-label::after{
  content:" / GHOST";
  color:rgba(47,99,255,.76);
}

.overview-dragging .cursor-ring{
  width:72px !important;
  height:32px !important;
  margin-left:-36px !important;
  margin-top:-16px !important;
  border-radius:3px !important;
  background:rgba(255,255,255,.82) !important;
  border-color:#111 !important;
}
.overview-dragging .cursor-ring::after{
  content:"DRAG";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.14em;
}
.ruler-mode.zoom-mode .cursor-ring{
  width:92px !important;
  height:26px !important;
  margin-left:-46px !important;
  margin-top:-13px !important;
  border-radius:3px !important;
  background:#fff6a6 !important;
  border-color:#111 !important;
}
.ruler-mode.zoom-mode .cursor-ring::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:5px;
  height:9px;
  background:repeating-linear-gradient(90deg, #111 0 1px, transparent 1px 7px);
  opacity:.55;
}
.ruler-mode.zoom-mode .cursor-ring::after{
  content:"RULER";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  text-align:center;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.14em;
}
.stamp-mode.zoom-mode .cursor-ring{
  width:60px !important;
  height:46px !important;
  margin-left:-30px !important;
  margin-top:-23px !important;
  border-radius:4px 4px 9px 9px !important;
  background:#ef4b3f !important;
  border-color:#111 !important;
  color:#fff !important;
}
.stamp-mode.zoom-mode .cursor-ring::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:-12px;
  height:12px;
  border:2px solid #111;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:#fff2ee;
}
.stamp-mode.zoom-mode .cursor-ring::after{
  content:"STAMP";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.08em;
}
.lens-mode.zoom-mode .cursor-ring{
  opacity:0 !important;
}

@media (max-width: 768px){
  .lens-secret,
  .stable-lens{ display:none !important; }
  .toy-reset{ right:14px !important; bottom:14px !important; }
}

:root{
  --tool-ink:#14120f;
  --tool-paper:#fffdf6;
  --tool-shadow:rgba(18,17,15,.14);
  --tool-ruler:#ffe66c;
  --tool-stamp:#ff6b5f;
  --tool-lens:#4f79ff;
  --tool-node:#34b27b;
  --tool-orbit:#8b67ff;
  --tool-rgb-red:#ff5b4f;
  --tool-rgb-yellow:#ffe45a;
  --tool-rgb-blue:#4973ff;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy{
  min-height:38px;
  border:1.5px solid var(--tool-ink) !important;
  outline:0 !important;
  color:var(--tool-ink) !important;
  background:var(--tool-paper) !important;
  box-shadow:
    0 12px 26px rgba(18,17,15,.10),
    0 2px 0 rgba(255,255,255,.78) inset !important;
  backdrop-filter:blur(10px) saturate(1.05);
  letter-spacing:.105em;
  transition:
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    opacity .22s ease !important;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy:hover,
.zoom-mode .overview-toys.playground-advanced .overview-toy.is-active{
  opacity:1 !important;
  box-shadow:
    0 18px 38px rgba(18,17,15,.16),
    0 0 0 5px rgba(255,255,255,.44),
    0 2px 0 rgba(255,255,255,.86) inset !important;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy .toy-name{
  position:relative;
  z-index:3;
  font-size:.68rem;
  line-height:1;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler{
  width:190px !important;
  height:36px !important;
  left:5.2vw !important;
  top:15.5vh !important;
  justify-content:flex-start !important;
  padding-left:16px !important;
  padding-top:13px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), transparent 58%),
    var(--tool-ruler) !important;
  border-radius:2px !important;
  transform:rotate(-2.2deg) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler::before{
  top:6px !important;
  left:12px !important;
  right:10px !important;
  height:12px !important;
  background:
    repeating-linear-gradient(90deg,
      var(--tool-ink) 0 1px,
      transparent 1px 7px,
      var(--tool-ink) 7px 8px,
      transparent 8px 18px
    ) !important;
  opacity:.62 !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler::after{
  content:"PX";
  position:absolute;
  right:10px;
  bottom:5px;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.12em;
  opacity:.56;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler.is-active{
  background:var(--tool-ruler) !important;
  box-shadow:
    0 18px 38px rgba(168,132,0,.22),
    0 0 0 5px rgba(255,230,108,.28) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-color{
  right:7.5vw !important;
  top:16.4vh !important;
  width:116px !important;
  height:46px !important;
  gap:0 !important;
  padding:5px !important;
  background:#14120f !important;
  border-color:#14120f !important;
  border-radius:3px !important;
  transform:rotate(2deg) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-color::after{
  content:"RGB";
  position:absolute;
  left:8px;
  bottom:5px;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.16em;
  color:#fffdf6;
  opacity:.72;
}

.zoom-mode .overview-toys.playground-advanced .toy-color .chip{
  width:34px !important;
  height:26px !important;
  border-radius:1px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-color .chip-red{ background:var(--tool-rgb-red) !important; }
.zoom-mode .overview-toys.playground-advanced .toy-color .chip-yellow{ background:var(--tool-rgb-yellow) !important; }
.zoom-mode .overview-toys.playground-advanced .toy-color .chip-blue{ background:var(--tool-rgb-blue) !important; }

.zoom-mode .overview-toys.playground-advanced .toy-node{
  left:11.2vw !important;
  bottom:14vh !important;
  width:138px !important;
  height:42px !important;
  border-radius:999px !important;
  gap:9px !important;
  background:#e8fff4 !important;
  border-color:var(--tool-node) !important;
  box-shadow:
    0 14px 30px rgba(25,165,107,.14),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-node::before{
  content:"NODE" !important;
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  height:auto !important;
  font-size:.52rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  color:rgba(20,18,15,.58) !important;
  background:transparent !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-node::after{ display:none !important; }
.zoom-mode .overview-toys.playground-advanced .toy-node .node-dot:first-child{ margin-left:40px; }
.zoom-mode .overview-toys.playground-advanced .toy-node .node-dot{
  width:10px !important;
  height:10px !important;
  background:var(--tool-node) !important;
  opacity:1 !important;
  box-shadow:0 0 0 2px rgba(52,178,123,.16);
}
.zoom-mode .overview-toys.playground-advanced .toy-node .node-line{
  width:42px !important;
  height:2px !important;
  background:rgba(52,178,123,.74) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-pin{
  right:13.5vw !important;
  bottom:13.6vh !important;
  width:118px !important;
  min-width:118px !important;
  height:52px !important;
  border-radius:3px !important;
  background:#fff0ed !important;
  border-color:var(--tool-stamp) !important;
  color:var(--tool-ink) !important;
  transform:rotate(-5deg) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  overflow:visible !important;
  box-shadow:
    0 16px 34px rgba(255,107,95,.16),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-pin:hover{
  transform:rotate(-5deg) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-pin .toy-name{
  color:var(--tool-ink) !important;
}

.zoom-mode .overview-toys.playground-advanced .stamp-icon{
  width:24px !important;
  height:24px !important;
  border:0 !important;
  border-radius:0 !important;
  position:relative;
  display:inline-block;
  background:
    radial-gradient(circle at 50% 4px, var(--tool-stamp) 0 4px, transparent 4.5px),
    linear-gradient(var(--tool-stamp), var(--tool-stamp)) 50% 8px / 7px 9px no-repeat,
    linear-gradient(var(--tool-stamp), var(--tool-stamp)) 50% 18px / 22px 8px no-repeat !important;
  transform:translateY(-1px);
}

.zoom-mode .overview-toys.playground-advanced .stamp-icon::before{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  right:2px !important;
  top:17px !important;
  height:8px !important;
  border:0 !important;
  border-radius:1px !important;
  background:transparent !important;
  box-shadow:0 2px 0 rgba(20,18,15,.26) !important;
}

.zoom-mode .overview-toys.playground-advanced .stamp-icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:2px;
  background:repeating-linear-gradient(90deg, var(--tool-stamp) 0 3px, transparent 3px 6px);
  opacity:.75;
}

.zoom-mode .overview-toys.playground-advanced .toy-pin.is-active{
  background:var(--tool-stamp) !important;
  color:#fffdf6 !important;
  border-color:var(--tool-ink) !important;
  box-shadow:
    0 18px 38px rgba(255,107,95,.26),
    0 0 0 5px rgba(255,107,95,.18) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-pin.is-active .toy-name{ color:#fffdf6 !important; }
.zoom-mode .overview-toys.playground-advanced .toy-pin.is-active .stamp-icon{
  background:
    radial-gradient(circle at 50% 4px, #fffdf6 0 4px, transparent 4.5px),
    linear-gradient(#fffdf6, #fffdf6) 50% 8px / 7px 9px no-repeat,
    linear-gradient(#fffdf6, #fffdf6) 50% 18px / 22px 8px no-repeat !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-pin.is-active .stamp-icon::after{
  background:repeating-linear-gradient(90deg, #fffdf6 0 3px, transparent 3px 6px) !important;
}

.zoom-mode .toy-stamp-mark{
  opacity:.82 !important;
  mix-blend-mode:multiply;
  box-shadow:0 8px 20px rgba(18,17,15,.08) !important;
}
.zoom-mode .toy-stamp-mark.stamp-square{
  border-radius:2px !important;
  background:rgba(255,107,95,.30) !important;
  box-shadow:inset 0 0 0 2px rgba(255,107,95,.72), 0 8px 20px rgba(18,17,15,.06) !important;
}
.zoom-mode .toy-stamp-mark.stamp-dot{
  background:rgba(47,99,255,.22) !important;
  box-shadow:inset 0 0 0 2px rgba(47,99,255,.68), 0 8px 20px rgba(18,17,15,.06) !important;
}
.zoom-mode .toy-stamp-mark.stamp-cross{
  background:rgba(255,230,108,.32) !important;
  box-shadow:inset 0 0 0 2px rgba(20,18,15,.42), 0 8px 20px rgba(18,17,15,.06) !important;
}
.zoom-mode .toy-stamp-mark.stamp-chip{
  background:rgba(52,178,123,.24) !important;
  box-shadow:inset 0 0 0 2px rgba(52,178,123,.72), 0 8px 20px rgba(18,17,15,.06) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-lens{
  left:49.5% !important;
  top:7.6vh !important;
  width:110px !important;
  min-width:110px !important;
  height:50px !important;
  border-radius:999px !important;
  background:#eef4ff !important;
  border-color:var(--tool-lens) !important;
  color:var(--tool-ink) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  transform:rotate(-4deg) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens::after{ display:none !important; }
.zoom-mode .overview-toys.playground-advanced .lens-icon{
  width:18px !important;
  height:18px !important;
  border-color:var(--tool-lens) !important;
}
.zoom-mode .overview-toys.playground-advanced .lens-icon::after{ background:var(--tool-lens) !important; }
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active{
  background:var(--tool-lens) !important;
  color:#fffdf6 !important;
  border-color:var(--tool-ink) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active .lens-icon{ border-color:#fffdf6 !important; }
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active .lens-icon::after{ background:#fffdf6 !important; }

.zoom-mode .overview-toys.playground-advanced .toy-orbit{
  right:25vw !important;
  bottom:8.6vh !important;
  width:78px !important;
  min-width:78px !important;
  height:78px !important;
  border-radius:50% !important;
  background:#f3edff !important;
  border-color:var(--tool-orbit) !important;
  box-shadow:
    0 16px 34px rgba(139,103,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.72) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-orbit::before,
.zoom-mode .overview-toys.playground-advanced .toy-orbit::after{
  border-color:rgba(139,103,255,.62) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-orbit span{
  background:var(--tool-orbit) !important;
  opacity:1 !important;
  box-shadow:0 0 0 4px rgba(139,103,255,.12);
}
.zoom-mode .overview-toys.playground-advanced .toy-orbit.is-active{
  background:var(--tool-orbit) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-orbit.is-active::before,
.zoom-mode .overview-toys.playground-advanced .toy-orbit.is-active::after{ border-color:rgba(255,255,255,.72) !important; }
.zoom-mode .overview-toys.playground-advanced .toy-orbit.is-active span{
  background:#fffdf6 !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-reset{
  background:#14120f !important;
  color:#fffdf6 !important;
  border-color:#14120f !important;
  border-radius:3px !important;
}

.ruler-mode.zoom-mode .cursor-ring{
  background:var(--tool-ruler) !important;
  border-color:var(--tool-ink) !important;
  color:var(--tool-ink) !important;
}
.stamp-mode.zoom-mode .cursor-ring{
  background:var(--tool-stamp) !important;
  border-color:var(--tool-ink) !important;
  color:#fffdf6 !important;
  border-radius:3px !important;
}
.stamp-mode.zoom-mode .cursor-ring::before{
  display:none !important;
}
.stamp-mode.zoom-mode .cursor-ring::after{
  content:"STAMP" !important;
  color:#fffdf6 !important;
}

@media (max-width: 768px) and (orientation: portrait){
  .overview-toys{ display:none !important; }
}

.real-lens{
  width:192px !important;
  height:192px !important;
  transform:translate3d(-50%, -50%, 0) !important;
  transition:opacity .07s linear !important;
  will-change:left, top, opacity !important;
  background:rgba(255,253,246,.18) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  contain:layout paint style !important;
}
.real-lens.show{
  transform:translate3d(-50%, -50%, 0) !important;
}

.real-lens .lens-cross,
.real-lens .lens-label{
  position:absolute;
  z-index:3;
}
.real-lens::after{
  z-index:2;
  mix-blend-mode:screen;
}
.lens-secret{
  position:fixed !important;
  inset:0 !important;
  z-index:100000 !important;
  pointer-events:none !important;
  opacity:0 !important;
  clip-path:circle(0 at var(--lens-x, -200px) var(--lens-y, -200px)) !important;
  transition:none !important;
  will-change:clip-path, opacity !important;
}
.lens-mode.zoom-mode .lens-secret{
  opacity:1 !important;
  clip-path:circle(96px at var(--lens-x, -200px) var(--lens-y, -200px)) !important;
}
.secret-ghost,
.secret-copy{
  transition:none !important;
}
.lens-secret.is-near .secret-ghost{
  animation:secretPeek .42s steps(2, end) infinite;
}
.magnet-particle{
  opacity:.18;
}
.magnet-mode.zoom-mode .magnet-particle{
  opacity:.42;
}
.toy-burst{
  animation-duration:.42s !important;
}
@media (prefers-reduced-motion: reduce){
  .magnet-particle,
  .toy-burst,
  .lens-secret.is-near .secret-ghost{
    animation:none !important;
  }
}

:root{
  --scan-blue:#2f63ff;
  --scan-blue-deep:#1838b8;
  --scan-blue-soft:rgba(47,99,255,.18);
  --scan-blue-line:rgba(47,99,255,.78);
  --scan-cyan:#7ce4ef;
  --scan-paper:#f2f7ff;
}

.zoom-mode .overview-toys.playground-advanced .toy-lens{
  width:158px !important;
  min-width:158px !important;
  height:64px !important;
  border-radius:6px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(232,241,255,.96)),
    var(--scan-paper) !important;
  color:#111 !important;
  border:2px solid var(--scan-blue) !important;
  transform:rotate(5.5deg) !important;
  gap:12px !important;
  box-shadow:
    0 18px 36px rgba(47,99,255,.18),
    0 0 0 1px rgba(255,255,255,.66) inset !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-lens:hover,
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(47,99,255,.92)),
    var(--scan-blue) !important;
  color:#fff !important;
  transform:rotate(5.5deg) translateY(-7px) scale(1.055) !important;
  border-color:var(--scan-blue-deep) !important;
  box-shadow:
    0 26px 48px rgba(47,99,255,.30),
    0 0 0 7px rgba(47,99,255,.14),
    0 0 28px rgba(124,228,239,.24),
    inset 0 0 0 1px rgba(255,255,255,.42) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-lens .toy-name{
  font-size:.74rem !important;
  letter-spacing:.16em !important;
  text-shadow:none !important;
}

.zoom-mode .overview-toys.playground-advanced .lens-icon{
  width:34px !important;
  height:24px !important;
  border:2px solid currentColor !important;
  border-radius:4px !important;
  position:relative;
  display:inline-block;
  background:
    linear-gradient(90deg, transparent 0 42%, currentColor 42% 47%, transparent 47% 100%),
    repeating-linear-gradient(0deg, rgba(47,99,255,.20) 0 2px, transparent 2px 6px),
    rgba(255,255,255,.26) !important;
  overflow:hidden;
}

.zoom-mode .overview-toys.playground-advanced .toy-lens:hover .lens-icon,
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active .lens-icon{
  background:
    linear-gradient(90deg, transparent 0 42%, rgba(255,255,255,.92) 42% 47%, transparent 47% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.30) 0 2px, transparent 2px 6px),
    rgba(255,255,255,.12) !important;
}

.zoom-mode .overview-toys.playground-advanced .lens-icon::before,
.zoom-mode .overview-toys.playground-advanced .lens-icon::after{
  background:currentColor !important;
  opacity:.78 !important;
}

.real-lens.ir-scanner,
.stable-lens.ir-scanner,
.real-lens,
.stable-lens{
  width:230px !important;
  height:132px !important;
  transform:translate(-50%, -50%) rotate(-3deg) scale(.96) !important;
}

.real-lens.ir-scanner.show,
.stable-lens.ir-scanner.show,
.real-lens.show,
.stable-lens.show{
  transform:translate(-50%, -50%) rotate(-3deg) scale(1) !important;
}

.real-lens.ir-scanner::before,
.stable-lens.ir-scanner::before{
  border-color:var(--scan-blue-line) !important;
  background:
    linear-gradient(90deg, rgba(47,99,255,.13), rgba(124,228,239,.035)),
    repeating-linear-gradient(0deg, rgba(47,99,255,.16) 0 1px, transparent 1px 9px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42) inset,
    0 0 26px rgba(47,99,255,.26),
    0 16px 34px rgba(24,18,15,.12) !important;
}

.real-lens.ir-scanner::after,
.stable-lens.ir-scanner::after{
  background:
    radial-gradient(circle at var(--scan-hot-x, 50%) 50%, rgba(124,228,239,.32), transparent 34%),
    linear-gradient(90deg, transparent, rgba(47,99,255,.15), transparent) !important;
  animation:blueScanPulse 1.45s ease-in-out infinite !important;
}

.scanner-frame::before,
.scanner-frame::after{
  border-color:var(--scan-blue) !important;
}

.scanner-sweep{
  width:5px !important;
  background:linear-gradient(180deg, transparent, #fff, var(--scan-cyan), var(--scan-blue), #fff, transparent) !important;
  box-shadow:
    0 0 18px rgba(124,228,239,.72),
    0 0 32px rgba(47,99,255,.36) !important;
  animation:blueScanSweep 1.08s linear infinite !important;
}

.scanner-noise{
  background:
    radial-gradient(circle, rgba(255,255,255,.45) .7px, transparent 1.2px) 0 0 / 11px 11px,
    radial-gradient(circle, rgba(124,228,239,.35) .8px, transparent 1.25px) 5px 6px / 19px 19px !important;
  opacity:.46 !important;
}

.scanner-label{
  background:#111 !important;
  color:#eef6ff !important;
  border-left:4px solid var(--scan-blue) !important;
  box-shadow:0 8px 18px rgba(47,99,255,.18) !important;
}

.secret-ghost{
  box-shadow:
    7px 7px 0 rgba(47,99,255,.22),
    0 18px 34px rgba(17,17,17,.13),
    inset 0 0 0 1px rgba(255,255,255,.9) !important;
}

.secret-copy{
  border-bottom-color:var(--scan-blue) !important;
}

.lens-mode.zoom-mode .cursor-ring{
  border-color:rgba(47,99,255,.95) !important;
  background:rgba(47,99,255,.09) !important;
  box-shadow:0 0 20px rgba(47,99,255,.32) !important;
}
.lens-mode.zoom-mode .cursor-ring::before,
.lens-mode.zoom-mode .cursor-ring::after{
  background:rgba(47,99,255,.92) !important;
}

@keyframes blueScanSweep{
  0%{ transform:translateX(0); opacity:.20; }
  8%{ opacity:1; }
  100%{ transform:translateX(202px); opacity:.24; }
}
@keyframes blueScanPulse{
  0%,100%{ opacity:.36; filter:saturate(1); }
  50%{ opacity:.80; filter:saturate(1.35); }
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler{
  width:248px !important;
  height:48px !important;
  left:4.2vw !important;
  top:17vh !important;
  padding-left:20px !important;
  padding-top:18px !important;
  border-radius:3px !important;
  transform:rotate(-12deg) !important;
  transform-origin:14% 68% !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), transparent 58%),
    repeating-linear-gradient(90deg,
      rgba(20,18,15,.72) 0 1px,
      transparent 1px 9px,
      rgba(20,18,15,.48) 9px 10px,
      transparent 10px 22px
    ),
    var(--tool-ruler, #ffe66c) !important;
  box-shadow:
    0 17px 34px rgba(115,88,0,.18),
    0 3px 0 rgba(255,255,255,.70) inset,
    inset 0 0 0 1px rgba(255,255,255,.42) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler::before{
  top:7px !important;
  left:18px !important;
  right:16px !important;
  height:17px !important;
  background:
    repeating-linear-gradient(90deg,
      #111 0 1px,
      transparent 1px 7px,
      #111 7px 9px,
      transparent 9px 22px
    ) !important;
  opacity:.66 !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler::after{
  right:14px !important;
  bottom:7px !important;
  font-size:.58rem !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler .toy-name{
  font-size:.76rem !important;
  letter-spacing:.17em !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler .toy-hint{
  right:58px !important;
  bottom:7px !important;
  opacity:.50 !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler:hover,
.zoom-mode .overview-toys.playground-advanced .toy-ruler.is-active{
  transform:rotate(-12deg) translateY(-10px) translateX(4px) scale(1.045) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), transparent 56%),
    repeating-linear-gradient(90deg,
      rgba(20,18,15,.80) 0 1px,
      transparent 1px 9px,
      rgba(20,18,15,.56) 9px 10px,
      transparent 10px 22px
    ),
    #ffe25c !important;
  box-shadow:
    0 30px 54px rgba(115,88,0,.28),
    0 0 0 7px rgba(255,226,92,.19),
    0 3px 0 rgba(255,255,255,.78) inset !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler[data-placed="true"]:hover{
  transform:rotate(-12deg) translateY(-10px) translateX(4px) scale(1.045) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler.is-dragging,
.zoom-mode .overview-toys.playground-advanced .toy-ruler.is-dragging:hover{
  transform:none !important;
}

@media (max-width: 768px){
  .ir-scanner,
  .lens-secret{ display:none !important; }
}

:root{
  --scan-blue:#2f63ff;
  --scan-blue-deep:#1638b8;
  --scan-cyan:#8df1ff;
  --scan-glow:rgba(47,99,255,.22);
}

.zoom-mode .overview-toys.playground-advanced .overview-toy{
  transition:
    transform .32s cubic-bezier(.16,.95,.22,1),
    box-shadow .24s ease,
    filter .24s ease,
    background .24s ease,
    border-color .24s ease,
    opacity .18s ease !important;
  will-change:transform;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler{
  width:276px !important;
  height:54px !important;
  left:3.7vw !important;
  top:18.2vh !important;
  transform:rotate(-18deg) !important;
  transform-origin:12% 76% !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-color{
  transform:rotate(6deg) !important;
  transform-origin:50% 80% !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-node{
  transform:rotate(-4deg) !important;
  transform-origin:20% 70% !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-pin{
  transform:rotate(-8deg) !important;
  transform-origin:28% 76% !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens{
  transform:rotate(7deg) !important;
  transform-origin:28% 74% !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-orbit{
  transform:rotate(9deg) !important;
  transform-origin:50% 70% !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-reset{
  transform:rotate(-2deg) !important;
  transform-origin:50% 70% !important;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy:hover{
  filter:saturate(1.08) contrast(1.02) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler:hover,
.zoom-mode .overview-toys.playground-advanced .toy-ruler.is-active{
  transform:rotate(-24deg) translate(-3px,-14px) scale(1.055) !important;
  box-shadow:
    0 34px 62px rgba(115,88,0,.30),
    0 0 0 8px rgba(255,226,92,.20),
    0 3px 0 rgba(255,255,255,.78) inset !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-color:hover,
.zoom-mode .overview-toys.playground-advanced .toy-color.is-active{
  transform:rotate(-4deg) translateY(-8px) scale(1.06) !important;
  box-shadow:0 24px 44px rgba(17,17,17,.20), 0 0 0 6px rgba(255,255,255,.38) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-node:hover,
.zoom-mode .overview-toys.playground-advanced .toy-node.is-active{
  transform:rotate(4deg) translateY(-8px) scale(1.055) !important;
  box-shadow:0 24px 44px rgba(52,178,123,.20), 0 0 0 6px rgba(52,178,123,.13) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-pin:hover,
.zoom-mode .overview-toys.playground-advanced .toy-pin.is-active{
  transform:rotate(-15deg) translateY(-10px) scale(1.055) !important;
  box-shadow:0 26px 48px rgba(255,107,95,.25), 0 0 0 7px rgba(255,107,95,.16) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens:hover,
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active{
  transform:rotate(12deg) translateY(-10px) scale(1.055) !important;
  box-shadow:
    0 28px 50px rgba(47,99,255,.30),
    0 0 0 7px rgba(47,99,255,.16),
    0 0 32px rgba(141,241,255,.28) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-orbit:hover,
.zoom-mode .overview-toys.playground-advanced .toy-orbit.is-active{
  transform:rotate(-8deg) translateY(-9px) scale(1.08) !important;
  box-shadow:0 24px 46px rgba(139,103,255,.22), 0 0 0 7px rgba(139,103,255,.13) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-reset:hover,
.zoom-mode .overview-toys.playground-advanced .toy-reset.is-active{
  transform:rotate(3deg) translateY(-7px) scale(1.04) !important;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy.is-dragging,
.zoom-mode .overview-toys.playground-advanced .overview-toy.is-dragging:hover,
.zoom-mode .overview-toys.playground-advanced .play-node.is-dragging,
.zoom-mode .overview-toys.playground-advanced .play-node.is-dragging:hover{
  transform:none !important;
  transition:none !important;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy[data-placed="true"]:hover{
  transform:rotate(4deg) translateY(-5px) scale(1.035) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler[data-placed="true"]:hover{
  transform:rotate(-13deg) translateY(-7px) scale(1.035) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler::before{
  top:8px !important;
  height:20px !important;
  background:
    repeating-linear-gradient(90deg,
      #111 0 1px,
      transparent 1px 7px,
      #111 7px 9px,
      transparent 9px 22px,
      #111 22px 24px,
      transparent 24px 44px
    ) !important;
  opacity:.72 !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler .toy-name{
  font-size:.82rem !important;
  letter-spacing:.18em !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler .toy-hint{
  bottom:8px !important;
  right:62px !important;
}

.real-lens.ir-scanner,
.stable-lens.ir-scanner,
.real-lens,
.stable-lens{
  width:176px !important;
  height:146px !important;
  border-radius:12px !important;
  overflow:hidden !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transform:translate(-50%, -50%) rotate(0deg) scale(.98) !important;
  opacity:0;
}
.real-lens.ir-scanner.show,
.stable-lens.ir-scanner.show,
.real-lens.show,
.stable-lens.show{
  opacity:1 !important;
  transform:translate(-50%, -50%) rotate(0deg) scale(1) !important;
}

.real-lens.ir-scanner::before,
.stable-lens.ir-scanner::before{
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid rgba(47,99,255,.86) !important;
  border-radius:10px !important;
  background:
    linear-gradient(90deg, rgba(47,99,255,.10), rgba(141,241,255,.035), rgba(47,99,255,.10)),
    repeating-linear-gradient(0deg, rgba(47,99,255,.11) 0 1px, transparent 1px 8px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.58) inset,
    0 0 18px rgba(47,99,255,.36),
    0 0 36px rgba(141,241,255,.18),
    0 18px 34px rgba(18,17,15,.10) !important;
}

.scanner-frame{
  position:absolute;
  inset:8px;
  border-radius:10px;
  pointer-events:none;
}
.scanner-frame::before,
.scanner-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  background:
    linear-gradient(var(--scan-blue),var(--scan-blue)) left top / 26px 3px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) left top / 3px 26px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right top / 26px 3px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right top / 3px 26px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) left bottom / 26px 3px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) left bottom / 3px 26px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right bottom / 26px 3px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right bottom / 3px 26px no-repeat;
  filter:drop-shadow(0 0 7px rgba(47,99,255,.42));
}
.scanner-frame::after{
  opacity:.35;
  transform:scale(.92);
}

.scanner-sweep{
  position:absolute;
  left:14px;
  right:14px;
  top:18px;
  width:auto !important;
  height:26px !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(141,241,255,.05) 22%,
      rgba(141,241,255,.34) 50%,
      rgba(47,99,255,.16) 72%,
      transparent 100%) !important;
  box-shadow:
    0 0 14px rgba(141,241,255,.26),
    0 0 24px rgba(47,99,255,.18) !important;
  animation:scannerSquareSweep 1.22s linear infinite !important;
}
.scanner-noise{
  position:absolute;
  inset:12px;
  border-radius:8px;
  background:
    radial-gradient(circle, rgba(255,255,255,.40) .7px, transparent 1.1px) 0 0 / 12px 12px,
    radial-gradient(circle, rgba(141,241,255,.26) .7px, transparent 1.2px) 5px 7px / 21px 21px !important;
  opacity:.36 !important;
  mix-blend-mode:screen;
}
.scanner-label{
  position:absolute;
  left:18px;
  bottom:14px;
  padding:5px 8px 4px;
  border-left:3px solid var(--scan-blue) !important;
  background:rgba(12,18,38,.82) !important;
  color:#eef6ff !important;
  font-size:.56rem !important;
  font-weight:900;
  letter-spacing:.13em;
  box-shadow:0 8px 18px rgba(47,99,255,.14) !important;
}

.lens-mode.zoom-mode .lens-secret{
  opacity:1 !important;
  clip-path:inset(
    calc(var(--lens-y, -200px) - 73px)
    calc(100vw - var(--lens-x, -200px) - 88px)
    calc(100vh - var(--lens-y, -200px) - 73px)
    calc(var(--lens-x, -200px) - 88px)
    round 12px
  ) !important;
}

.lens-mode.zoom-mode .cursor-ring{
  width:92px !important;
  height:64px !important;
  margin-left:-46px !important;
  margin-top:-32px !important;
  border-radius:8px !important;
  border:2px solid rgba(47,99,255,.82) !important;
  background:rgba(47,99,255,.045) !important;
  box-shadow:0 0 18px rgba(47,99,255,.30) !important;
  opacity:1 !important;
}
.lens-mode.zoom-mode .cursor-ring::before,
.lens-mode.zoom-mode .cursor-ring::after{
  content:"";
  position:absolute;
  background:rgba(47,99,255,.88) !important;
}
.lens-mode.zoom-mode .cursor-ring::before{
  left:50%; top:0; bottom:0; width:1px;
}
.lens-mode.zoom-mode .cursor-ring::after{
  top:50%; left:0; right:0; height:1px;
}

@keyframes scannerSquareSweep{
  0%{ transform:translateY(-18px); opacity:.12; }
  12%{ opacity:.50; }
  55%{ opacity:.38; }
  100%{ transform:translateY(106px); opacity:.08; }
}

.zoom-mode .overview-toys.playground-advanced .toy-color.is-active{
  transform:rotate(6deg) !important;
  box-shadow:
    0 18px 36px rgba(17,17,17,.16),
    0 0 0 5px rgba(255,255,255,.40) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-node.is-active{
  transform:rotate(-4deg) !important;
  box-shadow:
    0 18px 36px rgba(52,178,123,.17),
    0 0 0 5px rgba(52,178,123,.12) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-pin.is-active{
  transform:rotate(-8deg) !important;
  box-shadow:
    0 18px 36px rgba(255,107,95,.18),
    0 0 0 6px rgba(255,107,95,.12) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-orbit.is-active{
  transform:rotate(9deg) !important;
  box-shadow:
    0 18px 36px rgba(139,103,255,.18),
    0 0 0 6px rgba(139,103,255,.12) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-reset.is-active{
  transform:rotate(-2deg) !important;
}

.zoom-mode .overview-toys.playground-advanced .overview-toy[data-placed="true"]:hover{
  transform:none !important;
  filter:saturate(1.05) contrast(1.02) !important;
  box-shadow:0 18px 38px rgba(18,17,15,.14), 0 0 0 5px rgba(255,255,255,.32) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler[data-placed="true"]:hover{
  transform:rotate(-18deg) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens[data-placed="true"]:hover{
  transform:rotate(7deg) !important;
}

.real-lens.ir-scanner,
.stable-lens.ir-scanner,
.real-lens,
.stable-lens{
  width:232px !important;
  height:126px !important;
  border-radius:10px !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.real-lens.ir-scanner::before,
.stable-lens.ir-scanner::before{
  inset:10px !important;
  border:1.5px solid rgba(47,99,255,.78) !important;
  border-radius:8px !important;
  background:
    linear-gradient(90deg, rgba(47,99,255,.10), rgba(141,241,255,.035), rgba(47,99,255,.08)),
    repeating-linear-gradient(0deg, rgba(47,99,255,.075) 0 1px, transparent 1px 11px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.34) inset,
    0 0 24px rgba(47,99,255,.18) !important;
}

.scanner-frame{
  inset:10px !important;
  border-radius:8px !important;
}
.scanner-frame::before,
.scanner-frame::after{
  border-radius:8px !important;
  background:
    linear-gradient(var(--scan-blue),var(--scan-blue)) left top / 22px 2px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) left top / 2px 22px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right top / 22px 2px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right top / 2px 22px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) left bottom / 22px 2px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) left bottom / 2px 22px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right bottom / 22px 2px no-repeat,
    linear-gradient(var(--scan-blue),var(--scan-blue)) right bottom / 2px 22px no-repeat !important;
  filter:drop-shadow(0 0 6px rgba(47,99,255,.34)) !important;
}
.scanner-frame::after{
  opacity:.22 !important;
  transform:scale(.94) !important;
}

.scanner-sweep{
  left:16px !important;
  right:16px !important;
  top:16px !important;
  height:18px !important;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(141,241,255,.05) 20%,
      rgba(141,241,255,.25) 50%,
      rgba(47,99,255,.11) 74%,
      transparent 100%) !important;
  box-shadow:0 0 14px rgba(47,99,255,.16) !important;
  animation:scannerSquareSweepWide 1.35s linear infinite !important;
}
.scanner-noise{
  inset:14px !important;
  border-radius:6px !important;
  opacity:.22 !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.30) .6px, transparent 1px) 0 0 / 15px 15px,
    radial-gradient(circle, rgba(141,241,255,.18) .6px, transparent 1px) 6px 8px / 26px 26px !important;
}
.scanner-label{
  left:18px !important;
  bottom:12px !important;
  padding:4px 7px 3px !important;
  background:rgba(12,18,38,.68) !important;
  border-left:2px solid rgba(141,241,255,.85) !important;
  font-size:.52rem !important;
}

.lens-mode.zoom-mode .lens-secret{
  clip-path:inset(
    calc(var(--lens-y, -200px) - 63px)
    calc(100vw - var(--lens-x, -200px) - 116px)
    calc(100vh - var(--lens-y, -200px) - 63px)
    calc(var(--lens-x, -200px) - 116px)
    round 10px
  ) !important;
}

.lens-mode.zoom-mode .cursor-ring{
  width:118px !important;
  height:62px !important;
  margin-left:-59px !important;
  margin-top:-31px !important;
  border-radius:8px !important;
  border:1.5px solid rgba(47,99,255,.78) !important;
  background:rgba(47,99,255,.035) !important;
  box-shadow:0 0 16px rgba(47,99,255,.22) !important;
}

@keyframes scannerSquareSweepWide{
  0%{ transform:translateY(-14px); opacity:.10; }
  14%{ opacity:.44; }
  56%{ opacity:.32; }
  100%{ transform:translateY(88px); opacity:.06; }
}

:root{

  --ghost-image:none;
  --scan-blue:#2f63ff;
  --scan-blue-soft:rgba(47,99,255,.16);
  --scan-cyan:#8df1ff;
}

.secret-ghost{
  background:
    var(--ghost-image) center/contain no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(235,244,255,.72)) !important;
  overflow:visible;
}

.secret-ghost[style*="url("] .ghost-eye,
.secret-ghost[style*="url("] .ghost-mouth,
.secret-ghost[style*="url("]::after{
  display:none !important;
}

.secret-copy{
  display:grid !important;
  gap:4px !important;
  width:255px !important;
  line-height:1.18 !important;
}
.secret-copy-cn{
  display:block;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
}
.secret-copy-en{
  display:block;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.06em;
  opacity:.68;
}

.zoom-mode .overview-toys.playground-advanced .toy-ruler{
  width:244px !important;
  height:44px !important;
  left:4.3vw !important;
  top:13.8vh !important;
  padding-left:18px !important;
  padding-top:16px !important;
  border-radius:2px !important;
  transform:rotate(-24deg) !important;
  transform-origin:38% 52% !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 54%),
    repeating-linear-gradient(90deg, rgba(20,18,15,.42) 0 1.5px, transparent 1.5px 9px, rgba(20,18,15,.26) 9px 10px, transparent 10px 22px),
    #ffe66c !important;
  border:1.5px solid rgba(20,18,15,.92) !important;
  box-shadow:
    0 18px 32px rgba(20,18,15,.12),
    0 2px 0 rgba(255,255,255,.72) inset !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler::before{
  top:8px !important;
  left:15px !important;
  right:14px !important;
  height:14px !important;
  background:
    repeating-linear-gradient(90deg,
      rgba(20,18,15,.82) 0 1.4px,
      transparent 1.4px 8px,
      rgba(20,18,15,.50) 8px 9px,
      transparent 9px 22px
    ) !important;
  opacity:.70 !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler .toy-name{
  padding-top:10px !important;
  font-size:.72rem !important;
  letter-spacing:.12em !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler .toy-hint{
  right:12px !important;
  bottom:6px !important;
  opacity:.54 !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler::after{
  content:"PX / CM" !important;
  right:12px !important;
  top:6px !important;
  bottom:auto !important;
  font-size:.48rem !important;
  opacity:.62 !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler:hover{
  transform:translateY(-10px) rotate(-18deg) scale(1.035) !important;
  filter:saturate(1.06) contrast(1.04) !important;
  box-shadow:
    0 26px 46px rgba(20,18,15,.18),
    0 0 0 7px rgba(255,230,108,.16),
    0 2px 0 rgba(255,255,255,.78) inset !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler.is-active{
  transform:rotate(-20deg) scale(1.025) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 54%),
    repeating-linear-gradient(90deg, rgba(20,18,15,.54) 0 1.5px, transparent 1.5px 8px, rgba(20,18,15,.34) 8px 9px, transparent 9px 20px),
    #ffdc3f !important;
  box-shadow:
    0 24px 46px rgba(167,129,0,.23),
    0 0 0 8px rgba(255,230,108,.22),
    0 2px 0 rgba(255,255,255,.82) inset !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler.is-active::before{
  opacity:.85 !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-ruler[data-placed="true"]:hover,
.zoom-mode .overview-toys.playground-advanced .toy-ruler[data-placed="true"].is-active{
  transform:rotate(-20deg) !important;
}

.zoom-mode .overview-toys.playground-advanced .toy-lens{
  width:158px !important;
  min-width:158px !important;
  height:70px !important;
  left:48.2vw !important;
  top:7.8vh !important;
  border-radius:12px !important;
  transform:rotate(7deg) !important;
  transform-origin:50% 54% !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(235,244,255,.60)),
    rgba(238,245,255,.88) !important;
  border:1.5px solid rgba(47,99,255,.68) !important;
  color:#12204a !important;
  box-shadow:
    0 18px 34px rgba(47,99,255,.13),
    0 2px 0 rgba(255,255,255,.82) inset !important;
  overflow:hidden !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(47,99,255,.38);
  border-radius:8px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(47,99,255,.16) 8.5%, transparent 9.2%, transparent 50%, rgba(141,241,255,.14) 50.5%, transparent 51.2%),
    repeating-linear-gradient(0deg, rgba(47,99,255,.06) 0 1px, transparent 1px 8px);
  opacity:.80;
  pointer-events:none;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens::after{
  content:"" !important;
  position:absolute;
  left:13px;
  right:13px;
  top:11px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(141,241,255,.68), transparent);
  opacity:.32;
  animation:toyScannerLine 1.4s linear infinite;
  pointer-events:none;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens .lens-icon{
  width:28px !important;
  height:28px !important;
  border:2px solid rgba(47,99,255,.80) !important;
  border-radius:6px !important;
  background:rgba(47,99,255,.08) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.74);
}
.zoom-mode .overview-toys.playground-advanced .toy-lens .lens-icon::after{
  content:"" !important;
  position:absolute;
  left:5px;
  right:5px;
  top:50%;
  height:2px;
  width:auto !important;
  background:rgba(47,99,255,.82) !important;
  transform:none !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens .toy-name{
  max-width:58px;
  line-height:.88;
  font-size:.62rem !important;
  letter-spacing:.10em !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens:hover{
  transform:translateY(-9px) rotate(1deg) scale(1.035) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(232,242,255,.76)),
    rgba(238,245,255,.96) !important;
  box-shadow:
    0 26px 48px rgba(47,99,255,.20),
    0 0 0 7px rgba(47,99,255,.10),
    0 2px 0 rgba(255,255,255,.88) inset !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active{
  transform:rotate(3deg) scale(1.025) !important;
  color:#fff !important;
  background:
    linear-gradient(180deg, rgba(141,241,255,.22), transparent 58%),
    #2f63ff !important;
  border-color:#183cff !important;
  box-shadow:
    0 26px 54px rgba(47,99,255,.28),
    0 0 0 8px rgba(47,99,255,.15),
    inset 0 0 0 1px rgba(255,255,255,.24) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active::before{
  border-color:rgba(255,255,255,.38) !important;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.18) 8.5%, transparent 9.2%, transparent 50%, rgba(141,241,255,.22) 50.5%, transparent 51.2%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 8px) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active .lens-icon{
  border-color:#fff !important;
  background:rgba(255,255,255,.12) !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens.is-active .lens-icon::after{
  background:#fff !important;
}
.zoom-mode .overview-toys.playground-advanced .toy-lens[data-placed="true"]:hover,
.zoom-mode .overview-toys.playground-advanced .toy-lens[data-placed="true"].is-active{
  transform:rotate(3deg) !important;
}

@keyframes toyScannerLine{
  0%{ transform:translateY(0); opacity:.16; }
  34%{ opacity:.46; }
  100%{ transform:translateY(38px); opacity:.10; }
}

.real-lens.ir-scanner,
.stable-lens.ir-scanner,
.real-lens,
.stable-lens{
  width:248px !important;
  height:124px !important;
  border-radius:12px !important;
}
.scanner-frame{
  inset:11px !important;
  border-radius:9px !important;
}
.scanner-label{
  font-size:.50rem !important;
  letter-spacing:.16em !important;
  opacity:.86 !important;
}
.lens-mode.zoom-mode .lens-secret{
  clip-path:inset(
    calc(var(--lens-y, -200px) - 62px)
    calc(100vw - var(--lens-x, -200px) - 124px)
    calc(100vh - var(--lens-y, -200px) - 62px)
    calc(var(--lens-x, -200px) - 124px)
    round 12px
  ) !important;
}
.lens-mode.zoom-mode .cursor-ring{
  width:126px !important;
  height:62px !important;
  margin-left:-63px !important;
  margin-top:-31px !important;
  border-radius:9px !important;
}

@media (min-width:769px){
  .designer-label,
  .designer-manifesto,
  .case-main,
  .magazine-right-page,
  .magazine-left-cover,
  .story-sticker,
  .designer-strip{
    background-color:rgba(255,254,248,.88) !important;
    box-shadow:
      0 18px 36px rgba(18,17,15,.12),
      0 0 0 1px rgba(255,255,255,.70) inset !important;
  }

  .case-main{
    background:
      linear-gradient(180deg, rgba(255,255,250,.985), rgba(255,249,237,.97)) !important;
    box-shadow:
      inset 0 0 0 2px rgba(18,17,15,.90),
      0 28px 50px rgba(18,17,15,.18),
      12px 12px 0 rgba(18,17,15,.055) !important;
  }

  .designer-label,
  .designer-manifesto{
    background:rgba(255,254,248,.86) !important;
    outline-color:rgba(18,17,15,.36) !important;
  }

  .designer-label-card:hover .designer-label,
  .designer-manifesto-card:hover .designer-manifesto{
    background:rgba(255,255,252,.96) !important;
  }

  .magazine-right-page,
  .magazine-left-cover{
    background-color:#fffdf7 !important;
    box-shadow:
      0 20px 38px rgba(18,17,15,.16),
      0 0 0 1px rgba(255,255,255,.72) inset !important;
  }

  .magazine-right-cover{
    background:linear-gradient(135deg, #fffdf6, #fff7e6) !important;
  }

  .designer-strip{
    background:rgba(255,254,248,.76) !important;
    box-shadow:0 14px 30px rgba(18,17,15,.09) !important;
    border-top-color:rgba(18,17,15,.82) !important;
    border-bottom-color:rgba(18,17,15,.30) !important;
  }

  .strip-front{
    background:rgba(255,254,248,.82) !important;
  }

  .story-sticker{
    background:#fffef8 !important;
    box-shadow:
      0 20px 34px rgba(18,17,15,.16),
      0 0 0 1px rgba(255,255,255,.75) inset !important;
  }

  .annotation-card{
    background:rgba(255,254,248,.94) !important;
    box-shadow:0 14px 28px rgba(18,17,15,.14) !important;
  }
}

@media (max-width:768px) and (orientation:portrait){
  .hero-center,
  .case-main,
  .magazine-right-page,
  .designer-manifesto,
  .designer-label,
  .story-sticker,
  .designer-strip{
    background-color:#fffdf7 !important;
    box-shadow:
      inset 0 0 0 2px var(--line),
      8px 8px 0 rgba(17,17,17,.08),
      0 14px 26px rgba(18,17,15,.08) !important;
  }
}

@media (min-width:769px){
  :root{
    --card-lift-bg:rgba(255,255,250,.94);
    --card-lift-bg-soft:rgba(255,254,248,.86);
    --card-lift-line:rgba(18,17,15,.42);
    --card-lift-shadow:0 22px 42px rgba(18,17,15,.145);
  }

  .case-main{
    background:
      linear-gradient(180deg, rgba(255,255,252,.96), rgba(255,251,241,.98)) !important;
    box-shadow:
      inset 0 0 0 2px rgba(18,17,15,.92),
      0 28px 48px rgba(18,17,15,.18),
      14px 14px 0 rgba(18,17,15,.055) !important;
  }

  .case-photo{
    filter:saturate(1.02) contrast(1.02) brightness(1.02) !important;
    box-shadow:0 18px 34px rgba(18,17,15,.145) !important;
  }

  .designer-manifesto,
  .designer-label{
    background:var(--card-lift-bg-soft) !important;
    outline-color:var(--card-lift-line) !important;
    box-shadow:
      0 18px 34px rgba(18,17,15,.105),
      0 1px 0 rgba(255,255,255,.85) inset !important;
  }

  .designer-strip{
    background:rgba(255,254,248,.68) !important;
    border-top-color:rgba(18,17,15,.95) !important;
    border-bottom-color:rgba(18,17,15,.30) !important;
    box-shadow:0 14px 28px rgba(18,17,15,.06) !important;
  }

  .strip-front{
    background:rgba(255,254,250,.52) !important;
  }

  .magazine-right-page,
  .magazine-left-cover{
    background:var(--card-lift-bg) !important;
    box-shadow:
      0 22px 42px rgba(18,17,15,.15),
      0 1px 0 rgba(255,255,255,.85) inset !important;
    outline-color:rgba(18,17,15,.92) !important;
  }

  .magazine-right-cover{
    background:linear-gradient(135deg, #fffdf6, #fff6e6) !important;
  }

  .story-sticker{
    background:#fffef9 !important;
    outline-color:rgba(18,17,15,.70) !important;
    box-shadow:
      0 20px 34px rgba(18,17,15,.16),
      0 1px 0 rgba(255,255,255,.88) inset !important;
  }

  .story-sticker-image{
    background:#fff !important;
    outline-color:rgba(18,17,15,.48) !important;
  }

  .web-preview,
  .magazine-left-inner,
  .magazine-right-inner,
  .story-sticker-image{
    filter:brightness(1.04) contrast(1.02) saturate(.96);
  }

  .floating-card:hover .designer-label,
  .floating-card:hover .designer-manifesto,
  .designer-case-card:hover .case-main,
  .designer-magazine-card:hover .magazine-right-page,
  .story-sticker-card:hover .story-sticker{
    filter:brightness(1.015);
  }
}

@media (max-width:768px) and (orientation: portrait){
  .hero-center,
  .case-main,
  .magazine-right-page,
  .designer-manifesto,
  .designer-label,
  .designer-strip,
  .story-sticker{
    background-color:#fffef9 !important;
    box-shadow:
      inset 0 0 0 2px var(--line),
      9px 9px 0 rgba(17,17,17,.10),
      0 16px 28px rgba(17,17,17,.085) !important;
  }

  .case-main{
    background:
      linear-gradient(180deg, rgba(255,255,252,.96), rgba(255,250,239,.98)),
      url("./Images/Casestudy/Cuepo广告KV.png") center/cover no-repeat !important;
  }
}

@media (min-width:769px){
  .case-main{
    background:linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,250,239,.985)) !important;
    box-shadow:
      inset 0 0 0 2px rgba(18,17,15,.96),
      0 28px 50px rgba(18,17,15,.19),
      14px 14px 0 rgba(18,17,15,.065) !important;
  }

  .magazine-right-page,
  .magazine-left-cover{
    background-color:#fffdf7 !important;
    box-shadow:0 22px 42px rgba(18,17,15,.17) !important;
    outline-color:rgba(18,17,15,.92) !important;
  }

  .magazine-right-cover{
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,249,235,.96)) !important;
  }

  .designer-manifesto,
  .designer-label,
  .story-sticker{
    background:rgba(255,255,252,.88) !important;
    box-shadow:0 18px 34px rgba(18,17,15,.13) !important;
    outline-color:rgba(18,17,15,.46) !important;
  }

  .designer-strip{
    background:rgba(255,255,252,.72) !important;
    border-top-color:rgba(18,17,15,.96) !important;
    border-bottom-color:rgba(18,17,15,.34) !important;
    box-shadow:0 16px 32px rgba(18,17,15,.08) !important;
  }

  .web-preview,
  .story-sticker-image{
    outline-color:rgba(18,17,15,.52) !important;
  }
}

.social-xhs span{
  font-size:.58rem !important;
  letter-spacing:-.08em !important;
  font-weight:900 !important;
  white-space:nowrap;
}

.social-linkedin span{
  font-size:.92rem !important;
}

.social-behance span{
  font-size:.88rem !important;
}

@media (max-width:768px) and (orientation: portrait){
  .case-main,
  .magazine-right-page,
  .designer-manifesto,
  .designer-label,
  .story-sticker,
  .designer-strip{
    background-color:#fffefa !important;
    box-shadow:
      inset 0 0 0 2px rgba(18,17,15,.92),
      10px 10px 0 rgba(18,17,15,.095),
      0 18px 26px rgba(18,17,15,.09) !important;
  }
}

@media (min-width: 900px) and (max-height: 760px){
  .topbar{ padding-top:10px; padding-bottom:10px; }
  .brand-name-tag{ height:38px; font-size:1.55rem; padding:0 13px 0 14px; }
  .left-tools{ left:12px; gap:9px; }
  .menu-btn,
  .zoom-btn{ width:46px; height:46px; }
  .social-dot{ width:38px; height:38px; }
  .zoom-floating{ left:12px; top:calc(100vh - 58px); }
  .mode-switch{ bottom:10px; transform:translateX(-50%) scale(.92); transform-origin:center bottom; }
}

@media (orientation: landscape) and (max-height: 540px){
  .topbar{ padding:8px 12px; }
  .brand-name-tag{ height:34px; font-size:1.35rem; padding:0 11px 0 12px; }
  .left-tools{ left:10px; gap:7px; transform:translateY(-50%) scale(.86); transform-origin:left center; }
  .menu-btn,
  .zoom-btn{ width:42px; height:42px; }
  .social-dot{ width:36px; height:36px; }
  .social-dot span{ font-size:.74rem; }
  .zoom-floating{ left:10px; top:calc(100vh - 50px); }
  .mode-switch{ bottom:8px; padding:5px; gap:5px; transform:translateX(-50%) scale(.84); transform-origin:center bottom; }
  .mode-btn{ min-width:82px; height:34px; padding:0 12px; font-size:.8rem; }
  .overview-toys,
  .play-link-svg,
  .magnet-particle,
  .measure-line,
  .toy-stamp-mark,
  .lens-secret,
  .real-lens{
    display:none !important;
  }
}

@media (hover: none), (pointer: coarse){
  .overview-toys,
  .play-link-svg,
  .magnet-particle,
  .measure-line,
  .toy-stamp-mark,
  .lens-secret,
  .real-lens{
    display:none !important;
  }

  .floating-card:hover,
  .designer-magazine-card:hover,
  .story-sticker:hover,
  .hover-peel:hover,
  .hover-fan-out:hover .case-main,
  .hover-drawer:hover .strip-front{
    filter:none !important;
    transform:none !important;
  }
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: portrait){
  html,
  body{
    width:100%;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:linear-gradient(180deg, #f8f3e9 0%, #ece4d8 100%) !important;
  }

  body.mobile-portrait{
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  .loader{ background:linear-gradient(180deg, #f8f3e9 0%, #ece4d8 100%) !important; }

  .topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:360;
    padding:14px 18px;
    background:rgba(248,243,233,.78);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(18,17,15,.12);
  }

  .brand-name-tag{
    height:42px;
    font-size:1.7rem;
    padding:0 14px 0 15px;
  }

  .viewport{
    width:100%;
    height:auto;
    min-height:100vh;
    overflow:visible !important;
    padding:88px clamp(22px, 4vw, 42px) 112px;
    background:
      radial-gradient(circle, rgba(18,17,15,.11) .9px, transparent 1.2px) 0 0 / 30px 30px,
      linear-gradient(180deg, #f8f3e9 0%, #ece4d8 100%) !important;
  }

  .world-backdrop,
  .designer-grid,
  .zoom-floating,
  .overview-toys{
    display:none !important;
  }

  .page-shell{
    position:relative !important;
    inset:auto !important;
    overflow:visible !important;
    padding:0 !important;
    width:100%;
    min-height:100vh;
  }

  .canvas,
  .designer-canvas{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(100%, 760px) !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 auto;
    transform:none !important;
    transform-origin:initial !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .designer-canvas::before,
  .designer-canvas::after{ display:none !important; }

  .hero-center,
  .floating-card,
  .designer-label-card,
  .designer-manifesto-card,
  .designer-case-card,
  .designer-magazine-card,
  .designer-strip-card,
  .story-sticker-card{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
    animation:none !important;
    filter:none !important;
    z-index:auto !important;
  }

  .hero-center{
    order:1;
    padding:26px 26px 22px;
    text-align:left;
    pointer-events:auto;
    background:#fffdf8;
    border:2px solid var(--line);
    box-shadow:12px 12px 0 rgba(18,17,15,.08), 0 18px 38px rgba(18,17,15,.08);
  }

  .hero-center-inner{ justify-content:flex-start; }
  .hero-title{
    justify-content:flex-start;
    align-items:flex-start;
    gap:.13em;
    font-size:clamp(3.4rem, 8.4vw, 5.8rem) !important;
    line-height:.9;
    letter-spacing:-.09em;
  }

  .designer-case-card{ order:2; }
  .designer-magazine-card{ order:3; }
  .designer-manifesto-card{ order:4; }
  .designer-label-card{ order:5; }
  .story-sticker-card{ order:6; }
  .designer-strip-card{ order:7; }

  .case-stack{
    width:100% !important;
    height:auto !important;
    min-height:410px;
    aspect-ratio:1.28 / 1;
  }
  .case-photo{ display:none !important; }
  .case-main{
    position:relative !important;
    min-height:410px;
    padding:30px 28px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,241,.98)),
      url("./Images/Casestudy/Cuepo广告KV.png") center/cover no-repeat;
    box-shadow:
      inset 0 0 0 2px var(--line),
      12px 12px 0 rgba(18,17,15,.08),
      0 18px 34px rgba(18,17,15,.10);
  }
  .case-title{ font-size:clamp(3.6rem, 10vw, 5.8rem) !important; max-width:8ch; }
  .case-sub{ max-width:32ch; font-size:1.04rem; line-height:1.45; }

  .magazine-spread{
    width:100% !important;
    height:auto !important;
    min-height:330px;
    aspect-ratio:1.42 / 1;
  }
  .magazine-left-cover{ display:none !important; }
  .magazine-right-cover{
    transform:none !important;
    width:54%;
    left:auto;
    right:0;
    padding:24px;
    background:rgba(255,253,247,.93);
    box-shadow:inset 0 0 0 2px var(--line);
  }
  .magazine-right-page{
    position:relative !important;
    min-height:330px;
    box-shadow:inset 0 0 0 2px var(--line), 12px 12px 0 rgba(18,17,15,.08);
  }
  .mag-title{ font-size:clamp(2.9rem, 8vw, 4.6rem) !important; }
  .designer-magazine-card::before,
  .designer-magazine-card::after{ display:none !important; }

  .designer-manifesto,
  .designer-label,
  .designer-strip,
  .story-sticker{
    width:100% !important;
    box-shadow:inset 0 0 0 2px var(--line), 12px 12px 0 rgba(18,17,15,.08), 0 14px 28px rgba(18,17,15,.07);
    background:#fffdf8 !important;
  }

  .designer-manifesto{ min-height:0 !important; padding:24px !important; }
  .web-preview{ height:240px; margin-bottom:18px; }
  .web-card .manifesto-line,
  .manifesto-line{ font-size:clamp(2.2rem, 6vw, 3.6rem) !important; line-height:.96; }

  .designer-label{ min-height:0 !important; padding:24px !important; }
  .label-big{ font-size:2.15rem !important; }
  .label-meta{ font-size:1rem !important; max-width:36ch; }

  .story-sticker{
    height:auto !important;
    min-height:0 !important;
    transform:rotate(-1.5deg) !important;
    padding:16px !important;
    display:grid !important;
    grid-template-columns:160px 1fr;
    align-items:center;
    gap:22px;
    text-align:left;
  }
  .story-sticker-image{ width:160px !important; height:160px !important; margin:0 !important; }
  .story-sticker-label{ font-size:1.22rem !important; }

  .designer-strip{ min-height:0 !important; }
  .strip-front,
  .strip-back{ padding:24px !important; }
  .designer-strip-card .strip-front p{ font-size:1rem !important; word-break:break-word; }

  .annotation-card{ display:none !important; }

  .left-tools{
    position:fixed !important;
    left:18px !important;
    top:auto !important;
    bottom:72px !important;
    transform:none !important;
    flex-direction:row !important;
    z-index:360;
  }
  .menu-pop{
    left:0 !important;
    top:auto !important;
    bottom:58px !important;
    width:min(310px, calc(100vw - 36px));
  }
  .social-dots{ flex-direction:row; }

  .mode-switch{
    position:fixed;
    bottom:14px !important;
    left:50%;
    transform:translateX(-50%);
    width:min(520px, calc(100vw - 36px));
    justify-content:center;
  }
  .mode-btn{ flex:1; min-width:0 !important; }
}

@media (min-width: 1181px) and (hover:hover) and (pointer:fine){
  .zoom-mode .overview-toys.playground-advanced .overview-toy{
    max-width:24vw;
  }
  .zoom-mode .overview-toys.playground-advanced .toy-reset{
    right:22px !important;
    bottom:22px !important;
  }
}

@media (max-width: 1180px) and (orientation: portrait){
  .play-dice{
    display:block !important;
    position:fixed !important;
    left:auto;
    top:auto;
    width:78px;
    height:78px;
    z-index:310;
    pointer-events:auto;
    touch-action:none;
    transform-style:preserve-3d;
    filter:drop-shadow(0 14px 24px rgba(18,17,15,.20));
  }

  .play-dice::after{
    content:"drag";
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    padding:3px 7px;
    border:1px solid rgba(18,17,15,.38);
    background:rgba(255,253,246,.82);
    backdrop-filter:blur(8px);
    font-size:.5rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(18,17,15,.58);
    opacity:.72;
    pointer-events:none;
  }

  .play-dice.dragging::after{
    content:"throw";
    opacity:1;
  }
}

@media (max-width: 480px) and (orientation: portrait){
  .play-dice{
    width:70px;
    height:70px;
    transform-style:preserve-3d;
  }

  .face-front{ transform:translateZ(35px); }
  .face-back{ transform:rotateY(180deg) translateZ(35px); }
  .face-right{ transform:rotateY(90deg) translateZ(35px); }
  .face-left{ transform:rotateY(-90deg) translateZ(35px); }
  .face-top{ transform:rotateX(90deg) translateZ(35px); }
  .face-bottom{ transform:rotateX(-90deg) translateZ(35px); }

  .pip{
    width:12px;
    height:12px;
  }

  .pip-tl{ left:12px; top:12px; }
  .pip-tr{ right:12px; top:12px; }
  .pip-bl{ left:12px; bottom:12px; }
  .pip-br{ right:12px; bottom:12px; }
  .pip-ml{ left:12px; }
  .pip-mr{ right:12px; }
}

@media (max-width: 1180px) and (orientation: portrait){
  .play-dice{
    display:block !important;
    width:78px !important;
    height:78px !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    perspective:560px;
    -webkit-perspective:560px;
    perspective-origin:center center;
    -webkit-perspective-origin:center center;
    transform-origin:center center !important;
    will-change:left, top, transform;
    isolation:isolate;
  }

  .play-dice .dice-face{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    box-shadow:
      inset 0 0 0 3px #111,
      inset 0 10px 18px rgba(255,255,255,.18),
      inset 0 -12px 16px rgba(17,17,17,.055) !important;
  }

  .play-dice .face-front{ transform:translateZ(39px) !important; }
  .play-dice .face-back{ transform:rotateY(180deg) translateZ(39px) !important; }
  .play-dice .face-right{ transform:rotateY(90deg) translateZ(39px) !important; }
  .play-dice .face-left{ transform:rotateY(-90deg) translateZ(39px) !important; }
  .play-dice .face-top{ transform:rotateX(90deg) translateZ(39px) !important; }
  .play-dice .face-bottom{ transform:rotateX(-90deg) translateZ(39px) !important; }
}

@media (max-width: 480px) and (orientation: portrait){
  .play-dice{
    width:70px !important;
    height:70px !important;
    perspective:520px;
    -webkit-perspective:520px;
  }

  .play-dice .face-front{ transform:translateZ(35px) !important; }
  .play-dice .face-back{ transform:rotateY(180deg) translateZ(35px) !important; }
  .play-dice .face-right{ transform:rotateY(90deg) translateZ(35px) !important; }
  .play-dice .face-left{ transform:rotateY(-90deg) translateZ(35px) !important; }
  .play-dice .face-top{ transform:rotateX(90deg) translateZ(35px) !important; }
  .play-dice .face-bottom{ transform:rotateX(-90deg) translateZ(35px) !important; }
}

@media (max-width: 1180px) and (orientation: portrait){
  .play-dice{
    overflow:visible !important;
    filter:none !important;
    transform-style:flat !important;
    -webkit-transform-style:flat !important;
    perspective:none !important;
    -webkit-perspective:none !important;
  }

  .play-dice::before{
    content:"";
    position:absolute;
    left:12px;
    right:-24px;
    top:18px;
    bottom:-24px;
    z-index:0;
    background:rgba(18,17,15,.14);
    filter:blur(10px);
    transform:skewX(-18deg) rotate(3deg);
    border-radius:18px;
    pointer-events:none;
  }

  .play-dice .dice-face{
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
    transform-style:flat !important;
    -webkit-transform-style:flat !important;
    box-shadow:none !important;
  }

  
  .play-dice .face-front{
    display:block !important;
    inset:0 !important;
    z-index:5 !important;
    transform:none !important;
    background:#fffdf6 !important;
    box-shadow:
      inset 0 0 0 3px #111,
      inset 0 10px 18px rgba(255,255,255,.35),
      inset 0 -10px 16px rgba(18,17,15,.055),
      0 12px 20px rgba(18,17,15,.16) !important;
  }

  
  .play-dice .face-right{
    display:block !important;
    left:100% !important;
    top:0 !important;
    width:22px !important;
    height:100% !important;
    z-index:3 !important;
    transform:skewY(42deg) !important;
    transform-origin:left top !important;
    background:#e5dece !important;
    box-shadow:inset 0 0 0 3px #111 !important;
  }

  
  .play-dice .face-top{
    display:block !important;
    left:0 !important;
    top:-22px !important;
    width:100% !important;
    height:22px !important;
    z-index:4 !important;
    transform:skewX(42deg) !important;
    transform-origin:left bottom !important;
    background:#fff7e7 !important;
    box-shadow:inset 0 0 0 3px #111 !important;
  }

  .play-dice .face-back,
  .play-dice .face-left,
  .play-dice .face-bottom{
    display:none !important;
  }

  .play-dice .face-right .pip,
  .play-dice .face-top .pip{
    transform:scale(.72) !important;
    opacity:.78;
  }

  .play-dice .face-right .pip-tl,
  .play-dice .face-top .pip-tl{ left:10px; top:8px; }
  .play-dice .face-right .pip-c,
  .play-dice .face-top .pip-c{ left:50%; top:50%; transform:translate(-50%,-50%) scale(.72) !important; }
  .play-dice .face-right .pip-br,
  .play-dice .face-top .pip-br{ right:10px; bottom:8px; }
}

@media (max-width: 480px) and (orientation: portrait){
  .play-dice .face-right{
    width:19px !important;
  }
  .play-dice .face-top{
    top:-19px !important;
    height:19px !important;
  }
  .play-dice::before{
    right:-20px;
    bottom:-20px;
  }
}

@media (max-width: 1180px) and (orientation: portrait){
  .play-dice{
    --mobile-dice-depth:18px;
    display:block !important;
    position:fixed !important;
    width:68px !important;
    height:68px !important;
    overflow:visible !important;
    z-index:340 !important;
    pointer-events:auto !important;
    touch-action:none !important;
    user-select:none !important;
    transform-style:flat !important;
    -webkit-transform-style:flat !important;
    perspective:none !important;
    -webkit-perspective:none !important;
    filter:drop-shadow(0 14px 18px rgba(18,17,15,.20)) !important;
    isolation:isolate !important;
  }

  
  .play-dice::before{
    content:"" !important;
    position:absolute !important;
    left:10px !important;
    right:-20px !important;
    top:16px !important;
    bottom:-22px !important;
    z-index:0 !important;
    border-radius:18px !important;
    background:rgba(18,17,15,.15) !important;
    filter:blur(10px) !important;
    transform:skewX(-18deg) rotate(2deg) !important;
    pointer-events:none !important;
  }

  
  .play-dice::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:calc(-1 * var(--mobile-dice-depth)) !important;
    width:100% !important;
    height:var(--mobile-dice-depth) !important;
    z-index:3 !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg, #fff9ea 0%, #efe4ce 100%) !important;
    border:3px solid #111 !important;
    border-bottom:0 !important;
    transform:skewX(42deg) !important;
    transform-origin:left bottom !important;
    border-radius:8px 8px 0 0 !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }

  .play-dice .dice-face{
    position:absolute !important;
    box-sizing:border-box !important;
    transform-style:flat !important;
    -webkit-transform-style:flat !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }

  
  .play-dice .face-front{
    display:block !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:5 !important;
    transform:none !important;
    background:linear-gradient(180deg, #fffdf6 0%, #f2eadb 100%) !important;
    border:3px solid #111 !important;
    border-radius:9px !important;
    box-shadow:
      inset 0 8px 16px rgba(255,255,255,.38),
      inset 0 -10px 14px rgba(18,17,15,.06) !important;
  }

  
  .play-dice .face-right{
    display:block !important;
    left:100% !important;
    top:0 !important;
    width:var(--mobile-dice-depth) !important;
    height:100% !important;
    z-index:2 !important;
    transform:skewY(42deg) !important;
    transform-origin:left top !important;
    background:linear-gradient(90deg, #ded4c1 0%, #cfc4af 100%) !important;
    border:3px solid #111 !important;
    border-left:0 !important;
    border-radius:0 8px 8px 0 !important;
  }

  .play-dice .face-top,
  .play-dice .face-back,
  .play-dice .face-left,
  .play-dice .face-bottom{
    display:none !important;
  }

  .play-dice .face-front .pip{
    width:12px !important;
    height:12px !important;
    background:#111 !important;
    box-shadow:none !important;
  }

  .play-dice .face-front .pip-c{ left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; }
  .play-dice .face-front .pip-tl{ left:12px !important; top:12px !important; }
  .play-dice .face-front .pip-tr{ right:12px !important; top:12px !important; }
  .play-dice .face-front .pip-bl{ left:12px !important; bottom:12px !important; }
  .play-dice .face-front .pip-br{ right:12px !important; bottom:12px !important; }
  .play-dice .face-front .pip-ml{ left:12px !important; top:50% !important; transform:translateY(-50%) !important; }
  .play-dice .face-front .pip-mr{ right:12px !important; top:50% !important; transform:translateY(-50%) !important; }

  .play-dice.dragging{
    filter:drop-shadow(0 18px 24px rgba(18,17,15,.26)) !important;
  }
}

@media (max-width: 480px) and (orientation: portrait){
  .play-dice{
    --mobile-dice-depth:16px;
    width:62px !important;
    height:62px !important;
  }

  .play-dice .face-front .pip{
    width:10px !important;
    height:10px !important;
  }

  .play-dice .face-front .pip-tl{ left:11px !important; top:11px !important; }
  .play-dice .face-front .pip-tr{ right:11px !important; top:11px !important; }
  .play-dice .face-front .pip-bl{ left:11px !important; bottom:11px !important; }
  .play-dice .face-front .pip-br{ right:11px !important; bottom:11px !important; }
  .play-dice .face-front .pip-ml{ left:11px !important; }
  .play-dice .face-front .pip-mr{ right:11px !important; }
}

@media (max-width: 1180px) and (orientation: portrait){
  #playDice.play-dice{
    --md-size:66px;
    --md-depth:17px;
    display:block !important;
    position:fixed !important;
    width:var(--md-size) !important;
    height:var(--md-size) !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    z-index:420 !important;
    pointer-events:auto !important;
    touch-action:none !important;
    user-select:none !important;
    isolation:isolate !important;

    
    transform-style:flat !important;
    -webkit-transform-style:flat !important;
    perspective:none !important;
    -webkit-perspective:none !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;

    border:3px solid #111 !important;
    border-radius:10px !important;
    box-shadow:
      0 16px 24px rgba(18,17,15,.22),
      inset 0 9px 16px rgba(255,255,255,.42),
      inset 0 -10px 14px rgba(18,17,15,.07) !important;

    
    background:
      radial-gradient(circle at 26% 26%, #111 0 5px, transparent 5.6px),
      radial-gradient(circle at 74% 26%, #111 0 5px, transparent 5.6px),
      radial-gradient(circle at 50% 50%, #111 0 5.4px, transparent 6px),
      radial-gradient(circle at 26% 74%, #111 0 5px, transparent 5.6px),
      radial-gradient(circle at 74% 74%, #111 0 5px, transparent 5.6px),
      linear-gradient(180deg, #fffdf6 0%, #f2eadb 100%) !important;
  }

  
  #playDice.play-dice .dice-face,
  #playDice.play-dice .pip{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:none !important;
  }

  
  #playDice.play-dice::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:calc(-1 * var(--md-depth)) !important;
    width:var(--md-size) !important;
    height:var(--md-depth) !important;
    z-index:-1 !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg, #fff6e2 0%, #e9ddc7 100%) !important;
    border:3px solid #111 !important;
    border-bottom:0 !important;
    border-radius:10px 10px 0 0 !important;
    clip-path:polygon(var(--md-depth) 0, 100% 0, calc(100% - var(--md-depth)) 100%, 0 100%) !important;
    filter:none !important;
    transform:none !important;
    pointer-events:none !important;
  }

  
  #playDice.play-dice::after{
    content:"" !important;
    position:absolute !important;
    right:calc(-1 * var(--md-depth)) !important;
    top:calc(-1 * var(--md-depth)) !important;
    width:var(--md-depth) !important;
    height:var(--md-size) !important;
    z-index:-2 !important;
    box-sizing:border-box !important;
    background:linear-gradient(90deg, #ded3bd 0%, #c9bba4 100%) !important;
    border:3px solid #111 !important;
    border-left:0 !important;
    border-radius:0 10px 10px 0 !important;
    clip-path:polygon(0 var(--md-depth), 100% 0, 100% calc(100% - var(--md-depth)), 0 100%) !important;
    filter:none !important;
    transform:none !important;
    pointer-events:none !important;
  }

  #playDice.play-dice.dragging{
    box-shadow:
      0 22px 30px rgba(18,17,15,.28),
      inset 0 9px 16px rgba(255,255,255,.42),
      inset 0 -10px 14px rgba(18,17,15,.07) !important;
  }
}

@media (max-width: 480px) and (orientation: portrait){
  #playDice.play-dice{
    --md-size:60px;
    --md-depth:15px;
    border-width:3px !important;
    border-radius:9px !important;
    background:
      radial-gradient(circle at 26% 26%, #111 0 4.4px, transparent 5px),
      radial-gradient(circle at 74% 26%, #111 0 4.4px, transparent 5px),
      radial-gradient(circle at 50% 50%, #111 0 4.8px, transparent 5.4px),
      radial-gradient(circle at 26% 74%, #111 0 4.4px, transparent 5px),
      radial-gradient(circle at 74% 74%, #111 0 4.4px, transparent 5px),
      linear-gradient(180deg, #fffdf6 0%, #f2eadb 100%) !important;
  }
}

@media (max-width: 1180px) and (orientation: portrait){
  #playDice.play-dice{
    --phone-dice-size:66px;
    --phone-dice-half:33px;
    display:block !important;
    position:fixed !important;
    width:var(--phone-dice-size) !important;
    height:var(--phone-dice-size) !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    z-index:420 !important;
    pointer-events:auto !important;
    touch-action:none !important;
    user-select:none !important;
    isolation:isolate !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:drop-shadow(0 16px 22px rgba(18,17,15,.24)) !important;

    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    transform-origin:center center !important;
    will-change:left, top, transform !important;
    perspective:none !important;
    -webkit-perspective:none !important;
  }

  
  #playDice.play-dice::before,
  #playDice.play-dice::after{
    content:none !important;
    display:none !important;
  }

  #playDice.play-dice .dice-face{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg, #fffdf6 0%, #f2eadb 100%) !important;
    border:0 !important;
    border-radius:9px !important;
    box-shadow:
      inset 0 0 0 3px #111,
      inset 0 8px 14px rgba(255,255,255,.34),
      inset 0 -10px 14px rgba(18,17,15,.06) !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    pointer-events:none !important;
  }

  #playDice.play-dice .face-front{ transform:translateZ(var(--phone-dice-half)) !important; }
  #playDice.play-dice .face-back{ transform:rotateY(180deg) translateZ(var(--phone-dice-half)) !important; }
  #playDice.play-dice .face-right{
    transform:rotateY(90deg) translateZ(var(--phone-dice-half)) !important;
    background:linear-gradient(180deg, #efe3cc 0%, #d7cab4 100%) !important;
  }
  #playDice.play-dice .face-left{ transform:rotateY(-90deg) translateZ(var(--phone-dice-half)) !important; }
  #playDice.play-dice .face-top{
    transform:rotateX(90deg) translateZ(var(--phone-dice-half)) !important;
    background:linear-gradient(180deg, #fff8e8 0%, #eadcc4 100%) !important;
  }
  #playDice.play-dice .face-bottom{ transform:rotateX(-90deg) translateZ(var(--phone-dice-half)) !important; }

  #playDice.play-dice .pip{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    width:11px !important;
    height:11px !important;
    border-radius:50% !important;
    background:#111 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  #playDice.play-dice .pip-c{ left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; }
  #playDice.play-dice .pip-tl{ left:12px !important; top:12px !important; }
  #playDice.play-dice .pip-tr{ right:12px !important; top:12px !important; }
  #playDice.play-dice .pip-bl{ left:12px !important; bottom:12px !important; }
  #playDice.play-dice .pip-br{ right:12px !important; bottom:12px !important; }
  #playDice.play-dice .pip-ml{ left:12px !important; top:50% !important; transform:translateY(-50%) !important; }
  #playDice.play-dice .pip-mr{ right:12px !important; top:50% !important; transform:translateY(-50%) !important; }

  #playDice.play-dice.dragging{
    filter:drop-shadow(0 22px 30px rgba(18,17,15,.30)) !important;
  }
}

@media (max-width: 480px) and (orientation: portrait){
  #playDice.play-dice{
    --phone-dice-size:60px;
    --phone-dice-half:30px;
  }
  #playDice.play-dice .dice-face{
    border-radius:8px !important;
  }
  #playDice.play-dice .pip{
    width:10px !important;
    height:10px !important;
  }
  #playDice.play-dice .pip-tl{ left:10px !important; top:10px !important; }
  #playDice.play-dice .pip-tr{ right:10px !important; top:10px !important; }
  #playDice.play-dice .pip-bl{ left:10px !important; bottom:10px !important; }
  #playDice.play-dice .pip-br{ right:10px !important; bottom:10px !important; }
  #playDice.play-dice .pip-ml{ left:10px !important; }
  #playDice.play-dice .pip-mr{ right:10px !important; }
}

.play-dice{
  overflow:visible !important;
  perspective:520px;
  -webkit-perspective:520px;
  transform-style:preserve-3d !important;
  -webkit-transform-style:preserve-3d !important;
}

.play-dice .dice-cube{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-style:preserve-3d !important;
  -webkit-transform-style:preserve-3d !important;
  transform-origin:50% 50% 0;
  will-change:transform;
  pointer-events:none;
}

.play-dice .dice-face{
  transform-style:preserve-3d !important;
  -webkit-transform-style:preserve-3d !important;
}

@media (max-width: 1180px) and (orientation: portrait){
  #playDice.play-dice{
    --phone-dice-size:68px;
    --phone-dice-half:34px;
    display:block !important;
    position:fixed !important;
    width:var(--phone-dice-size) !important;
    height:var(--phone-dice-size) !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:visible !important;
    z-index:460 !important;
    pointer-events:auto !important;
    touch-action:none !important;
    user-select:none !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    filter:drop-shadow(0 18px 24px rgba(18,17,15,.24)) !important;
    perspective:560px !important;
    -webkit-perspective:560px !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
  }

  #playDice.play-dice::before,
  #playDice.play-dice::after{
    content:none !important;
    display:none !important;
  }

  #playDice.play-dice .dice-cube{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    transform-origin:50% 50% 0 !important;
  }

  #playDice.play-dice .dice-face{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg, #fffdf6 0%, #f2eadb 100%) !important;
    border:0 !important;
    border-radius:9px !important;
    box-shadow:
      inset 0 0 0 3px #111,
      inset 0 8px 14px rgba(255,255,255,.34),
      inset 0 -10px 14px rgba(18,17,15,.06) !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
    pointer-events:none !important;
  }

  #playDice.play-dice .face-front{ transform:translateZ(var(--phone-dice-half)) !important; }
  #playDice.play-dice .face-back{ transform:rotateY(180deg) translateZ(var(--phone-dice-half)) !important; }
  #playDice.play-dice .face-right{
    transform:rotateY(90deg) translateZ(var(--phone-dice-half)) !important;
    background:linear-gradient(180deg, #efe3cc 0%, #d7cab4 100%) !important;
  }
  #playDice.play-dice .face-left{
    transform:rotateY(-90deg) translateZ(var(--phone-dice-half)) !important;
    background:linear-gradient(180deg, #f4ead7 0%, #ddd0bc 100%) !important;
  }
  #playDice.play-dice .face-top{
    transform:rotateX(90deg) translateZ(var(--phone-dice-half)) !important;
    background:linear-gradient(180deg, #fff8e8 0%, #eadcc4 100%) !important;
  }
  #playDice.play-dice .face-bottom{
    transform:rotateX(-90deg) translateZ(var(--phone-dice-half)) !important;
    background:linear-gradient(180deg, #ded0bb 0%, #cdbda7 100%) !important;
  }

  #playDice.play-dice .pip{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    width:11px !important;
    height:11px !important;
    border-radius:50% !important;
    background:#111 !important;
    box-shadow:none !important;
  }

  #playDice.play-dice .pip-c{ left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; }
  #playDice.play-dice .pip-tl{ left:12px !important; top:12px !important; }
  #playDice.play-dice .pip-tr{ right:12px !important; top:12px !important; }
  #playDice.play-dice .pip-bl{ left:12px !important; bottom:12px !important; }
  #playDice.play-dice .pip-br{ right:12px !important; bottom:12px !important; }
  #playDice.play-dice .pip-ml{ left:12px !important; top:50% !important; transform:translateY(-50%) !important; }
  #playDice.play-dice .pip-mr{ right:12px !important; top:50% !important; transform:translateY(-50%) !important; }
}

@media (max-width: 480px) and (orientation: portrait){
  #playDice.play-dice{
    --phone-dice-size:62px;
    --phone-dice-half:31px;
  }
  #playDice.play-dice .dice-face{
    border-radius:8px !important;
  }
  #playDice.play-dice .pip{
    width:10px !important;
    height:10px !important;
  }
  #playDice.play-dice .pip-tl{ left:10px !important; top:10px !important; }
  #playDice.play-dice .pip-tr{ right:10px !important; top:10px !important; }
  #playDice.play-dice .pip-bl{ left:10px !important; bottom:10px !important; }
  #playDice.play-dice .pip-br{ right:10px !important; bottom:10px !important; }
  #playDice.play-dice .pip-ml{ left:10px !important; }
  #playDice.play-dice .pip-mr{ right:10px !important; }
}

@media (max-width: 768px) and (orientation: portrait){
  #playDice.play-dice{
    display:block !important;
    position:fixed !important;
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
    min-height:78px !important;
    left:auto;
    top:auto;
    right:auto !important;
    bottom:auto !important;
    z-index:420 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    touch-action:none !important;
    user-select:none !important;
    cursor:grab !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    perspective:720px !important;
    -webkit-perspective:720px !important;
    overflow:visible !important;
    contain:layout style;
  }

  #playDice.play-dice::before,
  #playDice.play-dice::after{
    content:none !important;
    display:none !important;
  }

  #playDice.play-dice .dice-face{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    inset:0 !important;
    width:78px !important;
    height:78px !important;
    min-width:78px !important;
    min-height:78px !important;
    background:#fff !important;
    box-shadow:inset 0 0 0 3px #111 !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
  }

  #playDice.play-dice .face-front{ transform:translateZ(39px) !important; }
  #playDice.play-dice .face-back{ transform:rotateY(180deg) translateZ(39px) !important; }
  #playDice.play-dice .face-right{ transform:rotateY(90deg) translateZ(39px) !important; }
  #playDice.play-dice .face-left{ transform:rotateY(-90deg) translateZ(39px) !important; }
  #playDice.play-dice .face-top{ transform:rotateX(90deg) translateZ(39px) !important; }
  #playDice.play-dice .face-bottom{ transform:rotateX(-90deg) translateZ(39px) !important; }

  #playDice.play-dice .pip{
    display:block !important;
    position:absolute !important;
    width:14px !important;
    height:14px !important;
    border-radius:50% !important;
    background:#111;
    box-shadow:0 0 0 2px #111, inset 0 0 0 1px rgba(255,255,255,.18) !important;
  }

  #playDice.play-dice .face-front .pip,
  #playDice.play-dice .face-top .pip{ background:var(--red) !important; }
  #playDice.play-dice .face-right .pip,
  #playDice.play-dice .face-bottom .pip{ background:var(--blue) !important; }
  #playDice.play-dice .face-left .pip{ background:var(--yellow) !important; }
  #playDice.play-dice .face-back .pip{ background:#111 !important; }

  #playDice.play-dice .pip-c{ left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; }
  #playDice.play-dice .pip-tl{ left:13px !important; top:13px !important; }
  #playDice.play-dice .pip-tr{ right:13px !important; top:13px !important; }
  #playDice.play-dice .pip-bl{ left:13px !important; bottom:13px !important; }
  #playDice.play-dice .pip-br{ right:13px !important; bottom:13px !important; }
  #playDice.play-dice .pip-ml{ left:13px !important; top:50% !important; transform:translateY(-50%) !important; }
  #playDice.play-dice .pip-mr{ right:13px !important; top:50% !important; transform:translateY(-50%) !important; }
}

@media (max-width: 1180px) and (orientation: portrait){
  #playDice.play-dice{
    --mobile-dice-size:66px;
    --mobile-dice-half:33px;
    width:var(--mobile-dice-size) !important;
    height:var(--mobile-dice-size) !important;
    min-width:var(--mobile-dice-size) !important;
    min-height:var(--mobile-dice-size) !important;
    overflow:visible !important;
    perspective:760px !important;
    -webkit-perspective:760px !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    filter:drop-shadow(0 16px 22px rgba(18,17,15,.24)) !important;
  }

  #playDice.play-dice .dice-cube{
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:var(--mobile-dice-size) !important;
    height:var(--mobile-dice-size) !important;
    min-width:var(--mobile-dice-size) !important;
    min-height:var(--mobile-dice-size) !important;
    transform-origin:50% 50% !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    pointer-events:none !important;
  }

  #playDice.play-dice .dice-face{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:var(--mobile-dice-size) !important;
    height:var(--mobile-dice-size) !important;
    min-width:var(--mobile-dice-size) !important;
    min-height:var(--mobile-dice-size) !important;
    box-sizing:border-box !important;
    background:#fff !important;
    border:0 !important;
    border-radius:8px !important;
    box-shadow:inset 0 0 0 3px #111 !important;
    transform-origin:50% 50% !important;
    transform-style:preserve-3d !important;
    -webkit-transform-style:preserve-3d !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
    pointer-events:none !important;
  }

  #playDice.play-dice .face-front{ transform:translateZ(var(--mobile-dice-half)) !important; }
  #playDice.play-dice .face-back{ transform:rotateY(180deg) translateZ(var(--mobile-dice-half)) !important; }
  #playDice.play-dice .face-right{ transform:rotateY(90deg) translateZ(var(--mobile-dice-half)) !important; }
  #playDice.play-dice .face-left{ transform:rotateY(-90deg) translateZ(var(--mobile-dice-half)) !important; }
  #playDice.play-dice .face-top{ transform:rotateX(90deg) translateZ(var(--mobile-dice-half)) !important; }
  #playDice.play-dice .face-bottom{ transform:rotateX(-90deg) translateZ(var(--mobile-dice-half)) !important; }

  #playDice.play-dice .pip{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    width:11px !important;
    height:11px !important;
    border-radius:50% !important;
    background:#111;
    box-shadow:0 0 0 2px #111, inset 0 0 0 1px rgba(255,255,255,.18) !important;
  }

  #playDice.play-dice .face-front .pip,
  #playDice.play-dice .face-top .pip{ background:var(--red) !important; }
  #playDice.play-dice .face-right .pip,
  #playDice.play-dice .face-bottom .pip{ background:var(--blue) !important; }
  #playDice.play-dice .face-left .pip{ background:var(--yellow) !important; }
  #playDice.play-dice .face-back .pip{ background:#111 !important; }

  #playDice.play-dice .pip-c{ left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; }
  #playDice.play-dice .pip-tl{ left:11px !important; top:11px !important; }
  #playDice.play-dice .pip-tr{ right:11px !important; top:11px !important; }
  #playDice.play-dice .pip-bl{ left:11px !important; bottom:11px !important; }
  #playDice.play-dice .pip-br{ right:11px !important; bottom:11px !important; }
  #playDice.play-dice .pip-ml{ left:11px !important; top:50% !important; transform:translateY(-50%) !important; }
  #playDice.play-dice .pip-mr{ right:11px !important; top:50% !important; transform:translateY(-50%) !important; }
}

@media (max-width: 480px) and (orientation: portrait){
  #playDice.play-dice{
    --mobile-dice-size:60px;
    --mobile-dice-half:30px;
  }
  #playDice.play-dice .dice-face{
    border-radius:7px !important;
  }
  #playDice.play-dice .pip{
    width:10px !important;
    height:10px !important;
  }
  #playDice.play-dice .pip-tl{ left:10px !important; top:10px !important; }
  #playDice.play-dice .pip-tr{ right:10px !important; top:10px !important; }
  #playDice.play-dice .pip-bl{ left:10px !important; bottom:10px !important; }
  #playDice.play-dice .pip-br{ right:10px !important; bottom:10px !important; }
  #playDice.play-dice .pip-ml{ left:10px !important; }
  #playDice.play-dice .pip-mr{ right:10px !important; }
}


.designer-case-card{
  cursor:pointer;
}

.case-main{
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(47,99,255,.06), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(252,248,242,.99)) !important;
}

.case-main::before{
  content:"OPEN CASE" !important;
  position:absolute;
  right:-42px;
  top:34px;
  width:218px;
  height:34px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.72), rgba(255,255,255,.34)),
    repeating-linear-gradient(90deg, rgba(18,17,15,.16) 0 1px, transparent 1px 10px);
  border-top:1px solid rgba(18,17,15,.20);
  border-bottom:1px solid rgba(18,17,15,.18);
  color:rgba(18,17,15,.58);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  transform:rotate(12deg);
  opacity:.86;
  box-shadow:0 10px 24px rgba(18,17,15,.05);
  backdrop-filter:blur(3px);
}


.designer-case-card:hover .case-main::before{
  opacity:1 !important;
  color:rgba(18,17,15,.76);
  transform:rotate(8deg) translateY(-5px) translateX(2px) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.82), rgba(255,255,255,.38)),
    repeating-linear-gradient(90deg, rgba(47,99,255,.20) 0 1px, transparent 1px 10px);
  border-top-color:rgba(47,99,255,.28);
  border-bottom-color:rgba(47,99,255,.24);
}


.designer-case-card:hover .case-main{
  box-shadow:
    inset 0 0 0 2px rgba(18,17,15,.92),
    0 30px 56px rgba(18,17,15,.18),
    12px 12px 0 rgba(18,17,15,.045) !important;
}

.case-kicker{
  width:max-content;
}

@media (max-width:1180px) and (orientation:portrait){
  .case-main::before{
    right:-54px;
    top:30px;
    width:206px;
    height:32px;
    font-size:.52rem;
  }

  .case-main::after{
    right:18px;
    bottom:18px;
    font-size:.54rem;
    padding:7px 9px 6px;
  }
}