.intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.is-ready .intro {
    pointer-events: none;
}
.layout {
    width: 100vw;
    height: 100%;
	display: grid;
}
.layout__header {
    grid-area: hd;
    display: grid;
    align-items: center;
    user-select: none;
    grid-template-columns: calc(var(--btnsize)*2) 1fr;
}
.sceneBtn {
	justify-self: center;
	position: relative;
    width: var(--btnsize);
    height: var(--btnsize);
	background: var(--red);
    z-index: 1;
	display: flex;
    align-items: center;
    justify-content: center;
	transform: rotate(0deg);	
	transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.is-expanded .sceneBtn {
	transform: rotate(-11deg);
}
.sceneBtn_icon {
	position: relative;
	width: 50%;
	height: 50%;
	visibility: visible;
	transform: scale3d(0,0,1);
    -webkit-animation: spinningIcon .7s linear infinite;
    animation: spinningIcon .7s linear infinite;
}
body:not(.is-expanded) .sceneBtn_icon {
	visibility: hidden;
}
@-webkit-keyframes spinningIcon {
	0%, 100% {
		transform: translate3d(0,-1px,0) rotate(2deg);
	}
	25% {
		transform: translate3d(1px,0,0) rotate(0deg);
	}
	50% {
		transform: translate3d(0,1px,0) rotate(-2deg);
	}
	75% {
		transform: translate3d(-1px,0,0) rotate(0deg);
	}
}
@keyframes spinningIcon {
	0%, 100% {
		transform: translate3d(0,-1px,0) rotate(2deg);
	}
	25% {
		transform: translate3d(1px,0,0) rotate(0deg);
	}
	50% {
		transform: translate3d(0,1px,0) rotate(-2deg);
	}
	75% {
		transform: translate3d(-1px,0,0) rotate(0deg);
	}
}
.sceneBtn_icon svg {
	transition: transform .3s cubic-bezier(.35,.755,.42,.95);
    fill: var(--palegreen);
}
body:not(.is-expanded) .sceneBtn_icon svg {
	transform: scale3d(0,0,1);
}
.sceneBtn_close {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transition: transform .3s cubic-bezier(.35,.755,.42,.95);
	transform: translate3d(-50%,-50%,0) scale3d(0,0,1);
	visibility: hidden;
}
body:not(.is-expanded) .sceneBtn_close {
    transform: translate3d(-50%,-50%,0) scaleX(1);
	visibility: visible;
}
.sceneBtn_close:before {
    transform: rotate(45deg);
}
.sceneBtn_close:after {
    transform: rotate(-45deg);
}
.sceneBtn_close:after, .sceneBtn_close:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    display: inline-block;
    background-color: var(--palegreen);
}
/* .sceneBtn::before { */
    /* content: ""; */
    /* position: absolute; */
    /* background: #ff6a44; */
    /* transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
/* } */
/* .sceneBtn:hover::before { */
    /* transform: scale(1.06); */
/* } */

/* body:not(.is-expanded) .sceneBtn svg { */
    /* transition-delay: .2s; */
/* } */
/* .sceneBtn path { */
    /* transition: transform .5s cubic-bezier(0.645, 0.045, 0.355, 1) .1s; */
    /* transform-origin: 11px 11px; */
    /* transform: rotate(28deg); */
/* } */
/* body:not(.is-expanded) .sceneBtn:focus-visible path, body:not(.is-expanded) .sceneBtn:hover path { */
    /* transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s; */
/* } */
/* body:not(.is-expanded) .sceneBtn:hover path:first-child { */
    /* transform: rotate(90deg) translateY(0.3rem) !important; */
/* } */
/* body:not(.is-expanded) .sceneBtn:hover path:last-child { */
    /* transform: rotate(0deg) translateX(0.3rem) !important; */
/* } */
/* body:not(.is-expanded) .sceneBtn:hover path { */
    /* transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s; */
/* } */
.header__name {
	font-family: var(--because);
    font-size: 4rem;
    color: var(--mint);
	margin: 1rem;
}
.header__img {
	width: auto;
	height: calc(var(--offset) / 1.5);
	margin-left: 1rem;
}
.panel {
	position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
	background: var(--black);
}
.toggleBtn {
	justify-self: center;
	overflow: hidden;
/*     width: calc(var(--offset) / 2);
    height: calc(var(--offset) / 2);
    top: calc(var(--offset) / 4);
    right: calc(var(--offset) / 4);
    transform: rotate(16deg);
    transition: transform .3s cubic-bezier(0.645, 0.045, 0.355, 1) .1s; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
	font-family: var(--kartoon);
}
/* .toggleBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--red);
    transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
} */
.menu__nav {
	display: flex;
    flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
.menu__nav > a {
	margin: 0.5rem;
	/* filter: drop-shadow(2px 2px var(--mint)); */
	filter: drop-shadow(0.1rem 0.1rem 0.6rem var(--mint));
    font-size: 2rem;
	font-family: var(--yanone);
	color: var(--white);
    /* background: var(--palegreen); */
	/* border-radius: 0.3rem; */
    padding: 0.4rem 0.5rem;
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	transition: transform 0.2s;
}
.menu__nav > a:hover,
.menu__nav > a:focus {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);
}
.panel.invisible .toggleBtn {
    transform: scale(1) rotate(106deg);
    transition-delay: .2s
}
.toggleBtn svg {
    position: relative;
    width: 70%;
    height: 70%;
	fill: var(--white);
}
.panel.invisible .toggleBtn svg {
    transition-delay: .2s
}
.toggleBtn svg path {
    transition: transform .5s cubic-bezier(0.645, 0.045, 0.355, 1) .1s;
    transform-origin: 11px 11px;
    transform: rotate(28deg);
}
.panel.invisible .toggleBtn svg path:first-child {
    transform: rotate(90deg) translateY(0.25rem);
}

.panel.invisible .toggleBtn svg path:last-child {
    transform: rotate(0deg) translateX(0.25rem);
}
.panel.invisible .toggleBtn:hover path:first-child {
    transform: rotate(90deg) translateY(0.3rem) !important;
}
.panel.invisible .toggleBtn:focus-visible path, .panel.invisible .toggleBtn:hover path {
    transition: transform .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s;
}
.layout__footer {
    grid-area: ft;
	display: flex;
    align-items: flex-end;
}
.footer__btn {
	min-height: 4rem;
	display: grid;
    grid-template-columns: 100% 100%;
    grid-template-rows: 100%;
	align-items: center;
	transform: rotate(-6deg);
}
.footer__btn > span {
	font-family: var(--yanone);
    font-size: 2rem;
    color: var(--palegreen);
    -webkit-animation: rotateline 15s linear infinite;
    animation: rotateline 15s linear infinite;
}
.footer__btn > span:before {
	content: '';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--brightgreen);
}
@-webkit-keyframes blinkBG {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes rotateline {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
/* .footer__sn { */
    /* display: flex; */
    /* align-items: center; */
    /* color: var(--paleblack); */
/* } */
/* .footer__sn  > li { */
    /* position: relative; */
    /* display: flex; */
    /* overflow: hidden; */
	/* font-size: 1.5rem; */
/* } */
/* .footer__sn  > li:not(:first-child) { */
	/* margin-left: 1rem; */
/* } */
/* .footer__sn  > li:not(:last-child):after { */
    /* content: "/"; */
    /* display: block; */
	/* margin-left: 1rem; */
/* } */
/* .footer__by { */
	/* color: var(--black); */
	/* font-size: 1rem; */
/* } */
.layout__content {
    grid-area: content;
	font-family: var(--oswald);
    display: flex;
    flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.layoutStage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    pointer-events: none;
	transition: transform .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.layoutStage__mover,
.layoutStage__scaler,
.layoutStage__stage {
    overflow: hidden;
    will-change: transform;
    transition: transform .5s var(--transfunc), border-radius .5s var(--transfunc);
}
.layoutStage__stage {
    pointer-events: all
}
.layoutStage__stage canvas {
    width: 100%;
    height: 100%;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    font-style: normal;
    font-size: 100%;
    background-color: #f3f3f3;
    border: 0;
}
.layoutStage__outlay {
	position: absolute;
    width: 100%;
    pointer-events: all;
}
.outlay__content {
	grid-area: cnt;
	position: relative;
}
.blob__btn {
	position: absolute;
    width: calc(var(--offset)*2);
    height: var(--offset);
	top: 0;
	left: calc(100vw - var(--offset)*2);
    cursor: pointer;
	transition: left .5s var(--transfunc), top .5s var(--transfunc);
    display: grid;
    grid-template: 1fr 1fr /1fr max-content;
	opacity: 0;
}
.blob__btn svg {
    fill: var(--orange);
    width: 100%;
    height: 100%;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.blob__btn span {
	min-width: var(--offset);
    grid-column: 2 / 3;
    grid-row: 2 / 3;
	color: var(--black);
    font-size: calc(var(--fsize) * 3.5);
    font-family: var(--capture);
	text-align: left;
	padding-right: 1rem;
}
.outlay__wrap {
	width: var(--vw);
	height: 100%;
	display: grid;
	grid-template-rows: 1fr var(--offset);
	grid-template-columns: 1fr;
	grid-template-areas:
		"cnt"
		"weight";
}
.dialogue__main {
	padding-top: 0;
	padding-bottom: 3rem;
    overflow: hidden;
    overflow-y: scroll;
	scrollbar-color: var(--chief) var(--chief);
    scrollbar-width: thin;
    font-size: calc(var(--fsize) * 1.5);
	color: var(--black);
	display: flex;
	flex-direction: column;
}
.dialogue__main::-webkit-scrollbar {
	display: none;
}
.dialogue__item {
	position: relative;
	width: fit-content;
	max-width: 80%;
	margin-bottom: 1rem;
	display: inline-block;
	border-radius: 2rem;
	padding: 1rem 1.3rem;
}
.dialogue__item > img {
	width: 100%;
	border-radius: 0.2rem;
}
.dialogue__item.item__right {
	align-self: end;
	margin-left: 20%;
	margin-right: 1rem;
	background-color: var(--green);
	box-shadow: -3.4px 3.4px 3.5px rgba(0, 0, 0, 0.019), -11.4px 11.4px 11.6px rgba(0, 0, 0, 0.029), -2.5rem 2.5rem 2.5rem rgba(0, 0, 0, 0.05);
}
.dialogue__item.item__left {
	align-self: start;
	margin-right: 20%;
	margin-left: 1rem;
	background-color: var(--palegreen);
	box-shadow: 3.4px 3.4px 3.5px rgba(0, 0, 0, 0.019), 11.4px 11.4px 11.6px rgba(0, 0, 0, 0.029), 2.5rem 2.5rem 2.5rem rgba(0, 0, 0, 0.05);
}
.dialogue__item.item__right:before {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0;
	right: -1rem;
	height: 2rem;
	width: 2rem;
	background: var(--green);
	background-attachment: fixed;
	border-bottom-left-radius: 15px;
}
.dialogue__item.item__right:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: -1rem;
	width: 1rem;
	height: 2rem;
	background: var(--chief);
	border-bottom-left-radius: 1rem;
}
.dialogue__item.item__left:before {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: -1rem;
	height: 2rem;
	width: 2rem;
	background: var(--palegreen);
	border-bottom-right-radius: 15px;
}
.dialogue__item.item__left:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: -1rem;
	width: 1rem;
	height: 2rem;
	background: var(--chief);
	border-bottom-right-radius: 1rem;
}
.dialogue__answer {
    display: flex;
    flex-direction: column;
    align-items: center;
	opacity: 0;
}
.answer__back {
	position: relative;
    width: min(100%, 360px);
	height: auto;
    padding: 1rem;
    background: var(--white);
	margin-bottom: 0.5rem;
}
.answer__back:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: var(--white);
    transition: transform .3s cubic-bezier(.35,.755,.42,.95),background .3s cubic-bezier(.35,.755,.42,.95);
	-webkit-animation: blinkBG 1.5s cubic-bezier(.35,.755,.42,.95) infinite;
    animation: blinkBG 1.5s cubic-bezier(.35,.755,.42,.95) infinite;
}
.answer__back, .answer__back:before {
	border-radius: 2rem;
}
@-webkit-keyframes blinkBG {
	0%,to{
		transform:scaleX(1)
	}
	50%{
		transform:scale3d(1.015,1.02,1)
	}
}
@keyframes blinkBG {
	0%,to{
		transform:scaleX(1)
	}
	50%{
		transform:scale3d(1.015,1.02,1)
	}
}
.bubble {
	position: relative;
	display: inline-block;
}
.dot {
    width: 5px;
    height: 5px;
    display: inline-block;
    background: var(--black);
    margin-right: 3px;
    border-radius: 50%;
    animation: dotbounce 1.3s linear infinite;
}
.one {
    animation-delay: 0.6s;
}
.two {
    animation-delay: 0.5s;
}
.three {
    animation-delay: 0.8s;
}
@-webkit-keyframes dotbounce {
	30% {
		transform: translateY(-2px);
	}
	60% {
		transform: translateY(0px);
	}
	80% {
		transform: translateY(2px);
	}
	100% {
		transform: translateY(0px);
		opacity: 0.5;
	}
}
@keyframes dotbounce {
	30% {
		transform: translateY(-2px);
	}
	60% {
		transform: translateY(0px);
	}
	80% {
		transform: translateY(2px);
	}
	100% {
		transform: translateY(0px);
		opacity: 0.5;
	}
}
.answer__item {
	position: relative;
	width: 100%;
	margin: 0.5rem 0;
	min-width: 6rem;
    min-height: 6rem;
    height: fit-content;
	padding: 0.6rem 0.8rem;
}
.answer__item:disabled {
	cursor: default;
	background-color: var(--grey);
}
input.answer__item {
	font-size: calc(var(--fsize) * 2);
    color: var(--black);
    text-align: center;
	border: 2px solid transparent;
}
input.answer__item.not__valid {
	border: 2px solid var(--red);
}
input.answer__item:focus {
    border: 2px solid var(--black);
}
input.answer__item::-webkit-input-placeholder {
	color: var(--black);
}
input.answer__item::-ms-input-placeholder {
	color: var(--black);
}
input.answer__item::-moz-placeholder {
	color: var(--black);
}
input.answer__item::placeholder {
	color: var(--black);
}
input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}
datalist {
	position: absolute;
	background-color: white;
	border: 1px solid #000;
	border-radius: 0 0 5px 5px;
	border-top: none;
	width: 350px;
	padding: 5px;
}
.answer__label {
	cursor: pointer;
    min-width: 5rem;
    background-color: transparent;
    font-size: 3rem;
    color: var(--chief);
    text-align: center;
}
.answer__label:before {
	position: relative;
    content: '\1F4CE';
    line-height: 8rem;
}
.btn__input {
    border: none;
    background-color: transparent;
	width: 20%;
    min-width: 6rem;
	height: auto;
}
.btn__input::before {
	position: relative;
	content: "\2714";
    font-size: 3rem;
	line-height: 2rem;
    color: var(--orange);
}
.btn__input:hover::before {
    color: var(--black);
}
.modal {
	background: var(--mint);
	z-index: 10;
}
.modal__shape {
	position: absolute;
	z-index: 1;
	left: 50%;
    top: 50%;
	opacity: 1;
    transform: translate(-50%, -50%);
}
.modal__shape svg {
	position: absolute;
	display: block;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 115vh;
    min-height: 60vw;
	fill: var(--palegreen);
}
.modal__circle {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
	display: grid;
    grid-template-rows: 1fr 10rem;
    justify-items: center;
	align-items: center;
}
.modal__button {
    display: block;
	border-radius: 100%;
	border: 0 solid;
	background: var(--mint);
	width: 5rem;
    height: 5rem;
    display: inline-flex;
	align-items: center;
	justify-content: center;
    vertical-align: middle;
}
.modal__button svg {
    display: block;
	width: 60%;
	height: 60%;
	fill: var(--palegreen);
}
.modal__content {
	--cardoffset: 1rem;
	position: relative;
    width: 100%;
    height: 100%;
	overflow: hidden;
    overflow-y: scroll;
    scrollbar-color: var(--mint) transparent;
    scrollbar-width: thin;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
	font-family: var(--amatic);
}
.slider {
	width: 100%;
	height: fit-content;
    margin: 0 auto;
    user-select: none;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
.slider label {
	-webkit-transition: -webkit-transform 0.1s ease;
	-moz-transition: -moz-transform 0.1s ease;
	transition: transform 0.1s ease;
	filter: drop-shadow(2px 2px var(--brightgreen));
    -webkit-mask-image: none;
	cursor: pointer;
}
.cards label {
	width: calc(var(--btnsize) *2 + var(--cardoffset));
    height: calc(var(--btnsize) *2 + var(--cardoffset));
	margin: 0.6rem;
    border-radius: var(--cardoffset);
	background: var(--grey);
	border: calc(var(--cardoffset) / 2) solid var(--white);
}
.cards label:nth-child(2n+1) {
	transform: rotate(6deg);
}
.cards label:nth-child(2n) {
	transform: rotate(-6deg);
}
.cards label:hover {
	transform: scale(1.1);
}
.cards label:hover:has(>input:disabled)  {
	transform: scale(1);
}
.slider input {
	position: absolute;
    top: 0;
    left: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	cursor: pointer;
}
.slider label > input:disabled + .card__wrap {
	cursor: default;
	filter: blur(3px);
}
.cards label:has(>input:checked)  {
	border-color: var(--green);
}
.cards label > input:checked + .card__wrap > span {
	background-color: var(--green);
}
.rounded label > input:checked + .card__wrap {
	background-color: var(--green);
}
.rounded label {
	width: 10rem;
	height: fit-content;
	margin: 0.6rem;
    border-radius: 5rem;
	background: var(--grey);
	border: 0.6rem solid var(--white);
}
.rounded label:hover {
	transform: scale(1.1);
	background: var(--white);
}
.rounded label:hover:has(>input:disabled)  {
	transform: scale(1);
	background: var(--grey);
}
.modal__topic {
    color: var(--black);
	font-weight: bold;
    letter-spacing: 1px;
    font-family: var(--oswald);
	text-align: center;
	margin: 1.2rem 0;
	font-size: 2rem;
}
.card__wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	-webkit-transition: -webkit-transform 0.1s ease;
	-moz-transition: -moz-transform 0.1s ease;
	transition: transform 0.1s ease;
	border-radius: 0.5rem;
}
.rounded label > .card__wrap {
	width: 100%;
	height: 4rem;
    border-radius: inherit;
}
.card__wrap span {
	position: absolute;
    top: 8px;
    transform: rotate(3deg);
    background-color: var(--white);
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    width: calc(100% + 8px);
    white-space: nowrap;
    text-align: center;
    padding: 4px 0;
    font-size: 2rem;
	transition: background-color 0.3s ease;
}
.card__wrap > .img__circle {
	border-radius: 50%;
	width: calc(var(--btnsize) * 2);
	height: calc(var(--btnsize) * 2);	
}
.modal__text {
	text-align: center;
	margin-bottom: 1.2rem;
}
.modal__text input {
	width: 25rem;
    height: var(--btnsize);
    font-size: 2rem;
    letter-spacing: 1px;
    background-color: var(--grey);
    color: var(--black);
    filter: drop-shadow(2px 2px var(--brightgreen));
    border-radius: 0.5rem;
    text-overflow: ellipsis;
    text-align: center;
    border: none;
}
.modal__text input:focus {
	background-color: var(--white);
}
.modal__text input:disabled {
	cursor: default;
	filter: blur(3px);
}
.ymap {
	width: 100%;
}
#yamap {
	width: 100%;
	height: var(--maph);
	padding-bottom: 1rem;
}
.ymap__pin {
	position: absolute;
	top: calc(var(--maph)/2 - var(--btnsize)/2);
	left: calc(50% - var(--btnsize)/2);
	width: var(--btnsize);
	height: var(--btnsize);
	border-radius: 50% 50% 50% 0;
	background: var(--orange);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
    box-shadow: 0rem calc(var(--btnsize) / 2) calc(var(--btnsize) * 2) var(--orange);
    -webkit-box-shadow: 0rem calc(var(--btnsize) / 2) calc(var(--btnsize) * 2) var(--orange);
    -moz-box-shadow: 0rem calc(var(--btnsize) / 2) calc(var(--btnsize) * 2) var(--orange);
	cursor: pointer;
}
.ymap__marker {
	position:relative;
	border-color: var(--mint);
	padding: 1rem;
	width: auto;
	min-width: 4rem;
	background-color: var(--mint);
	color: var(--white);
	border-radius: 0.5rem;
	margin: 0 0 1rem;
}
.ymap__marker:before {
	content: "";
	display: block;
	position: absolute;
	border: 1rem solid transparent;
	top: 50%;
	left: 100%;
	margin-top: -1rem;
	border-left-color: inherit;
}
.ymap__marker:after {
	content: "";
	display: block;
	position: absolute;
	width: 2rem;
	height: 2rem;
	background-color: var(--mint);
	border-radius: 1rem;
	top: 50%;
	left: 100%;
	margin-left: 2rem;
	margin-top: -1rem;
}
.obtn {
    border-radius: 2rem;
	border: none;
	background-color: var(--orange);
    font-size: 1.4rem;
    color: var(--black);
	text-align: center;	
}
.ymap__btn {
    position: absolute;
    top: calc(50% - 2.5rem);
    left: calc(50% - 4rem);
    width: 8rem;
    height: 5rem;
}
.outlay__arrow {
    position: absolute;
    width: var(--offset);
    height: var(--offset);
	bottom: 0;
    left: 50%;
    transform: translateX(calc(var(--offset) / -2));
    cursor: pointer;
    background: var(--gradient);
    -webkit-clip-path: circle(40% at 50% 50%);
    clip-path: circle(40% at 50% 50%);
    transition: bottom .5s var(--transfunc), clip-path .5s cubic-bezier(.19,1,.22,1), -webkit-clip-path .5s cubic-bezier(.19,1,.22,1);
}
.outlay__arrow:hover {
    -webkit-clip-path: circle(40% at 45% 50%);
    clip-path: circle(40% at 45% 50%);
}
.outlay__arrow svg {
    width: 50%;
    height: 50%;
    fill: var(--white);
}
.outlay__name {
	grid-area: name;
	justify-self: end;
	display: grid;
	grid-template-columns: 3rem max-content 3rem var(--offset);
}
.outlay__name span {
	font-family: var(--yanone);
    font-size: 2.5rem;
    text-overflow: ellipsis;
    color: var(--black);
    line-height: var(--offset);
    text-align: center;
    max-width: calc(var(--vw) - 10rem - var(--offset) * 3);
    white-space: nowrap;
    overflow: hidden;
}
.outlay__brace svg {
	width: 100%;
	height: calc(var(--offset) - 1rem);
	fill: var(--brightgreen);
	transform: translateY(0.5rem);
}
.outlay__brace.second {
    transform: rotate(180deg);
}
.outlay__footer {
    grid-area: weight;
}
.tag__wrapper {
	position: relative;
	transform: translateY(calc(var(--offset) / 6));
}
.tag {
    position: absolute;
	width: max-content;
    height: var(--offset);
    left: 35px;
    border-radius: 1rem;
	padding: 0 1.2rem;
    overflow: hidden;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.tag span {
	display: inline-block;
    width: max-content;
    color: var(--black);
    margin-left: calc(var(--offset) / 3);
	text-align: center;
	font-family: var(--kartoon);
    font-size: calc(var(--fsize) * 2);
    line-height: var(--offset);
}
.tag:before {
	content: "";
    position: absolute;
    top: calc(var(--offset) / 2 - var(--offset) / 12);
    left: calc(var(--offset) / 6);
    border-radius: 50%;
    width: calc(var(--offset) / 6);
    height: calc(var(--offset) / 6);
    box-shadow: 0px 0px 0px calc(var(--offset) * 2) var(--chief);
    z-index: -1;
}
.string {
    position: absolute;
    width: 45px;
    height: calc(var(--offset) / 6 * 2.5);
    border: 2px solid var(--chief);
    border-top-right-radius: 100%;
    border-bottom-left-radius: 100%;
}
.c__mask {
	position: absolute;
	width: calc(100% - 3rem);
	height: calc(100% - 3rem);
	background-color: var(--white);
}
.c__mask:nth-child(1) {
    transform: rotate(1deg);
}
.c__mask:nth-child(2) {
	box-shadow: -2px 9px 10px rgb(0 0 0 / 10%);
    transform: rotate(-2deg);	
}
.c__mask:nth-child(3) {
	box-shadow: -1px 9px 10px rgb(0 0 0 / 6%);
    transform: rotate(2deg);	
}
.title {
	font-family: var(--kartoon);
	font-size: calc(var(--fsize) * 2.5);
	line-height: 5rem;
    color: var(--orange);
}
.c__basket {
	position: relative;
    width: calc(100% - 3rem);
    height: calc(100% - 5rem);
	background-color: var(--white);
}
.c__content {
    position: absolute;
	width: 100%;
	height: 100%;
	will-change: transform;
    display: flex;
    flex-direction: column;
    font-family: var(--oswald);
    font-size: calc(var(--fsize) * 1.5);
    color: var(--black);
	padding: 1rem;
}
.scrolled {
    overflow: hidden;
    overflow-y: scroll;	
}
.blur {
	filter: blur(8px);
}
.final {
	--firate: 5rem;
	background: rgba(255,255,255,0.3);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: var(--firate) 1fr;
	grid-template-areas:
		"sumd"
		"place";
	/* -webkit-clip-path: polygon(9% 22%,98% 10%,96% 90%,2% 96%);clip-path: polygon(9% 22%,98% 10%,96% 90%,2% 96%); */
}
.dy__price {
    grid-area: sumd;
	justify-self: left;
    background: var(--orange);
    width: fit-content;
    height: 5rem;
	padding-right: 1rem;
    padding-left: 1.6rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.dy__price span {
	font-size: calc(var(--fsize) * 3.5);
    font-family: var(--capture);
	line-height: 50px;	
}
.dy__price:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: -2.5rem;
	top: 0;
	border-right: 25px solid var(--orange);
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
}
.dy__price:after {
	position: absolute;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background-color: white;
	content: "";
	top: 2rem;
	left: -0.5rem;
}
.dy__clock {
	position: relative;
    width: 8rem;
    height: 8rem;
    border: 0.4rem solid var(--green);
    border-radius: calc(50% + 0.4rem);
    background-color: var(--chief);
    margin-bottom: 1rem;
    box-shadow: 0rem 0.5rem 5.2rem var(--green);
    -webkit-box-shadow: 0rem 0.5rem 5.2rem var(--green);
    -moz-box-shadow: 0rem 0.5rem 5.2rem var(--green);
}
.clock__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    font-family: var(--kartoon);
	color: var(--mint);
}
.clock__content span:nth-of-type(1) {
	align-self: end;
	font-size: calc(var(--fsize) * 2.2);
}
.clock__content span:nth-of-type(2) {
	font-size: calc(var(--fsize) * 2);
}
.dy__dot {
	position: absolute;
	top: calc(50% - 0.2rem);
	width: 100%;
	height: 0.4rem;
}
.dy__dot:before, .dy__dot:after {
	position: absolute;
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	background-color: var(--brightgreen);
	border-radius: 50%;
}
.dy__dot:before {
	left: 0;
}
.dy__dot:after {
	right: 0;
}
.dy__dot:nth-of-type(1) {
	transform: rotate(0deg);
}
.dy__dot:nth-of-type(2) {
	transform: rotate(30deg);
}
.dy__dot:nth-of-type(3) {
	transform: rotate(60deg);
}
.dy__dot:nth-of-type(4) {
	transform: rotate(90deg);
}
.dy__dot:nth-of-type(5) {
	transform: rotate(120deg);
}
.dy__dot:nth-of-type(6) {
	transform: rotate(150deg);
}
.dy__content {
	grid-area: place;
}
.dy__address {
    position: relative;
    padding: 0 1rem;
}
.dy__address span {
    font-size: calc(var(--fsize) * 1.8);
	color: var(--black);
	text-align: center;
}
.dy__address svg {
	position: absolute;
    width: 100%;
    fill: var(--red);
    opacity: 0.5;
    z-index: -1;
}
.c__item {
    display: grid;
    grid-template-columns: 1fr;
	grid-template-rows: 4rem 1fr;
	grid-template-areas:
		"header"
		"content";
}
.c__time {
	grid-area: time;
	color: var(--black);
    font-size: calc(var(--fsize) * 1.5);
    display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
}
.c__time > span:last-of-type {
	font-size: calc(var(--fsize) * 1.2);
}
.c__line {
	align-self: stretch;
	background-color: var(--brightgreen);
}
.c__header {
	grid-area: header;
    display: flex;
    flex-direction: row;
}
.c__service {
    display: flex;
    flex-direction: column;
}
.c__group {
	color: var(--black);
	font-family: var(--amatic);
    font-size: calc(var(--fsize) * 1.8);
	line-height: 4rem;
}
/* .c__group::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -0.5rem;
    width: calc(100% + 1rem);
    height: 20%;
    background-color: var(--brightgreen);
    opacity: 0.8;
    z-index: -1;
    transform: translateY(-1rem) rotate(1deg);
} */
.c__goods {
	grid-area: content;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	align-items: center;
    color: var(--black);
    font-size: calc(var(--fsize) * 1.5);
}
.c__good {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-template-areas:
		"header header"
		"cards cards"
		"count price";
	justify-items: center;
	background-color: var(--honeydew);
	border-radius: 0.5rem;
	box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.c__chbox {
	grid-area: header;
}
.c__cards {
	grid-area: cards;
    user-select: none;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
.c__qty {
	grid-area: count;
	justify-self: start;
    font-size: calc(var(--fsize) * 1.4);
    line-height: calc(var(--fsize) * 2);
/*     border-radius: 255px 15px 205px 35px/35px 225px 35px 255px;
    border: 3px solid var(--chief);
    padding: 0.5rem; */
    color: var(--brightgreen);
}
.c__title {
    padding: 0.5rem;
    font-size: calc(var(--fsize) * 1.4);
    text-align: center;
	border-radius: 0.5rem;
	background-color: var(--grey);
    color: var(--black);
}
.c__price {
	grid-area: price;
	justify-self: end;
	height: 4rem;
    line-height: 4rem;
	text-align: center;
	color: var(--mint);
	display: inline-block;
	font-size: calc(var(--fsize) * 2.3);
	font-weight: bold;
}
.c__price:after {
    content: "\20BD";
    font-size: calc(var(--fsize) * 1.4);
    margin: 0 0.2rem;
}
/* .c__category {
	position: absolute;
	display: grid;
	grid-template-columns: repeat(5, 1rem);
	grid-template-rows: repeat(5, 1rem);
}
.c__category svg {
	width: 100%;
	height: auto;
	grid-column: 1 / span 5;
	grid-row-start: 2;
}
.c__category:nth-of-type(1) svg path {
	fill: var(--mint);
}
.c__category:nth-of-type(even) svg path { 
	fill: var(--green);
} 
.c__category:nth-of-type(2n + 1) svg path { 
	fill: var(--orange);
}
.c__category:nth-of-type(3n + 2) svg path { 
	fill: var(--red);
}
.c__category:nth-of-type(6n + 3) svg path { 
	fill: var(--melon);
} */
.c__chbox input[type="checkbox"] { 
	display: none;
}
.c__chbox input[type="checkbox"] + label {
	display: block;
	position: relative;
	/* padding-left: calc(var(--fsize) * 3); */
	color: var(--paleblack);
	cursor: pointer;
}
.c__chbox input[type="checkbox"]:checked + label {
	color: var(--black);
}
/* .c__chbox input[type="checkbox"] + label:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--fsize) * 2);
	height: calc(var(--fsize) * 2);
	border: 1px solid var(--grey);
}
.c__chbox input[type="checkbox"]:checked + label:before {
	width: calc(var(--fsize) * 1);
	top: calc(-0.5 * var(--fsize));
	left: calc(0.5 * var(--fsize));
	border-radius: 0;
	border-bottom-color: var(--mint);
	border-right-color: var(--mint);
	border-top-color: transparent;
	border-left-color: transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
} */
.stage__nav {
    position: absolute;
    bottom: calc(50% - var(--offset) + 2rem);
    left: 50%;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
	align-items: center;
}
.stage__nav ul {
	list-style: none;
    margin: 0;
    padding: 0;
}
.stage__nav ul li {
	align-items: center;
    display: grid;
    grid-template-columns: auto 1fr;
    position: relative;	
}
.stage__nav ul li button {
	width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.2rem solid var(--white);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: padding .4s cubic-bezier(.32,.94,.6,1);
    color: var(--black);
}
.stage__nav ul li div {
	background: var(--white);
    color: var(--black);
    border-radius: 1rem;
    height: 100%;
    padding: 0 2rem;
    text-align: left;
    width: -moz-fit-content;
    width: fit-content;
	font-size: 1.5rem;
    line-height: 1.5rem;
}
.qrcode {
    padding: 2rem;
    box-shadow: 0rem 0.5rem 5.2rem var(--green);
    border-radius: 1rem;
}
@media only screen and (min-width: 744px) {
    .layout {
		grid-template-rows: var(--offset) 1fr var(--offset);
        grid-template-columns: var(--offset) 1fr var(--indent);
        grid-template-areas: "hd hd hd" "mg stage content" ". . ft"
    }
    .layout__content {
		padding-right: var(--offset);
		padding-left: var(--offset);
    }
	@media only screen and (max-height: 412px) {
		.layout__content {
			padding-left: calc(var(--offset) / 2);
		}
	}
    .is-expanded .layoutStage__mover {
		transform: translate(calc((var(--offset) - var(--indent)) / 2), calc((var(--headerH) - var(--footerH)) / 2))
        /* transform: translate(calc(var(--offset) - 0.5*var(--vw) + ((var(--vw) - var(--indent) - var(--offset)) / 2)), calc((var(--headerH) - var(--footerH)) / 2)) */
    }
    .is-expanded .layoutStage__scaler {
        transform: scale(var(--stageScaleX), var(--stageScaleY))
    }
	.layoutStage__scaler {
		border-radius: 0;
	}
	.is-expanded .layoutStage__scaler {
		border-radius: var(--offset) / calc(var(--offset)/2);
	}
    .is-expanded .layoutStage__stage {
        transform: scale(calc(1 / var(--stageScaleX)), calc(1 / var(--stageScaleY)))
    }
	.is-expanded .blob__btn {
		top: var(--offset);
		left: calc(100vw - var(--offset)*2 - (var(--offset) + var(--indent))/2);
	}
	.is-expanded .outlay__arrow {
		bottom: var(--offset);
	}
	.layoutStage__outlay {
		height: calc(100% - var(--offset)*3);
		top: calc(var(--offset)*2);
	}
    .outlay__wrap {
		width: calc(var(--vw) - var(--indent) - var(--offset));
    }
	.modal__shape svg {
		width: 100vw;
	}
}
@media only screen and (max-width: 743px) {
	.layout {
		grid-template-rows: max-content 1fr 1rem;
        grid-template-columns: 100%;
        grid-template-areas: "hd hd hd" "content content content" "ft ft ft";
    }
	@media only screen and (max-height: 375px) {
		.layout {
			grid-template-rows: max-content 1fr 1rem;
			grid-template-columns: 100%;
			grid-template-areas: "hd hd hd" "content content content" "ft ft ft";
		}	
	}
    .is-expanded .layoutStage {
        transform: translate(-100%, 0);
    }
	.layout__header {
		min-height: var(--offset);
		background: transparent;
		box-shadow: var(--brightgreen) 0 5rem 4rem -3rem inset;
	}
	.layoutStage__outlay {
		height: calc(100% - var(--offset));
		top: var(--offset);
	}
	.footer__btn {
		transform: rotate(-2deg);
	}
	.menu__nav > a {
		font-size: 1.8rem;
	}
    .layout__content {
		padding-right: 1rem;
		padding-left: 1rem;
    }
	.c__header {
		flex-direction: column;
	}
	.c__goods {
		grid-template-columns: repeat(1, 1fr);
	}
	.modal__topic {
		margin: 0.8rem 0;
		font-size: 1.6rem;
	}
	@media (orientation: portrait) {
		.modal__shape svg {
			width: 180vw;
			height: 102vh;
		}
	}
	@media (orientation: landscape) {
		.modal__shape svg {
			width: 100vw;
			height: 150vh;
		}
	}
}
@media only screen and (max-height: 412px) {
	.dialogue__main, .obtn {
		font-size: calc(var(--fsize)*1.2);
	}
	.answer__back {
		padding: 0.5rem;
	}
	.answer__back, .answer__back:before, .obtn {
		border-radius: 1.2rem;
	}
	.answer__item {
		min-height: 3rem;
		margin: 0.3rem 0;
	}
}