:root{
            --main: #0f0;
            scroll-behavior: smooth;
            font-size: 17px;
        }
        body{
            margin: 0;
            background: #000;
            color: var(--main);
            font-family: "DotGothic16", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        header{
            background: #444;
            border-bottom: solid 2px var(--main);
        }
        header .h-title{
            font-size: 2rem;
            text-indent: 1em;
        }

        nav{
            width: clamp(200px,70%,400px);
            margin: 2rem auto;
            border: solid 2px;
            background: #888;
        }
        nav .nav-top{
            border-bottom: solid 1px var(--main);
            font-size: 1.6rem;
        }
        nav a{color:#fff}
        nav a:hover{
            text-shadow: .1em .1em var(--main);
        }
        nav a div{margin: .3rem}

        main{
            width: clamp(150px,80vw,800px);
            margin: 0 auto;
            display: grid;
            justify-items: center;
        }

        article{
            width: 100%;
            margin-block: 2rem;
        }

        article h2{
            border-left: solid 10px;
            padding-left: 1rem;
        }
        article h3{
            border-bottom: solid 1px;
        }
        article section{
            margin: .3em;
            padding: .5em 1em;
            background: #eee;
            color: #000;
        }
        article section iframe{
            overscroll-behavior: none;
        }
        article section iframe.calc-frame{
            width: 350px;
            height: 440px;
            margin: 0 auto;
            border: none;
        }
        article section iframe.marubatsu-frame{
            width: 300px;
            height: 330px;
            margin: 0 auto;
            border: none;
        }
        article section iframe.spa-frame{
            width: 350px;
            height: 440px;
            margin: 0 auto;
            border: solid ;
        }

        footer{
            display: grid;
            align-content: space-around;
            justify-content: center;
            height: 100px;
            margin-top: 100px;
            background: #444;
            border-top: solid 2px;
        }
        footer div{
            text-align: center;
        }
        footer a{
            color: #fff;
        }

        /* コマンド */
        p.p-strong{
            padding: .5em;
            border-radius: .3em;
            letter-spacing: .1em;
            background: #ccc;
            color: #131;
            box-shadow: 2px 2px 1px #131;
            text-shadow: .1em .1em var(--main);
            font-size: 1.2rem
        }
        p.p-code{
            padding: .2em;
            white-space: pre-wrap;
            border: inset 2px var(--main);
            line-height: 1.5em;
            background: #222;
            color: var(--main);
            font-family: sans-serif;
            user-select: all;
        }
        p.p-code::selection{
            background: #0f0;
            color: #000;
        }
        p.p-code .p-code-cmt{
            color: #aaa;
            user-select: none;
        }

        p.p-note{
            font-size: .7em;
            color: #888;
        }

        p.p-link{
            display: inline-block;
            padding: 1em;
            margin: 1em auto;
            border-radius: 1em;
            color: blue;
        }
        p.p-link:hover{
            text-decoration: underline;
        }

        /*デモ用。class衝突注意*/
        .calc-wrap :has(:checked) {
            counter-increment: n var(--n);
        }
        .calc-wrap .result::after {
            content: counter(n);
        }

        :has([name="x"]:nth-child(1):checked) .test0-x::before{content:"1"}
        :has([name="x"]:nth-child(2):checked) .test0-x::before{content:"2"}
        :has([name="x"]:nth-child(3):checked) .test0-x::before{content:"3"}
        :has([name="x"]:nth-child(4):checked) .test0-x::before{content:"4"}
        :has([name="x"]:nth-child(5):checked) .test0-x::before{content:"5"}
        :has([name="x"]:nth-child(6):checked) .test0-x::before{content:"6"}
        :has([name="x"]:nth-child(7):checked) .test0-x::before{content:"7"}
        :has([name="x"]:nth-child(8):checked) .test0-x::before{content:"8"}
        :has([name="x"]:nth-child(9):checked) .test0-x::before{content:"9"}
        :has([name="x"]:nth-child(10):checked) .test0-x::before{content:"0"}
        :has([name="c"]:nth-child(1):checked) .test0-c::before{content:"+"}
        :has([name="c"]:nth-child(2):checked) .test0-c::before{content:"-"}
        :has([name="c"]:nth-child(3):checked) .test0-c::before{content:"×"}
        :has([name="c"]:nth-child(4):checked) .test0-c::before{content:"÷"}
        :has([name="c"]:nth-child(5):checked) .test0-c::before{content:"%"}
        :has([name="y"]:nth-child(1):checked) .test0-y::before{content:"1"}
        :has([name="y"]:nth-child(2):checked) .test0-y::before{content:"2"}
        :has([name="y"]:nth-child(3):checked) .test0-y::before{content:"3"}
        :has([name="y"]:nth-child(4):checked) .test0-y::before{content:"4"}
        :has([name="y"]:nth-child(5):checked) .test0-y::before{content:"5"}
        :has([name="y"]:nth-child(6):checked) .test0-y::before{content:"6"}
        :has([name="y"]:nth-child(7):checked) .test0-y::before{content:"7"}
        :has([name="y"]:nth-child(8):checked) .test0-y::before{content:"8"}
        :has([name="y"]:nth-child(9):checked) .test0-y::before{content:"9"}
        :has([name="y"]:nth-child(10):checked) .test0-y::before{content:"0"}
        :has([name="x"]:nth-child(10):not(:checked)):is(:has([name="c"]:nth-child(4):checked),:has([name="c"]:nth-child(5):checked)):has([name="y"]:nth-child(10):checked){
            .test0-y::after{
                content: "　ゼロ徐算が検出されました!";
                color: red;
            }
        }