.dnn-note,.dnn-note *{box-sizing:border-box}.dnn-note{--red:#d71920;--dark:#151515;--paper:#fffdf3;--yellow:#ffd43b;width:100%;max-width:920px;margin:24px auto;color:var(--dark);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;line-height:1.7}.dnn-note [hidden]{display:none!important}.dnn-note__breaking{display:flex;overflow:hidden;border-radius:10px 10px 0 0;color:#fff;background:#151515;font-size:13px;font-weight:900}.dnn-note__breaking span{padding:11px 16px;background:var(--red)}.dnn-note__breaking b{padding:11px 16px}.dnn-note__panel{padding:clamp(22px,4vw,46px);border:1px solid #d8d2c2;border-top:0;border-radius:0 0 10px 10px;background:linear-gradient(#14141407 1px,transparent 1px),var(--paper);background-size:100% 28px;box-shadow:0 16px 40px #0002;text-align:center}.dnn-note__eyebrow{margin:0 0 6px;color:var(--red);font-size:13px;font-weight:900;letter-spacing:.1em}.dnn-note .dnn-note__title{margin:0;padding:0;border:0;background:none;font-size:clamp(29px,6vw,50px);font-weight:900;line-height:1.22}.dnn-note .dnn-note__title:before,.dnn-note .dnn-note__title:after{display:none!important;content:none!important}.dnn-note__lead{margin:13px auto 20px}.dnn-note__hud{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:3px solid var(--dark);border-bottom:0;border-radius:10px 10px 0 0;color:#fff;background:var(--dark);font-family:Impact,"Arial Black",sans-serif;letter-spacing:.06em}.dnn-note__hud span{padding:8px 4px;border-right:1px solid #555}.dnn-note__hud span:last-child{border:0}.dnn-note__hud strong{color:var(--yellow);font-size:1.15em}.dnn-note__stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;min-height:330px;border:3px solid var(--dark);border-top:0;background:radial-gradient(circle,#295a89,#10243c 50%,#07111e);isolation:isolate}.dnn-note__stage:before{position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(circle at 50% 55%,transparent 0 40px,#3be4ff18 42px 45px,transparent 48px 75px);content:""}.dnn-note__message{position:absolute;top:12px;left:50%;z-index:5;min-width:min(84%,530px);padding:7px 16px;transform:translateX(-50%);border:2px solid #fff;border-radius:999px;color:#fff;background:#000d;font-weight:900}.dnn-note__speaker{position:relative;z-index:3;display:grid;width:150px;height:150px;margin-top:18px;place-items:center;border:8px solid #111;border-radius:50%;color:#fff;background:radial-gradient(circle,#20bce6 0 20%,#0d4574 21% 45%,#051525 46%);box-shadow:0 0 0 8px #ffffff22,0 0 35px #27d7ff80;font-size:80px;font-weight:900}.dnn-note__speaker i{position:absolute;inset:-35px;border:6px solid #4ae7ff;border-right-color:transparent;border-left-color:transparent;border-radius:50%;opacity:0}.dnn-note__speaker.is-playing{animation:dnn-note-speaker .72s ease both}.dnn-note__speaker.is-playing i{animation:dnn-note-wave .72s ease both}.dnn-note__replay{position:relative;z-index:4;margin-top:27px;padding:9px 23px;border:2px solid #fff;border-radius:999px;color:#fff;background:#0008;font:inherit;font-weight:900;cursor:pointer}.dnn-note__replay small{display:block;font-size:10px}.dnn-note__replay:disabled{opacity:.38;cursor:not-allowed}.dnn-note__cover{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;color:#fff;background:#090d11ed;backdrop-filter:blur(3px)}.dnn-note__cover>strong{font-size:clamp(36px,8vw,64px);font-style:italic;line-height:1.05;text-shadow:4px 4px var(--red)}.dnn-note__cover>span{margin:9px 0 1px;font-weight:800}.dnn-note__cover em{margin-bottom:15px;color:#ffe56e;font-size:12px;font-style:normal}.dnn-note__mode-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,540px)}.dnn-note__cover button,.dnn-note__retry,.dnn-note__share a,.dnn-note__share button{appearance:none;border:0;border-radius:999px;font:inherit;font-weight:900;cursor:pointer;text-decoration:none}.dnn-note__cover .dnn-note__mode-buttons button{min-height:62px;padding:9px 22px;color:#fff;background:#087cc4;box-shadow:0 7px #045487;font-size:clamp(17px,3vw,22px);line-height:1.15}.dnn-note__cover .dnn-note__mode-buttons button:last-child{background:#8b3bd1;box-shadow:0 7px #542080}.dnn-note__cover button small{display:block;margin-top:4px;font-size:11px}.dnn-note__keyboard{position:relative;display:grid;grid-template-columns:repeat(7,1fr);width:100%;height:clamp(170px,26vw,230px);margin-top:15px;border:4px solid #111;border-radius:6px;background:#111;box-shadow:0 8px #111;touch-action:manipulation;user-select:none}.dnn-note__key{appearance:none;font:inherit;font-weight:900;cursor:pointer}.dnn-note__key--white{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:10px 2px;border:1px solid #555;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#ddd,#fff 20% 82%,#c9c9c9);font-size:clamp(13px,2.6vw,18px)}.dnn-note__key small{font-size:10px;font-weight:700}.dnn-note__key--white strong{font-size:clamp(13px,2.8vw,20px)}.dnn-note__key--black{position:absolute;top:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:9%;height:61%;padding:7px 1px;border:2px solid #000;border-radius:0 0 6px 6px;color:#fff;background:linear-gradient(90deg,#111,#444 55%,#050505);box-shadow:0 5px 3px #0006;font-size:10px}.dnn-note__key--black strong{font-size:clamp(9px,1.7vw,13px)}.dnn-note__key--cs{left:9.78%}.dnn-note__key--ds{left:24.07%}.dnn-note__key--fs{left:52.64%}.dnn-note__key--gs{left:66.93%}.dnn-note__key--as{left:81.21%}.dnn-note__keyboard.is-natural .dnn-note__key--black{opacity:.16;pointer-events:none}.dnn-note__key:disabled{cursor:not-allowed}.dnn-note__key.is-playing,.dnn-note__key.is-correct{color:#fff;background:#18a85b;box-shadow:inset 0 0 22px #fff}.dnn-note__key.is-wrong{color:#fff;background:#d71920}.dnn-note__help{margin:20px 0 0;color:#555;font-size:13px}.dnn-note__result{margin-top:30px;padding-top:30px;border-top:4px double #222}.dnn-note__score-label{font-size:13px;font-weight:900;letter-spacing:.2em}.dnn-note__final{font-size:clamp(70px,18vw,110px);font-weight:900;line-height:1.1}.dnn-note__final small{font-size:.3em}.dnn-note__result article{padding:clamp(23px,5vw,40px);border:3px solid #222;background:#fff;text-align:left}.dnn-note__result article>div{display:inline-block;padding:3px 14px;color:#fff;background:var(--red);font-weight:900}.dnn-note .dnn-note__result h2{margin:10px 0 16px;padding:0 0 14px;border:0;border-bottom:2px solid #222;background:none;font-size:clamp(23px,5vw,36px);font-weight:900}.dnn-note .dnn-note__result h2:before,.dnn-note .dnn-note__result h2:after{display:none!important;content:none!important}.dnn-note__result article>span{display:inline-block;padding:7px 12px;background:var(--yellow)}.dnn-note__best{font-weight:800}.dnn-note__share{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:24px 0}.dnn-note__share a,.dnn-note__share button{min-width:150px;padding:12px 20px;color:#fff!important;background:#111}.dnn-note__share button{background:#4b5563}.dnn-note__share small{flex-basis:100%;color:#146c2e}.dnn-note__retry{padding:12px 28px;border:2px solid #222;background:transparent}@keyframes dnn-note-speaker{30%{transform:scale(1.1);filter:brightness(1.35)}100%{transform:scale(1)}}@keyframes dnn-note-wave{0%{transform:scale(.5);opacity:0}40%{opacity:1}100%{transform:scale(1.45);opacity:0}}
@media(max-width:600px){.dnn-note{margin:12px auto}.dnn-note__panel{padding:25px 7px 30px}.dnn-note__breaking span,.dnn-note__breaking b{padding:9px 7px;font-size:9px}.dnn-note__stage{min-height:320px}.dnn-note__mode-buttons{grid-template-columns:1fr;width:min(100%,290px);gap:9px}.dnn-note__cover .dnn-note__mode-buttons button{min-height:52px;padding:7px 18px}.dnn-note__keyboard{height:180px}.dnn-note__key--white{padding-bottom:7px}.dnn-note__key--black{width:10%;height:59%}.dnn-note__key--cs{left:9.28%}.dnn-note__key--ds{left:23.57%}.dnn-note__key--fs{left:52.14%}.dnn-note__key--gs{left:66.43%}.dnn-note__key--as{left:80.71%}.dnn-note__key small{display:none}}
@media(prefers-reduced-motion:reduce){.dnn-note__speaker,.dnn-note__speaker i{animation-duration:.01ms!important}}