:root{
  --paper:#F3F4F6; --ink:#12151C; --mute:#6A7080; --line:#D9DCE3; --accent:#3B3BFF;
  --hero-w:100; --hero-wt:600;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#14161C; --ink:#F1F2F5; --mute:#8D93A3; --line:#2A2D37; --accent:#7C84FF; }
}
html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
body{ font-optical-sizing:auto; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.hero{ font-variation-settings:"wdth" var(--hero-w), "wght" var(--hero-wt); transition:font-variation-settings .15s ease-out; }

.btn{ display:inline-block; padding:.85rem 1.5rem; border-radius:999px; font-weight:500; transition:transform .2s; }
.btn:hover{ transform:translateY(-2px); }

.row{ display:flex; justify-content:space-between; align-items:baseline; padding:1.5rem 0; transition:padding .25s, color .25s; }
.row .title{ font-size:clamp(1.5rem,3.5vw,2.25rem); letter-spacing:-.02em; }
.row .meta{ color:var(--mute); font-size:.9rem; }
.row:hover{ padding-left:1rem; color:var(--accent); }

.stack{ transition:color .2s; }
.stack:hover{ color:var(--accent); }

.mail{ display:inline-block; background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 .08em no-repeat; transition:background-size .35s; }
.mail:hover{ background-size:100% .08em; }

.pulse{ animation:pulse 2s ease-out infinite; background:var(--accent); opacity:.5; }
@keyframes pulse{ to{ transform:scale(2.6); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .pulse{ animation:none; }
  .hero,.btn,.row{ transition:none; }
}

/* ---- motion layer ---- */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%;z-index:30}
#glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
header,main,.marquee,footer{position:relative;z-index:1}
header{position:fixed}

.line{display:inline-block;overflow:hidden;padding-bottom:.08em}
.line .ch{display:inline-block;transform:translateY(105%) rotate(6deg);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*55ms + 150ms)}
@keyframes rise{to{transform:none}}

.marquee{overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;align-items:center;gap:2rem;animation:slide 28s linear infinite;padding-right:2rem}
.marquee:hover .track{animation-play-state:paused}
.marquee i{width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);display:inline-block}
@keyframes slide{to{transform:translateX(-50%)}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.js-off .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .line .ch{animation:none;transform:none}
  .marquee .track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  #glow{display:none}
}

/* ---- projects + website previews ---- */
.row{flex-wrap:wrap}
.row .desc{flex-basis:100%;margin-top:.6rem;max-width:60ch;color:var(--mute)}
.row:hover{padding-left:0}
.site{white-space:nowrap;text-align:left;width:100%;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:12px;font-size:1.05rem;letter-spacing:-.01em;transition:background .2s,color .2s,border-color .2s}
.site:hover{border-color:var(--ink)}
.site[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--ink) 35%,transparent)}
.bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-size:.85rem}
.bar span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.bar b{font-weight:500;color:var(--mute);margin:0 auto 0 .8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar a{color:var(--accent);font-weight:500}
#viewport{position:relative;overflow:hidden;aspect-ratio:16/10;background:color-mix(in srgb,var(--ink) 6%,var(--paper))}
#site-frame{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:0 0;background:#fff;opacity:0;transition:opacity .6s}
#site-frame.on{opacity:1}

/* loader + fallback card */
#loader,#fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center}
#loader.on{display:flex;z-index:2}
#loader span{font-size:1.1rem;color:var(--mute)}
#loader span::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
#fallback.on{display:flex}
#fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.35}
#fallback .inner{position:relative;padding:1.5rem}
#fallback h3{font-size:clamp(1.75rem,5vw,3.5rem);letter-spacing:-.03em;font-weight:600;line-height:1}
#fallback p{color:var(--mute);margin:.75rem 0 1.5rem}
#fallback .soon{margin-bottom:0}
@media (prefers-reduced-motion: reduce){#loader span::after{animation:none;content:"..."}}

/* ---- GSAP layer: neutralise earlier CSS-only motion ---- */
.line .ch{animation:none;transform:none}
.reveal{transition:none}
.marquee .track{animation:none}
#progress{transform:scaleX(0)}
#curtain{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;overflow:hidden}
#curtain span{font-size:clamp(4rem,14vw,10rem);font-weight:700;letter-spacing:-.05em;display:block}
.tl{position:absolute;left:-1.5rem;top:.4rem;bottom:.4rem;width:1px;background:var(--line)}
.tl i{display:block;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:top}
#experience ol{position:relative}
#cursor{position:fixed;top:0;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:50;opacity:0;mix-blend-mode:normal;transition:width .25s,height .25s,margin .25s,opacity .3s}
.has-cursor #cursor{opacity:.9}
#cursor.big{width:52px;height:52px;margin:-26px 0 0 -26px;opacity:.25}
.has-cursor, .has-cursor a, .has-cursor button{cursor:none}
.browser{will-change:transform}

#pong{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}

/* ---- colorful game card ---- */
.play-card{position:relative;overflow:hidden;border-radius:2rem;color:#fff;isolation:isolate;
  --ink:#fff;--mute:rgba(255,255,255,.78);--accent:#FFE14D;--line:rgba(255,255,255,.25);
  background:linear-gradient(135deg,#1a1147 0%,#2b1370 55%,#401a8f 100%)}
.play-card .art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.art i{position:absolute;display:block;will-change:transform}
.blob{border-radius:50%;filter:blur(46px);opacity:.85;animation:drift var(--t,14s) ease-in-out infinite alternate}
.b1{width:26rem;height:26rem;left:-7rem;top:-9rem;background:#FF3D8B;--t:13s;--fx:70px;--fy:50px}
.b2{width:24rem;height:24rem;right:-6rem;bottom:-9rem;background:#FFB020;--t:17s;--fx:-60px;--fy:-40px}
.b3{width:18rem;height:18rem;right:18%;top:-7rem;background:#18D4F0;--t:15s;--fx:-80px;--fy:60px}
.b4{width:18rem;height:18rem;left:22%;bottom:-8rem;background:#8B5CF6;--t:19s;--fx:90px;--fy:-50px}
@keyframes drift{to{transform:translate(var(--fx),var(--fy)) scale(1.18)}}
.sh{animation:float var(--t,9s) ease-in-out infinite alternate}
@keyframes float{to{transform:translate(var(--fx,16px),var(--fy,-26px)) rotate(var(--fr,25deg))}}
.ring{width:5.5rem;height:5.5rem;border-radius:50%;border:1rem solid #B6F23B;right:7%;top:12%;--t:8s;--fy:-30px;--fr:0deg}
.tri{width:4.5rem;height:4rem;background:#FF6B6B;clip-path:polygon(50% 0,100% 100%,0 100%);left:46%;bottom:9%;--t:11s;--fx:30px;--fr:80deg}
.sq{width:3.6rem;height:3.6rem;border-radius:.9rem;background:linear-gradient(135deg,#FF3D8B,#FFB020);left:5%;bottom:14%;--t:10s;--fx:24px;--fy:-34px;--fr:60deg}
.plus{width:3.4rem;height:3.4rem;background:#18D4F0;left:40%;top:9%;clip-path:polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%);--t:12s;--fx:-20px;--fy:24px;--fr:-90deg}
.dots{width:7rem;height:7rem;right:4%;bottom:10%;background:radial-gradient(circle,#fff 2px,transparent 2.5px) 0 0/14px 14px;opacity:.55;--t:14s;--fx:-18px;--fy:-12px;--fr:0deg}
.play-btn{background:#fff;color:#1a1147;font-weight:600}
.play-btn:hover{background:#FFE14D}
.play-card #pong{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px);box-shadow:0 30px 60px -25px rgba(10,5,40,.6)}
@media (prefers-reduced-motion: reduce){.blob,.sh{animation:none}}

/* ---- tools card ---- */
.tools-card{position:relative;overflow:hidden;border-radius:2rem;
  --ink:#10261c;--mute:rgba(16,38,28,.7);--accent:#0F9D6B;--line:rgba(16,38,28,.2);
  color:#10261c;background:linear-gradient(135deg,#D3F5E1 0%,#EEF7C9 58%,#FFE9C4 100%)}
.tools-btn{background:#10261c;color:#fff;font-weight:600}
.tools-btn:hover{background:#0F9D6B}
.tools-art{position:relative;min-height:19rem}
.tools-art>*{position:absolute}
.fl{animation:float var(--t,9s) ease-in-out infinite alternate}
.doc{width:8.5rem;height:11rem;border-radius:.8rem;background:#fff;box-shadow:0 20px 40px -20px rgba(16,38,28,.35);
  background-image:repeating-linear-gradient(#fff 0 12px,#E3EBE6 12px 14px);background-clip:padding-box}
.d1{left:6%;top:6%;transform:rotate(-12deg);--t:10s;--fx:10px;--fy:-14px;--fr:-6deg}
.d2{right:6%;top:14%;transform:rotate(9deg);--t:12s;--fx:-12px;--fy:12px;--fr:16deg}
.qr{left:50%;top:50%;width:11.5rem;height:11.5rem;margin:-5.75rem 0 0 -5.75rem;padding:.8rem;border-radius:1.1rem;background:#fff;
  display:grid;grid-template-columns:repeat(11,1fr);gap:3px;box-shadow:0 30px 60px -22px rgba(16,38,28,.5);--t:7s;--fx:0px;--fy:-12px;--fr:0deg;overflow:hidden}
.qr b{border-radius:2px;background:#10261c;opacity:0;transition:opacity .35s}
.qr b.on{opacity:1}
.qr b.fixed{background:#0F9D6B}
.qr::after{content:"";position:absolute;left:0;right:0;height:3px;top:8%;background:#0F9D6B;box-shadow:0 0 14px 3px rgba(15,157,107,.55);animation:scan 2.6s ease-in-out infinite alternate}
@keyframes scan{to{top:92%}}
.chip{padding:.45rem .95rem;border-radius:999px;color:#fff;font-weight:600;font-size:.85rem;white-space:nowrap;box-shadow:0 12px 24px -12px rgba(16,38,28,.5)}
.c1{background:#FF6B6B;right:2%;top:2%;--t:8s;--fx:-10px;--fy:14px;--fr:5deg}
.c2{background:#8B5CF6;left:4%;bottom:6%;--t:9s;--fx:14px;--fy:-12px;--fr:-6deg}
.c3{background:#1AA7D8;right:6%;bottom:2%;--t:11s;--fx:-12px;--fy:-16px;--fr:4deg}
@media (prefers-reduced-motion: reduce){.fl,.qr::after{animation:none}}

/* ---- Instagram-style profile (phones only; hidden at md and up) ---- */
#ig{max-width:34rem;margin:0 auto;padding-bottom:3rem;position:relative;z-index:1}
.ig-top{display:flex;justify-content:space-between;align-items:center;padding:calc(.9rem + env(safe-area-inset-top)) 1.1rem .6rem;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;position:sticky;top:0;background:var(--paper);z-index:5}
.ig-top svg{width:24px;height:24px}
.ig-head{display:flex;align-items:center;gap:1.4rem;padding:.6rem 1.1rem}
.ig-ring{flex:none;width:5.6rem;height:5.6rem;border-radius:50%;padding:3px;background:conic-gradient(#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5,#FEDA75);animation:spin 6s linear infinite}
.ig-ring span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:3px solid var(--paper);background:var(--line);font-weight:700;font-size:1.6rem;letter-spacing:-.04em;animation:spin 6s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.ig-stats{display:flex;flex:1;justify-content:space-around;text-align:center;margin:0}
.ig-stats dd{margin:0;font-weight:700;font-size:1.15rem}.ig-stats dt{font-size:.82rem;color:var(--mute)}
.ig-bio{padding:.5rem 1.1rem;font-size:.92rem;line-height:1.4}
.ig-bio b,.ig-bio span,.ig-bio a{display:block}.ig-bio span{color:var(--mute)}.ig-bio p{margin:.3rem 0}.ig-bio a{color:var(--accent);font-weight:500}
.ig-actions{display:flex;gap:.4rem;padding:.6rem 1.1rem}
.ig-actions a{flex:1;text-align:center;padding:.5rem 0;border-radius:9px;background:var(--line);font-weight:600;font-size:.9rem}
.ig-actions .primary{background:var(--accent);color:#fff}
.ig-hl{display:flex;gap:1.1rem;overflow-x:auto;padding:.9rem 1.1rem;scrollbar-width:none}
.ig-hl::-webkit-scrollbar{display:none}
.ig-hl button{flex:none;display:grid;justify-items:center;gap:.35rem;background:none;border:0;color:inherit;font:inherit;font-size:.78rem;cursor:pointer}
.ig-hl i{font-style:normal;display:grid;place-items:center;width:3.9rem;height:3.9rem;border-radius:50%;border:2px solid var(--line);font-weight:700;font-size:1.3rem;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--paper)),var(--paper))}
.ig-hl button:active i{transform:scale(.94)}
.ig-tabs{display:flex;border-top:1px solid var(--line);position:sticky;top:calc(3.2rem + env(safe-area-inset-top));background:var(--paper);z-index:4}
.ig-tabs button{flex:1;display:grid;place-items:center;padding:.8rem 0;background:none;border:0;border-bottom:2px solid transparent;color:var(--mute);cursor:pointer}
.ig-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ig-tabs svg{width:24px;height:24px}
.ig-panel[hidden],.sheet[hidden]{display:none}
#ig-grid{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.tile{position:relative;width:100%;aspect-ratio:1;border:0;padding:.5rem;color:#fff;display:flex;flex-direction:column;justify-content:space-between;text-align:left;font:inherit;cursor:pointer;overflow:hidden}
.tile b{font-size:2rem;letter-spacing:-.05em;line-height:1}
.tile span{font-size:.68rem;font-weight:600;line-height:1.15;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.35),transparent 55%)}
.post{padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.post h3{margin:0;font-size:1.05rem;letter-spacing:-.01em}.post .meta{margin:.15rem 0 .4rem;color:var(--accent);font-size:.8rem;font-weight:600}.post p{margin:0;font-size:.9rem;color:var(--mute);line-height:1.4}
#ig-p1 h2{margin:0;padding:1.3rem 1.1rem .3rem;font-size:.8rem;color:var(--mute);font-weight:500}
.ig-big{display:flex;flex-direction:column;gap:.4rem;margin:.7rem 1.1rem;padding:1.3rem;border-radius:20px;color:#fff;min-height:9rem}
.ig-big b{font-size:2rem;letter-spacing:-.04em}.ig-big span{opacity:.85;font-size:.92rem}.ig-big em{font-style:normal;font-weight:600;margin-top:auto}
.ig-big.tools{color:#10261c;background:linear-gradient(135deg,#D3F5E1,#EEF7C9 60%,#FFE9C4)}
.ig-big.games{background:linear-gradient(135deg,#2b1370,#962FBF 55%,#FF3D8B)}
.ig-foot{padding:1.5rem 1.1rem 0;color:var(--mute);font-size:.72rem;text-align:center}
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sheet .card{position:relative;width:100%;background:var(--paper);border-radius:22px 22px 0 0;padding:.7rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom));animation:sheet .3s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet{from{transform:translateY(100%)}}
.grab{display:block;width:2.4rem;height:4px;border-radius:4px;background:var(--line);margin:0 auto .9rem}
.sheet h3{margin:0;font-size:1.5rem;letter-spacing:-.03em}.sheet p{margin:.3rem 0 1.1rem;color:var(--mute)}
.ig-btn{display:block;width:100%;text-align:center;padding:.8rem;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;border:0;font:inherit;font-weight:600;margin-top:.5rem}
.ig-btn.ghost{background:var(--line);color:var(--ink)}
@media (prefers-reduced-motion: reduce){.ig-ring,.ig-ring span,.sheet .card{animation:none}}

/* photo + logos */
.ig-ring span{position:relative;overflow:hidden}
.ig-ring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.tile.has-logo{background:#fff !important;color:#12151C;align-items:center;justify-content:center;gap:.4rem;padding:.7rem}
.tile.has-logo::after{display:none}
.tile.has-logo b{display:none}
.tile.has-logo .logo{width:100%;height:58%;object-fit:contain}
.tile.has-logo span{text-shadow:none;text-align:center;color:#4a4f5c}
#sh-logo{display:block;height:2.6rem;max-width:9rem;object-fit:contain;object-position:left;margin:0 0 .7rem}
#sh-logo[hidden]{display:none}

/* share button + toast */
.ig-top button{background:none;border:0;color:inherit;padding:.2rem;cursor:pointer;display:grid}
.ig-top button:active{transform:scale(.9)}
#ig-toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:999px;font-size:.88rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:70;white-space:nowrap}
#ig-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- animated highlight icons ---- */
.ig-hl i{color:var(--c);border-color:color-mix(in srgb,var(--c) 55%,transparent);background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 22%,var(--paper)),var(--paper) 75%)}
.ic{width:1.75rem;height:1.75rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic .dt,.ic .cl,.ic .bt{fill:currentColor;stroke:none}
.ic *{transform-box:fill-box;transform-origin:center}
/* sites: lines type out */
.ic-site .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s ease-in-out infinite}
.ic-site .l2{animation-delay:.5s}
.ic-site .dt{animation:blink 1.6s ease-in-out infinite}.ic-site .d2{animation-delay:.4s}
@keyframes draw{0%{stroke-dashoffset:1}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes blink{50%{opacity:.25}}
/* projects: layers bob in turn */
.ic-proj .ly{animation:bob 2.2s ease-in-out infinite}.ic-proj .y2{animation-delay:.2s}.ic-proj .y3{animation-delay:.4s}
@keyframes bob{50%{transform:translateY(-2px)}}
/* career: trend line draws, arrow pops */
.ic-career .trend{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.8s ease-in-out infinite}
.ic-career .arrow{animation:pop 2.8s ease-in-out infinite}
@keyframes pop{0%,35%{opacity:0;transform:scale(.6)}50%,85%{opacity:1;transform:scale(1)}100%{opacity:0}}
/* tools: QR cells flicker */
.ic-tools .cl{animation:blink 1.4s ease-in-out infinite}.ic-tools .c2{animation-delay:.3s}.ic-tools .c3{animation-delay:.6s}.ic-tools .c4{animation-delay:.9s}
/* games: pad wobbles, buttons press */
.ic-games{animation:wobble 2.4s ease-in-out infinite}
.ic-games .bt{animation:press 1.2s ease-in-out infinite}.ic-games .b2{animation-delay:.6s}
.ic-games .dp{animation:blink 2.4s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes press{50%{transform:scale(1.7)}}
.ig-hl button:active .ic{animation-duration:.6s}
@media (prefers-reduced-motion: reduce){
  .ic,.ic *{animation:none !important}
  .ic-site .ln,.ic-career .trend{stroke-dashoffset:0}
}

.ig-actions .sq{flex:none;width:2.7rem;padding:0;display:grid;place-items:center}
.ig-actions .sq svg{width:20px;height:20px}

/* centre button labels */
.ig-actions a{display:flex;align-items:center;justify-content:center;min-height:2.7rem;padding:0 .5rem}
#ig-p1 h2{scroll-margin-top:6.5rem}

/* education icon: cap tosses, tassel swings */
.ic-edu .cap{animation:toss 2.6s ease-in-out infinite}
.ic-edu .tas{transform-origin:50% 0;animation:swing 2.6s ease-in-out infinite}
@keyframes toss{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-2.5px) rotate(-6deg)}}
@keyframes swing{0%,100%{transform:rotate(0)}40%{transform:rotate(18deg)}70%{transform:rotate(-10deg)}}