@keyframes scrollDownArrow{0%,to{text-indent:-20px}
50%{text-indent:12px}
}
@font-face{font-family:"LCDBOLD";src:url(/img/fonts/LCDBOLD.eot);src:local("LCDBOLD"),url(/img/fonts/LCDBOLD.woff)format("woff"),url(/img/fonts/LCDBOLD.ttf)format("truetype")}
a,div,em,h4,header,html,iframe,img,li,nav,section,span,strong,tbody,td,th,thead,tr,ul{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}
body,h1{margin:0}
body,h1,h2,h3,p,table{padding:0}
article,body,footer,h1,h2,h3,p,table{border:0;outline:0;vertical-align:baseline;background:0 0}
article,footer,p,table{font-size:100%}
#naviList li a:hover span,article,footer,header,nav,section{display:block}
body,html{background-color:#eee;max-width:100%;overflow-x:hidden}
body{width:100%;font-family:arial;font-size:16px;line-height:22px;-webkit-user-select:none;-moz-user-select:none;user-select:none}
html{scroll-behavior:smooth}
img{max-width:100%}
/* the photograph at the head of the first tutorial panel. height:auto matters:
   the global img rule only caps the width, so without it a 900px file squeezed
   into a narrower card would keep its 900-wide height and come out stretched. */
.kepIntro{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto 12px}
/* playback speed, the same control the 3x3 solution page has. The track runs
   right-to-left so that pushing the handle right means faster, which is the
   way round people expect and the way the 3x3 already behaves. */
#stepSpeed{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;margin:0 10px;white-space:nowrap}
#stepSpeedRange{-webkit-appearance:none;appearance:none;width:110px;height:10px;border-radius:5px;background:#fff;border:2px solid #8c8c8c;outline:none;cursor:pointer;opacity:.85;transition:opacity .15s ease-in-out;direction:rtl}
#stepSpeedRange:hover{opacity:1}
#stepSpeedRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#496a87;cursor:pointer}
#stepSpeedRange::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#496a87;border:0;cursor:pointer}
#stepSpeedRange:focus-visible{outline:3px solid #1c5ffe;outline-offset:2px}
#stepSpeedLabel{font-size:13px;font-weight:700;color:#444;min-width:74px}
table{border-collapse:collapse;border-spacing:0;margin:0 0 8px}
h1{font-size:21px;line-height:46px;font-weight:700}
h2{font-size:40px;margin:0 0 20px;font-family:"Arial Black",Gadget,sans-serif}
h3{font-size:25px;line-height:25px;margin:0 0 6px}
p{margin:0 0 10px}
.centeralign{text-align:center}
.floatRight{float:right;margin:0 0 5px 15px}
.fullWidth{width:100%}
.clearfix:after,.row:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.printOnly,header h1{display:none}
::selection{background:#f5b400}
#intro{padding:0 20px 0 400px;background:url(/img/headerBack.jpg)no-repeat center center #000;height:340px;overflow:hidden;position:relative}
#intro .socialIcons{position:absolute;bottom:10px;right:10px;margin:0}
.socialIcons{float:right;margin:0 0 10px 20px}
.socialIcons a{background:url(/img/sprite.png)no-repeat 0-450px;display:inline-block;height:30px;width:30px;margin-right:10px;cursor:pointer;opacity:.6}
.sectionHelp:hover>span,.socialIcons a:hover{opacity:1}
.socialIcons a.shareFb{background-position:0-450px}
.socialIcons a.shareTw{background-position:-50px -450px}
#naviList{font-size:30px;list-style:none;text-decoration:none;width:100%;border:0;display:inline-block}
#naviList li{vertical-align:top;color:#000;display:inline-block;height:340px;width:23%;text-align:center;transform:skew(-17deg,0deg)}
#naviList li:nth-child(1){background-color:rgba(255,178,0,.25)}
#naviList li:nth-child(2){background-color:rgba(0,135,255,.25)}
#naviList li:nth-child(3){background-color:rgba(255,0,0,.25)}
#naviList li:nth-child(4){background-color:rgba(37,255,0,.25)}
#d3Cube>div>div>a,#naviList li a,.sectionHelp>span::after{font-family:"Arial Black",Gadget,sans-serif;color:#fff;display:block}
#naviList li a{text-decoration:none;width:100%;height:300px;line-height:340px;padding:0 0 40px;font-size:50px;letter-spacing:1px;text-shadow:4px 4px 0#000,-4px 4px 0#000,4px -4px 0#000,-4px -4px 0#000,4px 0 0#000,-4px 0 0#000,0-4px 0#000,0 4px 0#000;transform:skew(17deg,0deg);transition:all .1s ease-in-out}
#naviList li a:hover{text-shadow:3px 3px 0#000,-3px 3px 0#000,3px -3px 0#000,-3px -3px 0#000,3px 0 0#000,-3px 0 0#000,0-3px 0#000,0 3px 0#000,4px 4px 0#fff,-4px 4px 0#fff,4px -4px 0#fff,-4px -4px 0#fff,4px 0 0#fff,-4px 0 0#fff,0-4px 0#fff,0 4px 0#fff}
#naviList li a span{display:none;padding-top:15px;font-size:15px;line-height:20px;text-shadow:1px 1px 0#fff,-1px 1px 0#fff,1px -1px 0#fff,-1px -1px 0#fff;color:#000;position:relative;top:-150px}
#naviList li a#playLink{color:#ff8f27}
#naviList li a#solveLink{color:#1c5ffe}
#naviList li a#timeLink{color:#f95844}
#naviList li a#learnLink{color:#39e897}
#wrapD3Cube{width:200px;height:200px;display:inline-block;vertical-align:middle;position:fixed;top:1px;z-index:11111;left:1px;transition:all .5s ease-in-out;perspective:15000px}
.activeSectiontop #wrapD3Cube{width:400px;height:300px}
#d3Cube{top:50px;margin:auto;position:relative;transform-style:preserve-3d;transform:rotateX(-105deg) rotateY(0deg) rotateZ(17deg)}
.activeSectionplay #d3Cube{transform:rotateX(-14deg) rotateY(113deg) rotateZ(3deg)}
.activeSectionsolve #d3Cube{transform:rotateX(-14deg) rotateY(203deg) rotateZ(3deg)}
.activeSectiontime #d3Cube{transform:rotateX(-14deg) rotateY(293deg) rotateZ(3deg)}
.activeSectionlearn #d3Cube{transform:rotateX(-14deg) rotateY(383deg) rotateZ(3deg)}
#d3Cube,#d3Cube>div,#d3Cube>div>div{transition:all .5s ease-in-out;width:112px;height:112px}
#d3Cube>div{position:absolute;overflow:hidden}
#d3Cube>div>div{background-size:100% 100%;background-image:url(/img/logo-grid.png)}
.activeSectiontop #d3Cube,.activeSectiontop #d3Cube>div,.activeSectiontop #d3Cube>div>div{width:224px;height:224px}
#side1{transform:rotateX(90deg) translateZ(56px)}
#side2{transform:rotateY(-90deg) translateZ(56px)}
#side3{transform:translateZ(56px)}
#side4{transform:rotateY(90deg) translateZ(56px)}
#side5{transform:rotateY(180deg) translateZ(56px)}
#side6{transform:rotateX(-90deg) translateZ(56px)}
.activeSectiontop #side1{transform:rotateX(90deg) translateZ(112px)}
.activeSectiontop #side2{transform:rotateY(-90deg) translateZ(112px)}
.activeSectiontop #side3{transform:translateZ(112px)}
.activeSectiontop #side4{transform:rotateY(90deg) translateZ(112px)}
.activeSectiontop #side5{transform:rotateY(180deg) translateZ(112px)}
.activeSectiontop #side6{transform:rotateX(-90deg) translateZ(112px)}
#side1>div{background-color:#fff}
#side2>div,#simulator .sectionHelp>span,#simulator h2{background-color:#e87000}
#side3>div{background-color:#009d54}
#side4>div{background-color:#dc422f}
#side5>div,#solver .sectionHelp>span,#solver h2{background-color:#3d81f6}
#side6>div{background-color:#f2f215}
#d3Cube>div>div>a,.sectionHelp>span::after{text-align:center}
#d3Cube>div>div>a{transition:all .5s ease-in-out;position:relative;line-height:110px;text-decoration:none;font-size:26px;text-shadow:2px 2px 0#000,-2px 2px 0#000,2px -2px 0#000,-2px -2px 0#000}
.activeSectiontop #d3Cube>div>div>a{line-height:220px;font-size:52px}
#d3Cube>div#side1>div>a{font-size:8px;text-indent:-999px;background:url(/img/logo60.png)no-repeat center center;background-size:30px 30px}
.activeSectiontop #d3Cube>div#side1>div>a{background-size:60px 60px}
#d3Cube>div#side2>div>a{color:#f9c08c}
#d3Cube>div#side5>div>a{color:#9ebdf3}
#d3Cube>div#side4>div>a{color:#e89489}
#d3Cube>div#side3>div>a{color:#7defba}
.activeSectionlearn #d3Cube>div#side3>div>a,.activeSectionplay #d3Cube>div#side2>div>a,.activeSectionsolve #d3Cube>div#side5>div>a,.activeSectiontime #d3Cube>div#side4>div>a{color:#fff}
#d3Cube>div:hover>div>a{font-size:31px;color:#fff!important}
.sectionHelp,.sectionHelp>span{transition:all .4s ease-in-out;width:40px;border-radius:5px}
.sectionHelp{position:absolute;overflow:hidden;right:40px;z-index:99;cursor:pointer;padding-bottom:5px}
.sectionHelp>span{height:40px;background:#444;display:block;float:right;opacity:.7;position:relative;font-size:0}
.sectionHelp>span::after{content:"?";font-size:37px;line-height:35px;position:absolute;left:0;right:0;top:0;bottom:0}
.sectionHelp h2,.sectionHelp p{display:none;max-height:50px;overflow:hidden}
.sectionHelp.active{background:rgba(255,255,255,.8);width:500px}
.sectionHelp.active>span{font-size:20px;height:22px;position:absolute;right:8px;top:0;width:28px;line-height:21px;margin:0;opacity:1}
.sectionHelp.active>span::after{content:"×";font-size:20px;background:rgba(0,0,0,.5);line-height:21px}
.sectionHelp.active h2{font-size:17px;height:20px;line-height:20px;display:block;color:#fff;margin:0;padding:1px 40px 1px 10px;border-radius:0 0 5px 0}
.sectionHelp.active p{margin:1px 10px;font-size:13px;display:block;max-height:100px;line-height:15px;height:auto}
#timer .sectionHelp>span,#timer h2{background-color:#dc422f}
#simulator .sectionHelp{bottom:unset;top:40px}
#solver .sectionHelp,#timer .sectionHelp{top:30px}
a.nextSection,a.nextSection>span{display:inline-block;overflow:hidden}
a.nextSection{z-index:89;position:absolute;bottom:0;left:100px;text-decoration:none;background-color:#444;font-size:16px;line-height:20px;padding:0 20px 3px 5px;font-weight:700;color:#fff;border-radius:10px 10px 0 0;opacity:.8;transition:all .3s}
a.nextSection:hover{opacity:1}
a.nextSection>span{transform:rotate(90deg);text-indent:12px;height:23px;width:33px;animation:scrollDownArrow 3s infinite}
a.nextSection:hover>span{animation:none}
#simulator a.nextSection{background:#3d81f6}
#solver a.nextSection{background:#dc422f}
#timer a.nextSection{background:#009d54}
#tutorial a.nextSection{background:#f5b400}
#tutorial a.nextSection>span{transform:rotate(-90deg)}
/* the anchor ad slot stays in normal flow at every size: absolutely pinned to
   the section bottom it climbed over the Scramble/Solve buttons whenever the
   inline fallback creative (up to ~156px) was taller than the room left for it */
.bottomRklm{position:relative;min-height:10px;z-index:1;width:90%;max-width:1000px;margin:15px auto 40px}
#simulator{position:relative;border-top:5px solid #e87000;border-bottom:5px solid #3d81f6;background:#fff3c2;background:radial-gradient(ellipse at center,#fff 0,#fff3c2 100%)}
#simulator:fullscreen{border:0}
#container{position:relative;z-index:1;height:560px;touch-action:none;cursor:grab}
#simulator:fullscreen #container{height:100vh}
#container:active{cursor:grabbing}
#wrapCubeControls{position:absolute;right:60px;top:auto;bottom:60px;z-index:9;left:60px;transition:all .5s ease-in-out}
#cubeControls{text-align:right;width:100%;z-index:999}
a#fullSizeIcon,a#shuffleToPlay{display:inline-block;text-decoration:none;border-radius:10px}
a#shuffleToPlay{background:#e87000;color:#fff6d0;font-size:20px;padding:6px 25px;float:right;cursor:pointer;font-weight:700}
a#shuffleToPlay:hover{color:#fff}
a#fullSizeIcon{width:50px;height:50px;background:url(/img/sprite.png)no-repeat 0-2940px;overflow:hidden;text-align:left;vertical-align:middle;text-indent:-999px;font-size:8px;float:left;color:#e87000}
a#fullSizeIcon:hover{background-color:#fff}
.szinter{width:100%;height:100%;position:relative;perspective:1400px;overflow:hidden}
.kiskocka,.kockaTer{left:50%;top:50%;transform-style:preserve-3d}
.kiskocka,.kockaTer,.lapocska{position:absolute}
.lapocska{border-radius:14%;box-shadow:inset 0 0 0 3px #101010;background:#101010;backface-visibility:hidden}
.lapocska.hatso{background:#151515;box-shadow:none;border-radius:6%}
#solver{background:#cae3ff;background:radial-gradient(ellipse at center,#fff 0,#cae3ff 100%);border-top:5px solid #3d81f6;border-bottom:5px solid #dc422f;position:relative;padding:60px 10px 60px}
#solverBox{margin:auto;position:relative}
#stepCounter{display:inline-flex;flex-direction:column;vertical-align:middle;margin:0 5px;min-width:3ch;font-weight:700;font-size:13px;line-height:1.2;color:#222;text-align:center;font-variant-numeric:tabular-nums}
#stepCounter span:first-child{border-bottom:1px solid #999}
#solverBox,.beallitoTer{text-align:center}
.halo{display:inline-block;vertical-align:middle;position:relative;width:434px;height:324px;text-align:left}
.haloLap{position:absolute;width:96px;height:96px;background:#000;padding:4px;border-radius:6px;font-size:0;line-height:0}
.haloU{left:110px;top:0}
.haloF,.haloL{left:0;top:110px}
.haloF{left:110px}
.haloB,.haloR{left:220px;top:110px}
.haloB{left:330px}
.haloD{left:110px;top:220px}
.matrica{display:inline-block;width:22px;height:22px;margin:1px;border-radius:3px;cursor:pointer;background:#ccc;transition:box-shadow .15s}
.matrica:hover{box-shadow:1px 1px 6px #333 inset}
.elonezetTer{width:230px;display:inline-block;vertical-align:middle;margin:10px 0 10px 24px}
#previewCube{height:210px;touch-action:none;cursor:grab}
#previewCube .lapocska:not(.hatso){cursor:pointer}
.elonezetFelirat{font-size:12px;color:#557;text-align:center;transition:opacity .25s ease-out}
.elonezetFelirat.elrejtve{opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s .25s}
@media (prefers-reduced-motion:reduce){.elonezetFelirat,.elonezetFelirat.elrejtve{transition:none}}
.color0{background-color:#ccc}
.color1{background-color:#fff}
.color2{background-color:#e89e15}
.color3{background-color:#58d568}
.color4{background-color:#ed3030}
.color5{background-color:#1c5ffe}
.color6{background-color:#f2f215}
.color7{background-color:#a9aeb5}
.color8{background-color:#9450e8}
.color9{background-color:#ff8fc6}
.color10{background-color:#6fd2ff}
.color11{background-color:#f7edae}
.color12{background-color:#bdf25c}
#controlPanel{margin:auto;text-align:center;padding:20px 10px;clear:both}
.palettaHatter{background:url(/img/paletteback.png)0 0;border-radius:6px}
#cubeCommands,.paletta a,.palettaHatter{display:inline-block;vertical-align:middle}
.paletta a{width:36px;height:36px;margin:4px;border-radius:5px;cursor:pointer;border:2px solid #555}
.paletta a.active{border:2px solid #000;box-shadow:0 0 0 3px #f5b400}
/* twelve colors on a 4x3 grid: every color sits right beside its opposite */
.paletta{display:grid;grid-template-columns:repeat(4,auto);justify-content:center}
#cubeCommands{margin-left:30px;width:330px}
#commandList a,#cubeCommands a{font-size:14px}
#commandList a,#cubeCommands a,#solutionControls a{display:inline-block;font-weight:700;text-decoration:none;vertical-align:top;color:#222;background-color:#fff;cursor:pointer;border-radius:10px;border-top:1px solid #ccc;border-bottom:2px solid #777;border-left:1px solid #ccc;border-right:2px solid #777}
#commandList a:hover,#cubeCommands a:hover,#solutionControls a:hover{border-top:0 solid #ccc;border-bottom:3px solid #555;border-left:0 solid #aaa;border-right:3px solid #777}
#commandList a:active,#cubeCommands a:active,#solutionControls a:active{border-bottom:0 solid #ccc;border-top:3px solid #555;border-right:0 solid #aaa;border-left:3px solid #777}
#cubeRotations{display:block}
#cubeRotations a{padding:5px 2px;min-width:33px;width:auto;display:inline-block;box-sizing:border-box;margin:2px;position:relative;overflow:hidden;font-size:14px}
#algWrap,#cubeRotations a,.row{text-align:center}
#algWrap{padding:5px;min-height:30px}
#algInput{width:205px;background-color:rgba(255,255,255,.7);border:1px solid #aaa;padding:3px 2%;font-size:15px;font-weight:700;-webkit-user-select:text;user-select:text}
#algRun{text-align:center;background-color:#456683;color:#fff;padding:3px 8px;font-size:13px;border-radius:10px;cursor:pointer;display:inline-block}
#algRun:hover{background-color:#555}
#algError{color:#c00;font-weight:700;font-size:13px;min-height:15px}
#commandList,#errorBox{padding:15px 0 0;text-align:center}
#errorBox{border:2px solid #777;position:absolute;width:400px;top:110px;left:50%;margin-left:-222px;font-size:17px;display:none;padding:20px;background-color:rgba(255,255,255,.95);font-weight:700;z-index:11111;box-shadow:1px 1px 8px #000;border-radius:6px}
#commandList a{padding:8px 14px;margin:3px;height:25px;line-height:25px}
#commandList a#solveCube{font-size:22px;background-color:#3d81f6;color:#fff}
#errorBox.lathato,#solutionControls.lathato{display:block}
#closeError{float:right;cursor:pointer;position:relative;top:-37px;left:37px;border-radius:20px;height:35px;width:35px;background-color:#555;font-size:30px;line-height:35px;padding:0;color:#fff}
#solutionBox{margin:15px auto 0;min-height:40px}
#solutionMsg{font-weight:700;color:#234;min-height:22px}
#solutionMoves{padding:6px;overflow-y:auto;background:rgba(255,255,255,.35);border-radius:8px}
#solutionMoves>span{cursor:pointer}
#solutionMoves>span:hover{box-shadow:0 0 0 2px rgba(245,180,0,.6)}
#solutionMoves>span.kesz{opacity:.35}
#solutionMoves>span.aktiv{box-shadow:0 0 0 3px #f5b400}
#solutionControls{margin-top:5px;display:none}
#solutionControls a{padding:6px 18px;margin:0 5px;font-size:18px}
#solutionControls a#exitSolution{font-size:14px;padding:9px 14px;background-color:#1c5ffe;color:#fff}
/* while a solution is on screen the picker and the turn buttons are hidden,
   so the moves and the animated preview fit on a short screen together */
.solutionView #controlPanel{display:none}
#timer{background:#ffc0bd;background:radial-gradient(ellipse at center,#fff 0,#ffc0bd 100%);border-top:5px solid #dc422f;border-bottom:5px solid #009d54;position:relative}
#timerStage{position:relative;height:700px;overflow:hidden}
#time,#touchSensitive{position:absolute;left:0;right:0}
#time{font-family:"LCDBOLD",monospace;font-size:130px;line-height:130px;display:block;text-align:center;padding:0;color:#333;top:130px;width:100%}
#time.fut,#time.kesz{color:#0a7d36}
#time.varakozo{color:#b00}
.theBestTime{background:#d9f2df}
.theWorstTime{background:#f9dcda}
#touchSensitive{top:0;bottom:300px;cursor:pointer;touch-action:none}
#scrambleAlgorithm,#timerControls{position:absolute;text-align:center}
#scrambleAlgorithm{cursor:pointer;bottom:305px;font-size:20px;font-family:"Arial Black",Gadget,sans-serif;color:#444;left:20px;right:20px;line-height:26px;margin:9px auto;max-width:1100px}
#scrambleAlgorithm:hover,.timeRemove:hover{color:#000}
#timerControls{background-color:rgba(157,0,38,.22);height:280px;box-shadow:0 0 100px #eb9186 inset;bottom:0;left:0;right:0;overflow-x:auto;overflow-y:hidden;padding:20px 20px 0}
#timerScroller{min-width:560px;margin:auto}
#solutionStatistics,#solutionTimes{display:inline-block;vertical-align:top;text-align:left;border-radius:10px}
#solutionTimes{width:300px;background:#f6fff8;height:240px;overflow-y:auto}
#solutionTimes div{height:24px}
#solutionTimes div:hover{background:#e8f5ec}
.sorszam{color:#999;font-size:12px;display:inline-block;min-width:28px;text-align:right}
#solutionStatistics{width:200px;background-color:#f6fff8;padding:10px 20px;font-size:15px;height:220px}
#solutionStatistics ul li em,.measuredTime{display:inline-block;width:100px;text-align:right}
.measuredTime{font-size:13px;color:#333;font-weight:700;margin:0;text-decoration:none;font-family:arial;padding-right:8px}
.timeRemove{cursor:pointer;color:#966;font-weight:700;font-size:12px;display:inline-block;min-width:24px;min-height:24px;line-height:24px;padding:0;text-align:center;background:none;border:0;font-family:inherit;vertical-align:top}
.timeRemove:focus-visible{outline:2px solid #966;outline-offset:-2px;border-radius:4px}
#commandList a[hidden]{display:none}
#solutionStatistics ul{list-style:none}
#solutionStatistics ul li{height:20px;line-height:20px}
#solutionStatistics ul li a{text-decoration:none;color:#444;cursor:default}
#solutionStatistics ul li em{padding-right:15px;font-style:normal}
#solutionStatistics ul li:nth-child(5),#solutionStatistics ul li:nth-child(8){border-bottom:1px solid #ddd}
#timerSettings{display:inline-block;vertical-align:bottom;width:150px;background:#f6fff8;text-align:left;padding:20px;border-radius:10px}
#timerSettings{position:relative}
#timerSettings input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
#timerSettings label{display:block;font-size:15px;cursor:pointer;min-height:24px;border-radius:5px;line-height:24px;padding:0 5px 0 26px;position:relative}
#timerSettings input:focus-visible+label{outline:2px solid #0a7d36;outline-offset:1px}
#timerSettings label::before{content:"";position:absolute;left:5px;top:4px;width:14px;height:14px;border:2px solid #999;border-radius:3px;background:#fff}
#timerSettings input:checked+label::before{background:#0a7d36;border-color:#0a7d36}
#timerSettings input:checked+label::after{content:"✓";position:absolute;left:8px;top:1px;color:#fff;font-size:13px;font-weight:700}
#timerSettings label:hover{background-color:#ffd5d3}
#tutorial{background:#cfffd7;background:radial-gradient(ellipse at center,#fff 0,#cfffd7 100%);border-top:5px solid #009d54;border-bottom:none;padding-bottom:30px}
#tutorial h2{line-height:40px}
#tutorial h2,#tutorial h3,.grid-item>span,a.moreLink,a.nextPanel{color:#009d54;text-shadow:2px 2px #000,-2px -2px #000,-2px 2px #000,2px -2px #000,2px 0#000,-2px 0#000,0-2px #000,0 2px #000}
.grid-item>span,a.moreLink,a.nextPanel{background-color:#009d54;color:#fff}
.sectionInfo{text-align:center;padding:60px 20px 20px;font-weight:700;font-size:1.3em}
#tutorial,.grid{position:relative}
.grid{max-width:1560px;margin:20px auto 0;padding:0 20px}
.grid-item{width:500px;max-width:100%;min-height:100px;position:absolute}
.grid-item>div{padding:10px}
#tutorialIntro>div,.grid-item>div>div{padding:10px;border-radius:10px;box-shadow:0 0 35px #12633d}
.grid-item>div>div{background:#fff}
.grid-item>span{font-size:40px;position:relative;float:left;margin:0 15px 10px 0;border-radius:7px;line-height:48px;box-shadow:1px 1px 3px #000;min-width:48px;text-align:center;font-family:"Arial Black",Gadget,sans-serif}
#tutorialIntro>div{background:rgba(255,255,255,.85)}
#usefulTip>div>div{background:#fff8dc}
a.moreLink,a.nextPanel{border-radius:8px;padding:4px 13px;text-decoration:none;font-weight:700;border:2px solid #000}
a.moreLink:hover,a.nextPanel:hover{background-color:#086d3e;border-color:#086d3e;box-shadow:2px 2px 4px #000}
.algo,.algo>span,.grid-item>span{display:inline-block}
.algo{font-weight:700;vertical-align:middle;margin:0}
.algo>span{min-width:24px;padding:4px 5px;margin:2px 3px;background:#333;color:#fff;border-radius:6px;line-height:17px;text-align:center;font-size:15px;font-style:normal;font-family:arial;vertical-align:middle;box-shadow:1px 1px 0 #000}
.algo>span[class*=w]{background:#1c5f8e}
.stepLinks{overflow:auto;padding:6px 0 4px}
.stepLinks .moreLink{float:left}
.stepLinks .nextPanel{float:right}
.abraKocka{max-width:100%;height:auto}
#footnote{padding:20px;background:#fff988;background:radial-gradient(ellipse at center,#fff 0,#fff988 100%);color:#333;font-size:17px;border-top:5px solid #f5b400}
#footnote h3 a{color:#f5b400;text-decoration:none;display:block;font-size:21px;text-shadow:1px 1px #000,-1px -1px #000,-1px 1px #000,1px -1px #000,1px 0#000,-1px 0#000,0-1px #000,0 1px #000}
#footnote h3 a:hover{color:#000;text-decoration:none;text-shadow:none}
article,footer{max-width:1000px;margin:20px auto;padding:0 45px;-webkit-user-select:text;user-select:text}
article a{color:#0b6bcb}
article hr{border:0;border-top:1px solid #d5c95e;margin:15px 0}
.tenyLista{margin:0 0 12px 30px}
#tutorial h4{font-size:18px;line-height:22px;margin:16px 0 6px;color:#009d54;text-shadow:1px 1px #000,-1px -1px #000,-1px 1px #000,1px -1px #000,1px 0 #000,-1px 0 #000,0 -1px #000,0 1px #000}
.tipp{margin:10px 0;padding:8px 12px;border-left:4px solid #f5b400;background:#fffbe9}
.kepAlairassal.centeralign{display:block;margin:0 auto}
.tenyLista li{margin-bottom:4px}
.tablaGorgeto{overflow-x:auto;margin-bottom:12px}
.tabla{width:100%;max-width:560px;margin:0 auto;background:rgba(255,255,255,.6);border-radius:8px;overflow:hidden}
.tabla td,.tabla th{border:1px solid #d5c95e;padding:6px 12px;text-align:center}
.tabla td:first-child{text-align:left;font-weight:700}
.tabla thead th{background:#f5b400;color:#000}
footer{font-weight:700}
footer p{margin-bottom:2px}
footer img{vertical-align:middle}
footer a{color:#333}
.back2topScroll,.back2topScroll::after{height:46px;width:46px;display:block;transition:all 250ms linear}
.back2topScroll{position:fixed;left:10px;bottom:130px;cursor:pointer;border-radius:50px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.1);z-index:10000;opacity:0;visibility:hidden;transform:translateY(15px)}
.back2topScroll.showProgress{opacity:1;visibility:visible;transform:translateY(0)}
.back2topScroll::after{color:#009d54;position:absolute;transform:rotate(-90deg);content:"➤";text-align:center;line-height:46px;font-size:24px;left:0;top:0;z-index:1}
.back2topScroll:hover::after{top:-5px}
.back2topScroll svg path{fill:none}
.back2topScroll svg.circleSvg path{stroke:rgba(0,0,0,.8);stroke-width:4;transition:all 250ms linear}
@media screen and (max-width:1400px){#naviList li a{font-size:40px}
}
@media screen and (max-width:1200px){#naviList li a{font-size:30px}
}
@media screen and (max-width:900px){#wrapD3Cube{left:-15px;opacity:.7}
.activeSectiontop #wrapD3Cube{opacity:1;width:200px;height:150px}
.activeSectiontop #d3Cube,.activeSectiontop #d3Cube>div,.activeSectiontop #d3Cube>div>div{width:112px;height:112px}
.activeSectiontop #d3Cube>div>div>a{line-height:110px;font-size:26px}
.activeSectiontop #d3Cube>div#side1>div>a{background-size:30px 30px}
.activeSectiontop #side1{transform:rotateX(90deg) translateZ(56px)}
.activeSectiontop #side2{transform:rotateY(-90deg) translateZ(56px)}
.activeSectiontop #side3{transform:translateZ(56px)}
.activeSectiontop #side4{transform:rotateY(90deg) translateZ(56px)}
.activeSectiontop #side5{transform:rotateY(180deg) translateZ(56px)}
.activeSectiontop #side6{transform:rotateX(-90deg) translateZ(56px)}
#wrapD3Cube:hover{opacity:1}
#intro{padding:0 0 0 220px;height:auto}
.beallitoTer{gap:8px}
}
@media screen and (max-width:750px),screen and (max-height:750px){#intro .socialIcons,#wrapD3Cube,.dontShowOnMobile{display:none}
#intro{padding:0;position:fixed;height:50px;top:0;left:0;right:0;z-index:99999}
#naviList li{height:50px;display:block;width:25%;float:left}
#naviList li a,#naviList li a:hover{font-size:25px;line-height:50px;height:auto;padding:0;color:#fff!important;text-shadow:3px 3px 0#000,-3px 3px 0#000,3px -3px 0#000,-3px -3px 0#000,3px 0 0#000,-3px 0 0#000,0-3px 0#000,0 3px 0#000}
#naviList li a span{display:none!important}
#simulator,#solver,#tutorial{padding-top:50px}
#simulator .sectionHelp,#solver .sectionHelp,#timer .sectionHelp{top:60px}
#timerStage{height:560px}
#time{top:80px;font-size:70px;line-height:70px}
#touchSensitive{bottom:225px}
#scrambleAlgorithm{font-size:14px;line-height:18px;bottom:230px}
#scrambleAlgorithm span{padding:1px 3px;margin:1px;font-size:12px;min-width:0;box-shadow:none}
#timerControls{height:200px}
#solutionTimes{width:220px;height:170px}
#solutionStatistics{padding:10px;height:150px}
#timerSettings{padding:10px;width:110px}
.sectionInfo{padding:30px 5% 20px}
h2{font-size:30px;line-height:30px}
#wrapCubeControls{right:30px;bottom:30px;left:30px}
.sectionHelp{right:30px}
.sectionHelp.active{width:min(500px,calc(100vw - 60px))}
#container{height:420px}
.grid{max-width:520px}
.grid,article,footer{padding:0 10px}
}
@media screen and (max-width:700px){.back2topScroll{display:none}
}
@media screen and (max-width:640px){#cubeCommands{margin-left:0;width:100%}
#errorBox{width:min(400px,calc(100vw - 90px));left:50%;margin-left:0;transform:translateX(-50%)}
.halo{width:354px;height:264px}
.haloLap{width:76px;height:76px}
.matrica{width:17px;height:17px}
.haloU{left:90px;top:0}
.haloF,.haloL{left:0;top:90px}
.haloF{left:90px}
.haloB,.haloR{left:180px;top:90px}
.haloB{left:270px}
.haloD{left:90px;top:180px}
.elonezetTer{width:180px;margin-left:10px}
#previewCube{height:170px}
}
@media screen and (max-width:450px){.halo{width:298px;height:222px}
.haloLap{width:64px;height:64px;padding:2px}
.matrica{width:14px;height:14px}
.haloU{left:76px;top:0}
.haloF,.haloL{left:0;top:76px}
.haloF{left:76px}
.haloB,.haloR{left:152px;top:76px}
.haloB{left:228px}
.haloD{left:76px;top:152px}
#solutionTimes{width:195px}
.measuredTime{width:75px}
}
@media print{#footnote .socialIcons,#intro,#simulator,#solver,#timer,.back2topScroll,.nextSection,.sectionHelp{display:none}
body{text-shadow:none!important;background-image:none!important}
.algo>span{display:inline-block;width:auto;color:#000;background:0 0;padding:0 3px;font-size:18px;box-shadow:none}
.printOnly{display:block;font-size:25px;border-top:1px solid #999;padding-top:20px}
.printOnly>span{font-weight:700;text-decoration:underline}
}
#headerSwitch{position:absolute;top:14px;right:14px;z-index:2500}
.kockaValto{display:inline-block;padding:7px 14px;border-radius:6px;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.4);font:700 14px/16px arial;text-decoration:none;white-space:nowrap;transition:all .15s ease-in-out;margin-left:6px}
.kockaValto:hover{background:rgba(0,0,0,.85);border-color:#fff}
@media screen and (max-width:750px),screen and (max-height:750px){#headerSwitch{position:fixed;top:10px;right:4px;z-index:100000}
.kockaValto{padding:5px 8px}
#naviList{width:calc(100% - 52px);margin-left:52px}
}
.kepPar{text-align:center}
.kepAlairassal{display:inline-block;vertical-align:middle;margin:0 6px 10px;font-size:13px;line-height:17px}
.kepAlairassal p{margin:2px 0 0}
.diagArrow{display:inline-block;vertical-align:middle;font-size:30px;color:#333;padding:0 2px 30px}

/* --- kilominx net (SVG) --- */
/* the search runs in a worker; this strip shows it is alive and lets you stop */
#solverBusy{display:none;align-items:center;justify-content:center;gap:12px;font-weight:700;color:#234;padding:4px 0;flex-wrap:wrap}
#solverBusy.lathato{display:flex}
#solverBusy>span{font-variant-numeric:tabular-nums;min-width:44px}
#solverProgress{flex:1 1 140px;max-width:240px;height:14px;border:2px solid #000;border-radius:8px;background:#fff;overflow:hidden}
#solverProgress>i{display:block;height:100%;width:0;background:#3d81f6;transition:width .12s linear}
@media (prefers-reduced-motion:reduce){#solverProgress>i{transition:none}}
/* the spinning cube is the reassurance; the bar already says the same thing */
@media (prefers-reduced-motion:reduce){#solverBusy>img{display:none}}
#solverCancel{font:inherit;font-size:15px;padding:5px 16px;border:2px solid #000;border-radius:8px;background:#555;color:#fff;cursor:pointer;font-weight:700}
#solverCancel:hover{background:#333}
#solverCancel:focus-visible{outline:3px solid #f5b400;outline-offset:2px}
a#solveCube.dolgozik{opacity:.55;pointer-events:none}
#netKilo{display:inline-block;vertical-align:middle;width:min(430px,90vw)}
#netSvg{width:100%;height:auto}
#netSvg .matrica{stroke:#000;stroke-width:2;stroke-linejoin:round;cursor:pointer;transition:opacity .15s}
#netSvg .matrica:hover{opacity:.75}


/* === PART-SIM CSS === */
/* --- kilominx 3D simulator --- */
.kiloSvg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#previewCube .kiloSkin{cursor:pointer}
/* === END PART-SIM CSS === */


/* === PART-SCRAMBLE CSS === */
/* move badges tinted with their face's sticker color; dark text on the
   light faces so every badge stays readable */
.algo>span.klU{background:#fff;color:#222}
.algo>span.klF{background:#ed3030;color:#fff}
.algo>span.klR{background:#1c5ffe;color:#fff}
.algo>span.klL{background:#58d568;color:#123}
.algo>span.klBL{background:#9450e8;color:#fff}
.algo>span.klBR{background:#f2f215;color:#222}
.algo>span.klD{background:#a9aeb5;color:#222}
.algo>span.klB{background:#e89e15;color:#222}
.algo>span.klDR{background:#ff8fc6;color:#222}
.algo>span.klDL{background:#f7edae;color:#222}
.algo>span.klDBR{background:#bdf25c;color:#123}
.algo>span.klDBL{background:#6fd2ff;color:#123}
/* === END PART-SCRAMBLE CSS === */

/* extra room below the simulator: the ball can poke past the container */
#simulator{padding-bottom:55px}

/* the puzzle may swing past the drawing box while orbiting: let it */
#container .szinter,#container svg,#previewCube .szinter,#previewCube svg{overflow:visible}
/* attribution under the comparison tables, and the record cells */
.recordsChecked{margin:-6px 0 12px;opacity:.75;line-height:1.35}
.tabla small{font-weight:400;opacity:.8;white-space:nowrap}


/* ---- puzzle menu (sprite: /img/puzzle-sprite.png, 9 cells of 36px) ---- */
#puzzleMenu{background:#171c24;border-bottom:1px solid #000}
#pmToggle{position:absolute;opacity:0;pointer-events:none}
#pmBtn{display:none}
.pmRow{display:flex;justify-content:center;align-items:center;gap:6px;padding:7px 10px;flex-wrap:wrap}
.pmIco{position:relative;display:flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:9px;text-decoration:none;transition:background .15s,transform .15s}
.pmIco i{display:block;width:36px;height:36px;background:url(/img/puzzle-sprite.png) 0 0/324px 36px no-repeat}
.pmIco:hover{background:#2a3140;transform:translateY(-2px)}
.pmIco span{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(3px);background:#0d1117;color:#fff;font:700 12px/1 Arial,sans-serif;white-space:nowrap;padding:6px 10px;border-radius:6px;opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none;z-index:99;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.pmIco:hover span,.pmIco:focus-visible span{opacity:1;visibility:visible}
.pmIco:focus-visible{outline:2px solid #f5b400;outline-offset:2px}
.pmCur{background:#2a3140;box-shadow:inset 0 -3px 0 #f5b400}
.pmCur:hover{transform:none}
.pmI0 i{background-position:0 0}
.pmI1 i{background-position:-36px 0}
.pmI2 i{background-position:-72px 0}
.pmI3 i{background-position:-108px 0}
.pmI4 i{background-position:-144px 0}
.pmI5 i{background-position:-180px 0}
.pmI6 i{background-position:-216px 0}
.pmI7 i{background-position:-252px 0}
.pmI8 i{background-position:-288px 0}
@media (prefers-reduced-motion:reduce){.pmIco,.pmIco span{transition:none}.pmIco:hover{transform:none}}
@media screen and (max-width:750px),screen and (max-height:750px){
#puzzleMenu{background:none;border:0}
#pmBtn{display:block;position:fixed;top:7px;left:8px;width:40px;height:36px;z-index:100001;background:#171c24;border:1px solid #444;border-radius:8px;cursor:pointer;padding:8px 9px;box-sizing:border-box}
#pmBtn b{display:block;height:3px;background:#fff;border-radius:2px;margin:0 0 5px}
#pmBtn b:last-child{margin:0}
.pmRow{display:none;position:fixed;top:50px;left:0;right:0;z-index:100000;background:#171c24;flex-direction:column;align-items:stretch;gap:0;padding:6px 0;border-bottom:3px solid #f5b400;max-height:calc(100vh - 53px);overflow-y:auto}
#pmToggle:checked~.pmRow{display:flex}
.pmRow .pmIco{width:auto;height:auto;justify-content:flex-start;gap:14px;padding:10px 18px;border-radius:0}
.pmRow .pmIco span{position:static;transform:none;opacity:1;visibility:visible;background:none;box-shadow:none;color:#fff;font-size:15px;padding:0}
.pmRow .pmIco:hover{transform:none}
.pmCur{box-shadow:inset 4px 0 0 #f5b400}
}

/* ---- ad slots ---------------------------------------------------------- */
/* Reserve the tallest thing each slot can actually put on the page: enough
   that nothing below it moves when the ad lands, and no empty band left over
   when it does. The numbers are measured, not guessed - the size lists come
   from googletag.pubads().getSlots() on the live page, and the heights were
   confirmed over five production loads:

     11133  tower       300x600 160x600 300x250 300x300            600 tall
     11136  square 1    336x336 336x320 320x336 320x320
     11137  square 2    300x300 336x280 320x250 300x250            336 tall
     11134  billboard 1 1000x100 970x90 728x90 990x90
     11135  billboard 2 970x50 960x90 950x90 980x90                150 tall
     11132  anchor      same list as the billboards                  0 tall

   Two of those need a word. The billboards top out at 100 in GAM, but when
   nothing fills, Setupad drops in a 300x150 of its own - seen on 5 of 10 slot
   loads - so 150 is the real ceiling. The anchor reserves nothing because
   Setupad renders it as its own fixed overlay and leaves the inline <ins> flat.

   One size mapping covers every viewport, addSize([1,1], ...), so there is no
   separate mobile list and no breakpoint to correct. The unit names promising
   1000x200, 450x450 and 400x800 are labels, not sizes. */
.rklBillboard{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 10px;line-height:0;min-height:150px}
.rklTower{display:none}
@media screen and (min-width:1720px) and (min-height:860px){
/* The simulator is a fixed ~624px, so it has to be told to make room for the
   tower: 100px of clearance above it, 600px of tower, 30px below. The tower
   starts BELOW the section's "?" button rather than pushing it out of the
   top-right corner it occupies on every other page and at every other width.
   Moving the button was the first attempt and it just traded an overlap for a
   control in the wrong place. */
#simulator{min-height:730px}
.rklTower{display:block;position:absolute;top:100px;right:30px;width:300px;height:600px;z-index:3;line-height:0}
}
.marginBottom40{margin-bottom:40px}
.rklBack{display:flex;align-items:center;justify-content:center;min-width:300px;min-height:336px;background:url(/img/rkbck.png) no-repeat center center transparent}


/* M12: +2 and DNF marks on each recorded time, matching the 3x3 page. */
.plus2sec,.dnfThis{cursor:pointer;color:#999;font-size:13px;display:inline-block;min-height:24px;line-height:24px;padding:0;text-align:center;background:none;border:0;font-family:inherit;vertical-align:top}
.plus2sec{min-width:24px}
.dnfThis{min-width:32px}
.plus2sec:hover,.dnfThis:hover{color:#3F679B}
.plus2sec1,.dnfThis1{color:#222;font-weight:700}
.plus2sec:focus-visible,.dnfThis:focus-visible{outline:2px solid #3F679B;outline-offset:-2px;border-radius:4px}

/* a DNF keeps its recorded time on screen but struck through, so you can
   still read it while the statistics treat it as a DNF (WCA 9f). */
.measuredTime.dnfTime{text-decoration:line-through;color:#966}