:root{--background-color:#fff;--foreground-color:#444;--header-text-color:#fff;--pale-color:#888;--a-color:#447f88;--a-visited-color:#754488;--box-shadow-color:#999;--warning-red-color:red;--hamburger-button-hover-color:#ffffff40;--theme-color:#65a2ac;--dec2bin-color:#65a2ac;--bin2dec-color:#65ac86;--power-of-two-color:#a665ac;--addition-color:#656eac;--complement-color:#6588ac;--dec2hex-color:#65aca0;--iro-iroiro-color:#ac657c;--ctc-color:#aaac65;--network-simulator-color:#7c65ac;--not-found-color:gray;--home-color:#325156;--gray-color:#e9e9ed;--hint-gray-color:#f0f0f0;--history-correct-color:#adff2f;--history-wrong-color:#ffb6c1;--history-gray-color:#d3d3d3;--zero-gray-color:#00000080;--complement-marker-color:#95c9fe;--lan-cable-color:#00aeda}@media (prefers-color-scheme:dark){:root{--background-color:#121212;--foreground-color:#fff;--header-text-color:#fff;--pale-color:#9c9c9c;--a-color:#58a5b0;--a-visited-color:#bb6cd9;--box-shadow-color:#8b8b8b;--home-color:#bfd6d9;--hint-gray-color:#303030;--history-correct-color:#66971c;--history-wrong-color:#b38188;--complement-marker-color:#597998}}.mono{font-family:Noto Sans Mono,monospace}html{background-color:var(--background-color);color:var(--foreground-color);font-family:Noto Sans JP,sans-serif;font-size:100%;font-weight:400}body{margin:0;overflow-x:hidden}.body-container{flex-direction:column;width:100vw;height:100vh;display:flex}header{color:var(--header-text-color);grid-template-columns:min(20%,260px) auto min(20%,260px);align-items:center;width:100%;height:50px;min-height:50px;display:grid}@media (width<=1199px){header{grid-template-columns:min(20%,260px) auto 1rem}}header div.header-left{padding:0 1rem;display:inline-flex}header div.header-center{justify-content:space-between;display:flex}header div.header-center>div{align-items:center;display:inline-flex}header h1{margin-top:0;margin-bottom:0;font-family:Noto Sans JP,sans-serif;font-size:1.5rem;font-weight:400}@media (width<=599px){header h1{font-size:1rem}}.main-container{flex:1;display:flex}nav{z-index:1;scrollbar-width:none;-ms-overflow-style:none;width:max(20%,260px);height:fit-content;max-height:calc(100% - 50px);transition:all .5s ease-in-out;position:absolute;left:0;overflow-y:scroll}nav.flagged{z-index:2;transition:all .5s ease-in-out;left:calc(-1*max(20%,260px))}@media (width<=799px){nav{z-index:2;background-color:var(--background-color);width:max(20%,260px);height:calc(100% - 40px);left:calc(-1*max(20%,260px))}nav.flagged{z-index:1;left:0}}nav::-webkit-scrollbar{display:none}nav ul{padding-left:0;list-style:none}nav a{color:var(--pale-color);padding:5px 3rem 5px 1rem;text-decoration:none;display:block}nav a:visited{color:var(--pale-color)}nav a:hover,nav a.current-location{color:var(--background-color);border-radius:4px}button{appearance:none;cursor:pointer;border:none;border-radius:4px;outline:none;width:200px;height:40px;margin-bottom:20px;font-family:Noto Sans JP,sans-serif;font-size:1rem;position:relative}@media (width<=599px){button{width:100%;margin:0}}header.home,nav a[href$=taidalab\/]:hover,nav a[href$=taidalab\/].current-location,nav a[href$="taidalab/about/"]:hover,nav a[href$="taidalab/about/"].current-location,nav a[href$="taidalab/terms/"]:hover,nav a[href$="taidalab/terms/"].current-location,nav a[href$="taidalab/information-policy/"]:hover,nav a[href$="taidalab/information-policy/"].current-location{background-color:var(--theme-color)}header.dec2bin,nav a[href$="taidalab/endless-binary/dec2bin-1/"]:hover,nav a[href$="taidalab/endless-binary/dec2bin-1/"].current-location,nav a[href$="taidalab/endless-binary/dec2bin-2/"]:hover,nav a[href$="taidalab/endless-binary/dec2bin-2/"].current-location,.course-button-d2b1,.course-button-d2b2,main.dec2bin>div.help-window>div>span:hover{background-color:var(--dec2bin-color)}header.home,header.dec2bin{color:#f0f8ff}main.dec2bin>form>button{background:#8bb9c1}main.dec2bin>form>button:hover{background-color:#a2c7cd}.course-button-d2b1:hover,.course-button-d2b2:hover{background-color:#5a919a}header.bin2dec,nav a[href$="taidalab/endless-binary/bin2dec-1/"]:hover,nav a[href$="taidalab/endless-binary/bin2dec-1/"].current-location,nav a[href$="taidalab/endless-binary/bin2dec-2/"]:hover,nav a[href$="taidalab/endless-binary/bin2dec-2/"].current-location,.course-button-b2d1,.course-button-b2d2,main.bin2dec>div.help-window>div>span:hover{background-color:var(--bin2dec-color)}main.bin2dec>form>button{color:#1e3328;background:#95fec6}main.bin2dec>form>button:hover{background-color:#86e5b2}.course-button-b2d1:hover,.course-button-b2d2:hover{background-color:#5a9a78}header.power-of-two,nav a[href$="taidalab/endless-binary/power-of-two-1/"]:hover,nav a[href$="taidalab/endless-binary/power-of-two-1/"].current-location,nav a[href$="taidalab/endless-binary/power-of-two-2/"]:hover,nav a[href$="taidalab/endless-binary/power-of-two-2/"].current-location,.course-button-pot1,.course-button-pot2,main.power-of-two>div.help-window>div>span:hover{background-color:var(--power-of-two-color)}main.power-of-two>form>button{color:indigo;background:plum}main.power-of-two>form>button:hover{background-color:#c690c6}.course-button-pot1:hover,.course-button-pot2:hover{background-color:#955a9a}header.addition,header.subtraction,nav a[href$="taidalab/endless-binary/addition/"]:hover,nav a[href$="taidalab/endless-binary/addition/"].current-location,nav a[href$="taidalab/endless-binary/subtraction/"]:hover,nav a[href$="taidalab/endless-binary/subtraction/"].current-location,.course-button-add,.course-button-sub,main.addition>div.help-window>div>span:hover,main.subtraction>div.help-window>div>span:hover{background-color:var(--addition-color)}main.addition>form>button,main.subtraction>form>button{color:#1e2133;background:#95a2fe}main.addition>form>button:hover,main.subtraction>form>button:hover{background-color:#8692e5}.course-button-add:hover,.course-button-sub:hover{background-color:#5a639a}header.complement,nav a[href$="taidalab/endless-binary/complement/"]:hover,nav a[href$="taidalab/endless-binary/complement/"].current-location,.course-button-cmp,main.complement>div.help-window>div>span:hover{background-color:var(--complement-color)}main.complement>form>button{color:#1e2833;background:#95c9fe}main.complement>form>button:hover{background-color:#86b5e5}.course-button-cmp:hover{background-color:#5a7a9a}span.complement.marker{background-color:var(--complement-marker-color)}header.dec2hex,header.hex2dec,nav a[href$="taidalab/endless-binary/dec2hex/"]:hover,nav a[href$="taidalab/endless-binary/dec2hex/"].current-location,nav a[href$="taidalab/endless-binary/hex2dec/"]:hover,nav a[href$="taidalab/endless-binary/hex2dec/"].current-location,.course-button-d2h,main.dec2hex>div.help-window>div>span:hover,main.hex2dec>div.help-window>div>span:hover{background-color:var(--dec2hex-color)}main.dec2hex>form>button,main.hex2dec>form>button{color:#1e3330;background:#95feec}main.dec2hex>form>button:hover,main.hex2dec>form>button:hover{background-color:#86e5d5}.course-button-d2h:hover{background-color:#5a9a90}header.iro-iroiro,nav a[href$="taidalab/iro-iroiro/"]:hover,nav a[href$="taidalab/iro-iroiro/"].current-location,main.iro-iroiro>div.help-window>div>span:hover{background-color:var(--iro-iroiro-color)}main.iro-iroiro>form>button{color:#331e25;background:#fe95b7}main.iro-iroiro>form>button:hover{background-color:#e586a5}nav a[href=\#]:hover,nav a[href=\#].current-location,div.help-window>div>span.ctc:hover{background-color:var(--ctc-color)}header.network-simulator,nav a[href$="taidalab/network-simulator/"]:hover,nav a[href$="taidalab/network-simulator/"].current-location,main.network-simulator>div.help-window>div>span:hover{background-color:var(--network-simulator-color)}main.network-simulator>form>button{color:#251e33;background:#b795fe}main.network-simulator>form>button:hover{background-color:#a586e5}header.not-found{background-color:var(--not-found-color)}main.not-found>form>button{color:#262626;background:#bdbdbd}main.not-found>form>button:hover{background-color:#aaa}button.gray{color:#333;background-color:var(--gray-color);width:160px}button.gray:hover{background-color:#d0d0d7}main{width:calc(min(80%,100% - 260px) - 4rem);max-width:1200px;margin-left:max(20%,260px);padding:20px 2rem 0;transition:all .5s ease-in-out}main.flagged{width:calc(90% - 4rem);max-width:90%;margin:0 5%}@media (width<=799px){main,main.flagged{width:92%;max-width:92%;margin:0;padding:20px 1rem 0}}footer{color:var(--pale-color);flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;width:90%;margin:40px auto 20px;display:flex}footer a{text-decoration:none}@media (width<=799px){footer{gap:.25rem 1.5rem;margin:1rem auto .5rem}}a{color:var(--a-color)}a:visited{color:var(--a-visited-color)}.home-center{max-width:300px;color:var(--home-color);text-align:center;margin:auto;padding-top:1rem;position:absolute;left:0;right:0}@media (width<=599px){.home-center{text-align:center;font-family:serif;font-size:1.5rem}}.home-title{font-family:Oooh Baby,cursive;font-size:5rem}@media (width<=599px){.home-title{font-size:4rem}}.home-subtitle{font-family:Zen Kurenaido,sans-serif;font-size:1.75rem}.button-container{grid-template-rows:200px 200px 200px;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;display:grid}@media (width<=999px){.button-container{grid-template-rows:200px 200px 200px;grid-template-columns:1fr 1fr 1fr}}@media (width<=799px){.button-container{grid-template-rows:5rem 5rem 5rem 5rem 5rem;grid-template-columns:1fr 1fr;gap:10px}}@media (width<=599px){.button-container{flex-direction:column;gap:0;display:flex}}form.button-container button{appearance:none;color:var(--background-color);cursor:pointer;border:none;border-radius:4px;outline:none;font-size:1.75rem;position:relative}@media (width<=799px){form.button-container button{font-size:1.25rem}}@media (width<=599px){form.button-container button{height:60px;margin:5px 0;font-size:1.25rem}}.no-display{display:none}.question-number{font-size:1.5rem;font-weight:700}input{color:var(--foreground-color);background-color:var(--background-color);border:2px solid;border-color:var(--foreground-color);border-radius:4px;height:32px;padding:2px 5px;font-size:1.25rem}form.endless-binary{grid-template:"i s b"40px"e e e"40px"h h h"1fr/300px 40px 1fr;gap:0 5px;width:100%;padding:5px 0;display:grid}form.endless-binary>input{grid-area:i}form.endless-binary>span{grid-area:s;width:fit-content;line-height:40px}form.endless-binary>button{grid-area:b}form.endless-binary>div.error-area{grid-area:e}form.endless-binary>div.hint-area{grid-area:h}:is(form.endless-binary:has(button.addition),form.endless-binary:has(button.subtraction)){grid-template:"i s b"40px"e e e"40px"h h h"1fr/20.25ch 40px 1fr}@media (width<=599px){form.endless-binary{grid-template:"i s"40px"b b"40px"e e"40px"h h"1fr/80% 1fr;gap:15px 5px}:is(form.endless-binary:has(button.addition),form.endless-binary:has(button.subtraction)){grid-template:"i s"40px"b b"40px"e e"40px"h h"1fr/20.25ch 1fr;gap:15px 5px}}:is(form.endless-binary:has(button.addition) input,form.endless-binary:has(button.subtraction) input){text-align:right;font-size:1.5rem;font-weight:700}div.history-area>h2,div.hint-area h2{color:var(--pale-color);font-size:1.25rem}div.hint-area h2{display:inline}div.hint-area h3{color:var(--pale-color);font-size:1.15rem}div.hint-area details>p,div.hint-area details>div{margin-left:2rem}div.hint-area details>ol{margin-left:1.5rem}details summary:hover{cursor:pointer}.hint-bgcolor-gray{background-color:var(--hint-gray-color)}main.dec2bin div.hint-area svg>text,main.dec2hex div.hint-area svg>text{white-space:pre;font-family:Courier New;font-size:1.25rem}.history-area{margin-top:10px}div.history-area>div{margin-left:2rem;font-family:Noto Sans Mono,monospace;font-size:18px}div.history-area>div>div{align-items:center;margin:3px 0;display:inline-flex}div.history-area>div>div.history-correct{background-color:var(--history-correct-color)}div.history-area>div>div.history-wrong{background-color:var(--history-wrong-color)}div.history-area>div>div>span.material-symbols-outlined{font-variation-settings:"opsz" 20;margin-right:.5rem;font-size:18px;line-height:18px}div.history-area>div>div.history-wrong>span.material-symbols-outlined{font-variation-settings:"FILL" 1}.history-indented{margin-left:2rem}.history-indented>svg>text{color:var(--foreground-color);fill:var(--foreground-color)}.history-indented>svg>path{stroke:var(--foreground-color)}.history-correct{background-color:var(--history-correct-color)}.history-wrong{background-color:var(--history-wrong-color)}.history-lightgray{background-color:var(--history-gray-color)}.zero-gray{color:var(--zero-gray-color)}.error-area{width:100%;color:var(--warning-red-color)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes draw-line{0%{text-decoration:none}to{text-decoration:underline}}main.iro-iroiro>div.output-area{scrollbar-width:none;overflow:scroll hidden}main.iro-iroiro>div.output-area::-webkit-scrollbar{display:none}div.color-row{flex-direction:row;display:flex}div.color-div{align-items:center;min-width:12rem;height:130px;margin:10px 0;display:flex}div.color-div>div{width:fit-content;margin:auto}div.color-div>div>span:not(.white){color:#000}div.color-div .white{color:#fff}main.network-simulator>form input{width:17ch}main.iro-iroiro>form,main.network-simulator>form:first-of-type{flex-flow:wrap;gap:10px 15px;width:100%;padding:5px 0;display:flex}@media (width<=1199px){main.network-simulator>form{flex-direction:column;gap:10px 15px}}main.network-simulator>form+form{flex-flow:wrap;gap:10px;width:100%;display:flex}main.network-simulator>form+form button{margin:0}main.iro-iroiro>form>label>input{border:none;border-bottom:2px solid;border-radius:0;width:4rem;padding:2px 0 2px 10px;font-family:Noto Sans Mono,monospace}main.iro-iroiro>form>label>input:invalid{background-color:var(--history-wrong-color)}.calculation-area{flex-direction:column;justify-content:flex-start;width:12rem;margin:0;padding:0;display:flex}.first-row,.second-row{flex-direction:row;justify-content:flex-end;display:flex}.first-row>div,.second-row>div{flex-direction:row;justify-content:flex-end;display:inline-flex}.first-row span,.second-row span{width:1rem}.under-line{border-bottom:2px solid var(--background-color)}.explanation h3{margin-top:0;margin-bottom:0;font-size:1rem}.explanation dd{margin-top:.25rem;margin-bottom:2rem;margin-left:1rem}.explanation p{margin-top:0}span.hamburger-button{background:0 0}span.hamburger-button:hover{background-color:var(--hamburger-button-hover-color);cursor:pointer}.barrier{display:none}@media (width<=799px){.barrier.flagged{opacity:.2;background-color:var(--foreground-color);width:100%;height:100%;display:block;position:absolute;top:0;left:0}header{grid-template-columns:50px auto 1rem;height:40px;min-height:40px}}div.hint-table{flex-direction:column;padding-left:2rem;display:flex}div.hint-table>div{display:flex}div.hint-table>div>span{text-align:center;width:3rem;min-width:3rem;margin:1px 4px}main.bin2dec div.hint-table>div:nth-of-type(2)>span{background-color:#95fec6;font-size:3rem}main.hex2dec div.hint-table>div:nth-of-type(2)>span{background-color:#95feec;font-size:3rem}div.hint-table>div:nth-of-type(3)>span{background-color:#ccc}div.hint-table>div>div{width:3rem;min-width:3rem;line-height:100%}div.hint-table>div>div>span{vertical-align:middle;line-height:normal;display:inline-block}main.network-simulator>form~form>button>span>span.material-symbols-outlined{font-size:18px}main.network-simulator>form~div.output-area>div{align-items:center;margin:3px 0;font-size:18px;display:inline-flex}main.network-simulator>form~div.output-area>div>span.material-symbols-outlined{font-variation-settings:"opsz" 20;margin-right:.5rem;font-size:18px;line-height:18px}main.network-simulator>form~div.output-area>div.history-wrong>span.material-symbols-outlined{font-variation-settings:"FILL" 1}main.network-simulator>form~form>button{color:#333;background-color:var(--gray-color);width:160px}main.network-simulator>form~form>button:hover{background-color:#d0d0d7}main.network-simulator>form~form>button>span{align-items:center;display:inline-flex}.device{z-index:3;position:absolute}.device-image{position:relative}div.device-container>svg>g>path{cursor:move}div.device-container.selected>svg>g>path{filter:drop-shadow(0px 2px 4px var(--foreground-color))}.device-note{font-size:.8rem}.device-prop{cursor:pointer}span.device-prop.ipv4:before{content:"IPv4: "}span.device-prop.subnetmask:before{content:"SubnetMask: "}div.client>svg>g>path{fill:var(--foreground-color);stroke:none}div.client>svg>g>path.background{fill:var(--background-color)}div.router>svg>g>path{fill:var(--foreground-color);stroke:none}div.router>svg>g>path.inner{fill:var(--background-color);stroke:none}@media (prefers-color-scheme:dark){div.router>svg>g>path{fill:var(--background-color);stroke:var(--foreground-color);stroke-width:1px}div.router>svg>g>path.inner{fill:var(--foreground-color)}}div.hub>svg>g>path{fill:var(--background-color);stroke:var(--foreground-color);stroke-width:2px}div.hub>svg>g>path.inner{fill:var(--foreground-color);stroke-width:1px}@media (prefers-color-scheme:dark){div.hub>svg>g>path{fill:var(--foreground-color);stroke:var(--foreground-color)}div.hub>svg>g>path.inner{fill:var(--background-color);stroke:var(--background-color)}}div.lan-cable{pointer-events:none;z-index:3;width:fit-content;position:absolute;top:0;left:0}div.lan-cable>svg{pointer-events:none;z-index:3;position:absolute}div.lan-cable>svg>g>polyline{stroke:var(--lan-cable-color);stroke-width:5px;fill:none;pointer-events:auto}div.lan-cable>svg>g>polyline:hover{cursor:move}div.lan-cable>span{display:none}div.lan-cable.selected>svg>g>polyline{filter:drop-shadow(0px 2px 4px var(--lan-cable-color))}.icon-vertical-center{align-items:center;display:inline-flex}span.help-button,div.help-window>div>span{cursor:pointer;font-size:1.5rem}span.help-button:hover{font-variation-settings:"FILL" 1}div.help-window>div{text-align:right;width:100%}div.help-window>div>span:hover{color:var(--background-color)}div.help-window>p>span.material-symbols-outlined{font-size:18px}@media (width<=599px){span.help-button{font-size:1rem}}div.help-window{display:none}div.help-window.active{background-color:var(--background-color);opacity:.95;z-index:5;width:fit-content;max-width:80%;height:fit-content;max-height:60%;box-shadow:0px 0px 5px 1px var(--box-shadow-color);scrollbar-width:thin;margin:auto;padding:0 2rem 2rem;display:block;position:absolute;inset:0;overflow-y:auto}.help-barrier{display:none}.help-barrier.active{z-index:4;opacity:0;width:100%;height:100%;display:block;position:absolute;top:0;left:0}