.wiseSectionRoot,
#wiseCanvasContainer,
#lessonContentsBody,
#naviItemsBody
{
	overflow: hidden;
}
.wiseSectionRoot,
#sectionSortingQuizFullScreen,
#lessonContentsBody,
#naviItemsBody
{
	top:0;
	left: 0;
	z-index:0;
	width: 100vw;
	height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
	padding: 0;
	margin: 0;
	position: fixed;
	display: flex;
}

.wiseBaseLayer,
#wiseWhiteboardLayout,
.wiseWhiteboardArea
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    /* width: 100%;
    height: 100%; */
	pointer-events: none;
	display: flex;
}

.wiseInteractive,
.wiseClickableChildren *:not(.globalCanvas)
{
    pointer-events: auto;
}

#wisePanelWhiteboardBody {
	width: 100%;
	height: 100%;
	background: #e5e5e5;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* デバッグ 後で削除 */
#wisePanelwhiteboardViewMainContentArea{
	pointer-events: none !important;
}


#wiseBodyQuiz,
#wiseContentQuiz,
#wiseContentCreateLayers{
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

#wiseZoomStage.wisePanelMainContentContainer {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--wise-board-w, 100vw);
    height: var(--wise-board-h, 100vh);
    overflow: visible;
    transform-origin: top left;
}

#wiseCanvasContainer{
	background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

#wiseCanvasContainer,
.wiseContainersMainContentArea
{
	display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wise-board-w, 100vw);
    height: var(--wise-board-h, 100vh);
    /* pointer-events: none;           既存維持でOK（イベント設計が別なら） */
}

#canvasLinkedContainer{
	width: 100%;
	height: 100%;
	position: absolute;
}
#wiseCanvasOriginal{
	z-index: var(--wise-front-z-index-plus5);
}
#wiseCanvasHandWriting{
	z-index: var(--wise-front-z-index-baseline);
}
#wiseBannerAdvertisementContainer{
	position: fixed;
	max-width: 60%;
	max-height: 90px;
	aspect-ratio: 728 / 90;
	bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
	overflow:auto;
	display: flex;

	/* デバッグ 後で復元 */
	display: none;
}
.wiseCanvas{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
    top: 0;
}


.movableContainer.is-dragging-front {
    z-index: var(--wise-front-z-index-plus4) !important;
	border: none !important;

}
.textAreaContainer.is-dragging-front {
    background-color: white !important;
	border: none !important;
}
.wordContainer,
.stickyNoteContainer,
.textAreaContainer{
	/* cursor: move; */
	margin: 0;
	color: #000;
	background-color:rgba(0, 0, 0, 0);
	border: 0;
	position: absolute;
	display: flex;
}
.clickableContainer{
	margin: 0;
	color: #000;
	background-color:#FFF;
	position: absolute;
	display: flex;
	border: 1px solid #999;
	z-index: 9999;
}

.clickableContainer.horizontalLayout{
	border: none;
}

.linkView{
	border: 1px solid #999 !important;
}

.selectedMovableContainer{
	border: 1px solid #999 !important;
}
.selectedMenuContainer{
	display: block !important;
}

.deleteTarget{
	background-color:#f00 !important;
	opacity: 0.5;
}

#wiseSideMenuCreatestickyNoteInput{
	padding: 10px;
}
.wordBaseContainer,
.puzzlePieceBaseContainer,
.clickableBaseContainer{
	padding: 5px 10px 5px 5px;
	/* cursor: move; */
}
.wordInnerContainer,
.puzzlePieceInnerContainer{
	line-height: 1.2;
	max-width: 75vw;
	overflow-wrap: break-word;
}
.stickyNoteInnerContainer{
	line-height: 1.2;
	overflow-wrap: break-word;
}
.clickableInnerContainer{
	line-height: 1.2;
	max-width: 75vw;
	white-space: nowrap;
}
.linkContainer{
	position: absolute;
	opacity: 0.5;
	display: none;
}
.linkContainer.linkContainer-selected{
	background-color: red !important;
}
.linkContainer.linkContainer-displayed{
	display: block;
}
.linkContainer.linkContainer-displayed-toSentence{
	background-color: var(--main-color-3);
	display: block;
}

/* .phraseClauseContainer .leftLinkContainer{
	background-color: #fff !important;
} */
.leftLinkContainer{
	background-color: var(--main-color-1);
	left: 0;
}
.rightLinkContainer{
	background-color: var(--main-color-1);
	right: 0;
}


.linkMarker{
	width: 10px;
	height: 10px;
	background-color: #fff;
	position: absolute;

	/* cursor: default; */
	opacity: 0;
}
.leftLinkMarker{
	top: 50%;
	left: 0;
	transform: translateY(-50%) translateX(50%);
}
.rightLinkMarker{
	top: 50%;
	right: 0;
	transform: translateY(-50%) translateX(-50%);
}
.clickableLeftLinkMarker,
.clickableRightLinkMarker{
	position: absolute;
	opacity: 0;
}

.stickyNoteBaseContainer{
	padding: 0 2px;
}
.wordMenuContainer,
.stickyNoteMenuContainer,
.textAreaMenuContainer{
	/* temporary setting */
	width: 20px;
	height: 15px;
	right: 0;
	transform: translateX(50%) translateY(-50%);
	/* temporary setting */

	background-color: var(--main-color-3);
	border-radius: 40vh;
	position: absolute;
	display: none;
	/* cursor: pointer; */
}
.stickyNoteMenuContainer{
	display: none;
}

.textAreaBaseContainer{
	padding:0 5px 0 5px;
}

/* .innerContainerTextArea{
	font-family: var(--main-font-family-1) !important;
	margin: 2px 0;
	padding: 2px;
	resize: none;
	line-height: 1.2;
	height: 50px;
	width: 50px;
	color: black;
	background-color:rgba(0, 0, 0, 0);
	border-style: none;
	overflow:hidden;
	display:block;
} */

.innerContainerTextArea{
    font-family: var(--main-font-family-1) !important;
    margin: 2px 0;
    padding: 2px;
    resize: none;
    line-height: 1.2;
    height: auto;
    min-height: 0;
    width: 50px;
    color: black;
    background-color: rgba(0, 0, 0, 0);
    border-style: none;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}
.innerContainerTextArea.emptyText{
	border: 1px solid black;
}

.stickyNoteContainerTextArea {
	color: black;
}

#puzzlePieceSpan,
.createWordSpan,
#phraseClauseElementSpanMerged,
.phraseClauseElementSpan{
	position: absolute;
	white-space: nowrap;
	z-index: 9999;
}

.createWordSpan{
	left:200%;
	top:30%;
	padding:10px;
	background: rgba(255,255,255,1);
	transform: translateY(-50%) translateX(-50%);
	transition: all 0.5s ease-out;
}
.createWordSpan.spanOpen{
	left:25%;
}

.phraseClauseElementSpan{
	/* top:30%; */
	/* padding:10px; */

	padding: 5px 10px 5px 10px;
	background: rgba(255,255,255,1);
	transform: translateX(-50%);
	transition: all 0.5s ease-out;
}
.phraseClauseElementSpan.spanHidden{
	left:200% !important;
}
.phraseClauseElementSpan.spanOpen{
	left:25% !important;
}
.phraseClauseElementSpan.spanAssemble{
	/* left:25% !important; */
	top:50% !important;
	transform: translateY(-50%) !important;
}
#phraseClauseElementSpanMerged{
	left:25% !important;
	top:50%;
	transform: translateY(-50%);
	padding:10px;
	background: rgba(255,255,255,1);
	transition: all 0.5s ease-out;
}

#penCursorSpan,
#globalPenCursorSpan
{
    /* position: absolute; */
    width: 12px;
    height: 12px;
    border: 2px solid #000;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 10;
}


#penCursorSpan
{
    position: absolute;
}
#globalPenCursorSpan
{
    position: fixed;
}

#eraserSpan{
	display: inline-block;
	background-color: white;
	border:1px solid black;
	border-radius: 50%;
	position: absolute;
	transform: translateY(-50%) translateX(-50%);
	z-index:0;
}


/* ーーーーーーーーーーーーーーーーーー
modal
ーーーーーーーーーーーーーーーーーー */

body.modalOpen{
	height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
	overflow-y: hidden;
}

.wiseModal{
	position: fixed;
	z-index: var(--wise-front-z-index-plus4);
	display: flex;
	flex-direction: column;
	right: -100%;
	background-color: #fff;
	border-left: solid 1px #ddd;
	transition: all 0.5s ease-out;
}
.wiseModal.dragging{
	transition: none;
}
.wiseModal.wiseModal-open {
	right: 0 !important;
}

#wiseSideMenuAddWordOptions.wiseModal.wiseModal-open
{
	left: 0 !important;
}

.wiseModal:not(#wiseSideMenuAddWordOptions).wiseModal-open {
	right: 0 !important;
}


.wiseHalfModal,
.globalHalfModal
{
	width: 50%;
}




.wiseModal li:hover,
.sentenceLayerUpdateScreenSideMenuUsedGrammarIdSelectedGrammartLi:hover,
.manageRoomModalUiAddContentsLi:hover,
.naviItemsSideMenuAddContentsLi:hover,
.panelOverlaySharedContentsUi li:hover,
.grammarInsightsHomeworkLinkDisplayAreaUl li:hover
{
	background-color: var(--main-color-1);
}

#wiseSideMenuCallActionHistory{
	opacity: 0.6;
}
#wisePanelLessonContentsUiSearchGrammar{
	opacity: 0.9;
}


.wiseSideMenuContents,
.manageRoomModalUiContents,
.naviItemsSideMenuContents,
.sentenceLayerMenuContents
{
	width: 100%;
	height: 100%;
	overflow: auto;
	overscroll-behavior-y: contain;
}

.searchWordListLi,
.searchWordListLiLabel.display-on,
.manageRoomModalUiSelectedContentsLi,
.naviItemsSideMenuSelectedContentsLi,
.wiseSideMenuSearchGrammarGrammarListLi,
.searchGrammarListLiLabel,
.sentenceLayerMenuLi
{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
	width: 100%;
	height: 100%;
}


.searchWordListLiButton.display-on,
.searchWordListLiDiv.display-on{
	display:block;
}

.searchWordListLiButton,
.searchWordListLiDiv,
.searchWordListLiLabel{
	display:none;
}



.sentenceLayerMenu{
	border: 2px solid var(--main-color-1);
}
.wiseSideMenuSearchArea,
.manageRoomModalUiSearchArea
{
	display: flex;
}
.wiseSideMenuSearchForm,
.manageRoomModalUiSearchForm
{
	flex-basis:80%;
}
.wiseSideMenuSearchInput,
.manageRoomModalUiSearchInput
{
	padding: 0.8em 1em !important;
	margin: 0 !important;
}
.wiseSideMenuSearchAreaButton,
.manageRoomModalUiSearchButton
{
	flex-basis:20%;
}
.wiseSideMenuTextInputArea,
.manageRoomModalUiTextInputArea
{
	font-size:16px !important;
}

.wiseSideMenuTitleContainer,
.manageRoomModalUiTitleContainer,
.naviItemsSideMenuTitleContainer,
.sentenceLayerMenuTitleContainer
{
	display: flex;
	border:1px solid #000;
}
.wiseSideMenuCloseButton,
.wiseSideMenuAddWordButtons
{
	width: 100px;
}

#wisePanelGrammarExplanationView,
#wisePanelMemoPadView{
	z-index: var(--wise-front-z-index-plus3);
}


.wiseSideMenuTitle,
.sentenceLayerMenuTitle
{
	width: calc(100% - 50px);
	justify-content: center;
	align-items: center;
	background: var(--main-color-1);
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
}

.selectedLiWiseSideMenuContents
{
	background: var(--main-color-1);
}


.wiseSideMenuHandle
{
	width: 10px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: ew-resize;
	z-index: var(--wise-front-z-index-plus3);
}
@media (hover: none) and (pointer: coarse) {
	.wiseSideMenuHandle
	{
		width: 20px;
	}
}

.wiseSideMenuViewWordInformationResultContentsViewExplanation{
	user-select: none !important;
	-moz-user-select: none !important;
	-webkit-user-select: none !important;
	-ms-user-select: none !important;
}



#wiseSideMenuCreateStickyNoteDrawingColors{
	margin: 20px auto auto 20px;
}

@keyframes spin {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
}

.itemOfPhraseClauseContainer{
	display: none;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */

/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.wiseContextMenuRoot{
	position:fixed;
	left:0px;
	top:0px;
	padding:0 20px;
	border:1px solid #000;
	background-color:#fff;
	z-index: var(--wise-front-z-index-plus3);
}

.wiseContextMenuRoot ul{
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none;
}
.wiseContextMenuRoot li,
.sentenceLayerUpdateScreenSideMenuUsedGrammarIdSelectedGrammartLi
{
	cursor: pointer;
}
.wiseContextMenuRoot li:hover{
	background-color: var(--main-color-1);
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
.wiseSideMenuViewWordInformationResultHeadline{
	font-size: 18px;
	padding:0 0 0 10px;
	margin:10px 0 0 0;
	border-bottom: 3px solid var(--main-color-1);
}

.wiseSideMenuViewWordInformationResultContentsText{
	padding:10px 10px 0 20px;
	margin: 0 0 30px 0;
}
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
#wiseSideMenuAddWordDisplayAreaContainer{
	position: relative;
}
#wiseSideMenuAddWordOptionsDropDownMenuArea{
	width: 100%;
	height: 100%;
	position:relative;
	overflow: auto;
	overscroll-behavior-y: contain;
}
.wiseSideMenuAddWordOptionsDropDownMenuContainer{
	width: 90%;
	margin: 10px auto 20px auto;
}
.wiseSideMenuAddWordOptionsHeadline{
	font-size: 18px;
	padding:0 0 0 10px;
	margin:10px 0 0 0;
	border-bottom: 3px solid var(--main-color-1);
	margin: 0 0 10px 0;
}



.wiseMenuBarEraserToggle.wiseMenuBarEraserToggle-selected{
	color: #000;
	background-color: var(--main-color-1);
}

.wiseMenuBar,
.workshopLessonMenuBar,
.globalVerticalToolbarMenuBar
{
	max-width: 75%;
	min-height: 45px;
	display: flex;
	position: fixed;
	align-items: center;
	background-color: #fff;
	border: solid 1px #ddd;
	visibility: hidden;
	flex-wrap: wrap;
}
.wiseMenuBar.wiseMenuBar-open,
.workshopLessonMenuBar.workshopLessonMenuBar-open,
.globalVerticalToolbarMenuBar.globalVerticalToolbarMenuBar-open
{
	z-index: var(--wise-front-z-index-plus5);
	visibility: visible;
}

.wiseMenuBarButton,
.workshopLessonMenuBarButton,
.globalVerticalToolbarMenubarButton,
.wisePanelLessonContentsUiButton
{
	display: inline-block;
	margin: 5px;
	padding: 5px;
	border: solid 1px #ddd;
	border-radius: 5px;
	line-height: 1.0;
	/* cursor: pointer; */
	color: #000000;
}

#quizMenuBarButtonConfirm{
	background-color: var(--main-color-1);
	border: solid 1px var(--main-color-1);
}
.wiseMenuBarButtonSelectColor,
.wiseSideMenuCreateStickyNoteButtonSelectColor{
	width: 40px;
	height: 35px;
	display: inline-block;
	margin: 0 5px 0;
	padding: 5px;
	border: solid 1px #ddd;
	border-radius: 5px;
	line-height: 1.0;
	/* cursor: pointer; */
}
.wiseSideMenuCreateStickyNoteButtonSelectColor{
	height: 40px;
}

.wiseMenuBarButtonSelectColor.SelectColorBlack{
	background-color: black;
}
.wiseMenuBarButtonSelectColor.SelectColorRed{
	background-color: rgb(255, 0, 0);
}
.wiseMenuBarButtonSelectColor.SelectColorBlue{
	background-color: rgb(0, 0, 255);
}
.wiseMenuBarButtonSelectColor.SelectColorOrange{
	background-color: rgb(255, 165, 0);
}
.wiseMenuBarButtonSelectColor.SelectColorGreen{
	background-color: rgb(0, 128, 0);
}

.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorWhite,
.wisePaletteColorSquare.SelectColorWhite,
.stickyNoteBaseContainerColorWhite
{
	background-color: rgb(245, 245, 245);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorRed,
.wisePaletteColorSquare.SelectColorRed,
.stickyNoteBaseContainerColorRed
{
	background-color: rgb(255, 50, 0);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorBlue,
.wisePaletteColorSquare.SelectColorBlue,
.stickyNoteBaseContainerColorBlue
{
	background-color: rgb(80, 230, 245);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorOrange,
.wisePaletteColorSquare.SelectColorOrange,
.stickyNoteBaseContainerColorOrange
{
	background-color: rgb(245, 155, 0);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorGreen,
.wisePaletteColorSquare.SelectColorGreen,
.stickyNoteBaseContainerColorGreen
{
	background-color: rgb(127, 255, 127);
}
.wiseSideMenuCreateStickyNoteButtonSelectColor.SelectColorYellow,
.wisePaletteColorSquare.SelectColorYellow,
.stickyNoteBaseContainerColorYellow
{
	background-color: rgb(255, 255, 0);
}


#wiseChartScreenChart,
#wiseQuizzesScreen,
#landingPageQuizzesScreen,
#wisePoliteFormPlainFormChart
{
	height: 90vh;
	height: calc(var(--vh, 1vh) * 90);
	overflow-x: hidden;
}

#wiseChartScreenChartSection,
#wisePoliteFormPlainFormTableSection,
#sentenceLayerUpdateOverrideScreen
{
	height: 90%;
	overflow: auto;
}
#wiseChartScreenChartButtonsSection{
	height: 10%;
}
#wiseChartScreenButtonExit{
	margin: 20px 0 0 0;
}
.wiseChartScreenChartHeaderX,
.wiseChartScreenChartHeaderY,
.wisePoliteFormPlainFormTableTextarea{
	min-width: 200px !important;
	padding: 5px !important;
	margin: 0 !important;
}
.wiseChartScreenChartHeaderY{
	max-width: 200px;
}



.quizScreenSection,
.sentenceLayerUpdateScreenSection,
.wiseChartScreenSection
{
	margin-bottom: 30px;
}
.quizScreenButtonsSection,
.sentenceLayerUpdateScreenButtonsSection,
.grammarOutlinePreviewScreenButtonsSection{
	display: flex;
	justify-content: center;
}
.quizUsersManualScreenSection
{
	margin-bottom: 100px;
}

.quizScreenContainer,
.sentenceLayerUpdateScreenContainer{
	margin-bottom: 40px;
}

.quizScreenContainerTitle,
.sentenceLayerUpdateScreenContainerTitle{
	font-size: 24px;
	text-align: left;
	margin-bottom: 10px;
}

.quizScreenContainerContent,
.sentenceLayerUpdateScreenContainerContent{
	font-size: var(--main-font-size-1);
	text-align: left;
	padding-left: 30px;
	margin-bottom: 30px;
}

.quizFeedbackScreenSectionMessage{
	margin-bottom: 50px;
}

.quizScreenButton,
.wiseChartScreenButton,
.sentenceLayerUpdateScreenButton,
#wisePoliteFormPlainFormButtonExit,
.grammarOutlinePreviewScreenButton,
.quizContentsButton,
.workshopContentsButton,
.quizItemButton,
.quizFeedbackScreenContentExplanationToGrammarButton
{
	background-color: var(--main-color-1);
	color: black;
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 18px;
	margin:5px;
}



.wiseChartScreenButtonsSection{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#wiseChartScreenDropDownMenuAreaSelect{
	text-align: center;
}
#wiseChartScreenInflectionsUl{
	list-style-type: none;
	list-style-position: inside;
	padding-left: 0;
}
.wiseChartScreenInflectionsLi{
	text-align: left;
	margin: 0 0 10px 20px;
}
.wiseChartScreenInflectionsLiCheckbox{
	transform: scale(2);
	margin: 0 20px 0 0;
}
.wiseChartScreenInputs{
	width: 40% !important;
}

.wisePoliteFormPlainFormTableTd{
	display: flex;
	justify-content: center;
	align-items: center;
}

.wisePoliteFormPlainFormTableTd > div{
	margin: 0 5px;
}

#wisePoliteFormPlainFormButtonExitSection{
	height: 10%;
}
#wisePoliteFormPlainFormButtonExit{
	margin: 20px 0 0 0;
}

#plainformQuizTableSection{
	margin-bottom: 50px;
}

#plainformQuizTable *{
	font: var(--main-font-size-1) var(--main-font-family-1);
}
/* #plainformQuizCoution{
	font: var(--main-font-size-1) var(--main-font-family-1) !important;
	color: red;
} */
.plainformQuizTableAnswersDiv{
	font: var(--main-font-size-1) var(--main-font-family-1) !important;
	background-color:var(--main-color-6);
}
.plainformContainers{
	display: flex;
	justify-content: center;
	align-items: center;
}
.plainformQuizTableTextarea,
.wiseChartScreenChartTextarea{
	font-family: var(--main-font-family-1) !important;
	margin: 2px 0;
	padding: 2px;
	resize: none;
	line-height: 1.2;
	height: 50px;
	overflow: hidden;
}
.plainformQuizTableTextarea.empty{
	border: 1px solid red;
}




/* トンボ用レイヤー（触れない） */
.wiseBoardMarksLayer{
    position: absolute;
    left: 0;
    top: 0;
	/* デバッグ 後で削除 */
    pointer-events: none !important;
	/* touch-action: auto; */
    z-index: 5; /* 必要なら調整 */
}

/* トンボ本体（小さい十字） */
.wiseBoardMark{
    position: absolute;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    opacity: 0.25; /* 邪魔にならない */
    pointer-events: none;
}

/* 縦線 */
.wiseBoardMark::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    transform: translateX(-50%);
}

/* 横線 */
.wiseBoardMark::after{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #000;
    transform: translateY(-50%);
}

/* ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーー */
/* ーーーーーーーーーーーーーーーーーー
scan
ーーーーーーーーーーーーーーーーーー */
#wiseScanline{
    position: fixed;
    left: 0; right: 0;
    height: 92px;
    bottom: -120px;
    pointer-events: none;
    --scan-core-thickness: 2px;
    background:
        linear-gradient(
            to bottom,
            transparent calc(50% - var(--scan-core-thickness)),
            color-mix(in srgb, var(--wise-cyan) 92%, transparent)
                calc(50% - var(--scan-core-thickness)),
            color-mix(in srgb, var(--wise-cyan) 92%, transparent)
                calc(50% + var(--scan-core-thickness)),
            transparent calc(50% + var(--scan-core-thickness))
        );
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateZ(0);
    will-change: transform, opacity;
}

#wiseScanline::before,
#wiseScanline::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(8px);
}

#wiseScanline::before{
    bottom: 50%;
    height: 50%;
    background:
        radial-gradient(120px 40px at 50% 100%,
            var(--wise-cyan-glow), transparent 65%),
        linear-gradient(to top,
            color-mix(in srgb, var(--wise-cyan-soft) 86%, transparent), transparent 80%);
    opacity: .9;
}

#wiseScanline::after{
    top: 50%;
    height: 50%;
    background:
        radial-gradient(120px 40px at 50% 0%,
            var(--wise-cyan-glow), transparent 65%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--wise-cyan-soft) 86%, transparent), transparent 80%);
    opacity: .85;
}

#wiseScanLabel{
    position: fixed; left: 16px; bottom: 16px;
    font: 600 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.65);
    opacity: 0; transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}

#wiseScanOverlay.scan-start #wiseScanline{
    animation: wiseScanTravel var(--wise-scan-duration) linear forwards;
    opacity: 1;
}
#wiseScanOverlay.scan-start #wiseScanLabel{
    opacity: .9; transform: translateY(0);
}

#wiseScanOverlay.scan-finish{
    transition: opacity var(--wise-outro-duration) ease;
    opacity: 0; pointer-events: none;
}

@keyframes wiseScanTravel{
    from { bottom: -200px; }
    to   { bottom: 100%; }
}

@keyframes wiseLogoCycle{
    0%   { opacity: 0; transform: scale(0.92); }
    30%  { opacity: 1; transform: scale(1.00); }
    60%  { opacity: 1; transform: scale(1.00); }
    70%  { opacity: 0; transform: scale(1.06); }
    85%  { opacity: 0; transform: scale(1.06); }
    100% { opacity: 0; transform: scale(0.92); }
}


@media (prefers-reduced-motion: reduce){
    #wiseScanline, .wiseStartOverlayLogo{ animation: none !important; }
    #wiseScanline{ opacity: 0 !important; }
    #wiseScanLabel{ opacity: 0 !important; transform: none !important; }
}

.wiseScanTarget {
    will-change: filter, transform;
}

.wise-scan-glow {
    position: relative;
    z-index: 9999;
    animation: wiseGlow 520ms ease-out 1;
}

.wise-scan-glow::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow:
		0 0 6px var(--wise-cyan),
		0 0 14px var(--wise-cyan),
		0 0 32px var(--wise-cyan),
		0 0 64px var(--wise-cyan);
    opacity: 0;
    transform: scale(0.96);
    animation: wiseGlowRing 520ms ease-out 1;
}

@keyframes wiseGlow {
    0% { filter: brightness(1.2) drop-shadow(0 0 0 var(--wise-cyan)); transform: translateZ(0) scale(1); }
    25% { filter: brightness(2.6) drop-shadow(0 0 22px var(--wise-cyan)) drop-shadow(0 0 44px var(--wise-cyan)); transform: translateZ(0) scale(1.02); }
    60% { filter: brightness(1.8) drop-shadow(0 0 26px var(--wise-cyan)); transform: translateZ(0) scale(1.01); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: none; }
}

@keyframes wiseGlowRing {
    0% { opacity: 0; transform: scale(0.90); }
    30% { opacity: 0.95; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.10); }
}

.wise-scan-glow-soft {
    position: relative;
    z-index: 9999;
    animation: wiseGlowSoft 520ms ease-out 1;
}

.wise-scan-glow-soft::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    box-shadow:
        0 0 3px var(--wise-cyan),
        0 0 8px var(--wise-cyan),
        0 0 16px var(--wise-cyan);
    opacity: 0;
    transform: scale(0.98);
    animation: wiseGlowRingSoft 520ms ease-out 1;
}

@keyframes wiseGlowSoft {
    0%   { filter: brightness(1.1) drop-shadow(0 0 0 var(--wise-cyan)); transform: scale(1); }
    25%  { filter: brightness(1.8) drop-shadow(0 0 12px var(--wise-cyan)); transform: scale(1.01); }
    60%  { filter: brightness(1.4) drop-shadow(0 0 16px var(--wise-cyan)); transform: scale(1.005); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: none; }
}

@keyframes wiseGlowRingSoft {
    0%   { opacity: 0; transform: scale(0.94); }
    30%  { opacity: 0.6; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.06); }
}

.wise-scan-clone {
    position: fixed;
    pointer-events: none;
    margin: 0 !important;
    box-sizing: border-box;
}