/* Shared styles for Krok feature pages */

:root{
  --o:#EC5E27;--o-dark:#d44e1c;--g:#132A13;--g-light:#1d3d1d;
  --c:#FFFCF6;--lc:#FAF4D3;--gr:#9a8060;
  --shadow-sm:0 2px 8px rgba(19,42,19,0.06);--shadow-md:0 12px 32px rgba(19,42,19,0.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--c);color:var(--g);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Unbounded',sans-serif;line-height:1.15;letter-spacing:-0.02em}
em{font-style:normal}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto}
section{position:relative;overflow:hidden}

/* TAGS */
.tag{display:inline-block;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;}
.tag-solid{background:var(--o);color:#fff;padding:8px 20px;border-radius:8px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;border-radius:50px;padding:18px 40px;cursor:pointer;border:none;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .2s,color .2s;text-align:center;}
.btn-primary{background:var(--o);color:#fff;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(236,94,39,0.35);background:var(--o-dark);}
.btn-secondary{background:transparent;color:var(--g);border:2px solid var(--g);}
.btn-secondary:hover{background:var(--g);color:#fff;transform:translateY(-3px);}
.btn-sm{padding:12px 24px;font-size:15px;}
.btn:focus-visible{outline:3px solid rgba(236,94,39,.45);outline-offset:3px;}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;}
.navbar{background:rgba(255,252,246,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(236,94,39,0.15);padding:0 60px;}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:36px;width:auto;mix-blend-mode:multiply;}
.brand span{font-family:'Unbounded',sans-serif;font-weight:900;font-size:18px;letter-spacing:-0.02em;}
.nav-menu{display:flex;gap:32px;margin-left:clamp(24px,3vw,56px);}
.nav-menu a{font-weight:700;font-size:14px;transition:color .2s;white-space:nowrap;}
.nav-menu a:hover,.nav-menu a.active{color:var(--o);}
.nav-right{display:flex;align-items:center;gap:20px;}
.nav-contacts{display:flex;align-items:center;gap:8px;}
.nav-phone{font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:var(--g);white-space:nowrap;transition:color .2s;margin-right:4px;}
.nav-phone:hover{color:var(--o);}
.nav-soc{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(19,42,19,0.15);color:var(--g);transition:background .2s,border-color .2s,color .2s;}
.nav-soc:hover{background:var(--o);border-color:var(--o);color:#fff;}
.nav-soc svg{width:15px;height:15px;display:block;}
.nav-divider{width:1px;height:26px;background:rgba(19,42,19,0.12);}
.nav-cta{flex-shrink:0;}
.nav-cta .btn{white-space:nowrap;}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:0;flex-shrink:0;}
.nav-burger span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--g);margin:0 auto;transition:transform .3s ease,opacity .2s ease;}
.nav-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);background:var(--c);z-index:99;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);box-shadow:-12px 0 40px rgba(19,42,19,0.18);padding:88px 28px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:28px;}
.mobile-menu.open{transform:translateX(0);}
.mm-overlay{position:fixed;inset:0;background:rgba(19,42,19,0.45);z-index:98;opacity:0;pointer-events:none;transition:opacity .3s ease;}
.mm-overlay.open{opacity:1;pointer-events:auto;}
.mm-links{display:flex;flex-direction:column;gap:4px;}
.mm-links a{font-family:'Unbounded',sans-serif;font-weight:700;font-size:20px;color:var(--g);padding:10px 0;border-bottom:1px solid rgba(19,42,19,0.07);transition:color .2s;}
.mm-links a:hover{color:var(--o);}
.mm-contacts{background:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow-sm);border:1px solid rgba(19,42,19,0.05);display:flex;flex-direction:column;gap:14px;}
.mm-title{font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:2px;color:var(--o);}
.mm-contacts a{display:flex;align-items:center;gap:10px;font-family:'Nunito',sans-serif;font-weight:700;font-size:17px;color:var(--g);min-height:24px;transition:color .2s;}
.mm-contacts a:hover{color:var(--o);}
.mm-hours{font-family:'Nunito',sans-serif;font-weight:600;font-size:15px;color:var(--gr);}

/* SECTIONS */
.section-pad{padding:100px 60px;}
.deco-circle{position:absolute;border-radius:50%;background:var(--o);pointer-events:none;z-index:0;}
.section-light{background:var(--c);}
.section-dark{background:var(--g);color:#fff;}
.section-dark h2{color:#fff;}
.section-dark h2 em{color:var(--o);}

/* CTA band */
.cta-band{text-align:center;}
.cta-band .wrap{position:relative;z-index:2;}
.cta-band h2{font-size:clamp(26px,3.6vw,44px);font-weight:900;margin:18px 0 14px;}
.cta-band p{color:rgba(255,255,255,0.72);max-width:560px;margin:0 auto 30px;font-size:17px;}

/* FOOTER */
.footer{position:relative;overflow:hidden;background:var(--g);color:#fff;padding:80px 60px 40px;}
.footer .deco-circle{background:var(--o);}
.footer-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:5cm;row-gap:48px;}
.footer-grid > .foot-col:nth-child(2){margin-top:68px;}
.foot-brand-logo{display:inline-flex;margin-bottom:20px;}
.foot-brand-logo img{height:48px;width:auto;}
.foot-slogan{font-family:'Unbounded',sans-serif;font-weight:600;font-size:20px;color:var(--o);line-height:1.25;margin-bottom:16px;}
.foot-desc{font-family:'Nunito',sans-serif;font-weight:400;font-size:15px;color:rgba(255,255,255,0.7);line-height:1.6;max-width:320px;margin-bottom:24px;}
.foot-social{display:flex;gap:12px;}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);color:#fff;transition:background .2s,border-color .2s,transform .2s;}
.foot-social a:hover{background:var(--o);border-color:var(--o);transform:translateY(-2px);}
.foot-social svg{width:18px;height:18px;display:block;}
.foot-col h4{font-family:'Nunito',sans-serif;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:2px;color:var(--o);margin-bottom:20px;}
.foot-contact{display:flex;flex-direction:column;gap:12px;}
.foot-contact-top{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
.foot-contact a,.foot-contact span{font-family:'Nunito',sans-serif;font-weight:600;font-size:15px;color:rgba(255,255,255,0.78);transition:color .2s;}
.foot-contact a:hover{color:var(--o);}
.foot-contact .lbl{display:block;color:rgba(255,255,255,0.45);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px;}
.foot-bottom{position:relative;z-index:2;max-width:1200px;margin:48px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.foot-bottom .copy{font-family:'Nunito',sans-serif;font-size:13px;color:rgba(255,255,255,0.5);font-weight:600;}
.foot-made{font-family:'Nunito',sans-serif;font-size:13px;color:rgba(255,255,255,0.5);font-weight:600;}
.foot-made span{color:var(--o);}


/* ===== FEATURE PAGES ===== */
.ft-hero{position:relative;overflow:hidden;background:var(--c);padding:128px 60px 90px;}
.ft-hero-grid{position:relative;z-index:2;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;}
.ft-crumbs{font-size:13px;font-weight:700;color:var(--gr);margin-bottom:18px;}
.ft-crumbs a:hover{color:var(--o);}
.ft-num{position:absolute;left:-10px;top:84px;z-index:0;font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(160px,22vw,320px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(236,94,39,.13);pointer-events:none;}
.ft-hero h1{font-size:clamp(30px,4vw,54px);font-weight:900;line-height:1.08;margin:18px 0 20px;}
.ft-hero h1 em{color:var(--o);}
.ft-lead{font-size:clamp(16px,1.35vw,19px);line-height:1.75;color:#3a4a3a;margin-bottom:30px;max-width:560px;}
.ft-btns{display:flex;flex-wrap:wrap;gap:14px;}
.ft-panel{position:relative;border-radius:26px;background:var(--g);box-shadow:0 30px 70px rgba(19,42,19,.25);padding:28px;min-height:420px;color:#FFEEDD;overflow:hidden;}
.ft-panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,238,221,.6);}
.ft-dots{display:flex;gap:6px;}
.ft-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,238,221,.2);}
.ft-dots i:first-child{background:#ff5f57;}.ft-dots i:nth-child(2){background:#febc2e;}.ft-dots i:nth-child(3){background:#28c840;}
.ft-hint{margin-top:16px;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;color:rgba(255,238,221,.55);}
.ft-sec{position:relative;overflow:hidden;}
.ft-sec h2{font-size:clamp(26px,3.4vw,44px);font-weight:900;margin:16px 0 18px;}
.ft-sec h2 em{color:var(--o);}
.ft-sec .intro{font-size:17px;line-height:1.78;max-width:720px;}
.section-light .ft-sec-inner .intro,.ft-lc .intro{color:#3a4a3a;}
.section-dark .intro{color:rgba(255,255,255,.78);}
.ft-lc{background:var(--lc);}
.ft-sec-inner{max-width:1200px;margin:0 auto;position:relative;z-index:2;}
.ft-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;}
.ft-card{position:relative;background:#fff;border-radius:20px;padding:30px 28px;border:1px solid rgba(19,42,19,.06);box-shadow:var(--shadow-sm);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;}
.ft-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.ft-card .ic{width:52px;height:52px;border-radius:16px;background:rgba(236,94,39,.12);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px;transition:transform .5s cubic-bezier(.2,1.6,.4,1);}
.ft-card:hover .ic{transform:rotate(-8deg) scale(1.1);}
.ft-card h3{font-size:19px;font-weight:800;margin-bottom:10px;}
.ft-card p{font-size:15.5px;line-height:1.65;color:#3a4a3a;}
.section-dark .ft-card{background:rgba(255,238,221,.06);border-color:rgba(255,238,221,.12);box-shadow:none;}
.section-dark .ft-card h3{color:#FFEEDD;}.section-dark .ft-card p{color:rgba(255,255,255,.72);}
.ft-steps{position:relative;margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ft-steps::before{content:"";position:absolute;left:26px;right:26px;top:26px;height:2px;background:repeating-linear-gradient(90deg,rgba(236,94,39,.5) 0 8px,transparent 8px 16px);}
.ft-step{position:relative;}
.ft-step b{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--o);color:#fff;font-family:'Unbounded',sans-serif;font-weight:900;font-size:17px;margin-bottom:18px;box-shadow:0 0 0 6px var(--c);}
.section-dark .ft-step b{box-shadow:0 0 0 6px var(--g);}
.ft-lc .ft-step b{box-shadow:0 0 0 6px var(--lc);}
.ft-step h3{font-size:17px;font-weight:800;margin-bottom:8px;}
.ft-step p{font-size:15px;line-height:1.6;color:#3a4a3a;}
.section-dark .ft-step h3{color:#FFEEDD;}.section-dark .ft-step p{color:rgba(255,255,255,.72);}
.ft-more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.ft-more a{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:20px;background:rgba(255,238,221,.06);border:1px solid rgba(255,238,221,.14);color:#FFEEDD;transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s;}
.ft-more a:hover{transform:translateY(-6px);border-color:var(--o);background:rgba(236,94,39,.1);}
.ft-more .n{font-family:'Unbounded',sans-serif;font-weight:900;font-size:34px;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(255,238,221,.35);}
.ft-more a:hover .n{-webkit-text-stroke-color:var(--o);}
.ft-more h3{font-size:18px;font-weight:800;color:#FFEEDD;}
.ft-more span.go{margin-top:auto;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#FFB48A;}
.ft-more a:hover span.go{color:var(--o);}

/* fx */
.tw{opacity:0;}.tw.on{opacity:1;}
.tw-caret{display:inline-block;width:.07em;height:.9em;margin-left:.04em;vertical-align:-.08em;background:var(--o);animation:twBlink .8s steps(1) infinite;}
@keyframes twBlink{50%{opacity:0;}}
.lw{display:inline-block;}
.fw{display:inline-block;white-space:nowrap;}
.fc{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;}
.fi{display:inline-block;}
.fx-on .fx-flip .fi{transform:translateY(110%) rotate(8deg);transition:transform .5s cubic-bezier(.2,1,.3,1);transition-delay:calc(var(--i)*12ms);}
.fx-on .fx-flip.in .fi{transform:none;}
.fx-on .fx-words .lw{opacity:0;transform:translateY(10px);filter:blur(5px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1),filter .45s ease;transition-delay:calc(var(--i)*10ms);}
.fx-on .fx-words.in .lw{opacity:1;transform:none;filter:none;}
.fx-on .fx-pop{opacity:0;transform:translateY(16px) scale(.9);transition:opacity .5s ease,transform .7s cubic-bezier(.2,1.5,.4,1);transition-delay:var(--d,0s);}
.fx-on .fx-pop.in{opacity:1;transform:none;}
.fx-on .ft-panel{opacity:0;transform:translateY(30px) rotate(1.5deg) scale(.96);transition:opacity .8s ease .2s,transform 1s cubic-bezier(.2,1,.3,1) .2s;}
.fx-on .ft-panel.in{opacity:1;transform:none;}

@media(max-width:1023px){
  .ft-hero{padding:118px 40px 70px;}
  .ft-hero-grid{grid-template-columns:1fr;gap:40px;}
  .ft-grid3,.ft-more{grid-template-columns:1fr 1fr;}
  .ft-steps{grid-template-columns:1fr 1fr;row-gap:30px;}
  .ft-steps::before{display:none;}
}
@media(max-width:767px){
  .ft-hero{padding:104px 20px 56px;}
  .ft-grid3,.ft-more,.ft-steps{grid-template-columns:1fr;}
  .ft-panel{padding:20px;min-height:0;}
  .ft-btns .btn{width:100%;}
}
/* RESPONSIVE */
@media(max-width:1023px){
  .navbar{padding-left:40px;padding-right:40px;}
  .nav-phone{display:none;}
  .section-pad{padding-left:40px;padding-right:40px;}
  .ab-hero{padding-left:40px;padding-right:40px;}
  .story-grid{grid-template-columns:1fr;gap:36px;max-width:600px;margin:0 auto;}
  .story-media{position:static;order:-1;}
  .story-frame{max-width:420px;margin:0 auto;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px;}
  .footer{padding:64px 40px 36px;}
}
@media(max-width:767px){
  body{font-size:17px;}
  .navbar{padding-left:24px;padding-right:24px;}
  .nav-menu{display:none;}
  .nav-burger{display:flex;}
  .nav-cta{display:none;}
  .nav-contacts{display:none;}
  .nav-divider{display:none;}
  .ab-hero{padding:120px 24px 56px;}
  .section-pad{padding:64px 24px;}
  .footer{padding:48px 24px;text-align:center;}
  .footer-grid{grid-template-columns:1fr;gap:36px;}
  .foot-desc{max-width:none;margin-left:auto;margin-right:auto;}
  .foot-social{justify-content:center;}
  .foot-contact{align-items:center;}
  .footer-grid > .foot-col:nth-child(2){margin-top:0;}
  .foot-contact-top{grid-template-columns:1fr;gap:12px;justify-items:center;}
  .foot-bottom{flex-direction:column;text-align:center;justify-content:center;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ===== widgets ===== */
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.pf-card{appearance:none;border:0;background:none;padding:0;cursor:pointer;perspective:900px;height:112px;text-align:left;font:inherit;color:inherit;}
.pf-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,1.35,.4,1);}
.pf-card.flipped .pf-in{transform:rotateY(180deg);}
@media(hover:hover){.pf-card:hover .pf-in{transform:rotateY(180deg);}}
.pf-front,.pf-back{position:absolute;inset:0;border-radius:16px;padding:13px 16px;display:flex;flex-direction:column;justify-content:space-between;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.pf-front{background:rgba(255,238,221,.07);border:1px solid rgba(255,238,221,.16);}
.pf-back{background:var(--o);transform:rotateY(180deg);box-shadow:0 12px 26px rgba(236,94,39,.35);}
.pf-card small{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;}
.pf-card b{font-family:'Unbounded',sans-serif;font-weight:800;font-size:18px;line-height:1.15;color:#FFEEDD;}
.pf-back b{color:#fff;}
.pf-card em{font-style:normal;font-family:'Nunito',sans-serif;font-weight:700;font-size:12.5px;opacity:.75;}

.gp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.gp-chip{appearance:none;border:1px solid rgba(255,238,221,.25);background:transparent;color:rgba(255,238,221,.82);font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;padding:9px 15px;border-radius:999px;cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .45s cubic-bezier(.2,1.6,.4,1);}
.gp-chip:hover{border-color:#FFB48A;color:#fff;}
.gp-chip.on{background:var(--o);border-color:var(--o);color:#fff;transform:translateY(-2px);}
.gp-plan{background:rgba(255,238,221,.06);border:1px solid rgba(255,238,221,.14);border-radius:18px;padding:20px 22px;}
.gp-title{font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,238,221,.6);margin-bottom:16px;}
.gp-name{font-family:'Unbounded',sans-serif;font-weight:800;font-size:15px;letter-spacing:0;text-transform:none;color:#FFEEDD;margin-left:6px;}
.gp-list{list-style:none;display:flex;flex-direction:column;gap:12px;min-height:188px;}
.gp-list li{display:flex;gap:12px;align-items:flex-start;opacity:0;transform:translateX(-14px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.3,.4,1);}
.gp-list li.on{opacity:1;transform:none;}
.gp-list b{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--o);display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:900;font-size:11px;color:#fff;}
.gp-list span{font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;line-height:1.5;color:#FFEEDD;padding-top:2px;}
.gp-foot{display:flex;align-items:center;gap:12px;margin-top:18px;}
.gp-bar{position:relative;flex:1;height:6px;border-radius:3px;background:rgba(255,238,221,.14);overflow:hidden;}
.gp-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:linear-gradient(90deg,#FFB48A,var(--o));transition:width 1.2s cubic-bezier(.6,0,.2,1);}
.gp-lvl{font-family:'Unbounded',sans-serif;font-weight:800;font-size:12px;color:#FFB48A;white-space:nowrap;}

.mb-area{position:relative;height:370px;border-radius:16px;background:#f6f3ea radial-gradient(rgba(19,42,19,.16) 1px,transparent 1.3px) 0 0/16px 16px;overflow:hidden;touch-action:none;}
.mb-note{position:absolute;width:30%;max-width:150px;min-height:96px;padding:12px;border-radius:4px;box-shadow:0 10px 20px rgba(0,0,0,.16);font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;line-height:1.35;color:var(--g);cursor:grab;user-select:none;-webkit-user-select:none;transform:rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.2,1.5,.4,1),box-shadow .3s;}
.mb-note small{display:block;font-weight:700;font-size:11px;opacity:.65;margin-top:6px;}
.mb-note:hover{box-shadow:0 16px 28px rgba(0,0,0,.2);}
.mb-note.drag{cursor:grabbing;transform:rotate(0deg) scale(1.08);box-shadow:0 24px 44px rgba(0,0,0,.28);}
.mb-note.ping{animation:mbPing .5s ease;}
@keyframes mbPing{50%{transform:rotate(var(--r,0deg)) scale(1.07);}}
.mb-hw{background:#fff!important;}
.mb-hw .cb{display:inline-flex;width:16px;height:16px;border-radius:4px;border:2px solid var(--o);vertical-align:-3px;margin-right:6px;align-items:center;justify-content:center;font-size:11px;color:#fff;}
.mb-hw.done .cb{background:var(--o);}
.mb-hw.done .cb::after{content:"✓";}
.mb-hw.done .t{text-decoration:line-through;opacity:.55;}
.mb-bar{display:block;height:6px;border-radius:3px;background:rgba(19,42,19,.12);margin-top:8px;overflow:hidden;}
.mb-bar i{display:block;height:100%;width:62%;background:var(--o);border-radius:3px;}
.mb-cursor{position:absolute;left:12%;top:14%;z-index:999;pointer-events:none;transition:left 1.1s cubic-bezier(.6,0,.3,1),top 1.1s cubic-bezier(.6,0,.3,1);}
.mb-cursor svg{width:18px;height:18px;display:block;}
.mb-cursor span{position:absolute;left:15px;top:15px;padding:3px 8px;border-radius:7px;background:var(--o);color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;white-space:nowrap;}

.vp-screen{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#0d1b0e,#1d3d1d);aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px 64px;}
.vp-tile{position:relative;border-radius:12px;background:rgba(255,238,221,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
.vp-av{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:900;font-size:18px;color:#fff;background:var(--o);}
.vp-tile.t2 .vp-av{background:#3b6b3f;}
.vp-name{position:absolute;left:8px;bottom:8px;font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;color:#FFEEDD;background:rgba(0,0,0,.35);padding:3px 8px;border-radius:6px;}
.vp-wave{display:flex;align-items:center;gap:3px;height:18px;}
.vp-wave b{width:3px;height:100%;border-radius:2px;background:#FFB48A;transform:scaleY(.2);}
.playing .vp-tile.t1 .vp-wave b{animation:mvWave2 .9s ease-in-out infinite;}
.playing .vp-tile.t2 .vp-wave b{animation:mvWave2 1.1s ease-in-out infinite .45s;}
.vp-wave b:nth-child(2){animation-delay:.1s!important}.vp-wave b:nth-child(3){animation-delay:.2s!important}.vp-wave b:nth-child(4){animation-delay:.3s!important}.vp-wave b:nth-child(5){animation-delay:.4s!important}
@keyframes mvWave2{0%,100%{transform:scaleY(.2);}50%{transform:scaleY(1);}}
.vp-rec{position:absolute;right:14px;top:12px;display:flex;align-items:center;gap:6px;font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;letter-spacing:.1em;color:#FFEEDD;z-index:2;}
.vp-rec i{width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:vpRec 1.2s ease-in-out infinite;}
@keyframes vpRec{50%{opacity:.25;}}
.vp-subs{position:absolute;left:10px;right:10px;bottom:10px;text-align:center;}
.vp-sub{display:inline-block;background:rgba(0,0,0,.55);padding:4px 12px;border-radius:8px;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:#fff;min-height:1.5em;}
.vp-tr{display:block;margin-top:3px;font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;color:#FFB48A;min-height:1.3em;}
.vp-ctrl{display:flex;align-items:center;gap:12px;margin-top:14px;}
.vp-btn{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:var(--o);cursor:pointer;flex-shrink:0;transition:transform .3s cubic-bezier(.2,1.5,.4,1);}
.vp-btn:hover{transform:scale(1.08);}
.vp-btn::before{content:"";position:absolute;left:17px;top:13px;border-left:13px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;}
.playing .vp-btn::before{left:15px;top:14px;width:4px;height:16px;border:0;background:#fff;box-shadow:9px 0 0 #fff;}
.vp-track{position:relative;flex:1;height:8px;border-radius:4px;background:rgba(255,238,221,.16);cursor:pointer;}
.vp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--o);}
.vp-mark{position:absolute;top:-3px;width:3px;height:14px;margin-left:-1.5px;background:#FFEEDD;border-radius:2px;opacity:.7;}
.vp-time{font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;color:rgba(255,238,221,.7);font-variant-numeric:tabular-nums;white-space:nowrap;}
.vp-chs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
.vp-ch{appearance:none;display:flex;gap:10px;align-items:center;text-align:left;border:1px solid rgba(255,238,221,.14);background:rgba(255,238,221,.04);color:#FFEEDD;border-radius:12px;padding:10px 12px;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;transition:border-color .3s,background .3s,transform .3s;}
.vp-ch:hover{transform:translateY(-2px);border-color:rgba(255,238,221,.35);}
.vp-ch small{color:#FFB48A;font-weight:800;font-variant-numeric:tabular-nums;}
.vp-ch.on{border-color:var(--o);background:rgba(236,94,39,.18);}
@media(max-width:767px){
  .pf-grid{grid-template-columns:1fr;gap:10px;}
  .pf-card{height:88px;}.pf-card b{font-size:17px;}
  .mb-area{height:400px;}.mb-note{width:44%;font-size:12.5px;}
  .vp-chs{grid-template-columns:1fr;}
  .vp-screen{padding-bottom:60px;}
}