:root{--color-base:#eee;--color-white:#fff;--color-black:#000;--color-text:#1d1d1f;--color-lightgrey:#eee;--color-main:#7036aa;--color-sub:#c5d71b}.p-gh .p-gh__description,.p-gh h1,.p-output nav #toggle,.p-output nav h3,.p-output nav,.p-output .p-output__main .p-output__textarea:before,.items .item.button button,.p-diff h2,.p-diff .box__r #figure figure .title,.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio],.p-ui .container #form h3{letter-spacing:-.025em;font-family:Poppins,sans-serif;font-weight:700}.p-ui{z-index:30;filter:drop-shadow(0 0 .75rem color-mix(in srgb, var(--color-text) 20%, transparent));margin:0 3em;position:sticky;top:1em}.p-ui .container{background-color:var(--color-white);flex-direction:column;row-gap:1.5em;height:100%;padding:1.5em 3em;display:flex}.p-ui .container #form .l--upper,.p-ui .container #form .l--lower{flex-wrap:wrap;gap:3em 1.5em;display:flex}.p-ui .container #form .l--lower{border-top:1px solid #0000001a;margin-top:1.5em;padding-top:1.5em}.p-ui .container #form h3{min-width:4em;margin-top:0;margin-bottom:.25em}.p-ui .container #form input[type=number],.p-ui .container #form select{appearance:none;box-sizing:border-box;box-shadow:none;width:100%;height:2em;color:var(--color-text);background:#fff;border:none;outline:none;margin:0;padding:0 1em;font-size:1rem;font-weight:600}.p-ui .container #form select{cursor:pointer}.p-ui .container #form .has--select{flex-grow:1;position:relative}.p-ui .container #form .has--select:after{z-index:10;border-style:solid;border-width:.433013em .25em 0;border-color:var(--color-text) #0000 #0000 #0000;pointer-events:none;content:"";width:0;height:0;display:block;position:absolute;top:50%;right:1em;transform:translateY(-50%)}.p-ui .container #form .has--select select{padding-right:2em}.p-ui .container #form .p-ui__radius{width:calc(33.3333% - 1em);position:relative}.p-ui .container #form .p-ui__radius .p-ui__radius__container{column-gap:1em;display:flex}.p-ui .container #form .p-ui__radius .p-ui__radius__container .p-ui__fields:first-child{width:50%}.p-ui .container #form .p-ui__border{width:calc(33.3333% - 1em)}.p-ui .container #form .p-ui__border .p-ui__border__container{column-gap:1em;display:flex}.p-ui .container #form .p-ui__border .p-ui__border__container .p-ui__fields:first-child{width:50%}.p-ui .container #form .p-ui__options{width:100%}.p-ui .container #form .p-ui__options.is--active h3>span:after{transform:rotate(180deg)translateY(calc(.5em - 50%))}.p-ui .container #form .p-ui__options h3{line-height:1}.p-ui .container #form .p-ui__options h3>span{cursor:pointer}.p-ui .container #form .p-ui__options h3>span:after{z-index:10;border-style:solid;border-width:.433013em .25em 0;border-color:var(--color-text) #0000 #0000 #0000;pointer-events:none;content:"";width:0;height:0;margin-left:.5em;display:inline-flex;position:relative;top:.1em;transform:translateY(calc(-50% - .1em))}.p-ui .container #form .p-ui__corners{width:calc(33.3333% - 1em)}.p-ui .container #form .p-ui__corners .p-ui__fields{grid-column-gap:3em;grid-row-gap:.5em;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr);display:grid}.p-ui .container #form .p-ui__corners .p-ui__fields>div{flex-direction:row;align-items:center;column-gap:1.5em;display:flex;position:relative}.p-ui .container #form .p-ui__corners .p-ui__fields>div input{display:none}.p-ui .container #form .p-ui__corners .p-ui__fields>div label{cursor:pointer;background-color:color-mix(in hsl, var(--color-lightgrey), black 5%);border-radius:.5em;width:1.8em;height:1em;font-size:1.1em;transition:background-color .2s ease-in-out;display:block;position:relative}.p-ui .container #form .p-ui__corners .p-ui__fields>div label:after{z-index:1;cursor:pointer;background-color:var(--color-white);content:"";border-radius:50%;width:.8em;height:.8em;transition:left .2s ease-in-out;display:block;position:absolute;top:.1rem;left:.1rem}.p-ui .container #form .p-ui__corners .p-ui__fields>div input[type=checkbox]:checked~label{background-color:var(--color-main)}.p-ui .container #form .p-ui__corners .p-ui__fields>div input[type=checkbox]:checked~label:after{left:.9em}.p-ui .container #form .p-ui__corners .p-ui__corner{--radius:1em;background-color:var(--color-text);aspect-ratio:1;width:1em;line-height:1;display:block;position:relative}.p-ui .container #form .p-ui__corners .p-ui__corner[data-corner=tl]{clip-path:shape(from calc(var(--radius) * 1.39209) 0%, line to 100% 0%, line to 100% 100%, line to 0% 100%, curve to calc(var(--radius) * .004782) calc(var(--radius) * 1.09983) with calc(var(--radius) * .001594) calc(var(--radius) * 1.29467)/calc(var(--radius) * -.001578) calc(var(--radius) * 1.1969), curve to calc(var(--radius) * .03816) calc(var(--radius) * .809691) with calc(var(--radius) * .011142) calc(var(--radius) * 1.00277)/calc(var(--radius) * .017731) calc(var(--radius) * .904316), curve to calc(var(--radius) * .127355) calc(var(--radius) * .532081) with calc(var(--radius) * .058588) calc(var(--radius) * .715065)/calc(var(--radius) * .084899) calc(var(--radius) * .618214), curve to calc(var(--radius) * .292893) calc(var(--radius) * .292893) with calc(var(--radius) * .16981) calc(var(--radius) * .445948)/calc(var(--radius) * .225439) calc(var(--radius) * .360348), curve to calc(var(--radius) * .532081) calc(var(--radius) * .127355) with calc(var(--radius) * .360348) calc(var(--radius) * .225439)/calc(var(--radius) * .445948) calc(var(--radius) * .16981), curve to calc(var(--radius) * .809691) calc(var(--radius) * .03816) with calc(var(--radius) * .618214) calc(var(--radius) * .084899)/calc(var(--radius) * .715065) calc(var(--radius) * .058588), curve to calc(var(--radius) * 1.09983) calc(var(--radius) * .004782) with calc(var(--radius) * .904316) calc(var(--radius) * .017731)/calc(var(--radius) * 1.00277) calc(var(--radius) * .011142), curve to calc(var(--radius) * 1.39209) calc(var(--radius) * 0) with calc(var(--radius) * 1.1969) calc(var(--radius) * -.001578)/calc(var(--radius) * 1.29467) calc(var(--radius) * .001594))}.p-ui .container #form .p-ui__corners .p-ui__corner[data-corner=tr]{clip-path:shape(from calc(var(--radius) * 1.39209) 0%, curve to calc(100% - var(--radius) * 1.09983) calc(var(--radius) * .004782) with calc(100% - var(--radius) * 1.29467) calc(var(--radius) * .001594)/calc(100% - var(--radius) * 1.1969) calc(var(--radius) * -.001578), curve to calc(100% - var(--radius) * .809691) calc(var(--radius) * .03816) with calc(100% - var(--radius) * 1.00277) calc(var(--radius) * .011142)/calc(100% - var(--radius) * .904316) calc(var(--radius) * .017731), curve to calc(100% - var(--radius) * .532081) calc(var(--radius) * .127355) with calc(100% - var(--radius) * .715065) calc(var(--radius) * .058588)/calc(100% - var(--radius) * .618214) calc(var(--radius) * .084899), curve to calc(100% - var(--radius) * .292893) calc(var(--radius) * .292893) with calc(100% - var(--radius) * .445948) calc(var(--radius) * .16981)/calc(100% - var(--radius) * .360348) calc(var(--radius) * .225439), curve to calc(100% - var(--radius) * .127355) calc(var(--radius) * .532081) with calc(100% - var(--radius) * .225439) calc(var(--radius) * .360348)/calc(100% - var(--radius) * .16981) calc(var(--radius) * .445948), curve to calc(100% - var(--radius) * .03816) calc(var(--radius) * .809691) with calc(100% - var(--radius) * .084899) calc(var(--radius) * .618214)/calc(100% - var(--radius) * .058588) calc(var(--radius) * .715065), curve to calc(100% - var(--radius) * .004782) calc(var(--radius) * 1.09983) with calc(100% - var(--radius) * .017731) calc(var(--radius) * .904316)/calc(100% - var(--radius) * .011142) calc(var(--radius) * 1.00277), curve to calc(100% - var(--radius) * 0) calc(var(--radius) * 1.39209) with calc(100% - var(--radius) * -.001578) calc(var(--radius) * 1.1969)/calc(100% - var(--radius) * .001594) calc(var(--radius) * 1.29467), line to 100% 100%, line to 0% 100%, line to 0% 0%)}.p-ui .container #form .p-ui__corners .p-ui__corner[data-corner=bl]{clip-path:shape(from calc(var(--radius) * 1.39209) 0%, line to 100% 0%, line to 100% 100%, curve to calc(var(--radius) * 1.09983) calc(100% - var(--radius) * .004782) with calc(var(--radius) * 1.29467) calc(100% - var(--radius) * .001594)/calc(var(--radius) * 1.1969) calc(100% - var(--radius) * -.001578), curve to calc(var(--radius) * .809691) calc(100% - var(--radius) * .03816) with calc(var(--radius) * 1.00277) calc(100% - var(--radius) * .011142)/calc(var(--radius) * .904316) calc(100% - var(--radius) * .017731), curve to calc(var(--radius) * .532081) calc(100% - var(--radius) * .127355) with calc(var(--radius) * .715065) calc(100% - var(--radius) * .058588)/calc(var(--radius) * .618214) calc(100% - var(--radius) * .084899), curve to calc(var(--radius) * .292893) calc(100% - var(--radius) * .292893) with calc(var(--radius) * .445948) calc(100% - var(--radius) * .16981)/calc(var(--radius) * .360348) calc(100% - var(--radius) * .225439), curve to calc(var(--radius) * .127355) calc(100% - var(--radius) * .532081) with calc(var(--radius) * .225439) calc(100% - var(--radius) * .360348)/calc(var(--radius) * .16981) calc(100% - var(--radius) * .445948), curve to calc(var(--radius) * .03816) calc(100% - var(--radius) * .809691) with calc(var(--radius) * .084899) calc(100% - var(--radius) * .618214)/calc(var(--radius) * .058588) calc(100% - var(--radius) * .715065), curve to calc(var(--radius) * .004782) calc(100% - var(--radius) * 1.09983) with calc(var(--radius) * .017731) calc(100% - var(--radius) * .904316)/calc(var(--radius) * .011142) calc(100% - var(--radius) * 1.00277), curve to calc(var(--radius) * 0) calc(100% - var(--radius) * 1.39209) with calc(var(--radius) * -.001578) calc(100% - var(--radius) * 1.1969)/calc(var(--radius) * .001594) calc(100% - var(--radius) * 1.29467), line to 0% 0%)}.p-ui .container #form .p-ui__corners .p-ui__corner[data-corner=br]{clip-path:shape(from calc(var(--radius) * 1.39209) 0%, line to 100% 0%, curve to calc(100% - var(--radius) * .004782) calc(100% - var(--radius) * 1.09983) with calc(100% - var(--radius) * .001594) calc(100% - var(--radius) * 1.29467)/calc(100% - var(--radius) * -.001578) calc(100% - var(--radius) * 1.1969), curve to calc(100% - var(--radius) * .03816) calc(100% - var(--radius) * .809691) with calc(100% - var(--radius) * .011142) calc(100% - var(--radius) * 1.00277)/calc(100% - var(--radius) * .017731) calc(100% - var(--radius) * .904316), curve to calc(100% - var(--radius) * .127355) calc(100% - var(--radius) * .532081) with calc(100% - var(--radius) * .058588) calc(100% - var(--radius) * .715065)/calc(100% - var(--radius) * .084899) calc(100% - var(--radius) * .618214), curve to calc(100% - var(--radius) * .292893) calc(100% - var(--radius) * .292893) with calc(100% - var(--radius) * .16981) calc(100% - var(--radius) * .445948)/calc(100% - var(--radius) * .225439) calc(100% - var(--radius) * .360348), curve to calc(100% - var(--radius) * .532081) calc(100% - var(--radius) * .127355) with calc(100% - var(--radius) * .360348) calc(100% - var(--radius) * .225439)/calc(100% - var(--radius) * .445948) calc(100% - var(--radius) * .16981), curve to calc(100% - var(--radius) * .809691) calc(100% - var(--radius) * .03816) with calc(100% - var(--radius) * .618214) calc(100% - var(--radius) * .084899)/calc(100% - var(--radius) * .715065) calc(100% - var(--radius) * .058588), curve to calc(100% - var(--radius) * 1.09983) calc(100% - var(--radius) * .004782) with calc(100% - var(--radius) * .904316) calc(100% - var(--radius) * .017731)/calc(100% - var(--radius) * 1.00277) calc(100% - var(--radius) * .011142), curve to calc(100% - var(--radius) * 1.39209) calc(100% - var(--radius) * 0) with calc(100% - var(--radius) * 1.1969) calc(100% - var(--radius) * -.001578)/calc(100% - var(--radius) * 1.29467) calc(100% - var(--radius) * .001594), line to 0% 100%, line to 0% 0%)}.p-ui .container #form .p-ui__type{width:calc(25% - .75em);position:relative}.p-ui .container #form .p-ui__precise{width:calc(25% - .75em);position:relative}.p-ui .container #form .p-ui__precise.is--hidden{display:none!important}.p-ui .container #form .p-ui__mode{width:calc(50% - 1.5em);position:relative}.p-ui .container #form .p-ui__mode ul.p-ui__fields{column-gap:2em;margin:0;padding:0;display:flex}.p-ui .container #form .p-ui__mode ul.p-ui__fields li{flex-grow:1;margin:0;padding:0;list-style:none;position:relative}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label{cursor:pointer;box-sizing:border-box;background-color:#fff;justify-content:center;align-items:center;width:100%;height:2em;padding:0 2.8em 0 1em;display:flex}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio]{display:none}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio]~span>span[data-status=disabled]{display:inline}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio]~span>span[data-status=active]{display:none}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio]~span i{opacity:.2;font-style:normal;font-weight:600}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio]:checked~span>span[data-status=disabled]{display:none}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio]:checked~span>span[data-status=active]{display:inline}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label input[type=radio]:checked~span i{opacity:1}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help{font-size:.8em;line-height:1em;position:absolute;top:50%;right:1em;transform:translateY(-50%)}.no-touch .p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help:hover .p-ui__mode__help__balloon,.touch .p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help.hover .p-ui__mode__help__balloon{opacity:1;transform:translateY(calc(-100% - 1em))}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .c-emoji{cursor:pointer;background-color:var(--color-text);width:1.5em;height:1.5em;color:var(--color-white);border-radius:50%;justify-content:center;align-items:center;font-style:normal;display:inline-flex}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .c-emoji>span{font-size:.8em}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon{opacity:0;z-index:10;pointer-events:none;transition-property:opacity,transform;transition-duration:.15s;position:absolute;top:0;right:-1.5em;transform:translateY(-100%)}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon>div{background-color:var(--color-text);color:var(--color-white);padding:.5em 1em;line-height:1.3}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon:before{border-style:solid;border-width:.5em .5em 0;border-color:var(--color-text) #0000 #0000 #0000;content:"";width:0;height:0;display:block;position:absolute;bottom:calc(1px - .5em);right:1.75em}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon p{margin-top:0;font-size:clamp(13px,1.01563vw,14.625px)}.p-diff{box-sizing:border-box;grid-template:"left right"/calc(66.6667% - 1.66667em) calc(33.3333% + .666667em);gap:1em;display:grid}.p-diff .box__l{background-color:var(--color-white);grid-area:left;padding:3em}.p-diff .box__r{background-color:var(--color-white);grid-area:right;padding:0 3em}.p-diff .box__r #figure{grid-area:figure;height:100%;position:relative}.p-diff .box__r #figure .container{padding:3em 0;position:sticky;top:0}.p-diff .box__r #figure figure{font-size:1rem;position:relative;overflow:hidden}.p-diff .box__r #figure figure:before{opacity:.1;z-index:20;box-sizing:border-box;border:1px solid var(--color-text);aspect-ratio:1;content:"";width:100%;display:block;position:absolute;top:0;left:0}.p-diff .box__r #figure figure .title{z-index:30;color:var(--color-white);white-space:nowrap;font-size:1.2em;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%)translateY(-50%)}.p-diff .box__r #figure figure .is--round,.p-diff .box__r #figure figure .is--clothoid{aspect-ratio:1;justify-content:center;align-items:center;display:flex}.p-diff .box__r #figure figure .is--round{background-color:var(--color-sub);position:relative;border-width:0!important}.p-diff .box__r #figure figure .is--clothoid{background-color:var(--color-main)}.p-diff .box__r #figure figure.overlap .is--clothoid{mix-blend-mode:color-dodge;width:100%;position:absolute;top:0;left:0}.p-diff .box__r #figure figure+figure{margin-top:3em}.p-diff h2{-webkit-line-clamp:1;text-align:center;-webkit-box-orient:vertical;margin-top:0;margin-bottom:1.5rem;font-size:1.5rem;display:-webkit-box;overflow:hidden}.corner{box-sizing:border-box;background-color:var(--color-lightgrey);aspect-ratio:1;border-radius:50%;width:1.71573em;font-size:1rem;transition-property:width,height;transition-duration:.15s;display:block;position:absolute;border-width:0!important}.corner[data-position=top\ left]{top:0;left:0}.corner[data-position=top\ right]{top:0;right:0}.corner[data-position=bottom\ left]{bottom:0;left:0}.corner[data-position=bottom\ right]{bottom:0;right:0}.line{opacity:.65;z-index:20;mix-blend-mode:multiply;transition-property:left,top;transition-duration:.15s;display:block;position:absolute}.line[data-type=clothoid]{border-color:color-mix(in hsl, var(--color-main), black 10%)}.line[data-type=round]{border-color:color-mix(in hsl, var(--color-sub), black 20%)}.line[data-type=clothoid][data-position=vertical\ left]{border-right-style:solid;border-right-width:1px;width:0;height:100%;top:0;left:48.723%;transform:translate(-50%)}.line[data-type=clothoid][data-position=vertical\ right]{border-right-style:solid;border-right-width:1px;width:0;height:100%;top:0;left:51.277%;transform:translate(-50%)}.line[data-type=clothoid][data-position=horizontal\ top]{border-top-style:solid;border-top-width:1px;width:100%;height:0;top:48.723%;left:0;transform:translateY(-50%)}.line[data-type=clothoid][data-position=horizontal\ bottom]{border-top-style:solid;border-top-width:1px;width:100%;height:0;top:51.277%;left:0;transform:translateY(-50%)}.line[data-type=round][data-position=vertical\ left]{border-right-style:dashed;border-right-width:1px;width:0;height:100%;top:0;left:35%;transform:translate(-50%)}.line[data-type=round][data-position=vertical\ right]{border-right-style:dashed;border-right-width:1px;width:0;height:100%;top:0;left:65%;transform:translate(-50%)}.line[data-type=round][data-position=horizontal\ top]{border-top-style:dashed;border-top-width:1px;width:100%;height:0;top:35%;left:0;transform:translateY(-50%)}.line[data-type=round][data-position=horizontal\ bottom]{border-top-style:dashed;border-top-width:1px;width:100%;height:0;top:65%;left:0;transform:translateY(-50%)}.items{flex-direction:column;row-gap:2rem;display:flex}.items .item.button button{cursor:auto;box-sizing:border-box;aspect-ratio:1;width:100%;color:var(--color-white);border:none;margin:0;padding:0;font-size:1rem;display:block}.items .item.button button>div{aspect-ratio:1;justify-content:center;align-items:center;width:100%;display:flex}.items .item.button button>div>span{font-size:1.2em;line-height:1}.items .item.figure{font-size:1rem}.items .item.figure>div{background-color:var(--color-lightgrey);width:100%;height:100%}.items .item.figure>div img{object-fit:cover;width:100%;height:100%}.items .item.block{font-size:1rem}.items .item.block>div{width:100%}.items .item.block>div .item__inner{box-sizing:border-box;aspect-ratio:1/.618;align-items:center;width:100%;margin:0;display:flex}.items .item.block>div .item__inner p{-webkit-line-clamp:6;color:var(--color-white);-webkit-box-orient:vertical;margin:0 3em;display:-webkit-box;overflow:hidden}.items .item.block>div .item__inner img{object-fit:cover;width:100%;height:100%}.items .item.block img{vertical-align:bottom;width:100%}#round,#figure{--border-color:color-mix(in hsl, var(--color-main), black 10%);--background-color:var(--color-white)}#round .items .item.button button{box-sizing:border-box;border:var(--border-width) solid color-mix(in hsl, var(--color-sub), black 10%)}#round .items .item.button button>div{background:var(--color-sub)}#round .items .item.block>div>div{box-sizing:border-box;border:var(--border-width) solid color-mix(in hsl, var(--color-sub), black 10%);background:var(--color-sub)}#clothoid .items .item.button button>div,#clothoid .items .item.block>div>div{background:var(--color-main)}.p-output{z-index:100;box-sizing:border-box;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.p-output[data-status=open] .p-output__wrapper{transform:translateY(0)}.no-touch .p-output[data-status=open] .p-output__container .p-output__toggle:hover>div:first-child{transform:translateY(-50%)rotate(15deg)}.no-touch .p-output[data-status=open] .p-output__container .p-output__toggle:hover>div:nth-child(2){transform:translateY(-50%)rotate(-15deg)}.touch .p-output[data-status=open] .p-output__container .p-output__toggle.hover>div:first-child{transform:translateY(-50%)rotate(15deg)}.touch .p-output[data-status=open] .p-output__container .p-output__toggle.hover>div:nth-child(2){transform:translateY(-50%)rotate(-15deg)}.p-output .p-output__wrapper{height:calc(100% - 66.66svh);filter:drop-shadow(0 0 .25rem color-mix(in srgb, var(--color-text) 60%, transparent));padding:66.66svh .5em 0;transition-property:transform;transition-duration:.3s;position:relative;transform:translateY(calc(100% - 66.66svh - 5em))}.p-output .p-output__container{box-sizing:border-box;pointer-events:all;height:calc(100% + 2.5rem);color:var(--color--white);background-color:var(--color-main);padding:5rem 2.5rem 2.5rem;font-size:2rem;position:relative}.p-output .p-output__container .p-output__inner{height:calc(100% - 2.5rem);font-size:1rem}.p-output .p-output__main{gap:1em;height:100%;display:flex}.p-output .p-output__main .p-output__textarea{background:color-mix(in hsl, var(--color-main), white 10%);flex-grow:1;height:100%;font-size:1.17rem;position:relative}.p-output .p-output__main .p-output__textarea #html_textarea,.p-output .p-output__main .p-output__textarea #css_textarea{appearance:none;box-shadow:none;box-sizing:border-box;resize:none;width:100%;height:100%;color:var(--color-white);will-change:scroll-position;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;-ms-scroll-chaining:none;overscroll-behavior:contain;background-color:#0000;border:none;outline:none;margin:0;padding:2.3125rem 1rem 1rem;font-family:SFMono-Regular,Menlo,Consolas,Courier New,Courier,Monaco,monospace;font-size:clamp(13px,1.01563vw,14.625px);overflow:scroll}.p-output .p-output__main .p-output__textarea:before{color:var(--color-white);background-color:color-mix(in hsl, var(--color-main), black 20%);padding:.25em 1em;font-size:.75em;line-height:1;position:absolute;top:0;left:0}.p-output .p-output__main .p-output__textarea:first-child:before{content:"HTML"}.p-output .p-output__main .p-output__textarea:nth-child(2):before{content:"CSS"}.p-output nav{width:calc(100% - 5em);position:absolute;top:1.5em;left:2.5em}.p-output nav .container{justify-content:space-between;align-items:center;height:2em;display:flex}.p-output nav h3{color:var(--color-white)}.p-output nav ul{color:var(--color-white);flex-grow:1;align-items:center;column-gap:1.5rem;margin:0;padding-left:2.5rem;list-style:none;display:flex;position:relative}.p-output nav ul:before{content:"";background-color:var(--color-white);width:1px;height:1rem;display:block;position:absolute;top:50%;left:0;transform:translateY(-50%)}.p-output nav ul li{margin:0;left:0}.p-output nav ul label{cursor:pointer}.p-output nav ul label input{display:none}.p-output nav ul label input~.c-emoji,.p-output nav ul label input~.c-emoji~span{opacity:.5}.p-output nav ul label input:checked~.c-emoji,.p-output nav ul label input:checked~.c-emoji~span{opacity:1}.p-output nav ul label .c-emoji{margin-right:.25em}.p-output nav #toggle{--radius:.5em;box-sizing:border-box;cursor:pointer;filter:drop-shadow(0 0 3px #0006);background-color:#0000;border:none;justify-content:center;align-items:center;width:7rem;margin:0;padding:0;font-size:1rem;line-height:1;display:flex}.no-touch .p-output nav #toggle:hover>span,.touch .p-output nav #toggle.hover>span{opacity:.95}.p-output nav #toggle[disabled=disabled]{pointer-events:none}.p-output nav #toggle:active>span{top:1px}.p-output nav #toggle>span{width:10rem;height:2.5rem;color:var(--color-main);background-color:var(--color-white);justify-content:center;align-items:center;font-size:1.17em;display:inline-flex;position:relative}.c-triangle{border-style:solid;width:0;height:0;margin-left:.5rem;display:inline-block}.c-triangle.c-triangle--bottom{border-width:.435rem .25rem 0;border-color:currentColor #0000 #0000}.c-triangle.c-triangle--top{border-width:0 .25rem .435rem;border-color:#0000 #0000 currentColor}@font-face{font-weight:400;src:local(Hiragino Sans),local(ヒラギノ角ゴ ProN W3),local(Hiragino Kaku Gothic ProN);font-family:MyHiragino}@font-face{font-weight:700;src:local(Hiragino Sans),local(ヒラギノ角ゴ ProN W6),local(Hiragino Kaku Gothic ProN W6);font-family:MyHiragino}@font-face{font-weight:800;src:local(Hiragino Sans),local(ヒラギノ角ゴ StdN),local(Hiragino Kaku Gothic StdN);font-family:MyHiragino}@font-face{src:local(-apple-system),local(BlinkMacSystemFont),local(\.SFNSDisplay-Regular),local(Segoe UI),local(Helvetica),local(Arial);font-family:SystemSerif}body{background-color:var(--color-base);color:var(--color-text);font-feature-settings:"palt";text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:SystemSerif,MyHiragino,メイリオ,Meiryo,Osaka,MS UI Gothic,ＭＳ Ｐゴシック,MS PGothic,sans-serif;font-size:1rem}input[type=text],input[type=number],select{font-family:SystemSerif,MyHiragino,メイリオ,Meiryo,Osaka,MS UI Gothic,ＭＳ Ｐゴシック,MS PGothic,sans-serif}a{color:var(--color-main)}p{margin:0}p+p{margin-top:1em}figure{margin:0}.p-superwrapper{margin:0 auto}.p-section+.p-section{margin-top:3em}#main{position:relative}.p-gh{text-align:center;position:relative}.p-gh h1{color:var(--color-white);letter-spacing:-.075em;margin-top:0;margin-bottom:0;margin-left:-.075em}.p-gh .p-gh__description{color:color-mix(in hsl, var(--color-main), black 10%);letter-spacing:-.01em;margin-top:-1em;font-size:1.5em}.p-gh .p-gh__links{margin-top:2.5em}.p-aside{text-align:center;padding:3em 3em 8em}.p-aside .p-aside__container{font-size:.8em}.p-aside .p-aside__link i{margin-bottom:.5em;font-size:2em;font-style:normal;display:inline-block}.p-aside .p-aside__link a{color:var(--color-text);text-decoration:none}.p-aside .p-aside__copy{margin-top:1.5rem}.c-emoji{font-family:Noto Emoji,sans-serif;font-style:normal}.c-pixel{font-family:"Press Start 2P",cursive}html[lang=ja] p[lang=en],html[lang=en] p[lang=ja]{display:none!important}::selection{background-color:color-mix(in srgb, var(--color-main) 20%, transparent)}.round-corner{box-sizing:border-box;border:var(--border-width) solid color-mix(in hsl, var(--color-sub), black 10%);border-radius:35%;transition-property:border-radius,border-width;transition-duration:.3s;overflow:hidden}.clothoid-corner{--radius:35%;clip-path:shape(from calc(var(--radius) * 1.39209) 0%, curve to calc(100% - var(--radius) * 1.09983) calc(var(--radius) * .004782) with calc(100% - var(--radius) * 1.29467) calc(var(--radius) * .001594)/calc(100% - var(--radius) * 1.1969) calc(var(--radius) * -.001578), curve to calc(100% - var(--radius) * .809691) calc(var(--radius) * .03816) with calc(100% - var(--radius) * 1.00277) calc(var(--radius) * .011142)/calc(100% - var(--radius) * .904316) calc(var(--radius) * .017731), curve to calc(100% - var(--radius) * .532081) calc(var(--radius) * .127355) with calc(100% - var(--radius) * .715065) calc(var(--radius) * .058588)/calc(100% - var(--radius) * .618214) calc(var(--radius) * .084899), curve to calc(100% - var(--radius) * .292893) calc(var(--radius) * .292893) with calc(100% - var(--radius) * .445948) calc(var(--radius) * .16981)/calc(100% - var(--radius) * .360348) calc(var(--radius) * .225439), curve to calc(100% - var(--radius) * .127355) calc(var(--radius) * .532081) with calc(100% - var(--radius) * .225439) calc(var(--radius) * .360348)/calc(100% - var(--radius) * .16981) calc(var(--radius) * .445948), curve to calc(100% - var(--radius) * .03816) calc(var(--radius) * .809691) with calc(100% - var(--radius) * .084899) calc(var(--radius) * .618214)/calc(100% - var(--radius) * .058588) calc(var(--radius) * .715065), curve to calc(100% - var(--radius) * .004782) calc(var(--radius) * 1.09983) with calc(100% - var(--radius) * .017731) calc(var(--radius) * .904316)/calc(100% - var(--radius) * .011142) calc(var(--radius) * 1.00277), curve to calc(100% - var(--radius) * 0) calc(var(--radius) * 1.39209) with calc(100% - var(--radius) * -.001578) calc(var(--radius) * 1.1969)/calc(100% - var(--radius) * .001594) calc(var(--radius) * 1.29467), curve to calc(100% - var(--radius) * .004782) calc(100% - var(--radius) * 1.09983) with calc(100% - var(--radius) * .001594) calc(100% - var(--radius) * 1.29467)/calc(100% - var(--radius) * -.001578) calc(100% - var(--radius) * 1.1969), curve to calc(100% - var(--radius) * .03816) calc(100% - var(--radius) * .809691) with calc(100% - var(--radius) * .011142) calc(100% - var(--radius) * 1.00277)/calc(100% - var(--radius) * .017731) calc(100% - var(--radius) * .904316), curve to calc(100% - var(--radius) * .127355) calc(100% - var(--radius) * .532081) with calc(100% - var(--radius) * .058588) calc(100% - var(--radius) * .715065)/calc(100% - var(--radius) * .084899) calc(100% - var(--radius) * .618214), curve to calc(100% - var(--radius) * .292893) calc(100% - var(--radius) * .292893) with calc(100% - var(--radius) * .16981) calc(100% - var(--radius) * .445948)/calc(100% - var(--radius) * .225439) calc(100% - var(--radius) * .360348), curve to calc(100% - var(--radius) * .532081) calc(100% - var(--radius) * .127355) with calc(100% - var(--radius) * .360348) calc(100% - var(--radius) * .225439)/calc(100% - var(--radius) * .445948) calc(100% - var(--radius) * .16981), curve to calc(100% - var(--radius) * .809691) calc(100% - var(--radius) * .03816) with calc(100% - var(--radius) * .618214) calc(100% - var(--radius) * .084899)/calc(100% - var(--radius) * .715065) calc(100% - var(--radius) * .058588), curve to calc(100% - var(--radius) * 1.09983) calc(100% - var(--radius) * .004782) with calc(100% - var(--radius) * .904316) calc(100% - var(--radius) * .017731)/calc(100% - var(--radius) * 1.00277) calc(100% - var(--radius) * .011142), curve to calc(100% - var(--radius) * 1.39209) calc(100% - var(--radius) * 0) with calc(100% - var(--radius) * 1.1969) calc(100% - var(--radius) * -.001578)/calc(100% - var(--radius) * 1.29467) calc(100% - var(--radius) * .001594), curve to calc(var(--radius) * 1.09983) calc(100% - var(--radius) * .004782) with calc(var(--radius) * 1.29467) calc(100% - var(--radius) * .001594)/calc(var(--radius) * 1.1969) calc(100% - var(--radius) * -.001578), curve to calc(var(--radius) * .809691) calc(100% - var(--radius) * .03816) with calc(var(--radius) * 1.00277) calc(100% - var(--radius) * .011142)/calc(var(--radius) * .904316) calc(100% - var(--radius) * .017731), curve to calc(var(--radius) * .532081) calc(100% - var(--radius) * .127355) with calc(var(--radius) * .715065) calc(100% - var(--radius) * .058588)/calc(var(--radius) * .618214) calc(100% - var(--radius) * .084899), curve to calc(var(--radius) * .292893) calc(100% - var(--radius) * .292893) with calc(var(--radius) * .445948) calc(100% - var(--radius) * .16981)/calc(var(--radius) * .360348) calc(100% - var(--radius) * .225439), curve to calc(var(--radius) * .127355) calc(100% - var(--radius) * .532081) with calc(var(--radius) * .225439) calc(100% - var(--radius) * .360348)/calc(var(--radius) * .16981) calc(100% - var(--radius) * .445948), curve to calc(var(--radius) * .03816) calc(100% - var(--radius) * .809691) with calc(var(--radius) * .084899) calc(100% - var(--radius) * .618214)/calc(var(--radius) * .058588) calc(100% - var(--radius) * .715065), curve to calc(var(--radius) * .004782) calc(100% - var(--radius) * 1.09983) with calc(var(--radius) * .017731) calc(100% - var(--radius) * .904316)/calc(var(--radius) * .011142) calc(100% - var(--radius) * 1.00277), curve to calc(var(--radius) * 0) calc(100% - var(--radius) * 1.39209) with calc(var(--radius) * -.001578) calc(100% - var(--radius) * 1.1969)/calc(var(--radius) * .001594) calc(100% - var(--radius) * 1.29467), curve to calc(var(--radius) * .004782) calc(var(--radius) * 1.09983) with calc(var(--radius) * .001594) calc(var(--radius) * 1.29467)/calc(var(--radius) * -.001578) calc(var(--radius) * 1.1969), curve to calc(var(--radius) * .03816) calc(var(--radius) * .809691) with calc(var(--radius) * .011142) calc(var(--radius) * 1.00277)/calc(var(--radius) * .017731) calc(var(--radius) * .904316), curve to calc(var(--radius) * .127355) calc(var(--radius) * .532081) with calc(var(--radius) * .058588) calc(var(--radius) * .715065)/calc(var(--radius) * .084899) calc(var(--radius) * .618214), curve to calc(var(--radius) * .292893) calc(var(--radius) * .292893) with calc(var(--radius) * .16981) calc(var(--radius) * .445948)/calc(var(--radius) * .225439) calc(var(--radius) * .360348), curve to calc(var(--radius) * .532081) calc(var(--radius) * .127355) with calc(var(--radius) * .360348) calc(var(--radius) * .225439)/calc(var(--radius) * .445948) calc(var(--radius) * .16981), curve to calc(var(--radius) * .809691) calc(var(--radius) * .03816) with calc(var(--radius) * .618214) calc(var(--radius) * .084899)/calc(var(--radius) * .715065) calc(var(--radius) * .058588), curve to calc(var(--radius) * 1.09983) calc(var(--radius) * .004782) with calc(var(--radius) * .904316) calc(var(--radius) * .017731)/calc(var(--radius) * 1.00277) calc(var(--radius) * .011142), curve to calc(var(--radius) * 1.39209) calc(var(--radius) * 0) with calc(var(--radius) * 1.1969) calc(var(--radius) * -.001578)/calc(var(--radius) * 1.29467) calc(var(--radius) * .001594));transition-property:clip-path;transition-duration:.3s;background-color:color-mix(in hsl, var(--color-main), white 20%)!important}.clothoid-corner__inner{background-color:var(--color-main);transition-property:clip-path;transition-duration:.3s}.form-wrapper{filter:drop-shadow(0 0 2px #0000004d);position:relative}.form-corner,.bmc-btn{--radius:1em;clip-path:shape(from calc(var(--radius) * 1) 0%, curve to calc(100% - var(--radius) * .790062) calc(var(--radius) * .003435) with calc(100% - var(--radius) * .930021) calc(var(--radius) * .001145)/calc(100% - var(--radius) * .859789) calc(var(--radius) * -.001133), curve to calc(100% - var(--radius) * .581639) calc(var(--radius) * .027412) with calc(100% - var(--radius) * .720335) calc(var(--radius) * .008004)/calc(100% - var(--radius) * .649613) calc(var(--radius) * .012737), curve to calc(100% - var(--radius) * .382219) calc(var(--radius) * .091485) with calc(100% - var(--radius) * .513665) calc(var(--radius) * .042087)/calc(100% - var(--radius) * .444092) calc(var(--radius) * .060987), curve to calc(100% - var(--radius) * .210399) calc(var(--radius) * .210399) with calc(100% - var(--radius) * .320345) calc(var(--radius) * .121983)/calc(100% - var(--radius) * .258855) calc(var(--radius) * .161943), curve to calc(100% - var(--radius) * .091485) calc(var(--radius) * .382219) with calc(100% - var(--radius) * .161943) calc(var(--radius) * .258855)/calc(100% - var(--radius) * .121983) calc(var(--radius) * .320345), curve to calc(100% - var(--radius) * .027412) calc(var(--radius) * .581639) with calc(100% - var(--radius) * .060987) calc(var(--radius) * .444092)/calc(100% - var(--radius) * .042087) calc(var(--radius) * .513665), curve to calc(100% - var(--radius) * .003435) calc(var(--radius) * .790062) with calc(100% - var(--radius) * .012737) calc(var(--radius) * .649613)/calc(100% - var(--radius) * .008004) calc(var(--radius) * .720335), curve to calc(100% - var(--radius) * 0) calc(var(--radius) * 1) with calc(100% - var(--radius) * -.001133) calc(var(--radius) * .859789)/calc(100% - var(--radius) * .001145) calc(var(--radius) * .930021), curve to calc(100% - var(--radius) * .003435) calc(100% - var(--radius) * .790062) with calc(100% - var(--radius) * .001145) calc(100% - var(--radius) * .930021)/calc(100% - var(--radius) * -.001133) calc(100% - var(--radius) * .859789), curve to calc(100% - var(--radius) * .027412) calc(100% - var(--radius) * .581639) with calc(100% - var(--radius) * .008004) calc(100% - var(--radius) * .720335)/calc(100% - var(--radius) * .012737) calc(100% - var(--radius) * .649613), curve to calc(100% - var(--radius) * .091485) calc(100% - var(--radius) * .382219) with calc(100% - var(--radius) * .042087) calc(100% - var(--radius) * .513665)/calc(100% - var(--radius) * .060987) calc(100% - var(--radius) * .444092), curve to calc(100% - var(--radius) * .210399) calc(100% - var(--radius) * .210399) with calc(100% - var(--radius) * .121983) calc(100% - var(--radius) * .320345)/calc(100% - var(--radius) * .161943) calc(100% - var(--radius) * .258855), curve to calc(100% - var(--radius) * .382219) calc(100% - var(--radius) * .091485) with calc(100% - var(--radius) * .258855) calc(100% - var(--radius) * .161943)/calc(100% - var(--radius) * .320345) calc(100% - var(--radius) * .121983), curve to calc(100% - var(--radius) * .581639) calc(100% - var(--radius) * .027412) with calc(100% - var(--radius) * .444092) calc(100% - var(--radius) * .060987)/calc(100% - var(--radius) * .513665) calc(100% - var(--radius) * .042087), curve to calc(100% - var(--radius) * .790062) calc(100% - var(--radius) * .003435) with calc(100% - var(--radius) * .649613) calc(100% - var(--radius) * .012737)/calc(100% - var(--radius) * .720335) calc(100% - var(--radius) * .008004), curve to calc(100% - var(--radius) * 1) calc(100% - var(--radius) * 0) with calc(100% - var(--radius) * .859789) calc(100% - var(--radius) * -.001133)/calc(100% - var(--radius) * .930021) calc(100% - var(--radius) * .001145), curve to calc(var(--radius) * .790062) calc(100% - var(--radius) * .003435) with calc(var(--radius) * .930021) calc(100% - var(--radius) * .001145)/calc(var(--radius) * .859789) calc(100% - var(--radius) * -.001133), curve to calc(var(--radius) * .581639) calc(100% - var(--radius) * .027412) with calc(var(--radius) * .720335) calc(100% - var(--radius) * .008004)/calc(var(--radius) * .649613) calc(100% - var(--radius) * .012737), curve to calc(var(--radius) * .382219) calc(100% - var(--radius) * .091485) with calc(var(--radius) * .513665) calc(100% - var(--radius) * .042087)/calc(var(--radius) * .444092) calc(100% - var(--radius) * .060987), curve to calc(var(--radius) * .210399) calc(100% - var(--radius) * .210399) with calc(var(--radius) * .320345) calc(100% - var(--radius) * .121983)/calc(var(--radius) * .258855) calc(100% - var(--radius) * .161943), curve to calc(var(--radius) * .091485) calc(100% - var(--radius) * .382219) with calc(var(--radius) * .161943) calc(100% - var(--radius) * .258855)/calc(var(--radius) * .121983) calc(100% - var(--radius) * .320345), curve to calc(var(--radius) * .027412) calc(100% - var(--radius) * .581639) with calc(var(--radius) * .060987) calc(100% - var(--radius) * .444092)/calc(var(--radius) * .042087) calc(100% - var(--radius) * .513665), curve to calc(var(--radius) * .003435) calc(100% - var(--radius) * .790062) with calc(var(--radius) * .012737) calc(100% - var(--radius) * .649613)/calc(var(--radius) * .008004) calc(100% - var(--radius) * .720335), curve to calc(var(--radius) * 0) calc(100% - var(--radius) * 1) with calc(var(--radius) * -.001133) calc(100% - var(--radius) * .859789)/calc(var(--radius) * .001145) calc(100% - var(--radius) * .930021), curve to calc(var(--radius) * .003435) calc(var(--radius) * .790062) with calc(var(--radius) * .001145) calc(var(--radius) * .930021)/calc(var(--radius) * -.001133) calc(var(--radius) * .859789), curve to calc(var(--radius) * .027412) calc(var(--radius) * .581639) with calc(var(--radius) * .008004) calc(var(--radius) * .720335)/calc(var(--radius) * .012737) calc(var(--radius) * .649613), curve to calc(var(--radius) * .091485) calc(var(--radius) * .382219) with calc(var(--radius) * .042087) calc(var(--radius) * .513665)/calc(var(--radius) * .060987) calc(var(--radius) * .444092), curve to calc(var(--radius) * .210399) calc(var(--radius) * .210399) with calc(var(--radius) * .121983) calc(var(--radius) * .320345)/calc(var(--radius) * .161943) calc(var(--radius) * .258855), curve to calc(var(--radius) * .382219) calc(var(--radius) * .091485) with calc(var(--radius) * .258855) calc(var(--radius) * .161943)/calc(var(--radius) * .320345) calc(var(--radius) * .121983), curve to calc(var(--radius) * .581639) calc(var(--radius) * .027412) with calc(var(--radius) * .444092) calc(var(--radius) * .060987)/calc(var(--radius) * .513665) calc(var(--radius) * .042087), curve to calc(var(--radius) * .790062) calc(var(--radius) * .003435) with calc(var(--radius) * .649613) calc(var(--radius) * .012737)/calc(var(--radius) * .720335) calc(var(--radius) * .008004), curve to calc(var(--radius) * 1) calc(var(--radius) * 0) with calc(var(--radius) * .859789) calc(var(--radius) * -.001133)/calc(var(--radius) * .930021) calc(var(--radius) * .001145))}.bmc-btn-text{flex-shrink:unset!important;margin-left:16px!important}@media only screen and (min-device-width:320px) and (max-width:767px){body{width:100%}.p-ui{margin:0 1em}.p-ui .container{padding:1em 1.5em}.p-ui .container #form{flex-wrap:wrap;gap:2em;display:flex}.p-ui .container #form .l--upper,.p-ui .container #form .l--lower{display:contents}.p-ui .container #form h3{margin-bottom:.5em;font-size:1em}.p-ui .container #form input[type=number],.p-ui .container #form select{height:2.25em}.p-ui .container #form .p-ui__radius{width:calc(50% - 1em)}.p-ui .container #form .p-ui__radius:before{background-color:var(--color-lightgrey);content:"";width:83.4667vw;height:1px;display:block;position:absolute;bottom:calc(-1em - 1px);left:0}.p-ui .container #form .p-ui__radius .p-ui__radius__container .p-ui__fields:first-child{width:calc(50% - .5em)}.p-ui .container #form .p-ui__border{width:calc(50% - 1em)}.p-ui .container #form .p-ui__border .p-ui__border__container .p-ui__fields:first-child{width:calc(50% - .5em)}.p-ui .container #form .p-ui__type,.p-ui .container #form .p-ui__corners,.p-ui .container #form .p-ui__precise,.p-ui .container #form .p-ui__mode{display:none}.p-ui .container #form .p-ui__type.is--active,.p-ui .container #form .p-ui__corners.is--active,.p-ui .container #form .p-ui__precise.is--active,.p-ui .container #form .p-ui__mode.is--active{display:block}.p-ui .container #form .p-ui__corners{width:calc(50% - 1em);margin-top:-1.5em}.p-ui .container #form .p-ui__corners .p-ui__fields{grid-column-gap:1em}.p-ui .container #form .p-ui__corners .p-ui__fields>div{column-gap:1em}.p-ui .container #form .p-ui__type{width:calc(50% - 1em);margin-top:-1.5em}.p-ui .container #form .p-ui__precise{width:calc(30% - .6em)}.p-ui .container #form .p-ui__precise:before{content:"";background-color:#e7e7e7;width:83.4667vw;height:1px;display:block;position:absolute;top:-1em;left:0}.p-ui .container #form .p-ui__mode{width:calc(70% - 1.4em)}.p-ui .container #form .p-ui__mode ul.p-ui__fields{column-gap:1em}.p-ui .container #form .p-ui__mode ul.p-ui__fields li label{height:2.25em;padding:0 2em 0 .5em}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help{right:.5em}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .c-emoji{font-size:.8rem}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon>div{width:27.7778vw}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon p{font-size:1em}.p-diff{grid-template-columns:calc(50% - .5em) calc(50% - .5em);margin:3em 1em 0}.p-diff .box__l{padding:1.5em}.p-diff .box__l section{width:100%}.p-diff .box__l #round,.p-diff .box__l #clothoid h2{display:none}.p-diff .box__r{padding:0 1.5em}.p-diff .box__r #figure{order:1}.p-diff .box__r #figure .container{padding:1.5em 0}.items{font-size:.5em}.items .item.figure{width:35vw;height:43.26vw}.items .item.block>div .item__inner p{-webkit-line-clamp:3;margin:0 1.5em}.p-output .p-output__wrapper{height:calc(100% - 33.33svh);padding:33.33svh 0 0;transform:translateY(calc(100% - 33.33svh - 4em))}.p-output .p-output__container{height:calc(100% + 1.5rem);padding:4rem 1rem 1rem}.p-output .p-output__container .p-output__inner{height:calc(100% - 1.5rem)}.p-output .p-output__main{flex-direction:column}.p-output .p-output__main .p-output__textarea:first-child{height:30%}.p-output .p-output__main .p-output__textarea:nth-child(2){height:70%}.p-output .p-output__main .p-output__textarea #html_textarea,.p-output .p-output__main .p-output__textarea #css_textarea{padding:2.3125rem 1rem 1rem}.p-output nav{width:calc(100% - 2em);top:1em;left:1em}.p-output nav .container{column-gap:2em}.p-output nav ul{column-gap:1rem;padding-left:0}.p-output nav ul:before{display:none}html{font-size:3.33333vw}.p-gh{padding:1em 0 2em}.p-gh h1{text-shadow:-.138889vw -.138889vw 0 var(--color-main),-.138889vw .138889vw 0 var(--color-main),.138889vw -.138889vw 0 var(--color-main),0 .138889vw 0 var(--color-main),.138889vw .277778vw 0 var(--color-main),.277778vw .416667vw 0 var(--color-main),0 .138889vw 0 var(--color-main),0 .277778vw 0 var(--color-main),.138889vw .416667vw 0 var(--color-main),.277778vw .555556vw 0 var(--color-main),0 0 0 var(--color-main),.138889vw .138889vw 0 var(--color-main),.277778vw .277778vw 0 var(--color-main);font-size:10vw}.p-gh .p-gh__description{margin:-.5em 1em 0;font-size:.8em}.p-gh .p-gh__links{margin-top:1.5em}.p-aside .p-aside__container{font-size:.6em}.is--pc{display:none!important}}@media only screen and (min-width:768px){body{width:100%}.p-ui .container #form .p-ui__form{align-items:center;gap:1em;display:flex}.p-ui .container #form .p-ui__form .p-ui__fields{flex-grow:1}.p-ui .container #form .p-ui__corners.p-ui__form{justify-content:space-between}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon>div{width:15.625vw}.p-diff{margin:3em 3em 0}.p-diff .box__l{column-gap:3em;display:flex}.p-diff .box__l section{width:calc(50% - 1.5em)}.items .item.figure{width:24.1406vw;height:29.8378vw}.p-output .p-output__container .p-output__inner{max-width:92.5vw;margin:0 auto}.p-output nav .container{column-gap:2.5em;max-width:92.5vw;margin:0 auto}.p-output nav ul{font-size:1.17em}html{font-size:1.25vw}.p-superwrapper{max-width:100vw}.p-gh{padding:3em}.p-gh h1{text-shadow:-.078125vw -.078125vw 0 var(--color-main),-.078125vw .078125vw 0 var(--color-main),.078125vw -.078125vw 0 var(--color-main),0 .078125vw 0 var(--color-main),.078125vw .15625vw 0 var(--color-main),.15625vw .234375vw 0 var(--color-main),0 .078125vw 0 var(--color-main),0 .15625vw 0 var(--color-main),.078125vw .234375vw 0 var(--color-main),.15625vw .3125vw 0 var(--color-main),0 0 0 var(--color-main),.078125vw .078125vw 0 var(--color-main),.15625vw .15625vw 0 var(--color-main);font-size:8.28125vw}.is--sp{display:none!important}}@media only screen and (min-width:1440px){body{width:100%}.p-ui .container #form .p-ui__mode ul.p-ui__fields li .p-ui__mode__help .p-ui__mode__help__balloon>div{width:225px}.items .item.figure{width:347.625px;height:429.665px}.p-output .p-output__container .p-output__inner{max-width:1332px}.p-output nav .container{max-width:1332px}html{font-size:18px}.p-superwrapper{max-width:1440px}.p-gh h1{text-shadow:-1.125px -1.125px 0 var(--color-main),-1.125px 1.125px 0 var(--color-main),1.125px -1.125px 0 var(--color-main),0 1.125px 0 var(--color-main),1.125px 2.25px 0 var(--color-main),2.25px 3.375px 0 var(--color-main),0 1.125px 0 var(--color-main),0 2.25px 0 var(--color-main),1.125px 3.375px 0 var(--color-main),2.25px 4.5px 0 var(--color-main),0 0 0 var(--color-main),1.125px 1.125px 0 var(--color-main),2.25px 2.25px 0 var(--color-main);font-size:119.25px}}