#gav-skill{
      --ink:#211c19;--ink-soft:#5e5145;--muted:#837568;--paper:#f5ede1;--paper-2:#f0e5d5;--card:#fcf9f4;
      --line:#d6c8b8;--brown:#a97845;--brown-deep:#835d36;--gold:#a97845;--dark:#211e1b;--linegreen:#06c755;
      --serif:"Songti TC","Noto Serif TC","Source Han Serif TC","PMingLiU",serif;
      --latin:Georgia,"Times New Roman",serif;
      --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
    }
#gav-skill *{box-sizing:border-box}
#gav-skill{scroll-behavior:smooth}
#gav-skill #copy,#gav-skill #before-after{scroll-margin-top:64px}
#gav-skill{margin:0;color:var(--ink);font-family:var(--sans);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
#gav-skill img{display:block;max-width:100%}
#gav-skill a{color:inherit}
#gav-skill .page{overflow:hidden}
#gav-skill .nav{position:sticky;top:0;z-index:10;height:52px;padding:0 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(246,239,229,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(80,58,36,.08)}
#gav-skill .nav svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
#gav-skill .brand{font:700 20px/1 var(--latin);letter-spacing:-.6px;text-decoration:none;color:var(--ink)}
#gav-skill .nav-r{justify-self:end;display:flex;gap:16px;align-items:center}
#gav-skill .nav-links{display:none}
#gav-skill .wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 16px}
#gav-skill .kicker{display:flex;align-items:center;gap:10px;color:var(--gold);font:italic 16px/1.3 var(--latin);letter-spacing:.2px}
#gav-skill .kicker .n{font-style:italic}
#gav-skill .kicker .rule{display:inline-block;width:34px;height:1px;background:#cbb59a;margin-left:6px}
#gav-skill h1,#gav-skill h2,#gav-skill h3{font-family:var(--serif);font-weight:700;margin:0}
#gav-skill .sec{padding:72px 0 0}
#gav-skill .sec h2{font-size:32px;line-height:1.28;letter-spacing:.2px;margin:14px 0 24px;font-weight:600}
#gav-skill .ai-note{position:absolute;right:8px;top:8px;background:rgba(28,25,23,.62);color:#fff;font-size:10.5px;line-height:1;padding:5px 7px;border-radius:3px;letter-spacing:.3px}
#gav-skill .btn{appearance:none;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:52px;padding:0 20px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:600 16px/1 var(--sans);letter-spacing:1px;text-decoration:none;border-radius:4px;cursor:pointer;transition:background .2s}
#gav-skill .btn:hover{background:#3d3530}
#gav-skill .btn.outline{background:rgba(255,255,255,.18);color:var(--ink);border-color:#3a322c}
#gav-skill .btn.outline:hover{background:rgba(255,255,255,.55)}
#gav-skill .btn .arr{font-family:var(--sans);font-weight:400;font-size:19px;margin-top:-2px}
#gav-skill .hero{position:relative;isolation:isolate;min-height:calc(100svh - 55px);max-height:900px;padding:30px 0 26px;background:var(--paper);display:flex}
#gav-skill .hero:before{content:"";position:absolute;z-index:-2;inset:0;background:url(https://goaskvivi.com/wp-content/uploads/2026/10/gav-skill-viral-breakdown-20261007/hero-portrait.jpg) center 70%/cover no-repeat;opacity:1}
#gav-skill .hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(247,240,229,.86) 0%,rgba(247,240,229,.55) 24%,rgba(247,240,229,0) 42%,rgba(247,240,229,0) 78%,rgba(247,240,229,.35) 100%)}
#gav-skill .hero-in{position:relative;flex:1;width:100%;padding:0 26px;display:flex;flex-direction:column}
#gav-skill .hero h1{font-size:48px;line-height:1.15;font-weight:900;letter-spacing:2px;margin:18px 0 20px;color:var(--ink)}
#gav-skill .hero-copy{font-size:18px;line-height:1.65;color:var(--ink-soft);margin:0;letter-spacing:.3px}
#gav-skill .hero-obj{flex:1;min-height:300px}
#gav-skill .hero-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
#gav-skill .intro{position:relative;isolation:isolate;height:560px;padding:0;background:#efe5d6 url(https://goaskvivi.com/wp-content/uploads/2026/10/gav-skill-viral-breakdown-20261007/notebook-portrait.jpg) center bottom/cover no-repeat}
#gav-skill .intro:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(245,237,225,.55) 0%,rgba(245,237,225,0) 45%)}
#gav-skill .intro .wrap{position:relative;height:100%;padding:56px 32px 0;display:flex;flex-direction:column;justify-content:flex-start}
#gav-skill .intro h2{max-width:300px;font-size:30px;line-height:1.45;font-weight:500;letter-spacing:0;margin:16px 0 14px}
#gav-skill .intro h2 b{font-weight:900}
#gav-skill .intro p{margin:0;font-size:15px;line-height:1.8;color:var(--ink-soft);letter-spacing:.5px}
#gav-skill .pain-grid{display:grid;gap:18px;margin:0 16px}
#gav-skill .pain-card{margin:0;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(71,48,25,.10);position:relative}
#gav-skill .pain-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
#gav-skill .pain-card figcaption{padding:28px 32px 26px}
#gav-skill .pain-card .q{font:700 19px/1.5 var(--serif);letter-spacing:.5px;color:#211b16;margin:0 0 6px;text-indent:-.5em}
#gav-skill .pain-card .s{font-size:13px;color:var(--muted);margin:0;letter-spacing:.3px}
#gav-skill .ba-sec h2{font-size:32px}
#gav-skill .desk{position:relative;background:transparent;padding:0}
#gav-skill .compare{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
#gav-skill .laptop{margin:0;min-width:0;text-align:left}
#gav-skill .lid{position:relative;min-height:0;border:1px solid var(--line);border-radius:10px;padding:18px 52px 18px 18px;background:#eeece8;box-shadow:0 6px 14px rgba(61,43,26,.07)}
#gav-skill .laptop.ok .lid{background:var(--card);border-color:#cfb183}
#gav-skill .scr{display:block;position:relative;height:auto;min-height:96px;overflow:visible;border:0;background:transparent;cursor:pointer}
#gav-skill .scr img{display:none}
#gav-skill .base{display:none}
#gav-skill .mark{position:absolute;right:16px;top:16px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 12px/1 var(--sans);box-shadow:none;pointer-events:none}
#gav-skill .mark.no{background:#b84d42}
#gav-skill .mark.ok{background:var(--brown)}
#gav-skill .evidence{margin:0;padding-right:6px;font-size:16px;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
#gav-skill .laptop figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;line-height:1.3}
#gav-skill .laptop figcaption b{display:block;font-size:14px;font-weight:700;color:#2a231e}
#gav-skill .view-real{font-size:12px;color:var(--brown);white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
#gav-skill .tutor{background:var(--card);border-radius:16px;padding:28px;box-shadow:0 10px 28px rgba(75,52,31,.08)}
#gav-skill .tutor-top{display:flex;align-items:center;gap:12px}
#gav-skill .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:1px solid #e3d6c5}
#gav-skill .tutor-name{font-size:21px;font-weight:600}
#gav-skill .more{margin-left:auto;font-size:18px;letter-spacing:1px;color:#3b332d;line-height:1}
#gav-skill .speech{margin:14px 0 16px;background:#efe9e1;border-radius:12px;padding:14px 16px;font-size:16px;line-height:1.55;color:#3a312b;min-height:104px}
#gav-skill .speech p{margin:0}
#gav-skill .chips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#gav-skill .chip{height:42px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#4c4038;font:500 13px/1 var(--sans);cursor:pointer;transition:.18s}
#gav-skill .chip:hover{border-color:var(--brown)}
#gav-skill .chip.active{background:var(--brown);border-color:var(--brown);color:#fff}
#gav-skill .copy-card{background:var(--dark);border-radius:16px;padding:24px;color:#f1e9df;box-shadow:0 8px 20px rgba(0,0,0,.16)}
#gav-skill .copy-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#gav-skill .copy-head b{font-size:15px;font-weight:600;letter-spacing:.5px}
#gav-skill .icon-btn{appearance:none;border:0;background:transparent;padding:4px;cursor:pointer;color:#e9e1d6;border-radius:4px}
#gav-skill .icon-btn:hover{background:rgba(255,255,255,.1)}
#gav-skill .icon-btn svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7}
#gav-skill .copy-frame{position:relative;border:1px solid #5a534c;border-radius:6px;background:#1e1c1a}
#gav-skill .copy-code{margin:0;height:220px;overflow:auto;padding:14px;color:#ddd4c8;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre-wrap;word-break:break-word;tab-size:2;scrollbar-width:thin;scrollbar-color:#5a534c transparent}
#gav-skill .copy-frame:after{content:"";position:absolute;left:1px;right:8px;bottom:1px;height:28px;border-radius:0 0 6px 6px;background:linear-gradient(rgba(30,28,26,0),#1e1c1a);pointer-events:none}
#gav-skill .copy-btn{margin-top:14px;height:44px;background:var(--brown);border-color:var(--brown);font-size:15px;border-radius:4px}
#gav-skill .copy-btn:hover{background:var(--brown-deep)}
#gav-skill .copy-note{display:none}
#gav-skill .stack{display:grid;gap:12px}
#gav-skill .steps{display:grid;gap:12px}
#gav-skill .step{height:112px;display:flex;align-items:center;gap:14px;background:var(--card);border-radius:14px;padding:16px;box-shadow:0 3px 10px rgba(77,54,34,.06)}
#gav-skill .step-num{flex:none;width:52px;height:52px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font:italic 19px/1 var(--latin);color:var(--brown)}
#gav-skill .step-tx{flex:1;min-width:0}
#gav-skill .step h3{font:600 16px/1.35 var(--sans);letter-spacing:.5px;color:#211b16}
#gav-skill .step p{margin:2px 0 0;font-size:13px;color:var(--ink-soft)}
#gav-skill .chev{flex:none;font:300 26px/1 var(--sans);color:#5b4f45;margin-top:-3px}
#gav-skill .exit{padding:16px 0 26px}
#gav-skill .ft{background:var(--dark);color:#d6ccc2}
#gav-skill .ft a{text-decoration:none}
#gav-skill .ft-cta{padding:22px 16px 18px;border-bottom:1px solid rgba(222,213,198,.16)}
#gav-skill .ft-cta b{display:block;color:#fff;font:700 21px/1.4 var(--serif);letter-spacing:.5px}
#gav-skill .ft-cta span{display:block;font-size:13px;margin:2px 0 12px}
#gav-skill .ft-line{display:flex;align-items:center;justify-content:center;gap:9px;height:42px;background:var(--linegreen);color:#fff!important;font-weight:600;font-size:16px;border-radius:10px;transition:background .2s}
#gav-skill .ft-line:hover{background:#05b34c}
#gav-skill .ft-line svg{width:20px;height:20px;fill:currentColor}
#gav-skill .ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;padding:18px 16px 10px}
#gav-skill .ft-brand{grid-column:1/-1}
#gav-skill .ft-logo{font:400 18px/1.1 var(--latin);color:#fff;margin:0}
#gav-skill .ft-tag{color:#c9a961;font:13px/1.6 var(--serif);margin:5px 0 0}
#gav-skill .ft h3{font:600 11px/1 var(--sans);letter-spacing:.14em;color:#c9a961;margin:0 0 8px}
#gav-skill .ft nav a{display:block;padding:4px 0;font-size:12.5px;color:#d6ccc2!important}
#gav-skill .ft nav a:hover{color:#fff!important}
#gav-skill .ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 22px}
#gav-skill .ft-so{display:flex;flex-wrap:wrap;gap:7px}
#gav-skill .ft-so a{width:30px;height:30px;border-radius:50%;border:1px solid rgba(214,204,194,.45);display:inline-flex;align-items:center;justify-content:center;transition:.2s}
#gav-skill .ft-so a:hover{background:#c9a961;border-color:#c9a961}
#gav-skill .ft-so svg{width:14px;height:14px;fill:#d6ccc2;display:block}
#gav-skill .ft-so svg.is-wordmark{width:17px;height:17px}
#gav-skill .ft-cp{font-size:11px;color:#a89f96;white-space:nowrap}
#gav-skill .modal{position:fixed;inset:0;z-index:20;background:rgba(16,14,12,.86);display:none;place-items:center;padding:24px;cursor:zoom-out}
#gav-skill .modal.open{display:grid}
#gav-skill .modal img{max-width:min(94vw,900px);max-height:90vh;box-shadow:0 15px 55px #000}
#gav-skill .toast{position:fixed;left:50%;bottom:24px;z-index:30;transform:translate(-50%,130px);background:#1e1e1d;color:#fff;padding:12px 18px;transition:.25s;font-size:14px;opacity:0;visibility:hidden;border-radius:4px}
#gav-skill .toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
@media(min-width:900px){#gav-skill .nav{height:64px;padding:0 max(32px,calc((100vw - 1180px)/2));grid-template-columns:auto 1fr auto;gap:40px}
#gav-skill .nav .menu{display:none}
#gav-skill .brand{font-size:23px;grid-column:1;grid-row:1}
#gav-skill .nav-links{display:flex;gap:30px;font-size:14px}
#gav-skill .nav-links a{text-decoration:none;color:var(--ink)}
#gav-skill .wrap{padding:0}
#gav-skill .sec{padding:112px 0 0}
#gav-skill .sec h2{font-size:42px;line-height:1.25;margin:16px 0 32px}
#gav-skill .kicker{font-size:17px}
#gav-skill .hero{padding:0;min-height:720px;max-height:none;background:var(--paper)}
#gav-skill .hero:before{background-image:url(https://goaskvivi.com/wp-content/uploads/2026/10/gav-skill-viral-breakdown-20261007/hero-wide.jpg);background-size:cover;background-position:center 62%}
#gav-skill .hero:after{background:linear-gradient(90deg,rgba(247,240,229,.55) 0%,rgba(247,240,229,.3) 35%,rgba(247,240,229,0) 55%)}
#gav-skill .hero-in{max-width:1040px;min-height:720px;margin:0 auto;padding:140px 0 80px;display:flex;flex-direction:column;align-items:flex-start}
#gav-skill .hero h1{font-size:78px;margin:20px 0 18px}
#gav-skill .hero-copy{font-size:20px;max-width:400px}
#gav-skill .hero-obj{display:none}
#gav-skill .hero-btns{grid-template-columns:200px 160px;margin-top:38px}
#gav-skill .intro{height:560px;background-image:url(https://goaskvivi.com/wp-content/uploads/2026/10/gav-skill-viral-breakdown-20261007/notebook-wide.jpg);background-position:center 82%}
#gav-skill .intro:before{background:linear-gradient(90deg,rgba(245,237,225,.9) 0%,rgba(245,237,225,.55) 38%,rgba(245,237,225,0) 60%)}
#gav-skill .intro .wrap{padding:0;max-width:1040px;justify-content:center}
#gav-skill .intro h2{font-size:42px;margin:16px 0 14px;max-width:480px}
#gav-skill .intro p{font-size:18px}
#gav-skill .pain-grid{grid-template-columns:1fr 1fr;gap:28px}
#gav-skill .pain-card .q{font-size:24px}
#gav-skill .pain-card .s{font-size:15px}
#gav-skill .pain-card figcaption{padding:28px 32px 26px}
#gav-skill .ba-sec h2{font-size:42px}
#gav-skill .compare{gap:28px;grid-template-columns:1fr 1fr}
#gav-skill .lid{min-height:270px;border-radius:14px;padding:32px 34px 22px}
#gav-skill .mark{width:28px;height:28px;font-size:15px;right:18px;top:18px}
#gav-skill .evidence{font-size:20px;line-height:1.6;padding-right:22px}
#gav-skill .laptop figcaption{margin-top:18px}
#gav-skill .laptop figcaption b{font-size:18px}
#gav-skill .view-real{font-size:14px}
#gav-skill .stack{grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
#gav-skill .tutor{padding:24px}
#gav-skill .tutor-name{font-size:21px}
#gav-skill .speech{font-size:16px;min-height:150px;padding:16px 20px;margin-left:0}
#gav-skill .chips{gap:12px}
#gav-skill .chip{height:42px;font-size:15px}
#gav-skill .copy-card{padding:22px;display:flex;flex-direction:column}
#gav-skill .copy-frame{flex:1;display:flex}
#gav-skill .copy-code{height:auto;min-height:150px;max-height:250px;flex:1;font-size:13px}
#gav-skill .copy-btn{height:46px;font-size:16px}
#gav-skill .copy-note{font-size:13px}
#gav-skill .steps{grid-template-columns:repeat(3,1fr);gap:16px}
#gav-skill .step{height:118px;padding:18px}
#gav-skill .step h3{font-size:20px}
#gav-skill .step p{font-size:14px}
#gav-skill .exit{padding:44px 0 80px}
#gav-skill .exit .btn{height:60px;font-size:18px}
#gav-skill .ft-cta{max-width:1200px;margin:0 auto;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
#gav-skill .ft-cta b{font-size:26px}
#gav-skill .ft-cta span{font-size:15px;margin:2px 0 0}
#gav-skill .ft-line{padding:0 30px;height:52px;border-radius:14px}
#gav-skill .ft-cols{max-width:1200px;margin:0 auto;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding:44px 40px 24px}
#gav-skill .ft-brand{grid-column:auto}
#gav-skill .ft-logo{font-size:28px}
#gav-skill .ft-tag{font-size:16px;margin-top:10px}
#gav-skill .ft h3{font-size:12px;margin-bottom:14px}
#gav-skill .ft nav a{font-size:15px;padding:6px 0}
#gav-skill .ft-bottom{max-width:1200px;margin:0 auto;padding:18px 40px 32px;border-top:1px solid rgba(222,213,198,.16)}
#gav-skill .ft-so a{width:40px;height:40px}
#gav-skill .ft-so svg{width:18px;height:18px}
#gav-skill .ft-so svg.is-wordmark{width:22px;height:22px}
#gav-skill .ft-cp{font-size:13px}}
#gav-skill .room{--H:max(680px,calc(100vw * .3984));position:relative;min-height:680px;background:#e6dccd url(https://goaskvivi.com/wp-content/uploads/2026/10/gav-skill-viral-breakdown-20261007/room-right-window.webp) right bottom/cover no-repeat;display:flex;align-items:flex-end;padding:72px 0 calc(var(--H) * .085);overflow:hidden}
#gav-skill .room-ws{width:100%;max-width:1180px;margin:0 auto;padding:0 40px 0 60px;display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:end;margin-right:max(16vw,40px)}
#gav-skill .room-tx{align-self:center;padding-bottom:40px}
#gav-skill .room h2{font-size:clamp(40px,3.6vw,56px);line-height:1.2;font-weight:900;letter-spacing:1px;margin:18px 0 18px;color:var(--ink);text-shadow:0 1px 14px #fffaf0}
#gav-skill .room-copy{font-size:18px;line-height:1.75;color:var(--ink-soft);margin:0}
#gav-skill .room .get{margin-top:34px;display:flex}
#gav-skill .room .get .btn,#gav-skill .room .get .btn.copy-btn{width:auto;padding:0 34px;background:var(--ink);border-color:var(--ink);color:#fff}
#gav-skill .room .get .btn:hover{background:#3d3530}
#gav-skill .mac{padding:8px 8px 0;border:1px solid #2b2b2b;border-radius:11px 11px 13px 13px;background:linear-gradient(180deg,#1c1c1c,#0d0d0d);box-shadow:0 14px 26px -10px #4a37244d;overflow:hidden;container-type:inline-size}
#gav-skill .mac-scr{height:auto;aspect-ratio:16/9.2;display:flex;flex-direction:column;background:linear-gradient(180deg,#c2c8cd,#d8cfc3 72%,#ddd0be);border-radius:2px;overflow:hidden}
#gav-skill .mac-bar{height:3.2cqw;min-height:14px;display:flex;align-items:center;gap:2cqw;padding:0 1.6cqw;background:#f6f3efcc;font-size:clamp(7px,1.6cqw,11px);color:#222;white-space:nowrap}
#gav-skill .mac-bar .r{margin-left:auto}
#gav-skill .mac-split{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;padding:2.2cqw}
#gav-skill .scr-ov{position:relative;display:flex;flex-direction:column;gap:1.4cqw;background:#fffdf8;border-radius:1.6cqw;padding:2.4cqw;box-shadow:0 1cqw 2.4cqw #0000001a;color:#2a231e;text-decoration:none;cursor:zoom-in;font-size:clamp(9px,2.1cqw,14px);line-height:1.5;transition:box-shadow .25s}
#gav-skill .scr-ov.right{background:#fffaf0}
#gav-skill .scr-ov:hover{box-shadow:0 0 0 2px rgba(169,120,69,.55)}
#gav-skill .ov-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.2cqw}
#gav-skill .tg{display:inline-block;font-size:.85em;letter-spacing:.08em;padding:.25em .75em;border-radius:1em;background:#ece6dc;color:#6d6054}
#gav-skill .tg.ok{background:#efe1c9;color:#8a6230}
#gav-skill .ch{font-weight:700}
#gav-skill .ov-bubble{background:#efebe4;border-radius:.8em;padding:.7em .85em;width:94%}
#gav-skill .ov-list{display:flex;flex-direction:column;gap:.35em}
#gav-skill .ov-list span{display:flex;align-items:center;gap:.5em;background:#f2e8d8;border-radius:.45em;padding:.3em .6em}
#gav-skill .ov-list b{width:1.35em;height:1.35em;border-radius:50%;background:var(--brown);color:#fff;font-size:.8em;display:grid;place-items:center;flex:none}
#gav-skill .ov-mark{position:absolute;right:1.8cqw;bottom:1.8cqw;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700}
#gav-skill .ov-mark.no{background:#c0453a}
#gav-skill .ov-mark.ok{background:#8f7a3e}
#gav-skill .mac-chin{height:6cqw;margin:8px -8px 0;background:linear-gradient(180deg,#cfbba4,#b39c82);box-shadow:inset 0 1px #e9dac6}
#gav-skill .mac-stand{width:25%;aspect-ratio:150/58;margin:0 auto;background:linear-gradient(90deg,#a68f76,#c9b49c 30%,#d9c6af 48%,#bea891 70%,#a48d74);clip-path:polygon(15% 0,85% 0,83% 74%,100% 88%,98% 100%,2% 100%,0 88%,17% 74%);filter:drop-shadow(0 3px 3px #5a442c55)}
#gav-skill .mac-desk{display:flex;justify-content:center;align-items:center;gap:7%;margin-top:2%}
#gav-skill .mac-desk .kb{width:48%;aspect-ratio:299/22;background:linear-gradient(180deg,#e9e3da,#cfc5b7);border:1px solid #f4efe7;border-bottom:2px solid #b6a691;border-radius:3px;transform:perspective(260px) rotateX(18deg)}
#gav-skill .mac-desk .mouse{width:10%;aspect-ratio:3/1;border-radius:50%;border-bottom:2px solid #c8c3ba;background:radial-gradient(ellipse at 40% 35%,#fff,#f4f2ee 45%,#d9d6cf)}
#gav-skill .mac-col{position:relative}
#gav-skill .mac-col:after{content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:16px;background:#61452640;filter:blur(12px);border-radius:50%;z-index:-1}
@media(max-width:899px){#gav-skill .room{--H:auto;min-height:0;display:block;padding:44px 0 0;background-position:72% bottom;background-size:auto 100%}
#gav-skill .room-ws{grid-template-columns:1fr;gap:0;padding:0 18px;margin:0;display:flex;flex-direction:column-reverse}
#gav-skill .room-tx{padding:0 0 30px}
#gav-skill .room h2{font-size:36px;margin:14px 0 12px}
#gav-skill .room-copy{font-size:16px}
#gav-skill .room .get{margin-top:24px}
#gav-skill .room .get .btn{width:100%}
#gav-skill .mac-col{width:100%;padding-bottom:6.5%}}
#gav-skill.fx .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
#gav-skill.fx .rv.in{opacity:1;transform:none}
#gav-skill.fx .hero-in>*{opacity:0;transform:translateY(18px);animation:gavs-fxUp .9s cubic-bezier(.2,.7,.2,1) forwards}
#gav-skill.fx .hero-in>*:nth-child(1){animation-delay:.15s}
#gav-skill.fx .hero-in>*:nth-child(2){animation-delay:.3s}
#gav-skill.fx .hero-in>*:nth-child(3){animation-delay:.48s}
#gav-skill.fx .hero-in>*:nth-child(4){animation-delay:.6s}
#gav-skill.fx .hero-in>*:nth-child(5){animation-delay:.75s}
@keyframes gavs-fxUp{to{opacity:1;transform:none}}
#gav-skill.fx .hero:before{animation:gavs-fxZoom 2.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes gavs-fxZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
#gav-skill .hero{overflow:hidden}
#gav-skill .glint{position:absolute;z-index:-1;top:-20%;bottom:-20%;width:22%;left:-30%;pointer-events:none;background:linear-gradient(100deg,rgba(255,250,235,0) 0%,rgba(255,248,228,.55) 50%,rgba(255,250,235,0) 100%);transform:skewX(-18deg);mix-blend-mode:soft-light;opacity:0}
#gav-skill.fx .glint{animation:gavs-fxGlint 2.2s ease-in-out 1.2s 1 forwards}
@keyframes gavs-fxGlint{0%{left:-30%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:120%;opacity:0}}
#gav-skill .intro h2 b{background:linear-gradient(transparent 72%,rgba(169,120,69,.32) 72%) no-repeat 0 0/0% 100%;transition:background-size 1s cubic-bezier(.2,.7,.2,1) .5s}
#gav-skill .intro.in h2 b,#gav-skill:not(.fx) .intro h2 b{background-size:100% 100%}
#gav-skill .pain-card img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
#gav-skill.fx .pain-card.rv img{transform:scale(1.08)}
#gav-skill.fx .pain-card.rv.in img{transform:scale(1)}
#gav-skill.fx .scene .ov-bubble,#gav-skill.fx .scene .ov-head,#gav-skill.fx .scene .ov-list span{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
#gav-skill.fx .scene .ov-mark{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
#gav-skill.fx .scene.play .ov-bubble,#gav-skill.fx .scene.play .ov-head,#gav-skill.fx .scene.play .ov-list span{opacity:1;transform:none}
#gav-skill.fx .scene.play .ov-mark{transform:scale(1)}
#gav-skill.fx .scene.play .left .ov-head{transition-delay:.2s}
#gav-skill.fx .scene.play .ov-bubble{transition-delay:.55s}
#gav-skill.fx .scene.play .left .ov-mark{transition-delay:1.1s;animation:gavs-fxShake .5s ease 1.55s}
#gav-skill.fx .scene.play .right .ov-head{transition-delay:.9s}
#gav-skill.fx .scene.play .ov-list span:nth-child(1){transition-delay:1.3s}
#gav-skill.fx .scene.play .ov-list span:nth-child(2){transition-delay:1.55s}
#gav-skill.fx .scene.play .ov-list span:nth-child(3){transition-delay:1.8s}
#gav-skill.fx .scene.play .ov-list span:nth-child(4){transition-delay:2.05s}
#gav-skill.fx .scene.play .right .ov-mark{transition-delay:2.5s}
@keyframes gavs-fxShake{0%,100%{translate:0}25%{translate:-3px}50%{translate:3px}75%{translate:-2px}}
#gav-skill .scr-ov{transition:box-shadow .25s}
#gav-skill .scr-ov:hover{box-shadow:0 0 0 2px rgba(169,120,69,.55)}
#gav-skill .typing{display:inline-flex;gap:5px;padding:4px 0}
#gav-skill .typing i{width:7px;height:7px;border-radius:50%;background:#a99a89;animation:gavs-fxDot 1s infinite}
#gav-skill .typing i:nth-child(2){animation-delay:.15s}
#gav-skill .typing i:nth-child(3){animation-delay:.3s}
@keyframes gavs-fxDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
#gav-skill .copy-btn.done{animation:gavs-fxPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes gavs-fxPop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
#gav-skill .step .chev{transition:transform .25s}
#gav-skill .step:hover .chev{transform:translateX(4px)}
#gav-skill.fx .step.rv .step-num{transform:scale(.6) rotate(-20deg);transition:transform .7s cubic-bezier(.3,1.5,.5,1) .15s}
#gav-skill.fx .step.rv.in .step-num{transform:none}
#gav-skill .btn .arr{display:inline-block;transition:transform .25s}
#gav-skill .btn:hover .arr{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){#gav-skill.fx *,#gav-skill.fx *:before,#gav-skill.fx *:after{animation:none!important;transition:none!important}
#gav-skill.fx .rv,#gav-skill.fx .hero-in>*{opacity:1!important;transform:none!important}
#gav-skill.fx .scene .ov-bubble,#gav-skill.fx .scene .ov-head,#gav-skill.fx .scene .ov-list span{opacity:1;transform:none}
#gav-skill.fx .scene .ov-mark{transform:none}}
/* ---- WordPress adapter: only matches the page that contains #gav-skill ---- */
body:has(#gav-skill) #primary.content-area,
body:has(#gav-skill) .site-main,
body:has(#gav-skill) .content-wrap,
body:has(#gav-skill) .entry-content-wrap,
body:has(#gav-skill) .entry-content{margin:0!important;padding:0!important;background:transparent!important;max-width:none!important}
body:has(#gav-skill) .content-area{margin-top:0!important;margin-bottom:0!important}
body:has(#gav-skill) .content-container.site-container{max-width:none!important;padding-left:0!important;padding-right:0!important}
body:has(#gav-skill) article.entry{box-shadow:none!important;border-radius:0!important;background:transparent!important;margin:0!important}
body:has(#gav-skill) .entry-header{display:none!important}
body:has(#gav-skill) #wrapper{overflow-x:clip}
html:has(#gav-skill){scroll-behavior:smooth;scroll-padding-top:96px}
@media(max-width:1024px){html:has(#gav-skill){scroll-padding-top:80px}}
#gav-skill{display:flow-root;position:relative;width:100%;max-width:none;margin:0;font-size:16px;line-height:1.6;font-weight:400;letter-spacing:normal;text-transform:none;text-align:start}
#gav-skill :where(img,svg){display:inline}
#gav-skill :where(h1,h2,h3,h4){color:inherit}
#gav-skill :where(button){box-shadow:none}
/* site header is sticky (desktop 81px, mobile 65px): first screen fills the rest of the viewport */
#gav-skill .hero{min-height:calc(100svh - 65px)}
@media(min-width:900px){#gav-skill .hero{min-height:max(720px,calc(100svh - 81px))}}