:root{--navy:#192b48;--navy-deep:#0f1c32;--bluegray:#7892ad;--gray:#d5d3c9;--yellow:#e9c74a;--danger:#e0634f;--font:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;--mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--display:"Oswald", "Arial Narrow", "Helvetica Neue", var(--font);--hand:"Yomogi", "Klee", "Hiragino Maru Gothic ProN", var(--font);--dot:"DotGothic16", var(--mono);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html:lang(zh-Hans),html:lang(zh-Hant),html:lang(ko){--hand:var(--font);--dot:var(--font)}html:lang(zh-Hans){--font:"PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif}html:lang(zh-Hant){--font:"PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif}html:lang(ko){--font:"Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}html,body{overscroll-behavior:none;background:var(--navy-deep);color:var(--gray);font-family:var(--font);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;margin:0;position:fixed;inset:0;overflow:hidden}#root{height:100%}:root{--adh:50px}@media (width>=768px){:root{--adh:90px}}#adbar{z-index:2;height:var(--adh);box-sizing:content-box;padding-bottom:env(safe-area-inset-bottom,0px);touch-action:manipulation;background:#070d18;justify-content:center;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden}#adbar.adbar-empty{display:none}body:has(#adbar:not(.adbar-empty)) .app{height:calc(var(--app-h,100dvh) - var(--adh) - env(safe-area-inset-bottom,0px))}.app{height:var(--app-h,100dvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:linear-gradient(#0000 70%,#050403d9),repeating-linear-gradient(92deg,#00000021 0 2px,#0000 2px 9px,#ffdcaa0d 9px 11px,#0000 11px 23px),linear-gradient(#4a2e18,#3a2412);flex-direction:column;display:flex}.app__area{flex:1;justify-content:center;align-items:flex-start;min-height:0;display:flex;position:relative;overflow:hidden}.app__area>.result{position:absolute;inset:0}.app__area>.start{align-self:stretch;height:auto;max-height:100%}button{font-family:inherit}button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}.btn{min-height:48px;color:var(--gray);cursor:pointer;background:linear-gradient(#35537d,#274064);border:2px solid #0f1c32;border-color:#9bb2cc #0f1c32 #0f1c32 #9bb2cc;border-radius:2px;padding:0 24px;font-size:1rem;font-weight:700}.btn:active{transform:translateY(1px)}.btn--primary{color:var(--navy);background:linear-gradient(#f2d567, var(--yellow));border-color:#fff4c4 #8a6f14 #8a6f14 #fff4c4}.btn--big{letter-spacing:.2em;min-height:56px;font-size:1.2rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.stage-box{flex:none;margin-top:2px}.stage{transform-origin:0 0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.hud{background:linear-gradient(#1b2740,#0a1120 70%);border-bottom:2px solid #2e4a7a;align-items:center;gap:10px;height:40px;padding:0 8px;display:flex;box-shadow:0 2px #050910,inset 0 1px #ffffff2e}.hud__logo{font:700 17px/24px var(--display);letter-spacing:.06em;color:#fff;text-shadow:1px 1px #0a1a40;background:linear-gradient(#3b7ae0,#1d4fb0 55%,#163c8a);border:1px solid #8fb6ff;flex:none;padding:1px 6px 0;box-shadow:inset 0 1px #ffffff73,1px 1px #000}.hud__logo span{color:var(--yellow);vertical-align:3px;margin-left:2px;font-size:12px}.hud__item{white-space:nowrap;align-items:baseline;gap:4px;min-width:0;display:flex}.hud__item small{text-overflow:ellipsis;min-width:0;overflow:hidden}.hud__item:nth-child(3){flex:1;justify-content:center}.hud__item small{font:500 11px/1 var(--display);letter-spacing:.08em;color:#c8d2e4}.hud__item b{font:700 21px/1 var(--display);color:var(--yellow);text-shadow:1px 1px #3a2a00,0 0 6px #ffc83c59}.hud__item b i{color:#e8d9a0;font-size:14px;font-style:normal}.hud__clock{letter-spacing:.04em;font-size:24px!important}.hud__clock.is-warn{color:#ff6a4d!important;text-shadow:1px 1px #3a0a00,0 0 8px #ff5a3c99!important}.board{background:#0b0d12;position:relative;overflow:hidden}.backdrop{pointer-events:none;filter:saturate(.9);background:radial-gradient(30% 60% at 50% 10%,#aac8ff59,#0000 70%),linear-gradient(#1a1d26,#0d0f15);height:104px;position:absolute;top:0;left:0;right:0}.backdrop__shelf{opacity:.55;filter:blur(.6px);background:repeating-linear-gradient(0deg,#2b1d12 0 4px,#0000 4px 26px),repeating-linear-gradient(90deg,#a33 0 4px,#e2b13c 4px 7px,#2f5aa8 7px 11px,#ddd 11px 13px,#3f7d4a 13px 17px,#222 17px 19px,#c45a9a 19px 22px),#1a1a1a;position:absolute;top:0;bottom:0}.backdrop__shelf--l{transform-origin:0;width:132px;left:0;transform:perspective(120px)rotateY(18deg)}.backdrop__shelf--r{transform-origin:100%;width:120px;right:0;transform:perspective(120px)rotateY(-18deg)}.backdrop__door{width:48px;height:70px;font:700 8px/1.1 var(--font);color:#c8dcffbf;background:linear-gradient(#2c4f8f,#142846);border:2px solid #2a2f3a;flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex;position:absolute;top:6px;left:156px;box-shadow:0 0 18px #5082e673}.backdrop__sign{font:700 16px/22px var(--display);letter-spacing:.08em;color:#2a5cc9;opacity:.8;background:linear-gradient(#fbf6e6,#e6dcc0);border:2px solid #c9a63b;padding:0 6px;position:absolute;top:8px;right:18px;transform:perspective(200px)rotateY(-14deg)}.counter{pointer-events:none;background:repeating-linear-gradient(92deg,#00000021 0 2px,#0000 2px 9px,#ffdcaa0d 9px 11px,#0000 11px 23px),linear-gradient(#6b4626,#4a2e18 40%,#3a2412);border-top:3px solid #8a5f36;position:absolute;inset:92px 0 0;box-shadow:inset 0 3px #ffdcaa2e,inset 0 12px 18px #00000059}.matbed{pointer-events:none;background:linear-gradient(#3a2614,#2a1a0d);border:2px solid #1a0f06;width:247px;height:249px;position:absolute;top:137px;left:1px;box-shadow:inset 0 2px #ffdcaa1f,0 3px #00000080}.cell{background:radial-gradient(#ffffff0d 1px,#0000 1px) 0 0/4px 4px,linear-gradient(#26282d,#1a1c20);border:2px solid #3c3f46;border-color:#0b0c0e #3c3f46 #3c3f46 #0b0c0e;border-radius:4px;transition:box-shadow .12s,background .12s;position:absolute;box-shadow:inset 0 0 0 4px #00000040,inset 2px 3px 6px #0009}.cell__slot{width:66px;height:98px;transition:left .12s;position:absolute}.cell--valid,.rbox--valid .rbox__tray,.machine--valid{animation:.9s ease-in-out infinite zone-breathe;box-shadow:0 0 0 2px #8cc8fff2,0 0 12px #78b4ffcc}.cell--hover,.rbox--hover .rbox__tray,.machine--hover{box-shadow:0 0 0 3px var(--yellow), 0 0 14px #ffd250cc}.cell--valid{background:radial-gradient(#ffffff0d 1px,#0000 1px) 0 0/4px 4px,linear-gradient(#24364f,#1a2638)}.cell--hover{background:linear-gradient(#4a4020,#2c2610)}@keyframes zone-breathe{50%{box-shadow:0 0 0 2px #8cc8ff8c,0 0 4px #78b4ff66}}.bag{position:absolute}.bag__back{background:linear-gradient(#1b2f6e,#12204c);border:2px solid #0a1230;border-radius:4px 4px 0 0;position:absolute;inset:18px 8px 6px}.bag__case{position:absolute;top:2px;left:33px;transform:rotate(-6deg)}.bag__front{clip-path:polygon(0 4px,6% 0,94% 0,100% 4px,100% 100%,0 100%);cursor:pointer;background:repeating-linear-gradient(45deg,#ffffff0d 0 1px,#0000 1px 3px),repeating-linear-gradient(-45deg,#0000001f 0 1px,#0000 1px 3px),linear-gradient(100deg,#2d4ca8,#3a5ec4 40%,#233f8f);border:2px solid #0e1a45;border-radius:0 0 8px 8px;justify-content:space-between;align-items:flex-end;padding:0 8px 6px;display:flex;position:absolute;inset:46px 0 0;box-shadow:inset 0 3px #ffffff2e,inset 0 -8px 12px #00000059,3px 4px #00000080}.bag__hint{white-space:nowrap;color:#1a1a1a;background:var(--yellow);pointer-events:none;border-radius:3px;padding:1px 6px;font-size:11px;font-weight:700;animation:1.2s ease-in-out infinite bag-hint;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 1px #00000080}@keyframes bag-hint{50%{transform:translate(-50%)translateY(-2px)}}.bag__front:before{content:"";border-top:1px dashed #dce6ff73;position:absolute;top:6px;left:4px;right:4px}.bag__print{font:700 18px/1 var(--display);letter-spacing:.06em;color:#e1e8fad9;text-shadow:0 1px #00000059}.bag__print b{vertical-align:4px;margin-left:2px;font-size:14px}.bag__count{text-align:center;min-width:22px;font:700 13px/18px var(--display);color:#1a1a1a;background:var(--yellow);border:1px solid #6b5410;padding:0 4px}.rbox{position:absolute}.rbox__tray{transform-origin:50% 100%;background:repeating-linear-gradient(90deg,#785a0059 0 1px,#0000 1px 6px),repeating-linear-gradient(0deg,#785a0059 0 1px,#0000 1px 6px),linear-gradient(#e6c22c,#c9a414);border:3px solid #f6d84a;border-bottom:none;border-radius:4px 4px 0 0;height:46px;transition:box-shadow .15s;position:absolute;top:0;left:4px;right:4px;transform:perspective(160px)rotateX(28deg)}.rbox__case{background:linear-gradient(135deg,#f0f5fad9,#aabed2b3);border:1px solid #ffffffe6;width:34px;height:24px;position:absolute;box-shadow:1px 2px #00000059}.rbox__case--vhs{background:linear-gradient(135deg,#f2f2ea,#cfd3d6)}.rbox__case:after{content:"";background:var(--yellow);height:5px;position:absolute;top:0;left:0;right:0}.rbox__front{background:linear-gradient(#f4d443,#d9b21a 60%,#b8930c);border:2px solid #7a5f05;border-radius:2px 2px 6px 6px;justify-content:center;align-items:center;display:flex;position:absolute;inset:44px 0 0;box-shadow:inset 0 2px #ffffff80,3px 4px #00000080}.rbox__label{white-space:nowrap;font:800 13px/18px var(--font);letter-spacing:.12em;color:#1a1a1a;background:#f6f2e2;border:1px solid #8a7a50;padding:0 8px}.rbox__count{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.rbox.is-ready .rbox__tray{animation:1.6s ease-in-out infinite rbox-glow}@keyframes rbox-glow{50%{box-shadow:0 0 16px #ffdc50cc}}.rbox__pulse{pointer-events:none;border:3px solid #fff;animation:.5s ease-out forwards rbox-pulse;position:absolute;inset:0}@keyframes rbox-pulse{0%{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.25,1.6)}}.pc{pointer-events:none;position:absolute}.pc__bezel{background:linear-gradient(#e9e4d2,#c9c2ab 70%,#b2ab94);border:1px solid #5e594a;border-radius:6px 6px 4px 4px;padding:7px 7px 10px;position:absolute;inset:0 0 14px;box-shadow:inset 0 2px #ffffffb3,inset 0 -3px #00000026,4px 5px #00000080}.pc__screen{height:100%;font-family:var(--dot);color:#e8f0ff;text-shadow:0 0 3px #96c8ffb3;background:radial-gradient(at 40% 30%,#2d5fb8,#12306a 75%);border:2px solid #3b3a33;border-radius:6px;padding:3px 5px;overflow:hidden;box-shadow:inset 0 0 10px #000000b3}.pc__title{color:#12306a;text-shadow:none;background:#dfe8ff;padding:0 2px;font-size:9px;line-height:12px}.pc__msg{color:#fff;max-height:20px;margin-top:2px;font-size:8px;line-height:10px;overflow:hidden}.pc__msg.is-ok{color:#9dffbc}.pc__msg.is-bad,.pc__log .is-bad{color:#ffb08a}.pc__log{opacity:.9;margin:1px 0 0;padding:0;font-size:8px;line-height:10px;list-style:none}.pc__log li{justify-content:space-between;display:flex}.pc__base{background:linear-gradient(#d6d0bb,#a9a28b);border:1px solid #5e594a;border-radius:2px;height:16px;position:absolute;bottom:0;left:22px;right:22px}.memo{font-family:var(--hand);color:#2a2a35;pointer-events:none;background:linear-gradient(#efe9d8,#e2dac4);padding:8px 12px;position:absolute;transform:rotate(-3deg);box-shadow:3px 4px #00000073}.memo:before,.memo:after{content:"";background:#e6dcaabf;width:34px;height:12px;position:absolute;top:-6px}.memo:before{left:-6px;transform:rotate(-20deg)}.memo:after{right:-6px;transform:rotate(18deg)}.memo h2{border-bottom:2px solid #c8442c;margin:0 0 2px;font-size:16px;font-weight:400;display:inline-block}.memo ul{white-space:nowrap;margin:0;padding-left:14px;font-size:12px;line-height:1.55}.guide-bar{z-index:40;color:#fff;pointer-events:none;background:linear-gradient(#1c3f8a,#0f2557);border:2px solid #ffd84a;border-radius:4px;align-items:center;gap:6px;width:254px;min-height:26px;padding:2px 4px 2px 3px;font-size:11px;font-weight:700;line-height:1.25;animation:.25s ease-out guide-in;display:flex;position:absolute;top:2px;left:4px;box-shadow:0 2px #00000080}.guide-bar__step{text-align:center;width:20px;height:20px;font:700 13px/20px var(--display);color:#1a1a1a;background:#ffd84a;border-radius:50%;flex:none}.guide-bar__text{flex:1}.guide-bar__close{color:#cfd8ff;cursor:pointer;pointer-events:auto;background:#ffffff1f;border:0;border-radius:3px;flex:none;width:22px;height:22px;padding:0;font-size:14px;line-height:22px}@keyframes guide-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.guide-ring{z-index:35;pointer-events:none;border:3px solid #ffd84a;border-radius:8px;animation:1s ease-in-out infinite guide-ring;position:absolute}@keyframes guide-ring{0%,to{opacity:1;box-shadow:0 0 #ffd84acc}50%{opacity:.55;box-shadow:0 0 0 6px #ffd84a00}}.guide-steps ol{white-space:nowrap;margin:0;padding-left:18px;font-size:11.5px;line-height:1.4}.guide-steps li.is-current{color:#c8442c;font-weight:700}.guide-steps li.is-current::marker{content:"▶ "}.guide-steps li.is-done{opacity:.55}.deco{pointer-events:none;position:absolute}.deco--pens{background:linear-gradient(#2b2b2b,#111);border-radius:3px;width:30px;height:44px;top:486px;left:-6px;box-shadow:0 -10px 0 -6px #3554b0,6px -14px 0 -8px #ddd}.deco--stack{width:86px;height:80px;top:430px;left:270px}.deco--stack span{background:linear-gradient(135deg,#ebf0f5cc,#a0afbe99);border:1px solid #ffffffb3;width:70px;height:20px;position:absolute;left:0;box-shadow:2px 2px #0006}.deco--stack span:after{content:"貸出OK";font:800 7px/10px var(--font);color:#1a1a1a;background:var(--yellow);padding:0 2px;position:absolute;top:4px;right:4px}.deco--stack span:first-child{top:50px}.deco--stack span:nth-child(2){top:32px;left:4px}.deco--stack span:nth-child(3){top:14px;left:1px}.foreground{pointer-events:none;background:linear-gradient(#0000,#1e120999);height:20px;position:absolute;bottom:0;left:0;right:0}.board__grain{z-index:70;pointer-events:none;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,#0000001f 0 1px,#0000 1px 3px),radial-gradient(at 50% 45%,#0000 55%,#00000073);position:absolute;inset:0}.ghost{z-index:50;pointer-events:none;position:absolute;top:0;left:0}.ghost__inner{opacity:.95;filter:drop-shadow(4px 8px #00000073);transform:translate(-50%,-50%)scale(1.08)}.ghost .media{position:relative;top:auto;left:auto;transform:none}.banner{z-index:60;pointer-events:none;background:#0508108c;flex-direction:column;justify-content:center;align-items:center;gap:6px;animation:.3s ease-out banner-in;display:flex;position:absolute;inset:0}.banner__wave{text-align:center;width:100%;font:700 italic 44px/1 var(--display);letter-spacing:.12em;color:#fff;text-shadow:3px 3px #0a1a40,0 0 14px #96c8ffcc;background:linear-gradient(90deg,#0000,#1e50bee6 20% 80%,#0000);border-top:2px solid #a0c8ffcc;border-bottom:2px solid #a0c8ffcc;padding:6px 0 4px}.banner--clear .banner__wave{background:linear-gradient(90deg,#0000,#c8960ae6 20% 80%,#0000);border-color:#ffe68ce6}.banner__call{color:#1a1a1a;background:#f6f2e2;border:2px solid #1a1a1a;border-radius:12px;padding:4px 12px;font-size:16px;font-weight:700}@keyframes banner-in{0%{opacity:0;transform:scaleY(.4)}}.board.is-locked .case__body,.board.is-locked .media{cursor:default}.case{--depth:2px;width:66px;height:98px;position:relative}.case--vhs{--depth:6px}.case__body{cursor:grab;box-shadow:var(--depth) var(--depth) 0 #0000008c, inset 0 0 0 1px #ffffff40;background:linear-gradient(120deg,#0000 30%,#ffffff47 38%,#0000 46%),linear-gradient(135deg,#e1e8f06b,#96aabe38);border:2px solid #3c4655cc;border-color:#ffffffd9 #3c4655cc #3c4655cc #ffffffd9;border-radius:2px;transition:transform .12s,box-shadow .12s;position:absolute;inset:0;overflow:hidden}.case--vhs .case__body{background:linear-gradient(120deg,#0000 30%,#ffffff4d 38%,#0000 46%),linear-gradient(135deg,#f0f0ea9e,#c3cbd475)}.case.is-open .case__body{cursor:pointer}.case__band{text-align:center;letter-spacing:.1em;color:#1a1a1a;background:linear-gradient(#ffd84a,#e9b81c);height:13px;font-size:8px;font-weight:800;line-height:13px;position:absolute;bottom:30px;left:6px;right:6px;box-shadow:0 1px #0006}.case__barcode{opacity:.9;background:repeating-linear-gradient(90deg,#111 0 1px,#e8e8e0 1px 3px,#111 3px 5px,#e8e8e0 5px 6px);width:44px;height:12px;position:absolute;bottom:16px;left:10px}.case__id{text-align:center;font-family:var(--mono);color:#fff;text-shadow:1px 1px #0a1424;font-size:11px;font-weight:800;position:absolute;bottom:2px;left:0;right:0}.case__lid{cursor:pointer;clip-path:polygon(0 0,100% 8%,100% 92%,0 100%);background:linear-gradient(90deg,#d5d3c966,#7892ad38);border:2px solid #ffffff8c;width:34px;height:98px;position:absolute;top:0;left:68px}.case__lidband{background:var(--yellow);height:9px;position:absolute;top:0;left:0;right:0}.case__badge{text-align:center;min-width:18px;height:18px;font:800 11px/18px var(--mono);color:var(--navy);background:var(--gray);border:2px solid var(--navy);pointer-events:none;z-index:3;padding:0 4px;position:absolute;top:-6px;right:-6px}.case.is-buried{filter:brightness(.55);pointer-events:none}.case.is-ghost{pointer-events:none}.case.is-dragging,.media.is-dragging{opacity:.3}.case.is-selected .case__body,.case.is-selected .case__lid{transform:translateY(-4px)}.case.is-selected .case__body{box-shadow:4px 8px 0 #00000080, 0 0 0 3px var(--yellow), 0 0 14px #ffd250e6}.media.is-selected{filter:drop-shadow(0 0 0 var(--yellow)) drop-shadow(0 0 2px var(--yellow)) drop-shadow(0 0 6px #ffd250e6)}.case .media.is-selected{transform:translate(-50%,calc(-50% - 4px))}.is-shake{animation:.3s linear shake}@keyframes shake{20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.media{position:relative}.case .media,.machine .media{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.case .media{top:55%}.media.is-grabbable{cursor:grab}.media.is-faint{opacity:.35}.case__media:before{content:"";position:absolute;inset:-14px}.dvd{border:2px solid #55657a;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;display:flex;position:relative;box-shadow:1px 2px #00000080}.dvd--front{background:radial-gradient(circle,#f4f2ea 0 28%,#c9d3e0 29% 60%,#8ea4bd 61%)}.dvd--back{background:radial-gradient(circle,#0000 0 20%,#ffffff40 21% 23%,#0000 24%),conic-gradient(from 20deg,#f4f6fa,#a8bcd8,#f0d7e6,#c9f0dc,#f6f8fc,#b6c6e6,#f8e6c8,#f4f6fa)}.dvd.is-flipping{animation:.32s ease-out dvd-flip}@keyframes dvd-flip{0%{filter:brightness(1.6);transform:scaleX(.05)}60%{transform:scaleX(1.08)}to{transform:scaleX(1)}}.dvd__ring{border:1px solid #192b4859;border-radius:50%;position:absolute;inset:14px}.dvd__hole{background:#10192b;border-radius:50%;width:8px;height:8px;position:absolute}.dvd--front .dvd__hole{display:none}.dvd__num{z-index:1;font:800 9px/11px var(--mono);color:var(--navy);background:#fff;border:1px solid #55657a;padding:1px 2px;position:relative}.dvd__scratch{width:100%;height:100%;position:absolute;inset:0}.dvd__scratch path{stroke:#fff;stroke-width:3px;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 1px #10192b)}.vhs{box-sizing:border-box;background:linear-gradient(90deg,#14161c,#262a33 45%,#14161c);border:2px solid #05060a;border-color:#5a6272 #05060a #05060a #5a6272;border-radius:2px;flex-direction:column;justify-content:space-between;align-items:center;width:56px;height:88px;padding:4px 0;display:flex;position:relative;box-shadow:1px 2px #00000080}.vhs__window{background:#463c3773;border:1px solid #ffffff1f;border-radius:3px;position:absolute;inset:6px 9px}.vhs__reel{background:#5a3d2e;border-radius:50%;flex:none;display:block;position:relative;box-shadow:0 0 0 1px #0b0c10}.vhs__reel:after{content:"";background:conic-gradient(#fff 0 16%, #222 0 33%, #fff 0 50%, #222 0 66%, #fff 0 83%, #222 0);border-radius:50%;position:absolute;inset:30%}.vhs__reel.is-thick{width:32px;height:32px}.vhs__reel.is-thin{width:14px;height:14px;margin:9px 0}.vhs__label{text-align:center;min-width:34px;height:12px;font:800 9px/12px var(--mono);color:var(--navy);background:var(--gray);flex:none;padding:0 2px;position:relative}.media.is-faint .vhs__label{opacity:0}.case .media--vhs.is-faint{opacity:.7}.media__tag{z-index:1;white-space:nowrap;font:700 10px/1.3 var(--hand);color:#fff;pointer-events:none;background:#d23a2a;border:1px solid #fff;padding:1px 3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-8deg);box-shadow:1px 1px #00000080}.media__tag--ok{background:#2f8a4a}.machine .media__tag{display:none}.case.is-open .case__media{z-index:1}.case .media--vhs{top:50%}.machine .vhs{background:linear-gradient(#262a33,#14161c);flex-direction:row;width:84px;height:46px;padding:0 4px}.machine .vhs__window{inset:8px 6px}.machine .vhs__label{min-width:0}.machine .vhs__reel.is-thick{width:26px;height:26px}.machine .vhs__reel.is-thin{width:12px;height:12px;margin:0 7px}.is-spinning .vhs__reel{animation:.8s linear infinite spin}.is-spinning .dvd{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.machine{background:repeating-linear-gradient(90deg,#ffffff0f 0 1px,#0000 1px 3px),linear-gradient(#d9dde2,#a7adb5 55%,#868c94);border:1px solid #3a3e45;border-radius:6px;transition:box-shadow .15s;position:absolute;box-shadow:inset 0 2px #ffffffb3,inset 0 -4px #0003,4px 5px #00000080}.machine__lid{pointer-events:none;transition:transform .25s,opacity .25s;position:absolute}.machine__lcd{text-align:right;min-width:40px;font:700 13px/18px var(--display);letter-spacing:.04em;color:#8dff6a;text-shadow:0 0 4px #78ff5acc;z-index:5;background:linear-gradient(#0c1a0c,#050b05);border:2px solid #2a2e33;border-radius:2px;padding:0 4px;position:absolute;bottom:6px;right:6px}.machine.is-idle .machine__lcd{color:#4f9a3c;text-shadow:none}.machine__led{z-index:5;background:#3a1a12;border:1px solid #1a1a1a;border-radius:2px;width:14px;height:6px;position:absolute;bottom:10px;left:8px}.machine__led.is-busy{background:#ff9a2a;animation:.5s steps(2,end) infinite led-blink;box-shadow:0 0 6px #ff9a2a}.machine__led.is-on{background:#6aff5a;box-shadow:0 0 8px #6aff5a}@keyframes led-blink{50%{opacity:.35}}.machine__done{font:700 11px/16px var(--display);color:#0a2a0a;z-index:5;background:#8dff6a;border:1px solid #1a3a1a;padding:0 4px;position:absolute;bottom:6px;left:26px}.machine--grinder .machine__bed{background:radial-gradient(circle,#3a3f48 0 18%,#20242b 19% 64%,#4b5059 65% 70%,#1b1e23 71%);border-radius:50%;width:78px;height:78px;position:absolute;top:8px;left:50%;transform:translate(-50%);box-shadow:inset 0 3px 6px #000000b3,0 1px #fff9}.machine--grinder .machine__media{top:50%;left:50%;transform:translate(-50%,-50%)scale(1.15)}.machine--grinder .machine__media.is-selected{transform:translate(-50%,calc(-50% - 4px))scale(1.15)}.machine--grinder .machine__lid{background:linear-gradient(90deg,#0000 47%,#2a2e35 47% 53%,#0000 53%) 50% 18%/60% 6px no-repeat,radial-gradient(circle at 35% 30%,#f4f6f8,#b9bec6 45%,#8b9098 75%,#6a6f77);border:1px solid #3a3e45;border-radius:50%;width:78px;height:78px;margin-left:-39px;top:8px;left:50%;box-shadow:0 3px 4px #00000080}.machine--grinder.is-running .machine__lid{animation:.7s linear infinite spin}.machine--grinder.is-idle .machine__lid,.machine--grinder.is-done .machine__lid{opacity:.9;transform:translate(30px,-6px)scale(.42)}.machine--rewinder .machine__bed{display:contents}.machine--rewinder:before{content:"";z-index:1;background:linear-gradient(#07080c,#14161c);border:2px solid #2a2e35;border-radius:3px;height:54px;position:absolute;top:14px;left:8px;right:8px;box-shadow:inset 0 0 8px #000000e6}.machine--rewinder:after{content:"";background:#111;border-radius:2px;height:5px;position:absolute;top:5px;left:14px;right:14px;box-shadow:inset 0 1px 2px #000}.machine--rewinder .machine__reels{z-index:2;justify-content:space-between;align-items:center;height:30px;display:flex;position:absolute;top:26px;left:22px;right:22px}.machine--rewinder .machine__reels span{background:radial-gradient(circle,#ddd 0 22%,#777 23% 30%,#3a2a20 31%);border-radius:50%;width:26px;height:26px;position:relative;box-shadow:0 0 0 2px #222}.machine--rewinder .machine__reels span:after{content:"";background:conic-gradient(#fff 0 16%, #222 0 33%, #fff 0 50%, #222 0 66%, #fff 0 83%, #222 0);border-radius:50%;position:absolute;inset:30%}.machine--rewinder .machine__reels.is-spinning span{animation:.6s linear infinite spin}.machine--rewinder .machine__media{z-index:3;top:41px;left:50%;transform:translate(-50%,-50%)}.machine--rewinder.is-running .machine__media{filter:brightness(.6)}.machine--rewinder.is-done .machine__media{top:30px}.machine--rewinder .machine__media.is-selected{transform:translate(-50%,calc(-50% - 4px))}.machine--rewinder .machine__lid{z-index:4;background:linear-gradient(135deg,#bee1ff38 0 30%,#0000 30%);height:54px;top:14px;left:8px;right:8px}.start{touch-action:pan-y;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:440px;height:100%;padding:14px 16px 16px;display:flex;position:relative;overflow-y:auto}.start__logo{text-align:center}.start>.btn--big{z-index:5;flex:none;position:sticky;bottom:4px;box-shadow:0 -6px 14px #00000073}.soundtoggle{color:#fff;border:2px solid var(--yellow);cursor:pointer;background:#0a142db3;border-radius:15px;place-items:center;width:30px;height:30px;padding:0;display:grid}.soundtoggle[aria-pressed=false]{color:#9aa6bd;border-color:#6b7690}.soundtoggle--start{z-index:20;position:absolute;top:10px;left:12px}.soundtoggle--hud{border-width:1px;flex:none;width:28px;height:28px}.langmenu{z-index:20;position:absolute;top:10px;right:12px}.langmenu__button{height:30px;font:700 13px/1 var(--display);letter-spacing:.04em;color:#fff;border:2px solid var(--yellow);cursor:pointer;background:#0a142db3;border-radius:15px;align-items:center;gap:4px;padding:0 10px;display:flex}.langmenu__list{background:#fbf8ef;border:2px solid #0f2557;border-radius:10px;grid-template-columns:repeat(2,minmax(110px,1fr));gap:4px;margin:0;padding:8px;list-style:none;display:grid;position:absolute;top:36px;right:0;box-shadow:0 6px 16px #00000080}.langmenu__list button{text-align:left;color:#1a2440;cursor:pointer;background:0 0;border:0;border-radius:6px;width:100%;padding:9px 10px;font-size:14px;font-weight:700}.langmenu__list button:hover{background:#1c3f8a1a}.langmenu__list button.is-current{color:#fff;background:#1c3f8a}.start__logo h1{font:700 54px/1 var(--display);letter-spacing:.22em;text-indent:.22em;color:#fff;text-shadow:3px 3px #0a1a40,0 0 18px #78aaffb3;margin:0}.start__logo p{color:var(--bluegray);letter-spacing:.1em;margin:4px 0 0;font-size:14px}.start__mission{text-align:center;color:#fff;border:2px solid var(--yellow);background:linear-gradient(#1c3f8a,#0f2557);border-radius:6px;width:100%;padding:10px 14px;box-shadow:0 3px #00000073}.start__mission h2{color:#1a1a1a;background:var(--yellow);border-radius:3px;margin:0 0 6px;padding:1px 10px;font-size:13px;display:inline-block}.start__mission p{margin:0;font-size:14px;line-height:1.6}.start__mission b{color:var(--yellow)}html:lang(ja) .start__mission b{white-space:nowrap}.start__star{color:var(--yellow);font-size:18px}.start__memo{color:#2a2a35;width:100%;font-family:var(--hand);background:repeating-linear-gradient(#0000 0 25px,#7892ad59 25px 26px),linear-gradient(#efe9d8,#e2dac4);padding:14px 14px 10px;position:relative;transform:rotate(-1.2deg);box-shadow:4px 5px #00000073}.start__memo:before{content:"";background:#e6dcaacc;width:70px;height:16px;margin-left:-35px;position:absolute;top:-8px;left:50%;transform:rotate(-3deg)}.start__memo h2{border-bottom:2px solid #c8442c;margin:0 0 4px;font-size:17px;font-weight:400;display:inline-block}.start__memo ol{margin:0;padding-left:20px;font-size:13px;line-height:26px}.start__memo li{margin-bottom:4px;line-height:1.45}.howto{justify-content:center;gap:14px;width:100%;display:flex}.howto figure{text-align:center;flex:1;max-width:170px;margin:0}.howto figcaption{color:var(--gray);font-size:11px;line-height:1.4}.howto__demo{background:radial-gradient(#ffffff0d 1px,#0000 1px) 0 0/4px 4px,linear-gradient(#26282d,#1a1c20);border:2px solid #3c3f46;border-color:#0b0c0e #3c3f46 #3c3f46 #0b0c0e;border-radius:4px;height:70px;margin-bottom:4px;position:relative;overflow:hidden}.howto__case{background:#d5d3c959;border:2px solid #fff9;width:28px;height:42px;margin-left:-14px;position:absolute;top:14px;left:50%}.howto__case:before{content:"";background:var(--yellow);height:6px;display:block}.howto__finger{border:2px solid var(--navy);background:#ffffffd9;border-radius:50%;width:20px;height:20px;position:absolute}.howto__finger--tap{margin-left:-6px;animation:1.4s ease-in-out infinite howto-tap;top:30px;left:50%}@keyframes howto-tap{40%,60%{transform:scale(.8);box-shadow:0 0 0 8px #e9c74a80}}.howto__finger--dbl{margin-left:-6px;animation:1.6s ease-in-out infinite howto-dbl;top:30px;left:50%}@keyframes howto-dbl{10%,18%{transform:scale(.8);box-shadow:0 0 0 6px #e9c74a80}14%{box-shadow:none;transform:scale(1)}24%,30%{transform:scale(.8);box-shadow:0 0 0 10px #ff5a3c99}40%{box-shadow:none;transform:scale(1)}}.overlay{z-index:100;background:#0a1220e0;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.overlay__panel{text-align:center;background:linear-gradient(#1d3566,#0f1c3a);border:2px solid #8fb6ff;padding:24px 32px;box-shadow:0 0 0 3px #ffd250cc,6px 8px #00000080}.overlay__panel h2{letter-spacing:.2em;color:#fff;margin:0 0 4px;font-size:28px}.overlay__panel p{color:var(--bluegray);margin:0 0 16px}.result{z-index:120;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#04060c8c;justify-content:center;align-items:center;animation:.25s ease-out result-fade;display:flex}@keyframes result-fade{0%{opacity:0}}.result__card{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;color:#1d2533;background:repeating-linear-gradient(#0000 0 23px,#506ea01f 23px 24px),linear-gradient(#f4efe0,#e4dcc6);border:2px solid #1a1a1a;border-radius:6px;width:100%;max-width:330px;max-height:92%;padding:0 14px 12px;animation:.35s cubic-bezier(.2,1.4,.4,1) result-pop;overflow-y:auto;box-shadow:0 0 0 3px #ffd250d9,6px 10px #0000008c}@keyframes result-pop{0%{opacity:0;transform:translateY(24px)scale(.92)}}.result__head{z-index:1;letter-spacing:.08em;color:#fff;background:linear-gradient(#3b7ae0,#1d4fb0 55%,#163c8a);border-bottom:2px solid #0a1a40;align-items:center;gap:8px;margin:0 -14px 6px;padding:7px 12px;font-size:13px;font-weight:800;display:flex;position:sticky;top:0}.result__logo{font:700 17px/1 var(--display);letter-spacing:.06em}.result__logo b{color:var(--yellow);vertical-align:3px;margin-left:1px;font-size:12px}.result__status{border-radius:10px;margin-left:auto;padding:1px 8px;font-size:13px}.result__status.is-ok{color:#1a1a1a;background:var(--yellow)}.result__status.is-ng{color:#fff;background:#c0392b}.result__hero{text-align:center}.result__label{color:#5a6478;margin:2px 0 0;font-size:11px}.result__time{line-height:1;font:700 54px/1.05 var(--display);letter-spacing:.02em;color:#e8b416;-webkit-text-stroke:1.5px #3a2a00;text-shadow:3px 3px #3a2a00;margin:0}.result__time small{-webkit-text-stroke:0;text-shadow:none;color:#3a2a00;margin-left:4px;font-size:18px}.result__best{color:#fff;background:#d0342c;border-radius:10px;margin:4px 0 0;padding:1px 10px;font-size:13px;font-weight:800;animation:.8s steps(2,end) 3 best-blink;display:inline-block}@keyframes best-blink{50%{opacity:.4}}.result__sub{color:#5a6478;margin:2px 0 0;font-size:12px}.result__stars{letter-spacing:3px;color:#e8a516;text-shadow:1px 1px #3a2a00;margin:2px 0 0;font-size:24px}.result__title{margin:0;font-size:17px;font-weight:800}.result__rows{grid-template-columns:1fr 1fr;gap:2px 12px;margin:8px 0 4px;display:grid}.result__rows div{border-bottom:1px dashed #9aa6b8;justify-content:space-between;padding:1px 0;font-size:12px;display:flex}.result__rows dt,.result__rows dd{margin:0}.result__rows dd{font-weight:800}.result__mistakes{flex-wrap:wrap;gap:4px;margin:6px 0 0;padding:0;list-style:none;display:flex}.result__mistakes li{color:#fff;background:#4a5568;border-radius:10px;padding:1px 8px;font-size:11px}.result__mistakes li span{color:#ffd36a;margin-left:4px;font-weight:800}.result__mistakes li.is-clean{color:#1a1a1a;background:#9be38a}.result__comment{margin:6px 0 0;font-size:12px;line-height:1.5}.result__main{gap:8px;margin-top:10px;display:flex}.result__main button{cursor:pointer;border-radius:4px;flex:1;min-height:48px;font-size:15px;font-weight:800}.result__main .is-primary{color:#1a1a1a;background:linear-gradient(#ffe27a,#e9b81c);border:2px solid #8a6f14;border-color:#fff4c4 #8a6f14 #8a6f14 #fff4c4}.result__main .is-x{color:#fff;background:#111;border:2px solid #444}.result__note{color:#5a6478;margin:6px 0 0;font-size:11px;line-height:1.5}.result__tabs{gap:8px;margin-top:8px;display:flex}.result__tabs button{color:#1d4fb0;cursor:pointer;background:0 0;border:1px solid #1d4fb0;border-radius:4px;flex:1;min-height:36px;font-size:12px;font-weight:700}.result__tabs button[aria-expanded=true]{color:#fff;background:#1d4fb0}.result__sub-actions{grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;display:grid}.result__sub-actions button{color:#1d2533;cursor:pointer;background:#fff;border:1px solid #9aa6b8;border-radius:4px;min-height:38px;font-size:12px}.result button:disabled{opacity:.4;cursor:default}.result__toast{color:#fff;z-index:2;background:#000c;border-radius:16px;padding:8px 14px;font-size:13px;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}
