@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');

:root { --ink:#10283c; --navy:#183c54; --blue:#3a8db3; --sky:#66cce0; --yellow:#ffd45d; --orange:#f49a39; --cream:#fff8e6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Nunito, sans-serif; background:radial-gradient(circle at 50% 40%, #fffdf5 0 13%, transparent 35%), linear-gradient(135deg,#c8eff0,#6fc7d5); overflow-x:hidden; }
body:before,body:after { content:""; position:fixed; border-radius:50%; opacity:.23; pointer-events:none; }
body:before { width:340px;height:340px; background:#fff2a9; top:-115px;left:-90px; } body:after { width:440px;height:440px;background:#16779f; bottom:-250px;right:-140px; }
.game-shell { width:min(700px,100%); margin:auto; min-height:100vh; padding:24px 24px 30px; display:flex; flex-direction:column; align-items:center; position:relative; }
header { width:100%;display:flex;justify-content:space-between;align-items:center;z-index:1; }.header-actions{display:flex;align-items:center;gap:9px}
.brand { font-family:"Baloo 2",sans-serif;font-size:26px;font-weight:800;letter-spacing:-1px;display:flex;gap:7px;align-items:center; }.brand > span:last-child span {color:#ed8b36}.brand-mark { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--ink);color:#ffe47c;font-size:22px;transform:rotate(-8deg) }
.level-pill { background:#fff8df;border:2px solid #fff;border-radius:999px;padding:7px 14px;box-shadow:0 3px 0 #4c9cac;font-size:14px; }.level-pill strong { color:#d97725;font-size:17px; }
.fullscreen-button{width:39px;height:39px;border:2px solid #fff;border-radius:12px;background:#fff8df;color:#17435e;font:800 25px/1 Arial;cursor:pointer;box-shadow:0 3px 0 #4c9cac}.fullscreen-button:active{transform:translateY(2px);box-shadow:0 1px 0 #4c9cac}
.mission{text-align:center;margin:28px auto 8px;z-index:1}.eyebrow { font-size:12px;letter-spacing:2px;font-weight:800;color:#247393;margin:0 0 5px; }.mission h1 { font:800 clamp(27px,6vw,40px)/.98 "Baloo 2",sans-serif;letter-spacing:-1.5px;margin:0; }.mission p:not(.eyebrow){margin:9px 0;color:#31596c;font-size:16px;font-weight:700}
.safe-area{height:595px;width:100%;display:grid;place-items:center;position:relative;z-index:1}.safe-shadow{position:absolute;width:330px;height:50px;background:#172a31;opacity:.22;filter:blur(4px);border-radius:50%;bottom:20px}.safe { width:min(340px,88vw);aspect-ratio:9/16;background:linear-gradient(110deg,#727770 0 13%,#c1c1b3 14% 66%,#8c908a 100%);border:9px solid #171819;border-radius:8px;position:relative;box-shadow:inset 7px 7px #eff0e5,inset -11px -11px #6e746e,0 15px 0 #4c514e,0 25px 28px #1b252955;transform:perspective(1000px) rotateY(-3deg); }.alarm-lamp{position:absolute;z-index:4;top:3px;left:50%;margin-left:-28px;width:56px;height:30px;border:6px solid #292929;border-bottom:0;border-radius:30px 30px 4px 4px;background:#751b19;box-shadow:inset 0 5px #c84b3f,0 4px #444;transition:background .1s,box-shadow .1s}.alarm-lamp i{display:block;width:13px;height:5px;background:#292929;position:absolute;bottom:-10px;left:15px;border-radius:2px}.alert .alarm-lamp{background:#ff3d31;box-shadow:0 0 13px 7px #ff4e3988,inset 0 5px #ffd0c8,0 4px #444;animation:alarmFlash .28s steps(2) 7}@keyframes alarmFlash{50%{background:#7b1816;box-shadow:inset 0 5px #c84b3f,0 4px #444}}
.safe:before{content:"";position:absolute;width:42px;left:-43px;top:0;bottom:0;background:linear-gradient(90deg,#5f635f,#a6a79c);border:8px solid #171819;border-right:0;clip-path:polygon(0 0,100% 10%,100% 93%,0 100%);z-index:0}.safe-door{position:absolute;inset:30px 26px 30px 63px;background:linear-gradient(135deg,#d7d7c9 0 38%,#b6b5a8 39% 58%,#d6d5c9 59%);border:8px solid #171819;box-shadow:inset 0 0 0 3px #6c6f68,5px 7px #73776f;z-index:2;transform-origin:left center;transition:transform 1.25s cubic-bezier(.2,.8,.25,1),filter .6s;display:flex;flex-direction:column;align-items:center}.safe-rivets i{position:absolute;background:#d6d6c4;width:18px;height:18px;border:3px solid #1d1d1c;border-radius:50%;z-index:1}.safe-rivets i:nth-child(1){left:18px;top:29px}.safe-rivets i:nth-child(2){right:20px;top:27px}.safe-rivets i:nth-child(3){left:18px;bottom:29px}.safe-rivets i:nth-child(4){right:20px;bottom:27px}
.safe-label{font:800 13px/12px "Baloo 2";color:#26343a;letter-spacing:2px;text-align:center;margin-top:21px;text-shadow:1px 1px #eef0df}.safe-label span{color:#8d5929;font-size:19px}.combination-progress{font:800 10px Nunito;color:#7e5425;letter-spacing:1.2px;margin-top:6px}.display{width:245px;height:85px;background:#fff7d7;border:6px solid #202423;border-radius:4px;margin-top:9px;box-shadow:inset 0 0 0 3px #d3be7d,0 3px #73766d;padding:6px 13px}.display-top{display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:1px;color:#806222}.notes{height:49px;display:flex;align-items:center;justify-content:center;gap:10px}.note{position:relative;display:inline-block;width:22px;height:36px}.note .head{position:absolute;bottom:1px;left:1px;width:18px;height:13px;border-radius:50%;background:#1b2429;transform:rotate(-18deg)}.note .stem{position:absolute;width:4px;height:28px;background:#1b2429;left:16px;bottom:10px;border-radius:2px}.note.eighth .flag{position:absolute;width:15px;height:14px;border:4px solid #1b2429;border-left:0;border-bottom:0;border-radius:0 13px 0 0;left:18px;top:0}.pair{display:flex;position:relative;gap:0;width:44px}.pair:after{content:"";position:absolute;top:1px;left:18px;width:27px;height:6px;background:#1b2429;border-radius:3px}.pair .note.eighth .flag{display:none}
.rest{display:block;width:27px;height:39px;color:#1b2429;transform:translateY(-1px)}
.dial-wrap{display:flex;align-items:center;gap:13px;margin-top:19px}.dial {cursor:pointer;border:10px solid #181a1a;width:140px;height:140px;border-radius:50%;background:repeating-conic-gradient(#d5d5c6 0deg 7deg,#858780 7deg 12deg);box-shadow:0 6px #535650,inset 0 0 0 11px #a8aaa0;position:relative;transition:transform .22s}.dial:hover{filter:brightness(1.07)}.dial:active{transform:rotate(25deg) scale(.96)}.dial:before,.dial:after{content:"";position:absolute;background:#2b2c2a;border-radius:5px;inset:0;margin:auto}.dial:before{width:98px;height:11px}.dial:after{width:11px;height:98px}.dial span{width:31px;height:31px;border-radius:50%;position:absolute;inset:0;margin:auto;background:#60635d;border:5px solid #1b1d1c;box-shadow:inset 3px 3px #bfc0b3;z-index:1}.dial-arrow{border:0;background:#fbd369;color:#123b55;border-radius:50%;width:38px;height:38px;font:bold 34px/25px Arial;cursor:pointer;box-shadow:0 4px #cc822d}.dial-arrow:active{transform:translateY(2px);box-shadow:0 1px #cc822d}.dial-hint{margin:8px 0 0;color:#263c40;font-size:11px;font-weight:800;letter-spacing:1px}.unlocked .safe-door{transform:perspective(700px)rotateY(-105deg);filter:brightness(.75)}
.controls{z-index:1;width:min(520px,100%);display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.controls button,.level-question button{border:0;border-radius:16px;padding:14px 18px;font:800 16px Nunito;cursor:pointer;box-shadow:0 5px 0 #154e6a;transition:transform .15s,box-shadow .15s}.controls button:active,.level-question button:active{transform:translateY(4px);box-shadow:0 1px 0 #154e6a}.listen-button{background:#fff8dd;color:#17435e}.speaker{font-size:22px;vertical-align:-2px;color:#ed9133}.check-button,.level-question button{background:#f59a3b;color:#fff}.restart-button{background:#d7ebed;color:#17435e}.check-button kbd{background:#d57525;margin-left:8px;border-radius:6px;padding:2px 6px;font:700 13px Nunito}.feedback{min-height:24px;text-align:center;font-weight:800;color:#1f5d75;margin:17px 0 0;z-index:1}.success{color:#16713b}.wrong{color:#b74935}.unlocked .safe{animation:open .8s ease forwards}.unlocked .display{background:#fff7a9}@keyframes open{50%{transform:rotate(-2deg) scale(1.03)}100%{transform:translateY(-12px)}}.level-question{z-index:3;background:#fff8df;border:3px solid #fff;border-radius:22px;padding:17px 20px 20px;text-align:center;box-shadow:0 7px 0 #438da2;max-width:340px;margin-top:8px}.level-question h2{font:800 26px/1 "Baloo 2";margin:2px 0 7px}.level-question p:not(.eyebrow){font-weight:700;margin:0 0 14px;color:#31596c}.level-question .secondary{background:#d7ebed;color:#17435e;margin-left:7px}
@media(max-width:450px){.game-shell{padding:18px 14px}.mission{margin-top:22px}.safe-area{height:540px}.safe{width:min(320px,87vw)}.safe-door{inset:25px 20px 25px 51px}.display{width:min(225px,66vw)}.dial{width:126px;height:126px}.dial:before{width:86px}.dial:after{height:86px}.controls button{font-size:15px;padding:13px 14px}}
.safe-door{transform:rotateY(0)}.combination-slots{display:flex;gap:7px;margin-top:5px;height:19px}.combination-slots span{width:13px;height:11px;background:#46504e;border:2px solid #222;border-radius:2px;position:relative}.combination-slots span:before{content:"";position:absolute;width:7px;height:8px;border:2px solid #222;border-bottom:0;border-radius:8px 8px 0 0;left:1px;top:-9px}.combination-slots span.done{background:#72b95a}.combination-slots span.current{background:#f3b343;box-shadow:0 0 0 3px #f7df8a}.door-lock{position:absolute;right:13px;bottom:13px;width:20px;height:26px;background:#252727;border-radius:2px}.door-lock:before{content:"";position:absolute;width:10px;height:10px;border:4px solid #252727;border-bottom:0;border-radius:12px 12px 0 0;left:1px;top:-12px}.door-lock:after{content:"";position:absolute;width:5px;height:9px;background:#d7d7c9;left:7px;top:8px;border-radius:3px}.level-question img{width:100%;border-radius:13px;border:3px solid #f4c45a;display:block;margin-bottom:10px}.alert:after{content:"";position:fixed;z-index:20;inset:0;border:12px solid #ff3028;box-shadow:inset 0 0 34px 7px #ff302888;pointer-events:none;animation:borderAlarm .28s steps(2) 7}@keyframes borderAlarm{50%{opacity:.1}}
.safe:before{display:none}.safe-door{inset:27px 25px 27px 25px;padding-top:48px}.safe-check{border:4px solid #183e33;border-radius:999px;background:linear-gradient(#72cd69,#318b49);color:#fff;box-shadow:0 4px 0 #1d6134,inset 0 2px #b9f4a5;min-width:111px;min-height:42px;margin-top:8px;padding:5px 14px;font:800 16px Nunito;letter-spacing:.3px;cursor:pointer}.safe-check:active{transform:translateY(3px);box-shadow:0 1px 0 #1d6134,inset 0 2px #b9f4a5}.safe-check span{font-size:21px;vertical-align:-1px;margin-right:3px}.door-lock{display:none}.listen-stethoscope{position:absolute;z-index:5;left:calc(50% - 220px);bottom:95px;width:118px;height:48px;border:0;border-radius:15px;background:#fff8dd;color:#17435e;box-shadow:0 4px 0 #397a91;cursor:pointer;padding:7px 11px;display:flex;align-items:center;justify-content:center;gap:5px}.listen-stethoscope:active{transform:translateY(3px);box-shadow:0 1px 0 #397a91}.listen-stethoscope svg{width:28px;height:28px;fill:none;stroke:#ed9133;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.listen-stethoscope span{font:800 15px Nunito;letter-spacing:.2px}
.safe-interior{position:absolute;z-index:1;top:122px;left:75px;width:218px;height:145px;background:#fff7d7;border:6px solid #151919;border-radius:7px;overflow:hidden;opacity:0;box-shadow:4px 6px 0 #182527}.safe-interior h3{position:absolute;z-index:1;left:0;right:0;bottom:0;height:29px;margin:0;display:grid;place-items:center;background:#f2ae42;color:#213337;font:800 19px/1 "Baloo 2";text-shadow:1px 1px #fff0b2}.safe-interior img{width:100%;height:100%;object-fit:cover;display:block}.unlocked .safe-interior{opacity:1;animation:prizeFly 1.25s .52s cubic-bezier(.15,.8,.25,1) both}@keyframes prizeFly{0%{opacity:0;transform:scale(.15) translateY(50px)}55%{opacity:1;transform:scale(1.05) translateY(-55px)}100%{opacity:1;transform:scale(.88) translate(72px,-110px) rotate(5deg)}}
@media(max-width:430px){body{background:radial-gradient(circle at 50% 25%,#fffdf5 0 10%,transparent 28%),linear-gradient(145deg,#c8eff0,#6fc7d5)}.game-shell{padding:16px 13px 26px}.brand{font-size:23px}.level-pill{padding:6px 11px}.mission{margin:19px auto 3px}.mission h1{font-size:28px;letter-spacing:-1px}.mission p:not(.eyebrow){font-size:14px;margin:7px 5px}.safe-area{height:512px}.safe{width:min(294px,84vw)}.alarm-lamp{top:-4px;transform:scale(.9)}.safe-door{inset:25px 18px 25px 48px}.safe-label{margin-top:14px;font-size:12px}.combination-progress{margin-top:4px}.combination-slots{margin-top:3px}.display{width:min(214px,65vw);height:76px;margin-top:7px}.notes{gap:8px}.dial-wrap{gap:9px;margin-top:13px}.dial{width:112px;height:112px;border-width:8px}.dial:before{width:77px;height:9px}.dial:after{height:77px;width:9px}.dial-arrow{width:38px;height:38px}.dial-hint{margin-top:6px}.safe-interior{top:104px;left:58px;width:min(192px,58vw);height:128px}.safe-interior h3{height:26px;font-size:17px}.unlocked .safe-interior{animation-name:prizeFlyMobile}.controls{gap:9px;width:100%;padding:0 2px}.controls button{min-height:48px;padding:12px 14px;font-size:15px}.listen-button{flex:1 1 100%}.check-button,.restart-button{flex:1 1 calc(50% - 5px)}.feedback{margin-top:13px;font-size:14px}.level-question{width:min(340px,100%);padding:14px 14px 18px}.level-question h2{font-size:24px}.level-question button{margin-top:4px;min-height:47px;font-size:15px}.level-question .secondary{margin-left:3px}@keyframes prizeFlyMobile{0%{opacity:0;transform:scale(.15) translateY(50px)}55%{opacity:1;transform:scale(1.03) translateY(-35px)}100%{opacity:1;transform:scale(.8) translate(44px,-70px) rotate(4deg)}}}
@media(max-width:430px){.safe-door{inset:22px 18px;padding-top:34px}.safe-check{min-height:38px;margin-top:5px;font-size:14px}.safe-check span{font-size:18px}.restart-button{flex:1 1 100%}}
@media(max-width:430px){.listen-stethoscope{left:5px;bottom:96px;width:102px;height:43px;border-radius:14px;padding:6px 8px}.listen-stethoscope svg{width:24px;height:24px}.listen-stethoscope span{font-size:14px}}
.safe-door{padding-top:24px}

/* Tresor-Optik nach der Safe-Referenz */
.troll-intro{position:fixed;z-index:100;inset:0;display:grid;place-items:center;overflow:hidden;background:#143e5a;transition:opacity .8s ease,visibility .8s}.troll-intro video{width:100%;height:100%;object-fit:cover}.troll-intro:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#071c2bcc 0%,transparent 48%,#071c2b66 100%);pointer-events:none}.troll-intro-action{position:absolute;z-index:2;bottom:9vh;width:min(500px,88vw);padding:21px 25px 24px;border:2px solid #ffffff80;border-radius:23px;background:#102f46bd;box-shadow:0 10px 35px #061a28aa;color:#fff;text-align:center}.troll-intro-action .eyebrow{color:#ffe38c}.troll-intro-action h1{margin:3px 0 14px;font:800 clamp(28px,5vw,42px)/1 "Baloo 2",sans-serif}.troll-intro-action button{border:3px solid #fff4bd;border-radius:16px;padding:13px 23px;background:linear-gradient(#ffd968,#e29331);box-shadow:0 5px #9a5b26;color:#17394d;font:800 18px Nunito;cursor:pointer}.troll-intro-action button span{margin-left:8px}.skip-intro{position:absolute;z-index:3;right:22px;top:22px;border:1px solid #ffffff80;border-radius:999px;padding:9px 13px;background:#082337a8;color:#fff;font:800 14px Nunito;cursor:pointer}.troll-intro.is-playing .troll-intro-action{opacity:0;transform:translateY(15px);pointer-events:none}.troll-intro.is-finished{opacity:0;visibility:hidden;pointer-events:none}@media(max-width:520px){.troll-intro-action{bottom:6vh;padding:17px 18px 20px}.troll-intro-action h1{font-size:29px}.skip-intro{top:12px;right:12px;font-size:12px}}
.reference-safe-mode{isolation:isolate}.reference-safe-mode:before{content:"";position:absolute;z-index:-1;inset:0;background:url("assets/bilder/rhythmussafe-3d.png") center / auto 100% no-repeat}.reference-safe-mode .safe-shadow,.reference-safe-mode .alarm-lamp,.reference-safe-mode .safe-interior,.reference-safe-mode .safe-rivets{display:none!important}.reference-safe-mode .safe{width:354px!important;height:564px!important;aspect-ratio:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;pointer-events:none}.reference-safe-mode .safe:after{display:none!important}.reference-safe-mode .safe-door{inset:0!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;pointer-events:none}.reference-safe-mode .combination-slots{display:none!important}.reference-safe-mode .display{position:absolute!important;top:111px!important;left:53px!important;width:248px!important;height:85px!important;margin:0!important;border:0!important;border-radius:2px!important;background:linear-gradient(135deg,#fffbe9,#fff4ca)!important;box-shadow:none!important;padding:8px 14px!important;pointer-events:none}.reference-safe-mode .display-top{font-size:12px!important}.reference-safe-mode .notes{height:55px!important;gap:11px!important}.reference-safe-mode .note,.reference-safe-mode .pair,.reference-safe-mode .rest{transform:scale(.76)!important;transform-origin:bottom}.reference-safe-mode .dial-wrap{position:absolute!important;top:221px!important;left:37px!important;margin:0!important;gap:0!important;pointer-events:auto}.reference-safe-mode .dial{width:178px!important;height:178px!important;opacity:0}.reference-safe-mode .dial-arrow{width:51px!important;height:51px!important;opacity:0}.reference-safe-mode .dial-arrow.left{margin-right:13px!important}.reference-safe-mode .dial-arrow.right{margin-left:13px!important}.reference-safe-mode .dial-hint{display:none!important}.reference-safe-mode .safe-check{position:absolute!important;top:402px!important;left:104px!important;width:146px!important;height:55px!important;margin:0!important;opacity:0;pointer-events:auto}.reference-safe-mode .listen-stethoscope{left:calc(50% - 370px)!important;bottom:83px!important;opacity:0}.reference-safe-mode + .controls{margin-top:-30px!important}.reference-safe-mode + .controls .restart-button{opacity:0;pointer-events:none}
@media(max-width:500px){.reference-safe-mode{height:500px!important}.reference-safe-mode .safe{width:314px!important;height:500px!important}.reference-safe-mode .display{top:98px!important;left:47px!important;width:220px!important;height:75px!important;padding:6px 10px!important}.reference-safe-mode .display-top{font-size:10px!important}.reference-safe-mode .notes{height:48px!important;gap:6px!important}.reference-safe-mode .dial-wrap{top:196px!important;left:32px!important;transform:scale(.885);transform-origin:top left}.reference-safe-mode .safe-check{top:356px!important;left:92px!important;transform:scale(.885);transform-origin:top left}.reference-safe-mode .listen-stethoscope{left:calc(50% - 164px)!important;bottom:42px!important}}
body{background:#78afd0 url("assets/bilder/rhythmussafe-studio-hintergrund.png") center / cover fixed no-repeat}body:before,body:after{display:none}
.mission{margin-bottom:-6px}.safe-area{height:650px}.safe-shadow{width:390px;height:44px;bottom:8px;background:#153d58;filter:blur(13px);opacity:.42}.safe{width:min(410px,90vw);aspect-ratio:10/15;background:linear-gradient(100deg,#75899b 0%,#e3e7e5 9%,#9ca7b0 17%,#566879 54%,#aeb9c1 87%,#e6e8e6 100%);border:7px solid #e7eaeb;border-radius:8px;box-shadow:inset 0 0 0 3px #526273,inset 0 0 26px #fff8,0 20px 36px #15384a99;transform:none}.safe:after{content:"";position:absolute;inset:34px 35px 35px;background:linear-gradient(125deg,#1d3447,#8295a5 12%,#364d60 52%,#9aacb7 100%);border:5px solid #172433;border-radius:8px;box-shadow:inset 0 0 0 3px #9daab3;z-index:0}.safe-rivets i{z-index:5;background:#d9e1e3;border-color:#5b6872;box-shadow:inset 2px 2px #fff}.safe-rivets i:nth-child(1){left:19px;top:21px}.safe-rivets i:nth-child(2){right:19px;top:21px}.safe-rivets i:nth-child(3){left:19px;bottom:21px}.safe-rivets i:nth-child(4){right:19px;bottom:21px}.alarm-lamp{top:-39px;width:72px;height:39px;margin-left:-36px;border-width:7px;border-bottom:0;background:#e74747;box-shadow:0 0 19px 8px #ff5140aa,inset 0 7px #ffd5cf,0 5px #4b5660}.safe-door{inset:39px 40px 42px;padding-top:29px;background:linear-gradient(125deg,#263c50,#8a9ba7 15%,#3f5364 56%,#9cabb4 100%);border:4px solid #162633;border-radius:7px;box-shadow:inset 0 0 0 3px #b8c3c7,0 5px 9px #172b38;z-index:2}.combination-slots{order:-1;margin:2px 0 15px;gap:12px;height:34px}.combination-slots span{width:22px;height:19px;background:#343d42;border:0;border-radius:5px;box-shadow:inset 0 -3px #1b2329}.combination-slots span:before{width:12px;height:13px;border:4px solid #353e43;border-bottom:0;border-radius:9px 9px 0 0;left:5px;top:-11px}.combination-slots span.done{background:#edc763;box-shadow:0 0 11px #ffe899}.combination-slots span.current{background:#edc763;box-shadow:0 0 0 3px #ffe5a3,0 0 13px #ffe899}.display{width:280px;max-width:94%;height:111px;margin-top:0;padding:10px 17px;background:linear-gradient(135deg,#fffbe5,#fff2bd);border:7px solid #37404a;border-radius:6px;box-shadow:inset 0 0 0 2px #e0cc89,0 5px 0 #273640}.display-top{font-size:13px;color:#a28647;letter-spacing:.9px}.notes{height:70px;gap:15px;align-items:end;padding-bottom:2px}.note{width:28px;height:52px}.note .head{width:22px;height:16px;bottom:2px;background:#6d6252;box-shadow:0 1px 1px #eee;transform:rotate(-20deg)}.note .stem{width:5px;height:41px;left:20px;bottom:13px;background:#6d6252}.pair{width:57px}.pair:after{top:0;left:21px;width:37px;height:7px;background:#6d6252}.rest{width:34px;height:48px;color:#6d6252}.dial-wrap{gap:22px;margin-top:24px}.dial{width:164px;height:164px;border:10px solid #dce4e6;background:repeating-conic-gradient(#dce8ed 0deg 3deg,#263646 3deg 7deg);box-shadow:0 7px 0 #304756,inset 0 0 0 10px #182734,0 0 0 5px #8397a4}.dial:before{width:116px;height:9px;background:#263746}.dial:after{width:9px;height:116px;background:#263746}.dial span{width:48px;height:48px;background:radial-gradient(circle at 35% 25%,#80909b,#17222e 68%);border-color:#dce6e9;box-shadow:inset 4px 4px #a6b4ba,0 0 0 3px #253747}.dial-arrow{width:51px;height:51px;background:linear-gradient(#ffe58b,#d7a842);color:#183f5e;font-size:45px;box-shadow:0 4px #996f2d}.dial-hint{font-size:17px;color:#143b58;margin:12px 0 3px}.safe-check{min-width:145px;min-height:50px;margin-top:8px;background:linear-gradient(#8de07c,#2f924b);border-color:#174b31;box-shadow:0 5px 0 #174a31,inset 0 3px #d4ffc5;font-size:20px}.listen-stethoscope{left:calc(50% - 275px);bottom:74px;width:176px;height:66px;border:3px solid #fdf8df;border-radius:18px;background:linear-gradient(145deg,#fffdf1,#e1e5dd);box-shadow:0 6px 0 #366f8a,0 8px 18px #143b5788;padding:7px 12px;gap:9px}.listen-stethoscope svg{width:43px;height:43px;stroke:#b77b37;stroke-width:8;filter:drop-shadow(0 1px 0 #fff)}.listen-stethoscope span{font-size:21px;color:#193e5b}.controls{margin-top:4px}.restart-button{border:3px solid #fff!important;border-radius:16px!important;padding:12px 21px!important;box-shadow:0 5px #397a91!important;font-size:17px!important}@media(max-width:500px){.safe-area{height:563px}.safe{width:min(335px,88vw)}.safe:after{inset:27px 25px}.safe-door{inset:30px 32px;padding-top:20px}.combination-slots{margin-bottom:10px}.display{height:89px;border-width:5px;padding:7px 11px}.display-top{font-size:10px}.notes{height:55px;gap:9px}.note{transform:scale(.8);transform-origin:bottom}.pair{transform:scale(.8);transform-origin:bottom}.rest{transform:scale(.8);transform-origin:bottom}.dial-wrap{margin-top:13px;gap:12px}.dial{width:126px;height:126px}.dial:before{width:88px}.dial:after{height:88px}.dial span{width:37px;height:37px}.dial-arrow{width:42px;height:42px;font-size:37px}.dial-hint{font-size:13px;margin:7px 0}.safe-check{min-width:116px;min-height:39px;font-size:15px}.listen-stethoscope{left:3px;bottom:74px;width:147px;height:55px}.listen-stethoscope svg{width:34px;height:34px}.listen-stethoscope span{font-size:17px}}