/* Ambient robot wallpaper stays behind the portfolio and never catches clicks. */
.with-mimo { isolation:isolate; }
.live-wallpaper { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; color:var(--accent); background:radial-gradient(ellipse at 85% 20%,#1a594c20,transparent 50%),radial-gradient(ellipse at 5% 80%,#236e8d12,transparent 45%); }
.wallpaper-grid { position:absolute; inset:-80px; background-image:linear-gradient(#62e6bd07 1px,transparent 1px),linear-gradient(90deg,#62e6bd07 1px,transparent 1px); background-size:68px 68px; transform:perspective(900px) rotateX(18deg); mask-image:linear-gradient(transparent,#0009,transparent); animation:grid-drift 24s linear infinite; }
.wallpaper-glow { position:absolute; width:65vw; height:65vw; right:-30vw; top:5%; background:radial-gradient(circle,#62e6bd13,transparent 65%); animation:ambient-drift 16s ease-in-out infinite alternate; }
.wallpaper-robot { position:absolute; width:clamp(200px,25vw,400px); opacity:.085; }
.wallpaper-robot svg { display:block; width:100%; }
.wallpaper-robot-one { top:12%; right:-5%; transform:rotate(-12deg); animation:wallpaper-float 14s ease-in-out infinite; }
.wallpaper-robot-two { bottom:-7%; left:-6%; width:clamp(180px,20vw,300px); opacity:.055; animation:wallpaper-float 18s ease-in-out infinite reverse; }
.wallpaper-orbit { position:absolute; width:75vw; height:75vw; border:1px dashed #62e6bd12; border-radius:50%; right:-30%; top:-20%; animation:ambient-turn 100s linear infinite; }
.wallpaper-spark { position:absolute; width:3px; height:3px; border-radius:50%; background:var(--accent); opacity:.12; box-shadow:0 0 10px #62e6bd77; animation:spark-float 7s ease-in-out infinite; animation-delay:calc(var(--n)*-.65s); }
.with-mimo header { background:#0b1115c9; }
.mimo-stage { height:530px; background:radial-gradient(ellipse at 60% 55%,#22665430,transparent 70%); }
.mimo-stage .portrait { position:absolute; width:195px; height:258px; left:12px; top:135px; border-radius:90px 90px 14px 14px; transform:rotate(-4deg); }
.mimo-stage .portrait img { filter:saturate(.7); }
.mimo-stage .portrait-label { font-size:5px; letter-spacing:.7px; }
.mimo-stage .label-top { left:8px; right:auto; top:96px; padding:8px 12px; transform:rotate(-4deg); z-index:1; }
.mimo-stage .label-bottom { left:18px; bottom:88px; padding:8px 12px; font-size:9px; }
.mimo-stage .coordinate { bottom:13px; }
.mimo-stage .orbit-one { animation:ambient-turn 70s linear infinite; opacity:.7; }
.mimo-station { position:absolute; width:240px; height:430px; right:0; top:42px; }
.mimo-intro { font:7px monospace; letter-spacing:1px; color:#a0bcb0; display:flex; align-items:center; justify-content:center; gap:7px; }
.mimo-bubble { position:absolute; top:36px; right:0; width:229px; min-height:76px; padding:14px 16px; background:linear-gradient(135deg,#233f37,#152b29); border:1px solid #5c9f83; border-radius:15px 15px 15px 3px; box-shadow:0 14px 35px #0003; color:#d9f7e9; font-size:13px; font-weight:600; line-height:1.5; z-index:4; }
.mimo-bubble::after { content:''; position:absolute; bottom:-7px; right:75px; width:12px; height:12px; background:#192f2c; border-right:1px solid #5c9f83; border-bottom:1px solid #5c9f83; transform:rotate(45deg); }
.mimo-bubble>span { display:block; font-size:9px; font-weight:400; color:#a1c2b4; margin-top:5px; }
.mimo-puppet { position:absolute; width:216px; height:265px; top:133px; left:12px; transform-origin:50% 85%; animation:mimo-hover 4s ease-in-out infinite; filter:drop-shadow(0 12px 14px #0004); }
.mimo-touch { padding:0; appearance:none; -webkit-tap-highlight-color:transparent; cursor:pointer; touch-action:manipulation; color:inherit; }
.mimo-touch:focus-visible { outline:3px solid #f8d67f; outline-offset:5px; }
.mimo-head { position:absolute; width:144px; height:103px; left:36px; top:25px; border:3px solid #bdd8d2; border-radius:39px 39px 34px 34px; background:linear-gradient(145deg,#f1fff8 0%,#b9d7ce 40%,#6d9e91 100%); box-shadow:inset 0 3px 2px #fff9,inset -5px -6px 10px #1c5d4c55,0 7px 0 #365e54; z-index:3; transform-origin:50% 80%; }
.mimo-face { position:absolute; inset:12px 10px 14px; background:radial-gradient(ellipse at 50% 90%,#174a40,#0a1c21 80%); border:3px solid #537f72; border-radius:27px; overflow:hidden; box-shadow:inset 0 3px 6px #0008; }
.mimo-face::before { content:''; position:absolute; top:4px; left:12px; width:60px; height:10px; background:linear-gradient(#ffffff16,transparent); border-radius:50%; transform:rotate(-12deg); }
.mimo-eyes { position:absolute; left:22px; right:22px; top:18px; height:26px; display:flex; justify-content:space-between; transition:transform .12s ease-out; }
.mimo-eye { width:13px; height:24px; border-radius:9px; background:var(--accent); box-shadow:0 0 15px #62e6bd66; animation:mimo-blink 5s infinite; }
.mimo-mouth { position:absolute; width:18px; height:10px; border:2px solid var(--accent); border-top:0; border-radius:0 0 12px 12px; left:calc(50% - 9px); bottom:9px; }
.mimo-cheek { position:absolute; top:41px; width:12px; height:4px; border-radius:50%; background:#f3a5a36b; }
.cheek-left { left:12px; }.cheek-right { right:12px; }
.mimo-ear { position:absolute; width:10px; height:31px; background:#88b9aa; top:36px; border:2px solid #c2ded0; border-radius:6px; }.ear-left { left:-11px; }.ear-right { right:-11px; }
.mimo-antenna { position:absolute; top:6px; left:105px; height:26px; width:6px; background:linear-gradient(90deg,#759e8b,#d1e7d7); border-radius:4px; }
.mimo-antenna i { position:absolute; top:-8px; left:-5px; width:16px; height:16px; background:var(--accent); border:3px solid #c9f1df; border-radius:50%; box-shadow:0 0 20px #62e6bd66; }
.mimo-neck { position:absolute; width:32px; height:20px; top:127px; left:92px; background:repeating-linear-gradient(#517f6f 0 3px,#9dbfae 3px 6px); }
.mimo-torso { position:absolute; top:142px; left:61px; width:94px; height:83px; border:2px solid #b3d2c3; border-radius:27px 27px 35px 35px; background:linear-gradient(135deg,#e0f2e8,#789e8b); box-shadow:inset -5px -7px 8px #285a4a33; z-index:2; display:flex; flex-direction:column; align-items:center; }
.mimo-heart { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; margin-top:10px; background:#163a30; border:2px solid #84b49c; font-size:23px; line-height:1; color:var(--accent); }
.mimo-name { font:8px monospace; letter-spacing:2px; margin-top:4px; color:#274f3c; }.mimo-vents { font:8px monospace; letter-spacing:2px; color:#4a735f; }
.mimo-hand { position:absolute; width:44px; height:75px; top:145px; border:0; background:transparent; transform-origin:50% 10%; z-index:4; }
.mimo-hand span { display:block; position:absolute; inset:3px 8px 0; background:linear-gradient(100deg,#d3ebe0,#80ac96); border:2px solid #b6d4c2; border-radius:15px 15px 18px 18px; box-shadow:inset -3px -5px 4px #27594233; }
.mimo-hand span::after { content:''; position:absolute; width:17px; height:1px; background:#527c65; left:3px; bottom:15px; box-shadow:0 4px #527c6555; }
.hand-left { left:17px; transform:rotate(13deg); animation:mimo-wave 6s ease-in-out infinite; }.hand-right { right:17px; transform:rotate(-13deg); }
.mimo-foot { position:absolute; top:219px; width:39px; height:31px; border:2px solid #b8d5c2; border-radius:10px 10px 14px 14px; background:linear-gradient(#90b5a0,#d1e2d5); box-shadow:0 5px 0 #315849; }.foot-left { left:62px; transform:rotate(8deg); }.foot-right { right:62px; transform:rotate(-8deg); }
.mimo-platform { position:absolute; width:198px; height:40px; left:20px; bottom:28px; border:1px solid #62e6bd55; border-radius:50%; background:radial-gradient(ellipse,#62e6bd25,transparent 70%); box-shadow:0 0 0 9px #62e6bd05,0 0 0 19px #62e6bd04; }
.mimo-hint { position:absolute; bottom:-5px; width:100%; text-align:center; color:#8faf9f; font:8px monospace; }
.mimo-controls { position:absolute; bottom:40px; left:18px; right:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.mimo-controls>span { font:7px monospace; letter-spacing:1px; color:#7f9b8d; }.motion-toggle { border:1px solid #3c5e50; background:#13241e; color:#b9d8c7; border-radius:20px; padding:6px 11px; font:9px monospace; }
.mimo-tear { display:none; position:absolute; top:37px; width:7px; height:14px; border-radius:0 70% 70% 70%; background:#7bd4ff; box-shadow:0 0 7px #57cbff77; }.tear-left { left:25px; }.tear-right { right:25px; }
.mimo-dizzy-stars { display:none; position:absolute; width:100%; text-align:center; top:-12px; color:#f4d57f; letter-spacing:16px; font-size:20px; }.mimo-dizzy-stars span { font-size:14px; }
/* Each reaction has a fixed ending; rapid taps restart instead of stacking timers. */
.mimo-puppet[data-mood=please] { animation:mimo-nervous .32s ease-in-out 8; }
[data-mood=please] .mimo-head { animation:mimo-no .35s ease-in-out 7; }
[data-mood=please] .hand-left { animation:mimo-hand-no .4s ease-in-out 7; }
[data-mood=please] .hand-right { animation:mimo-hand-no .4s ease-in-out 7 reverse; }
[data-mood=please] .mimo-mouth { height:8px; border-top:2px solid var(--accent); border-radius:50%; }
.mimo-puppet[data-mood=dizzy] { animation:mimo-tumble 3.2s ease-in-out both; }
[data-mood=dizzy] .mimo-head { animation:mimo-head-spin 1.2s ease-in-out; }
[data-mood=dizzy] .mimo-dizzy-stars { display:block; animation:mimo-no .5s ease-in-out infinite; }
[data-mood=dizzy] .mimo-eye { background:transparent; border:3px dotted var(--accent); border-radius:50%; width:21px; height:21px; animation:ambient-turn .6s linear infinite; }
[data-mood=dizzy] .hand-left { animation:none; transform:rotate(65deg); }[data-mood=dizzy] .hand-right { transform:rotate(-65deg); }
[data-mood=dizzy] .mimo-mouth { width:12px; left:calc(50% - 6px); height:12px; border:2px solid var(--accent); border-radius:50%; }
.mimo-puppet[data-mood=cry] { animation:mimo-sob .38s ease-in-out infinite; }
[data-mood=cry] .mimo-tear { display:block; animation:mimo-teardrop .7s linear infinite; }[data-mood=cry] .tear-right { animation-delay:.3s; }
[data-mood=cry] .mimo-eye { height:10px; margin-top:9px; border-radius:50% 50% 3px 3px; transform:rotate(-14deg); animation:none; }[data-mood=cry] .mimo-eye:last-child { transform:rotate(14deg); }
[data-mood=cry] .mimo-mouth { border:2px solid var(--accent); border-bottom:0; border-radius:12px 12px 0 0; }
[data-mood=cry] .hand-left { animation:none; transform:rotate(-25deg); }[data-mood=cry] .hand-right { transform:rotate(25deg); }
[data-mood=cry] .mimo-heart { color:#ffb7bc; }
@keyframes mimo-hover { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)} }
@keyframes mimo-blink { 0%,43%,48%,100%{transform:scaleY(1)}45%,46%{transform:scaleY(.12)} }
@keyframes mimo-wave { 0%,65%,100%{transform:rotate(13deg)}72%,84%{transform:rotate(65deg)}78%,90%{transform:rotate(35deg)} }
@keyframes mimo-nervous { 0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)} }
@keyframes mimo-no { 0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)} }
@keyframes mimo-hand-no { 0%,100%{transform:rotate(50deg)}50%{transform:rotate(95deg)} }
@keyframes mimo-head-spin { 0%{transform:rotate(0)}80%,100%{transform:rotate(720deg)} }
@keyframes mimo-tumble { 0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(12deg)}47%{transform:translateY(12px) rotate(-22deg)}60%,72%{transform:translateY(29px) rotate(72deg) scale(.85)}85%{transform:translateY(-8px) rotate(-8deg)}100%{transform:translateY(0) rotate(0)} }
@keyframes mimo-sob { 0%,100%{transform:translateY(4px) rotate(-3deg)}50%{transform:translateY(0) rotate(3deg)} }
@keyframes mimo-teardrop { from{transform:translateY(0);opacity:1}to{transform:translateY(26px);opacity:0} }
@keyframes grid-drift { from{translate:0 0}to{translate:0 68px} }
@keyframes ambient-drift { to{transform:translate(-15%,25%) scale(1.2)} }
@keyframes ambient-turn { to{transform:rotate(360deg)} }
@keyframes wallpaper-float { 0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-30px) rotate(-5deg)} }
@keyframes spark-float { 0%,100%{transform:translateY(0);opacity:.08}50%{transform:translateY(-22px);opacity:.35} }
.motion-paused .live-wallpaper *, .motion-paused .mimo-stage *, .mimo-tab-hidden .live-wallpaper *, .mimo-tab-hidden .mimo-stage * { animation-play-state:paused!important; }
@media(min-width:721px) and (max-width:1100px) { .mimo-stage .portrait{width:155px;height:218px;left:0;top:151px}.mimo-station{right:-12px;transform:scale(.86);transform-origin:right center}.mimo-stage .label-top{left:0;max-width:150px}.mimo-stage .label-bottom{left:0;max-width:150px}.mimo-stage .label-bottom small{font-size:5px} }
@media(max-width:720px) { .mimo-stage{height:530px;max-width:460px}.mimo-stage .portrait{width:175px;height:240px;left:5px;top:140px}.mimo-station{right:-4px;transform:scale(.93);transform-origin:right center}.mimo-stage .label-top{top:100px;left:0}.mimo-stage .label-bottom{left:5px;bottom:95px;max-width:175px}.mimo-controls{left:5px;right:5px} }
@media(max-width:400px) { .mimo-stage .portrait{width:142px;height:212px;top:151px;left:0}.mimo-station{right:-8px;transform:scale(.82)}.mimo-stage .label-top{max-width:140px;font-size:8px}.mimo-stage .label-top small{font-size:6px}.mimo-stage .label-bottom{max-width:135px;font-size:8px;bottom:107px;padding:7px}.mimo-stage .label-bottom small{font-size:5px}.mimo-stage .portrait-label{font-size:4px;left:7px;gap:4px}.mimo-controls>span{font-size:6px;letter-spacing:.5px} }
@media(prefers-reduced-motion:reduce) { .live-wallpaper *, .mimo-stage *{animation:none!important;transition:none!important}.wallpaper-spark{opacity:.15} }
/* Leave breathing room around the speech bubble and motion control. */
.mimo-hint { bottom:14px; }
@media(max-width:720px) { .mimo-station { right:0; } }

/* Brighter holographic robots and slow-moving signals in the wallpaper. */
.wallpaper-robot { opacity:.25; filter:drop-shadow(0 0 9px #62e6bd65); }
.wallpaper-robot svg { fill:#62e6bd07; }
.wallpaper-robot-one { right:-3%; animation:wallpaper-float 11s ease-in-out infinite; }
.wallpaper-robot-two { opacity:.18; left:-4%; color:#80d8ee; animation-duration:15s; }
.wallpaper-eye { fill:currentColor; transform-box:fill-box; transform-origin:center; animation:wallpaper-blink 7s ease-in-out infinite; }
.wallpaper-core { fill:#62e6bd20; transform-box:fill-box; transform-origin:center; animation:core-breathe 4s ease-in-out infinite; }
.wallpaper-arm { transform-box:fill-box; transform-origin:50% 5%; }
.wallpaper-arm.arm-a { animation:wallpaper-wave 9s ease-in-out infinite; }
.wallpaper-arm.arm-b { animation:wallpaper-wave 12s ease-in-out infinite reverse; }
.wallpaper-glow { background:radial-gradient(circle,#62e6bd23,transparent 65%); }
.wallpaper-grid { opacity:.8; background-image:linear-gradient(#62e6bd0b 1px,transparent 1px),linear-gradient(90deg,#62e6bd0b 1px,transparent 1px); }
.wallpaper-orbit { border-color:#62e6bd26; animation-duration:65s; }
.wallpaper-radar { position:absolute; right:-10%; top:10%; width:48vw; height:48vw; min-width:260px; min-height:260px; }
.wallpaper-radar i { position:absolute; inset:0; border:1px solid #62e6bd50; border-radius:50%; opacity:0; animation:radar-expand 10s ease-out infinite; }
.wallpaper-radar i:nth-child(2) { animation-delay:-3.3s; }
.wallpaper-radar i:nth-child(3) { animation-delay:-6.6s; }
.wallpaper-circuits { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.22; }
.wallpaper-circuits path { stroke-dasharray:12 36 3 140; animation:signal-travel 16s linear infinite; }
.wallpaper-circuits path:nth-child(even) { animation-direction:reverse; animation-duration:22s; }
.wallpaper-comet { position:absolute; width:70px; height:1px; background:linear-gradient(90deg,transparent,#62e6bd88); border-radius:50%; opacity:0; animation:comet-travel 12s linear infinite; animation-delay:calc(var(--n)*-2s); }
.wallpaper-spark { width:4px; height:4px; box-shadow:0 0 12px #62e6bd99; animation-name:signal-spark; animation-duration:9s; }
/* Keep copy backed by a dark surface while the margin artwork stays luminous. */
.with-mimo .skill-card { background:#0c161bd9; }
@keyframes wallpaper-blink { 0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.15)} }
@keyframes core-breathe { 0%,100%{transform:scale(.93);opacity:.55}50%{transform:scale(1.08);opacity:1} }
@keyframes wallpaper-wave { 0%,45%,100%{rotate:0deg}58%,78%{rotate:24deg}68%,88%{rotate:8deg} }
@keyframes radar-expand { 0%{transform:scale(.4);opacity:0}20%{opacity:.35}100%{transform:scale(1.3);opacity:0} }
@keyframes signal-travel { to{stroke-dashoffset:-764} }
@keyframes comet-travel { 0%{transform:translate(-60px,50px) rotate(-35deg);opacity:0}12%,55%{opacity:.45}80%,100%{transform:translate(190px,-125px) rotate(-35deg);opacity:0} }
@keyframes signal-spark { 0%,100%{transform:translate(0,0) scale(.7);opacity:.14}50%{transform:translate(12px,-38px) scale(1);opacity:.55} }
@media(max-width:720px) {
  .wallpaper-robot-one { opacity:.21; right:-14%; width:250px; }
  .wallpaper-robot-two { opacity:.15; left:-14%; width:220px; }
  .wallpaper-circuits { opacity:.12; }
  .wallpaper-comet { width:45px; }
}
@media(prefers-reduced-motion:reduce) {
  .wallpaper-radar i { opacity:.12; }
  .wallpaper-radar i:nth-child(2) { transform:scale(.7); }
  .wallpaper-radar i:nth-child(3) { transform:scale(.45); }
  .wallpaper-comet { display:none; }
}