500&display=swap');
#dd-route{color-scheme:light dark;--paper:light-dark(#f4f3f1,#242526);--panel:light-dark(#fff,#303133);--ink:light-dark(#2d2d2d,#f4f3f1);--muted:light-dark(#62605c,#c4c2be);--line:light-dark(#dedbd5,#545556);--track:light-dark(#b6b2a9,#909294);--blue:light-dark(#3171c6,#83b7fa);--orange:light-dark(#f2581c,#ff966f);font:400 14px/1.5 Manrope,system-ui,sans-serif;color:var(--ink);background:var(--paper);padding:24px;border-radius:24px;box-sizing:border-box}
#dd-route *{box-sizing:border-box}#dd-route .sr-brand{font:400 27px/1 Alice,Georgia,serif;color:var(--blue);padding-right:90px;margin-bottom:24px}#dd-route .sr-brand span{color:var(--orange)}#dd-route .sr-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}#dd-route h2{font:400 36px/1.12 Alice,Georgia,serif;letter-spacing:-.02em;margin:8px 0 10px}#dd-route .sr-sub{font-size:13px;color:var(--muted);margin:0}#dd-route .sr-stats{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;margin-top:18px;font-variant-numeric:tabular-nums}
#dd-route .sr-puzzle{position:relative;width:100%;max-width:520px;margin:30px auto 36px;padding:0 76px}#dd-route .sr-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#dd-route .sr-tile{position:relative;display:block;aspect-ratio:1;width:100%;min-height:44px;padding:0;border:0;background:var(--panel);color:var(--track);border-radius:13px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}#dd-route .sr-tile svg{display:block;width:100%;height:100%;transform-origin:center;transition:transform .18s ease}#dd-route .sr-tile path{fill:none;stroke:currentColor;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round}#dd-route .sr-tile.powered{color:var(--blue)}#dd-route .sr-tile.hint{box-shadow:inset 0 0 0 2px var(--orange)}#dd-route .sr-tile:focus-visible{outline:3px solid var(--orange);outline-offset:2px;z-index:2}#dd-route .sr-tile:disabled{cursor:default}
#dd-route .sr-end{position:absolute;width:76px;height:0;font-size:11px;color:var(--muted)}#dd-route .sr-in{left:0;top:calc((100% - 10px)/6)}#dd-route .sr-out{right:0;top:calc(100% - (100% - 10px)/6)}#dd-route .sr-end-label{position:absolute;top:45px;left:0;width:74%;text-align:center;white-space:nowrap}#dd-route .sr-out .sr-end-label{left:auto;right:0}#dd-route .sr-jack{position:absolute;top:-4px;width:28%;height:8px;background:var(--blue);border-radius:3px}#dd-route .sr-in .sr-jack{right:0}#dd-route .sr-out .sr-jack{left:0;background:var(--track)}#dd-route .sr-device{position:absolute;top:-38px;width:72%;height:76px;isolation:isolate}#dd-route .sr-in .sr-device{left:0}#dd-route .sr-out .sr-device{right:0}
#dd-route .sr-mic-capsule{position:absolute;top:3px;left:27%;width:46%;height:40px;border-radius:16px;background:linear-gradient(100deg,light-dark(#ffd49e,#ffcc91),var(--orange));box-shadow:inset -3px 0 0 light-dark(#e44a18,#da5c35);z-index:2}#dd-route .sr-mic-capsule:before{content:'';position:absolute;inset:8px 5px 13px;border-radius:6px;background:repeating-linear-gradient(to bottom,light-dark(#9d451e,#73391d) 0 2px,transparent 2px 5px);opacity:.7}#dd-route .sr-mic-capsule:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;bottom:5px;left:calc(50% - 2.5px);background:light-dark(#fff4db,#fff4db)}#dd-route .sr-mic-cradle{position:absolute;width:68%;height:35px;left:16%;top:19px;border:4px solid var(--blue);border-top:0;border-radius:0 0 20px 20px}#dd-route .sr-mic-stem{position:absolute;width:5px;height:17px;top:51px;left:calc(50% - 2.5px);background:var(--blue)}#dd-route .sr-mic-base{position:absolute;width:66%;height:7px;top:66px;left:17%;border-radius:50%;background:var(--ink)}
#dd-route .sr-wave{position:absolute;display:flex;align-items:center;gap:3px;height:16px;top:-21px;right:2px;transform:rotate(-12deg)}#dd-route .sr-wave b{width:3px;height:6px;border-radius:2px;background:var(--orange)}#dd-route .sr-wave b:nth-child(2){height:14px}#dd-route .sr-wave b:nth-child(3){height:9px}
#dd-route .sr-speaker{position:absolute;inset:0 3px;border-radius:11px;background:linear-gradient(120deg,light-dark(#4990e8,#83b7fa),light-dark(#2459a0,#3979ce));box-shadow:inset -5px -3px 0 light-dark(#234c83,#2c5a94),0 5px 0 light-dark(#d8d6d1,#191b1d)}#dd-route .sr-speaker:before{content:'';position:absolute;left:calc(50% - 8px);top:10px;width:16px;height:16px;background:light-dark(#263444,#233347);border:3px solid light-dark(#7ca3d2,#bdd8fc);border-radius:50%}#dd-route .sr-speaker:after{content:'';position:absolute;left:calc(50% - 17px);top:34px;width:34px;height:34px;background:radial-gradient(circle,var(--orange) 0 6px,light-dark(#27384e,#24354e) 7px 12px,light-dark(#86b0e4,#b6d6ff) 13px 16px,transparent 17px);border-radius:50%}#dd-route .sr-speaker-led{position:absolute;right:10px;top:5px;width:4px;height:4px;background:light-dark(#bac8d9,#bcc4d0);border-radius:50%}#dd-route .sr-out .sr-wave{right:1px;top:-59px;opacity:.2;transform:none}#dd-route .sr-out .sr-wave b{background:var(--blue)}#dd-route.solved .sr-out .sr-wave{opacity:1}#dd-route.solved .sr-out .sr-jack{background:var(--blue)}#dd-route.solved .sr-out .sr-end-label{color:var(--blue)}#dd-route.solved .sr-speaker-led{background:light-dark(#ffdb8c,#ffdb8c);box-shadow:0 0 7px var(--orange)}#dd-route.solved .sr-out .sr-device{animation:sr-speaker-pop .55s ease 2}#dd-route.solved .sr-out .sr-wave b{animation:sr-sound-bounce .35s ease 4 alternate}#dd-route.solved .sr-out .sr-wave b:nth-child(2){animation-delay:.1s}#dd-route.solved .sr-out .sr-wave b:nth-child(3){animation-delay:.2s}@keyframes sr-speaker-pop{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.07) rotate(-4deg)}70%{transform:scale(1.03) rotate(3deg)}}@keyframes sr-sound-bounce{from{transform:scaleY(.45)}to{transform:scaleY(1.3)}}
#dd-route .sr-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}#dd-route .sr-controls button{font:500 13px/1.4 Manrope,system-ui,sans-serif;padding:11px 18px;min-height:44px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);cursor:pointer}#dd-route .sr-controls button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}#dd-route .sr-controls button:disabled{opacity:.4;cursor:default}#dd-route .sr-controls .sr-next{background:var(--blue);color:light-dark(#fff,#192b42);border-color:transparent}
#dd-route .sr-message{font-size:13px;min-height:40px;text-align:center;margin-top:16px;color:var(--muted)}#dd-route.solved .sr-message{color:var(--blue)}#dd-route .sr-footer{font-size:11px;color:var(--muted);text-align:center;border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
@media(max-width:400px){#dd-route{padding:16px}#dd-route h2{font-size:30px}#dd-route .sr-puzzle{padding:0 54px}#dd-route .sr-end{width:54px}#dd-route .sr-tile{border-radius:9px}#dd-route .sr-controls button{padding:10px 12px}#dd-route .sr-speaker:after{left:calc(50% - 13px);width:26px;height:26px;top:37px;background:radial-gradient(circle,var(--orange) 0 4px,light-dark(#27384e,#24354e) 5px 9px,light-dark(#86b0e4,#b6d6ff) 10px 12px,transparent 13px)}#dd-route .sr-wave{gap:2px;right:0}#dd-route .sr-mic-capsule:before{left:4px;right:4px}}@media(prefers-reduced-motion:reduce){#dd-route .sr-tile svg{transition:none}#dd-route.solved .sr-out .sr-device,#dd-route.solved .sr-out .sr-wave b{animation:none}}

#dd-route{font-family:var(--sans,Manrope,system-ui,sans-serif)}
#dd-route h2{font-family:var(--serif,Alice,Georgia,serif)}
#dd-route[hidden],#dd-route [hidden]{display:none!important}
.modal__box.route-enabled{width:min(1100px,100%);display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,1fr);align-items:start}
.route-enabled>.modal__head,.route-enabled>.bar,.route-enabled>.modal__foot{grid-column:1/-1}
.route-enabled>#ad-slot{grid-column:1;min-width:0;width:100%}
.route-enabled>#dd-route{grid-column:2;grid-row:3;min-width:0;padding:16px;background:var(--paper)}
.route-enabled>#dd-route h2{font-size:30px}
#dd-route .route-result{margin-top:10px;width:100%;font:500 14px var(--sans,Manrope,system-ui,sans-serif);padding:12px;border:0;border-radius:12px;background:var(--blue);color:light-dark(#fff,#192b42);min-height:44px;cursor:pointer}
#generation-status+#dd-route{margin:16px 0;max-width:580px}
@media(max-width:780px){.modal__box.route-enabled{display:flex;flex-direction:column}.route-enabled>#dd-route{width:100%}.route-enabled>#ad-slot{width:100%}}