@charset "UTF-8";:root{--background-color: #ffffff;--foreground-color: #444444;--header-text-color: #ffffff;--pale-color: #888888;--a-color: #447f88;--a-visited-color: #754488;--box-shadow-color: #999999;--warning-red-color: #ff0000;--hamburger-button-hover-color: rgba(255, 255, 255, .25);--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: #808080;--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: rgba(0, 0, 0, .5);--complement-marker-color: #95c9fe;--lan-cable-color: #00aeda}@media (prefers-color-scheme: dark){:root{--background-color: #121212;--foreground-color: #ffffff;--header-text-color: #ffffff;--pale-color: #9c9c9c;--a-color: #58a5b0;--a-visited-color: #bb6cd9;--box-shadow-color: #8b8b8b;--home-color: hsl(188, 26%, 80%);--hint-gray-color: #303030;--history-correct-color: hsl(84, 69%, 35%);--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-weight:400;font-size:100%}body{margin:0;overflow-x:hidden}.body-container{display:flex;flex-direction:column;width:100vw;height:100vh}header{color:var(--header-text-color);height:50px;width:100%;min-height:50px;align-items:center;display:grid;grid-template-columns:min(20%,260px) auto min(20%,260px)}@media (max-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{display:flex;justify-content:space-between}header div.header-center>div{display:inline-flex;align-items:center}header h1{font-family:Noto Sans JP,sans-serif;font-weight:400;font-size:1.5rem;margin-top:0;margin-bottom:0}@media (max-width: 599px){header h1{font-size:1rem}}.main-container{display:flex;flex:1}nav{position:absolute;left:0;z-index:1;width:max(20%,260px);height:fit-content;max-height:calc(100% - 50px);overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none;transition:all .5s ease-in-out 0s}nav.flagged{left:calc(max(20%,260px)*-1);z-index:2;transition:all .5s ease-in-out 0s}@media (max-width: 799px){nav{width:max(20%,260px);left:calc(max(20%,260px)*-1);z-index:2;height:calc(100% - 40px);background-color:var(--background-color)}nav.flagged{left:0;z-index:1}}nav::-webkit-scrollbar{display:none}nav ul{list-style:none;padding-left:0}nav a{color:var(--pale-color);padding:5px;padding-left:1rem;padding-right:3rem;display:block;text-decoration:none}nav a:visited{color:var(--pale-color)}nav a:hover,nav a.current-location{color:var(--background-color);border-radius:4px}button{appearance:none;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;font-size:1rem;border-radius:4px;width:200px;height:40px;margin-bottom:20px;position:relative;cursor:pointer;font-family:Noto Sans JP,sans-serif}@media (max-width: 599px){button{width:100%;margin:0}}header.home,nav a.home:hover,nav a.home.current-location{background-color:var(--theme-color)}header.dec2bin,nav a.dec2bin:hover,nav a.dec2bin.current-location,.course-button-d2b1,.course-button-d2b2,span.help-close.dec2bin:hover{background-color:var(--dec2bin-color)}header.home,header.dec2bin{color:#f0f8ff}button.dec2bin{background:#8bb9c1}button.dec2bin:hover{background-color:#a2c7cd}.course-button-d2b1:hover,.course-button-d2b2:hover{background-color:#5a919a}header.bin2dec,nav a.bin2dec:hover,nav a.bin2dec.current-location,.course-button-b2d1,.course-button-b2d2,span.help-close.bin2dec:hover{background-color:var(--bin2dec-color)}button.bin2dec{color:#1e3328;background:#95fec6}button.bin2dec:hover{background-color:#86e5b2}.course-button-b2d1:hover,.course-button-b2d2:hover{background-color:#5a9a78}header.power-of-two,nav a.power-of-two:hover,nav a.power-of-two.current-location,.course-button-pot1,.course-button-pot2,span.help-close.power-of-two:hover{background-color:var(--power-of-two-color)}button.power-of-two{color:indigo;background:plum}button.power-of-two:hover{background-color:#c690c6}.course-button-pot1:hover,.course-button-pot2:hover{background-color:#955a9a}header.addition,header.subtraction,nav a.addition:hover,nav a.addition.current-location,nav a.subtraction:hover,nav a.subtraction.current-location,.course-button-add,.course-button-sub,span.help-close.addition:hover,span.help-close.subtraction:hover{background-color:var(--addition-color)}button.addition,button.subtraction{color:#1e2133;background:#95a2fe}button.addition:hover,button.subtraction:hover{background-color:#8692e5}.course-button-add:hover,.course-button-sub:hover{background-color:#5a639a}header.complement,nav a.complement:hover,nav a.complement.current-location,.course-button-cmp,span.help-close.complement:hover{background-color:var(--complement-color)}button.complement{color:#1e2833;background:#95c9fe}button.complement: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.dec2hex:hover,nav a.dec2hex.current-location,nav a.hex2dec:hover,nav a.hex2dec.current-location,.course-button-d2h,span.help-close.dec2hex:hover,span.help-close.hex2dec:hover{background-color:var(--dec2hex-color)}button.dec2hex,button.hex2dec{color:#1e3330;background:#95feec}button.dec2hex:hover,button.hex2dec:hover{background-color:#86e5d5}.course-button-d2h:hover{background-color:#5a9a90}header.iro-iroiro,nav a.iro-iroiro:hover,nav a.iro-iroiro.current-location,span.help-close.iro-iroiro:hover{background-color:var(--iro-iroiro-color)}button.iro-iroiro{color:#331e25;background:#fe95b7}button.iro-iroiro:hover{background-color:#e586a5}nav a.ctc:hover,nav a.ctc.current-location,span.help-close.ctc:hover{background-color:var(--ctc-color)}header.network-simulator,nav a.network-simulator:hover,nav a.network-simulator.current-location,span.help-close.network-simulator:hover{background-color:var(--network-simulator-color)}button.network-simulator{color:#251e33;background:#b795fe}button.network-simulator:hover{background-color:#a586e5}header.not-found{background-color:var(--not-found-color)}button.not-found{color:#262626;background:#bdbdbd}button.not-found: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%,calc(100% - 260px)) - 4rem);max-width:1200px;margin-left:max(20%,260px);padding:20px 2rem 0;transition:all .5s ease-in-out 0s}main.flagged{width:calc(90% - 4rem);max-width:90%;margin:0 5%}@media (max-width: 799px){main,main.flagged{width:92%;max-width:92%;margin:0;padding:20px 1rem 0}}footer>div{color:var(--pale-color);width:90%;margin:40px auto 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem}footer a{text-decoration:none}@media (max-width: 799px){footer>div{margin:1rem auto .5rem;gap:.25rem 1.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;position:absolute;left:0;right:0;margin:auto}@media (max-width: 599px){.home-center{text-align:center;font-size:1.5rem;font-family:serif}}.home-title{font-size:5rem;font-family:Oooh Baby,cursive}@media (max-width: 599px){.home-title{font-size:4rem}}.home-subtitle{font-size:1.75rem;font-family:Zen Kurenaido,sans-serif}.button-container{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:200px 200px 200px;gap:20px}@media (max-width: 999px){.button-container{grid-template-columns:1fr 1fr 1fr;grid-template-rows:200px 200px 200px}}@media (max-width: 799px){.button-container{grid-template-columns:1fr 1fr;grid-template-rows:5rem 5rem 5rem 5rem 5rem;gap:10px}}@media (max-width: 599px){.button-container{display:flex;flex-direction:column;gap:0px}}form.button-container button{appearance:none;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;color:var(--background-color);font-size:1.75rem;border-radius:4px;position:relative;cursor:pointer}@media (max-width: 799px){form.button-container button{font-size:1.25rem}}@media (max-width: 599px){form.button-container button{font-size:1.25rem;height:60px;margin:5px 0}}.no-display{display:none}.question-number{font-size:1.5rem;font-weight:700}input{color:var(--foreground-color);background-color:var(--background-color);font-size:1.25rem;border:2px solid;border-color:var(--foreground-color);border-radius:4px;padding:2px 5px;height:32px}form.endless-binary{width:100%;padding:5px 0;display:grid;grid-template-columns:300px 40px 1fr;grid-template-rows:40px 40px 1fr;grid-template-areas:"i s b" "e e e" "h h h";gap:0px 5px}form.endless-binary>input{grid-area:i}form.endless-binary>span{grid-area:s;line-height:40px;width:fit-content}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}form.endless-binary:has(button.addition),form.endless-binary:has(button.subtraction){grid-template-columns:20.25ch 40px 1fr;grid-template-rows:40px 40px 1fr;grid-template-areas:"i s b" "e e e" "h h h"}@media (max-width: 599px){form.endless-binary{grid-template-columns:80% 1fr;grid-template-rows:40px 40px 40px 1fr;grid-template-areas:"i s" "b b" "e e" "h h";gap:15px 5px}form.endless-binary:has(button.addition),form.endless-binary:has(button.subtraction){grid-template-columns:20.25ch 1fr;grid-template-rows:40px 40px 40px 1fr;grid-template-areas:"i s" "b b" "e e" "h h";gap:15px 5px}}form.endless-binary:has(button.addition) input,form.endless-binary:has(button.subtraction) input{font-size:1.5rem;font-weight:700;text-align:right}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}details summary:hover{cursor:pointer}.hint-bgcolor-gray{background-color:var(--hint-gray-color)}.history{font-size:18px}.history-area{margin-top:10px}div.history-container{display:inline-flex;align-items:center;margin:3px 0}div.history-container.history-correct{background-color:var(--history-correct-color)}div.history-container.history-wrong{background-color:var(--history-wrong-color)}div.history-container>span.material-symbols-outlined{font-size:18px;line-height:18px;margin-right:.5rem;font-variation-settings:"opsz" 20}div.history-container>span.material-symbols-outlined.history-wrong{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%}.warning{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}}div.output-area.iro-iroiro{overflow-x:scroll;overflow-y:hidden;scrollbar-width:none}div.output-area.iro-iroiro::-webkit-scrollbar{display:none}div.color-row{display:flex;flex-direction:row}div.color-div{margin:10px 0;min-width:12rem;height:130px;display:flex;align-items:center}div.color-div>div{width:fit-content;margin:auto}div.color-div>div>span:not(.white){color:#000}div.color-div .white{color:#fff}form.network-simulator input{width:17ch}form.iro-iroiro,form.network-simulator{width:100%;padding:5px 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 15px}@media (max-width: 1199px){form.network-simulator{flex-direction:column;gap:10px 15px}}form.network-simulator+form{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 10px}form.network-simulator+form button{margin:0}input.iro-iroiro{border:none;border-bottom:2px solid;border-radius:0;padding:2px 0 2px 10px;width:4rem}input.iro-iroiro:invalid{background-color:var(--history-wrong-color)}.rem6{width:6rem}.calculation-area{width:12rem;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start}.first-row,.second-row{display:flex;flex-direction:row;justify-content:flex-end}.first-row>div,.second-row>div{display:inline-flex;flex-direction:row;justify-content:flex-end}.first-row span,.second-row span{width:1rem}.under-line{border-bottom:2px solid var(--background-color)}.explanation h3{font-size:1rem;margin-top:0;margin-bottom:0}.explanation dd{margin-top:.25rem;margin-left:1rem;margin-bottom:2rem}.explanation p{margin-top:0}span.hamburger-button{background:transparent}span.hamburger-button:hover{background-color:var(--hamburger-button-hover-color);cursor:pointer}.barrier{display:none}@media (max-width: 799px){.barrier.flagged{display:block;width:100%;height:100%;position:absolute;top:0;left:0;opacity:.2;background-color:var(--foreground-color)}}@media (max-width: 799px){header{height:40px;min-height:40px;grid-template-columns:50px auto 1rem}}.hint-table{display:flex;flex-direction:column}.hint-table-row{display:flex}.hint-table-digit{width:3rem;min-width:3rem;text-align:center;margin:1px 4px}span.bin2dec.hint-table-digit.green{background-color:#95fec6}span.hex2dec.hint-table-digit.green{background-color:#95feec}span.hint-table-digit.gray{background-color:#ccc}.large{font-size:3rem}.hint-table-container{width:3rem;min-width:3rem;line-height:100%}.middle{display:inline-block;vertical-align:middle;line-height:normal}.device{position:absolute;z-index:3}.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:1}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:2}div.hub>svg>g>path.inner{fill:var(--foreground-color);stroke-width:1}@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{width:fit-content;position:absolute;top:0;left:0;pointer-events:none;z-index:3}div.lan-cable>svg{pointer-events:none;position:absolute;z-index:3}div.lan-cable>svg>g>polyline{stroke:var(--lan-cable-color);stroke-width:5;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))}.material-symbols-outlined.symbols18{font-size:18px}.icon-vertical-center{display:inline-flex;align-items:center}span.help-button,span.help-close{font-size:1.5rem;cursor:pointer}span.help-button:hover{font-variation-settings:"FILL" 1}div.help-close-outer{width:100%;text-align:right}span.help-close:hover{color:var(--background-color)}@media (max-width: 599px){span.help-button{font-size:1rem}}.help-window{display:none}.help-window.active{display:block;background-color:var(--background-color);opacity:.95;width:fit-content;height:fit-content;max-width:80%;max-height:60%;position:absolute;z-index:5;top:0;left:0;bottom:0;right:0;margin:auto;padding:2rem;padding-top:0;box-shadow:0 0 5px 1px var(--box-shadow-color);overflow-y:auto;scrollbar-width:thin}.help-barrier{display:none}.help-barrier.active{display:block;width:100%;height:100%;position:absolute;z-index:4;top:0;left:0;opacity:0}