html {
    display: grid;
    height: 100%;
    grid-template-rows: 100%;
}
body {
	display: inherit;
	grid-template-rows: 0px 100% auto;
}
body>header, body>main {
	padding: 0;
}
body header {
	text-align: center;
	padding-inline: 80px 350px;
	z-index: 1;
}
body header > * {
	margin: 5px 0;
}
main {
	display: grid;
	grid-template-columns: minmax(0,1fr) 350px;
}
main > section {
	margin-bottom: 0;
	z-index: 2;
}
main > section:first-child {
    margin: 100px 3rem 0 calc(80px + 3rem);
}
main > section:first-child p {
    text-wrap: balance;
    text-align: center;
}
main section:last-child {
    display: grid;
    grid-auto-rows: auto minmax(0,1fr);
    height: 0;
    min-height: 100%;
}
main section:last-child button {
	margin: 0;
	font-size: 1em;
    padding: 10px;
    width: 100%;
}
main section:last-child a {
	text-align: center;
    display: block;
    font-size: 15px;
    padding: 0.5em 0;
}
small {
	display: inline-block;
}
#demo {
  display: grid;
  width: 700px;
  height: 500px;
  max-width: 100%;
  min-height: 300px;
  margin: auto;
  padding: 20px;
  border: 2px dashed;
  --c: shape(from 25.76px 11.26px,curve to calc(1.72% + 28.97px) 14.5px with calc(0% + 30px) 1px,curve to calc(5.17% + 26.9px) 21px with calc(3.45% + 27.93px) 28px,curve to calc(8.62% + 24.83px) 9.5px with calc(6.9% + 25.86px) 14px,curve to calc(12.07% + 22.76px) 3.5px with calc(10.34% + 23.79px) 5px,curve to calc(15.52% + 20.69px) 14px with calc(13.79% + 21.72px) 2px,curve to calc(18.97% + 18.62px) 17px with calc(17.24% + 19.66px) 26px,curve to calc(22.41% + 16.55px) 13.5px with calc(20.69% + 17.59px) 8px,curve to calc(25.86% + 14.48px) 10.5px with calc(24.14% + 15.52px) 19px,curve to calc(29.31% + 12.41px) 3.5px with calc(27.59% + 13.45px) 2px,curve to calc(32.76% + 10.34px) 15.5px with calc(31.03% + 11.38px) 5px,curve to calc(36.21% + 8.28px) 18px with calc(34.48% + 9.31px) 26px,curve to calc(39.66% + 6.21px) 14px with calc(37.93% + 7.24px) 10px,curve to calc(43.1% + 4.14px) 14px with calc(41.38% + 5.17px) 18px,curve to calc(46.55% + 2.07px) 13.5px with calc(44.83% + 3.1px) 10px,curve to calc(50% + 0px) 13.5px with calc(48.28% + 1.03px) 17px,curve to calc(53.45% + -2.07px) 16.5px with calc(51.72% + -1.03px) 10px,curve to calc(56.9% + -4.14px) 23.5px with calc(55.17% + -3.1px) 23px,curve to calc(60.34% + -6.21px) 25.5px with calc(58.62% + -5.17px) 24px,curve to calc(63.79% + -8.28px) 27px with calc(62.07% + -7.24px) 27px,curve to calc(67.24% + -10.34px) 16px with calc(65.52% + -9.31px) 27px,curve to calc(70.69% + -12.41px) 6px with calc(68.97% + -11.38px) 5px,curve to calc(74.14% + -14.48px) 16px with calc(72.41% + -13.45px) 7px,curve to calc(77.59% + -16.55px) 25px with calc(75.86% + -15.52px) 25px,curve to calc(81.03% + -18.62px) 18px with calc(79.31% + -17.59px) 25px,curve to calc(84.48% + -20.69px) 16px with calc(82.76% + -19.66px) 11px,curve to calc(87.93% + -22.76px) 25.5px with calc(86.21% + -21.72px) 21px,curve to calc(91.38% + -24.83px) 26.5px with calc(89.66% + -23.79px) 30px,curve to calc(94.83% + -26.9px) 23px with calc(93.1% + -25.86px) 23px,curve to calc(98.28% + -28.97px) 18.5px with calc(96.55% + -27.93px) 23px,curve to calc(100% - 26.11px) 18.11px with calc(100% - 30px) 14px,curve to calc(100% - 14.11px) 26.11px with calc(100% - 22.22px) 22.22px,curve to calc(100% - 3.5px) calc(2.63% + 28.42px) with calc(100% - 6px) calc(0% + 30px),curve to calc(100% - 6.5px) calc(7.89% + 25.26px) with calc(100% - 1px) calc(5.26% + 26.84px),curve to calc(100% - 8px) calc(13.16% + 22.11px) with calc(100% - 12px) calc(10.53% + 23.68px),curve to calc(100% - 3.5px) calc(18.42% + 18.95px) with calc(100% - 4px) calc(15.79% + 20.53px),curve to calc(100% - 10.5px) calc(23.68% + 15.79px) with calc(100% - 3px) calc(21.05% + 17.37px),curve to calc(100% - 12px) calc(28.95% + 12.63px) with calc(100% - 18px) calc(26.32% + 14.21px),curve to calc(100% - 12.5px) calc(34.21% + 9.47px) with calc(100% - 6px) calc(31.58% + 11.05px),curve to calc(100% - 14px) calc(39.47% + 6.32px) with calc(100% - 19px) calc(36.84% + 7.89px),curve to calc(100% - 11px) calc(44.74% + 3.16px) with calc(100% - 9px) calc(42.11% + 4.74px),curve to calc(100% - 13px) calc(50% + 0.00px) with calc(100% - 13px) calc(47.37% + 1.58px),curve to calc(100% - 9px) calc(55.26% + -3.16px) with calc(100% - 13px) calc(52.63% + -1.58px),curve to calc(100% - 13.5px) calc(60.53% + -6.32px) with calc(100% - 5px) calc(57.89% + -4.74px),curve to calc(100% - 13.5px) calc(65.79% + -9.47px) with calc(100% - 22px) calc(63.16% + -7.89px),curve to calc(100% - 7px) calc(71.05% + -12.63px) with calc(100% - 5px) calc(68.42% + -11.05px),curve to calc(100% - 7.5px) calc(76.32% + -15.79px) with calc(100% - 9px) calc(73.68% + -14.21px),curve to calc(100% - 16px) calc(81.58% + -18.95px) with calc(100% - 6px) calc(78.95% + -17.37px),curve to calc(100% - 21.5px) calc(86.84% + -22.11px) with calc(100% - 26px) calc(84.21% + -20.53px),curve to calc(100% - 12px) calc(92.11% + -25.26px) with calc(100% - 17px) calc(89.47% + -23.68px),curve to calc(100% - 5.5px) calc(97.37% + -28.42px) with calc(100% - 7px) calc(94.74% + -26.84px),curve to calc(100% - 6.39px) calc(100% - 19.39px) with calc(100% - 4px) calc(100% - 30px),curve to calc(100% - 19.39px) calc(100% - 4.39px) with calc(100% - 8.79px) calc(100% - 8.79px),curve to calc(98.28% - 28.97px) calc(100% - 12px) with calc(100% - 30px) calc(100% - 0px),curve to calc(94.83% - 26.9px) calc(100% - 14px) with calc(96.55% - 27.93px) calc(100% - 24px),curve to calc(91.38% - 24.83px) calc(100% - 4.5px) with calc(93.1% - 25.86px) calc(100% - 4px),curve to calc(87.93% - 22.76px) calc(100% - 17.5px) with calc(89.66% - 23.79px) calc(100% - 5px),curve to calc(84.48% - 20.69px) calc(100% - 17.5px) with calc(86.21% - 21.72px) calc(100% - 30px),curve to calc(81.03% - 18.62px) calc(100% - 17px) with calc(82.76% - 19.66px) calc(100% - 5px),curve to calc(77.59% - 16.55px) calc(100% - 18px) with calc(79.31% - 17.59px) calc(100% - 29px),curve to calc(74.14% - 14.48px) calc(100% - 11.5px) with calc(75.86% - 15.52px) calc(100% - 7px),curve to calc(70.69% - 12.41px) calc(100% - 11.5px) with calc(72.41% - 13.45px) calc(100% - 16px),curve to calc(67.24% - 10.34px) calc(100% - 16.5px) with calc(68.97% - 11.38px) calc(100% - 7px),curve to calc(63.79% - 8.28px) calc(100% - 23px) with calc(65.52% - 9.31px) calc(100% - 26px),curve to calc(60.34% - 6.21px) calc(100% - 20.5px) with calc(62.07% - 7.24px) calc(100% - 20px),curve to calc(56.9% - 4.14px) calc(100% - 23px) with calc(58.62% - 5.17px) calc(100% - 21px),curve to calc(53.45% - 2.07px) calc(100% - 21.5px) with calc(55.17% - 3.1px) calc(100% - 25px),curve to calc(50% - 0px) calc(100% - 19.5px) with calc(51.72% - 1.03px) calc(100% - 18px),curve to calc(46.55% - -2.07px) calc(100% - 22.5px) with calc(48.28% - -1.03px) calc(100% - 21px),curve to calc(43.1% - -4.14px) calc(100% - 19.5px) with calc(44.83% - -3.1px) calc(100% - 24px),curve to calc(39.66% - -6.21px) calc(100% - 11px) with calc(41.38% - -5.17px) calc(100% - 15px),curve to calc(36.21% - -8.28px) calc(100% - 6px) with calc(37.93% - -7.24px) calc(100% - 7px),curve to calc(32.76% - -10.34px) calc(100% - 4px) with calc(34.48% - -9.31px) calc(100% - 5px),curve to calc(29.31% - -12.41px) calc(100% - 11.5px) with calc(31.03% - -11.38px) calc(100% - 3px),curve to calc(25.86% - -14.48px) calc(100% - 16px) with calc(27.59% - -13.45px) calc(100% - 20px),curve to calc(22.41% - -16.55px) calc(100% - 11.5px) with calc(24.14% - -15.52px) calc(100% - 12px),curve to calc(18.97% - -18.62px) calc(100% - 6.5px) with calc(20.69% - -17.59px) calc(100% - 11px),curve to calc(15.52% - -20.69px) calc(100% - 6px) with calc(17.24% - -19.66px) calc(100% - 2px),curve to calc(12.07% - -22.76px) calc(100% - 11.5px) with calc(13.79% - -21.72px) calc(100% - 10px),curve to calc(8.62% - -24.83px) calc(100% - 9.5px) with calc(10.34% - -23.79px) calc(100% - 13px),curve to calc(5.17% - -26.9px) calc(100% - 7px) with calc(6.9% - -25.86px) calc(100% - 6px),curve to calc(1.72% - -28.97px) calc(100% - 4.5px) with calc(3.45% - -27.93px) calc(100% - 8px),curve to 28.59px calc(100% - 14.09px) with 30px calc(100% - 1px),curve to 22.59px calc(100% - 28.59px) with 27.17px calc(100% - 27.17px),curve to 10px calc(97.37% - 28.42px) with 18px calc(100% - 30px),curve to 1.5px calc(92.11% - 25.26px) with 2px calc(94.74% - 26.84px),curve to 12.5px calc(86.84% - 22.11px) with 1px calc(89.47% - 23.68px),curve to 14.5px calc(81.58% - 18.95px) with 24px calc(84.21% - 20.53px),curve to 14px calc(76.32% - 15.79px) with 5px calc(78.95% - 17.37px),curve to 19.5px calc(71.05% - 12.63px) with 23px calc(73.68% - 14.21px),curve to 18px calc(65.79% - 9.47px) with 16px calc(68.42% - 11.05px),curve to 23px calc(60.53% - 6.32px) with 20px calc(63.16% - 7.89px),curve to 18.5px calc(55.26% - 3.16px) with 26px calc(57.89% - 4.74px),curve to 5.5px calc(50% - 0px) with 11px calc(52.63% - 1.58px),curve to 1px calc(44.74% - -3.16px) with 0px calc(47.37% - -1.58px),curve to 12.5px calc(39.47% - -6.32px) with 2px calc(42.11% - -4.74px),curve to 20px calc(34.21% - -9.47px) with 23px calc(36.84% - -7.89px),curve to 23.5px calc(28.95% - -12.63px) with 17px calc(31.58% - -11.05px),curve to 22px calc(23.68% - -15.79px) with 30px calc(26.32% - -14.21px),curve to 14px calc(18.42% - -18.95px) with 14px calc(21.05% - -17.37px),curve to 7.5px calc(13.16% - -22.11px) with 14px calc(15.79% - -20.53px),curve to 15px calc(7.89% - -25.26px) with 1px calc(10.53% - -23.68px),curve to 27.5px calc(2.63% - -28.42px) with 29px calc(5.26% - -26.84px),curve to 23.76px 25.76px with 26px 30px,curve to 25.76px 11.26px with 21.51px 21.51px);
  overflow: hidden;
  resize: both;
}
#demo:before {
  content:"";
  clip-path: var(--c);
  background: linear-gradient(45deg in hsl, #ee9b00, #bb3e03);
}
body:has(input[value="wav-2"]:checked) #demo:before {
  border-shape: var(--c);
  clip-path: none;
  background: #faedcd;
  border: 5px solid #0a9396;
}
main article {
	margin: 0;
    padding-block: 10px;
    text-align: center;
    border-radius: 0;
}
main article form {
	text-align: left;
	margin-bottom: 0;
}
fieldset:last-child {
	margin-bottom: 0;
}
form legend {
	text-decoration: underline;
	font-size: 1.2em;
}
form label {
	cursor: pointer;
}
form legend span {
	display: inline-block;
	margin-left: 10px;
}
form fieldset {
	margin:  0;
}
main .code {
	overflow: auto;
	padding-bottom: 80px;
}
main .code code {
	font-size: 0.75em;
	cursor: text;
	color: var(--color);
}
pre[class*=language-] {
	margin: 0;
}
.code-e {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.grid > *{
  margin: 0!important;
}
.border-type {
    position: absolute;
    z-index: 3;
    left: 20px;
    top: 100px;
    display: grid;
    grid-gap: 10px;
}
.border-type label {
    position: relative;
    width: 70px;
    aspect-ratio: 1;
    display: grid;
    --mask-size: 18px;
}
.border-type label input {
    opacity: 0;
    grid-area: 1/1;
}
.border-type label span {
    position: absolute;
    left: 105%;
    top: 50%;
    translate: 0 -50%;
    white-space: nowrap;
    font-size: .9em;
    color: #fff;
    background: #000;
    padding: 2px 5px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: .3s;
}
.border-type label:hover span {
    opacity: 1;
}
.border-type label i {
    grid-area: 1/1;
    display: grid;
    border: 1px solid var(--pico-form-element-color);
    border-radius: 5px;
}
.border-type label i:before {
	content: "";
    display: grid;
    margin: 5px;
    background: var(--pico-form-element-color);
    --c: shape(from 9.59px 7.59px,curve to calc(8.33% + 9.17px) 7px with calc(0% + 11px) 7px,curve to calc(25% + 5.5px) 8px with calc(16.67% + 7.33px) 7px,curve to calc(41.67% + 1.83px) 8px with calc(33.33% + 3.67px) 9px,curve to calc(58.33% + -1.83px) 4.5px with calc(50% + 0px) 7px,curve to calc(75% + -5.5px) 2px with calc(66.67% + -3.67px) 2px,curve to calc(91.67% + -9.17px) 5.5px with calc(83.33% + -7.33px) 2px,curve to calc(100% - 10.29px) 9.29px with calc(100% - 11px) 9px,curve to calc(100% - 9.29px) 10.29px with calc(100% - 9.59px) 9.59px,curve to calc(100% - 8px) calc(10% + 8.80px) with calc(100% - 9px) calc(0% + 11px),curve to calc(100% - 7px) calc(30% + 4.40px) with calc(100% - 7px) calc(20% + 6.6px),curve to calc(100% - 3.5px) calc(50% + 0.00px) with calc(100% - 7px) calc(40% + 2.2px),curve to calc(100% - 4px) calc(70% + -4.40px) with calc(100% - 0px) calc(60% + -2.2px),curve to calc(100% - 9.5px) calc(90% + -8.80px) with calc(100% - 8px) calc(80% + -6.6px),curve to calc(100% - 9.59px) calc(100% - 9.59px) with calc(100% - 11px) calc(100% - 11px),curve to calc(100% - 9.59px) calc(100% - 5.09px) with calc(100% - 8.17px) calc(100% - 8.17px),curve to calc(91.67% - 9.17px) calc(100% - 2.5px) with calc(100% - 11px) calc(100% - 2px),curve to calc(75% - 5.5px) calc(100% - 6.5px) with calc(83.33% - 7.33px) calc(100% - 3px),curve to calc(58.33% - 1.83px) calc(100% - 9px) with calc(66.67% - 3.67px) calc(100% - 10px),curve to calc(41.67% - -1.83px) calc(100% - 8px) with calc(50% - 0px) calc(100% - 8px),curve to calc(25% - -5.5px) calc(100% - 6px) with calc(33.33% - -3.67px) calc(100% - 8px),curve to calc(8.33% - -9.17px) calc(100% - 5px) with calc(16.67% - -7.33px) calc(100% - 4px),curve to 7.11px calc(100% - 4.61px) with 11px calc(100% - 6px),curve to 5.11px calc(100% - 7.11px) with 3.22px calc(100% - 3.22px),curve to 6px calc(90% - 8.8px) with 7px calc(100% - 11px),curve to 6px calc(70% - 4.4px) with 5px calc(80% - 6.6px),curve to 7px calc(50% - 0px) with 7px calc(60% - 2.2px),curve to 3.5px calc(30% - -4.4px) with 7px calc(40% - -2.2px),curve to 2px calc(10% - -8.8px) with 0px calc(20% - -6.6px),curve to 6.09px 9.59px with 4px 11px,curve to 9.59px 7.59px with 8.17px 8.17px);
}
.border-type label input:checked + i:before {
	background: var(--pico-primary);
	border-color: var(--pico-primary);
}
.border-type label input:checked + i {
	box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
    border: 1px solid var(--pico-primary);
}
.border-type label:nth-child(1) i:before{
	clip-path: var(--c);
}
.border-type label:nth-child(2) i:before {
 	border: 3px solid var(--pico-form-element-color);
 	background: none!important;
 	border-shape: var(--c);
}

@media (max-width: 900px) {
	html {
		height: auto;
		min-height: 100%;
	}
	body {
		grid-template-rows: auto auto 1fr;
	}
	body header {
		padding: 0;
		order: -2;
	}
	main {
		grid-template-columns: 1fr;
	}
	main .code {
		padding-bottom: 15px;
	}
	.grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	main > section:first-child {
		resize: none;
	    border: none;
	    padding: 25px;
	    margin: 0;
	}
	main section:last-child {
		height: auto;
	}
	main > section:first-child:before,
	main > section:first-child:after {
		content: none;
	}
	#demo {
		width: 100%;
		min-height: auto;
		height: auto;
		aspect-ratio: 1.5;
	}
	.border-type {
	    position: static;
	    display: flex;
	    justify-content: center;
	}
	.border-type label span {
		bottom: 105%;
		left: 50%;
		top: auto;
		translate: -50% 0;
	}
}
@supports not (clip-path: shape(from 0 0,curve to 0 0 with 0 0)) {
	body::before {
		content:"⚠️ Sorry but there is no waves for you using this browser ⚠️";
		position: fixed;
		inset: 0;
		display: grid;
		place-content: center;
		text-align: center;
		background:#fffc;
	    z-index: 999;
   		color: #000;
    	font-size: 30px;
    	font-weight: bold;
	}
}

@supports not (border-shape: shape(from 0 0,curve to 0 0 with 0 0)) {
	.border-type {
		display: none;
	}
}