:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-highlight: #f0f0f0;--large-radius: 12px}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box}#root{max-width:1000px;margin:0 auto;padding:1rem 0;font-family:Arial,Helvetica,sans-serif}p{padding:.3rem 0}.justify-center{justify-content:center}.cell{width:var(--cell-size);height:var(--cell-size);display:flex;justify-content:center;align-items:center;font-family:"MS Sans Serif",sans-serif;font-size:calc(var(--cell-size) * .5);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;color:#000;background-size:100% 100%}.cell.cleared:after{font-family:"MS Sans Serif",monospace;font-size:200%;font-size:calc(var(--cell-size) * .5);font-weight:700;position:absolute;width:var(--cell-size);height:var(--cell-size);display:flex;align-items:center;justify-content:center}.cell.cleared[data-value="0"]:after{content:""}.cell.cleared[data-value="1"]{color:#00f}.cell.cleared[data-value="2"]{color:green}.cell.cleared[data-value="3"]{color:red}.cell.cleared[data-value="4"]{color:navy}.cell.cleared[data-value="5"]{color:maroon}.cell.cleared[data-value="6"]{color:teal}.cell.cleared[data-value="7"]{color:#000}.cell.cleared[data-value="8"]{color:gray}.cell:not(.cleared){background:silver;background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' fill='%23c0c0c0'/%3E%3Cpolygon points='0,0 20,0 18,2 2,2' fill='%23ffffff'/%3E%3Cpolygon points='0,0 0,20 2,18 2,2' fill='%23ffffff'/%3E%3Cpolygon points='0,20 20,20 18,18 2,18' fill='%23808080'/%3E%3Cpolygon points='20,0 20,20 18,18 18,2' fill='%23808080'/%3E%3Crect x='2' y='2' width='16' height='16' fill='%23c0c0c0'/%3E%3C/svg%3E");background-size:var(--cell-size) var(--cell-size);background-repeat:no-repeat}.cell.pressed{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' fill='%23c0c0c0'/%3E%3Cpolygon points='0,0 20,0 18,2 2,2' fill='%23808080'/%3E%3Cpolygon points='0,0 0,20 2,18 2,2' fill='%23808080'/%3E%3Cpolygon points='0,20 20,20 18,18 2,18' fill='%23ffffff'/%3E%3Cpolygon points='20,0 20,20 18,18 18,2' fill='%23ffffff'/%3E%3Crect x='2' y='2' width='16' height='16' fill='%23c0c0c0'/%3E%3C/svg%3E")}.cell.flagged{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='レイヤー_1' x='0px' y='0px' width='76px' height='76px' viewBox='0 0 76 76' enable-background='new 0 0 76 76' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath id='rect1313_65_' fill='%23FDFCFD' d='M0.009,0h75.982C75.996,0,76,0.004,76,0.009V75.99c0,0.006-0.004,0.01-0.009,0.01H0.009 C0.004,76,0,75.996,0,75.99V0.009C0,0.004,0.004,0,0.009,0z'/%3E%3Cpath id='path1341_65_' fill='%23757575' d='M75.99,0C75.995,0,76,0.005,76,0.01v75.981C76,75.996,75.995,76,75.99,76H0.009 C0.004,76,0,75.996,0,75.991L75.99,0z'/%3E%3Cpolygon id='rect1311_65_' fill='%23B9B9B9' points='8.508,8.5 67.492,8.5 67.5,8.508 67.5,67.491 67.492,67.5 8.508,67.5 8.5,67.491 8.5,8.508 '/%3E%3C/g%3E%3Cg%3E%3Cpolygon points='35.999,55.5 35.999,16.5 40,16.5 40,55.5 35.999,55.5 '/%3E%3Cpolygon fill='%23FF0000' points='40,13.875 19.375,27 40,40.125 '/%3E%3Crect x='28.571' y='51.625' width='18.857' height='5.5'/%3E%3Crect x='20.222' y='56.459' width='35.555' height='7.041'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.cell.cleared{background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' fill='%23c0c0c0' stroke='%23808080' stroke-width='1'/%3E%3C/svg%3E");background-size:var(--cell-size) var(--cell-size)}.cover{display:flex;width:100%;height:100%;place-items:center;justify-content:center;text-align:center}.cell.highlight .cover{background:#00dc0066}.cell.subhighlight{border-radius:2px;border-color:#ff0;border-style:inset solid;box-sizing:border-box}.showMine:after{content:"";position:absolute;inset:0;margin:auto;background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xml:space='preserve'%20width='25mm'%20height='25mm'%20style='shape-rendering:geometricPrecision;%20text-rendering:geometricPrecision;%20image-rendering:optimizeQuality;%20fill-rule:evenodd;%20clip-rule:evenodd'%20viewBox='0%200%201.06553%201.06553'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cstyle%20type='text/css'%3e%3c![CDATA[%20.fil3%20{fill:url(%23id0);}%20]]%3e%3c/style%3e%3cradialGradient%20id='id0'%20gradientUnits='userSpaceOnUse'%20cx='0.504771'%20cy='0.511833'%20r='0.154587'%20fx='0.504771'%20fy='0.511833'%3e%3cstop%20offset='0'%20style='stop-color:%23ccc'/%3e%3cstop%20offset='0.129412'%20style='stop-color:%23aaa'/%3e%3cstop%20offset='0.290196'%20style='stop-color:%23888'/%3e%3cstop%20offset='0.439216'%20style='stop-color:%23666'/%3e%3cstop%20offset='0.74902'%20style='stop-color:%23333'/%3e%3cstop%20offset='1'%20style='stop-color:%23000'/%3e%3c/radialGradient%3e%3c/defs%3e%3cg%20id='Layer_x0020_1'%3e%3cpolygon%20class='fil2%20str0'%20points='0.131584,0.593022%200.125187,0.565476%200.131584,0.537551%200.537551,0.537551%200.537551,0.131584%200.565118,0.126214%200.593022,0.131584%200.593022,0.537551%200.998993,0.537551%201.00304,0.565412%200.998993,0.593022%200.593022,0.593022%200.593022,0.998993%200.566636,1.00379%200.537551,0.998993%200.537551,0.593022%20'/%3e%3ccircle%20class='fil2%20str0'%20cx='0.347038'%20cy='0.344118'%20r='0.0439861'/%3e%3cpolygon%20class='fil2%20str0'%20points='0.298578,0.86844%200.274783,0.854917%200.262133,0.831995%200.528843,0.565289%200.262133,0.298583%200.277417,0.275576%200.298578,0.262137%200.565285,0.528843%200.831995,0.262133%200.855045,0.27584%200.86844,0.298578%200.60173,0.565289%200.86844,0.831999%200.855923,0.855726%200.831995,0.868445%200.565285,0.601734%20'/%3e%3ccircle%20class=''%20cx='0.567575'%20cy='0.256911'%20r='0.0439861'/%3e%3ccircle%20class='fil3'%20cx='0.565289'%20cy='0.560246'%20r='0.302585'/%3e%3ccircle%20class=''%20cx='0.774987'%20cy='0.355903'%20r='0.0439861'/%3e%3ccircle%20class=''%20cx='0.354109'%20cy='0.774903'%20r='0.0439861'/%3e%3ccircle%20class=''%20cx='0.774987'%20cy='0.774903'%20r='0.0439861'/%3e%3c/g%3e%3c/svg%3e");opacity:.5;background-size:70% 70%;background-repeat:no-repeat;background-position:center}.showMine{position:relative}:root{--border-highlight: #778088;--border-midtone: #474e56;--border-lowlight: #1e262e;--border-width: 20px;--glow-color: #00a8ff;--glow-color-dim: #004f7c}.mineboard{display:flex;height:fit-content;justify-content:center}.bottom-left-corner{width:var(--border-width);height:var(--border-width);position:absolute;bottom:calc(-1 * var(--border-width));left:calc(-1 * var(--border-width));background:var(--border-midtone)}.top-left-corner{width:var(--border-width);height:var(--border-width);position:absolute;top:calc(-1 * var(--border-width));left:calc(-1 * var(--border-width));background:var(--border-midtone)}.top-right-corner{width:var(--border-width);height:var(--border-width);position:absolute;top:calc(-1 * var(--border-width));right:calc(-1 * var(--border-width));background:var(--border-midtone)}.bottom-right-corner{width:var(--border-width);height:var(--border-width);position:absolute;bottom:calc(-1 * var(--border-width));right:calc(-1 * var(--border-width));background:var(--border-midtone)}.bottom-left-inner{bottom:calc(var(--border-width) - (var(--border-width) / 4));left:calc(var(--border-width) - (var(--border-width) / 4));position:absolute;background:linear-gradient(135deg,var(--border-lowlight),49%,var(--border-highlight) 51%);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4)}.top-left-inner{left:calc(var(--border-width) - (var(--border-width) / 4));top:calc(var(--border-width) - (var(--border-width) / 4));position:absolute;background:var(--border-lowlight);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4)}.top-right-inner{top:calc(var(--border-width) - (var(--border-width) / 4));right:calc(var(--border-width) - (var(--border-width) / 4));position:absolute;background:linear-gradient(135deg,var(--border-lowlight),49%,var(--border-highlight) 51%);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4)}.bottom-right-inner{bottom:calc(var(--border-width) - (var(--border-width) / 4));right:calc(var(--border-width) - (var(--border-width) / 4));position:absolute;background:var(--border-highlight);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4)}.bottom-left-outer{bottom:0;left:0;position:absolute;background:linear-gradient(135deg,var(--border-highlight),49%,var(--border-lowlight) 51%);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4);z-index:5}.top-left-outer{top:0;left:0;position:absolute;background:var(--border-highlight);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4);z-index:5}.top-right-outer{top:0;right:0;position:absolute;background:linear-gradient(135deg,var(--border-highlight),49%,var(--border-lowlight) 51%);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4);z-index:5}.bottom-right-outer{bottom:0;right:0;position:absolute;background:var(--border-lowlight);height:calc(var(--border-width) / 4);width:calc(var(--border-width) / 4);z-index:5}.bottom-left-left-side,.top-left-left-side{position:absolute;left:0;height:100%;width:calc(var(--border-width) / 4);z-index:3;background:var(--border-highlight)}.top-right-left-side,.bottom-right-left-side{position:absolute;right:0;height:100%;width:calc(var(--border-width) / 4);z-index:3;background:var(--border-lowlight)}.bottom-left-bottom-side{position:absolute;bottom:0;width:100%;height:calc(var(--border-width) / 4);z-index:3;background:var(--border-lowlight)}.top-left-bottom-side,.top-right-bottom-side{position:absolute;top:0;width:100%;height:calc(var(--border-width) / 4);z-index:3;background:var(--border-highlight)}.bottom-right-bottom-side{position:absolute;bottom:0;width:100%;height:calc(var(--border-width) / 4);z-index:3;background:var(--border-lowlight)}.inline-mine{display:inline-flex}.region-glow{box-shadow:inset 0 0 0 2px var(--glow-color),0 0 8px 2px var(--glow-color),0 0 12px 4px var(--glow-color-dim)}.flex{display:flex;flex-wrap:wrap}.center{justify-content:center}.gap-10{gap:1em}.cell.cleared.mine{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xml:space='preserve'%20width='25mm'%20height='25mm'%20style='shape-rendering:geometricPrecision;%20text-rendering:geometricPrecision;%20image-rendering:optimizeQuality;%20fill-rule:evenodd;%20clip-rule:evenodd'%20viewBox='0%200%201.06553%201.06553'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cstyle%20type='text/css'%3e%3c![CDATA[%20.fil3%20{fill:url(%23id0);}%20]]%3e%3c/style%3e%3cradialGradient%20id='id0'%20gradientUnits='userSpaceOnUse'%20cx='0.504771'%20cy='0.511833'%20r='0.154587'%20fx='0.504771'%20fy='0.511833'%3e%3cstop%20offset='0'%20style='stop-color:%23ccc'/%3e%3cstop%20offset='0.129412'%20style='stop-color:%23aaa'/%3e%3cstop%20offset='0.290196'%20style='stop-color:%23888'/%3e%3cstop%20offset='0.439216'%20style='stop-color:%23666'/%3e%3cstop%20offset='0.74902'%20style='stop-color:%23333'/%3e%3cstop%20offset='1'%20style='stop-color:%23000'/%3e%3c/radialGradient%3e%3c/defs%3e%3cg%20id='Layer_x0020_1'%3e%3cpolygon%20class='fil2%20str0'%20points='0.131584,0.593022%200.125187,0.565476%200.131584,0.537551%200.537551,0.537551%200.537551,0.131584%200.565118,0.126214%200.593022,0.131584%200.593022,0.537551%200.998993,0.537551%201.00304,0.565412%200.998993,0.593022%200.593022,0.593022%200.593022,0.998993%200.566636,1.00379%200.537551,0.998993%200.537551,0.593022%20'/%3e%3ccircle%20class='fil2%20str0'%20cx='0.347038'%20cy='0.344118'%20r='0.0439861'/%3e%3cpolygon%20class='fil2%20str0'%20points='0.298578,0.86844%200.274783,0.854917%200.262133,0.831995%200.528843,0.565289%200.262133,0.298583%200.277417,0.275576%200.298578,0.262137%200.565285,0.528843%200.831995,0.262133%200.855045,0.27584%200.86844,0.298578%200.60173,0.565289%200.86844,0.831999%200.855923,0.855726%200.831995,0.868445%200.565285,0.601734%20'/%3e%3ccircle%20class=''%20cx='0.567575'%20cy='0.256911'%20r='0.0439861'/%3e%3ccircle%20class='fil3'%20cx='0.565289'%20cy='0.560246'%20r='0.302585'/%3e%3ccircle%20class=''%20cx='0.774987'%20cy='0.355903'%20r='0.0439861'/%3e%3ccircle%20class=''%20cx='0.354109'%20cy='0.774903'%20r='0.0439861'/%3e%3ccircle%20class=''%20cx='0.774987'%20cy='0.774903'%20r='0.0439861'/%3e%3c/g%3e%3c/svg%3e");background-size:contain;background-position:center;background-repeat:no-repeat}#reset{grid-column:1/ -1;padding:0 .5em;border-radius:0%}.region-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.region-overlay line{opacity:.5}.region-path{transition:all .3s ease;cursor:pointer}.region-path:hover path:first-child{fill:#ffffff87}.step-by-step{background:var(--bg-highlight);border-radius:var(--large-radius);padding:15px}.circles-container{display:flex;margin-top:10px;justify-content:center;gap:8px;margin-bottom:10px}.circle{height:10px;width:10px;border-radius:100%;background-color:#bbb}.circle.active{background-color:#3bd1d9}.step-header{margin:0 auto;text-align:center}.step-controls{display:flex;justify-content:center;gap:10px;margin-top:10px}.step-explanation{margin-top:10px;text-align:center}.step-by-step button{background:#d5d5d5;width:40px;height:40px;padding:0;border:none;box-sizing:content-box;text-align:center;border-radius:100%}.step-by-step h3{margin:0}.inline-flex{width:100%;justify-content:center;display:inline-flex;gap:5px}.description{max-width:400px;background:#c4c4c4;border-radius:0 15px 15px 0;width:200px;padding:10px;text-align:left}.highlight{cursor:pointer;padding:2px;border-radius:5px;font-weight:700}.example-builder{max-width:1200px;margin:0 auto;padding:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.example-builder h2{margin-bottom:20px;color:#333}.editor-controls{display:flex;flex-direction:column;gap:16px;margin-bottom:20px;padding:16px;border:1px solid #ddd;border-radius:6px;background:#f9f9f9}.editor-controls>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.regions-editor{display:flex;flex-direction:column;gap:16px;width:100%}.region-selector{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.existing-regions{margin-top:10px}.existing-regions label{display:block;margin-bottom:6px}.regions-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:4px;padding:8px}.region-item{display:flex;align-items:center;gap:8px;padding:6px;border-radius:4px;cursor:pointer}.region-item:hover{background-color:#f0f0f0}.region-item.selected{background-color:#e0e0f0}.region-item .color-swatch{width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}.region-item .region-name{font-weight:500}.region-item .cell-count{color:#666;font-size:.85em;margin-left:auto}.region-item button{padding:3px 6px;font-size:.8em}.editor-controls label{min-width:120px;font-weight:500}.editor-controls input[type=number],.editor-controls input[type=text],.editor-controls select{padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.editor-controls input[type=text]{flex-grow:1;min-width:150px}.editor-controls button{padding:6px 12px;background:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.editor-controls button:hover{background:#3a80d2}.step-navigation{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:12px;border:1px solid #ddd;border-radius:6px;background:#f9f9f9}.step-navigation button{padding:8px 16px;background:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer}.step-navigation button:hover{background:#3a80d2}.step-navigation button:disabled{background:#ccc;cursor:not-allowed}.step-navigation span{flex-grow:1;text-align:center;font-weight:500}.board-editor{margin-bottom:20px;padding:16px;border:1px solid #ddd;border-radius:6px;background:#fff;display:flex;justify-content:center}.board-container{position:relative;cursor:pointer}.board-container:hover:before{content:"";position:absolute;inset:0;background:#0000000d;z-index:5}.code-output{padding:16px;border:1px solid #ddd;border-radius:6px;background:#f9f9f9}.code-output h3{margin-top:0;margin-bottom:16px;font-size:18px}.code-output pre{padding:12px;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;overflow:auto;max-height:300px;font-family:monospace;font-size:14px;line-height:1.5;white-space:pre-wrap}.code-output button{display:block;margin-top:12px;padding:8px 16px;background:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer}.code-output button:hover{background:#3a80d2}@media (max-width: 768px){.editor-controls>div{flex-direction:column;align-items:flex-start}.editor-controls input,.editor-controls select{width:100%}.step-navigation{flex-wrap:wrap;justify-content:center}.step-navigation span{flex-basis:100%;margin-bottom:10px}}