/* ============================================================
   江山 · Jiangshan — 青绿山水锁屏
   设计 token 全部从 img/go.jpeg 采样，见 README.md
   ============================================================ */

:root{
  /* 采样色 */
  --silk:      #dde0d7;  /* 雾心最亮绢白 */
  --silk-2:    #d8dfd0;  /* 地平暖绢 */
  --celadon:   #a5c9c1;  /* 天青 */
  --shilu:     #86ae9a;  /* 石绿 */
  --shiqing:   #1c484e;  /* 石青 */
  --ink:       #1c3a33;  /* 墨（画中最深 2% 压暗） */
  --ink-2:     #35564c;
  --cinnabar:  #a8342b;  /* 朱砂印，全页唯一饱和色 */

  --rule:      rgba(28,58,51,.30);
  --rule-2:    rgba(28,58,51,.16);
  --t1:        rgba(28,58,51,.95);
  --t2:        rgba(28,58,51,.72);
  --t3:        rgba(28,58,51,.52);
  --t4:        rgba(28,58,51,.34);

  --gutter:    clamp(26px, 7.5vw, 150px);
  --band-y:    50.5%;

  /* 字体 */
  --f-cjk: 'Noto Serif SC JS','Source Han Serif SC','Songti SC','SimSun',serif;
  --f-kai: 'LXGW Kai JS','Kaiti SC','STKaiti','KaiTi','SimKai',serif;
  --f-num: 'Cormorant JS','Noto Serif SC JS',Georgia,serif;

  --glow: 0 0 6px rgba(228,233,217,.62), 0 0 16px rgba(228,233,217,.40);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .95s;
}

@font-face{
  font-family:'Noto Serif SC JS';
  src:url(fonts/noto-serif-sc-js.woff2) format('woff2');
  font-weight:400 700; font-style:normal; font-display:block;
}
@font-face{
  font-family:'LXGW Kai JS';
  src:url(fonts/kai-js.woff2) format('woff2');
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:'Cormorant JS';
  src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
  font-weight:500; font-style:normal; font-display:block;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0; overflow:hidden; overscroll-behavior:none;
  background:var(--celadon);
  color:var(--ink);
  font-family:var(--f-cjk);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
  cursor:default;
}

/* ---------- 底 ---------- */
.canvas{
  position:fixed; inset:0; z-index:0;
  background:url(img/bg-wide.webp) center 62%/cover no-repeat;
  transform:scale(1.012);              /* 防 cover 边缘露底 */
  transition:transform 1.6s var(--ease), filter 1.6s var(--ease);
  will-change:transform;
}
@media (orientation:portrait){
  .canvas{ background-image:url(img/bg-narrow.webp); background-position:center 58%; }
}
/* 超宽屏：竖向裁切，保住雾带 */
@media (orientation:landscape) and (min-aspect-ratio:21/9){
  .canvas{ background-position:center 100%; }
}
/* 很扁的窗口：往上让一点，别把山尖切掉 */
@media (orientation:landscape) and (max-aspect-ratio:13/10){
  .canvas{ background-position:center 46%; }
}

/* 绢面织纹 */
.silk{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(28,58,51,.045) 0 1px, transparent 1px 3px);
  opacity:.55;
  mix-blend-mode:multiply;
}

/* 水纹 */
.ripples{
  position:fixed; left:0; right:0; bottom:0; z-index:2;
  width:100%; height:clamp(70px,14vh,140px);
  pointer-events:none; opacity:.16;
}
.ripples path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.ripples path:nth-child(2){opacity:.7}
.ripples path:nth-child(3){opacity:.45}

/* ---------- 天头 ---------- */
.head{
  position:fixed; z-index:6; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:calc(22px + env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events:none;
}
.brand{display:flex;align-items:center;gap:11px}
.brand-cn{
  white-space:nowrap;
  font-family:var(--f-cjk); font-weight:600;
  font-size:clamp(15px,1.55vh,17px); letter-spacing:.42em;
  margin-right:-.42em; color:var(--t1);
}
.brand-bar{width:1px;height:13px;background:var(--rule);display:inline-block}
.brand-en{
  font-family:var(--f-num); font-weight:500;
  font-size:clamp(9.5px,.95vh,11px); letter-spacing:.36em; margin-right:-.36em;
  text-transform:uppercase; color:var(--t3);
}
.head-meta{
  display:flex; align-items:center; gap:11px; text-shadow:var(--glow);
  font-size:clamp(10.5px,1.15vh,12.5px); letter-spacing:.2em; margin-right:-.2em; color:var(--t2);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.sep{width:3px;height:3px;border-radius:50%;background:var(--rule);display:inline-block;flex:none}
.net{display:none;align-items:center;gap:6px;margin-left:11px}
.netdot{width:4px;height:4px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;display:inline-block}

.net.off .net-t{color:var(--cinnabar)}

/* ---------- 中央雾带 ---------- */
.band{
  position:fixed; z-index:5; left:0; right:0; top:var(--band-y);
  transform:translateY(-50%);
  pointer-events:none;
}
.wash{
  position:absolute; z-index:0; left:50%; top:50%;
  width:min(1500px,124vw); height:min(760px,105vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(62% 64% at 50% 49%,
      rgba(226,231,214,.95) 0%, rgba(226,231,214,.86) 26%,
      rgba(226,231,214,.66) 46%, rgba(226,231,214,.40) 64%,
      rgba(226,231,214,.17) 80%, rgba(226,231,214,.04) 91%, rgba(226,231,214,0) 100%);
  transition:opacity 1.15s var(--ease), transform 1.35s var(--ease);
  will-change:opacity,transform;
}
.rule{
  position:absolute; left:var(--gutter); right:var(--gutter); height:0;
  border-top:1px solid var(--rule);
  transition:transform var(--dur) var(--ease), opacity .7s var(--ease);
  will-change:transform;
}
.rule::before,.rule::after{
  content:''; position:absolute; top:0; width:1px; height:7px; background:var(--rule);
}
.rule::after{right:0}
.rule-top{top:0}
.rule-bot{bottom:0}
.rule-bot::before,.rule-bot::after{top:-7px}
/* 入场：乌丝栏由中轴向两端写出 */
.rule{transform-origin:50% 50%; animation:draw 1.15s var(--ease) backwards}
.rule-bot{animation-delay:.08s}
@keyframes draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

.core{
  position:relative; z-index:1;
  padding:clamp(20px,4.6vh,52px) 12px clamp(18px,4vh,46px);
  text-align:center;
  transition:opacity .6s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}

/* 时钟 */
.clock{
  position:relative; white-space:nowrap;
  display:inline-flex; align-items:baseline; justify-content:center;
  font-family:var(--f-num); font-weight:500;
  font-size:clamp(66px,15.2vh,184px); line-height:.86;
  color:var(--t1); letter-spacing:.005em;
  font-variant-numeric:lining-nums tabular-nums;
  animation:rise 1.1s .12s var(--ease) backwards;
}
.dg{display:inline-block;width:.575em;text-align:center}
.scn{
  position:absolute; left:-1.45em; top:.1em;
  font-family:var(--f-kai); font-size:.125em; color:var(--t3); letter-spacing:0;
}
.colon{
  display:inline-flex;flex-direction:column;justify-content:center;gap:.17em;
  align-self:center; margin:0 .06em;
}
.colon i{width:.062em;height:.062em;background:var(--ink);opacity:.32;display:block}
.sec{
  position:absolute; right:-1.45em; top:.14em;
  font-size:.135em; font-weight:500; color:var(--t3);
  letter-spacing:.1em; font-variant-numeric:lining-nums tabular-nums;
}
.clock-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.minbar{
  position:relative; width:clamp(150px,17vw,250px); height:1px;
  margin:clamp(16px,2.9vh,30px) auto 0; background:rgba(28,58,51,.24);
  animation:rise 1.1s .2s var(--ease) backwards;
}
.minbar::before,.minbar::after{content:'';position:absolute;top:-3px;width:1px;height:7px;background:var(--rule)}
.minbar::before{left:0}.minbar::after{right:0}
.minbar i{
  position:absolute; left:0; top:-1px; height:3px; width:0%;
  background:var(--ink); opacity:.5; border-radius:1px;
}

.dateline{
  margin-top:clamp(16px,2.9vh,30px);
  font-size:clamp(12.5px,1.75vh,16px); font-weight:600; letter-spacing:.3em; text-indent:.3em;
  white-space:nowrap; color:rgba(24,52,46,.96);
animation:rise 1.1s .28s var(--ease) backwards;
}
.greet{
  margin-top:clamp(11px,1.9vh,20px);
  font-family:var(--f-kai); font-size:clamp(15px,2.4vh,22px);
  letter-spacing:.15em; text-indent:.15em; white-space:nowrap;
  color:var(--t1); opacity:.94;
animation:rise 1.1s .36s var(--ease) backwards;
}

/* 朱砂印已按用户反馈整体移除——红色在整幅青绿里确实跳；
   --cinnabar 现在只用于掉线时的「离线」提示这一处功能性信号 */

/* ---------- 题签 ---------- */
.tsign{
  position:fixed; z-index:6; right:clamp(15px,2.7vw,44px); top:26%;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  writing-mode:vertical-rl; pointer-events:none;
  padding:14px 6px; border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  animation:rise 1.1s .5s var(--ease) backwards;
}
.tsign-t{font-size:clamp(13px,1.5vh,15px);letter-spacing:.36em;color:var(--t2);font-weight:500;text-shadow:var(--glow)}
.tsign-s{font-family:var(--f-kai);font-size:clamp(10.5px,1.15vh,12px);letter-spacing:.3em;margin-bottom:-.3em;color:var(--t3);text-shadow:var(--glow)}
@media (orientation:portrait){
  .tsign{top:auto;bottom:22%;right:14px;padding:10px 4px}
  .tsign-t{font-size:12.5px}
}

/* ---------- 地脚 ---------- */
.foot{
  position:fixed; z-index:7; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
}
.note{display:flex;align-items:baseline;gap:10px;min-width:0;pointer-events:auto}
.note-k{font-family:var(--f-kai);font-size:clamp(10.5px,1.15vh,12px);letter-spacing:.3em;color:var(--t3);flex:none;text-shadow:var(--glow)}
.note-v{
  font-family:var(--f-kai); font-size:clamp(14px,1.7vh,16.5px); letter-spacing:.1em;
  color:var(--t1); min-width:2em; max-width:min(38vw,420px);
  padding-bottom:4px; border-bottom:1px dashed var(--rule-2);
  outline:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:text; user-select:text; touch-action:auto;
}
.note-v:empty::before{content:'留一句话给自己';color:rgba(28,58,51,.5);text-shadow:var(--glow)}
.note-v:focus{border-bottom-color:var(--rule)}

.unlock{
  position:absolute; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; padding:8px 18px; margin:0;
  font-family:var(--f-kai); color:var(--t2); cursor:pointer;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.unlock .u-ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;animation:bob 2.6s 1.4s ease-in-out infinite}
.unlock .u-t{font-size:clamp(11px,1.2vh,12.5px);letter-spacing:.32em;text-indent:.32em;color:var(--t3);text-shadow:var(--glow)}
.unlock:hover .u-t,.unlock:focus-visible .u-t{color:var(--t1)}
.unlock:focus-visible{outline:1px solid var(--rule);outline-offset:3px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.foot-r{display:flex;align-items:center;gap:14px}
.net.off{display:inline-flex;color:var(--cinnabar)}
.relock{
  width:34px;height:34px;display:grid;place-items:center;
  background:rgba(221,224,215,.5);border:1px solid var(--rule-2);border-radius:50%;
  color:var(--t3);cursor:pointer;padding:0;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease),color .2s,border-color .2s;
}
.relock svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linejoin:round}
.relock svg path{fill:none}
.relock:hover{color:var(--t1);border-color:var(--rule-2)}
.relock:focus-visible{outline:1px solid var(--rule);outline-offset:2px;opacity:1;pointer-events:auto}

/* ---------- 解锁后 ---------- */
.corner{
  position:fixed; z-index:6; right:var(--gutter); top:calc(20px + env(safe-area-inset-top));
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .7s .45s var(--ease), transform .8s .45s var(--ease);
}
.c-time{font-family:var(--f-num);font-weight:500;font-size:clamp(24px,3.4vh,34px);line-height:1;color:var(--t1);letter-spacing:.02em;margin-right:-.02em;font-variant-numeric:tabular-nums}
.c-date{font-size:clamp(10.5px,1.15vh,12px);letter-spacing:.24em;margin-right:-.24em;color:var(--t3);text-shadow:var(--glow)}

/* ---------- 去处（解锁后的门户视图） ---------- */
.places{
  position:fixed; inset:0; z-index:6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(74px + env(safe-area-inset-top)) var(--gutter) calc(86px + env(safe-area-inset-bottom));
  opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .7s .45s var(--ease), transform .9s .45s var(--ease);
}
.st-open .places{opacity:1; pointer-events:auto; transform:none}
.pl-head{display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:clamp(18px,3.4vh,34px)}
.pl-domain{
  font-family:var(--f-num); font-weight:500; font-size:clamp(9.5px,.95vh,11px);
  letter-spacing:.44em; margin-right:-.44em; text-transform:uppercase; color:var(--t3); text-shadow:var(--glow);
}
.pl-title{
  margin:0; font-family:var(--f-cjk); font-weight:600;
  font-size:clamp(19px,2.7vh,25px); letter-spacing:.5em; text-indent:.5em; color:var(--t1);
}
.pl-sub{margin:0; font-family:var(--f-kai); font-size:clamp(12.5px,1.5vh,14.5px); letter-spacing:.2em; text-indent:.2em; color:var(--t3)}

.pl-list{
  list-style:none; margin:0; padding:0; width:min(560px,92vw);
  max-height:min(50vh,420px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  border:1px solid var(--rule-2); border-top-color:var(--rule);
  background:rgba(226,231,214,.46);
}
.pl-row{display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--rule-2)}
.pl-link{
  flex:1; min-width:0; display:flex; align-items:baseline; gap:14px;
  padding:clamp(11px,1.7vh,15px) 6px; text-decoration:none; color:inherit;
  transition:background .18s;
}
.pl-link:hover,.pl-link:focus-visible{background:rgba(226,231,214,.9); outline:none}
.pl-idx{font-family:var(--f-num); font-weight:500; font-size:11px; color:var(--t4); flex:none; width:1.8em}
.pl-name{
  font-family:var(--f-kai); font-size:clamp(15px,1.85vh,17px); letter-spacing:.08em;
  color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl-host{
  margin-left:auto; flex:none; font-family:var(--f-num); font-weight:500;
  font-size:11px; letter-spacing:.12em; color:var(--t2);
}
.pl-link:hover .pl-host{color:var(--t1)}
.pl-del{
  flex:none; width:26px; height:26px; display:grid; place-items:center; padding:0;
  background:none; border:1px solid transparent; border-radius:50%;
  color:var(--t2); font-size:15px; line-height:1; cursor:pointer; background:rgba(226,231,214,.6);
  opacity:0; transition:opacity .18s, color .18s, border-color .18s;
}
.pl-row:hover .pl-del,.pl-del:focus-visible{opacity:1}
.pl-del:hover{color:var(--cinnabar); border-color:var(--rule-2)}
/* 触屏没有 hover，删字常驻低透明度，按上去再加深 */
@media (hover:none){
  .pl-del{opacity:.5}
  .pl-link{padding-left:2px}
}

.pl-empty{display:none; text-align:center; margin:2px 0 0; padding:clamp(20px,3.6vh,32px) 0}
.pl-e1{margin:0; font-family:var(--f-kai); font-size:clamp(15px,1.9vh,17px); letter-spacing:.16em; text-indent:.16em; color:var(--t1); text-shadow:var(--glow)}
.pl-e2{margin:9px 0 0; font-size:12px; letter-spacing:.2em; text-indent:.2em; color:var(--t3); text-shadow:var(--glow)}

.pl-add{
  margin-top:clamp(16px,2.8vh,26px);
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 20px; background:none; cursor:pointer;
  border:1px solid var(--rule-2); border-radius:2px;
  font-family:var(--f-kai); font-size:clamp(12.5px,1.4vh,14px); letter-spacing:.24em; text-indent:.1em;
  color:var(--t1); text-shadow:var(--glow); transition:color .2s, border-color .2s, background .2s;
}
.pl-add svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round}
.pl-add:hover,.pl-add:focus-visible{color:var(--t1); border-color:var(--rule); background:rgba(226,231,214,.5); outline:none}

/* ---------- 自绘弹窗 ---------- */
.modal{position:fixed; inset:0; z-index:50; display:none}
.modal.open{display:block}
.m-backdrop{position:absolute; inset:0; background:rgba(230,235,221,.72)}
.m-box{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px,88vw); padding:clamp(22px,3.4vh,30px) clamp(22px,3vw,30px) clamp(18px,2.6vh,24px);
  background:#e9ece0; border:1px solid var(--rule-2); border-radius:2px;
  box-shadow:0 8px 30px rgba(28,58,51,.10);
}
.m-title{margin:0 0 4px; font-family:var(--f-cjk); font-weight:600; font-size:16px; letter-spacing:.3em; text-indent:.3em; color:var(--t1); text-align:center}
.m-note{margin:0 0 6px; min-height:1em; font-family:var(--f-kai); font-size:14px; letter-spacing:.1em; color:var(--t2); text-align:center; word-break:break-all}
.m-fields{padding:6px 0 2px}
.m-field{display:flex; align-items:baseline; gap:14px; padding:9px 0; border-bottom:1px solid var(--rule-2)}
.m-field:focus-within{border-bottom-color:var(--rule)}
.m-k{flex:none; font-size:11px; letter-spacing:.3em; color:var(--t4)}
.m-in{
  flex:1; min-width:0; border:0; background:none; outline:none; padding:2px 0;
  font-family:var(--f-kai); font-size:15.5px; letter-spacing:.06em; color:var(--t1);
}
.m-in::placeholder{color:var(--t4)}
.m-act{display:flex; justify-content:flex-end; gap:10px; margin-top:clamp(16px,2.4vh,22px)}
.m-btn{
  padding:8px 18px; background:none; border:1px solid var(--rule-2); border-radius:2px;
  font-family:var(--f-kai); font-size:13px; letter-spacing:.2em; text-indent:.2em;
  color:var(--t2); cursor:pointer; transition:color .2s, border-color .2s, background .2s;
}
.m-btn:hover{color:var(--t1); border-color:var(--rule)}
.m-go{background:rgba(28,58,51,.06)}
.m-go:hover{background:rgba(28,58,51,.11)}

/* 状态切换 */
.st-open .wash{opacity:0;transform:translate(-50%,-50%) scale(1.28)}
.st-open .rule-top{transform:translateY(-34vh) scaleX(.6);opacity:0}
.st-open .rule-bot{transform:translateY(30vh) scaleX(.6);opacity:0}
.st-open .core{opacity:0;transform:translateY(-10px) scale(.985);filter:blur(2px)}
.st-open .tsign{opacity:0;transition:opacity .6s var(--ease)}
.st-open .head-meta{opacity:0;transform:translateY(-6px)}
.st-open .note{opacity:.62}
.st-open .unlock{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)}
.st-open .corner{opacity:1;transform:none}
.st-open .relock{opacity:1;pointer-events:auto}
.st-open .canvas{transform:scale(1.05)}

/* 非活动层一律不吃点击 */
.st-lock .corner,.st-lock .places,.st-lock .modal{pointer-events:none}
.st-lock .modal{display:none}
.st-open .band,.st-open .foot .unlock{pointer-events:none}

/* 触屏窄屏 */
@media (orientation:portrait){
  :root{--gutter:22px;--band-y:52%}
  .head{
    flex-direction:column; align-items:flex-start; gap:10px;
    padding-top:calc(18px + env(safe-area-inset-top));
  }
  .head-meta{gap:8px;white-space:nowrap;font-size:11px;letter-spacing:.14em;margin-right:0}
  .brand-en{font-size:9.5px}
  .wash{width:152vw;height:104vh}
  .clock{font-size:clamp(52px,14.5vh,100px)}
  .sec,.scn{font-size:.15em}
  .minbar{width:44vw}
  .dateline{letter-spacing:.2em;text-indent:.2em;font-size:14px}
  .greet{font-size:16.5px;letter-spacing:.1em;text-indent:.1em;padding:0 8px}
  .core{padding:24px 4px 20px}
  .foot{
    flex-direction:column; align-items:center; gap:13px;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .note{order:2;justify-content:center}
  .note-v{max-width:56vw}
  .unlock{order:1;position:static;transform:none;padding:2px 10px}
  .st-open .unlock{transform:none}
  .foot-r{order:3}
  .places{justify-content:flex-start;
          padding-top:calc(96px + env(safe-area-inset-top));
          padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .pl-list{max-height:56vh; flex:0 0 auto; width:100%}
  .pl-link{padding:14px 4px}
  .pl-empty{flex:1 1 auto; display:none; align-items:center; justify-content:center}
  .tsign{top:auto;bottom:26%;right:12px}
}
@media (orientation:portrait) and (max-height:700px){
  :root{--band-y:50%}
  .tsign{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.12s !important}
  .canvas{transform:none !important}
}